jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): fix timezone settings (#643)

Browse source
This commit is contained in:
Delirium 2022-07-26 17:06:15 +03:00 • committed by GitHub
parent 49b961968f
commit c36c380a5d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 53 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
frontend/app/components/BugFinder/SessionList/SessionListHeader.js
View file

@ -26,7 +26,7 @@ function SessionListHeader({ activeTab, count, applyFilter, filter }) {
}, [label]);
const { startDate, endDate, rangeValue } = filter;
const period = new Record({ start: startDate, end: endDate, rangeName: rangeValue });
const period = new Record({ start: startDate, end: endDate, rangeName: rangeValue, timezoneOffset: getTimeZoneOffset() });
const onDateChange = (e) => {
const dateValues = e.toJSON();
@ -36,10 +36,12 @@ function SessionListHeader({ activeTab, count, applyFilter, filter }) {
};
React.useEffect(() => {
const dateValues = period.toJSON();
dateValues.startDate = moment(dateValues.startDate).startOf('day').utcOffset(getTimeZoneOffset(), true).valueOf();
dateValues.endDate = moment(dateValues.endDate).endOf('day').utcOffset(getTimeZoneOffset(), true).valueOf();
applyFilter(dateValues);
if (label) {
const dateValues = period.toJSON();
dateValues.startDate = moment(dateValues.startDate).startOf('day').utcOffset(getTimeZoneOffset(), true).valueOf();
dateValues.endDate = moment(dateValues.endDate).endOf('day').utcOffset(getTimeZoneOffset(), true).valueOf();
applyFilter(dateValues);
}
}, [label]);
return (

4
frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx
View file

@ -39,7 +39,7 @@ function SelectDateRange(props: Props) {
};
const isCustomRange = period.rangeName === CUSTOM_RANGE;
const customRange = isCustomRange ? period.rangeFormatted(undefined, timezone) : '';
const customRange = isCustomRange ? period.rangeFormatted() : '';
return (
<div className="relative">
<Select
@ -75,7 +75,7 @@ function SelectDateRange(props: Props) {
width: '770px',
}}
>
<DateRangePopup onApply={onApplyDateRange} onCancel={() => setIsCustom(false)} selectedDateRange={period.range} />
<DateRangePopup timezone={timezone} onApply={onApplyDateRange} onCancel={() => setIsCustom(false)} selectedDateRange={period.range} />
</div>
</OutsideClickDetectingDiv>
)}

38
frontend/app/dateRange.js
View file

@ -2,6 +2,7 @@ import origMoment from "moment";
import { extendMoment } from "moment-range";
export const moment = extendMoment(origMoment);
import { DateTime } from "luxon";
import { TIMEZONE } from 'App/constants/storageKeys';
export const CUSTOM_RANGE = "CUSTOM_RANGE";
@ -42,39 +43,42 @@ export function getDateRangeLabel(value) {
}
export function getDateRangeFromValue(value) {
const tz = JSON.parse(localStorage.getItem(TIMEZONE));
const offset = tz ? tz.label.slice(-6) : 0;
switch (value) {
case DATE_RANGE_VALUES.LAST_30_MINUTES:
return moment.range(
moment().startOf("hour").subtract(30, "minutes"),
moment().startOf("hour")
moment().utcOffset(offset, true).startOf("hour").subtract(30, "minutes"),
moment().utcOffset(offset, true).startOf("hour")
);
case DATE_RANGE_VALUES.YESTERDAY:
return moment.range(
moment().utcOffset(offset, true).subtract(1, "days").startOf("day"),
moment().utcOffset(offset, true).subtract(1, "days").endOf("day")
);
case DATE_RANGE_VALUES.TODAY:
return moment.range(moment().startOf("day"), moment().endOf("day"));
case DATE_RANGE_VALUES.YESTERDAY:
return moment.range(
moment().subtract(1, "days").startOf("day"),
moment().subtract(1, "days").endOf("day")
);
return moment.range(moment().utcOffset(offset, true).startOf("day"), moment().utcOffset(offset, true).endOf("day"));
case DATE_RANGE_VALUES.LAST_24_HOURS:
return moment.range(moment().subtract(24, "hours"), moment());
return moment.range(moment().utcOffset(offset, true).subtract(24, "hours"), moment().utcOffset(offset, true));
case DATE_RANGE_VALUES.LAST_7_DAYS:
return moment.range(
moment().subtract(7, "days").startOf("day"),
moment().endOf("day")
moment().utcOffset(offset, true).subtract(7, "days").startOf("day"),
moment().utcOffset(offset, true).endOf("day")
);
case DATE_RANGE_VALUES.LAST_30_DAYS:
return moment.range(
moment().subtract(30, "days").startOf("day"),
moment().endOf("day")
moment().utcOffset(offset, true).subtract(30, "days").startOf("day"),
moment().utcOffset(offset, true).endOf("day")
);
case DATE_RANGE_VALUES.THIS_MONTH:
return moment().range("month");
return moment().utcOffset(offset, true).range("month");
case DATE_RANGE_VALUES.LAST_MONTH:
return moment().subtract(1, "months").range("month");
return moment().utcOffset(offset, true).subtract(1, "months").range("month");
case DATE_RANGE_VALUES.THIS_YEAR:
return moment().range("year");
return moment().utcOffset(offset, true).range("year");
case DATE_RANGE_VALUES.CUSTOM_RANGE:
return moment.range(moment(), moment());
return moment.range(moment().utcOffset(offset, true), moment().utcOffset(offset, true));
}
return null;
}

