78 lines
3.1 KiB
JavaScript
78 lines
3.1 KiB
JavaScript
import React from 'react';
|
|
import { connect } from 'react-redux';
|
|
import SortDropdown from '../Filters/SortDropdown';
|
|
import { numberWithCommas } from 'App/utils';
|
|
import SelectDateRange from 'Shared/SelectDateRange';
|
|
import { applyFilter } from 'Duck/search';
|
|
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',
|
|
'startTs-asc': 'Oldest',
|
|
'eventsCount-asc': 'Events Ascending',
|
|
'eventsCount-desc': 'Events Descending',
|
|
};
|
|
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 Record({ start: startDate, end: endDate, rangeName: rangeValue, timezoneOffset: getTimeZoneOffset() });
|
|
|
|
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(() => {
|
|
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 (
|
|
<div className="flex mb-2 justify-between items-end">
|
|
<div className="flex items-baseline">
|
|
<h3 className="text-2xl capitalize">
|
|
<span>{activeTab.name}</span>
|
|
<span className="ml-2 font-normal color-gray-medium">{count ? numberWithCommas(count) : 0}</span>
|
|
</h3>
|
|
{
|
|
<div className="ml-3 flex items-center">
|
|
<span className="mr-2 color-gray-medium">Sessions Captured in</span>
|
|
<SelectDateRange period={period} onChange={onDateChange} timezone={getTimeZoneOffset()} />
|
|
</div>
|
|
}
|
|
</div>
|
|
<div className="flex items-center">
|
|
<div className="flex items-center ml-6">
|
|
<span className="mr-2 color-gray-medium">Sort By</span>
|
|
<SortDropdown options={sortOptions} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default connect(
|
|
(state) => ({
|
|
activeTab: state.getIn(['search', 'activeTab']),
|
|
period: state.getIn(['search', 'period']),
|
|
filter: state.getIn(['search', 'instance']),
|
|
}),
|
|
{ applyFilter }
|
|
)(SessionListHeader);
|