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

feat(ui) - audit - filters

Browse source
This commit is contained in:
Shekar Siri 2022-05-06 18:54:25 +02:00
parent 7feaa376e6
commit b97c32ad56
11 changed files with 96 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/app/components/Client/Audit/AuditList/AuditList.tsx
View file

@ -15,6 +15,7 @@ function AuditList(props: Props) {
const list = useObserver(() => auditStore.list);
const searchQuery = useObserver(() => auditStore.searchQuery);
const page = useObserver(() => auditStore.page);
const order = useObserver(() => auditStore.order);
const { showModal } = useModal();
useEffect(() => {
@ -22,8 +23,9 @@ function AuditList(props: Props) {
page: auditStore.page,
limit: auditStore.pageSize,
query: auditStore.searchQuery,
order: auditStore.order,
});
}, [page, searchQuery]);
}, [page, searchQuery, order]);
return useObserver(() => (
<Loader loading={loading}>

2
frontend/app/components/Client/Audit/AuditListItem/AuditListItem.tsx
View file

@ -9,7 +9,7 @@ function AuditListItem(props: Props) {
const { audit, onShowDetails } = props;
return (
<div className="grid grid-cols-12 gap-4 items-center py-3">
<div className="col-span-5">asd</div>
<div className="col-span-5">{audit.username}</div>
<div className="col-span-4 link cursor-pointer select-none" onClick={onShowDetails}>{audit.action}</div>
<div className="col-span-3">{audit.createdAt && checkForRecent(audit.createdAt, 'LLL dd, yyyy, hh:mm a')}</div>
</div>

23
frontend/app/components/Client/Audit/AuditView/AuditView.tsx
View file

@ -4,14 +4,37 @@ import AuditList from '../AuditList';
import AuditSearchField from '../AuditSearchField';
import { useStore } from 'App/mstore';
import { useObserver } from 'mobx-react-lite';
import Select from 'Shared/Select';
import SelectDateRange from 'Shared/SelectDateRange';
function AuditView(props) {
const { auditStore } = useStore();
const order = useObserver(() => auditStore.order);
return useObserver(() => (
<div>
<div className="flex items-center mb-4">
<PageTitle title="Audit" />
<div className="flex items-center ml-auto">
<div className="mx-4">
{/* <SelectDateRange
startDate={auditStore.startDate}
endDate={auditStore.endDate}
range={auditStore.range}
onChange={auditStore.setDateRange}
/> */}
</div>
<div className="mx-4">
<Select
options={[
{ label: 'Newest First', value: 'desc' },
{ label: 'Oldest First', value: 'asc' },
]}
defaultValue={order}
plain
onChange={({ value }) => auditStore.updateKey('order', value)}
/>
</div>
<AuditSearchField onChange={(value) => auditStore.updateKey('searchQuery', value) }/>
</div>
</div>

31
frontend/app/components/shared/Select/Select.tsx
View file

@ -1,5 +1,7 @@
import React from 'react';
import Select from 'react-select';
import Select, { components, DropdownIndicatorProps } from 'react-select';
import { Icon } from 'UI';
import colors from 'App/theme/colors';
interface Props {
options: any[];
@ -21,10 +23,21 @@ export default function({ plain = false, options, isSearchable = false, defaultV
control: (provided) => {
const obj = {
...provided,
border: 'solid thin #ddd'
border: 'solid thin #ddd',
cursor: 'pointer',
}
if (plain) {
obj['border'] = '1px solid transparent'
obj['&:hover'] = {
borderColor: 'transparent',
backgroundColor: colors['gray-light']
}
obj['&:focus'] = {
borderColor: 'transparent'
}
obj['&:active'] = {
borderColor: 'transparent'
}
}
return obj;
},
@ -46,7 +59,8 @@ export default function({ plain = false, options, isSearchable = false, defaultV
isSearchable={isSearchable}
defaultValue={defaultSelected}
components={{
IndicatorSeparator: () => null
IndicatorSeparator: () => null,
DropdownIndicator,
}}
styles={customStyles}
theme={(theme) => ({
@ -56,9 +70,18 @@ export default function({ plain = false, options, isSearchable = false, defaultV
primary: '#394EFF',
}
})}
blurInputOnSelect={true}
{...rest}
/>
);
}
// export default Select;
const DropdownIndicator = (
props: DropdownIndicatorProps<true>
) => {
return (
<components.DropdownIndicator {...props}>
<Icon name="chevron-down" size="18" />
</components.DropdownIndicator>
);
};

22
frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx Normal file
View file

@ -0,0 +1,22 @@
import React from 'react';
import { DATE_RANGE_OPTIONS } from 'App/dateRange'
import Select from 'Shared/Select';
interface Props {
startDate: string;
endDate: string;
range: string;
onChange: (startDate: string, endDate: string) => void;
}
function SelectDateRange(props: Props) {
return (
<div>
<Select
plain
options={DATE_RANGE_OPTIONS}
/>
</div>
);
}
export default SelectDateRange;

1
frontend/app/components/shared/SelectDateRange/index.ts Normal file
View file

@ -0,0 +1 @@
export { default } from './SelectDateRange';

7
frontend/app/dateRange.js
View file

@ -23,6 +23,13 @@ Object.keys(DATE_RANGE_LABELS).forEach((key) => { DATE_RANGE_VALUES[ key ] = key
export { DATE_RANGE_VALUES };
export const dateRangeValues = Object.keys(DATE_RANGE_VALUES);
export const DATE_RANGE_OPTIONS = Object.keys(DATE_RANGE_LABELS).map((key) => {
return {
label: DATE_RANGE_LABELS[ key ],
value: key,
};
});
export function getDateRangeFromTs(start, end) {
return moment.range(
moment(start),

9
frontend/app/mstore/auditStore.ts
View file

@ -1,6 +1,7 @@
import { makeAutoObservable, runInAction, observable, action, reaction } from "mobx"
import { auditService } from "App/services"
import Audit from './types/audit'
import Period, { LAST_7_DAYS } from 'Types/app/period';
export default class AuditStore {
list: any[] = [];
@ -9,6 +10,8 @@ export default class AuditStore {
pageSize: number = 20;
searchQuery: string = '';
isLoading: boolean = false;
order: string = 'desc';
period: Period = Period({ rangeName: LAST_7_DAYS })
constructor() {
makeAutoObservable(this, {
@ -18,8 +21,11 @@ export default class AuditStore {
})
}
setDateRange(data: any) {
this.period = new Period(data);
}
updateKey(key: string, value: any) {
console.log(key, value)
this[key] = value;
}
@ -27,7 +33,6 @@ export default class AuditStore {
this.isLoading = true;
return new Promise((resolve, reject) => {
auditService.all(data).then(response => {
console.log('response', response);
runInAction(() => {
this.list = response.sessions.map(item => Audit.fromJson(item))
this.total = response.count

6
frontend/app/mstore/types/audit.ts
View file

@ -3,7 +3,7 @@ import { unserscoreToSpaceAndCapitalize } from 'App/utils';
export default class Audit {
id: string = '';
userName: string = '';
username: string = '';
action: string = '';
createdAt: any = null;
endPoint: string = '';
@ -17,7 +17,7 @@ export default class Audit {
static fromJson(json: any): Audit {
const audit = new Audit();
audit.id = json.rn;
audit.userName = json.userName;
audit.username = json.username;
audit.action = unserscoreToSpaceAndCapitalize(json.action);
audit.createdAt = json.createdAt && DateTime.fromMillis(json.createdAt || 0);
audit.endPoint = json.endPoint;
@ -30,7 +30,7 @@ export default class Audit {
toJson(): any {
return {
id: this.id,
userName: this.userName
username: this.username
};
}
}

2
frontend/app/services/AuditService.ts
View file

@ -14,7 +14,7 @@ export default class AuditService {
all(data: any): Promise<any> {
return this.client.post('/trails', data)
.then(response => response.json())
.then(response => response.data[0] || []);
.then(response => response.data || []);
}
one(id: string): Promise<any> {

2
frontend/app/svg/icons/text-paragraph.svg
View file

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-paragraph" viewBox="0 0 16 16">
<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-text-paragraph" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm4-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5z"/>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 417 B

After

Width:  |  Height:  |  Size: 374 B