7
frontend/app/store.js
View file

@ -1,4 +1,4 @@
import { createStore, applyMiddleware } from 'redux';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import { Map } from 'immutable';
import indexReducer from './duck';
@ -9,13 +9,16 @@ const storage = new LocalStorage({
jwt: String,
});
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ && window.env.NODE_ENV === "development"
? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : compose;
const storageState = storage.state();
const initialState = Map({
jwt: storageState.jwt,
// TODO: store user
});
const store = createStore(indexReducer, initialState, applyMiddleware(thunk, apiMiddleware));
const store = createStore(indexReducer, initialState, composeEnhancers(applyMiddleware(thunk, apiMiddleware)));
store.subscribe(() => {
const state = store.getState();
storage.sync({

43
frontend/app/types/app/period.js
View file

@ -26,43 +26,43 @@ const RANGE_LABELS = {
[THIS_YEAR]: "This Year",
};
function getRange(rangeName) {
function getRange(rangeName, offset) {
switch (rangeName) {
case TODAY:
return moment.range(moment().startOf("day"), moment().endOf("day"));
case YESTERDAY:
return moment.range(
moment().subtract(1, "days").startOf("day"),
moment().subtract(1, "days").endOf("day")
moment().utcOffset(offset).subtract(1, "days").startOf("day"),
moment().utcOffset(offset).subtract(1, "days").endOf("day")
);
case LAST_24_HOURS:
return moment.range(
// moment().startOf("hour").subtract(24, "hours"),
// moment().startOf("hour")
moment().subtract(24, 'hours'),
moment(),
moment().utcOffset(offset).subtract(24, 'hours'),
moment().utcOffset(offset),
);
case LAST_30_MINUTES:
return moment.range(
moment().startOf("hour").subtract(30, "minutes"),
moment().startOf("hour")
moment().utcOffset(offset).startOf("hour").subtract(30, "minutes"),
moment().utcOffset(offset).startOf("hour")
);
case LAST_7_DAYS:
return moment.range(
moment().subtract(7, "days").startOf("day"),
moment().endOf("day")
moment().utcOffset(offset).subtract(7, "days").startOf("day"),
moment().utcOffset(offset).endOf("day")
);
case LAST_30_DAYS:
return moment.range(
moment().subtract(30, "days").startOf("day"),
moment().endOf("day")
moment().utcOffset(offset).subtract(30, "days").startOf("day"),
moment().utcOffset(offset).endOf("day")
);
case THIS_MONTH:
return moment().range("month");
return moment().utcOffset(offset).range("month");
case LAST_MONTH:
return moment().subtract(1, "months").range("month");
return moment().utcOffset(offset).subtract(1, "months").range("month");
case THIS_YEAR:
return moment().range("year");
return moment().utcOffset(offset).range("year");
default:
return moment.range();
}
@ -77,10 +77,11 @@ export default Record(
},
{
fromJS: (period) => {
const offset = period.timezoneOffset || 0
if (!period.rangeName || period.rangeName === CUSTOM_RANGE) {
const range = moment.range(
moment(period.start || 0),
moment(period.end || 0)
moment(period.start || 0).utcOffset(offset),
moment(period.end || 0).utcOffset(offset)
);
return {
...period,
@ -89,7 +90,7 @@ export default Record(
end: range.end.unix() * 1000,
};
}
const range = getRange(period.rangeName);
const range = getRange(period.rangeName, offset);
return {
...period,
range,
@ -97,14 +98,6 @@ export default Record(
end: range.end.unix() * 1000,
};
},
// fromFilter: filter => {
// const range = getRange(filter.rangeName);
// return {
// start: range.start.unix() * 1000,
// end: range.end.unix() * 1000,
// rangeName: filter.rangeName,
// }
// },
methods: {
toJSON() {
return {