63 lines
No EOL
2 KiB
JavaScript
63 lines
No EOL
2 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-6 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>
|
|
{ activeTab.type !== 'bookmark' && (
|
|
<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); |