56 lines
2.1 KiB
JavaScript
56 lines
2.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 Period from 'Types/app/period';
|
|
|
|
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 { startDate, endDate, rangeValue } = filter;
|
|
const period = new Period({ start: startDate, end: endDate, rangeName: rangeValue });
|
|
|
|
const onDateChange = (e) => {
|
|
const dateValues = e.toJSON();
|
|
applyFilter(dateValues);
|
|
};
|
|
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} />
|
|
</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);
|