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..1b6d1f6dc9f 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/cluster/Overview.tsx b/frontend/src/components/cluster/Overview.tsx index b3ede30f547..8bfdf2a6d4b 100644 --- a/frontend/src/components/cluster/Overview.tsx +++ b/frontend/src/components/cluster/Overview.tsx @@ -4,7 +4,7 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; import { useDispatch } from 'react-redux'; import { useLocation } from 'react-router'; -import Event, { KubeEvent } from '../../lib/k8s/event'; +import Event from '../../lib/k8s/event'; import Node from '../../lib/k8s/node'; import Pod from '../../lib/k8s/pod'; import { useFilterFunc } from '../../lib/util'; @@ -68,7 +68,7 @@ function EventsSection() { const queryParams = new URLSearchParams(location.search); const eventsFilter = queryParams.get('eventsFilter'); const dispatch = useDispatch(); - const filterFunc = useFilterFunc(['.jsonData.involvedObject.kind']); + const filterFunc = useFilterFunc(['.jsonData.involvedObject.kind']); const [isWarningEventSwitchChecked, setIsWarningEventSwitchChecked] = React.useState( Boolean( JSON.parse( @@ -79,7 +79,7 @@ function EventsSection() { ); const [events, eventsError] = Event.useList({ limit: Event.maxLimit }); - const warningActionFilterFunc = (event: KubeEvent) => { + const warningActionFilterFunc = (event: Event) => { if (!filterFunc(event)) { return false; } @@ -112,7 +112,6 @@ function EventsSection() { status={event.type === 'Normal' ? '' : 'warning'} sx={theme => ({ [theme.breakpoints.up('md')]: { - minWidth: '180px', display: 'unset', }, })} @@ -152,51 +151,40 @@ function EventsSection() { columns={[ { label: t('Type'), - getter: event => event.involvedObject.kind, - sort: true, + getValue: event => event.involvedObject.kind, }, { label: t('Name'), - getter: event => makeObjectLink(event), - cellProps: { - scope: 'row', - component: 'th', - }, - gridTemplate: 1.5, - sort: true, + getValue: event => event.involvedObjectInstance?.getName() ?? event.involvedObject.name, + render: event => makeObjectLink(event), }, 'namespace', { label: t('Reason'), - getter: event => ( + getValue: event => event.reason, + render: event => ( {makeStatusLabel(event)} ), - sort: (e1: Event, e2: Event) => e1.reason.localeCompare(e2.reason), }, { label: t('Message'), - getter: event => ( + getValue: event => event.message ?? '', + render: event => ( {event.message || ''} ), - sort: true, - gridTemplate: 1.5, }, { + id: 'last-seen', label: t('Last Seen'), - getter: event => , - cellProps: { style: { textAlign: 'right' } }, - gridTemplate: 'minmax(150px, 0.5fr)', - sort: (e1: Event, e2: Event) => { - const date1 = e1.lastTimestamp || e1.metadata.creationTimestamp; - const date2 = e2.lastTimestamp || e2.metadata.creationTimestamp; - return new Date(date2).getTime() - new Date(date1).getTime(); - }, + getValue: event => -new Date(event.lastOccurrence).getTime(), + render: event => , + cellProps: { align: 'right' }, }, ]} filterFunction={warningActionFilterFunc} - defaultSortingColumn={6} + defaultSortingColumn={{ id: 'last-seen', desc: false }} id="headlamp-cluster.overview.events" /> ); diff --git a/frontend/src/components/cluster/__snapshots__/Overview.stories.storyshot b/frontend/src/components/cluster/__snapshots__/Overview.stories.storyshot index 494c8d98bbd..f1da93a53a0 100644 --- a/frontend/src/components/cluster/__snapshots__/Overview.stories.storyshot +++ b/frontend/src/components/cluster/__snapshots__/Overview.stories.storyshot @@ -521,45 +521,17 @@ exports[`Storyshots cluster/Overview Events 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/Resource/ResourceListView.stories.tsx b/frontend/src/components/common/Resource/ResourceListView.stories.tsx index 7d0e36fd184..2cf893e5f7f 100644 --- a/frontend/src/components/common/Resource/ResourceListView.stories.tsx +++ b/frontend/src/components/common/Resource/ResourceListView.stories.tsx @@ -32,7 +32,7 @@ const Template: Story = () => { 'namespace', { label: 'Num Containers', - getter: item => item?.spec.containers.length, + getValue: item => item?.spec.containers.length, show: false, }, 'age', diff --git a/frontend/src/components/common/Resource/ResourceListView.tsx b/frontend/src/components/common/Resource/ResourceListView.tsx index f80470f5445..08cc7f5c2e3 100644 --- a/frontend/src/components/common/Resource/ResourceListView.tsx +++ b/frontend/src/components/common/Resource/ResourceListView.tsx @@ -1,33 +1,28 @@ import React, { PropsWithChildren } from 'react'; -import { useTranslation } from 'react-i18next'; -import { ActionButton } from '..'; +import { KubeObject } from '../../../lib/k8s/cluster'; import SectionBox from '../SectionBox'; import SectionFilterHeader, { SectionFilterHeaderProps } from '../SectionFilterHeader'; -import ResourceTable, { - ResourceTableFromResourceClassProps, - ResourceTableProps, -} from './ResourceTable'; +import ResourceTable, { ResourceTableProps } from './ResourceTable'; -export interface ResourceListViewProps extends PropsWithChildren { +export interface ResourceListViewProps + extends PropsWithChildren> { title: string | JSX.Element; headerProps?: Omit; } -export interface ResourceListViewWithResourceClassProps - extends Omit { - resourceClass: ResourceTableFromResourceClassProps['resourceClass']; +type Class = new (...args: any[]) => T; + +export interface ResourceListViewWithResourceClassProps + extends Omit, 'data'> { + resourceClass: Class; } -export default function ResourceListView( - props: ResourceListViewProps | ResourceListViewWithResourceClassProps +export default function ResourceListView( + props: ResourceListViewProps | ResourceListViewWithResourceClassProps ) { const { title, children, headerProps, ...tableProps } = props; - const { t } = useTranslation(); - const [columnChooserAnchorEl, setColumnChooserAnchorEl] = React.useState( - null - ); - const withNamespaceFilter = (props as ResourceListViewWithResourceClassProps).resourceClass - ?.isNamespaced; + const withNamespaceFilter = + 'resourceClass' in props && (props.resourceClass as KubeObject)?.isNamespaced; return ( { - setColumnChooserAnchorEl(() => event.currentTarget); - }} - />, - ]} noNamespaceFilter={!withNamespaceFilter} {...headerProps} /> @@ -52,11 +38,7 @@ export default function ResourceListView( ) } > - setColumnChooserAnchorEl(null)} - {...tableProps} - /> + {children} ); diff --git a/frontend/src/components/common/Resource/ResourceTable.stories.tsx b/frontend/src/components/common/Resource/ResourceTable.stories.tsx index 219a571c8b3..763aca82d73 100644 --- a/frontend/src/components/common/Resource/ResourceTable.stories.tsx +++ b/frontend/src/components/common/Resource/ResourceTable.stories.tsx @@ -1,6 +1,5 @@ import { configureStore } from '@reduxjs/toolkit'; import { Meta, Story } from '@storybook/react'; -import { KubeObject } from '../../../lib/k8s/cluster'; import Pod, { KubePod } from '../../../lib/k8s/pod'; import { INITIAL_STATE as UI_INITIAL_STATE } from '../../../redux/reducers/ui'; import { TestContext } from '../../../test'; @@ -13,7 +12,7 @@ export default { } as Meta; const TemplateWithFilter: Story<{ - resourceTableArgs: ResourceTableFromResourceClassProps; + resourceTableArgs: ResourceTableFromResourceClassProps; namespaces: string[]; search: string; }> = args => { @@ -119,23 +118,23 @@ class MyPod extends Pod { ] as any; } -const podData: ResourceTableFromResourceClassProps = { +const podData: ResourceTableFromResourceClassProps = { columns: ['name', 'namespace', 'age'], - resourceClass: MyPod as KubeObject, + resourceClass: MyPod, }; -const withHiddenCols: ResourceTableFromResourceClassProps = { +const withHiddenCols: ResourceTableFromResourceClassProps = { columns: [ 'name', 'namespace', { label: 'UID', - getter: (pod: Pod) => pod.metadata.uid, + getValue: pod => pod.metadata.uid, show: false, }, 'age', ], - resourceClass: MyPod as KubeObject, + resourceClass: MyPod, hideColumns: ['namespace'], }; diff --git a/frontend/src/components/common/Resource/ResourceTable.tsx b/frontend/src/components/common/Resource/ResourceTable.tsx index 8b5f143a6b5..080d1ca9dc4 100644 --- a/frontend/src/components/common/Resource/ResourceTable.tsx +++ b/frontend/src/components/common/Resource/ResourceTable.tsx @@ -1,5 +1,7 @@ +import { TableCellProps } from '@mui/material'; import { useTheme } from '@mui/material/styles'; -import { useEffect, useMemo, useRef, useState } from 'react'; +import { MRT_Row, MRT_SortingFn } from 'material-react-table'; +import { ComponentProps, ReactNode, useEffect, useMemo, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import helpers from '../../../helpers'; import { KubeObject } from '../../../lib/k8s/cluster'; @@ -9,28 +11,56 @@ import { useTypedSelector } from '../../../redux/reducers/reducers'; import { useSettings } from '../../App/Settings/hook'; import { DateLabel } from '../Label'; import Link from '../Link'; -import SimpleTable, { - SimpleTableDatumColumn, - SimpleTableGetterColumn, - SimpleTableProps, -} from '../SimpleTable'; -import TableColumnChooserPopup from './ResourceTableColumnChooser'; - -interface ToggableColumn { +import Table, { TableColumn } from '../Table'; + +export type ResourceTableColumn = { + /** Unique id for the column, not required but recommended */ id?: string; + /** Show or hide the column @default true */ show?: boolean; -} - -export type ResourceTableColumn = - | (ToggableColumn & SimpleTableDatumColumn) - | (ToggableColumn & SimpleTableGetterColumn); + /** Label of the column that will be shown in the header */ + label: string; + cellProps?: TableCellProps & { + [propName: string]: any; + }; + /** + * By default the column will be sorted by the value provided in the getter + * but you can provide your own sorting function here + * + * @default true + **/ + sort?: boolean | ((a: RowItem, b: RowItem) => number); + /** Change how filtering behaves, by default it will just search the text value */ + filterVariant?: TableColumn['filterVariant']; + disableFiltering?: boolean; +} & ( + | { + /** To render a simple value provide property name of the item */ + datum: keyof RowItem; + render?: never; + getValue?: never; + } + | { + datum?: never; + /** How to render a cell */ + render?: (item: RowItem) => ReactNode; + /** Plain value for filtering and sorting. This is going to be displayed unless render property is defined */ + getValue: (item: RowItem) => string | number | null | undefined; + } + | { + datum?: never; + render?: never; + /** @deprecated please use getValue and render (optional, if you need custom renderer) */ + getter: (item: RowItem) => any; + } +); type ColumnType = 'age' | 'name' | 'namespace' | 'type' | 'kind'; -export interface ResourceTableProps extends Omit { +export interface ResourceTableProps { /** The columns to be rendered, like used in SimpleTable, or by name. */ - columns: (ResourceTableColumn | ColumnType)[]; - /** Allow to prefilter columns */ + columns: (ResourceTableColumn | ColumnType)[]; + /** Provide a list of columns that won't be shown and cannot be turned on */ hideColumns?: string[] | null; /** ID for the table. Will be used by plugins to identify this table. * Official tables in Headlamp will have the 'headlamp-' prefix for their IDs which is followed by the resource's plural name or the section in Headlamp the table is in. @@ -39,25 +69,88 @@ export interface ResourceTableProps extends Omit { id?: string; /** Deny plugins to process this table's columns. */ noProcessing?: boolean; - /** The anchor element for the column chooser popup. */ - columnChooserAnchor?: HTMLElement | null; /** The callback for when the columns chooser is closed. */ onColumnChooserClose?: () => void; + /** Column to be sorted */ + defaultSortingColumn?: { id: string; desc: boolean }; + data: Array | null; + filterFunction?: (item: RowItem) => boolean; + errorMessage?: string | null; + reflectInURL?: string | boolean; } -export interface ResourceTableFromResourceClassProps extends Omit { +export interface ResourceTableFromResourceClassProps + extends Omit, 'data'> { resourceClass: KubeObject; } -export default function ResourceTable( - props: ResourceTableFromResourceClassProps | ResourceTableProps +export default function ResourceTable( + props: ResourceTableFromResourceClassProps | ResourceTableProps ) { - if (!!(props as ResourceTableFromResourceClassProps).resourceClass) { - const { resourceClass, ...otherProps } = props as ResourceTableFromResourceClassProps; + if (!!(props as ResourceTableFromResourceClassProps).resourceClass) { + const { resourceClass, ...otherProps } = props as ResourceTableFromResourceClassProps; return ; } - return ; + return )} />; +} + +function TableFromResourceClass(props: ResourceTableFromResourceClassProps) { + const { resourceClass, id, ...otherProps } = props; + const [items, error] = resourceClass.useList(); + // throttle the update of the table to once per second + const throttledItems = useThrottle(items, 1000); + const dispatchHeadlampEvent = useEventCallback(HeadlampEventType.LIST_VIEW); + + useEffect(() => { + dispatchHeadlampEvent({ + resources: items, + resourceKind: resourceClass.className, + error: error || undefined, + }); + }, [items, error]); + + return ( + + ); +} + +/** + * Here we figure out which columns are visible and not visible + * We can control it using show property in the columns prop {@link ResourceTableColumn} + * And when user manually changes visibility it is saved to localStorage + */ +function initColumnVisibilityState(columns: ResourceTableProps['columns'], tableId?: string) { + const visibility: Record = {}; + + // Apply default visibility we got from the props + columns.forEach((col, index) => { + if (typeof col === 'string') return; + + if ('show' in col) { + visibility[col.id ?? String(index)] = col.show ?? true; + } + }); + + // Load and apply persisted settings from local storage + if (tableId) { + const localTableSettins = helpers.loadTableSettings(tableId); + localTableSettins.forEach(({ id, show }) => (visibility[id] = show)); + } + + return visibility; +} + +// By default MRT passes row object to the sorting function but we only need the original item +function sortingFn(sortFn?: (a: any, b: any) => number): MRT_SortingFn | undefined { + if (!sortFn) return undefined; + + return (a: any, b: any) => sortFn(a.original, b.original); } /** @@ -99,55 +192,33 @@ export function useThrottle(value: any, interval = 1000): any { return throttledValue; } -function TableFromResourceClass(props: ResourceTableFromResourceClassProps) { - const { resourceClass, id, ...otherProps } = props; - const [items, error] = resourceClass.useList(); - // throttle the update of the table to once per second - const throttledItems = useThrottle(items, 1000); - const dispatchHeadlampEvent = useEventCallback(HeadlampEventType.LIST_VIEW); - - useEffect(() => { - dispatchHeadlampEvent({ - resources: items, - resourceKind: resourceClass.className, - error: error || undefined, - }); - }, [items, error]); - - return ( -
- ); -} - -type ResourceTableColumnWithDefaultShow = ResourceTableColumn & { defaultShow?: boolean }; - -function Table(props: ResourceTableProps) { +function ResourceTableContent(props: ResourceTableProps) { const { columns, defaultSortingColumn, id, noProcessing = false, - columnChooserAnchor = null, hideColumns = [], - onColumnChooserClose, - ...otherProps + filterFunction, + errorMessage, + reflectInURL, + data, } = props; const { t } = useTranslation(['glossary', 'translation']); const theme = useTheme(); const storeRowsPerPageOptions = useSettings('tableRowsPerPageOptions'); const tableProcessors = useTypedSelector(state => state.resourceTable.tableColumnsProcessors); - const [tableSettings, setTableSettings] = useState<{ id: string; show: boolean }[]>( - !!id ? helpers.loadTableSettings(id) : [] + const filter = useTypedSelector(state => state.filter); + const defaultFilterFunc = useFilterFunc(); + const [columnVisibility, setColumnVisibility] = useState(() => + initColumnVisibilityState(columns, id) ); - const [resourceCols, cols, sortingColumn] = useMemo(() => { - let sortingColumn = defaultSortingColumn; + const [tableSettings] = useState<{ id: string; show: boolean }[]>( + !!id ? helpers.loadTableSettings(id) : [] + ); + const [allColumns, sort] = useMemo(() => { let processedColumns = columns; if (!noProcessing) { @@ -157,106 +228,112 @@ function Table(props: ResourceTableProps) { processorInfo.processor({ id: id || '', columns: processedColumns }) || []; }); } + const allColumns = processedColumns + .map((col, index): TableColumn => { + const indexId = String(index); - let shouldSortOnAge = false; - - const resourceCols: ResourceTableColumnWithDefaultShow[] = processedColumns - .map(col => { if (typeof col !== 'string') { - return col; + const column = col as ResourceTableColumn; + + const sort = column.sort ?? true; + + const mrtColumn: TableColumn = { + id: column.id ?? indexId, + header: column.label, + filterVariant: column.filterVariant, + enableMultiSort: !!sort, + enableSorting: !!sort, + enableColumnFilter: !column.disableFiltering, + muiTableHeadCellProps: column.cellProps, + muiTableBodyCellProps: column.cellProps, + grow: false, + }; + + if ('getValue' in column) { + mrtColumn.accessorFn = column.getValue; + } else if ('getter' in column) { + mrtColumn.accessorFn = column.getter; + } else { + mrtColumn.accessorFn = (item: KubeObject) => item[column.datum]; + } + if ('render' in column) { + mrtColumn.Cell = ({ row }: { row: MRT_Row }) => + column.render?.(row.original) ?? null; + } + if (sort && typeof sort === 'function') { + mrtColumn.sortingFn = sortingFn(sort); + } + + return mrtColumn; } switch (col) { case 'name': return { id: 'name', - label: t('translation|Name'), - gridTemplate: 1.5, - getter: (resource: KubeObject) => resource && , - sort: (n1: KubeObject, n2: KubeObject) => { - if (n1.metadata.name < n2.metadata.name) { - return -1; - } else if (n1.metadata.name > n2.metadata.name) { - return 1; - } - return 0; - }, + header: t('translation|Name'), + accessorFn: (item: KubeObject) => item.metadata.name, + Cell: ({ row }: { row: MRT_Row }) => + row.original && , }; case 'age': - shouldSortOnAge = defaultSortingColumn === undefined; return { id: 'age', - label: t('translation|Age'), - cellProps: { style: { textAlign: 'right' } }, - gridTemplate: 0.5, - getter: (resource: KubeObject) => - resource && ( + header: t('translation|Age'), + accessorFn: (item: KubeObject) => + -new Date(item.metadata.creationTimestamp).getTime(), + muiTableHeadCellProps: { align: 'right' }, + muiTableBodyCellProps: { align: 'right' }, + enableColumnFilter: false, + Cell: ({ row }: { row: MRT_Row }) => + row.original && ( ), - sort: (n1: KubeObject, n2: KubeObject) => - new Date(n2.metadata.creationTimestamp).getTime() - - new Date(n1.metadata.creationTimestamp).getTime(), }; case 'namespace': return { id: 'namespace', - label: t('glossary|Namespace'), - getter: (resource: KubeObject) => - resource?.getNamespace() ? ( - - {resource.getNamespace()} + header: t('glossary|Namespace'), + accessorFn: (item: KubeObject) => item.getNamespace(), + filterVariant: 'multi-select', + Cell: ({ row }: { row: MRT_Row }) => + row.original?.getNamespace() ? ( + + {row.original.getNamespace()} ) : ( '' ), - sort: (n1: KubeObject, n2: KubeObject) => { - const ns1 = n1.getNamespace() || ''; - const ns2 = n2.getNamespace() || ''; - if (ns1 < ns2) { - return -1; - } else if (ns1 > ns2) { - return 1; - } - return 0; - }, }; case 'type': case 'kind': return { id: 'kind', - label: t('translation|Type'), - getter: (resource: KubeObject) => resource?.kind, - sort: true, + header: t('translation|Type'), + Cell: ({ row }: { row: MRT_Row }) => row.original.kind, + accessorFn: (resource: KubeObject) => resource?.kind, + filterVariant: 'multi-select', }; default: throw new Error(`Unknown column: ${col}`); } }) - .filter(col => !hideColumns?.includes(col.id ?? '')) - .map((col, idx) => { - const newCol: ResourceTableColumnWithDefaultShow = { id: col.id || idx.toString(), ...col }; - // Assign the default show value so we can remember it later. - newCol.defaultShow = newCol.show ?? true; - - // Assign the actual show value from whatever is stored in the table settings. - const colSettings = tableSettings.find(col => col.id === newCol.id); - newCol.show = colSettings?.show ?? newCol.defaultShow; - return newCol; - }); + .filter(col => !hideColumns?.includes(col.id ?? '')) as TableColumn[]; - // Filter out columns that have show set to false. - const cols = resourceCols.filter(col => col.show !== false); - - if (shouldSortOnAge) { - // Sorting column on SimpleTable starts at 1. - sortingColumn = cols.findIndex(col => col.id === 'age') + 1; + let sort = undefined; + const sortingColumn = defaultSortingColumn ?? allColumns.find(it => it.id === 'age'); + if (sortingColumn) { + sort = { + id: sortingColumn.id!, + desc: false, + }; } - return [resourceCols, cols, sortingColumn]; + return [allColumns, sort]; }, [ columns, hideColumns, @@ -267,36 +344,51 @@ function Table(props: ResourceTableProps) { tableSettings, ]); - function onColumnsVisibilityToggled(cols: ResourceTableColumn[]) { - if (!!id) { - const colsToStore = cols.filter( - c => resourceCols.find(rc => rc.id === c.id)?.defaultShow !== c.show - ); - helpers.storeTableSettings( - id || '', - colsToStore.map(c => ({ id: c.id || '', show: c.show ?? true })) - ); - } - setTableSettings(cols.map(c => ({ id: c.id || '', show: c.show || c.show === undefined }))); + function onColumnsVisibilityChange(updater: any): void { + setColumnVisibility(oldCols => { + const newCols = updater(oldCols); + + if (!!id) { + const colsToStore = Object.entries(newCols).map(([id, show]) => ({ + id, + show: (show ?? true) as boolean, + })); + helpers.storeTableSettings(id, colsToStore); + } + + return newCols; + }); + } + + const initialState: ComponentProps['initialState'] = { + sorting: sort ? [sort] : undefined, + }; + + if (filter.search) { + initialState.globalFilter = filter.search; + initialState.showGlobalFilter = true; } return ( <> - >[]} + data={(data ?? []) as Array>} + loading={data === null} + initialState={initialState} rowsPerPage={storeRowsPerPageOptions} - defaultSortingColumn={sortingColumn} - filterFunction={useFilterFunc()} - reflectInURL - {...otherProps} - /> - { - onColumnChooserClose && onColumnChooserClose(); + state={{ + columnVisibility, }} - onToggleColumn={onColumnsVisibilityToggled} + reflectInURL={reflectInURL} + onColumnVisibilityChange={onColumnsVisibilityChange as any} + filterFunction={ + (filterFunction ?? defaultFilterFunc) as (item: Record) => boolean + } /> ); diff --git a/frontend/src/components/common/Resource/ResourceTableColumnChooser.tsx b/frontend/src/components/common/Resource/ResourceTableColumnChooser.tsx index f8057d8733e..deecc9395da 100644 --- a/frontend/src/components/common/Resource/ResourceTableColumnChooser.tsx +++ b/frontend/src/components/common/Resource/ResourceTableColumnChooser.tsx @@ -8,8 +8,8 @@ import React from 'react'; import { ResourceTableColumn } from './ResourceTable'; interface ColumnsPopupProps { - columns: ResourceTableColumn[]; - onToggleColumn: (cols: ResourceTableColumn[]) => void; + columns: ResourceTableColumn[]; + onToggleColumn: (cols: ResourceTableColumn[]) => void; onClose: () => void; anchorEl: HTMLElement | null; } diff --git a/frontend/src/components/common/Resource/__snapshots__/ResourceListView.stories.storyshot b/frontend/src/components/common/Resource/__snapshots__/ResourceListView.stories.storyshot index 24487d07bbf..b8d761af125 100644 --- a/frontend/src/components/common/Resource/__snapshots__/ResourceListView.stories.storyshot +++ b/frontend/src/components/common/Resource/__snapshots__/ResourceListView.stories.storyshot @@ -33,45 +33,17 @@ exports[`Storyshots Resource/ListView One Hidden Column 1`] = `
-
-
-
- -
-
- -
-
-
+ + +
@@ -80,261 +52,706 @@ exports[`Storyshots Resource/ListView One Hidden Column 1`] = ` class="MuiBox-root css-1txv3mw" >
-
- - - - - - - - + + + +
+
+ + + + + +
+ +
+
- Name -
- Namespace - - Age -
- - - - +
+
+ Age +
+ + + + + + 0 + + +
+
+ +
+ + + + + - - + - + - - - + + - - imagepullbackoff - - - + - + - - - + + - + + imagepullbackoff + + + + - + + - + + imagepullbackoff + + + - + + + -

+ + imagepullbackoff + + +

- - + default + + + + + + +
- - imagepullbackoff - - - +
+
+ Name +
+ + + + + + 0 + + +
+
+ +
+ + + 		- default - - - -

+

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

- -
- - imagepullbackoff - - - + imagepullbackoff + + - default - - -

+ default + +

- 3mo - -

-
+ 3mo + +

+
- + imagepullbackoff + + - default - - -

+ default + +

- 3mo - -

-
+ 3mo + +

+
+ + default + + - imagepullbackoff - - + 3mo + +

+
- default - - + default + + +

+ 3mo + +

+
- 3mo - -

-
+

+ 3mo + +

+
+ +
+
+ +
- - - imagepullbackoff - - - - + Rows per page + +
+ + + +
+
+ - default - - - -

+

- 3mo - -

- - - - + + + + + + +
+
+
+ + diff --git a/frontend/src/components/common/Resource/__snapshots__/ResourceTable.stories.storyshot b/frontend/src/components/common/Resource/__snapshots__/ResourceTable.stories.storyshot index bcab273a0fd..8f54bdfe3b2 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/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__/List.stories.storyshot b/frontend/src/components/configmap/__snapshots__/List.stories.storyshot index 6edc3a04097..3f810f6ea49 100644 --- a/frontend/src/components/configmap/__snapshots__/List.stories.storyshot +++ b/frontend/src/components/configmap/__snapshots__/List.stories.storyshot @@ -33,45 +33,17 @@ exports[`Storyshots ConfigMap/ListView Items 1`] = `
-
-
-
- -
-
- -
-
-
+ + +
@@ -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 483fae36f17..d265b294a32 100644 --- a/frontend/src/components/crd/__snapshots__/CustomResourceDefinition.stories.storyshot +++ b/frontend/src/components/crd/__snapshots__/CustomResourceDefinition.stories.storyshot @@ -459,45 +459,17 @@ exports[`Storyshots crd/CustomResourceDefinition Details 1`] = `
-
-
-
- -
-
- -
-
-
+ + +
@@ -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__/CustomResourceList.stories.storyshot b/frontend/src/components/crd/__snapshots__/CustomResourceList.stories.storyshot index 67b3b730ba3..008f73c0e1f 100644 --- a/frontend/src/components/crd/__snapshots__/CustomResourceList.stories.storyshot +++ b/frontend/src/components/crd/__snapshots__/CustomResourceList.stories.storyshot @@ -107,45 +107,17 @@ exports[`Storyshots crd/CustomResourceList List 1`] = `
-
-
-
- -
-
- -
-
-
+ + +
@@ -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 6b5059cc07a..5486a2dd0db 100644 --- a/frontend/src/components/cronjob/__snapshots__/CronJobDetails.stories.storyshot +++ b/frontend/src/components/cronjob/__snapshots__/CronJobDetails.stories.storyshot @@ -289,45 +289,17 @@ exports[`Storyshots CronJob/CronJobDetailsView Every Ast 1`] = `
-
-
-
- -
-
- -
-
-
+ + +
@@ -787,45 +759,17 @@ exports[`Storyshots CronJob/CronJobDetailsView Every Minute 1`] = `
-
-
-
- -
-
- -
-
-
+ + +
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..7b51e64171c 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__/EndpointList.stories.storyshot b/frontend/src/components/endpoints/__snapshots__/EndpointList.stories.storyshot index 3b032992688..2ba122fa426 100644 --- a/frontend/src/components/endpoints/__snapshots__/EndpointList.stories.storyshot +++ b/frontend/src/components/endpoints/__snapshots__/EndpointList.stories.storyshot @@ -33,45 +33,17 @@ exports[`Storyshots endpoints/EndpointsListView Items 1`] = `
-
-
-
- -
-
- -
-
-
+ + +
@@ -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__/HPAList.stories.storyshot b/frontend/src/components/horizontalPodAutoscaler/__snapshots__/HPAList.stories.storyshot index 86e92fd7f83..437bf836e61 100644 --- a/frontend/src/components/horizontalPodAutoscaler/__snapshots__/HPAList.stories.storyshot +++ b/frontend/src/components/horizontalPodAutoscaler/__snapshots__/HPAList.stories.storyshot @@ -33,45 +33,17 @@ exports[`Storyshots hpa/HpaListView Items 1`] = `
-
-
-
- -
-
- -
-
-
+ + +
@@ -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__/ClassList.stories.storyshot b/frontend/src/components/ingress/__snapshots__/ClassList.stories.storyshot index 1c16093ef10..7c8c15053f0 100644 --- a/frontend/src/components/ingress/__snapshots__/ClassList.stories.storyshot +++ b/frontend/src/components/ingress/__snapshots__/ClassList.stories.storyshot @@ -33,45 +33,17 @@ exports[`Storyshots IngressClass/ListView Items 1`] = `
-
-
-
- -
-
- -
-
-
+ + +
@@ -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__/List.stories.storyshot b/frontend/src/components/ingress/__snapshots__/List.stories.storyshot index 61011d21916..f10848be934 100644 --- a/frontend/src/components/ingress/__snapshots__/List.stories.storyshot +++ b/frontend/src/components/ingress/__snapshots__/List.stories.storyshot @@ -33,45 +33,17 @@ exports[`Storyshots Ingress/ListView Items 1`] = `
-
-
-
- -
-
- -
-
-
+ + +
@@ -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..773b5ab1109 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__/List.stories.storyshot b/frontend/src/components/lease/__snapshots__/List.stories.storyshot index aabd3620062..b12bfa2be2b 100644 --- a/frontend/src/components/lease/__snapshots__/List.stories.storyshot +++ b/frontend/src/components/lease/__snapshots__/List.stories.storyshot @@ -33,45 +33,17 @@ exports[`Storyshots Lease/ListView Items 1`] = `
-
-
-
- -
-
- -
-
-
+ + +
@@ -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__/List.stories.storyshot b/frontend/src/components/limitRange/__snapshots__/List.stories.storyshot index 8ef98f67960..88b82c0351f 100644 --- a/frontend/src/components/limitRange/__snapshots__/List.stories.storyshot +++ b/frontend/src/components/limitRange/__snapshots__/List.stories.storyshot @@ -33,45 +33,17 @@ exports[`Storyshots LimitRange/ListView Items 1`] = `
-
-
-
- -
-
- -
-
-
+ + +
@@ -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..55f87c918cf 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..df36dbb598d 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__/PodList.stories.storyshot b/frontend/src/components/pod/__snapshots__/PodList.stories.storyshot index c5c48b8e973..f5100f7ffea 100644 --- a/frontend/src/components/pod/__snapshots__/PodList.stories.storyshot +++ b/frontend/src/components/pod/__snapshots__/PodList.stories.storyshot @@ -33,45 +33,17 @@ exports[`Storyshots Pod/PodListView Items 1`] = `
-
-
-
- -
-
- -
-
-
+ + +
@@ -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/podDisruptionBudget/List.tsx b/frontend/src/components/podDisruptionBudget/List.tsx index 4a82375f34c..366778e8f6f 100644 --- a/frontend/src/components/podDisruptionBudget/List.tsx +++ b/frontend/src/components/podDisruptionBudget/List.tsx @@ -15,18 +15,17 @@ export default function PDBList() { { id: 'minAvailable', label: t('translation|Min Available'), - getter: (item: PDB) => item.spec.minAvailable || t('translation|N/A'), - sort: true, + getValue: (item: PDB) => item.spec.minAvailable || t('translation|N/A'), }, { id: 'maxUnavailable', label: t('translation|Max Unavailable'), - getter: (item: PDB) => item.spec.maxUnavailable || t('translation|N/A'), + getValue: (item: PDB) => item.spec.maxUnavailable || t('translation|N/A'), }, { id: 'allowedDisruptions', label: t('translation|Allowed Disruptions'), - getter: (item: PDB) => item.status.disruptionsAllowed || t('translation|N/A'), + getValue: (item: PDB) => item.status.disruptionsAllowed || t('translation|N/A'), }, 'age', ]} diff --git a/frontend/src/components/podDisruptionBudget/__snapshots__/pdbList.stories.storyshot b/frontend/src/components/podDisruptionBudget/__snapshots__/pdbList.stories.storyshot index bdd1a1046da..9d4a6f4c3ca 100644 --- a/frontend/src/components/podDisruptionBudget/__snapshots__/pdbList.stories.storyshot +++ b/frontend/src/components/podDisruptionBudget/__snapshots__/pdbList.stories.storyshot @@ -33,45 +33,17 @@ exports[`Storyshots PDB/PDBListView Items 1`] = `
-
-
-
- -
-
- -
-
-
+ + +
@@ -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__/priorityClassList.stories.storyshot b/frontend/src/components/priorityClass/__snapshots__/priorityClassList.stories.storyshot index ee9ed57b060..b49e71b2426 100644 --- a/frontend/src/components/priorityClass/__snapshots__/priorityClassList.stories.storyshot +++ b/frontend/src/components/priorityClass/__snapshots__/priorityClassList.stories.storyshot @@ -33,45 +33,17 @@ exports[`Storyshots PriorityClass/PriorityClassListView Items 1`] = `
-
-
-
- -
-
- -
-
-
+ + +
@@ -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..f9e4d2565fb 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__/resourceQuotaList.stories.storyshot b/frontend/src/components/resourceQuota/__snapshots__/resourceQuotaList.stories.storyshot index 41bf28ecc71..c907f3b9a57 100644 --- a/frontend/src/components/resourceQuota/__snapshots__/resourceQuotaList.stories.storyshot +++ b/frontend/src/components/resourceQuota/__snapshots__/resourceQuotaList.stories.storyshot @@ -33,45 +33,17 @@ exports[`Storyshots ResourceQuota/ResourceQuotaListView Items 1`] = `
-
-
-
- -
-
- -
-
-
+ + +
@@ -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__/List.stories.storyshot b/frontend/src/components/runtimeClass/__snapshots__/List.stories.storyshot index adbb41fc02c..f428c02c60e 100644 --- a/frontend/src/components/runtimeClass/__snapshots__/List.stories.storyshot +++ b/frontend/src/components/runtimeClass/__snapshots__/List.stories.storyshot @@ -33,45 +33,17 @@ exports[`Storyshots RuntimeClass/ListView Items 1`] = `
-
-
-
- -
-
- -
-
-
+ + +
@@ -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__/List.stories.storyshot b/frontend/src/components/secret/__snapshots__/List.stories.storyshot index 7e8ef8cbaec..0337b3ad330 100644 --- a/frontend/src/components/secret/__snapshots__/List.stories.storyshot +++ b/frontend/src/components/secret/__snapshots__/List.stories.storyshot @@ -33,45 +33,17 @@ exports[`Storyshots Secret/ListView Items 1`] = `
-
-
-
- -
-
- -
-
-
+ + +
@@ -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__/ClaimList.stories.storyshot b/frontend/src/components/storage/__snapshots__/ClaimList.stories.storyshot index ddb5707d69a..a7b3a2f0789 100644 --- a/frontend/src/components/storage/__snapshots__/ClaimList.stories.storyshot +++ b/frontend/src/components/storage/__snapshots__/ClaimList.stories.storyshot @@ -33,45 +33,17 @@ exports[`Storyshots PersistentVolumeClaim/ListView Items 1`] = `
-
-
-
- -
-
- -
-
-
+ + +
@@ -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__/ClassList.stories.storyshot b/frontend/src/components/storage/__snapshots__/ClassList.stories.storyshot index 069cf77130c..7e856e41b2d 100644 --- a/frontend/src/components/storage/__snapshots__/ClassList.stories.storyshot +++ b/frontend/src/components/storage/__snapshots__/ClassList.stories.storyshot @@ -33,45 +33,17 @@ exports[`Storyshots StorageClass/ListView Items 1`] = `
-
-
-
- -
-
- -
-
-
+ + +
@@ -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__/VolumeList.stories.storyshot b/frontend/src/components/storage/__snapshots__/VolumeList.stories.storyshot index aecf5fbb451..c1f6fa6b2ef 100644 --- a/frontend/src/components/storage/__snapshots__/VolumeList.stories.storyshot +++ b/frontend/src/components/storage/__snapshots__/VolumeList.stories.storyshot @@ -33,45 +33,17 @@ exports[`Storyshots PersistentVolume/ListView Items 1`] = `
-
-
-
- -
-
- -
-
-
+ + +
@@ -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__/VPAList.stories.storyshot b/frontend/src/components/verticalPodAutoscaler/__snapshots__/VPAList.stories.storyshot index 755eb1d1484..b2bcdcf5539 100644 --- a/frontend/src/components/verticalPodAutoscaler/__snapshots__/VPAList.stories.storyshot +++ b/frontend/src/components/verticalPodAutoscaler/__snapshots__/VPAList.stories.storyshot @@ -33,45 +33,17 @@ exports[`Storyshots VPA/VPAListView List 1`] = `
-
-
-
- -
-
- -
-
-
+ + +
@@ -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__/MutatingWebhookConfigList.stories.storyshot b/frontend/src/components/webhookconfiguration/__snapshots__/MutatingWebhookConfigList.stories.storyshot index fbf7dd7268c..73a52546a63 100644 --- a/frontend/src/components/webhookconfiguration/__snapshots__/MutatingWebhookConfigList.stories.storyshot +++ b/frontend/src/components/webhookconfiguration/__snapshots__/MutatingWebhookConfigList.stories.storyshot @@ -36,45 +36,17 @@ exports[`Storyshots WebhookConfiguration/MutatingWebhookConfig/List Items 1`] =
-
-
-
- -
-
- -
-
-
+ + +
@@ -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__/ValidatingWebhookConfigList.stories.storyshot b/frontend/src/components/webhookconfiguration/__snapshots__/ValidatingWebhookConfigList.stories.storyshot index b8a0a0588bd..45698fdd24c 100644 --- a/frontend/src/components/webhookconfiguration/__snapshots__/ValidatingWebhookConfigList.stories.storyshot +++ b/frontend/src/components/webhookconfiguration/__snapshots__/ValidatingWebhookConfigList.stories.storyshot @@ -36,45 +36,17 @@ exports[`Storyshots WebhookConfiguration/ValidatingWebhookConfig/List Items 1`]
-
-
-
- -
-
- -
-
-
+ + +
@@ -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/locales/de/glossary.json b/frontend/src/i18n/locales/de/glossary.json index 29dd77b265c..e63233ba42c 100644 --- a/frontend/src/i18n/locales/de/glossary.json +++ b/frontend/src/i18n/locales/de/glossary.json @@ -62,8 +62,8 @@ "Endpoints": "Endpunkte", "Horizontal Pod Autoscalers": "Horizontaler Pod-Autoskalierer", "Ingress Classes": "Ingress Classes", - "Controller": "Controller", "Default Ingress Class": "Standard Ingress Class", + "Controller": "Controller", "Default Backend": "Standard-Backend", "Class Name": "Name der Klasse", "Rules": "Regeln", diff --git a/frontend/src/i18n/locales/de/translation.json b/frontend/src/i18n/locales/de/translation.json index 55f7e4aa292..68b1f250ed2 100644 --- a/frontend/src/i18n/locales/de/translation.json +++ b/frontend/src/i18n/locales/de/translation.json @@ -215,7 +215,6 @@ "Init Containers": "Init-Container", "Conditions": "Bedingungen", "Volumes": "Speicher-Volumes", - "Change columns displayed": "Angezeigte Spalten ändern", "Restarting {{ itemName }}…": "Starte {{ itemName }} neu…", "Cancelled restarting {{ itemName }}.": "Der Neustart von {{ itemName }} wurde abgebrochen.", "Restarted {{ itemName }}.": "{{ itemName }} neu gestartet.", diff --git a/frontend/src/i18n/locales/en/glossary.json b/frontend/src/i18n/locales/en/glossary.json index fef4b151c50..565f0c3f101 100644 --- a/frontend/src/i18n/locales/en/glossary.json +++ b/frontend/src/i18n/locales/en/glossary.json @@ -62,8 +62,8 @@ "Endpoints": "Endpoints", "Horizontal Pod Autoscalers": "Horizontal Pod Autoscalers", "Ingress Classes": "Ingress Classes", - "Controller": "Controller", "Default Ingress Class": "Default Ingress Class", + "Controller": "Controller", "Default Backend": "Default Backend", "Class Name": "Class Name", "Rules": "Rules", diff --git a/frontend/src/i18n/locales/en/translation.json b/frontend/src/i18n/locales/en/translation.json index 93cbc80f624..f820e967192 100644 --- a/frontend/src/i18n/locales/en/translation.json +++ b/frontend/src/i18n/locales/en/translation.json @@ -215,7 +215,6 @@ "Init Containers": "Init Containers", "Conditions": "Conditions", "Volumes": "Volumes", - "Change columns displayed": "Change columns displayed", "Restarting {{ itemName }}…": "Restarting {{ itemName }}…", "Cancelled restarting {{ itemName }}.": "Cancelled restarting {{ itemName }}.", "Restarted {{ itemName }}.": "Restarted {{ itemName }}.", diff --git a/frontend/src/i18n/locales/es/glossary.json b/frontend/src/i18n/locales/es/glossary.json index 79c2b0a2c32..9856b221811 100644 --- a/frontend/src/i18n/locales/es/glossary.json +++ b/frontend/src/i18n/locales/es/glossary.json @@ -62,8 +62,8 @@ "Endpoints": "Endpoints", "Horizontal Pod Autoscalers": "Horizontal Pod Autoscalers", "Ingress Classes": "Ingress Classes", - "Controller": "Controller", "Default Ingress Class": "Default Ingress Class", + "Controller": "Controller", "Default Backend": "Backend por defecto", "Class Name": "Class Name", "Rules": "Reglas", diff --git a/frontend/src/i18n/locales/es/translation.json b/frontend/src/i18n/locales/es/translation.json index 2150d464c9c..03970791fbd 100644 --- a/frontend/src/i18n/locales/es/translation.json +++ b/frontend/src/i18n/locales/es/translation.json @@ -215,7 +215,6 @@ "Init Containers": "Contenedores de Inicialización", "Conditions": "Condiciones", "Volumes": "Volumenes", - "Change columns displayed": "Cambiar columnas mostradas", "Restarting {{ itemName }}…": "Reiniciando {{ itemName }}…", "Cancelled restarting {{ itemName }}.": "Se ha cancelado el reinicio de {{ itemName }}.", "Restarted {{ itemName }}.": "Se ha reiniciado {{ itemName }}.", diff --git a/frontend/src/i18n/locales/fr/glossary.json b/frontend/src/i18n/locales/fr/glossary.json index e3bbccaed33..79557830a63 100644 --- a/frontend/src/i18n/locales/fr/glossary.json +++ b/frontend/src/i18n/locales/fr/glossary.json @@ -62,8 +62,8 @@ "Endpoints": "Endpoints", "Horizontal Pod Autoscalers": "Horizontal Pod Autoscalers", "Ingress Classes": "Ingress Classes", - "Controller": "Controller", "Default Ingress Class": "Default Ingress Class", + "Controller": "Controller", "Default Backend": "Backend par défaut", "Class Name": "Nom de la classe", "Rules": "Règles", diff --git a/frontend/src/i18n/locales/fr/translation.json b/frontend/src/i18n/locales/fr/translation.json index 55fba5bf7f2..4fc00184664 100644 --- a/frontend/src/i18n/locales/fr/translation.json +++ b/frontend/src/i18n/locales/fr/translation.json @@ -215,7 +215,6 @@ "Init Containers": "Conteneurs d'initialisation", "Conditions": "Conditions", "Volumes": "Volumes", - "Change columns displayed": "Modifier les colonnes affichées", "Restarting {{ itemName }}…": "Redémarrage de {{ itemName }}…", "Cancelled restarting {{ itemName }}.": "Redémarrage de {{ itemName }} annulé.", "Restarted {{ itemName }}.": "{{ itemName }} redémarré.", diff --git a/frontend/src/i18n/locales/pt/glossary.json b/frontend/src/i18n/locales/pt/glossary.json index 097a74bab15..f6fa730de3c 100644 --- a/frontend/src/i18n/locales/pt/glossary.json +++ b/frontend/src/i18n/locales/pt/glossary.json @@ -62,8 +62,8 @@ "Endpoints": "Endpoints", "Horizontal Pod Autoscalers": "Horizontal Pod Autoscalers", "Ingress Classes": "Ingress Classes", - "Controller": "Controller", "Default Ingress Class": "Default Ingress Class", + "Controller": "Controller", "Default Backend": "Backend Padrão", "Class Name": "Class Name", "Rules": "Regras", diff --git a/frontend/src/i18n/locales/pt/translation.json b/frontend/src/i18n/locales/pt/translation.json index 5549c6e2ef1..d5afaae8b6b 100644 --- a/frontend/src/i18n/locales/pt/translation.json +++ b/frontend/src/i18n/locales/pt/translation.json @@ -215,7 +215,6 @@ "Init Containers": "Containers de Inicialização", "Conditions": "Condições", "Volumes": "Volumes", - "Change columns displayed": "Alterar colunas mostradas", "Restarting {{ itemName }}…": "A reiniciar {{ itemName }}…", "Cancelled restarting {{ itemName }}.": "Cancelado o reinício de {{ itemName }}.", "Restarted {{ itemName }}.": "{{ itemName }} foi reiniciado.", diff --git a/frontend/src/plugin/registry.tsx b/frontend/src/plugin/registry.tsx index bf8fd37a018..36dcf3c9fa2 100644 --- a/frontend/src/plugin/registry.tsx +++ b/frontend/src/plugin/registry.tsx @@ -391,9 +391,12 @@ export function registerDetailsViewHeaderActionsProcessor( * if (id === 'headlamp-pods') { * columns.push({ * label: 'Init Containers', - * getter: (pod: Pod) => { + * // 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 ; }, });