From 57c45838d5f2627c88ef2a59d48dc3ee99346fb2 Mon Sep 17 00:00:00 2001 From: Chaim Lev-Ari Date: Thu, 12 Oct 2023 08:30:23 +0300 Subject: [PATCH] fix(edge/updates): allow group search [EE-6179] (#10408) --- app/react/components/datatables/Datatable.tsx | 4 +++- .../update-schedules/ListView/ListView.tsx | 24 +++++++++++++++++-- .../ListView/columns/groups.tsx | 21 +++++----------- .../ListView/columns/helper.ts | 4 ++-- .../ListView/columns/index.ts | 4 ++-- .../ListView/columns/schedule-status.tsx | 7 ++---- .../update-schedules/ListView/types.ts | 5 ++++ 7 files changed, 42 insertions(+), 27 deletions(-) create mode 100644 app/react/portainer/environments/update-schedules/ListView/types.ts diff --git a/app/react/components/datatables/Datatable.tsx b/app/react/components/datatables/Datatable.tsx index f0c7383b6..cfc52100f 100644 --- a/app/react/components/datatables/Datatable.tsx +++ b/app/react/components/datatables/Datatable.tsx @@ -273,7 +273,9 @@ export function defaultGlobalFilterFn( } if (Array.isArray(value)) { - return value.some((item) => item.toLowerCase().includes(filterValueLower)); + return value.some((item) => + item.toString().toLowerCase().includes(filterValueLower) + ); } return false; diff --git a/app/react/portainer/environments/update-schedules/ListView/ListView.tsx b/app/react/portainer/environments/update-schedules/ListView/ListView.tsx index 92f964054..01d429428 100644 --- a/app/react/portainer/environments/update-schedules/ListView/ListView.tsx +++ b/app/react/portainer/environments/update-schedules/ListView/ListView.tsx @@ -1,7 +1,10 @@ import { Clock, Trash2 } from 'lucide-react'; +import { useMemo } from 'react'; +import _ from 'lodash'; import { notifySuccess } from '@/portainer/services/notifications'; import { withLimitToBE } from '@/react/hooks/useLimitToBE'; +import { useEdgeGroups } from '@/react/edge/edge-groups/queries/useEdgeGroups'; import { confirmDelete } from '@@/modals/confirm'; import { Datatable } from '@@/datatables'; @@ -17,6 +20,7 @@ import { BetaAlert } from '../common/BetaAlert'; import { columns } from './columns'; import { createStore } from './datatable-store'; +import { DecoratedItem } from './types'; const storageKey = 'update-schedules-list'; const settingsStore = createStore(storageKey); @@ -27,8 +31,24 @@ export function ListView() { const tableState = useTableState(settingsStore, storageKey); const listQuery = useList(true); + const groupsQuery = useEdgeGroups({ + select: (groups) => Object.fromEntries(groups.map((g) => [g.Id, g.Name])), + }); - if (!listQuery.data) { + const items: Array = useMemo(() => { + if (!listQuery.data || !groupsQuery.data) { + return []; + } + + return listQuery.data.map((item) => ({ + ...item, + edgeGroupNames: _.compact( + item.edgeGroupIds.map((id) => groupsQuery.data[id]) + ), + })); + }, [listQuery.data, groupsQuery.data]); + + if (!listQuery.data || !groupsQuery.data) { return null; } @@ -46,7 +66,7 @@ export function ListView() { /> >) { - const groupsIds = getValue(); - const groupsQuery = useEdgeGroups(); - - const groups = _.compact( - groupsIds.map((id) => groupsQuery.data?.find((g) => g.Id === id)) - ); +}: CellContext>) { + const groups = getValue(); - return groups.map((g) => g.Name).join(', '); + return groups.join(', '); } diff --git a/app/react/portainer/environments/update-schedules/ListView/columns/helper.ts b/app/react/portainer/environments/update-schedules/ListView/columns/helper.ts index e4d5a7954..dc18be1ce 100644 --- a/app/react/portainer/environments/update-schedules/ListView/columns/helper.ts +++ b/app/react/portainer/environments/update-schedules/ListView/columns/helper.ts @@ -1,5 +1,5 @@ import { createColumnHelper } from '@tanstack/react-table'; -import { EdgeUpdateListItemResponse } from '../../queries/list'; +import { DecoratedItem } from '../types'; -export const columnHelper = createColumnHelper(); +export const columnHelper = createColumnHelper(); diff --git a/app/react/portainer/environments/update-schedules/ListView/columns/index.ts b/app/react/portainer/environments/update-schedules/ListView/columns/index.ts index 5b99dd04c..e3e3da5b1 100644 --- a/app/react/portainer/environments/update-schedules/ListView/columns/index.ts +++ b/app/react/portainer/environments/update-schedules/ListView/columns/index.ts @@ -1,6 +1,6 @@ import { buildNameColumn } from '@@/datatables/buildNameColumn'; -import { EdgeUpdateListItemResponse } from '../../queries/list'; +import { DecoratedItem } from '../types'; import { created } from './created'; import { groups } from './groups'; @@ -9,7 +9,7 @@ import { scheduledTime } from './scheduled-time'; import { scheduleType } from './type'; export const columns = [ - buildNameColumn('name', '.item'), + buildNameColumn('name', '.item'), scheduledTime, groups, scheduleType, diff --git a/app/react/portainer/environments/update-schedules/ListView/columns/schedule-status.tsx b/app/react/portainer/environments/update-schedules/ListView/columns/schedule-status.tsx index a31034329..0415b88b0 100644 --- a/app/react/portainer/environments/update-schedules/ListView/columns/schedule-status.tsx +++ b/app/react/portainer/environments/update-schedules/ListView/columns/schedule-status.tsx @@ -1,7 +1,7 @@ import { CellContext } from '@tanstack/react-table'; -import { EdgeUpdateListItemResponse } from '../../queries/list'; import { StatusType } from '../../types'; +import { DecoratedItem } from '../types'; import { columnHelper } from './helper'; @@ -15,10 +15,7 @@ function StatusCell({ row: { original: { statusMessage }, }, -}: CellContext< - EdgeUpdateListItemResponse, - EdgeUpdateListItemResponse['status'] ->) { +}: CellContext) { const status = getValue(); switch (status) { diff --git a/app/react/portainer/environments/update-schedules/ListView/types.ts b/app/react/portainer/environments/update-schedules/ListView/types.ts new file mode 100644 index 000000000..be71dbfb6 --- /dev/null +++ b/app/react/portainer/environments/update-schedules/ListView/types.ts @@ -0,0 +1,5 @@ +import { EdgeUpdateListItemResponse } from '../queries/list'; + +export type DecoratedItem = EdgeUpdateListItemResponse & { + edgeGroupNames: string[]; +};