diff --git a/docs/development/api/modules/plugin_registry.md b/docs/development/api/modules/plugin_registry.md index 904151614df..a988a235523 100644 --- a/docs/development/api/modules/plugin_registry.md +++ b/docs/development/api/modules/plugin_registry.md @@ -639,7 +639,7 @@ registerResourceTableColumnsProcessor(function ageRemover({ id, columns }) { if (id === 'headlamp-pods') { columns.push({ label: 'Init Containers', - getter: (pod: Pod) => { + getValue: (pod: Pod) => { return pod.spec.initContainers.length; }, }); diff --git a/e2e-tests/tests/headlampPage.ts b/e2e-tests/tests/headlampPage.ts index 76e729e7857..4477d1657d3 100644 --- a/e2e-tests/tests/headlampPage.ts +++ b/e2e-tests/tests/headlampPage.ts @@ -1,3 +1,4 @@ +/// import { expect, Page } from '@playwright/test'; export class HeadlampPage { @@ -5,7 +6,6 @@ export class HeadlampPage { async authenticate() { await this.page.goto('/'); - await this.page.waitForSelector('h1:has-text("Authentication")'); // Expects the URL to contain c/main/token @@ -104,7 +104,9 @@ export class HeadlampPage { const rowsDisplayed1 = await this.getRowsDisplayed(); // Click on the next page button - const nextPageButton = this.page.getByTitle('Next page'); + const nextPageButton = this.page.getByRole('button', { + name: 'Go to next page', + }); await nextPageButton.click(); // Get value of rows per page after clicking next page button @@ -115,7 +117,7 @@ export class HeadlampPage { } async getRowsDisplayed() { - const paginationCaption = this.page.locator("p:has-text(' of ')"); + const paginationCaption = this.page.locator("span:has-text(' of ')"); const captionText = await paginationCaption.textContent(); return captionText; } diff --git a/frontend/src/components/App/Home/__snapshots__/index.stories.storyshot b/frontend/src/components/App/Home/__snapshots__/index.stories.storyshot index 07cc307af57..27b79e3456e 100644 --- a/frontend/src/components/App/Home/__snapshots__/index.stories.storyshot +++ b/frontend/src/components/App/Home/__snapshots__/index.stories.storyshot @@ -186,132 +186,584 @@ exports[`Storyshots Home/Home Base 1`] = ` class="MuiBox-root css-1txv3mw" >
- - +
+
+ +
+
+ + - - - - - - - - + + + +
+
+ +
+ +
+
- Name -
- Status - - Warnings - - Kubernetes Version - - -
- - - - - + + + + + + -
+ + cluster0 + + +
+ + + - - - + - - cluster1 - - - + - - - + + - - - + - - cluster2 - - - + - - - + + + + + +
- - cluster0 - - -
+
+
+ Name +
+ + + + + + 0 + + +
+
+ +
+
+ +
- -

+

+ Status +
+ + + + + + 0 + + +
+
- ⋯ -

+ +
- - - 		- ⋯ - - ⋯ - + +
+
+
+ Warnings +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Kubernetes Version +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ +
+ + + + + + 0 + + +
+
+ +
+
+
+
+
+ +

+ ⋯ +

+
+
+ 		+ ⋯ + + ⋯ +
-
-
+
-
+ cluster1 + +
- -

- ⋯ -

+ +

+ ⋯ +

+
- - 		- ⋯ - - ⋯ - -
+
+ ⋯ + + ⋯ +
-
-
+
-
+ cluster2 + +
- -

- ⋯ -

+ +

+ ⋯ +

+
- - 		- ⋯ - - ⋯ - -
+
+ ⋯ + + ⋯ +
+
+
+
+
+ +
+
+
+ +
+ + + +
- - - - + + 1-3 of 3 + +
+ + + + + + +
+
+
+
+
diff --git a/frontend/src/components/App/Home/index.tsx b/frontend/src/components/App/Home/index.tsx index 0419d53e9bd..4b4d5928dc7 100644 --- a/frontend/src/components/App/Home/index.tsx +++ b/frontend/src/components/App/Home/index.tsx @@ -212,38 +212,38 @@ function HomeComponent(props: HomeComponentProps) { > ( + getValue: cluster => cluster.name, + render: ({ name }) => ( {name} ), - sort: (c1: Cluster, c2: Cluster) => c1.name.localeCompare(c2.name), }, { label: t('Status'), - getter: ({ name }: Cluster) => , + getValue: cluster => cluster.name, + render: ({ name }) => , }, { label: t('Warnings'), - getter: ({ name }: Cluster) => renderWarningsText(name), - sort: true, + getValue: ({ name }) => renderWarningsText(name), }, { label: t('glossary|Kubernetes Version'), - getter: ({ name }: Cluster) => versions[name]?.gitVersion || '⋯', - sort: true, + getValue: ({ name }) => versions[name]?.gitVersion || '⋯', }, { label: '', - getter: (cluster: Cluster) => ( - - - - ), + getValue: () => '', + cellProps: { + align: 'right', + }, + render: cluster => , }, ]} data={Object.values(clusters)} diff --git a/frontend/src/components/App/Notifications/__snapshots__/List.stories.storyshot b/frontend/src/components/App/Notifications/__snapshots__/List.stories.storyshot index f2946d16126..ffdfaf5c9d2 100644 --- a/frontend/src/components/App/Notifications/__snapshots__/List.stories.storyshot +++ b/frontend/src/components/App/Notifications/__snapshots__/List.stories.storyshot @@ -3,12 +3,12 @@ exports[`Storyshots Notifications List 1`] = `
-
-
- -
- - + + + @@ -568,334 +540,959 @@ exports[`Storyshots cluster/Overview Events 1`] = ` class="MuiBox-root css-1txv3mw" >
- - - - - - - - - - - - + + + +
+
- Type - - - Name - - - Namespace - - +
+
+ +
+
+ + + + + + +
+ +
+
- Reason -
- Message - - Last Seen -
- - - - - - - +
+
+ Namespace +
+ + + + + + 0 + + +
+
+ +
+ + + + + + + + - - - + + + + + + + - - default - - - + + + + + + + - - FailedGetResourceMetric - - - + + + + + + + +
- Pod - - - nginx-deployment-1234567890-abcde - - - - default - - - - FailedGetResourceMetric - - -
+
+
+ Type +
+ + + + + + 0 + + +
+
+ +
+
+ + 		- - - - -

+

+ Name +
+ + + + + + 0 + + + +
+ +
+ + + 		- 3mo - -

- -
+
+
+
+ Reason +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Message +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Last Seen +
+ + + + + + 0 + + +
+
+ +
+
+
- Pod - - - nginx-deployment-abcd-1234567890 - - + Pod + + + nginx-deployment-abcd-1234567890 + + + + default + + + + FailedGetResourceMetric + + +
+ +
+ 		+

+ 3mo + +

+
+ Pod + + + nginx-deployment-1234567890-abcde + + + + default + + + + FailedGetResourceMetric + + +
+ +
+ 		+

+ 3mo + +

+
+ + + nginx-deployment + + + + default + + + + FailedGetResourceMetric + + +
+ +
+ 		+

+ 3mo + +

+
+
+
+
+ +
+
+
+ + + +
- - -

- 3mo - -

- - - - - HorizontalPodAutoscaler - - - - nginx-deployment - - - - - default - - - - FailedGetResourceMetric + 1-3 of 3 - -
- + + + + +
- - -

- 3mo - -

- - - - +
+
+
+
diff --git a/frontend/src/components/common/ErrorBoundary/ErrorBoundary.tsx b/frontend/src/components/common/ErrorBoundary/ErrorBoundary.tsx index 4c72ea5c4ae..30cbb3702d7 100644 --- a/frontend/src/components/common/ErrorBoundary/ErrorBoundary.tsx +++ b/frontend/src/components/common/ErrorBoundary/ErrorBoundary.tsx @@ -44,14 +44,20 @@ export default class ErrorBoundary extends Component render() { const { error } = this.state; if (error) { + console.error('ErrorBoundary:', error); store.dispatch(eventAction({ type: HeadlampEventType.ERROR_BOUNDARY, data: error })); } if (!error) { return this.props.children; } + if (!this.props.fallback) { + return null; + } if (isValidElement(this.props.fallback)) { return this.props.fallback; } - return this.props.fallback ? Children.toArray([]) : null; + + const FallbackComponent = this.props.fallback as ComponentType<{ error: Error }>; + return Children.toArray([]); } } diff --git a/frontend/src/components/common/ErrorPage/__snapshots__/ErrorPage.stories.storyshot b/frontend/src/components/common/ErrorPage/__snapshots__/ErrorPage.stories.storyshot index 8f567552ff1..0afb7749c30 100644 --- a/frontend/src/components/common/ErrorPage/__snapshots__/ErrorPage.stories.storyshot +++ b/frontend/src/components/common/ErrorPage/__snapshots__/ErrorPage.stories.storyshot @@ -49,7 +49,7 @@ exports[`Storyshots common/GenericError Component Title 1`] = ` class="MuiTypography-root MuiTypography-h1 css-5ewpze-MuiTypography-root" > + + + + + + + + + diff --git a/frontend/src/components/common/Resource/__snapshots__/ResourceTable.stories.storyshot b/frontend/src/components/common/Resource/__snapshots__/ResourceTable.stories.storyshot index bcab273a0fd..049ce3c276f 100644 --- a/frontend/src/components/common/Resource/__snapshots__/ResourceTable.stories.storyshot +++ b/frontend/src/components/common/Resource/__snapshots__/ResourceTable.stories.storyshot @@ -3,113 +3,612 @@ exports[`Storyshots ResourceTable Name Search 1`] = `
- - - - - - - - - + + + +
+
- Name - - +
+
+ +
+
+ + + + + + +
+ +
+
+
+
+
+
+ + +
+ + + +
+ +
+
+
+
+
+
- Namespace -
- Age -
- - - + + + + + - - MyNamespace3 - - - + + + + + +
- - mypod3 - - +
+
+
+ Name +
+ + + + + + 0 + + +
+
+ +
+
+ + 		+
+
+
+ Namespace +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Age +
+ + + + + + 0 + + +
+
+ +
+
+
+ + mypod3 + + + + MyNamespace3 + + +

+ 3mo + +

+
+
+
+
+ +
+
-

- 3mo - -

- - - - + +
+ + + +
+
+ + 1-1 of 1 + +
+ + + + + + +
+
+
+
+
`; @@ -117,224 +616,666 @@ exports[`Storyshots ResourceTable Name Search 1`] = ` exports[`Storyshots ResourceTable No Filter 1`] = `
- - +
+
+ +
+
+ + +
-
+
-
- - - - - + + + +
+
- Name - - Namespace - - Age -
- - - - + - +
+
+ Age +
+ + + + + + 0 + + +
+
+ +
+ + + + + - - - - - - + + + + - - mypod2 - - - + + + + - - MyNamespace2 - - - + + + + -

+ + mypod3 + + +

- - + MyNamespace3 + + + + + + +
- - mypod0 - - - - MyNamespace0 - - -

+

+
+
+ Name +
+ + + + + + 0 + + +
+
+ +
+
+ + 		+
+
+
+ Namespace +
+ + + + + + 0 + + +
+
+ +
+
+ 		- 3mo - -

- -
- - mypod1 - - - - MyNamespace1 - - -

- 3mo - -

-
+ mypod0 + + + + MyNamespace0 + + +

+ 3mo + +

+
+ + mypod1 + + + + MyNamespace1 + + +

+ 3mo + +

+
+ + mypod2 + + + + MyNamespace2 + + +

+ 3mo + +

+
- 3mo - -

-
+

+ 3mo + +

+
+
+
+
+ +
- - - mypod3 - - - - - MyNamespace3 - - - -

+ +

+ + + +
+
+ - 3mo - -

- - - - + 1-4 of 4 + +
+ + + + + + +
+
+
+
+ `; @@ -342,167 +1283,545 @@ exports[`Storyshots ResourceTable No Filter 1`] = ` exports[`Storyshots ResourceTable With Hidden Cols 1`] = `
- - +
+
+ +
+
+ + - - - - - + + + +
+
+ +
+ +
+
- Name + -
- Age -
- - - - +
+
+ Age +
+ + + + + + 0 + + +
+
+ +
+ + + + + - - + + + -

- 3mo - -

- - - - + + + - - mypod2 - - - + + + -

+ + mypod3 + + +

- - + 3mo + +

+ + + + +
- - mypod0 - - -

+

+
+
+ Name +
+ + + + + + 0 + + +
+
+ +
+
+ + 		- 3mo - -

- -
- - mypod1 - - + + mypod0 + + +

+ 3mo + +

+
+ mypod1 + + +

+ 3mo + +

+
+ + mypod2 + + +

+ 3mo + +

+
- 3mo - -

-
+
+
+
+ +
- - - mypod3 - - - -

+ +

+ + + +
+
+ - 3mo - -

- - - - + 1-4 of 4 + +
+ + + + + + +
+
+
+
+ `; diff --git a/frontend/src/components/common/Resource/resourceTableSlice.ts b/frontend/src/components/common/Resource/resourceTableSlice.ts index defa01c446c..c584ff2a127 100644 --- a/frontend/src/components/common/Resource/resourceTableSlice.ts +++ b/frontend/src/components/common/Resource/resourceTableSlice.ts @@ -17,10 +17,10 @@ export type TableColumnsProcessor = { * * @returns The new table columns. */ - processor: (args: { + processor: (args: { id: string; - columns: ResourceTableProps['columns']; - }) => ResourceTableProps['columns']; + columns: ResourceTableProps['columns']; + }) => ResourceTableProps['columns']; }; const initialState: ResourceTableState = { diff --git a/frontend/src/components/common/Tooltip/TooltipLight.tsx b/frontend/src/components/common/Tooltip/TooltipLight.tsx index 4e83ca451c5..86bd7277335 100644 --- a/frontend/src/components/common/Tooltip/TooltipLight.tsx +++ b/frontend/src/components/common/Tooltip/TooltipLight.tsx @@ -1,13 +1,15 @@ import Tooltip, { TooltipProps } from '@mui/material/Tooltip'; import withStyles from '@mui/styles/withStyles'; +import { ReactElement, ReactNode } from 'react'; -export interface TooltipLightProps extends TooltipProps { +export interface TooltipLightProps extends Omit { /** * If true, the tooltip will be interactive. Defaults to true. * * If a tooltip is interactive, it will close when the user hovers over the tooltip before the leaveDelay is expired. */ interactive?: boolean; + children: ReactNode; } const StyledTooltip = withStyles(theme => ({ @@ -32,5 +34,13 @@ export default function TooltipLight(props: TooltipLightProps) { ); } - return ; + return ( + + ); } diff --git a/frontend/src/components/common/__snapshots__/ActionsNotifier.stories.storyshot b/frontend/src/components/common/__snapshots__/ActionsNotifier.stories.storyshot index e4597a42729..bd38a709952 100644 --- a/frontend/src/components/common/__snapshots__/ActionsNotifier.stories.storyshot +++ b/frontend/src/components/common/__snapshots__/ActionsNotifier.stories.storyshot @@ -36,7 +36,7 @@ exports[`Storyshots ActionsNotifier Some 1`] = ` class="SnackbarItem-action" > + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+ Name +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Status +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Age +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Long Field Name +
+ + + + + + 0 + + +
+
+ +
+
+
+ some name0 + + some status0 + + some age0 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+ some name1 + + some status1 + + some age1 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+ some name2 + + some status2 + + some age2 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
+
+
+
+ +
+
+
+ +
+ + + +
+
+ + 1-3 of 3 + +
+ + + + + + +
+
+
+
+
+ + +`; + +exports[`Storyshots Table Getter 1`] = ` +
+
+
+
+
+
+ +
+
+
+ +
+ +
+
+ + + +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+ Name +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Status +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Age +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Long Field Name +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Number +
+ + + + + + 0 + + +
+
+ +
+
+
+ some name0 + + some status0 + + some age0 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + 22 +
+ some name1 + + some status1 + + some age1 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + 33 +
+ some name2 + + some status2 + + some age2 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + 44 +
+
+
+
+ +
+
+
+ +
+ + + +
+
+ + 1-3 of 3 + +
+ + + + + + +
+
+
+
+
+
+
+`; + +exports[`Storyshots Table Label Search 1`] = ` +
+
+
+
+

+ Test +

+
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+ +
+
+
+
+
+
+
+
+ + +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ +
+ +
+
+ + + +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+ Name +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Namespace +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ UID +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Labels +
+ + + + + + 0 + + +
+
+ +
+
+
+ mydefinition.phonyresources1.io + + MyNamespace1 + + phony1 + + {"mylabel1":"myvalue1"} +
+ mydefinition.phonyresources2.io + + MyNamespace2 + + phony2 + + {"mykey2":"mylabel"} +
+
+
+
+ +
+
+
+ +
+ + + +
+
+ + 1-2 of 2 + +
+ + + + + + +
+
+
+
+
+
+
+`; + +exports[`Storyshots Table Name Search 1`] = ` +
+
+
+
+

+ Test +

+
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+ +
+
+
+
+
+
+
+
+ + +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ +
+ +
+
+ + + +
+
+
+
+
+ + + + + + + + + + + + + + + + + + +
+
+
+
+ Name +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Namespace +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ UID +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Labels +
+ + + + + + 0 + + +
+
+ +
+
+
+ mydefinition.phonyresources2.io + + MyNamespace2 + + phony2 + + {"mykey2":"mylabel"} +
+
+
+
+ +
+
+
+ +
+ + + +
+
+ + 1-1 of 1 + +
+ + + + + + +
+
+
+
+
+
+
+`; + +exports[`Storyshots Table Namespace Search 1`] = ` +
+
+
+
+

+ Test +

+
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+ +
+
+
+
+
+
+
+
+ + +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ +
+ +
+
+ + + +
+
+
+
+
+ + + + + + + + + + + + + + + + + + +
+
+
+
+ Name +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Namespace +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ UID +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Labels +
+ + + + + + 0 + + +
+
+ +
+
+
+ mydefinition.phonyresources3.io + + MyNamespace3 + + phony3 + + {"mykey3":"myvalue3"} +
+
+
+
+ +
+
+
+ +
+ + + +
+
+ + 1-1 of 1 + +
+ + + + + + +
+
+
+
+
+
+
+`; + +exports[`Storyshots Table Namespace Select 1`] = ` +
+
+
+
+

+ Test +

+
+
+
+
+
+
+
+
+
+
+
+ +
+

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

+ +
+ + +
+
+
+
+
+
+
+
+ + +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ +
+ +
+
+ + + +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+ Name +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Namespace +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ UID +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Labels +
+ + + + + + 0 + + +
+
+ +
+
+
+ mydefinition.phonyresources0.io + + MyNamespace0 + + phony0 + +
+ mydefinition.phonyresources1.io + + MyNamespace1 + + phony1 + + {"mylabel1":"myvalue1"} +
+
+
+
+ +
+
+
+ +
+ + + +
+
+ + 1-2 of 2 + +
+ + + + + + +
+
+
+
+
+
+
+`; + +exports[`Storyshots Table Not Found Message 1`] = ` +
+
+
+
+

+ Test +

+
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+ +
+
+
+
+
+
+
+
+ + +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ +
+ +
+
+ + + +
+
+
+
+
+ + + + + + + + + + + + + + + +
+
+
+
+ Name +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Namespace +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ UID +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Labels +
+ + + + + + 0 + + +
+
+ +
+
+
+

+ No records to display +

+
+
+
+
+ +
+
+
+ +
+ + + +
+
+ + 0-0 of 0 + +
+ + + + + + +
+
+
+
+
+
+
+`; + +exports[`Storyshots Table Number Search 1`] = ` +
+
+
+
+

+ Test +

+
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+ +
+
+
+
+
+
+
+
+ + +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ +
+ +
+
+ + + +
+
+
+
+
+ + + + + + + + + + + + + + + + +
+
+
+
+ Name +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Namespace +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Number +
+ + + + + + 0 + + +
+
+ +
+
+
+ mydefinition.phonyresources3.io + + MyNamespace3 + + 30 +
+
+
+
+ +
+
+
+ +
+ + + +
+
+ + 1-1 of 1 + +
+ + + + + + +
+
+
+
+
+
+
+`; + +exports[`Storyshots Table Reflect In URL 1`] = ` +
+
+

+ Test changing the page and rows per page. +

+

+ + Current URL search: + + + ?p=2 +

+
+
+
+
+
+ +
+
+
+ +
+ +
+
+ + + +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+ Name +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Namespace +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Number +
+ + + + + + 0 + + +
+
+ +
+
+
+ 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 +
+
+
+
+ +
+
+
+ +
+ + + +
+
+ + 1-5 of 50 + +
+ + + + + + +
+
+
+
+
+
+
+
+`; + +exports[`Storyshots Table Reflect In URL With Prefix 1`] = ` +
+
+

+ Test changing the page and rows per page. +

+

+ + Current URL search: + + + ?p=2 +

+
+
+
+
+
+ +
+
+
+ +
+ +
+
+ + + +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+ Name +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Namespace +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Number +
+ + + + + + 0 + + +
+
+ +
+
+
+ Name 0 + + Namespace 0 + +
+ Name 1 + + Namespace 1 + +
+ Name 2 + + Namespace 2 + +
+ Name 3 + + Namespace 3 + +
+ Name 4 + + Namespace 4 + +
+
+
+
+ +
+
+
+ +
+ + + +
+
+ + 1-5 of 50 + +
+ + + + + + +
+
+
+
+
+
+
+
+`; + +exports[`Storyshots Table UID Search 1`] = ` +
+
+
+
+

+ Test +

+
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+ +
+
+
+
+
+
+
+
+ + +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ +
+ +
+
+ + + +
+
+
+
+
+ + + + + + + + + + + + + + + + + +
+
+
+
+ Name +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Namespace +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ UID +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Labels +
+ + + + + + 0 + + +
+
+ +
+
+
+ mydefinition.phonyresources0.io + + MyNamespace0 + + phony0 + +
+
+
+
+ +
+
+
+ +
+ + + +
+
+ + 1-1 of 1 + +
+ + + + + + +
+
+
+
+
+
+
+`; + +exports[`Storyshots Table With Filter Multi Select 1`] = ` +
+
+
+
+
+
+ +
+
+
+ +
+ +
+
+ + + +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+ Name +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Namespace +
+ + + + + + 0 + + +
+
+ +
+
+
+ mydefinition.phonyresources0.io + + MyNamespace0 +
+ mydefinition.phonyresources1.io + + MyNamespace1 +
+ mydefinition.phonyresources2.io + + MyNamespace2 +
+ mydefinition.phonyresources3.io + + MyNamespace3 +
+
+
+
+ +
+
+
+ +
+ + + +
+
+ + 1-4 of 4 + +
+ + + + + + +
+
+
+
+
+
+
+`; + +exports[`Storyshots Table With Global Filter 1`] = ` +
+
+
+
+
+
+ +
+
+
+ +
+ +
+
+
+
+
+
+ + +
+ + + +
+ +
+
+
+
+
+
+ + +
+
+
+
+
+ + + + + + + + + + + + + + + +
+
+
+
+ Name +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Namespace +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ UID +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Labels +
+ + + + + + 0 + + +
+
+ +
+
+
+

+ No results found +

+
+
+
+
+ +
+
+
+ +
+ + + +
+
+ + 0-0 of 0 + +
+ + + + + + +
+
+
+
+
+
+
+`; + +exports[`Storyshots Table With Sorting 1`] = ` +
+
+
+
+
+
+ +
+
+
+ +
+ +
+
+ + + +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+ Name +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Namespace +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ UID +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Labels +
+ + + + + + 0 + + +
+
+ +
+
+
+ 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 + +
+
+
+
+ +
+
+
+ +
+ + + +
+
+ + 1-4 of 4 + +
+ + + + + + +
+
+
+
+
+
+
+`; diff --git a/frontend/src/components/configmap/List.tsx b/frontend/src/components/configmap/List.tsx index 270e43a95f8..e72e341caf9 100644 --- a/frontend/src/components/configmap/List.tsx +++ b/frontend/src/components/configmap/List.tsx @@ -15,9 +15,7 @@ export default function ConfigMapList() { { id: 'data', label: t('translation|Data'), - getter: (configmap: ConfigMap) => Object.keys(configmap.data || {}).length || 0, - sort: true, - gridTemplate: 0.5, + getValue: (configmap: ConfigMap) => Object.keys(configmap.data || {}).length || 0, }, 'age', ]} diff --git a/frontend/src/components/configmap/__snapshots__/Details.stories.storyshot b/frontend/src/components/configmap/__snapshots__/Details.stories.storyshot index 416baee2baa..a9f1b6805fd 100644 --- a/frontend/src/components/configmap/__snapshots__/Details.stories.storyshot +++ b/frontend/src/components/configmap/__snapshots__/Details.stories.storyshot @@ -12,12 +12,12 @@ exports[`Storyshots ConfigMap/DetailsView Empty 1`] = ` class="MuiBox-root css-p0cik4" > -
-
- -
-
-
+ + +
@@ -80,177 +52,675 @@ exports[`Storyshots ConfigMap/ListView Items 1`] = ` class="MuiBox-root css-1txv3mw" >
- - - - - - - - - - + + + +
+
- Name - - +
+
+ +
+
+ + + + + + +
+ +
+
- Namespace -
- Data - - Age -
- - - - + - +
+
+ Age +
+ + + + + + 0 + + +
+
+ +
+ + + + + - - + - + + + + - 0 - - + + + + + + +
- - my-pvc - - - +
+
+ Name +
+ + + + + + 0 + + +
+
+ +
+ + + 		- default - - - - 3 - -

+

+
+ Namespace +
+ + + + + + 0 + + +
+
+ +
+ + + 		+
+
+
+ Data +
+ + + + + + 0 + + +
+
+ +
+
+ 		- 3mo - -

- -
- - my-pvc - - - + my-pvc + + - default - - + default + + + 3 + +

+ 3mo + +

+
+ + my-pvc + + + + default + + + 0 + +

+ 3mo + +

+
+
+
+
+ +
+
-

+ +

+ + + +
+
+ + 1-2 of 2 + +
- 3mo - -

- - - - + + + + + + +
+
+
+
+
diff --git a/frontend/src/components/crd/CustomResourceList.tsx b/frontend/src/components/crd/CustomResourceList.tsx index 310009fb37e..0db82cd48f4 100644 --- a/frontend/src/components/crd/CustomResourceList.tsx +++ b/frontend/src/components/crd/CustomResourceList.tsx @@ -6,11 +6,11 @@ import { useParams } from 'react-router-dom'; import { KubeObject } from '../../lib/k8s/cluster'; import CRD, { KubeCRD } from '../../lib/k8s/crd'; import { localeDate } from '../../lib/util'; -import { Link, Loader, PageGrid, SectionHeader, SimpleTableGetterColumn } from '../common'; +import { Link, Loader, PageGrid, SectionHeader } from '../common'; import BackLink from '../common/BackLink'; import Empty from '../common/EmptyContent'; import ResourceListView from '../common/Resource/ResourceListView'; -import { ResourceTableProps } from '../common/Resource/ResourceTable'; +import { ResourceTableColumn, ResourceTableProps } from '../common/Resource/ResourceTable'; export default function CustomResourceList() { const { t } = useTranslation(['glossary', 'translation']); @@ -124,7 +124,7 @@ export function CustomResourceListTable(props: CustomResourceTableProps) { crd.jsonData.spec.versions.find( (version: KubeCRD['spec']['versions'][number]) => version.name === currentVersion )?.additionalPrinterColumns || []; - const cols: SimpleTableGetterColumn[] = []; + const cols: ResourceTableColumn[] = []; for (let i = 0; i < colsFromSpec.length; i++) { const idx = i; const colSpec = colsFromSpec[idx]; @@ -135,7 +135,7 @@ export function CustomResourceListTable(props: CustomResourceTableProps) { cols.push({ label: colSpec.name, - getter: resource => { + getValue: resource => { let value = getValueWithJSONPath(resource, colSpec.jsonPath); if (colSpec.type === 'date') { value = localeDate(new Date(value)); @@ -150,13 +150,11 @@ export function CustomResourceListTable(props: CustomResourceTableProps) { }, [crd, apiGroup]); const cols = React.useMemo(() => { - const colsToDisplay: ResourceTableProps['columns'] = [ + const colsToDisplay: ResourceTableProps['columns'] = [ { label: t('translation|Name'), - getter: (resource: KubeObject) => , - sort: (c1: KubeObject, c2: KubeObject) => { - return c1.metadata.name.localeCompare(c2.metadata.name); - }, + getValue: resource => resource.metadata.name, + render: (resource: KubeObject) => , }, ...additionalPrinterCols, 'age', diff --git a/frontend/src/components/crd/List.tsx b/frontend/src/components/crd/List.tsx index 4e49763d43a..f7c183f3f64 100644 --- a/frontend/src/components/crd/List.tsx +++ b/frontend/src/components/crd/List.tsx @@ -16,7 +16,8 @@ export default function CustomResourceDefinitionList() { columns={[ { label: t('glossary|Resource'), - getter: crd => ( + getValue: crd => crd.spec.names.kind, + render: crd => ( ( + getValue: crd => crd.metadata.name, + render: crd => ( ), - sort: (c1: CRD, c2: CRD) => { - if (c1.metadata.name < c2.metadata.name) { - return -1; - } else if (c1.metadata.name > c2.metadata.name) { - return 1; - } - return 0; - }, }, { label: t('translation|Group'), - getter: crd => crd.spec.group, - sort: true, + getValue: crd => crd.spec.group, }, { label: t('Scope'), - getter: crd => crd.spec.scope, - sort: true, + getValue: crd => crd.spec.scope, }, 'age', ]} diff --git a/frontend/src/components/crd/__snapshots__/CustomResourceDefinition.stories.storyshot b/frontend/src/components/crd/__snapshots__/CustomResourceDefinition.stories.storyshot index cc0d5bb87f2..3160496ebdd 100644 --- a/frontend/src/components/crd/__snapshots__/CustomResourceDefinition.stories.storyshot +++ b/frontend/src/components/crd/__snapshots__/CustomResourceDefinition.stories.storyshot @@ -12,12 +12,12 @@ exports[`Storyshots crd/CustomResourceDefinition Details 1`] = ` class="MuiBox-root css-p0cik4" > - -
- -
- - + + + @@ -506,166 +478,675 @@ exports[`Storyshots crd/CustomResourceDefinition Details 1`] = ` class="MuiBox-root css-1txv3mw" >
- - - - - - - - - - + + + +
+
+ + + + + +
+ +
+
- Name -
- Namespace - - Test Col - - Age -
- - - - - +
+
+ Test Col +
+ + + + + + 0 + + +
+
+ +
+ + + + + + - - + - + + + + - myotherresource - - + + + + + + +
- - mycustomresource - - - +
+
+ Name +
+ + + + + + 0 + + +
+
+ +
+ + + 		- mynamespace - - - - mycustomresource - -

+

+
+ Namespace +
+ + + + + + 0 + + +
+
+ +
+ + + 		- 3mo - -

- -
+
+
+
+ Age +
+ + + + + + 0 + + +
+
+ +
+
+
- - myotherresource - - - + mycustomresource + + - mynamespace - - + mynamespace + + + mycustomresource + +

+ 3mo + +

+
+ + myotherresource + + + + mynamespace + + + myotherresource + +

+ 3mo + +

+
+
+
+
+ +
+
-

- 3mo - -

- - - - + +
+ + + +
+
+ + 1-2 of 2 + +
+ + + + + + +
+
+
+
+ @@ -857,45 +1338,17 @@ exports[`Storyshots crd/CustomResourceDefinition List 1`] = `
-
-
-
- -
-
- -
-
-
+ + +
@@ -904,146 +1357,712 @@ exports[`Storyshots crd/CustomResourceDefinition List 1`] = ` class="MuiBox-root css-1txv3mw" >
- - - - - - - - - - - + + + +
+
- Resource - - Definition - - +
+
+ +
+
+ + + + + + +
+ +
+
- Group -
- Scope - - Age -
- - - - + + + + + + - Namespaced - - + + + + + + + +
- - MyCustomResource - - - +
+
+ Resource +
+ + + + + + 0 + + +
+
+ +
+ + + 		- mydefinition.phonyresources.io - - - - my.phonyresources.io - +
+
+ Definition +
+ + + + + + 0 + + +
+
+ +
+ + + 		+
+
+
+ Group +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Scope +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Age +
+ + + + + + 0 + + +
+
+ +
+
+
+ + MyCustomResource + + + + mydefinition.phonyresources.io + + + my.phonyresources.io + + Namespaced + +

+ 3mo + +

+
+
+
+
+ +
+
-

- 3mo - -

- - - - + +
+ + + +
+
+ + 1-1 of 1 + +
+ + + + + + +
+
+
+
+ diff --git a/frontend/src/components/crd/__snapshots__/CustomResourceDetails.stories.storyshot b/frontend/src/components/crd/__snapshots__/CustomResourceDetails.stories.storyshot index d93c28bc324..a68b5140052 100644 --- a/frontend/src/components/crd/__snapshots__/CustomResourceDetails.stories.storyshot +++ b/frontend/src/components/crd/__snapshots__/CustomResourceDetails.stories.storyshot @@ -69,12 +69,12 @@ exports[`Storyshots crd/CustomResourceDetails No Error 1`] = ` class="MuiBox-root css-p0cik4" > - -
- -
- - + + + @@ -154,166 +126,675 @@ exports[`Storyshots crd/CustomResourceList List 1`] = ` class="MuiBox-root css-1txv3mw" >
- - +
+
+ +
+
+ + - - - - - - - + + + +
+
+ +
+ +
+
- Name -
- Namespace - - Test Col - - Age -
- - - - + - +
+
+ Age +
+ + + + + + 0 + + +
+
+ +
+ + + + + - - + - + + + + - myotherresource - - + + + + + + +
- - mycustomresource - - - +
+
+ Name +
+ + + + + + 0 + + +
+
+ +
+ + + 		- mynamespace - - - - mycustomresource - -

+

+
+ Namespace +
+ + + + + + 0 + + +
+
+ +
+ + + 		+
+
+
+ Test Col +
+ + + + + + 0 + + +
+
+ +
+
+ 		- 3mo - -

- -
- - myotherresource - - - + mycustomresource + + - mynamespace - - + mynamespace + + + mycustomresource + +

+ 3mo + +

+
+ + myotherresource + + + + mynamespace + + + myotherresource + +

+ 3mo + +

+
+
+
+
+ +
+
-

+ +

+ + + +
+
+ + 1-2 of 2 + +
- 3mo - -

- - - - + + + + + + +
+
+
+
+ diff --git a/frontend/src/components/cronjob/List.tsx b/frontend/src/components/cronjob/List.tsx index ca967bdb82c..84c5eaa1334 100644 --- a/frontend/src/components/cronjob/List.tsx +++ b/frontend/src/components/cronjob/List.tsx @@ -1,6 +1,5 @@ import cronstrue from 'cronstrue/i18n'; import { useTranslation } from 'react-i18next'; -import { KubeContainer } from '../../lib/k8s/cluster'; import CronJob from '../../lib/k8s/cronJob'; import { DateLabel, HoverInfoLabel, LightTooltip } from '../common'; import ResourceListView from '../common/Resource/ResourceListView'; @@ -42,32 +41,35 @@ export default function CronJobList() { { id: 'schedule', label: t('Schedule'), - getter: cronJob => getSchedule(cronJob, i18n.language), + getValue: cronJob => cronJob.spec.schedule, + render: cronJob => getSchedule(cronJob, i18n.language), }, { id: 'suspend', label: t('translation|Suspend'), - getter: cronJob => cronJob.spec.suspend.toString(), - sort: true, - gridTemplate: 0.6, + getValue: cronJob => cronJob.spec.suspend.toString(), }, { id: 'active', label: t('translation|Active'), - getter: cronJob => cronJob.status?.active?.length || 0, - sort: true, - gridTemplate: 0.6, + getValue: cronJob => cronJob.status?.active?.length || 0, }, { id: 'lastScheduleTime', label: t('Last Schedule'), - getter: cronJob => getLastScheduleTime(cronJob), + getValue: cronJob => cronJob.status.lastScheduletime ?? '', + render: cronJob => getLastScheduleTime(cronJob), }, { id: 'containers', label: t('Containers'), - getter: deployment => { - const containers = deployment.getContainers().map((c: KubeContainer) => c.name); + getValue: deployment => + deployment + .getContainers() + .map(c => c.name) + .join(', '), + render: deployment => { + const containers = deployment.getContainers().map(c => c.name); const containerText = containers.join(', '); const containerTooltip = containers.join('\n'); return ( @@ -80,8 +82,13 @@ export default function CronJobList() { { id: 'images', label: t('Images'), - getter: deployment => { - const images = deployment.getContainers().map((c: KubeContainer) => c.image); + getValue: deployment => + deployment + .getContainers() + .map(c => c.image) + .join(', '), + render: deployment => { + const images = deployment.getContainers().map(c => c.image); const imageText = images.join(', '); const imageTooltip = images.join('\n'); return ( diff --git a/frontend/src/components/cronjob/__snapshots__/CronJobDetails.stories.storyshot b/frontend/src/components/cronjob/__snapshots__/CronJobDetails.stories.storyshot index 81f5b131c75..5486a2dd0db 100644 --- a/frontend/src/components/cronjob/__snapshots__/CronJobDetails.stories.storyshot +++ b/frontend/src/components/cronjob/__snapshots__/CronJobDetails.stories.storyshot @@ -12,12 +12,12 @@ exports[`Storyshots CronJob/CronJobDetailsView Every Ast 1`] = ` class="MuiBox-root css-p0cik4" > - -
- -
- - + + + @@ -510,12 +482,12 @@ exports[`Storyshots CronJob/CronJobDetailsView Every Minute 1`] = ` class="MuiBox-root css-p0cik4" > - -
- -
- - + + + diff --git a/frontend/src/components/daemonset/List.tsx b/frontend/src/components/daemonset/List.tsx index 6397e51436b..901d2378c79 100644 --- a/frontend/src/components/daemonset/List.tsx +++ b/frontend/src/components/daemonset/List.tsx @@ -17,35 +17,28 @@ export default function DaemonSetList() { { id: 'pods', label: t('Pods'), - getter: daemonSet => daemonSet.status?.currentNumberScheduled || 0, - gridTemplate: 0.6, - sort: true, + getValue: daemonSet => daemonSet.status?.currentNumberScheduled || 0, }, { id: 'currentPods', label: t('translation|Current'), - getter: daemonSet => daemonSet.status?.currentNumberScheduled || 0, - gridTemplate: 0.6, - sort: true, + getValue: daemonSet => daemonSet.status?.currentNumberScheduled || 0, }, { id: 'desiredPods', label: t('translation|Desired', { context: 'pods' }), - getter: daemonSet => daemonSet.status?.desiredNumberScheduled || 0, - gridTemplate: 0.6, - sort: true, + getValue: daemonSet => daemonSet.status?.desiredNumberScheduled || 0, }, { id: 'readyPods', label: t('translation|Ready'), - getter: daemonSet => daemonSet.status?.numberReady || 0, - gridTemplate: 0.6, - sort: true, + getValue: daemonSet => daemonSet.status?.numberReady || 0, }, { id: 'nodeSelector', label: t('Node Selector'), - getter: daemonSet => { + getValue: daemonSet => daemonSet.getNodeSelectors().join(', '), + render: daemonSet => { const selectors = daemonSet.getNodeSelectors(); const nodeSelectorTooltip = selectors.join('\n'); const nodeSelectorText = selectors.join(', '); @@ -59,7 +52,12 @@ export default function DaemonSetList() { { id: 'containers', label: t('Containers'), - getter: daemonSet => { + getValue: daemonSet => + daemonSet + .getContainers() + .map((c: KubeContainer) => c.name) + .join(', '), + render: daemonSet => { const containerNames = daemonSet.getContainers().map((c: KubeContainer) => c.name); const containerText = containerNames.join(', '); const containerTooltip = containerNames.join('\n'); @@ -73,7 +71,12 @@ export default function DaemonSetList() { { id: 'images', label: t('Images'), - getter: daemonSet => { + getValue: daemonSet => + daemonSet + .getContainers() + .map((c: KubeContainer) => c.image) + .join(', '), + render: daemonSet => { const images = daemonSet.getContainers().map((c: KubeContainer) => c.image); const imageTooltip = images.join('\n'); const imageText = images.join(', '); diff --git a/frontend/src/components/daemonset/__snapshots__/List.stories.storyshot b/frontend/src/components/daemonset/__snapshots__/List.stories.storyshot index a290072c158..d7d3315bf85 100644 --- a/frontend/src/components/daemonset/__snapshots__/List.stories.storyshot +++ b/frontend/src/components/daemonset/__snapshots__/List.stories.storyshot @@ -36,45 +36,17 @@ exports[`Storyshots DaemonSet/List Daemon Sets 1`] = `
-
-
-
- -
-
- -
-
-
+ + +
@@ -83,252 +55,1145 @@ exports[`Storyshots DaemonSet/List Daemon Sets 1`] = ` class="MuiBox-root css-1txv3mw" >
- - - - - - - - - - -
- Name - - +
+
+ +
+
+ + + + + + +
+ +
+
- Namespace -
- Pods - - Current - + + + +
+ + + - Desired - - - + - - - - + - - - - +
+
+ Pods +
+ + + + + + 0 + + +
+
+ +
+ + + + + + + + + + + + - - + - - - - - + - - + + + + + + + + +
- Ready - + + + - - - - - Node Selector - - Containers - - Images - - Age - + + + - - - -
+
+
+
+ Current +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Desired +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Ready +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Node Selector +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Containers +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Images +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Age +
+ + + + + + 0 + + +
+
+ +
+
+
- - gadget - - - + gadget + + - gadget - - - 2 - - 2 - - 2 - - 2 - - + gadget + + - kubernetes.io/os=linux - - - + - gadget - - + + 2 + + 2 + + + kubernetes.io/os=linux + + + + gadget + + + + ghcr.io/inspektor-gadget/inspektor-gadget:v0.15.0 + + +

+ 3mo + +

+
+
+
+
+ +
+
+
+ +
+ + + +
+
- ghcr.io/inspektor-gadget/inspektor-gadget:v0.15.0 + 1-1 of 1 - -
-

- 3mo - -

-
+ + + + + + +
+ + + + diff --git a/frontend/src/components/deployments/List.tsx b/frontend/src/components/deployments/List.tsx index 45bcf6c3874..9fd50312ae0 100644 --- a/frontend/src/components/deployments/List.tsx +++ b/frontend/src/components/deployments/List.tsx @@ -66,26 +66,30 @@ export default function DeploymentsList() { { id: 'pods', label: t('Pods'), - getter: deployment => renderPods(deployment), + getValue: deployment => deployment.status.availableReplicas, + render: deployment => renderPods(deployment), sort: sortByPods, - gridTemplate: 0.5, }, { id: 'replicas', label: t('Replicas'), - getter: deployment => deployment.spec.replicas || 0, - sort: true, - gridTemplate: 0.6, + getValue: deployment => deployment.spec.replicas || 0, }, { id: 'conditions', label: t('translation|Conditions'), - getter: deployment => renderConditions(deployment), + getValue: deployment => deployment.status?.conditions?.map((c: any) => c.type)?.join(''), + render: deployment => renderConditions(deployment), }, { id: 'containers', label: t('Containers'), - getter: deployment => { + getValue: deployment => + deployment + .getContainers() + .map(c => c.name) + .join(', '), + render: deployment => { const containers = deployment.getContainers().map((c: KubeContainer) => c.name); const containerText = containers.join(', '); const containerTooltip = containers.join('\n'); @@ -99,7 +103,12 @@ export default function DeploymentsList() { { id: 'images', label: t('Images'), - getter: deployment => { + getValue: deployment => + deployment + .getContainers() + .map(c => c.image) + .join(', '), + render: deployment => { const images = deployment.getContainers().map((c: KubeContainer) => c.image); const imageText = images.join(', '); const imageTooltip = images.join('\n'); @@ -113,7 +122,8 @@ export default function DeploymentsList() { { id: 'selector', label: t('Selector'), - getter: deployment => { + getValue: deployment => deployment.getMatchLabelsList().join(', '), + render: deployment => { const matchLabels = deployment.getMatchLabelsList(); const text = matchLabels.join(', '); const tooltip = matchLabels.join('\n'); diff --git a/frontend/src/components/endpoints/List.tsx b/frontend/src/components/endpoints/List.tsx index d4281bbd561..65ee574ed0f 100644 --- a/frontend/src/components/endpoints/List.tsx +++ b/frontend/src/components/endpoints/List.tsx @@ -6,7 +6,7 @@ import ResourceListView from '../common/Resource/ResourceListView'; export default function EndpointList() { const { t } = useTranslation(['glossary', 'translation']); - const filterFunc = useFilterFunc([ + const filterFunc = useFilterFunc([ '.jsonData.subsets[*].addresses[*].ip', '.jsonData.subsets[*].ports[*].port', '.jsonData.subsets[*].ports[*].name', @@ -23,8 +23,8 @@ export default function EndpointList() { { id: 'addresses', label: t('translation|Addresses'), - getter: endpoint => , - gridTemplate: 1.5, + getValue: endpoint => endpoint.getAddresses().join(', '), + render: endpoint => , }, 'age', ]} diff --git a/frontend/src/components/endpoints/__snapshots__/EndpointDetails.stories.storyshot b/frontend/src/components/endpoints/__snapshots__/EndpointDetails.stories.storyshot index cac7f21dccf..383f354140c 100644 --- a/frontend/src/components/endpoints/__snapshots__/EndpointDetails.stories.storyshot +++ b/frontend/src/components/endpoints/__snapshots__/EndpointDetails.stories.storyshot @@ -12,12 +12,12 @@ exports[`Storyshots endpoints/EndpointsDetailsView Default 1`] = ` class="MuiBox-root css-p0cik4" > - -
- -
- - + + + @@ -80,322 +52,843 @@ exports[`Storyshots endpoints/EndpointsListView Items 1`] = ` class="MuiBox-root css-1txv3mw" >
- - +
+
+ +
+
+ + +
-
+
-
- - - - - - + + + +
+
- Name - - Namespace - - Addresses - - Age -
- - - - +
+
+ Age +
+ + + + + + 0 + + +
+
+ +
+ + + + + - - + - + - + - - - + + - - endpoints-2 - - - + - + - + - - - + + - - endpoints-3 - - - + - + - + - - - + + - - endpoints-4 - - - + + + + + - + + endpoints-4 + + + - + + + + + +
- - endpoints-0 - - - +
+
+ Name +
+ + + + + + 0 + + +
+
+ +
+ + + 		- my-namespace - - - - +
+
+ Namespace +
+ + + + + + 0 + + +
+
+ +
+ + + 		- 127.0.01:8080 - - - -

+

+
+ Addresses +
+ + + + + + 0 + + +
+
+ +
+ + + 		- 3mo - -

- -
- - endpoints-1 - - - + endpoints-0 + + - my-namespace - - - + my-namespace + + - 127.0.01:8080 - - -

+ 127.0.01:8080 + +

- 3mo - -

-
+ 3mo + +

+
- + endpoints-1 + + - my-namespace - - - + my-namespace + + - 127.0.01:8080 - - -

+ 127.0.01:8080 + +

- 3mo - -

-
+ 3mo + +

+
- + endpoints-2 + + - my-namespace - - - + my-namespace + + - 127.0.01:8080 - - -

+ 127.0.01:8080 + +

- 3mo - -

-
+ 3mo + +

+
+ endpoints-3 + + + + my-namespace + + + + 127.0.01:8080 + + +

+ 3mo + +

+
- my-namespace - - + my-namespace + + + + 127.0.01:8080 + + +

+ 3mo + +

+
+
+
+
+ +
+
+
+ +
+ + + +
+
- 127.0.01:8080 + 1-5 of 5 - - -

- 3mo - -

- - - - + + + + + + +
+
+
+
+ diff --git a/frontend/src/components/horizontalPodAutoscaler/List.tsx b/frontend/src/components/horizontalPodAutoscaler/List.tsx index 0c3532b7663..5394da603b7 100644 --- a/frontend/src/components/horizontalPodAutoscaler/List.tsx +++ b/frontend/src/components/horizontalPodAutoscaler/List.tsx @@ -32,7 +32,8 @@ export default function HpaList() { { id: 'reference', label: t('translation|Reference'), - getter: item => ( + getValue: item => item.referenceObject?.metadata.name, + render: item => ( {item.referenceObject?.kind}/{item.referenceObject?.metadata.name} @@ -41,7 +42,12 @@ export default function HpaList() { { id: 'targets', label: t('translation|Targets'), - getter: (hpa: HPA) => { + getValue: item => + item + .metrics(t) + .map(it => it.shortValue) + .join(', '), + render: (hpa: HPA) => { const value: JSX.Element[] = []; const metrics = hpa.metrics(t); if (metrics.length) { @@ -61,30 +67,21 @@ export default function HpaList() { } return {value}; }, - cellProps: { - style: { - width: 'fit-content', - minWidth: '100%', - }, - }, }, { id: 'minReplicas', label: t('translation|MinReplicas'), - getter: item => item.spec.minReplicas, - sort: true, + getValue: item => item.spec.minReplicas, }, { id: 'maxReplicas', label: t('translation|MaxReplicas'), - getter: item => item.spec.maxReplicas, - sort: true, + getValue: item => item.spec.maxReplicas, }, { id: 'currentReplicas', label: t('glossary|Replicas'), - getter: item => item.status.currentReplicas, - sort: true, + getValue: item => item.status.currentReplicas, }, 'age', ]} diff --git a/frontend/src/components/horizontalPodAutoscaler/__snapshots__/HPADetails.stories.storyshot b/frontend/src/components/horizontalPodAutoscaler/__snapshots__/HPADetails.stories.storyshot index 3309adef4ce..db66ad23fa6 100644 --- a/frontend/src/components/horizontalPodAutoscaler/__snapshots__/HPADetails.stories.storyshot +++ b/frontend/src/components/horizontalPodAutoscaler/__snapshots__/HPADetails.stories.storyshot @@ -12,12 +12,12 @@ exports[`Storyshots hpa/HpaDetailsView Default 1`] = ` class="MuiBox-root css-p0cik4" > - -
- -
- - + + + @@ -80,595 +52,1381 @@ exports[`Storyshots hpa/HpaListView Items 1`] = ` class="MuiBox-root css-1txv3mw" >
- - - - - - - - - - - - - - + + + +
+
- Name - - - Namespace - - - Reference - - Targets - - MinReplicas - - +
+
+ +
+
+ + + + + + +
+ +
+
- MaxReplicas -
- Replicas - - Age -
- - - - - - - - - - - - - - + - - - - - - - - + - - - - +
+
+ Age +
+ + + + + + 0 + + +
+
+ +
+ + + + + - - - - + + + + + + + + + + + + + - - - - - - - - + + + + - - default - - - + + + + + + + + + - - Deployment - / - php-apache - - - + + + + + + + + + -
+ + php-apache + + +
+ + + + + + + + + +
- - php-apache - - - - default - - - - Deployment - / - php-apache - - -
- - 14360576/100Mi - +
+ Name +
+ + + + + + 0 + + +
+
+ +
+ +
- - 1more… - +
+ Namespace +
+ + + + + + 0 + + +
+
+ +
- - - 		- 1 - - 10 - - 1 - -

- 3mo - -

-
- - php-apache - - - - default - - - - Deployment - / - php-apache - - -
+
- +
+ Reference +
+ + + + + + 0 + + +
+
- 14360576/100Mi - + +
+
- +
+ Targets +
+ + + + + + 0 + + +
+
- 1more… - + +
- - - 		- 1 - - 10 - - 1 - -

+

- 3mo - -

- -
- - php-apache - - - - default - - - - Deployment - / - php-apache - - -
+
+
+ MinReplicas +
+ + + + + + 0 + + +
+
+ +
+
+ +
- +
+ MaxReplicas +
+ + + + + + 0 + + +
+
- 14360576/100Mi - + +
+
- +
+ Replicas +
+ + + + + + 0 + + +
+
- 1more… - + +
- - - 		- 1 - - 10 - - 1 - -

+

- 3mo - -

- -
- - php-apache - - - - default - - - - Deployment - / - php-apache - - -
+ + php-apache + +
+ + default + + + + Deployment + / + php-apache + +
- - 14360576/100Mi - + + 14360576/100Mi + +
+
+ + 1more… + +
+ 		+ 1 + + 10 + + 1 + +

+ 3mo + +

+
+ + php-apache + + + + default + + + + Deployment + / + php-apache + +
- + + 14360576/100Mi + +
+
- 1more… - + + 1more… + +
- - 		- 1 - - 10 - - 1 - -

+

- 3mo - -

-
- - php-apache - - + + 10 + + 1 + +

+ 3mo + +

+
+ + php-apache + + + + default + + + + Deployment + / + php-apache + + +
+
+ + 14360576/100Mi + +
+
+ + 1more… + +
+
+ 		+ 1 + + 10 + + 1 + +

+ 3mo + +

+
+ + php-apache + + + + default + + + + Deployment + / + php-apache + + +
+
+ + 14360576/100Mi + +
+
+ + 1more… + +
+
+ 		+ 1 + + 10 + + 1 + +

+ 3mo + +

+
+ + default + + + + Deployment + / + php-apache + +
- + + 14360576/100Mi + +
+
- 14360576/100Mi - + + 1more… + +
+ 		+ 1 + + 10 + + 1 + +

+ 3mo + +

+
+
+
+
+ +
+
+
+
-
+ +
- - - 1 - - - 10 - - - 1 - - -

+ 1-5 of 5 + +

- 3mo - -

- - - - + + + + + + +
+
+
+
+ diff --git a/frontend/src/components/ingress/ClassList.tsx b/frontend/src/components/ingress/ClassList.tsx index 4a7a628286f..2ebec0389a5 100644 --- a/frontend/src/components/ingress/ClassList.tsx +++ b/frontend/src/components/ingress/ClassList.tsx @@ -17,17 +17,17 @@ export default function IngressClassList() { { id: 'default', label: '', - gridTemplate: 0.1, - getter: (resource: IngressClass) => + getValue: resource => (resource?.isDefault ? t('Default Ingress Class') : null), + render: (resource: IngressClass) => resource && resource.isDefault ? : null, sort: false, + disableFiltering: true, }, 'name', { id: 'controller', label: t('Controller'), - getter: (ingressClass: IngressClass) => ingressClass.spec?.controller, - sort: true, + getValue: (ingressClass: IngressClass) => ingressClass.spec?.controller, }, 'age', ]} diff --git a/frontend/src/components/ingress/List.tsx b/frontend/src/components/ingress/List.tsx index 6a8315397a3..46adebb3325 100644 --- a/frontend/src/components/ingress/List.tsx +++ b/frontend/src/components/ingress/List.tsx @@ -46,25 +46,31 @@ export default function IngressList() { { id: 'class', label: t('Class Name'), - getter: (ingress: Ingress) => + getValue: ingress => ingress.spec?.ingressClassName, + render: ingress => ingress.spec?.ingressClassName ? ( {ingress.spec?.ingressClassName} ) : null, - sort: true, }, { id: 'hosts', label: t('Hosts'), - getter: (ingress: Ingress) => ( + getValue: ingress => + ingress + .getRules() + .map(r => r.host ?? '*') + .join(''), + render: ingress => ( host || '*')} /> ), }, { id: 'ports', label: t('translation|Path'), - getter: (ingress: Ingress) => , + getValue: () => '', + render: (ingress: Ingress) => , }, 'age', ]} diff --git a/frontend/src/components/ingress/__snapshots__/ClassDetails.stories.storyshot b/frontend/src/components/ingress/__snapshots__/ClassDetails.stories.storyshot index 7e977de744e..15f7d290f41 100644 --- a/frontend/src/components/ingress/__snapshots__/ClassDetails.stories.storyshot +++ b/frontend/src/components/ingress/__snapshots__/ClassDetails.stories.storyshot @@ -12,12 +12,12 @@ exports[`Storyshots IngressClass/DetailsView Basic 1`] = ` class="MuiBox-root css-p0cik4" > - -
- -
- - + + + @@ -80,161 +52,640 @@ exports[`Storyshots IngressClass/ListView Items 1`] = ` class="MuiBox-root css-1txv3mw" >
- - - - - - - - - - + + + +
+
- - +
+
+
+ +
+
+
+ + + + + +
+ +
+
- Name -
- Controller - - Age -
- - - - + - +
+
+ Controller +
+ + + + + + 0 + + +
+
+ +
+ + + + + + - - - + + + + - test - - + + + + + + +
- - - resource-example-ingress - - - test - -

+

+
+
+ +
+
+
+ +
+
+ + 		+
+
+
+ Name +
+ + + + + + 0 + + +
+
+ +
+
+ 		- 3mo - -

- -
+
+
+
+ Age +
+ + + + + + 0 + + +
+
+ +
+
+
-

+

- - -

- 		- - resource-example-ingress - - + resource-example-ingress + + + test + +

+ 3mo + +

+
+

+ + +

+ 		+ + resource-example-ingress + + + test + +

+ 3mo + +

+
+
+
+
+ +
+
-

+ +

+ + + +
+
+ + 1-2 of 2 + +
- 3mo - -

- - - - + + + + + + +
+
+
+
+ diff --git a/frontend/src/components/ingress/__snapshots__/Details.stories.storyshot b/frontend/src/components/ingress/__snapshots__/Details.stories.storyshot index d931876a98e..c8ea76582ee 100644 --- a/frontend/src/components/ingress/__snapshots__/Details.stories.storyshot +++ b/frontend/src/components/ingress/__snapshots__/Details.stories.storyshot @@ -12,12 +12,12 @@ exports[`Storyshots Ingress/DetailsView With Resource 1`] = ` class="MuiBox-root css-p0cik4" > - -
- -
- - + + + @@ -80,230 +52,874 @@ exports[`Storyshots Ingress/ListView Items 1`] = ` class="MuiBox-root css-1txv3mw" >
- - - - - - - - - - - - + + + +
+
- Name - - +
+
+ +
+
+ + + + + + +
+ +
+
- Namespace -
- Class Name - - Hosts - - Path - - Age -
- - - - +
+
+ Path +
+ + + + + + 0 + + +
+
+ +
+ + + + + + - - + - + + + + + - - https-example.foo.com - - - + + + + + + + +
- - tls-example-ingress - - - +
+
+ Name +
+ + + + + + 0 + + +
+
+ +
+ + + 		- default - - - - - +
+
+ Namespace +
+ + + + + + 0 + + +
+
+ +
+ + + 		- https-example.foo.com - - - - +
+
+ Class Name +
+ + + + + + 0 + + +
+
+ +
+ + + 		- / 🞂 service1:80, /second 🞂 service2:someport - - - -

+

+
+ Hosts +
+ + + + + + 0 + + +
+
+ +
+ + + 		- 3mo - -

- -
+
+
+
+ Age +
+ + + + + + 0 + + +
+
+ +
+
+
- - resource-example-ingress - - - + tls-example-ingress + + - default - - - + default + + + + + https-example.foo.com + + + + / 🞂 service1:80, /second 🞂 service2:someport + + +

+ 3mo + +

+
+ resource-example-ingress + + + + default + + + + + https-example.foo.com + + + + / 🞂 Service:service1 + + +

+ 3mo + +

+
+
+
+
+ +
+
+
+ +
+ + + +
+
- / 🞂 Service:service1 + 1-2 of 2 - - -

- 3mo - -

- - - - + + + + + + +
+
+
+
+ diff --git a/frontend/src/components/job/List.tsx b/frontend/src/components/job/List.tsx index 4dc78038022..b5037e46e4e 100644 --- a/frontend/src/components/job/List.tsx +++ b/frontend/src/components/job/List.tsx @@ -98,18 +98,21 @@ export function JobsListRenderer(props: JobsListRendererProps) { { id: 'completions', label: t('Completions'), - getter: job => getCompletions(job), + getValue: job => getCompletions(job), sort: sortByCompletions, }, { id: 'conditions', label: t('translation|Conditions'), - getter: job => makePodStatusLabel(job), + getValue: job => + job.status?.conditions?.find(({ status }: { status: string }) => status === 'True') ?? + null, + render: job => makePodStatusLabel(job), }, { id: 'duration', label: t('translation|Duration'), - getter: job => { + getValue: job => { const startTime = job.status?.startTime; const completionTime = job.status?.completionTime; if (!!startTime && !!completionTime) { @@ -118,13 +121,16 @@ export function JobsListRenderer(props: JobsListRendererProps) { } return '-'; }, - gridTemplate: 0.6, - sort: true, }, { id: 'containers', label: t('Containers'), - getter: job => { + getValue: job => + job + .getContainers() + .map(c => c.name) + .join(''), + render: job => { const containerNames = job.getContainers().map((c: KubeContainer) => c.name); const containerTooltip = containerNames.join('\n'); const containerText = containerNames.join(', '); @@ -138,7 +144,12 @@ export function JobsListRenderer(props: JobsListRendererProps) { { id: 'images', label: t('Images'), - getter: job => { + getValue: job => + job + .getContainers() + .map(c => c.image) + .join(''), + render: job => { const containerImages = job.getContainers().map((c: KubeContainer) => c.image); const containerTooltip = containerImages.join('\n'); const containerText = containerImages.join(', '); diff --git a/frontend/src/components/job/__snapshots__/JobList.stories.storyshot b/frontend/src/components/job/__snapshots__/JobList.stories.storyshot index 7718ff50431..e94a0463abc 100644 --- a/frontend/src/components/job/__snapshots__/JobList.stories.storyshot +++ b/frontend/src/components/job/__snapshots__/JobList.stories.storyshot @@ -33,45 +33,17 @@ exports[`Storyshots Job/List Items 1`] = `
-
-
-
- -
-
- -
-
-
+ + +
@@ -80,404 +52,1191 @@ exports[`Storyshots Job/List Items 1`] = ` class="MuiBox-root css-1txv3mw" >
- - - - - - - - - - - - - - + + + +
+
- Name - - - Namespace - - +
+
+ +
+
+ + + + + + +
+ +
+
- Completions -
- Conditions - - Duration - - Containers - - Images - - Age -
- - - - - - - - - - - - - - +
+
+ Age +
+ + + + + + 0 + + +
+
+ +
+ + + + + - - + + + + + + + + + - - default - - - + + + + + + + + + - 1/1 - - + + + + + + + + + + +
- - job-0 - - - - default - - - 1/1 - -
- - Complete
- +
+ Name +
+ + + + + + 0 + +
- -
- 		- 8h - - + + + + + - hello - - - - +
+
+ Namespace +
+ + + + + + 0 + + +
+
+ +
+ + + 		- busybox:1.28 - - - -

+

+
+ Completions +
+ + + + + + 0 + + +
+
+ +
+ + + 		- 3mo - -

- -
- - job-1 - - - - default - - - 1/1 - -
+
+
+ Conditions +
+ + + + + + 0 + + +
+
+ +
+
+ + 		- - Failed
- +
+ Duration +
+ + + + + + 0 + +
- - - - 		- 8h - - + + + + + - hello - - - - +
+
+ Containers +
+ + + + + + 0 + + +
+
+ +
+ + + 		- busybox:1.28 - - - -

+

+
+ Images +
+ + + + + + 0 + + +
+
+ +
+ + + 		- 3mo - -

- -
- - job-2 - - + + job-0 + + + + default + + + 1/1 + +
+ + Complete +
+ +
+ +
+ 		+ 8h + + + hello + + + + busybox:1.28 + + +

+ 3mo + +

+
+ + job-1 + + + + default + + + 1/1 + +
+ + Failed +
+ +
+ +
+ 		+ 8h + + + hello + + + + busybox:1.28 + + +

+ 3mo + +

+
+ + job-2 + + + + default + + + 1/1 + +
+ + Suspended +
+ +
+ +
+ 		+ 8h + + + hello + + + + busybox:1.28 + + +

+ 3mo + +

+
+
+
+
+ +
+
- + Rows per page + +
- Suspended - + + +
- - - 8h - - - hello + 1-3 of 3 - - - - busybox:1.28 - - - -

- 3mo - -

- - - - + + + + + + +
+
+
+
+ diff --git a/frontend/src/components/lease/List.tsx b/frontend/src/components/lease/List.tsx index ce549eb52f3..6a791e78e18 100644 --- a/frontend/src/components/lease/List.tsx +++ b/frontend/src/components/lease/List.tsx @@ -14,7 +14,7 @@ export function LeaseList() { { id: 'holder', label: t('translation|Holder'), - getter: item => item?.spec.holderIdentity, + getValue: item => item?.spec.holderIdentity, }, 'age', ]} diff --git a/frontend/src/components/lease/__snapshots__/Details.stories.storyshot b/frontend/src/components/lease/__snapshots__/Details.stories.storyshot index eefc483a63b..f3a2c74f62f 100644 --- a/frontend/src/components/lease/__snapshots__/Details.stories.storyshot +++ b/frontend/src/components/lease/__snapshots__/Details.stories.storyshot @@ -12,12 +12,12 @@ exports[`Storyshots Lease/LeaseDetailsView Lease Detail 1`] = ` class="MuiBox-root css-p0cik4" > - -
- -
- - + + + @@ -80,124 +52,629 @@ exports[`Storyshots Lease/ListView Items 1`] = ` class="MuiBox-root css-1txv3mw" >
- - - - - - - - - - + + + +
+
+ + + + + +
+ +
+
- Name -
- Namespace - - Holder - - Age -
- - - + + + + + - holder - - + + + + + + +
- - lease - - - +
+
+ Name +
+ + + + + + 0 + + +
+
+ +
+ + + 		+
+
+
+ Namespace +
+ + + + + + 0 + + +
+
+ +
+
+ 		- default - - - +
+
+ Holder +
+ + + + + + 0 + + +
+
+ +
+ + + 		+
+
+
+ Age +
+ + + + + + 0 + + +
+
+ +
+
+
+ + lease + + + + default + + + holder + +

+ 3mo + +

+
+
+
+
+ +
+
-

- 3mo - -

- - - - + +
+ + + +
+
+ + 1-1 of 1 + +
+ + + + + + +
+
+
+
+ diff --git a/frontend/src/components/limitRange/__snapshots__/Details.stories.storyshot b/frontend/src/components/limitRange/__snapshots__/Details.stories.storyshot index abb44711f30..37ca492981e 100644 --- a/frontend/src/components/limitRange/__snapshots__/Details.stories.storyshot +++ b/frontend/src/components/limitRange/__snapshots__/Details.stories.storyshot @@ -12,12 +12,12 @@ exports[`Storyshots LimitRange/DetailsView Limit Range Detail 1`] = ` class="MuiBox-root css-p0cik4" > - -
- -
- - + + + @@ -80,113 +52,546 @@ exports[`Storyshots LimitRange/ListView Items 1`] = ` class="MuiBox-root css-1txv3mw" >
- - - - - - - - - + + + +
+
+ + + + + +
+ +
+
- Name -
- Namespace - - Age -
- - + + + + - + + limit-range + + + - + + + + +
- +
+
+
+ Name +
+ + + + + + 0 + + +
+
+ +
+
+ + 		- limit-range - - - +
+
+ Namespace +
+ + + + + + 0 + + +
+
+ +
+ + + 		+
+
+
+ Age +
+ + + + + + 0 + + +
+
+ +
+
+
- default - - + default + + +

+ 3mo + +

+
+
+
+
+ +
+
-

+ +

+ + + +
+
+ + 1-1 of 1 + +
- 3mo - -

- - - - + + + + + + +
+
+
+
+ diff --git a/frontend/src/components/namespace/List.tsx b/frontend/src/components/namespace/List.tsx index a6a25b8a31f..bdb29c2ff7f 100644 --- a/frontend/src/components/namespace/List.tsx +++ b/frontend/src/components/namespace/List.tsx @@ -37,53 +37,55 @@ export default function NamespacesList() { return {status}; } - const resourceTableProps: ResourceTableFromResourceClassProps | ResourceTableProps = - React.useMemo(() => { - if (allowedNamespaces.length > 0) { - return { - columns: [ - { - id: 'name', - label: t('translation|Name'), - getter: ({ metadata }) => ( - - {metadata.name} - - ), - }, - { - id: 'status', - label: t('translation|Status'), - getter: () => 'Unknown', - }, - { - id: 'age', - label: t('translation|Age'), - getter: () => 'Unknown', - }, - ], - data: allowedNamespaces, - }; - } + const resourceTableProps: + | ResourceTableFromResourceClassProps + | ResourceTableProps = React.useMemo(() => { + if (allowedNamespaces.length > 0) { return { - resourceClass: Namespace, columns: [ - 'name', + { + id: 'name', + label: t('translation|Name'), + getValue: ns => ns.metadata.name, + render: ({ metadata }) => ( + + {metadata.name} + + ), + }, { id: 'status', label: t('translation|Status'), - getter: makeStatusLabel, - sort: (namespace: Namespace) => namespace.status.phase, + getValue: () => 'Unknown', + }, + { + id: 'age', + label: t('translation|Age'), + getValue: () => 'Unknown', }, - 'age', ], + data: allowedNamespaces as unknown as Namespace[], }; - }, [allowedNamespaces]); + } + return { + resourceClass: Namespace, + columns: [ + 'name', + { + id: 'status', + label: t('translation|Status'), + getValue: ns => ns.status.phase, + render: makeStatusLabel, + }, + 'age', + ], + }; + }, [allowedNamespaces]); return ( +
+ +
+ - - - -
-
- - - - - - - - - - + + + + + + + +
+
- - - - - - - - - - + + + - - + - - - - - + + + - + - - + + + - - - + - + - + + + + + + + + + + + + + + + +
- - test-cpu-quota - - -
- - requests.cpu: 0.5 cores/0.2 cores - +
+ Name +
+ + + + + + 0 + + +
+
+ +
- - 		-
+
- - limits.cpu: 0 cores/0.3 cores - +
+ Request +
+ + + + + + 0 + + +
+
+ +
- - - 		-

- 3mo - -

-
- - test-cpu-quota - - -
+
- - requests.cpu: 0.5 cores/0.2 cores - +
+ Limit +
+ + + + + + 0 + + +
+
+ +
- - - 		-
+
- - limits.cpu: 0 cores/0.3 cores - +
+ Age +
+ + + + + + 0 + + +
+
+ +
- - - 		-

- 3mo - -

-
- - test-cpu-quota - - -
+ test-cpu-quota + +
- - requests.cpu: 0.5 cores/0.2 cores - + + requests.cpu: 0.5 cores/0.2 cores + +
- - 		-
+
- - limits.cpu: 0 cores/0.3 cores - + + limits.cpu: 0 cores/0.3 cores + +
- - 		-

- 3mo - -

-
- + +

+ 3mo + +

+
- test-cpu-quota - - -
+ test-cpu-quota + +
- - requests.cpu: 0.5 cores/0.2 cores - + + requests.cpu: 0.5 cores/0.2 cores + +
- - 		-
+
- - limits.cpu: 0 cores/0.3 cores - + + limits.cpu: 0 cores/0.3 cores + +
- - 		-

+

+

+ 3mo + +

+
- 3mo - -

-
- + test-cpu-quota + + - test-cpu-quota - - -
+
+ + requests.cpu: 0.5 cores/0.2 cores + +
+
+
- - requests.cpu: 0.5 cores/0.2 cores - + + limits.cpu: 0 cores/0.3 cores + +
- - 		+ +

+ 3mo + +

+
+ + test-cpu-quota + + +
+
+ + requests.cpu: 0.5 cores/0.2 cores + +
+
+ 		+
+
+ + limits.cpu: 0 cores/0.3 cores + +
+
+ 		+

+ 3mo + +

+
+ + test-cpu-quota + + +
+
+ + requests.cpu: 0.5 cores/0.2 cores + +
+
+ 		+
+
+ + limits.cpu: 0 cores/0.3 cores + +
+
+ 		+

+ 3mo + +

+
+
+
+
+ +
+
+
- + 15 +
+ +
- - -

- 3mo - -

- - - - + 1-5 of 5 + +
+ + + + + + +
+
+
+
+
@@ -616,910 +1124,1971 @@ exports[`Storyshots Namespace/DetailsView Active 1`] = ` /> + +
+
+
+ +
+
+
+ -
-
-
-
-
- - - +
-
- - - - - - - - - -
- Name - - Age -
- - limit-range - - -

- 3mo - -

-
-
-
- - - -
-
-
-
-
-
-

- Pods -

-
+ + + +
+
+
-
-
-
- -
-
-
-
-
-
- + + + + + + + + + + + +
+
+
+
+ Name +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Age +
+ + + + + + 0 + + +
+
+ +
+
+
+ + limit-range + + +

+ 3mo + +

+
+
+
- - +
- - Name - - - - Restarts -
+ + 1-1 of 1 + +
- - - - - Ready - - + + + + + +
+
+
+
+ + + + + + +
+
+
+
+
+
+

+ Pods +

+
+
+
+
+
+
+
+
+
+
- Status - - - +
+
+ +
+
+
+
+
+
+
+ +
+ +
+
- IP - - - Node - - - Age - - - - +
+
+
+
+ - - - - - - + + + + + + + + - - my-node + imagepullbackoff - - - + + - - - + - - - - - + + + - + + - - - + - - - - - + + + - + + - - - + - - - - - + + + - - - - + + + - - - + + - - + + + - + + - - - + - - - - - + + + - + + - - - + - - - - - + + + - + + - - - + - - - - - + + + - + + + + + + + + +
- - imagepullbackoff - - - 0 - - 0/1 - -
+
+
+ Name +
+ + + + + + 0 + + +
+
+ +
+
+ + 		- - ImagePullBackOff - - - - - 0.0.0.2 - +
+ Restarts +
+ + + + + + 0 + + + +
+ +
+ + + 		+
+
+
+ Ready +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Status +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ IP +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Node +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Age +
+ + + + + + 0 + + +
+
+ +
+
+
-

+

+ 0 + + 0/1 + - 3mo - -

-
- + + ImagePullBackOff + + + - successful - - - 0 - - 0/1 - -
+
- Completed + + my-node + - - - 0.0.0.2 - - + +

+ 3mo + +

+
- my-node + successful - - -

+

+ 0 + + 0/1 + - 3mo - -

-
- + + Completed + + + - initializing - - - 0 - - 0/1 - -
+
- Init:0/2 + + my-node + - - - 0.0.0.2 - - + +

+ 3mo + +

+
- my-node + initializing - - -

+

+ 0 + + 0/1 + - 3mo - -

-
- + + Init:0/2 + + + - liveness-http - - - 337 (3mo ago) - - 0/1 - -
+
- CrashLoopBackOff -
- -
+ my-node + - - 		- 0.0.0.2 - - + +

+ 3mo + +

+
- my-node - - - -

- 3mo - -

-
- + liveness-http + + + 337 (3mo ago) + + 0/1 + - terminated - - - 0 - - 0/1 - -
+ + CrashLoopBackOff +
+ +
+ +
+ 		+ 0.0.0.2 + - Error -
- -
+ my-node + - - 		- 0.0.0.2 - - + +

+ 3mo + +

+
- my-node + terminated - - -

+

+ 0 + + 0/1 + - 3mo - -

-
- + + Error +
+ +
+ + + 		- running - - - 0 - - 1/1 - -
+
- Running + + my-node + - - - 0.0.0.2 - - + +

+ 3mo + +

+
- my-node + running - - -

+

+ 0 + + 1/1 + - 3mo - -

-
- + + Running + + + - nominated-node - - - 0 - - 1/1 - -
+
- Running + + my-node + - - - 0.0.0.2 - - + +

+ 3mo + +

+
- my-node + nominated-node - - -

+

+ 0 + + 1/1 + - 3mo - -

-
- + + Running + + + - readiness-gate - - - 0 - - 1/1 - -
+
- Running + + my-node + - - - 0.0.0.2 - - + +

+ 3mo + +

+
- my-node + readiness-gate - - + + 0 + + 1/1 + +
+ + Running + +
+ 		+ 0.0.0.2 + + + + my-node + + + +

+ 3mo + +

+
+
+
+
+ +
+
-

- 3mo - -

- - - - + +
+ + + +
+
+ + 1-8 of 8 + +
+ + + + + + +
+
+
+
+
diff --git a/frontend/src/components/namespace/__snapshots__/NamespaceList.stories.storyshot b/frontend/src/components/namespace/__snapshots__/NamespaceList.stories.storyshot index ccd549b4887..54ecd5e3989 100644 --- a/frontend/src/components/namespace/__snapshots__/NamespaceList.stories.storyshot +++ b/frontend/src/components/namespace/__snapshots__/NamespaceList.stories.storyshot @@ -33,45 +33,17 @@ exports[`Storyshots Namespace/ListView Regular 1`] = `
-
-
-
- -
-
- -
-
-
+ + +
@@ -80,261 +52,706 @@ exports[`Storyshots Namespace/ListView Regular 1`] = ` class="MuiBox-root css-1txv3mw" >
- - - - - - - - - + + + +
+
+ + + + + +
+ +
+
- Name -
- Status - - Age -
- - - - +
+
+ Age +
+ + + + + + 0 + + +
+
+ +
+ + + + + - - + - + - - - + + - - namespace-2 - - - + - + - - - + + - + + namespace-2 + + + - + + + - - Active - - - + + + + -

- 3mo - -

- - - + namespace-4 + + + + + + + +
- - namespace-0 - - - +
+
+ Name +
+ + + + + + 0 + + +
+
+ +
+ + + 		- Active - - - -

+

+
+ Status +
+ + + + + + 0 + + +
+
+ +
+ + + 		- 3mo - -

- -
- - namespace-1 - - - + namespace-0 + + - Active - - -

+ Active + +

- 3mo - -

-
+ 3mo + +

+
- + namespace-1 + + - Active - - -

+ Active + +

- 3mo - -

-
+ 3mo + +

+
- namespace-3 - - + Active + + +

+ 3mo + +

+
+ namespace-3 + + + + Active + + +

+ 3mo + +

+
+ + Active + + +

+ 3mo + +

+
+
+
+
+ +
- - - namespace-4 - - - + +
+ + + +
+
- Active + 1-5 of 5 - - -

- 3mo - -

- - - - + + + + + + +
+
+ + + diff --git a/frontend/src/components/networkpolicy/List.tsx b/frontend/src/components/networkpolicy/List.tsx index f023c7b7764..8cd2e8a6be4 100644 --- a/frontend/src/components/networkpolicy/List.tsx +++ b/frontend/src/components/networkpolicy/List.tsx @@ -15,7 +15,7 @@ export function NetworkPolicyList() { { id: 'type', label: t('translation|Type'), - getter: networkpolicy => { + getValue: networkpolicy => { console.log(networkpolicy); const isIngressAvailable = networkpolicy.jsonData.spec.ingress && networkpolicy.jsonData.spec.ingress.length > 0; @@ -33,7 +33,15 @@ export function NetworkPolicyList() { { id: 'podSelector', label: t('Pod Selector'), - getter: networkpolicy => { + getValue: networkpolicy => { + const podSelector = networkpolicy.jsonData.spec.podSelector; + return podSelector.matchLabels + ? Object.keys(podSelector.matchLabels) + .map(key => `${key}=${podSelector.matchLabels[key]}`) + .join(', ') + : null; + }, + render: networkpolicy => { const podSelector = networkpolicy.jsonData.spec.podSelector; return podSelector.matchLabels ? ( ( + getValue: node => { + const [used] = getResourceMetrics(node, nodeMetrics || [], 'cpu'); + return used; + }, + render: node => ( ( + getValue: node => { + const [used] = getResourceMetrics(node, nodeMetrics || [], 'memory'); + return used; + }, + render: node => ( , + getValue: node => { + const isReady = !!node.status.conditions.find( + condition => condition.type === 'Ready' && condition.status === 'True' + ); + return isReady ? t('translation|Yes') : t('translation|No'); + }, + render: node => , }, { id: 'taints', label: t('translation|Taints'), - getter: (item: Node) => , + getValue: node => + node.spec?.taints?.map(taint => `${taint.key}:${taint.effect}`)?.join(', '), + render: (item: Node) => , }, { id: 'roles', label: t('Roles'), - gridTemplate: 'minmax(100px, .5fr)', - getter: node => { + getValue: node => { return Object.keys(node.metadata.labels) .filter((t: String) => t.startsWith('node-role.kubernetes.io/')) .map(t => t.replace('node-role.kubernetes.io/', '')) @@ -76,24 +91,23 @@ export default function NodeList() { { id: 'internalIP', label: t('translation|Internal IP'), - getter: node => node.getInternalIP(), + getValue: node => node.getInternalIP(), }, { id: 'externalIP', label: t('External IP'), - getter: node => node.getExternalIP(), + getValue: node => node.getExternalIP(), }, { id: 'version', label: t('translation|Version'), - gridTemplate: 'minmax(100px, .5fr)', - getter: node => node.status.nodeInfo.kubeletVersion, + getValue: node => node.status.nodeInfo.kubeletVersion, }, { id: 'software', label: t('translation|Software'), - gridTemplate: 'minmax(200px, 1.5fr)', - getter: node => { + getValue: node => node.status.nodeInfo.operatingSystem, + render: node => { let osIcon = 'mdi:desktop-classic'; if (node.status.nodeInfo.operatingSystem === 'linux') { osIcon = 'mdi:linux'; diff --git a/frontend/src/components/node/__snapshots__/List.stories.storyshot b/frontend/src/components/node/__snapshots__/List.stories.storyshot index 2712df3ba86..faad65bce10 100644 --- a/frontend/src/components/node/__snapshots__/List.stories.storyshot +++ b/frontend/src/components/node/__snapshots__/List.stories.storyshot @@ -36,45 +36,17 @@ exports[`Storyshots node/List Nodes 1`] = `
-
-
-
- -
-
- -
-
-
+ + +
@@ -83,267 +55,1225 @@ exports[`Storyshots node/List Nodes 1`] = ` class="MuiBox-root css-1txv3mw" >
- - +
+
+ +
+
+ + - - - - - - - - - - - - - + + + +
+
+ +
+ +
+
- Name + -
- CPU - - Memory - - Ready - - Taints - - Roles - - Internal IP - - External IP - - Version - - Age -
- - - - - - - - - - - - +
+
+ CPU +
+ + + + + + 0 + + +
+
+ +
+ + + + + + + + + + + + + - - + + + + + + + + + + + -
- -
+ + + + + + + + + + + + +
- - my-windows-node - - -
-
-
-
- - Yes - - -
-
- agent - - 1.2.3.4 - - - - v1.26.3 - -

+

+
+ Name +
+ + + + + + 0 + + +
+
+ +
+ + + 		- 3mo - -

- -
+
+
+
+ Memory +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Ready +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Taints +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Roles +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Internal IP +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ External IP +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Version +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Age +
+ + + + + + 0 + + +
+
+ +
+
+
- - my-linux-node - - + + my-windows-node + + +
+
+
+
+ + Yes + + +
+
+ agent + + 1.2.3.4 + + + + v1.26.3 + +

+ 3mo + +

+
+ + my-linux-node + + +
+
+
+
+ + Yes + + +
+
+ + + 10.2.3.4 + + + + v1.23.12 + +

+ 3mo + +

+
+
+
+
+ +
+
- - + class="MuiBox-root css-exd1zr" + > + +
+ + + +
+
- Yes + 1-2 of 2 - -
- - - - - - 10.2.3.4 - - - - - - v1.23.12 - - -

- 3mo - -

- - - - + + + + + + +
+
+
+
+
diff --git a/frontend/src/components/node/utils.tsx b/frontend/src/components/node/utils.tsx index 32dfb96317f..618fef9833c 100644 --- a/frontend/src/components/node/utils.tsx +++ b/frontend/src/components/node/utils.tsx @@ -24,7 +24,7 @@ export function NodeTaintsLabel(props: { node: Node }) { const limits: JSX.Element[] = []; node.spec.taints.forEach(taint => { limits.push( - + ); diff --git a/frontend/src/components/pod/List.tsx b/frontend/src/components/pod/List.tsx index 5612e300cf5..1b31a5a9b08 100644 --- a/frontend/src/components/pod/List.tsx +++ b/frontend/src/components/pod/List.tsx @@ -99,7 +99,7 @@ export function PodListRenderer(props: PodListProps) { 'namespace', { label: t('Restarts'), - getter: (pod: Pod) => { + getValue: (pod: Pod) => { const { restarts, lastRestartDate } = pod.getDetailedStatus(); return lastRestartDate.getTime() !== 0 ? t('{{ restarts }} ({{ abbrevTime }} ago)', { @@ -108,12 +108,11 @@ export function PodListRenderer(props: PodListProps) { }) : restarts; }, - sort: true, }, { id: 'ready', label: t('translation|Ready'), - getter: (pod: Pod) => { + getValue: (pod: Pod) => { const podRow = pod.getDetailedStatus(); return `${podRow.readyContainers}/${podRow.totalContainers}`; }, @@ -121,51 +120,55 @@ export function PodListRenderer(props: PodListProps) { { id: 'status', label: t('translation|Status'), - getter: makePodStatusLabel, - sort: (pod: Pod) => { - const podRow = pod.getDetailedStatus(); - return podRow.reason; - }, + getValue: pod => pod.getDetailedStatus().reason, + render: makePodStatusLabel, }, { id: 'ip', label: t('glossary|IP'), - getter: (pod: Pod) => pod.status.podIP, - sort: true, + getValue: (pod: Pod) => pod.status.podIP, }, { id: 'node', label: t('glossary|Node'), - getter: (pod: Pod) => + getValue: pod => pod?.spec?.nodeName, + render: pod => pod?.spec?.nodeName && ( {pod.spec.nodeName} ), - sort: (p1: Pod, p2: Pod) => { - return p1?.spec?.nodeName?.localeCompare(p2?.spec?.nodeName || '') || 0; - }, }, { id: 'nominatedNode', label: t('glossary|Nominated Node'), - getter: (pod: Pod) => + getValue: pod => pod?.status?.nominatedNodeName, + render: pod => !!pod?.status?.nominatedNodeName && ( {pod?.status?.nominatedNodeName} ), - sort: (p1: Pod, p2: Pod) => { - return ( - p1?.status?.nominatedNodeName?.localeCompare(p2?.status?.nominatedNodeName || '') || 0 - ); - }, show: false, }, { id: 'readinessGates', label: t('glossary|Readiness Gates'), - getter: (pod: Pod) => { + getValue: pod => { + const readinessGatesStatus = getReadinessGatesStatus(pod); + const total = Object.keys(readinessGatesStatus).length; + + if (total === 0) { + return ''; + } + + const statusTrueCount = Object.values(readinessGatesStatus).filter( + status => status === 'True' + ).length; + + return statusTrueCount; + }, + render: (pod: Pod) => { const readinessGatesStatus = getReadinessGatesStatus(pod); const total = Object.keys(readinessGatesStatus).length; diff --git a/frontend/src/components/pod/__snapshots__/PodDetails.stories.storyshot b/frontend/src/components/pod/__snapshots__/PodDetails.stories.storyshot index 38dc8a8459b..f0f9fc69a32 100644 --- a/frontend/src/components/pod/__snapshots__/PodDetails.stories.storyshot +++ b/frontend/src/components/pod/__snapshots__/PodDetails.stories.storyshot @@ -12,12 +12,12 @@ exports[`Storyshots Pod/PodDetailsView Error 1`] = ` class="MuiBox-root css-p0cik4" > - -
- -
- - + + + @@ -80,836 +52,1641 @@ exports[`Storyshots Pod/PodListView Items 1`] = ` class="MuiBox-root css-1txv3mw" >
- - - - - - - - - - -
- Name - - +
+
+ +
+
+ + + + + + +
+ +
+
- Namespace -
- Restarts - - Ready - - Status - - IP -
+ +
+ + + +
+
+ + 1-8 of 8 + +
+ + + + + + +
+ + + + diff --git a/frontend/src/components/pod/__snapshots__/PodLogs.stories.storyshot b/frontend/src/components/pod/__snapshots__/PodLogs.stories.storyshot index 5d91b56a476..e000d820adf 100644 --- a/frontend/src/components/pod/__snapshots__/PodLogs.stories.storyshot +++ b/frontend/src/components/pod/__snapshots__/PodLogs.stories.storyshot @@ -14,12 +14,12 @@ exports[`Storyshots Pod/PodLogs Logs 1`] = ` class="MuiBox-root css-p0cik4" > - -
- -
- - + + + @@ -80,365 +52,1027 @@ exports[`Storyshots PDB/PDBListView Items 1`] = ` class="MuiBox-root css-1txv3mw" >
- - - - - - - - - - - - + + + +
+
- Name - - +
+
+ +
+
+ + + + + + +
+ +
+
- Namespace -
- Min Available - - Max Unavailable - - Allowed Disruptions - - Age -
- - - - - - - - - - - - - - - - - - - - - - + + - +
+
+ Allowed Disruptions +
+ + + + + + 0 + + +
+
+ +
+ + + + + + - - - + + + + + + + - 1 - - + + + + + + + - N/A - - + + + + + + + - 1 - - + + + + + + + -

+ + coredns-pdb + + +

+ + + - - + + + + +
- - coredns-pdb - - - - kube-system - - - 1 - - N/A - - 1 - -

- 3mo - -

-
- - coredns-pdb - - - - kube-system - - - 1 - - N/A - - 1 - -

+

+
+ Name +
+ + + + + + 0 + + +
+
+ +
+ + + 		- 3mo - -

- -
- - coredns-pdb - - - - kube-system - - - 1 - - N/A - - 1 - -

+

+
+ Namespace +
+ + + + + + 0 + + +
+
+ +
+ + + 		+
+
+
+ Min Available +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Max Unavailable +
+ + + + + + 0 + + +
+
+ +
+
+ 		- 3mo - -

- -
+
+
+
+ Age +
+ + + + + + 0 + + +
+
+ +
+
+
- - coredns-pdb - - - - kube-system - - + + coredns-pdb + + + + kube-system + + + 1 + + N/A + + 1 + +

+ 3mo + +

+
+ + coredns-pdb + + + + kube-system + + + 1 + + N/A + + 1 + +

+ 3mo + +

+
+ + coredns-pdb + + + + kube-system + + + 1 + + N/A + + 1 + +

+ 3mo + +

+
+ + coredns-pdb + + + + kube-system + + + 1 + + N/A + + 1 + +

+ 3mo + +

+
+ + kube-system + + + 1 + + N/A + - 3mo - -

-
+

+ 3mo + +

+
+
+
+
+ +
- - - coredns-pdb - - - - - kube-system - - - - 1 - - - N/A - - - 1 - - -

+ +

+ + + +
+
+ + 1-5 of 5 + +
- 3mo - -

- - - - + + + + + + +
+
+
+ + diff --git a/frontend/src/components/priorityClass/List.tsx b/frontend/src/components/priorityClass/List.tsx index 3481579a2c3..baf7518135f 100644 --- a/frontend/src/components/priorityClass/List.tsx +++ b/frontend/src/components/priorityClass/List.tsx @@ -14,14 +14,12 @@ export default function PriorityClassList() { { id: 'value', label: t('translation|Value'), - getter: item => item.value, - sort: true, + getValue: item => item.value, }, { id: 'globalDefault', label: t('translation|Global Default'), - getter: item => item.globalDefault || 'False', - sort: true, + getValue: item => String(item.globalDefault || 'False'), }, 'age', ]} diff --git a/frontend/src/components/priorityClass/__snapshots__/priorityClassDetails.stories.storyshot b/frontend/src/components/priorityClass/__snapshots__/priorityClassDetails.stories.storyshot index 896fde7bf29..9cd14267934 100644 --- a/frontend/src/components/priorityClass/__snapshots__/priorityClassDetails.stories.storyshot +++ b/frontend/src/components/priorityClass/__snapshots__/priorityClassDetails.stories.storyshot @@ -12,12 +12,12 @@ exports[`Storyshots PriorityClass/PriorityClassDetailsView Default 1`] = ` class="MuiBox-root css-p0cik4" > - -
- -
- - + + + @@ -80,278 +52,788 @@ exports[`Storyshots PriorityClass/PriorityClassListView Items 1`] = ` class="MuiBox-root css-1txv3mw" >
- - - - - - - - - - + + + +
+
- Name - - +
+
+ +
+
+ + + + + + +
+ +
+
- Value -
- Global Default - - Age -
- - - - - - - - - - +
+
+ Age +
+ + + + + + 0 + + +
+
+ +
+ + + + + - - - - + - - - + + + - + + high-priority-apps + + + - + + + - 1000000 - - + + + + + - False - - + + + + + -

- 3mo - -

- - - + high-priority-apps + + + + + + + + +
- - high-priority-apps - - - 1000000 - - False - -

+

+
+ Name +
+ + + + + + 0 + + +
+
+ +
+ + + 		- 3mo - -

- -
- +
+
+ Value +
+ + + + + + 0 + + +
+
+ +
+ + + 		- high-priority-apps - - - - 1000000 - - False - -

+

+
+ Global Default +
+ + + + + + 0 + + +
+
+ +
+ + + 		- 3mo - -

- -
- - high-priority-apps - - - 1000000 - - False - -

+ high-priority-apps + +

- 3mo - -

-
+ + False + +

+ 3mo + +

+
- high-priority-apps - - + + False + +

+ 3mo + +

+
+ + high-priority-apps + + + 1000000 + + False + +

+ 3mo + +

+
+ + high-priority-apps + + + 1000000 + + False + +

+ 3mo + +

+
+ 1000000 + + False + +

+ 3mo + +

+
+
+
+
+ +
- - - high-priority-apps - - - - 1000000 - - - False - - -

+ Rows per page + +

+ + + +
+
+ - 3mo - -

- - - - + 1-5 of 5 + +
+ + + + + + +
+
+
+ + diff --git a/frontend/src/components/replicaset/List.tsx b/frontend/src/components/replicaset/List.tsx index fa72b9973db..040d6e48507 100644 --- a/frontend/src/components/replicaset/List.tsx +++ b/frontend/src/components/replicaset/List.tsx @@ -17,35 +17,33 @@ export default function ReplicaSetList() { { id: 'generation', label: t('Generation'), - getter: replicaSet => replicaSet?.status?.observedGeneration, - sort: true, + getValue: replicaSet => replicaSet?.status?.observedGeneration, show: false, }, { id: 'currentReplicas', label: t('translation|Current', { context: 'replicas' }), - getter: replicaSet => replicaSet?.status?.replicas || 0, - gridTemplate: 0.6, - sort: true, + getValue: replicaSet => replicaSet?.status?.replicas || 0, }, { id: 'desiredReplicas', label: t('translation|Desired', { context: 'replicas' }), - getter: replicaSet => replicaSet?.spec?.replicas || 0, - gridTemplate: 0.6, - sort: true, + getValue: replicaSet => replicaSet?.spec?.replicas || 0, }, { id: 'readyReplicas', label: t('translation|Ready'), - getter: replicaSet => replicaSet?.status?.readyReplicas || 0, - gridTemplate: 0.6, - sort: true, + getValue: replicaSet => replicaSet?.status?.readyReplicas || 0, }, { id: 'containers', label: t('Containers'), - getter: replicaSet => { + getValue: replicaSet => + replicaSet + .getContainers() + .map(c => c.name) + .join(''), + render: replicaSet => { const containerText = replicaSet .getContainers() .map((c: KubeContainer) => c.name) @@ -56,22 +54,16 @@ export default function ReplicaSetList() { ); }, - sort: (rs1, rs2) => { - const containers1 = rs1 - .getContainers() - .map((c: KubeContainer) => c.name) - .join(''); - const containers2 = rs2 - .getContainers() - .map((c: KubeContainer) => c.name) - .join(''); - return containers1.localeCompare(containers2); - }, }, { id: 'images', label: t('Images'), - getter: replicaSet => { + getValue: replicaSet => + replicaSet + .getContainers() + .map((c: KubeContainer) => c.image) + .join(''), + render: replicaSet => { const imageText = replicaSet .getContainers() .map((c: KubeContainer) => c.image) @@ -82,22 +74,12 @@ export default function ReplicaSetList() { ); }, - sort: (rs1, rs2) => { - const images1 = rs1 - .getContainers() - .map((c: KubeContainer) => c.image) - .join(''); - const images2 = rs2 - .getContainers() - .map((c: KubeContainer) => c.image) - .join(''); - return images1.localeCompare(images2); - }, }, { id: 'selector', label: t('Selector'), - getter: replicaSet => { + getValue: replicaSet => replicaSet.getMatchLabelsList().join(''), + render: replicaSet => { const selectorText = replicaSet.getMatchLabelsList().join('\n'); return ( selectorText && ( @@ -107,7 +89,6 @@ export default function ReplicaSetList() { ) ); }, - sort: true, }, 'age', ]} diff --git a/frontend/src/components/replicaset/__snapshots__/List.stories.storyshot b/frontend/src/components/replicaset/__snapshots__/List.stories.storyshot index ba650fc9ddc..2d5e20d05e1 100644 --- a/frontend/src/components/replicaset/__snapshots__/List.stories.storyshot +++ b/frontend/src/components/replicaset/__snapshots__/List.stories.storyshot @@ -36,45 +36,17 @@ exports[`Storyshots ReplicaSet/List Replica Sets 1`] = `
-
-
-
- -
-
- -
-
-
+ + +
@@ -83,354 +55,1162 @@ exports[`Storyshots ReplicaSet/List Replica Sets 1`] = ` class="MuiBox-root css-1txv3mw" >
- - - - - - - - - - -
- Name - - +
+
+ +
+
+ + + + + + +
+ +
+
- Namespace -
- Current - - Desired - + + + +
+ + + - Ready - - - + - + - + - + - - - - +
+
+ Ready +
+ + + + + + 0 + + +
+
+ +
+ + + + + + + + + - - - - - - - + - + + + + + + - + - - - - - - - - + + - - headlamp - - - + - + + + + + + + + + + +
- Containers - + + + - - - - - Images - + + + - - - - - Selector - + + + - - - - - Age - + + + - - - -
+
+
+
+ Containers +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Images +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Selector +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Age +
+ + + + + + 0 + + +
+
+ +
+
+
- - headlamp-release-b123456 - - - - default - - - 0 - - 1 - - 0 - - - headlamp - - - + headlamp-release-b123456 + + - ghcr.io/headlamp-k8s/headlamp:v0.18.0 - - - + default + + + 0 + + 1 + + 0 + + + headlamp + + + + ghcr.io/headlamp-k8s/headlamp:v0.18.0 + + + - app.kubernetes.io/instance=headlamp-release + class="" + data-mui-internal-clone-element="true" + > + app.kubernetes.io/instance=headlamp-release app.kubernetes.io/name=headlamp pod-template-hash=b123456 - - -

+

- 3mo - -

-
- - headlamp-a123456 - - - - default - - - 0 - - 2 - - 0 - + 3mo + +

+
- + headlamp-a123456 + + - ghcr.io/headlamp-k8s/headlamp:latest - - + default + + + 0 + + 2 + + 0 + + + headlamp + + + + ghcr.io/headlamp-k8s/headlamp:latest + + + + k8s-app=headlamp +pod-template-hash=a123456 + + +

+ 3mo + +

+
+
+
+
+ +
+
+
+ +
+ + + +
+
- k8s-app=headlamp -pod-template-hash=a123456 + 1-2 of 2 - -
-

- 3mo - -

-
+ + + + + + +
+ + + + diff --git a/frontend/src/components/resourceQuota/List.tsx b/frontend/src/components/resourceQuota/List.tsx index c882b39eac1..1e9a1e378c6 100644 --- a/frontend/src/components/resourceQuota/List.tsx +++ b/frontend/src/components/resourceQuota/List.tsx @@ -48,7 +48,8 @@ export function ResourceQuotaRenderer(props: ResourceQuotaProps) { { id: 'requests', label: t('translation|Request'), - getter: (item: ResourceQuota) => { + getValue: item => item.requests.join(', '), + render: item => { const requests: JSX.Element[] = []; item.requests.forEach((request: string) => { requests.push(); @@ -65,7 +66,8 @@ export function ResourceQuotaRenderer(props: ResourceQuotaProps) { { id: 'limits', label: t('translation|Limit'), - getter: (item: ResourceQuota) => { + getValue: item => item.limits.join(', '), + render: item => { const limits: JSX.Element[] = []; item.limits.forEach((limit: string) => { limits.push(); diff --git a/frontend/src/components/resourceQuota/__snapshots__/resourceQuotaDetails.stories.storyshot b/frontend/src/components/resourceQuota/__snapshots__/resourceQuotaDetails.stories.storyshot index 6eec658b9ee..aa6c26fde93 100644 --- a/frontend/src/components/resourceQuota/__snapshots__/resourceQuotaDetails.stories.storyshot +++ b/frontend/src/components/resourceQuota/__snapshots__/resourceQuotaDetails.stories.storyshot @@ -12,12 +12,12 @@ exports[`Storyshots ResourceQuota/ResourceQuotaDetailsView Default 1`] = ` class="MuiBox-root css-p0cik4" > - -
- -
- - + + + @@ -80,449 +52,1046 @@ exports[`Storyshots ResourceQuota/ResourceQuotaListView Items 1`] = ` class="MuiBox-root css-1txv3mw" >
- - - - - - - - - - - + + + +
+
+ + + + + +
+ +
+
- Name -
- Namespace - - Request - - Limit - - Age -
- - - - - + - +
+
+ Limit +
+ + + + + + 0 + + +
+
+ +
+ + + + + + - - - + + - - - - - - - + + -
+ + test-cpu-quota + + +
+ - - - - - - - + + -
+ + test-cpu-quota + + +
+ - - - - - - + + - - test - - - + + + + + + -
+ + test-cpu-quota + + +
+ - + + + + +
- - test-cpu-quota - - - - test - - -
- - requests.cpu: 0.5 cores/0.2 cores - +
+ Name +
+ + + + + + 0 + + +
+
+ +
- - 		-
+
- +
+ Namespace +
+ + + + + + 0 + + +
+
- limits.cpu: 0 cores/0.3 cores - + +
- - - 		-

+

+
+
+
+ Request +
+ + + + + + 0 + + +
+
+ +
+
+ 		- 3mo - -

- -
+
+
+
+ Age +
+ + + + + + 0 + + +
+
+ +
+
+
- - test-cpu-quota - - - - test - - -
+ + test-cpu-quota + +
+ + test + +
- - requests.cpu: 0.5 cores/0.2 cores - + + requests.cpu: 0.5 cores/0.2 cores + +
- - 		-
+
- - limits.cpu: 0 cores/0.3 cores - + + limits.cpu: 0 cores/0.3 cores + +
- - 		-

+

- 3mo - -

-
- - test-cpu-quota - - - - test - - + 3mo + +

+
+ + test + +
- - requests.cpu: 0.5 cores/0.2 cores - + + requests.cpu: 0.5 cores/0.2 cores + +
- - 		-
+
- - limits.cpu: 0 cores/0.3 cores - + + limits.cpu: 0 cores/0.3 cores + +
- - 		-

+

- 3mo - -

-
- - test-cpu-quota - - - - test - - + 3mo + +

+
+ + test + +
- - requests.cpu: 0.5 cores/0.2 cores - + + requests.cpu: 0.5 cores/0.2 cores + +
- - 		-
+
- - limits.cpu: 0 cores/0.3 cores - + + limits.cpu: 0 cores/0.3 cores + +
- - 		-

+

- 3mo - -

-
- - test-cpu-quota - - + 3mo + +

+
+ + test-cpu-quota + + + + test + + +
+
+ + requests.cpu: 0.5 cores/0.2 cores + +
+
+ 		+
+
+ + limits.cpu: 0 cores/0.3 cores + +
+
+ 		+

+ 3mo + +

+
+ + test + +
- - requests.cpu: 0.5 cores/0.2 cores - + + requests.cpu: 0.5 cores/0.2 cores + +
- - 		+ +
+
+ + limits.cpu: 0 cores/0.3 cores + +
+
+ 		+

+ 3mo + +

+
+
+
+
+ +
+
+
- + 15 +
+ +
- - -

- 3mo - -

- - - - + 1-5 of 5 + +
+ + + + + + +
+
+
+
+ diff --git a/frontend/src/components/role/BindingList.tsx b/frontend/src/components/role/BindingList.tsx index 0002cd50a10..1a6aedb5adf 100644 --- a/frontend/src/components/role/BindingList.tsx +++ b/frontend/src/components/role/BindingList.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; import ClusterRoleBinding from '../../lib/k8s/clusterRoleBinding'; -import RoleBinding, { KubeRoleBinding } from '../../lib/k8s/roleBinding'; +import RoleBinding from '../../lib/k8s/roleBinding'; import { useErrorState, useFilterFunc } from '../../lib/util'; import { Link } from '../common'; import LabelListItem from '../common/LabelListItem'; @@ -35,7 +35,7 @@ export default function RoleBindingList() { const [clusterRoleBindingError, onClusterRoleBindingError] = useErrorState(setupClusterRoleBindings); const { t } = useTranslation(['glossary', 'translation']); - const filterFunc = useFilterFunc(['.jsonData.kind']); + const filterFunc = useFilterFunc(['.jsonData.kind']); function setRoleBindings(newBindings: RoleBinding[] | null, kind: string) { setBindings(currentBindings => ({ ...currentBindings, [kind]: newBindings })); @@ -74,22 +74,24 @@ export default function RoleBindingList() { return null; } - function sortBindings(kind: string, r1: RoleBinding, r2: RoleBinding) { - const groups1 = r1?.subjects - ?.filter(subject => subject.kind === kind) - .map(subject => subject.name); - const groups2 = r2?.subjects - ?.filter(subject => subject.kind === kind) - .map(subject => subject.name); - if (groups1 && groups2) { - return groups1.join('').localeCompare(groups2.join('')); - } else if (groups1) { - return 1; - } else if (groups2) { - return -1; - } else { - return 0; - } + function sortBindings(kind: string) { + return function (r1: RoleBinding, r2: RoleBinding) { + const groups1 = r1?.subjects + ?.filter(subject => subject.kind === kind) + .map(subject => subject.name); + const groups2 = r2?.subjects + ?.filter(subject => subject.kind === kind) + .map(subject => subject.name); + if (groups1 && groups2) { + return groups1.join('').localeCompare(groups2.join('')); + } else if (groups1) { + return 1; + } else if (groups2) { + return -1; + } else { + return 0; + } + }; } RoleBinding.useApiList(setupRoleBindings, onRoleBindingError); @@ -106,7 +108,8 @@ export default function RoleBindingList() { { id: 'namespace', label: t('glossary|Namespace'), - getter: item => + getValue: item => item.getNamespace() ?? t('translation|All namespaces'), + render: item => item.getNamespace() ? ( {item.getNamespace()} @@ -114,18 +117,22 @@ export default function RoleBindingList() { ) : ( t('translation|All namespaces') ), - sort: true, }, { id: 'role', label: t('glossary|Role'), - getter: item => , - sort: true, + getValue: item => item.roleRef.name, + render: item => , }, { id: 'users', label: t('translation|Users'), - getter: (item: KubeRoleBinding) => ( + getValue: item => + item?.subjects + ?.filter(s => s.kind === 'User') + ?.map(s => s.name) + ?.join(' '), + render: item => ( ), - sort: (r1, r2) => sortBindings('User', r1, r2), + sort: sortBindings('User'), }, { id: 'groups', label: t('glossary|Groups'), - getter: (item: KubeRoleBinding) => ( + getValue: item => + item?.subjects + ?.filter(subject => subject.kind === 'Group') + ?.map(subject => subject.name) + ?.join(' '), + render: item => ( ), - sort: (r1, r2) => sortBindings('Group', r1, r2), + sort: sortBindings('Group'), }, { id: 'serviceaccounts', label: t('glossary|Service Accounts'), - getter: (item: KubeRoleBinding) => ( + getValue: item => + item?.subjects + ?.filter(subject => subject.kind === 'ServiceAccount') + ?.map(subject => subject.name) + ?.join(' '), + render: item => ( ), - sort: (r1, r2) => sortBindings('ServiceAccount', r1, r2), + sort: sortBindings('Service Accounts'), }, 'age', ]} diff --git a/frontend/src/components/role/List.tsx b/frontend/src/components/role/List.tsx index b5c801c8bd7..8463ead2ea9 100644 --- a/frontend/src/components/role/List.tsx +++ b/frontend/src/components/role/List.tsx @@ -15,7 +15,7 @@ export default function RoleList() { const [roleError, setRolesError] = useErrorState(setupRoles); const [clusterRoleError, setClusterRolesError] = useErrorState(setupClusterRoles); const { t } = useTranslation('glossary'); - const filterFunc = useFilterFunc(['.jsonData.kind']); + const filterFunc = useFilterFunc(['.jsonData.kind']); function setupRolesWithKind(newRoles: Role[] | null, kind: string) { setRoles(oldRoles => ({ ...(oldRoles || {}), [kind]: newRoles })); @@ -67,7 +67,8 @@ export default function RoleList() { 'type', { label: t('translation|Name'), - getter: item => ( + getValue: item => item.metadata.namespace, + render: item => ( ), - sort: (r1: Role, r2: Role) => { - if (r1.metadata.name < r2.metadata.name) { - return -1; - } else if (r1.metadata.name > r2.metadata.name) { - return 1; - } - return 0; - }, }, 'namespace', 'age', diff --git a/frontend/src/components/runtimeClass/List.tsx b/frontend/src/components/runtimeClass/List.tsx index 2faf53ce098..2f596d21e4c 100644 --- a/frontend/src/components/runtimeClass/List.tsx +++ b/frontend/src/components/runtimeClass/List.tsx @@ -14,7 +14,7 @@ export function RuntimeClassList() { { id: 'handler', label: t('translation|Handler'), - getter: item => item?.jsonData?.handler, + getValue: item => item?.jsonData?.handler, }, 'age', ]} diff --git a/frontend/src/components/runtimeClass/__snapshots__/Details.stories.storyshot b/frontend/src/components/runtimeClass/__snapshots__/Details.stories.storyshot index 71ccece0680..b8f21a8ba5f 100644 --- a/frontend/src/components/runtimeClass/__snapshots__/Details.stories.storyshot +++ b/frontend/src/components/runtimeClass/__snapshots__/Details.stories.storyshot @@ -12,12 +12,12 @@ exports[`Storyshots RuntimeClass/DetailsView Base 1`] = ` class="MuiBox-root css-p0cik4" > - -
- -
- - + + + @@ -80,97 +52,541 @@ exports[`Storyshots RuntimeClass/ListView Items 1`] = ` class="MuiBox-root css-1txv3mw" >
- - - - - - - - - + + + + + + + +
+
+ + + + + +
+ +
+
- Name -
- Handler - - Age -
- - + + + + - handler - - + + + + + +
- +
+
+
+ Name +
+ + + + + + 0 + + +
+
+ +
+
+ + 		- runtime-class - - - +
+
+ Handler +
+ + + + + + 0 + + +
+
+ +
+ + + 		+
+
+
+ Age +
+ + + + + + 0 + + +
+
+ +
+
+
+ + runtime-class + + + handler + +

+ 3mo + +

+
+
+
+
+ +
+
-

+ +

+ + + +
+
+ - 3mo - -

- - - - + 1-1 of 1 + +
+ + + + + + +
+
+
+
+ diff --git a/frontend/src/components/secret/List.tsx b/frontend/src/components/secret/List.tsx index 9b601a52733..c0206a9f25f 100644 --- a/frontend/src/components/secret/List.tsx +++ b/frontend/src/components/secret/List.tsx @@ -4,7 +4,7 @@ import { useFilterFunc } from '../../lib/util'; import ResourceListView from '../common/Resource/ResourceListView'; export default function SecretList() { - const filterFunc = useFilterFunc(['.jsonData.type']); + const filterFunc = useFilterFunc(['.jsonData.type']); const { t } = useTranslation(['glossary', 'translation']); return ( @@ -18,14 +18,12 @@ export default function SecretList() { { id: 'type', label: t('translation|Type'), - getter: secret => secret.type, - sort: true, + getValue: secret => secret.type, }, { id: 'data', label: t('translation|Data'), - getter: (secret: Secret) => Object.keys(secret.data || {}).length || 0, - sort: true, + getValue: (secret: Secret) => Object.keys(secret.data || {}).length || 0, }, 'age', ]} diff --git a/frontend/src/components/secret/__snapshots__/Details.stories.storyshot b/frontend/src/components/secret/__snapshots__/Details.stories.storyshot index 27e69978c70..c03580a268a 100644 --- a/frontend/src/components/secret/__snapshots__/Details.stories.storyshot +++ b/frontend/src/components/secret/__snapshots__/Details.stories.storyshot @@ -12,12 +12,12 @@ exports[`Storyshots Secret/DetailsView Empty 1`] = ` class="MuiBox-root css-p0cik4" > - -
- -
- - + + + @@ -80,204 +52,764 @@ exports[`Storyshots Secret/ListView Items 1`] = ` class="MuiBox-root css-1txv3mw" >
- - - - - - - - - - - + + + +
+
- Name - - - Namespace - - +
+
+ +
+
+ + + + + + +
+ +
+
- Type -
- Data - - Age -
- - - - - + + - +
+
+ Age +
+ + + + + + 0 + + +
+
+ +
+ + + + + - - + - - + + + + + - 3 - - + + + + + + + +
- - my-pvc - - - +
+
+ Name +
+ + + + + + 0 + + +
+
+ +
+ + + 		- default - - - - bla - - 0 - -

+

+
+ Namespace +
+ + + + + + 0 + + +
+
+ +
+ + + 		+
+
+
+ Type +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Data +
+ + + + + + 0 + + +
+
+ +
+
+ 		- 3mo - -

- -
- - my-pvc - - - + my-pvc + + - default - - - test - + default + + + bla + + 0 + +

+ 3mo + +

+
+ + my-pvc + + + + default + + + test + + 3 + +

+ 3mo + +

+
+
+
+
+ +
+
-

+ +

+ + + +
+
+ + 1-2 of 2 + +
- 3mo - -

- - - - + + + + + + +
+
+
+
+ diff --git a/frontend/src/components/service/List.tsx b/frontend/src/components/service/List.tsx index 2edb4df507f..ca63ebf413e 100644 --- a/frontend/src/components/service/List.tsx +++ b/frontend/src/components/service/List.tsx @@ -16,32 +16,29 @@ export default function ServiceList() { { id: 'type', label: t('translation|Type'), - getter: service => service.spec.type, - sort: true, + getValue: service => service.spec.type, }, { id: 'clusterIP', label: t('Cluster IP'), - getter: service => service.spec.clusterIP, - sort: true, + getValue: service => service.spec.clusterIP, }, { id: 'externalIP', label: t('External IP'), - getter: service => service.getExternalAddresses(), - sort: true, + getValue: service => service.getExternalAddresses(), }, { id: 'ports', label: t('Ports'), - getter: service => , - sort: true, + getValue: service => service.getPorts().join(', '), + render: service => , }, { id: 'selector', label: t('Selector'), - getter: service => , - sort: true, + getValue: service => service.getSelector().join(', '), + render: service => , }, 'age', ]} diff --git a/frontend/src/components/serviceaccount/List.tsx b/frontend/src/components/serviceaccount/List.tsx index bdf9302a577..471eefe6827 100644 --- a/frontend/src/components/serviceaccount/List.tsx +++ b/frontend/src/components/serviceaccount/List.tsx @@ -15,9 +15,7 @@ export default function ServiceAccountList() { { id: 'secrets', label: t('Secrets'), - getter: (serviceaccount: ServiceAccount) => serviceaccount?.secrets?.length || 0, - sort: true, - gridTemplate: 0.5, + getValue: (serviceaccount: ServiceAccount) => serviceaccount?.secrets?.length || 0, }, 'age', ]} diff --git a/frontend/src/components/statefulset/List.tsx b/frontend/src/components/statefulset/List.tsx index 58a6c084afd..8eb6b424026 100644 --- a/frontend/src/components/statefulset/List.tsx +++ b/frontend/src/components/statefulset/List.tsx @@ -23,21 +23,18 @@ export default function StatefulSetList() { { id: 'pods', label: t('Pods'), - getter: statefulSet => renderPods(statefulSet), - gridTemplate: 0.6, - sort: true, + getValue: statefulSet => renderPods(statefulSet), }, { id: 'replicas', label: t('Replicas'), - getter: statefulSet => statefulSet.spec.replicas, - gridTemplate: 0.6, - sort: true, + getValue: statefulSet => statefulSet.spec.replicas, }, { id: 'containers', label: t('Containers'), - getter: statefulSet => { + getValue: statefulSet => statefulSet.containerNames.join(', '), + render: statefulSet => { const containerNames = statefulSet.getContainers().map((c: KubeContainer) => c.name); const containerTooltip = containerNames.join('\n'); const containerText = containerNames.join(', '); @@ -52,7 +49,12 @@ export default function StatefulSetList() { { id: 'images', label: t('Images'), - getter: statefulSet => { + getValue: statefulSet => + statefulSet + .getContainers() + .map(it => it.image) + .join(', '), + render: statefulSet => { const containerImages = statefulSet.getContainers().map((c: KubeContainer) => c.image); const containerTooltip = containerImages.join('\n'); const containerText = containerImages.join(', '); diff --git a/frontend/src/components/storage/ClaimList.tsx b/frontend/src/components/storage/ClaimList.tsx index bfea60cdcc6..8d609a8bf2c 100644 --- a/frontend/src/components/storage/ClaimList.tsx +++ b/frontend/src/components/storage/ClaimList.tsx @@ -18,7 +18,8 @@ export default function VolumeClaimList() { { id: 'className', label: t('Class Name'), - getter: volumeClaim => { + getValue: volumeClaim => volumeClaim.spec.storageClassName, + render: volumeClaim => { const name = volumeClaim.spec.storageClassName; if (!name) { return ''; @@ -29,32 +30,28 @@ export default function VolumeClaimList() { ); }, - sort: (v1, v2) => v1.spec.storageClassName.localeCompare(v2.spec.storageClassName), }, { id: 'capacity', label: t('Capacity'), - getter: volumeClaim => volumeClaim.status.capacity?.storage, - sort: true, - gridTemplate: 0.8, + getValue: volumeClaim => volumeClaim.status.capacity?.storage, }, { id: 'accessModes', label: t('Access Modes'), - getter: volumeClaim => , - sort: (v1, v2) => - v1.spec.accessModes.join('').localeCompare(v2.spec.accessModes.join('')), + getValue: volumeClaim => volumeClaim.spec.accessModes.join(', '), + render: volumeClaim => , }, { id: 'volumeMode', label: t('Volume Mode'), - getter: volumeClaim => volumeClaim.spec.volumeMode, - sort: true, + getValue: volumeClaim => volumeClaim.spec.volumeMode, }, { id: 'volume', label: t('Volume'), - getter: volumeClaim => { + getValue: volumeClaim => volumeClaim.spec.volumeName, + render: volumeClaim => { const name = volumeClaim.spec.volumeName; if (!name) { return ''; @@ -69,9 +66,8 @@ export default function VolumeClaimList() { { id: 'status', label: t('translation|Status'), - getter: volume => makePVCStatusLabel(volume), - gridTemplate: 0.3, - sort: true, + getValue: volume => volume.status.phase, + render: volume => makePVCStatusLabel(volume), }, 'age', ]} diff --git a/frontend/src/components/storage/ClassList.tsx b/frontend/src/components/storage/ClassList.tsx index 07a475be832..d9c07df2ce2 100644 --- a/frontend/src/components/storage/ClassList.tsx +++ b/frontend/src/components/storage/ClassList.tsx @@ -17,26 +17,22 @@ export default function ClassList() { { id: 'provisioner', label: t('Provisioner'), - getter: storageClass => storageClass.provisioner, - sort: true, + getValue: storageClass => storageClass.provisioner, }, { id: 'reclaimPolicy', label: t('Reclaim Policy'), - getter: storageClass => storageClass.reclaimPolicy, - sort: true, + getValue: storageClass => storageClass.reclaimPolicy, }, { id: 'volumeBindingMode', label: t('Volume Binding Mode'), - getter: storageClass => storageClass.volumeBindingMode, - sort: true, + getValue: storageClass => storageClass.volumeBindingMode, }, { id: 'allowVolumeExpansion', label: t('Allow Volume Expansion'), - getter: storageClass => storageClass.allowVolumeExpansion, - sort: true, + getValue: storageClass => storageClass.allowVolumeExpansion, }, 'age', ]} diff --git a/frontend/src/components/storage/VolumeList.tsx b/frontend/src/components/storage/VolumeList.tsx index d326568164d..b56e116e3c7 100644 --- a/frontend/src/components/storage/VolumeList.tsx +++ b/frontend/src/components/storage/VolumeList.tsx @@ -20,7 +20,8 @@ export default function VolumeList() { { id: 'className', label: t('Class Name'), - getter: volume => { + getValue: volume => volume.spec.storageClassName ?? '', + render: volume => { const name = volume.spec.storageClassName; if (!name) { return ''; @@ -31,40 +32,38 @@ export default function VolumeList() { ); }, - sort: (v1, v2) => v1.spec.storageClassName.localeCompare(v2.spec.storageClassName), }, { id: 'capacity', label: t('Capacity'), - getter: volume => volume.spec.capacity.storage, - sort: true, + getValue: volume => volume.spec.capacity.storage, }, { id: 'accessModes', label: t('Access Modes'), - getter: volume => , - sort: true, + getValue: volume => volume?.spec?.accesModes?.join(', '), + render: volume => , }, { id: 'reclaimPolicy', label: t('Reclaim Policy'), - getter: volume => volume.spec.persistentVolumeReclaimPolicy, - sort: true, + getValue: volume => volume.spec.persistentVolumeReclaimPolicy, }, { id: 'reason', label: t('translation|Reason'), - getter: volume => { + getValue: volume => volume.status.reason, + render: volume => { const reason = volume.status.reason; return {reason}; }, show: false, - sort: true, }, { id: 'claim', label: t('Claim'), - getter: volume => { + getValue: volume => volume.spec?.claimRef?.name ?? '', + render: volume => { const claim = volume.spec.claimRef?.name; if (!claim) { return null; @@ -81,14 +80,12 @@ export default function VolumeList() { ); }, - sort: true, }, { id: 'status', label: t('translation|Status'), - getter: volume => makePVStatusLabel(volume), - gridTemplate: 0.3, - sort: true, + getValue: volume => volume.status?.phase, + render: volume => makePVStatusLabel(volume), }, 'age', ]} diff --git a/frontend/src/components/storage/__snapshots__/ClaimDetails.stories.storyshot b/frontend/src/components/storage/__snapshots__/ClaimDetails.stories.storyshot index 9bb13fedeee..b57a4f35538 100644 --- a/frontend/src/components/storage/__snapshots__/ClaimDetails.stories.storyshot +++ b/frontend/src/components/storage/__snapshots__/ClaimDetails.stories.storyshot @@ -12,12 +12,12 @@ exports[`Storyshots PersistentVolumeClaim/DetailsView Base 1`] = ` class="MuiBox-root css-p0cik4" > - -
- -
- - + + + @@ -80,195 +52,860 @@ exports[`Storyshots PersistentVolumeClaim/ListView Items 1`] = ` class="MuiBox-root css-1txv3mw" >
- - - - - - - - - - - - - - - - - - -
- Name - - +
+
+ +
+
+ + + + + + +
+ +
+
- Namespace -
- Class Name - - Capacity - + + + +
+ + + - Access Modes - - - + - - + - + - - - - +
+
+ Capacity +
+ + + + + + 0 + + +
+
+ +
+ + + + + + + + + + - - - + - - - - + + + + + + + + - - pvc-abc-1234 + no-storage-class-name-pvc - - - - + - - - - - - - - - + + + + + + - - pvc-abc-1234 + no-volume-name-pvc - - - - + - - + + + + + + + + + +
- Volume Mode - + + + - - - - - Volume - - Status - + + + - - - - - Age - + + + - - - -
+
+
+
+ Access Modes +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Volume Mode +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Volume +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Status +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Age +
+ + + + + + 0 + + +
+
+ +
+
+
- - my-pvc - - - - default - - - + + my-pvc + + default - - - 8Gi - - + - ReadWriteOnce - - - Filesystem - + + default + + + + 8Gi + + + ReadWriteOnce + + + Filesystem + + + + pvc-abc-1234 + + + + + Bound + + +

+ 3mo + +

+
- + - Bound - - -

+ default + +

- 3mo - -

-
- - no-storage-class-name-pvc - - - - default - - - - - 8Gi - - + - ReadWriteOnce - - - Filesystem - + + + ReadWriteOnce + + + Filesystem + + + + pvc-abc-1234 + + + + + Bound + + +

+ 3mo + +

+
- + - Bound - - -

+ default + +

- 3mo - -

-
+ 8Gi + + + ReadWriteOnce + + + Block + + + + + Bound + + +

+ 3mo + +

+
+
+
+
+ +
-
- - no-volume-name-pvc - - - - default - - - - - 8Gi - - - ReadWriteOnce - - - Block - - - + +
+ + + +
+ - Bound + 1-3 of 3 - 		-

- 3mo - -

-
+ + + + + + +
+ + + + diff --git a/frontend/src/components/storage/__snapshots__/ClassDetails.stories.storyshot b/frontend/src/components/storage/__snapshots__/ClassDetails.stories.storyshot index b36e11d3512..0f8799731ed 100644 --- a/frontend/src/components/storage/__snapshots__/ClassDetails.stories.storyshot +++ b/frontend/src/components/storage/__snapshots__/ClassDetails.stories.storyshot @@ -12,12 +12,12 @@ exports[`Storyshots StorageClass/DetailsView Base 1`] = ` class="MuiBox-root css-p0cik4" > - -
- -
- - + + + @@ -80,172 +52,788 @@ exports[`Storyshots StorageClass/ListView Items 1`] = ` class="MuiBox-root css-1txv3mw" >
- - - - - - - - +
-
- - - - - - -
- Name - - +
+
+ +
+
+ + + + + + +
+ +
+
- Provisioner -
- Reclaim Policy - - Volume Binding Mode - + + + +
+ + + - Allow Volume Expansion - - - + + + + + + + + + - Age - - - - - + my-pvc + + + + + + + + + +
+
+
+ Name +
+ + + + + + 0 + + +
+
+ +
+ + 		+
+
+
+ Provisioner +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Reclaim Policy +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Volume Binding Mode +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Allow Volume Expansion +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Age +
+ + + + + + 0 + + +
+
+ +
+
+
+ csi.test + + Delete + + WaitForFirstConsumer + + +

+ 3mo + +

+
+
+
+
-
- - my-pvc - - - csi.test - - Delete - - WaitForFirstConsumer - - -

+ +

+ + + +
+ + + 1-1 of 1 + +
- 3mo - -

-
+ + + + + + +
+ + + + diff --git a/frontend/src/components/storage/__snapshots__/VolumeDetails.stories.storyshot b/frontend/src/components/storage/__snapshots__/VolumeDetails.stories.storyshot index fc65fc077c6..09407c07577 100644 --- a/frontend/src/components/storage/__snapshots__/VolumeDetails.stories.storyshot +++ b/frontend/src/components/storage/__snapshots__/VolumeDetails.stories.storyshot @@ -12,12 +12,12 @@ exports[`Storyshots PersistentVolume/DetailsView Base 1`] = ` class="MuiBox-root css-p0cik4" > - -
- -
- - + + + @@ -80,172 +52,788 @@ exports[`Storyshots PersistentVolume/ListView Items 1`] = ` class="MuiBox-root css-1txv3mw" >
- - - - - - - - +
-
- - - - - - -
- Name - - +
+
+ +
+
+ + + + + + +
+ +
+
- Provisioner -
- Reclaim Policy - - Volume Binding Mode - + + + +
+ + + - Allow Volume Expansion - - - + + + + + + + + + - Age - - - - - + my-pvc + + + + + + + + + +
+
+
+ Name +
+ + + + + + 0 + + +
+
+ +
+ + 		+
+
+
+ Provisioner +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Reclaim Policy +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Volume Binding Mode +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Allow Volume Expansion +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Age +
+ + + + + + 0 + + +
+
+ +
+
+
+ csi.test + + Delete + + WaitForFirstConsumer + + +

+ 3mo + +

+
+
+
+
-
- - my-pvc - - - csi.test - - Delete - - WaitForFirstConsumer - - -

+ +

+ + + +
+ + + 1-1 of 1 + +
- 3mo - -

-
+ + + + + + +
+ + + + diff --git a/frontend/src/components/verticalPodAutoscaler/List.tsx b/frontend/src/components/verticalPodAutoscaler/List.tsx index d6ded38f3ec..49e1a91dc12 100644 --- a/frontend/src/components/verticalPodAutoscaler/List.tsx +++ b/frontend/src/components/verticalPodAutoscaler/List.tsx @@ -40,18 +40,17 @@ export default function VpaList() { { id: 'cpu', label: t('glossary|CPU'), - getter: item => item?.targetRecommendations?.cpu, + getValue: item => item?.targetRecommendations?.cpu ?? null, }, { id: 'memory', label: t('glossary|Memory'), - getter: item => item?.targetRecommendations?.memory, + getValue: item => item?.targetRecommendations?.memory ?? null, }, { id: 'provided', label: t('translation|Provided'), - getter: item => item?.status?.conditions?.[0]?.status, - sort: true, + getValue: item => item?.status?.conditions?.[0]?.status ?? null, }, 'age', ]} diff --git a/frontend/src/components/verticalPodAutoscaler/__snapshots__/VPADetails.stories.storyshot b/frontend/src/components/verticalPodAutoscaler/__snapshots__/VPADetails.stories.storyshot index 02497ec194d..61c1ce41112 100644 --- a/frontend/src/components/verticalPodAutoscaler/__snapshots__/VPADetails.stories.storyshot +++ b/frontend/src/components/verticalPodAutoscaler/__snapshots__/VPADetails.stories.storyshot @@ -12,12 +12,12 @@ exports[`Storyshots VPA/VPADetailsView Default 1`] = ` class="MuiBox-root css-p0cik4" > - -
- -
- - + + + @@ -80,365 +52,1027 @@ exports[`Storyshots VPA/VPAListView List 1`] = ` class="MuiBox-root css-1txv3mw" >
- - - - - - - - - - - - + + + +
+
- Name - - +
+
+ +
+
+ + + + + + +
+ +
+
- Namespace -
- CPU - - Memory - - Provided - - Age -
- - - - - - - - - - - - - - - - - - - - - - + + - +
+
+ Provided +
+ + + + + + 0 + + +
+
+ +
+ + + + + + - - - + + + + + + + - 1 - - + + + + + + + - 2Gi - - + + + + + + + - True - - + + + + + + + -

+ + multi-container-vpa + + +

+ + + - - + + + + +
- - multi-container-vpa - - - - default - - - 1 - - 2Gi - - True - -

- 3mo - -

-
- - multi-container-vpa - - - - default - - - 1 - - 2Gi - - True - -

+

+
+ Name +
+ + + + + + 0 + + +
+
+ +
+ + + 		- 3mo - -

- -
- - multi-container-vpa - - - - default - - - 1 - - 2Gi - - True - -

+

+
+ Namespace +
+ + + + + + 0 + + +
+
+ +
+ + + 		+
+
+
+ CPU +
+ + + + + + 0 + + +
+
+ +
+
+ 		+
+
+
+ Memory +
+ + + + + + 0 + + +
+
+ +
+
+ 		- 3mo - -

- -
+
+
+
+ Age +
+ + + + + + 0 + + +
+
+ +
+
+
- - multi-container-vpa - - - - default - - + + multi-container-vpa + + + + default + + + 1 + + 2Gi + + True + +

+ 3mo + +

+
+ + multi-container-vpa + + + + default + + + 1 + + 2Gi + + True + +

+ 3mo + +

+
+ + multi-container-vpa + + + + default + + + 1 + + 2Gi + + True + +

+ 3mo + +

+
+ + multi-container-vpa + + + + default + + + 1 + + 2Gi + + True + +

+ 3mo + +

+
+ + default + + + 1 + + 2Gi + - 3mo - -

-
+

+ 3mo + +

+
+
+
+
+ +
- - - multi-container-vpa - - - - - default - - - - 1 - - - 2Gi - - - True - - -

+ +

+ + + +
+
+ + 1-5 of 5 + +
- 3mo - -

- - - - + + + + + + +
+
+
+ + diff --git a/frontend/src/components/webhookconfiguration/MutatingWebhookConfigList.tsx b/frontend/src/components/webhookconfiguration/MutatingWebhookConfigList.tsx index f1563285f5f..7ca856f734c 100644 --- a/frontend/src/components/webhookconfiguration/MutatingWebhookConfigList.tsx +++ b/frontend/src/components/webhookconfiguration/MutatingWebhookConfigList.tsx @@ -14,7 +14,7 @@ export default function MutatingWebhookConfigurationList() { { id: 'webhooks', label: t('Webhooks'), - getter: mutatingWebhookConfig => mutatingWebhookConfig.webhooks?.length || 0, + getValue: mutatingWebhookConfig => mutatingWebhookConfig.webhooks?.length || 0, }, 'age', ]} diff --git a/frontend/src/components/webhookconfiguration/ValidatingWebhookConfigList.tsx b/frontend/src/components/webhookconfiguration/ValidatingWebhookConfigList.tsx index 75d85c54053..6123dde71b6 100644 --- a/frontend/src/components/webhookconfiguration/ValidatingWebhookConfigList.tsx +++ b/frontend/src/components/webhookconfiguration/ValidatingWebhookConfigList.tsx @@ -14,7 +14,7 @@ export default function ValidatingWebhookConfigurationList() { { id: 'webhooks', label: t('Webhooks'), - getter: mutatingWebhookConfig => mutatingWebhookConfig.webhooks?.length || 0, + getValue: mutatingWebhookConfig => mutatingWebhookConfig.webhooks?.length || 0, }, 'age', ]} diff --git a/frontend/src/components/webhookconfiguration/__snapshots__/MutatingWebhookConfigDetails.stories.storyshot b/frontend/src/components/webhookconfiguration/__snapshots__/MutatingWebhookConfigDetails.stories.storyshot index 60ede0d92d7..044bfa6f5af 100644 --- a/frontend/src/components/webhookconfiguration/__snapshots__/MutatingWebhookConfigDetails.stories.storyshot +++ b/frontend/src/components/webhookconfiguration/__snapshots__/MutatingWebhookConfigDetails.stories.storyshot @@ -12,12 +12,12 @@ exports[`Storyshots WebhookConfiguration/MutatingWebhookConfig/Details With Serv class="MuiBox-root css-p0cik4" > - -
- -
- - + + + @@ -83,257 +55,716 @@ exports[`Storyshots WebhookConfiguration/MutatingWebhookConfig/List Items 1`] = class="MuiBox-root css-1txv3mw" >
- - - - - - - - - + + + +
+
+ + + + + +
+ +
+
- Name + -
- Webhooks - - Age -
- - - - - +
+
+ Webhooks +
+ + + + + + 0 + + +
+
+ +
+ + + + + + - - - + - - - - - + + -

- 3mo - -

- - - - + - - + + -

- 3mo - -

- - - - + + + + - + + mwc-test-with-service-0 + + + + - + + - 1 - - + + + + -

+ + mwc-test-with-service-2 + + +

+ - - + 3mo + +

+ + + + +
- - mwc-test-0 - - - 1 - -

+

+
+ Name +
+ + + + + + 0 + + +
+
+ +
+ + + 		- 3mo - -

- -
+
+
+
+ Age +
+ + + + + + 0 + + +
+
+ +
+
+
- - mwc-test-1 - - - 1 - -

+ mwc-test-0 + +

- 3mo - -

-
- + - mwc-test-2 - - - 1 - + 3mo + +

+
- + mwc-test-1 + + - mwc-test-with-service-0 - - - 1 - + +

+ 3mo + +

+
+ mwc-test-2 + + + 1 + +

+ 3mo + +

+
+ 1 + - mwc-test-with-service-1 - - + 3mo + +

+
+ + mwc-test-with-service-1 + + + 1 + +

+ 3mo + +

+
+ 1 + - 3mo - -

-
+
+
+
+ +
- - - mwc-test-with-service-2 - - - - 1 - - -

+ Rows per page + +

+ + + +
+
+ - 3mo - -

- - - - + 1-6 of 6 + +
+ + + + + + +
+
+
+ + diff --git a/frontend/src/components/webhookconfiguration/__snapshots__/ValidatingWebhookConfigDetails.stories.storyshot b/frontend/src/components/webhookconfiguration/__snapshots__/ValidatingWebhookConfigDetails.stories.storyshot index 0cdc58e5bcf..37b4643eb1a 100644 --- a/frontend/src/components/webhookconfiguration/__snapshots__/ValidatingWebhookConfigDetails.stories.storyshot +++ b/frontend/src/components/webhookconfiguration/__snapshots__/ValidatingWebhookConfigDetails.stories.storyshot @@ -12,12 +12,12 @@ exports[`Storyshots WebhookConfiguration/ValidatingWebhookConfig/Details With Se class="MuiBox-root css-p0cik4" > - -
- -
- - + + + @@ -83,257 +55,716 @@ exports[`Storyshots WebhookConfiguration/ValidatingWebhookConfig/List Items 1`] class="MuiBox-root css-1txv3mw" >
- - - - - - - - - + + + +
+
+ + + + + +
+ +
+
- Name + -
- Webhooks - - Age -
- - - - - +
+
+ Webhooks +
+ + + + + + 0 + + +
+
+ +
+ + + + + + - - - + - - - - - + + -

- 3mo - -

- - - - + - - + + -

- 3mo - -

- - - - + + + + - + + vwc-test-with-service-0 + + + + - + + - 1 - - + + + + -

+ + vwc-test-with-service-2 + + +

+ - - + 3mo + +

+ + + + +
- - vwc-test-0 - - - 1 - -

+

+
+ Name +
+ + + + + + 0 + + +
+
+ +
+ + + 		- 3mo - -

- -
+
+
+
+ Age +
+ + + + + + 0 + + +
+
+ +
+
+
- - vwc-test-1 - - - 1 - -

+ vwc-test-0 + +

- 3mo - -

-
- + - vwc-test-2 - - - 1 - + 3mo + +

+
- + vwc-test-1 + + - vwc-test-with-service-0 - - - 1 - + +

+ 3mo + +

+
+ vwc-test-2 + + + 1 + +

+ 3mo + +

+
+ 1 + - vwc-test-with-service-1 - - + 3mo + +

+
+ + vwc-test-with-service-1 + + + 1 + +

+ 3mo + +

+
+ 1 + - 3mo - -

-
+
+
+
+ +
- - - vwc-test-with-service-2 - - - - 1 - - -

+ Rows per page + +

+ + + +
+
+ - 3mo - -

- - - - + 1-6 of 6 + +
+ + + + + + +
+
+
+ + diff --git a/frontend/src/components/workload/Overview.tsx b/frontend/src/components/workload/Overview.tsx index de49cec30b3..7b569657d0a 100644 --- a/frontend/src/components/workload/Overview.tsx +++ b/frontend/src/components/workload/Overview.tsx @@ -25,7 +25,7 @@ interface WorkloadDict { export default function Overview() { const [workloadsData, setWorkloadsData] = React.useState({}); const location = useLocation(); - const filterFunc = useFilterFunc(['.jsonData.kind']); + const filterFunc = useFilterFunc(['.jsonData.kind']); const { t } = useTranslation('glossary'); const cluster = useCluster(); @@ -119,21 +119,16 @@ export default function Overview() { { id: 'name', label: t('translation|Name'), - getter: item => , - sort: (w1: Workload, w2: Workload) => { - if (w1.metadata.name < w2.metadata.name) { - return -1; - } else if (w1.metadata.name > w2.metadata.name) { - return 1; - } - return 0; - }, + getValue: item => item.metadata.name, + render: item => ( + + ), }, 'namespace', { id: 'pods', label: t('Pods'), - getter: item => item && getPods(item), + getValue: item => item && getPods(item), sort: sortByReplicas, }, 'age', diff --git a/frontend/src/i18n/LocaleSelect/__snapshots__/LocaleSelect.stories.storyshot b/frontend/src/i18n/LocaleSelect/__snapshots__/LocaleSelect.stories.storyshot index 4dd8ada1edd..839dbbb44fe 100644 --- a/frontend/src/i18n/LocaleSelect/__snapshots__/LocaleSelect.stories.storyshot +++ b/frontend/src/i18n/LocaleSelect/__snapshots__/LocaleSelect.stories.storyshot @@ -6,7 +6,7 @@ exports[`Storyshots LocaleSelect Initial 1`] = ` class="MuiFormControl-root css-k2e4wk-MuiFormControl-root" >
{ + * // return plain value to allow filtering and sorting + * getValue: (pod: Pod) => { * return pod.spec.initContainers.length; - * }, + * } + * // (optional) customise how the cell value is rendered + * render: (pod: Pod) =>
{pod.spec.initContainers.length}
* }); * } * diff --git a/plugins/examples/tables/src/index.tsx b/plugins/examples/tables/src/index.tsx index d1e8b2219cb..ade07cea45a 100644 --- a/plugins/examples/tables/src/index.tsx +++ b/plugins/examples/tables/src/index.tsx @@ -71,7 +71,8 @@ registerResourceTableColumnsProcessor(function setupContextMenuForPodsList({ id, if (id === 'headlamp-pods') { columns.push({ label: '', - getter: (pod: Pod) => { + getValue: (pod: Pod) => pod.getDetailsLink(), + render: (pod: Pod) => { return ; }, });