Skip to content

Commit 36881db

Browse files
zhujezhuje
committed
Fix DashdboardListPage and DashboardPage naming
Fix ProjectDropdown
1 parent 868a987 commit 36881db

File tree

7 files changed

+365
-360
lines changed

7 files changed

+365
-360
lines changed

‎config/perses-dashboards.patch.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"exact": false,
99
"path": ["/multicloud/monitoring/v2/dashboards"],
1010
"component": {
11-
"$codeRef": "DashboardsPage"
11+
"$codeRef": "DashboardListPage"
1212
}
1313
}
1414
}
@@ -36,7 +36,7 @@
3636
"properties": {
3737
"exact": false,
3838
"path": ["/monitoring/v2/dashboards"],
39-
"component": { "$codeRef": "DashboardsPage" }
39+
"component": { "$codeRef": "DashboardListPage" }
4040
}
4141
}
4242
},
@@ -64,7 +64,7 @@
6464
"properties": {
6565
"exact": false,
6666
"path": ["/virt-monitoring/v2/dashboards"],
67-
"component": { "$codeRef": "DashboardsPage" }
67+
"component": { "$codeRef": "DashboardListPage" }
6868
}
6969
}
7070
},
@@ -92,7 +92,7 @@
9292
"properties": {
9393
"exact": false,
9494
"path": ["/monitoring/v2/dashboards/view"],
95-
"component": { "$codeRef": "McpDashboardViewerPage" }
95+
"component": { "$codeRef": "DashboardPage" }
9696
}
9797
}
9898
},
@@ -104,7 +104,7 @@
104104
"properties": {
105105
"exact": false,
106106
"path": ["/virt-monitoring/v2/dashboards/view"],
107-
"component": { "$codeRef": "McpDashboardViewerPage" }
107+
"component": { "$codeRef": "DashboardPage" }
108108
}
109109
}
110110
},
@@ -116,7 +116,7 @@
116116
"properties": {
117117
"exact": false,
118118
"path": ["/multicloud/monitoring/v2/dashboards/view"],
119-
"component": { "$codeRef": "McpDashboardViewerPage" }
119+
"component": { "$codeRef": "DashboardPage" }
120120
}
121121
}
122122
}

