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

fix(ui): add typing to filter function

Browse source
This commit is contained in:
sylenien 2022-08-10 11:06:36 +02:00 • committed by Delirium
parent d8129ab8e9
commit 58a42c72d5
3 changed files with 25 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
View file

@ -2,21 +2,11 @@ import { observer } from 'mobx-react-lite';
import React from 'react';
import { NoContent, Pagination } from 'UI';
import { useStore } from 'App/mstore';
import { getRE } from 'App/utils';
import { filterList } from 'App/utils';
import { sliceListPerPage } from 'App/utils';
import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
import DashboardListItem from './DashboardListItem';
const filterList = <T extends Record<string, any>>(list: T[], searchQuery: string): T[] => {
const filterRE = getRE(searchQuery, 'i');
console.log(filterRE)
let _list = list.filter((w: T) => {
console.log(w.name, w.owner, w.description, filterRE.test(w.name))
return filterRE.test(w.name) || filterRE.test(w.owner) || filterRE.test(w.description);
});
return _list
}
function DashboardList() {
const { dashboardStore } = useStore();
const [shownDashboards, setDashboards] = React.useState([]);
@ -24,7 +14,7 @@ function DashboardList() {
const dashboardsSearch = dashboardStore.dashboardsSearch;
React.useEffect(() => {
setDashboards(filterList(dashboards, dashboardsSearch))
setDashboards(filterList(dashboards, dashboardsSearch, ['name', 'owner', 'description']))
}, [dashboardsSearch])
const list = dashboardsSearch !== '' ? shownDashboards : dashboards;

18
frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
View file

@ -2,24 +2,24 @@ import { useObserver } from 'mobx-react-lite';
import React, { useEffect } from 'react';
import { NoContent, Pagination } from 'UI';
import { useStore } from 'App/mstore';
import { getRE } from 'App/utils';
import { getRE, filterList } from 'App/utils';
import MetricListItem from '../MetricListItem';
import { sliceListPerPage } from 'App/utils';
import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
import { IWidget } from 'App/mstore/types/widget';
function MetricsList() {
const { metricStore } = useStore();
const metrics = useObserver(() => metricStore.metrics);
const metricsSearch = useObserver(() => metricStore.metricsSearch);
const filterList = <T extends Record<string, any>>(list: T[]): T[] => {
const filterRE = getRE(metricsSearch, 'i');
let _list = list.filter((w: T) => {
const dashbaordNames = w.dashboards.map((d: any) => d.name).join(' ');
return filterRE.test(w.name) || filterRE.test(w.metricType) || filterRE.test(w.owner) || filterRE.test(dashbaordNames);
});
return _list
const filterByDashboard = (item: IWidget, searchRE: RegExp) => {
const dashboardsStr = item.dashboards.map((d: any) => d.name).join(' ')
return searchRE.test(dashboardsStr)
}
const list = metricsSearch !== '' ? filterList(metrics) : metrics;
const list = metricsSearch !== ''
? filterList(metrics, metricsSearch, ['name', 'metricType', 'owner'], filterByDashboard)
: metrics;
const lenth = list.length;
useEffect(() => {

15
frontend/app/utils.ts
View file

@ -53,7 +53,7 @@ export const cutURL = (url, prefix = '.../') => `${prefix + url.split('/').slice
export const escapeRegExp = (string) => string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
export function getRE(string, options) {
export function getRE(string: string, options: string) {
let re;
try {
re = new RegExp(string, options);
@ -63,6 +63,19 @@ export function getRE(string, options) {
return re;
}
export const filterList = <T extends Record<string, any>>(
list: T[],
searchQuery: string,
testKeys: string[],
searchCb?: (listItem: T, query: string | RegExp
) => boolean): T[] => {
const filterRE = getRE(searchQuery, 'i');
let _list = list.filter((listItem: T) => {
return testKeys.some((key) => filterRE.test(listItem[key]) || searchCb?.(listItem, filterRE));
});
return _list
}
export const getStateColor = (state) => {
switch (state) {
case 'passed':