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

change(ui) - show back the date range in bookmarks since the api is filtering by daterange

Browse source
This commit is contained in:
Shekar Siri 2022-06-30 15:39:14 +02:00
parent f065e8faad
commit f22440d14a
1 changed files with 42 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -7,57 +7,50 @@ 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',
'startTs-desc': 'Newest',
'startTs-asc': 'Oldest',
'eventsCount-asc': 'Events Ascending',
'eventsCount-desc': 'Events Descending',
};
const sortOptions = Object.entries(sortOptionsMap)
.map(([ value, label ]) => ({ value, label }));
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 });
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 }/>
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>
{
<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>
</div>
</div>
);
};
);
}
export default connect(state => ({
activeTab: state.getIn([ 'search', 'activeTab' ]),
period: state.getIn([ 'search', 'period' ]),
filter: state.getIn([ 'search', 'instance' ]),
}), { applyFilter })(SessionListHeader);
export default connect(
(state) => ({
activeTab: state.getIn(['search', 'activeTab']),
period: state.getIn(['search', 'period']),
filter: state.getIn(['search', 'instance']),
}),
{ applyFilter }
)(SessionListHeader);