‎web/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -153,8 +153,8 @@
153153
"displayName": "OpenShift console monitoring plugin",
154154
"description": "This plugin adds the monitoring UI to the OpenShift web console",
155155
"exposedModules": {
156-
"DashboardsPage": "./components/dashboards/perses/dashboard-page",
157-
"McpDashboardViewerPage": "./components/dashboards/perses/dashboard-viewer-page",
156+
"DashboardListPage": "./components/dashboards/perses/dashboard-list-page",
157+
"DashboardPage": "./components/dashboards/perses/dashboard-page",
158158
"LegacyDashboardsPage": "./components/dashboards/legacy/legacy-dashboard-page",
159159
"SilencesPage": "./components/alerting/SilencesPage",
160160
"SilencesDetailsPage": "./components/alerting/SilencesDetailsPage",

‎web/src/components/dashboards/perses/dashboard-list-page.tsx‎

Lines changed: 20 additions & 234 deletions
Original file line numberDiff line numberDiff line change
@@ -1,240 +1,26 @@
1-
import React, { ReactNode, useMemo, type FC } from 'react';
2-
import { useTranslation } from 'react-i18next';
3-
import { DashboardLayout } from './dashboard-layout';
4-
import { useDashboardsData } from './hooks/useDashboardsData';
5-
6-
import { Pagination } from '@patternfly/react-core';
7-
import { DataView } from '@patternfly/react-data-view/dist/dynamic/DataView';
8-
import { DataViewFilters } from '@patternfly/react-data-view/dist/dynamic/DataViewFilters';
9-
import {
10-
DataViewTable,
11-
DataViewTh,
12-
DataViewTr,
13-
} from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
14-
import { DataViewTextFilter } from '@patternfly/react-data-view/dist/dynamic/DataViewTextFilter';
15-
import { DataViewToolbar } from '@patternfly/react-data-view/dist/dynamic/DataViewToolbar';
16-
import { useDataViewFilters, useDataViewSort } from '@patternfly/react-data-view';
17-
import { useDataViewPagination } from '@patternfly/react-data-view/dist/dynamic/Hooks';
18-
import { ThProps } from '@patternfly/react-table';
19-
import { Link, useSearchParams } from 'react-router-dom-v5-compat';
20-
21-
import { getDashboardUrl, usePerspective } from '../../hooks/usePerspective';
22-
23-
const perPageOptions = [
24-
{ title: '10', value: 10 },
25-
{ title: '20', value: 20 },
26-
];
27-
28-
interface DashboardName {
29-
link: ReactNode;
30-
label: string;
31-
}
32-
33-
interface DashboardRow {
34-
name: DashboardName;
35-
project: string;
36-
created: string;
37-
modified: string;
38-
}
39-
40-
interface DashboardRowFilters {
41-
name?: string;
42-
'project-filter'?: string;
43-
}
44-
45-
const DASHBOARD_COLUMNS = [
46-
{ label: 'Dashboard', key: 'name' as keyof DashboardRow, index: 0 },
47-
{ label: 'Project', key: 'project' as keyof DashboardRow, index: 1 },
48-
{ label: 'Created on', key: 'created' as keyof DashboardRow, index: 2 },
49-
{ label: 'Last Modified', key: 'modified' as keyof DashboardRow, index: 3 },
50-
];
51-
52-
const sortDashboardData = (
53-
data: DashboardRow[],
54-
sortBy: keyof DashboardRow | undefined,
55-
direction: 'asc' | 'desc' | undefined,
56-
): DashboardRow[] =>
57-
sortBy && direction
58-
? [...data].sort((a, b) => {
59-
const aValue = sortBy === 'name' ? a.name.label : a[sortBy];
60-
const bValue = sortBy === 'name' ? b.name.label : b[sortBy];
61-
62-
if (direction === 'asc') {
63-
return aValue < bValue ? -1 : aValue > bValue ? 1 : 0;
64-
} else {
65-
return aValue > bValue ? -1 : aValue < bValue ? 1 : 0;
66-
}
67-
})
68-
: data;
69-
70-
interface DashboardsTableProps {
71-
persesDashboards: Array<{
72-
metadata?: {
73-
name?: string;
74-
project?: string;
75-
createdAt?: string;
76-
updatedAt?: string;
77-
};
78-
}>;
79-
persesDashboardsLoading: boolean;
80-
}
81-
82-
const DashboardsTable: React.FunctionComponent<DashboardsTableProps> = ({
83-
persesDashboards,
84-
persesDashboardsLoading,
85-
}) => {
86-
const { t } = useTranslation(process.env.I18N_NAMESPACE);
87-
88-
const { perspective } = usePerspective();
89-
const dashboardBaseURL = getDashboardUrl(perspective);
90-
91-
const [searchParams, setSearchParams] = useSearchParams();
92-
const { sortBy, direction, onSort } = useDataViewSort({ searchParams, setSearchParams });
93-
94-
const { filters, onSetFilters, clearAllFilters } = useDataViewFilters<DashboardRowFilters>({
95-
initialFilters: { name: '', 'project-filter': '' },
96-
searchParams,
97-
setSearchParams,
98-
});
99-
const pagination = useDataViewPagination({ perPage: perPageOptions[0].value });
100-
const { page, perPage } = pagination;
101-
102-
const sortByIndex = useMemo(
103-
() => DASHBOARD_COLUMNS.findIndex((item) => item.key === sortBy),
104-
[sortBy],
105-
);
106-
107-
const getSortParams = (columnIndex: number): ThProps['sort'] => ({
108-
sortBy: {
109-
index: sortByIndex,
110-
direction,
111-
defaultDirection: 'asc',
1+
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
2+
import { type FC } from 'react';
3+
import { QueryParamProvider } from 'use-query-params';
4+
import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
5+
import { DashboardList } from './dashboard-list';
6+
7+
const queryClient = new QueryClient({
8+
defaultOptions: {
9+
queries: {
10+
refetchOnWindowFocus: false,
11+
retry: 0,
11212
},
113-
onSort: (_event, index, direction) => onSort(_event, DASHBOARD_COLUMNS[index].key, direction),
114-
columnIndex,
115-
});
116-
117-
const tableColumns: DataViewTh[] = DASHBOARD_COLUMNS.map((column, index) => ({
118-
cell: t(column.label),
119-
props: { sort: getSortParams(index) },
120-
}));
121-
122-
const tableRows: DashboardRow[] = useMemo(() => {
123-
if (persesDashboardsLoading) {
124-
return [];
125-
}
126-
return persesDashboards.map((board) => {
127-
const metadata = board?.metadata;
128-
const dashboardsParams = `?dashboard=${metadata?.name}&project=${metadata?.project}`;
129-
const dashboardName: DashboardName = {
130-
link: (
131-
<Link
132-
to={`${dashboardBaseURL}${dashboardsParams}`}
133-
data-test={`perseslistpage-${board?.metadata?.name}`}
134-
>
135-
{metadata?.name}
136-
</Link>
137-
),
138-
label: metadata?.name || '',
139-
};
140-
141-
return {
142-
name: dashboardName,
143-
project: board?.metadata?.project || '',
144-
created: board?.metadata?.createdAt || '',
145-
modified: board?.metadata?.updatedAt || '',
146-
};
147-
});
148-
}, [dashboardBaseURL, persesDashboards, persesDashboardsLoading]);
149-
150-
const filteredData = useMemo(
151-
() =>
152-
tableRows.filter(
153-
(item) =>
154-
(!filters.name ||
155-
item.name?.label?.toLocaleLowerCase().includes(filters.name?.toLocaleLowerCase())) &&
156-
(!filters['project-filter'] ||
157-
item.project
158-
?.toLocaleLowerCase()
159-
.includes(filters['project-filter']?.toLocaleLowerCase())),
160-
),
161-
[filters, tableRows],
162-
);
163-
164-
const sortedAndFilteredData = useMemo(
165-
() => sortDashboardData(filteredData, sortBy as keyof DashboardRow, direction),
166-
[filteredData, sortBy, direction],
167-
);
168-
169-
const pageRows: DataViewTr[] = useMemo(
170-
() =>
171-
sortedAndFilteredData
172-
.slice((page - 1) * perPage, (page - 1) * perPage + perPage)
173-
.map(({ name, project, created, modified }) => [name.link, project, created, modified]),
174-
[page, perPage, sortedAndFilteredData],
175-
);
176-
177-
const PaginationTool = () => {
178-
return (
179-
<Pagination
180-
perPageOptions={perPageOptions}
181-
itemCount={sortedAndFilteredData.length}
182-
{...pagination}
183-
/>
184-
);
185-
};
13+
},
14+
});
18615

16+
const MonitoringDashboardListPage: FC = () => {
18717
return (
188-
<DataView>
189-
<DataViewToolbar
190-
ouiaId="PersesDashList-DataViewHeader"
191-
clearAllFilters={clearAllFilters}
192-
pagination={<PaginationTool />}
193-
filters={
194-
<DataViewFilters onChange={(_e, values) => onSetFilters(values)} values={filters}>
195-
<DataViewTextFilter filterId="name" title="Name" placeholder="Filter by name" />
196-
<DataViewTextFilter
197-
filterId="project-filter"
198-
title="Project"
199-
placeholder="Filter by project"
200-
/>
201-
</DataViewFilters>
202-
}
203-
/>
204-
<DataViewTable
205-
aria-label="Perses Dashboards List"
206-
ouiaId={'PersesDashList-DataViewTable'}
207-
columns={tableColumns}
208-
rows={pageRows}
209-
/>
210-
<DataViewToolbar ouiaId="PersesDashList-DataViewFooter" pagination={<PaginationTool />} />
211-
</DataView>
18+
<QueryParamProvider adapter={ReactRouter5Adapter}>
19+
<QueryClientProvider client={queryClient}>
20+
<DashboardList />
21+
</QueryClientProvider>
22+
</QueryParamProvider>
21223
);
21324
};
21425

215-
export const DashboardListPage: FC = () => {
216-
const {
217-
activeProjectDashboardsMetadata,
218-
changeBoard,
219-
dashboardName,
220-
setActiveProject,
221-
activeProject,
222-
persesDashboards,
223-
combinedInitialLoad,
224-
} = useDashboardsData();
225-
226-
return (
227-
<DashboardLayout
228-
activeProject={activeProject}
229-
setActiveProject={setActiveProject}
230-
activeProjectDashboardsMetadata={activeProjectDashboardsMetadata}
231-
changeBoard={changeBoard}
232-
dashboardName={dashboardName}
233-
>
234-
<DashboardsTable
235-
persesDashboards={persesDashboards}
236-
persesDashboardsLoading={combinedInitialLoad}
237-
/>
238-
</DashboardLayout>
239-
);
240-
};
26+
export default MonitoringDashboardListPage;

0 commit comments

Comments
 (0)