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

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

Browse source
This commit is contained in:
Delirium 2022-07-21 17:28:28 +03:00 • committed by Shekar Siri
parent 26100b81e6
commit 00a3c52e8d
4 changed files with 46 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,7 +4,10 @@ import SortDropdown from '../Filters/SortDropdown';
import { numberWithCommas } from 'App/utils';
import SelectDateRange from 'Shared/SelectDateRange';
import { applyFilter } from 'Duck/search';
import Period from 'Types/app/period';
import Record from 'Types/app/period';
import { useStore } from 'App/mstore';
import { useObserver } from 'mobx-react-lite';
import { moment } from 'App/dateRange';
const sortOptionsMap = {
'startTs-desc': 'Newest',
@ -15,13 +18,30 @@ const sortOptionsMap = {
const sortOptions = Object.entries(sortOptionsMap).map(([value, label]) => ({ value, label }));
function SessionListHeader({ activeTab, count, applyFilter, filter }) {
const { settingsStore } = useStore();
const label = useObserver(() => settingsStore.sessionSettings.timezone.label);
const getTimeZoneOffset = React.useCallback(() => {
return label.slice(-6);
}, [label]);
const { startDate, endDate, rangeValue } = filter;
const period = new Period({ start: startDate, end: endDate, rangeName: rangeValue });
const period = new Record({ start: startDate, end: endDate, rangeName: rangeValue });
const onDateChange = (e) => {
const dateValues = e.toJSON();
dateValues.startDate = moment(dateValues.startDate).utcOffset(getTimeZoneOffset(), true).valueOf();
dateValues.endDate = moment(dateValues.endDate).utcOffset(getTimeZoneOffset(), true).valueOf();
applyFilter(dateValues);
};
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);
}, [label]);
return (
<div className="flex mb-2 justify-between items-end">
<div className="flex items-baseline">
@ -32,7 +52,7 @@ function SessionListHeader({ activeTab, count, applyFilter, filter }) {
{
<div className="ml-3 flex items-center">
<span className="mr-2 color-gray-medium">Sessions Captured in</span>
<SelectDateRange period={period} onChange={onDateChange} />
<SelectDateRange period={period} onChange={onDateChange} timezone={getTimeZoneOffset()} />
</div>
}
</div>

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

@ -6,17 +6,19 @@ import { components } from 'react-select';
import DateRangePopup from 'Shared/DateRangeDropdown/DateRangePopup';
import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
import cn from 'classnames';
import { observer } from 'mobx-react-lite';
interface Props {
period: any;
onChange: (data: any) => void;
disableCustom?: boolean;
right?: boolean;
timezone?: string;
[x: string]: any;
}
function SelectDateRange(props: Props) {
const [isCustom, setIsCustom] = React.useState(false);
const { right = false, period, disableCustom = false, ...rest } = props;
const { right = false, period, disableCustom = false, timezone, ...rest } = props;
let selectedValue = DATE_RANGE_OPTIONS.find((obj: any) => obj.value === period.rangeName);
const options = DATE_RANGE_OPTIONS.filter((obj: any) => (disableCustom ? obj.value !== CUSTOM_RANGE : true));
@ -24,15 +26,20 @@ function SelectDateRange(props: Props) {
if (value === CUSTOM_RANGE) {
setIsCustom(true);
} else {
// @ts-ignore
props.onChange(new Period({ rangeName: value }));
}
};
const onApplyDateRange = (value: any) => {
props.onChange(new Period({ rangeName: CUSTOM_RANGE, start: value.start, end: value.end }));
// @ts-ignore
const range = new Period({ rangeName: CUSTOM_RANGE, start: value.start, end: value.end })
props.onChange(range);
setIsCustom(false);
};
const isCustomRange = period.rangeName === CUSTOM_RANGE;
const customRange = isCustomRange ? period.rangeFormatted(undefined, timezone) : '';
return (
<div className="relative">
<Select
@ -44,7 +51,7 @@ function SelectDateRange(props: Props) {
SingleValue: ({ children, ...props }: any) => {
return (
<components.SingleValue {...props}>
{period.rangeName === CUSTOM_RANGE ? period.rangeFormatted() : children}
{isCustomRange ? customRange : children}
</components.SingleValue>
);
},
@ -66,8 +73,6 @@ function SelectDateRange(props: Props) {
className={cn('absolute top-0 mt-10 z-40', { 'right-0': right })}
style={{
width: '770px',
// margin: 'auto 50vh 0',
// transform: 'translateX(-50%)'
}}
>
<DateRangePopup onApply={onApplyDateRange} onCancel={() => setIsCustom(false)} selectedDateRange={period.range} />
@ -78,4 +83,4 @@ function SelectDateRange(props: Props) {
);
}
export default SelectDateRange;
export default observer(SelectDateRange);

4
frontend/app/components/shared/SessionItem/Counter.tsx
View file

@ -8,8 +8,8 @@ interface Props {
}
function Counter({ startTime, className }: Props) {
let intervalId;
const [duration, setDuration] = useState(new Date().getTime() - convertTimestampToUtcTimestamp(startTime));
let intervalId: NodeJS.Timer;
const [duration, setDuration] = useState(convertTimestampToUtcTimestamp(new Date().getTime()) - convertTimestampToUtcTimestamp(startTime));
const formattedDuration = durationFormatted(Duration.fromMillis(duration));
useEffect(() => {

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

@ -120,7 +120,16 @@ export default Record(
endTimestamp: this.end,
};
},
rangeFormatted(format = "MMM Do YY, HH:mm") {
rangeFormatted(format = "MMM Do YY, HH:mm", tz) {
if (tz) {
const start = this.range.start.clone();
const end = this.range.end.clone();
return (
start.utcOffset(tz).format(format) +
" - " +
end.utcOffset(tz).format(format)
)
}
return (
this.range.start.format(format) +
" - " +