From e7cad4faf4e2314adb2aa376edc823f72dea6db0 Mon Sep 17 00:00:00 2001 From: Oleksandr Dubenko Date: Thu, 9 May 2024 18:41:58 +0200 Subject: [PATCH] frontend: Remove table filter from the header and implement grid layout Remove global filter state and filter input from the SectionFilterHeader New Table component now has filtering built-in so we don't need filter in the header Also remove uses of useFilterFunc in places where Table can already filter by the columns Replace SimpleTable with Table in Notifications page Implement grid layout in new Table that will work the same way SimpleTable works Signed-off-by: Oleksandr Dubenko --- e2e-tests/tests/headlampPage.ts | 3 +- .../__snapshots__/index.stories.storyshot | 97 +- frontend/src/components/App/Home/index.tsx | 4 +- .../src/components/App/Notifications/List.tsx | 42 +- .../__snapshots__/List.stories.storyshot | 2134 ++++-- .../App/PluginSettings/PluginSettings.tsx | 39 +- .../PluginSettings.stories.storyshot | 6227 ++++++++++++----- frontend/src/components/cluster/Overview.tsx | 22 +- .../__snapshots__/Overview.stories.storyshot | 146 +- .../common/NamespacesAutocomplete.tsx | 3 +- .../components/common/Resource/Resource.tsx | 7 +- .../common/Resource/ResourceTable.tsx | 65 +- .../ResourceListView.stories.storyshot | 87 +- .../ResourceTable.stories.storyshot | 374 +- .../components/common/SectionFilterHeader.tsx | 127 +- .../src/components/common/SectionHeader.tsx | 2 +- .../common/ShowHideLabel/ShowHideLabel.tsx | 1 + .../components/common/SimpleTable.stories.tsx | 15 +- .../src/components/common/Table/Table.tsx | 109 +- .../__snapshots__/Table.stories.storyshot | 2211 +++--- .../SimpleTable.stories.storyshot | 1055 +-- frontend/src/components/configmap/List.tsx | 1 + .../__snapshots__/List.stories.storyshot | 120 +- ...CustomResourceDefinition.stories.storyshot | 181 +- .../CustomResourceList.stories.storyshot | 118 +- frontend/src/components/cronjob/List.tsx | 2 + .../CronJobDetails.stories.storyshot | 46 - frontend/src/components/daemonset/List.tsx | 4 + .../__snapshots__/List.stories.storyshot | 134 +- frontend/src/components/deployments/List.tsx | 10 +- frontend/src/components/endpoints/List.tsx | 1 + .../EndpointList.stories.storyshot | 150 +- .../__snapshots__/HPAList.stories.storyshot | 198 +- frontend/src/components/ingress/ClassList.tsx | 1 + .../__snapshots__/ClassList.stories.storyshot | 75 +- .../__snapshots__/List.stories.storyshot | 132 +- frontend/src/components/job/List.tsx | 1 + .../__snapshots__/JobList.stories.storyshot | 162 +- .../__snapshots__/List.stories.storyshot | 110 +- frontend/src/components/limitRange/List.tsx | 6 +- .../__snapshots__/List.stories.storyshot | 106 +- frontend/src/components/namespace/Details.tsx | 6 +- .../NamespaceDetails.stories.storyshot | 270 +- .../NamespaceList.stories.storyshot | 87 +- frontend/src/components/node/List.tsx | 10 +- .../node/__snapshots__/List.stories.storyshot | 105 +- frontend/src/components/pod/List.tsx | 13 +- .../__snapshots__/PodList.stories.storyshot | 252 +- .../__snapshots__/pdbList.stories.storyshot | 174 +- .../priorityClassList.stories.storyshot | 99 +- frontend/src/components/replicaset/List.tsx | 3 + .../__snapshots__/List.stories.storyshot | 150 +- .../src/components/resourceQuota/List.tsx | 14 +- .../resourceQuotaList.stories.storyshot | 168 +- frontend/src/components/role/BindingList.tsx | 4 +- frontend/src/components/role/List.tsx | 4 +- .../__snapshots__/List.stories.storyshot | 55 +- frontend/src/components/secret/List.tsx | 3 - .../__snapshots__/List.stories.storyshot | 126 +- .../src/components/serviceaccount/List.tsx | 1 + frontend/src/components/statefulset/List.tsx | 2 + frontend/src/components/storage/ClaimList.tsx | 2 + .../src/components/storage/VolumeList.tsx | 1 + .../__snapshots__/ClaimList.stories.storyshot | 170 +- .../__snapshots__/ClassList.stories.storyshot | 67 +- .../VolumeList.stories.storyshot | 67 +- .../__snapshots__/VPAList.stories.storyshot | 174 +- ...utatingWebhookConfigList.stories.storyshot | 95 +- ...idatingWebhookConfigList.stories.storyshot | 95 +- frontend/src/components/workload/Overview.tsx | 4 +- frontend/src/i18n/locales/de/translation.json | 4 +- frontend/src/i18n/locales/en/translation.json | 4 +- frontend/src/i18n/locales/es/translation.json | 4 +- frontend/src/i18n/locales/fr/translation.json | 4 +- frontend/src/i18n/locales/pt/translation.json | 4 +- frontend/src/lib/util.ts | 9 +- frontend/src/redux/filterSlice.test.ts | 8 - frontend/src/redux/filterSlice.ts | 25 +- 78 files changed, 10008 insertions(+), 6603 deletions(-) diff --git a/e2e-tests/tests/headlampPage.ts b/e2e-tests/tests/headlampPage.ts index 4477d1657d3..51ae4a27621 100644 --- a/e2e-tests/tests/headlampPage.ts +++ b/e2e-tests/tests/headlampPage.ts @@ -81,7 +81,8 @@ export class HeadlampPage { const headers = await this.page.$$eval(`${tableSelector} th`, ths => ths.map(th => { if (th && th.textContent) { - return th.textContent.trim(); + // Table header also contains a number, displayed during multi-sorting, so we remove it + return th.textContent.trim().replace('0', ''); } }) ); diff --git a/frontend/src/components/App/Home/__snapshots__/index.stories.storyshot b/frontend/src/components/App/Home/__snapshots__/index.stories.storyshot index 1b6d1f6dc9f..416bc3effa8 100644 --- a/frontend/src/components/App/Home/__snapshots__/index.stories.storyshot +++ b/frontend/src/components/App/Home/__snapshots__/index.stories.storyshot @@ -158,29 +158,6 @@ exports[`Storyshots Home/Home Base 1`] = ` /> -
-
-
- -
-
-
+
+
+ +
+
- + +
+ + + +
- - -

