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

change(ui) - assist sort by timestamp

Browse source
This commit is contained in:
Shekar Siri 2022-07-13 12:45:00 +02:00
parent 25c7a7a6ba
commit 269863ea13
3 changed files with 17 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
View file

@ -1,6 +1,6 @@
import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { NoContent, Loader, Pagination, Popup } from 'UI';
import { NoContent, Loader, Pagination } from 'UI';
import { List } from 'immutable';
import SessionItem from 'Shared/SessionItem';
import withPermissions from 'HOCs/withPermissions';
@ -39,41 +39,11 @@ function LiveSessionList(props: Props) {
var timeoutId: any;
const { filters } = filter;
const hasUserFilter = filters.map((i: any) => i.key).includes(KEYS.USERID);
const sortOptions = metaList
const sortOptions = [{ label: 'Newest', value: 'timestamp' }].concat(metaList
.map((i: any) => ({
label: capitalize(i),
value: i,
}))
.toJS();
// useEffect(() => {
// if (metaListLoading || metaList.size === 0 || !!filter.sort) return;
// if (sortOptions[0]) {
// props.applyFilter({ sort: sortOptions[0].value });
// }
// }, [metaListLoading]);
// useEffect(() => {
// const filteredSessions = filters.size > 0 ? props.list.filter(session => {
// let hasValidFilter = true;
// filters.forEach(filter => {
// if (!hasValidFilter) return;
// const _values = filter.value.filter(i => i !== '' && i !== null && i !== undefined).map(i => i.toLowerCase());
// if (filter.key === FilterKey.USERID) {
// const _userId = session.userId ? session.userId.toLowerCase() : '';
// hasValidFilter = _values.length > 0 ? (_values.includes(_userId) && hasValidFilter) || _values.some(i => _userId.includes(i)) : hasValidFilter;
// }
// if (filter.category === FilterCategory.METADATA) {
// const _source = session.metadata[filter.key] ? session.metadata[filter.key].toLowerCase() : '';
// hasValidFilter = _values.length > 0 ? (_values.includes(_source) && hasValidFilter) || _values.some(i => _source.includes(i)) : hasValidFilter;
// }
// })
// return hasValidFilter;
// }) : props.list;
// setSessions(filteredSessions);
// }, [filters, list]);
})).toJS());
useEffect(() => {
props.applyFilter({ ...filter });
@ -116,20 +86,17 @@ function LiveSessionList(props: Props) {
<div className="flex items-center">
<div className="flex items-center ml-6 mr-4">
<span className="mr-2 color-gray-medium">Sort By</span>
<Popup content="No metadata available to sort" disabled={sortOptions.length > 0}>
<div className={cn('flex items-center', { disabled: sortOptions.length === 0 })}>
<Select
plain
right
options={sortOptions}
// defaultValue={sort.field}
onChange={onSortChange}
value={sortOptions.find((i: any) => i.value === filter.sort) || sortOptions[0]}
/>
<div className="mx-2" />
<SortOrderButton onChange={(state: any) => props.applyFilter({ order: state })} sortOrder={filter.order} />
</div>
</Popup>
<div className={cn('flex items-center', { disabled: sortOptions.length === 0 })}>
<Select
plain
right
options={sortOptions}
onChange={onSortChange}
value={sortOptions.find((i: any) => i.value === filter.sort) || sortOptions[0]}
/>
<div className="mx-2" />
<SortOrderButton onChange={(state: any) => props.applyFilter({ order: state })} sortOrder={filter.order} />
</div>
</div>
</div>
</div>

4
frontend/app/components/shared/SortOrderButton/SortOrderButton.tsx
View file

@ -14,7 +14,7 @@ export default React.memo(function SortOrderButton(props: Props) {
<div className="flex items-center border">
<Popup content={'Ascending'} >
<div
className={cn("p-1 hover:bg-active-blue", { 'cursor-pointer bg-white' : !isAscending, 'bg-active-blue' : isAscending })}
className={cn("p-1 hover:bg-active-blue", { 'cursor-pointer bg-white' : !isAscending, 'bg-active-blue pointer-events-none' : isAscending })}
onClick={() => onChange('asc')}
>
<Icon name="arrow-up" size="14" color={isAscending ? 'teal' : 'gray-medium'} />
@ -23,7 +23,7 @@ export default React.memo(function SortOrderButton(props: Props) {
<Popup content={'Descending'} >
<div
className={cn("p-1 hover:bg-active-blue border-l", { 'cursor-pointer bg-white' : isAscending, 'bg-active-blue' : !isAscending })}
className={cn("p-1 hover:bg-active-blue border-l", { 'cursor-pointer bg-white' : isAscending, 'bg-active-blue pointer-events-none' : !isAscending })}
onClick={() => onChange('desc')}
>
<Icon name="arrow-down" size="14" color={!isAscending ? 'teal' : 'gray-medium'} />

2
frontend/app/duck/liveSearch.js
View file

@ -20,7 +20,7 @@ const FETCH_SESSION_LIST = fetchListType(`${name}/FETCH_SESSION_LIST`);
const initialState = Map({
list: List(),
instance: new Filter({ filters: [], sort: '' }),
instance: new Filter({ filters: [], sort: 'timestamp' }),
filterSearchList: {},
currentPage: 1,
});