diff --git a/app/react/components/Badge/ExternalBadge.tsx b/app/react/components/Badge/ExternalBadge.tsx index cba18f3f1..5cf85b844 100644 --- a/app/react/components/Badge/ExternalBadge.tsx +++ b/app/react/components/Badge/ExternalBadge.tsx @@ -1,5 +1,5 @@ import { Badge } from '@@/Badge'; export function ExternalBadge() { - return external; + return External; } diff --git a/app/react/kubernetes/cluster/NodeView/NodeApplicationsDatatable/NodeApplicationsDatatable.tsx b/app/react/kubernetes/cluster/NodeView/NodeApplicationsDatatable/NodeApplicationsDatatable.tsx index f33154a8c..eb1443334 100644 --- a/app/react/kubernetes/cluster/NodeView/NodeApplicationsDatatable/NodeApplicationsDatatable.tsx +++ b/app/react/kubernetes/cluster/NodeView/NodeApplicationsDatatable/NodeApplicationsDatatable.tsx @@ -24,7 +24,6 @@ export function NodeApplicationsDatatable({ onRefresh: () => void; isLoading: boolean; }) { - const columns = useColumns(true); const tableState = useTableStateWithStorage( 'kube-node-apps', 'Name', @@ -34,6 +33,8 @@ export function NodeApplicationsDatatable({ ); useRepeater(tableState.autoRefreshRate, onRefresh); + const columns = useColumns(); + return ( ({ + select: (settings) => + settings.GlobalDeploymentOptions.hideStacksFunctionality, + }); + return useMemo( () => _.compact([ name, - areStacksVisible && + !hideStacksQuery.data && helper.accessor('StackName', { header: 'Stack', cell: ({ getValue }) => getValue() || '-', @@ -53,6 +59,6 @@ export function useColumns(areStacksVisible: boolean) { cell: ({ getValue }) => humanize(getValue()), }), ]), - [areStacksVisible] + [hideStacksQuery.data] ); } diff --git a/app/react/kubernetes/namespaces/ItemView/NamespaceAppsDatatable.tsx b/app/react/kubernetes/namespaces/ItemView/NamespaceAppsDatatable.tsx index 060b527df..e0805c1de 100644 --- a/app/react/kubernetes/namespaces/ItemView/NamespaceAppsDatatable.tsx +++ b/app/react/kubernetes/namespaces/ItemView/NamespaceAppsDatatable.tsx @@ -11,7 +11,7 @@ import { } from '@@/datatables/types'; import { NamespaceApp } from './types'; -import { columns } from './columns'; +import { useColumns } from './columns'; interface TableSettings extends BasicTableSettings, RefreshableTableSettings {} @@ -32,6 +32,7 @@ export function NamespaceAppsDatatable({ }) ); useRepeater(tableState.autoRefreshRate, onRefresh); + const columns = useColumns(); return ( (); -export const columns = [ - columnHelper.accessor('Name', { - header: 'Name', - cell: ({ row: { original: item } }) => ( - <> - - {item.Name} - - {isExternalApplication({ metadata: item.Metadata }) && ( -
- -
- )} - - ), - }), - columnHelper.accessor('StackName', { - header: 'Stack', - cell: ({ getValue }) => getValue() || '-', - }), - columnHelper.accessor('Image', { - header: 'Image', - cell: ({ row: { original: item } }) => ( - <> - {truncate(item.Image, 64)} - {item.Containers?.length > 1 && <>+ {item.Containers.length - 1}} - - ), - }), - columnHelper.accessor('CPU', { - header: 'CPU', - cell: ({ getValue }) => cpuHumanValue(getValue()), - }), - columnHelper.accessor('Memory', { - header: 'Memory', - cell: ({ getValue }) => humanize(getValue()), - }), -]; +export function useColumns() { + const hideStacksQuery = usePublicSettings({ + select: (settings) => + settings.GlobalDeploymentOptions.hideStacksFunctionality, + }); + + return useMemo( + () => + _.compact([ + columnHelper.accessor('Name', { + header: 'Name', + cell: ({ row: { original: item } }) => ( + <> + + {item.Name} + + {isExternalApplication({ metadata: item.Metadata }) && ( +
+ +
+ )} + + ), + }), + !hideStacksQuery.data && + columnHelper.accessor('StackName', { + header: 'Stack', + cell: ({ getValue }) => getValue() || '-', + }), + columnHelper.accessor('Image', { + header: 'Image', + cell: ({ row: { original: item } }) => ( + <> + {truncate(item.Image, 64)} + {item.Containers?.length > 1 && ( + <>+ {item.Containers.length - 1} + )} + + ), + }), + columnHelper.accessor('CPU', { + header: 'CPU', + cell: ({ getValue }) => cpuHumanValue(getValue()), + }), + columnHelper.accessor('Memory', { + header: 'Memory', + cell: ({ getValue }) => humanize(getValue()), + }), + ]), + [hideStacksQuery.data] + ); +}