- 3 months - -

- - - - - - - + aria-label="Go to previous page" + class="" + data-mui-internal-clone-element="true" + > + + + + + +
+
+
+
+
diff --git a/frontend/src/components/App/PluginSettings/PluginSettings.tsx b/frontend/src/components/App/PluginSettings/PluginSettings.tsx index a2d1eec360f..3135cb314cd 100644 --- a/frontend/src/components/App/PluginSettings/PluginSettings.tsx +++ b/frontend/src/components/App/PluginSettings/PluginSettings.tsx @@ -2,6 +2,7 @@ import { Switch, SwitchProps, Typography, useTheme } from '@mui/material'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import Link from '@mui/material/Link'; +import { MRT_Row } from 'material-react-table'; import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useDispatch } from 'react-redux'; @@ -9,7 +10,7 @@ import helpers from '../../../helpers'; import { useFilterFunc } from '../../../lib/util'; import { PluginInfo, reloadPage, setPluginSettings } from '../../../plugin/pluginsSlice'; import { useTypedSelector } from '../../../redux/reducers/reducers'; -import { Link as HeadlampLink, SectionBox, SimpleTable } from '../../common'; +import { Link as HeadlampLink, SectionBox, Table } from '../../common'; import SectionFilterHeader from '../../common/SectionFilterHeader'; /** @@ -164,11 +165,19 @@ export function PluginSettingsPure(props: PluginSettingsPureProps) { } > - { + header: t('translation|Name'), + accessorKey: 'name', + muiTableBodyCellProps: { + sx: { + flexDirection: 'column', + alignItems: 'flex-start', + width: 'unset', + }, + }, + Cell: ({ row: { original: plugin } }: { row: MRT_Row }) => { return ( <> @@ -184,16 +193,14 @@ export function PluginSettingsPure(props: PluginSettingsPureProps) { ); }, - sort: (a: PluginInfo, b: PluginInfo) => a.name.localeCompare(b.name), }, { - label: t('translation|Description'), - datum: 'description', - sort: true, + header: t('translation|Description'), + accessorKey: 'description', }, { - label: t('translation|Origin'), - getter: (plugin: PluginInfo) => { + header: t('translation|Origin'), + Cell: ({ row: { original: plugin } }: { row: MRT_Row }) => { const url = plugin?.homepage || plugin?.repository?.url; return plugin?.origin ? ( url ? ( @@ -205,22 +212,20 @@ export function PluginSettingsPure(props: PluginSettingsPureProps) { t('translation|Unknown') ); }, - sort: true, }, // TODO: Fetch the plugin status from the plugin settings store { - label: t('translation|Status'), - getter: (plugin: PluginInfo) => { + header: t('translation|Status'), + accessorFn: (plugin: PluginInfo) => { if (plugin.isCompatible === false) { return t('translation|Incompatible'); } return plugin.isEnabled ? t('translation|Enabled') : t('translation|Disabled'); }, - sort: true, }, { - label: t('translation|Enable'), - getter: (plugin: PluginInfo) => { + header: t('translation|Enable'), + Cell: ({ row: { original: plugin } }: { row: MRT_Row }) => { if (!plugin.isCompatible || !helpers.isElectron()) { return null; } @@ -239,7 +244,7 @@ export function PluginSettingsPure(props: PluginSettingsPureProps) { }, ] // remove the enable column if we're not in app mode - .filter(el => !(el.label === t('translation|Enable') && !helpers.isElectron()))} + .filter(el => !(el.header === t('translation|Enable') && !helpers.isElectron()))} data={pluginChanges} filterFunction={useFilterFunc(['.name'])} /> diff --git a/frontend/src/components/App/PluginSettings/__snapshots__/PluginSettings.stories.storyshot b/frontend/src/components/App/PluginSettings/__snapshots__/PluginSettings.stories.storyshot index 59d2fa4bb25..23fb18b46b7 100644 --- a/frontend/src/components/App/PluginSettings/__snapshots__/PluginSettings.stories.storyshot +++ b/frontend/src/components/App/PluginSettings/__snapshots__/PluginSettings.stories.storyshot @@ -24,300 +24,764 @@ exports[`Storyshots Settings/PluginSettings Default Save Enable 1`] = ` /> -
-
-
- -
-
-
- - - - - - - - - - + + + +
+
- Name - - +
+
+ +
+
+ + + + + + +
+ +
+
- Description -
- Origin - - Status -
- - - - - - - - - - - - - - - - +
+ Origin +
+ +
+ +
+ + + + + + - - - - - - + plugin a 0 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
-
+
- - plugin a 0 - - - - - - This is a plugin for this project PLUGIN A0 - - Unknown - - Enabled -
-
+
+ Name +
+ + + + + + 0 + + + +
+ +
+ + +
- - plugin a 1 - - - - - - This is a plugin for this project PLUGIN A1 - - Unknown - - Incompatible -
-
+
+ Description +
+ + + + + + 0 + + + +
+ +
+ + +
- - plugin a 2 - - - - - - This is a plugin for this project PLUGIN A2 - - Unknown - - Enabled -
+
+
+
+ Status +
+ + + + + + 0 + + +
+
+ +
+
+
-
- - plugin a 3 - -
- - 		- This is a plugin for this project PLUGIN A3 - - Unknown - - Incompatible -
+ This is a plugin for this project PLUGIN A0 + + Unknown + + Enabled +
+
+ + plugin a 1 + +
+ + 		+ This is a plugin for this project PLUGIN A1 + + Unknown + + Incompatible +
+
+ + plugin a 2 + +
+ + 		+ This is a plugin for this project PLUGIN A2 + + Unknown + + Enabled +
+
+ + plugin a 3 + +
+ + 		+ This is a plugin for this project PLUGIN A3 + + Unknown + + Incompatible +
+
+ + plugin a 4 + +
+ + 		+ This is a plugin for this project PLUGIN A4 + + Unknown + + Enabled +
+
+
+
+ +
- -
- + Rows per page + +
- plugin a 4 - -
+ + + +
+
- - - This is a plugin for this project PLUGIN A4 - - - Unknown - - - Enabled - - - - + class="MuiTypography-root MuiTypography-body2 MuiTypography-alignCenter css-htm6yz-MuiTypography-root" + > + 1-5 of 5 + +
+ + + + + + +
+
+
+ + @@ -362,29 +826,6 @@ exports[`Storyshots Settings/PluginSettings Empty 1`] = ` /> -
-
-
- -
-
-
-
-
-
- -
-
-
- - - - - - - - - - + + + +
+
- Name - - +
+
+ +
+
+ + + + + + +
+ +
+
- Description -
- Origin - - Status -
- - - - - - - - - - - - - - - - +
+ Origin +
+ +
+ +
+ + + + + + - - - - - - + plugin a 0 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
-
+
- - plugin a 0 - - - - - - This is a plugin for this project PLUGIN A0 - - Unknown - - Enabled -
-
+
+ Name +
+ + + + + + 0 + + + +
+ +
+ + +
- - plugin a 1 - - - - - - This is a plugin for this project PLUGIN A1 - - Unknown - - Incompatible -
-
+
+ Description +
+ + + + + + 0 + + + +
+ +
+ + +
- - plugin a 2 - - - - - - This is a plugin for this project PLUGIN A2 - - Unknown - - Enabled -
+
+
+
+ Status +
+ + + + + + 0 + + +
+
+ +
+
+
-
- - plugin a 3 - -
- - 		- This is a plugin for this project PLUGIN A3 - - Unknown - - Incompatible -
+ This is a plugin for this project PLUGIN A0 + + Unknown + + Enabled +
+
+ + plugin a 1 + +
+ + 		+ This is a plugin for this project PLUGIN A1 + + Unknown + + Incompatible +
+
+ + plugin a 2 + +
+ + 		+ This is a plugin for this project PLUGIN A2 + + Unknown + + Enabled +
+
+ + plugin a 3 + +
+ + 		+ This is a plugin for this project PLUGIN A3 + + Unknown + + Incompatible +
+
+ + plugin a 4 + +
+ + 		+ This is a plugin for this project PLUGIN A4 + + Unknown + + Enabled +
+
+
+
+ +
- -
- - plugin a 4 - -
+ Rows per page + +
+ + + +
+
- - - This is a plugin for this project PLUGIN A4 - - - Unknown - - - Enabled - - - - + class="MuiTypography-root MuiTypography-body2 MuiTypography-alignCenter css-htm6yz-MuiTypography-root" + > + 1-5 of 5 + +
+ + + + + + +
+
+
+
+ @@ -755,303 +1660,767 @@ exports[`Storyshots Settings/PluginSettings Few Items 1`] = ` /> -
-
-
- -
-
-
- - - - - - - - - - + + + +
+
- Name - - +
+
+ +
+
+ + + + + + +
+ +
+
- Description -
- Origin - - Status -
- - - - - - - - - - - - - - - - - - - - - +
+ Status +
+ + + + + + 0 + + + +
+ +
+ + + + + - - - - - - -
-
+
- - plugin a 0 - - - - - - This is a plugin for this project PLUGIN A0 - - Unknown - - Enabled -
-
+
+ Name +
+ + + + + + 0 + + + +
+ +
+ + +
- - plugin a 1 - - - - - - This is a plugin for this project PLUGIN A1 - - Unknown - - Incompatible -
-
+
+ Description +
+ + + + + + 0 + + + +
+ +
+ + +
- - plugin a 2 - - - - - - This is a plugin for this project PLUGIN A2 - - Unknown - - Enabled -
-
+
+ Origin +
+ +
+ +
+ + +
- - plugin a 3 - - - - - - This is a plugin for this project PLUGIN A3 - - Unknown - - Incompatible -
-
- - plugin a 4 - -
- - 		- This is a plugin for this project PLUGIN A4 - - Unknown - - Enabled -
-
-
- + + plugin a 0 + + + + + + This is a plugin for this project PLUGIN A0 + + + Unknown + + + Enabled + + + + +
+ + plugin a 1 + +
+ + + + This is a plugin for this project PLUGIN A1 + + + Unknown + + + Incompatible + + + + +
+ + plugin a 2 + +
+ + + + This is a plugin for this project PLUGIN A2 + + + Unknown + + + Enabled + + + + +
+ + plugin a 3 + +
+ + + + This is a plugin for this project PLUGIN A3 + + + Unknown + + + Incompatible + + + + +
+ + plugin a 4 + +
+ + + + This is a plugin for this project PLUGIN A4 + + + Unknown + + + Enabled + + + + + + +
+
+ +
+
+
+ +
+ + + +
+
+ + 1-5 of 5 + +
+ + + + + + +
+
+
+
+
+ + + `; @@ -1079,660 +2448,1174 @@ exports[`Storyshots Settings/PluginSettings Many Items 1`] = ` /> -
-
-
- -
-
-
- - - - - - - - - - + + + +
+
- Name - - +
+
+ +
+
+ + + + + + +
+ +
+
- Description -
- Origin - - Status -
- - - - - - - - - - - - - - - - - - - - - +
+ Status +
+ + + + + + 0 + + + +
+ +
+ + + + + - - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - + plugin a 9 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
-
+
- - plugin a 0 - - - - - - This is a plugin for this project PLUGIN A0 - - Unknown - - Enabled -
-
+
+ Name +
+ + + + + + 0 + + + +
+ +
+ + +
- - plugin a 1 - - - - - - This is a plugin for this project PLUGIN A1 - - Unknown - - Incompatible -
-
+
+ Description +
+ + + + + + 0 + + + +
+ +
+ + +
- - plugin a 2 - - - - - - This is a plugin for this project PLUGIN A2 - - Unknown - - Enabled -
-
+
+ Origin +
+ +
+ +
+ + +
- - plugin a 3 - - - - - - This is a plugin for this project PLUGIN A3 - - Unknown - - Incompatible -
-
- - plugin a 4 - -
- - 		- This is a plugin for this project PLUGIN A4 - - Unknown - - Enabled -
-
+ plugin a 0 + +
+ + 		- + + Unknown + + Enabled +
+
- plugin a 5 - -
- - 		- This is a plugin for this project PLUGIN A5 - - Unknown - - Incompatible -
-
+ plugin a 1 + +
+ + 		+ This is a plugin for this project PLUGIN A1 + + Unknown + - +
+
- plugin a 6 - -
- - 		- This is a plugin for this project PLUGIN A6 - - Unknown - - Enabled -
-
+ plugin a 2 + +
+ + 		+ This is a plugin for this project PLUGIN A2 + + Unknown + + Enabled +
- - plugin a 7 - - - - - This is a plugin for this project PLUGIN A7 - - Unknown - - Incompatible -
-
+ plugin a 3 + +
+ + 		+ This is a plugin for this project PLUGIN A3 + + Unknown + - +
+
- plugin a 8 - -
- - 		- This is a plugin for this project PLUGIN A8 - - Unknown - - Enabled -
-
+ plugin a 4 + +
+ + 		- + + Unknown + + Enabled +
+
- plugin a 9 - -
- - 		- This is a plugin for this project PLUGIN A9 - - Unknown - - Incompatible -
-
+ plugin a 5 + +
+ + 		+ This is a plugin for this project PLUGIN A5 + - + + Incompatible +
+
- plugin a 10 - -
- - 		- This is a plugin for this project PLUGIN A10 - - Unknown - - Enabled -
-
+ plugin a 6 + +
+ + 		+ This is a plugin for this project PLUGIN A6 + + Unknown + + Enabled +
- - plugin a 11 - - - - - This is a plugin for this project PLUGIN A11 - - Unknown - - Incompatible -
-
+ plugin a 7 + +
+ + 		+ This is a plugin for this project PLUGIN A7 + - + + Incompatible +
+
- plugin a 12 - -
- - 		- This is a plugin for this project PLUGIN A12 - - Unknown - - Enabled -
-
+ plugin a 8 + +
+ + 		- + + Unknown + + Enabled +
+
- plugin a 13 - -
- - 		- This is a plugin for this project PLUGIN A13 - - Unknown - - Incompatible -
+ This is a plugin for this project PLUGIN A9 + + Unknown + + Incompatible +
+
+ + plugin a 10 + +
+ + 		+ This is a plugin for this project PLUGIN A10 + + Unknown + + Enabled +
+
+ + plugin a 11 + +
+ + 		+ This is a plugin for this project PLUGIN A11 + + Unknown + + Incompatible +
+
+ + plugin a 12 + +
+ + 		+ This is a plugin for this project PLUGIN A12 + + Unknown + + Enabled +
+
+ + plugin a 13 + +
+ + 		+ This is a plugin for this project PLUGIN A13 + + Unknown + + Incompatible +
+
+ + plugin a 14 + +
+ + 		+ This is a plugin for this project PLUGIN A14 + + Unknown + + Enabled +
+
+
+
+ +
- -
- + Rows per page + +
- plugin a 14 - -
+ + + +
+
- - - This is a plugin for this project PLUGIN A14 - - - Unknown - - - Enabled - - - - + class="MuiTypography-root MuiTypography-body2 MuiTypography-alignCenter css-htm6yz-MuiTypography-root" + > + 1-15 of 15 + +
+ + + + + + +
+
+
+ + @@ -1763,660 +3646,1176 @@ exports[`Storyshots Settings/PluginSettings More Items 1`] = ` /> -
-
-
- -
-
-
- - - - - - - - - - + + + +
+
- Name - - +
+
+ +
+
+ + + + + + +
+ +
+
- Description -
- Origin - - Status -
- - - - - - - - - - - - - - - - - - - - - +
+ Status +
+ + + + + + 0 + + + +
+ +
+ + + + + - - - - - - - + + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - - + + + + + + - - - - - - + + + + + - - - - - - + + + + + - - - - - + plugin a 9 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
-
+
- - plugin a 0 - - - - - - This is a plugin for this project PLUGIN A0 - - Unknown - - Enabled -
-
+
+ Name +
+ + + + + + 0 + + + +
+ +
+ + +
- - plugin a 1 - - - - - - This is a plugin for this project PLUGIN A1 - - Unknown - - Incompatible -
-
+
+ Description +
+ + + + + + 0 + + + +
+ +
+ + +
- - plugin a 2 - - - - - - This is a plugin for this project PLUGIN A2 - - Unknown - - Enabled -
-
+
+ Origin +
+ +
+ +
+ + +
- - plugin a 3 - - - - - - This is a plugin for this project PLUGIN A3 - - Unknown - - Incompatible -
-
- - plugin a 4 - -
- - 		- This is a plugin for this project PLUGIN A4 - - Unknown - - Enabled -
-
+ plugin a 0 + +
+ + 		+ This is a plugin for this project PLUGIN A0 + + Unknown + + Enabled +
- - plugin a 5 - - - - - This is a plugin for this project PLUGIN A5 - - Unknown - - Incompatible -
-
+ plugin a 1 + +
+ + 		+ This is a plugin for this project PLUGIN A1 + - + + Incompatible +
+
- plugin a 6 - -
- - 		- This is a plugin for this project PLUGIN A6 - - Unknown - - Enabled -
-
+ plugin a 2 + +
+ + 		+ This is a plugin for this project PLUGIN A2 + + Unknown + - +
+
- plugin a 7 - -
- - 		- This is a plugin for this project PLUGIN A7 - - Unknown - - Incompatible -
-
+ plugin a 3 + +
+ + 		+ This is a plugin for this project PLUGIN A3 + - + + Incompatible +
+
- plugin a 8 - -
- - 		- This is a plugin for this project PLUGIN A8 - - Unknown - - Enabled -
-
+ plugin a 4 + +
+ + 		+ This is a plugin for this project PLUGIN A4 + + Unknown + - +
+
- plugin a 9 - -
- - 		- This is a plugin for this project PLUGIN A9 - - Unknown - - Incompatible -
-
+ plugin a 5 + +
+ + 		+ This is a plugin for this project PLUGIN A5 + - + + Incompatible +
+
- plugin a 10 - -
- - 		- This is a plugin for this project PLUGIN A10 - - Unknown - - Enabled -
-
+ plugin a 6 + +
+ + 		+ This is a plugin for this project PLUGIN A6 + + Unknown + + Enabled +
- - plugin a 11 - - - - - This is a plugin for this project PLUGIN A11 - - Unknown - - Incompatible -
-
+ plugin a 7 + +
+ + 		+ This is a plugin for this project PLUGIN A7 + - + + Incompatible +
+
- plugin a 12 - -
- - 		- This is a plugin for this project PLUGIN A12 - - Unknown - - Enabled -
-
+ plugin a 8 + +
+ + 		+ This is a plugin for this project PLUGIN A8 + + Unknown + - +
+
- plugin a 13 - -
- - 		- This is a plugin for this project PLUGIN A13 - - Unknown - - Incompatible -
+ This is a plugin for this project PLUGIN A9 + + Unknown + + Incompatible +
+
+ + plugin a 10 + +
+ + 		+ This is a plugin for this project PLUGIN A10 + + Unknown + + Enabled +
+
+ + plugin a 11 + +
+ + 		+ This is a plugin for this project PLUGIN A11 + + Unknown + + Incompatible +
+
+ + plugin a 12 + +
+ + 		+ This is a plugin for this project PLUGIN A12 + + Unknown + + Enabled +
+
+ + plugin a 13 + +
+ + 		+ This is a plugin for this project PLUGIN A13 + + Unknown + + Incompatible +
+
+ + plugin a 14 + +
+ + 		+ This is a plugin for this project PLUGIN A14 + + Unknown + + Enabled +
+
+
+
+ +
- -
- - plugin a 14 - -
+ Rows per page + +
+ + + +
+
- - - This is a plugin for this project PLUGIN A14 - - - Unknown - - - Enabled - - - - + class="MuiTypography-root MuiTypography-body2 MuiTypography-alignCenter css-htm6yz-MuiTypography-root" + > + 1-15 of 50 + +
+ + + + + + +
+
+
+
+ diff --git a/frontend/src/components/cluster/Overview.tsx b/frontend/src/components/cluster/Overview.tsx index 8bfdf2a6d4b..33325725f59 100644 --- a/frontend/src/components/cluster/Overview.tsx +++ b/frontend/src/components/cluster/Overview.tsx @@ -2,13 +2,11 @@ import { FormControlLabel, Switch } from '@mui/material'; import Grid from '@mui/material/Grid'; import React from 'react'; import { useTranslation } from 'react-i18next'; -import { useDispatch } from 'react-redux'; import { useLocation } from 'react-router'; import Event from '../../lib/k8s/event'; import Node from '../../lib/k8s/node'; import Pod from '../../lib/k8s/pod'; import { useFilterFunc } from '../../lib/util'; -import { setSearchFilter } from '../../redux/filterSlice'; import { DateLabel, Link, PageGrid, StatusLabel } from '../common'; import Empty from '../common/EmptyContent'; import ResourceListView from '../common/Resource/ResourceListView'; @@ -67,7 +65,6 @@ function EventsSection() { const location = useLocation(); const queryParams = new URLSearchParams(location.search); const eventsFilter = queryParams.get('eventsFilter'); - const dispatch = useDispatch(); const filterFunc = useFilterFunc(['.jsonData.involvedObject.kind']); const [isWarningEventSwitchChecked, setIsWarningEventSwitchChecked] = React.useState( Boolean( @@ -79,8 +76,8 @@ function EventsSection() { ); const [events, eventsError] = Event.useList({ limit: Event.maxLimit }); - const warningActionFilterFunc = (event: Event) => { - if (!filterFunc(event)) { + const warningActionFilterFunc = (event: Event, search?: string) => { + if (!filterFunc(event, search)) { return false; } @@ -93,14 +90,6 @@ function EventsSection() { return true; }; - React.useEffect(() => { - if (!eventsFilter) { - return; - } - // we want to consider search by id - dispatch(setSearchFilter(eventsFilter)); - }, [eventsFilter]); - const numWarnings = React.useMemo( () => events?.filter(e => e.type === 'Warning').length ?? '?', [events] @@ -134,6 +123,7 @@ function EventsSection() { , ], }} + defaultGlobalFilter={eventsFilter ?? undefined} data={events} errorMessage={Event.getErrorMessage(eventsError)} columns={[ @@ -157,6 +148,7 @@ function EventsSection() { label: t('Name'), getValue: event => event.involvedObjectInstance?.getName() ?? event.involvedObject.name, render: event => makeObjectLink(event), + gridTemplate: 1.5, }, 'namespace', { @@ -174,13 +166,15 @@ function EventsSection() { render: event => ( {event.message || ''} ), + gridTemplate: 1.5, }, { id: 'last-seen', label: t('Last Seen'), + gridTemplate: 'min-content', + cellProps: { align: 'right' }, getValue: event => -new Date(event.lastOccurrence).getTime(), render: event => , - cellProps: { align: 'right' }, }, ]} filterFunction={warningActionFilterFunc} diff --git a/frontend/src/components/cluster/__snapshots__/Overview.stories.storyshot b/frontend/src/components/cluster/__snapshots__/Overview.stories.storyshot index f1da93a53a0..8bbb2f0a088 100644 --- a/frontend/src/components/cluster/__snapshots__/Overview.stories.storyshot +++ b/frontend/src/components/cluster/__snapshots__/Overview.stories.storyshot @@ -521,17 +521,71 @@ exports[`Storyshots cluster/Overview Events 1`] = `
- +
+
+ +
+ +
+ +
+
+
+
+
@@ -556,7 +610,7 @@ exports[`Storyshots cluster/Overview Events 1`] = ` class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner" > diff --git a/frontend/src/components/common/Resource/__snapshots__/ResourceTable.stories.storyshot b/frontend/src/components/common/Resource/__snapshots__/ResourceTable.stories.storyshot index 8f54bdfe3b2..f7abeccd6d3 100644 --- a/frontend/src/components/common/Resource/__snapshots__/ResourceTable.stories.storyshot +++ b/frontend/src/components/common/Resource/__snapshots__/ResourceTable.stories.storyshot @@ -19,7 +19,7 @@ exports[`Storyshots ResourceTable Name Search 1`] = ` class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner" > @@ -2172,7 +2171,7 @@ exports[`Storyshots Table Label Search 1`] = ` - 1-2 of 2 + 1-4 of 4
-
-
- -
- -
- -
-
-
-
-
-
-
-
-
- -
@@ -2523,17 +2465,17 @@ exports[`Storyshots Table Name Search 1`] = ` class="MuiTableContainer-root css-nhjqqh-MuiTableContainer-root" > + + + + + + + + + + + + + + + + +
+ mydefinition.phonyresources0.io + + MyNamespace0 + + phony0 + +
+ mydefinition.phonyresources1.io + + MyNamespace1 + + phony1 + + {"mylabel1":"myvalue1"} +
mydefinition.phonyresources2.io MyNamespace2 phony2 {"mykey2":"mylabel"}
+ mydefinition.phonyresources3.io + + MyNamespace3 + + phony3 + + {"mykey3":"myvalue3"} +
@@ -2940,7 +2967,7 @@ exports[`Storyshots Table Name Search 1`] = ` - 1-1 of 1 + 1-4 of 4
-
-
- -
- -
- -
-
-
-
-
-
-
-
-
- -
@@ -3291,17 +3261,17 @@ exports[`Storyshots Table Namespace Search 1`] = ` class="MuiTableContainer-root css-nhjqqh-MuiTableContainer-root" > + + + + + + + + + + + + + + + + +
+ mydefinition.phonyresources0.io + + MyNamespace0 + + phony0 + +
+ mydefinition.phonyresources1.io + + MyNamespace1 + + phony1 + + {"mylabel1":"myvalue1"} +
+ mydefinition.phonyresources2.io + + MyNamespace2 + + phony2 + + {"mykey2":"mylabel"} +
mydefinition.phonyresources3.io MyNamespace3 phony3 {"mykey3":"myvalue3"} @@ -3644,7 +3699,7 @@ exports[`Storyshots Table Namespace Search 1`] = `
@@ -3708,7 +3763,7 @@ exports[`Storyshots Table Namespace Search 1`] = ` - 1-1 of 1 + 1-4 of 4
+
+

+ MyNamespace1 + + ,  + + + +1 + +

+
- -
- - + + -
+ - -
-
+ + + +
-
-
- - -
-
-
- -
@@ -4093,17 +4091,17 @@ exports[`Storyshots Table Namespace Select 1`] = ` class="MuiTableContainer-root css-nhjqqh-MuiTableContainer-root" >
mydefinition.phonyresources0.io MyNamespace0 phony0
mydefinition.phonyresources1.io MyNamespace1 phony1 {"mylabel1":"myvalue1"} @@ -4473,7 +4471,7 @@ exports[`Storyshots Table Namespace Select 1`] = `
@@ -4632,126 +4630,69 @@ exports[`Storyshots Table Not Found Message 1`] = ` class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root" >
-
-
-
- -
- -
- -
-
-
-
-
-
-
-
- -
@@ -4774,7 +4715,7 @@ exports[`Storyshots Table Not Found Message 1`] = ` class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner" > -
-
-
-
-
-
-
-
- -
- -
- -
-
-
-
-
-
+
+
+
+
+
-
- -
@@ -5638,17 +5625,17 @@ exports[`Storyshots Table Number Search 1`] = ` class="MuiTableContainer-root css-nhjqqh-MuiTableContainer-root" > + + + + + + + + + + + + + + +
+ mydefinition.phonyresources0.io + + MyNamespace0 + + 0 +
+ mydefinition.phonyresources1.io + + MyNamespace1 + + 10 +
+ mydefinition.phonyresources2.io + + MyNamespace2 + + 20 +
mydefinition.phonyresources3.io MyNamespace3 30 @@ -5908,7 +5964,7 @@ exports[`Storyshots Table Number Search 1`] = `
@@ -5972,7 +6028,7 @@ exports[`Storyshots Table Number Search 1`] = ` - 1-1 of 1 + 1-4 of 4
Name 0 Namespace 0 0
Name 1 Namespace 1 1
Name 2 Namespace 2 2
Name 3 Namespace 3 3
Name 4 Namespace 4 4 @@ -6548,7 +6604,7 @@ exports[`Storyshots Table Reflect In URL 1`] = `
@@ -6829,17 +6885,17 @@ exports[`Storyshots Table Reflect In URL With Prefix 1`] = ` class="MuiTableContainer-root css-nhjqqh-MuiTableContainer-root" >
Name 0 Namespace 0
Name 1 Namespace 1
Name 2 Namespace 2
Name 3 Namespace 3
Name 4 Namespace 4
@@ -7343,126 +7399,69 @@ exports[`Storyshots Table UID Search 1`] = ` class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root" >
-
-
-
- -
- -
- -
-
-
-
-
-
-
-
- -
@@ -7599,17 +7598,17 @@ exports[`Storyshots Table UID Search 1`] = ` class="MuiTableContainer-root css-nhjqqh-MuiTableContainer-root" > + + + + + + + + + + + + + + + + + +
mydefinition.phonyresources0.io MyNamespace0 phony0
+ mydefinition.phonyresources1.io + + MyNamespace1 + + phony1 + + {"mylabel1":"myvalue1"} +
+ mydefinition.phonyresources2.io + + MyNamespace2 + + phony2 + + {"mykey2":"mylabel"} +
+ mydefinition.phonyresources3.io + + MyNamespace3 + + phony3 + + {"mykey3":"myvalue3"} +
@@ -8014,7 +8100,7 @@ exports[`Storyshots Table UID Search 1`] = ` - 1-1 of 1 + 1-4 of 4
mydefinition.phonyresources0.io MyNamespace0
mydefinition.phonyresources1.io MyNamespace1
mydefinition.phonyresources2.io MyNamespace2
mydefinition.phonyresources3.io MyNamespace3 @@ -8449,7 +8535,7 @@ exports[`Storyshots Table With Filter Multi Select 1`] = `
@@ -8775,17 +8861,17 @@ exports[`Storyshots Table With Global Filter 1`] = ` class="MuiTableContainer-root css-nhjqqh-MuiTableContainer-root" > - +
-

- No results found -

+
+
+

+ No results found +

+
+
+
@@ -9371,17 +9472,17 @@ exports[`Storyshots Table With Sorting 1`] = ` class="MuiTableContainer-root css-nhjqqh-MuiTableContainer-root" >
mydefinition.phonyresources3.io MyNamespace3 phony3 {"mykey3":"myvalue3"}
mydefinition.phonyresources2.io MyNamespace2 phony2 {"mykey2":"mylabel"}
mydefinition.phonyresources1.io MyNamespace1 phony1 {"mylabel1":"myvalue1"}
mydefinition.phonyresources0.io MyNamespace0 phony0
diff --git a/frontend/src/components/common/__snapshots__/SimpleTable.stories.storyshot b/frontend/src/components/common/__snapshots__/SimpleTable.stories.storyshot index 81589ec7831..730859e90e4 100644 --- a/frontend/src/components/common/__snapshots__/SimpleTable.stories.storyshot +++ b/frontend/src/components/common/__snapshots__/SimpleTable.stories.storyshot @@ -294,126 +294,69 @@ exports[`Storyshots SimpleTable Label Search 1`] = ` class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root" >
-
-
- -
- -
- -
-
-
-
-
-
-
-
-
- -
@@ -545,126 +488,69 @@ exports[`Storyshots SimpleTable Name Search 1`] = ` class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root" >
-
-
- -
- -
- -
-
-
-
-
-
-
-
-
- -
@@ -772,126 +658,69 @@ exports[`Storyshots SimpleTable Namespace Search 1`] = ` class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root" >
-
-
- -
- -
- -
-
-
-
-
-
-
-
-
- -
@@ -999,160 +828,103 @@ exports[`Storyshots SimpleTable Namespace Select 1`] = ` class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root" >
-
-
-
- -
-

- MyNamespace1 - - ,  - - - +1 - -

- -
- - -
-
-
-
-
-
-
-
- -
@@ -1282,126 +1054,69 @@ exports[`Storyshots SimpleTable Not Found Message 1`] = ` class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root" >
-
-
-
- -
- -
- -
-
-
-
-
-
-
-
- -
@@ -1503,126 +1218,69 @@ exports[`Storyshots SimpleTable Number Search 1`] = ` class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root" >
-
-
-
- -
- -
- -
-
-
-
-
-
-
-
- -
@@ -2021,126 +1679,69 @@ exports[`Storyshots SimpleTable UID Search 1`] = ` class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root" >
-
-
-
- -
- -
- -
-
-
-
-
-
-
-
- -
diff --git a/frontend/src/components/configmap/List.tsx b/frontend/src/components/configmap/List.tsx index e72e341caf9..a29dace7679 100644 --- a/frontend/src/components/configmap/List.tsx +++ b/frontend/src/components/configmap/List.tsx @@ -16,6 +16,7 @@ export default function ConfigMapList() { id: 'data', label: t('translation|Data'), getValue: (configmap: ConfigMap) => Object.keys(configmap.data || {}).length || 0, + gridTemplate: 0.5, }, 'age', ]} diff --git a/frontend/src/components/configmap/__snapshots__/List.stories.storyshot b/frontend/src/components/configmap/__snapshots__/List.stories.storyshot index 3f810f6ea49..ecc6266ec65 100644 --- a/frontend/src/components/configmap/__snapshots__/List.stories.storyshot +++ b/frontend/src/components/configmap/__snapshots__/List.stories.storyshot @@ -33,17 +33,71 @@ exports[`Storyshots ConfigMap/ListView Items 1`] = `
- +
+
+ +
+ +
+ +
+
+
+
+
@@ -68,7 +122,7 @@ exports[`Storyshots ConfigMap/ListView Items 1`] = ` class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner" > @@ -608,17 +662,17 @@ exports[`Storyshots crd/CustomResourceDefinition Details 1`] = ` class="MuiTableContainer-root css-nhjqqh-MuiTableContainer-root" >
mycustomresource

myotherresource

@@ -1329,29 +1383,6 @@ exports[`Storyshots crd/CustomResourceDefinition List 1`] = ` /> -
-
-
- -
-
-
@@ -256,17 +310,17 @@ exports[`Storyshots crd/CustomResourceList List 1`] = ` class="MuiTableContainer-root css-nhjqqh-MuiTableContainer-root" >
mycustomresource

myotherresource

diff --git a/frontend/src/components/cronjob/List.tsx b/frontend/src/components/cronjob/List.tsx index 84c5eaa1334..3594acc1992 100644 --- a/frontend/src/components/cronjob/List.tsx +++ b/frontend/src/components/cronjob/List.tsx @@ -48,11 +48,13 @@ export default function CronJobList() { id: 'suspend', label: t('translation|Suspend'), getValue: cronJob => cronJob.spec.suspend.toString(), + gridTemplate: 0.6, }, { id: 'active', label: t('translation|Active'), getValue: cronJob => cronJob.status?.active?.length || 0, + gridTemplate: 0.6, }, { id: 'lastScheduleTime', diff --git a/frontend/src/components/cronjob/__snapshots__/CronJobDetails.stories.storyshot b/frontend/src/components/cronjob/__snapshots__/CronJobDetails.stories.storyshot index 5486a2dd0db..b91eb09fc75 100644 --- a/frontend/src/components/cronjob/__snapshots__/CronJobDetails.stories.storyshot +++ b/frontend/src/components/cronjob/__snapshots__/CronJobDetails.stories.storyshot @@ -280,29 +280,6 @@ exports[`Storyshots CronJob/CronJobDetailsView Every Ast 1`] = ` /> -
-
-
- -
-
-
-
-
-
- -
-
-
daemonSet.status?.currentNumberScheduled || 0, + gridTemplate: 0.6, }, { id: 'currentPods', label: t('translation|Current'), getValue: daemonSet => daemonSet.status?.currentNumberScheduled || 0, + gridTemplate: 0.6, }, { id: 'desiredPods', label: t('translation|Desired', { context: 'pods' }), getValue: daemonSet => daemonSet.status?.desiredNumberScheduled || 0, + gridTemplate: 0.6, }, { id: 'readyPods', label: t('translation|Ready'), getValue: daemonSet => daemonSet.status?.numberReady || 0, + gridTemplate: 0.6, }, { id: 'nodeSelector', diff --git a/frontend/src/components/daemonset/__snapshots__/List.stories.storyshot b/frontend/src/components/daemonset/__snapshots__/List.stories.storyshot index 7b51e64171c..f7b3f913b78 100644 --- a/frontend/src/components/daemonset/__snapshots__/List.stories.storyshot +++ b/frontend/src/components/daemonset/__snapshots__/List.stories.storyshot @@ -36,17 +36,71 @@ exports[`Storyshots DaemonSet/List Daemon Sets 1`] = `
- +
+
+ +
+ +
+ +
+
+
+
+
@@ -71,7 +125,7 @@ exports[`Storyshots DaemonSet/List Daemon Sets 1`] = ` class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner" > @@ -68,7 +122,7 @@ exports[`Storyshots endpoints/EndpointsListView Items 1`] = ` class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner" > @@ -68,7 +122,7 @@ exports[`Storyshots hpa/HpaListView Items 1`] = ` class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner" > -
-
-
- -
-
-
@@ -68,7 +122,7 @@ exports[`Storyshots Ingress/ListView Items 1`] = ` class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner" > @@ -68,7 +122,7 @@ exports[`Storyshots Job/List Items 1`] = ` class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner" > @@ -68,7 +122,7 @@ exports[`Storyshots Lease/ListView Items 1`] = ` class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner" > @@ -68,7 +122,7 @@ exports[`Storyshots LimitRange/ListView Items 1`] = ` class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner" >
@@ -68,7 +122,7 @@ exports[`Storyshots Pod/PodListView Items 1`] = ` class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner" > @@ -68,7 +122,7 @@ exports[`Storyshots PDB/PDBListView Items 1`] = ` class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner" > -
-
-
- -
-
-
@@ -71,7 +125,7 @@ exports[`Storyshots ReplicaSet/List Replica Sets 1`] = ` class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner" > @@ -68,7 +122,7 @@ exports[`Storyshots ResourceQuota/ResourceQuotaListView Items 1`] = ` class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner" > -
-
-
- -
-
-
@@ -68,7 +122,7 @@ exports[`Storyshots Secret/ListView Items 1`] = ` class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner" > @@ -68,7 +122,7 @@ exports[`Storyshots PersistentVolumeClaim/ListView Items 1`] = ` class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner" > -
-
-
- -
-
-
-
-
-
- -
-
-
@@ -68,7 +122,7 @@ exports[`Storyshots VPA/VPAListView List 1`] = ` class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner" > -
-
-
- -
-
-
-
-
-
- -
-
-