diff --git a/app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.js b/app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.js index 28f63b8c8..63fb3aacc 100644 --- a/app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.js +++ b/app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.js @@ -20,6 +20,7 @@ angular.module('portainer.kubernetes').component('kubernetesApplicationsDatatabl onChangeNamespaceDropdown: '<', isAppsLoading: '<', isSystemResources: '<', + isVisible: '<', setSystemResources: '<', hideStacksFunctionality: '<', }, diff --git a/app/kubernetes/components/datatables/applications-datatable/applicationsDatatableController.js b/app/kubernetes/components/datatables/applications-datatable/applicationsDatatableController.js index cfebc8b06..d80b951fe 100644 --- a/app/kubernetes/components/datatables/applications-datatable/applicationsDatatableController.js +++ b/app/kubernetes/components/datatables/applications-datatable/applicationsDatatableController.js @@ -4,7 +4,7 @@ import KubernetesApplicationHelper from 'Kubernetes/helpers/application'; import KubernetesNamespaceHelper from 'Kubernetes/helpers/namespaceHelper'; import { KubernetesConfigurationKinds } from 'Kubernetes/models/configuration/models'; -angular.module('portainer.docker').controller('KubernetesApplicationsDatatableController', [ +angular.module('portainer.kubernetes').controller('KubernetesApplicationsDatatableController', [ '$scope', '$controller', 'DatatableService', @@ -175,8 +175,15 @@ angular.module('portainer.docker').controller('KubernetesApplicationsDatatableCo } }; - this.$onChanges = function () { - if (typeof this.isSystemResources !== 'undefined') { + this.$onChanges = function (changes) { + // when the table is visible, sync the show system setting with the stack show system setting + if (changes.isVisible && changes.isVisible.currentValue) { + const storedStacksSettings = DatatableService.getDataTableSettings('kubernetes.applications.stacks'); + if (storedStacksSettings && storedStacksSettings.state) { + this.settings.showSystem = storedStacksSettings.state.showSystemResources; + DatatableService.setDataTableSettings(this.settingsKey, this.settings); + } + } else if (typeof this.isSystemResources !== 'undefined') { this.settings.showSystem = this.isSystemResources; DatatableService.setDataTableSettings(this.settingsKey, this.settings); } @@ -223,6 +230,12 @@ angular.module('portainer.docker').controller('KubernetesApplicationsDatatableCo this.settings = storedSettings; this.settings.open = false; + // make show system in sync with the stack show system settings + const storedStacksSettings = DatatableService.getDataTableSettings('kubernetes.applications.stacks'); + if (storedStacksSettings && storedStacksSettings.state) { + this.settings.showSystem = storedStacksSettings.state.showSystemResources; + } + this.setSystemResources && this.setSystemResources(this.settings.showSystem); } this.settingsLoaded = true; diff --git a/app/kubernetes/react/components/index.ts b/app/kubernetes/react/components/index.ts index 2d8befbc7..c433c0770 100644 --- a/app/kubernetes/react/components/index.ts +++ b/app/kubernetes/react/components/index.ts @@ -160,6 +160,8 @@ export const ngModule = angular 'namespaces', 'onNamespaceChange', 'isLoading', + 'showSystem', + 'setSystemResources', ]) ); diff --git a/app/kubernetes/views/applications/applications.html b/app/kubernetes/views/applications/applications.html index 6921b662f..b8935f2b9 100644 --- a/app/kubernetes/views/applications/applications.html +++ b/app/kubernetes/views/applications/applications.html @@ -24,6 +24,7 @@ on-change-namespace-dropdown="(ctrl.onChangeNamespaceDropdown)" is-apps-loading="ctrl.state.isAppsLoading" is-system-resources="ctrl.state.isSystemResources" + is-visible="ctrl.state.activeTab === 0" set-system-resources="(ctrl.setSystemResources)" hide-stacks-functionality="ctrl.deploymentOptions.hideStacksFunctionality" > @@ -40,6 +41,8 @@ namespace="ctrl.state.namespaceName" is-loading="ctrl.state.isAppsLoading" on-namespace-change="(ctrl.onChangeNamespaceDropdown)" + show-system="ctrl.state.isSystemResources" + set-system-resources="(ctrl.setSystemResources)" > diff --git a/app/react/components/datatables/types.ts b/app/react/components/datatables/types.ts index c3fdb440e..056481921 100644 --- a/app/react/components/datatables/types.ts +++ b/app/react/components/datatables/types.ts @@ -95,7 +95,7 @@ export function createPersistedStore( ...create(set), }) as T, { - name: `datatable_settings_${keyBuilder(storageKey)}`, + name: keyBuilder(`datatable_settings_${storageKey}`), } ) ); diff --git a/app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/ApplicationsStacksDatatable.tsx b/app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/ApplicationsStacksDatatable.tsx index 730abfdd2..682b31024 100644 --- a/app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/ApplicationsStacksDatatable.tsx +++ b/app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/ApplicationsStacksDatatable.tsx @@ -1,11 +1,11 @@ import { List } from 'lucide-react'; +import { useEffect } from 'react'; import { useAuthorizations } from '@/react/hooks/useUser'; import { SystemResourceDescription } from '@/react/kubernetes/datatables/SystemResourceDescription'; -import { systemResourcesSettings } from '@/react/kubernetes/datatables/SystemResourcesSettings'; +import { createStore } from '@/react/kubernetes/datatables/default-kube-datatable-store'; import { ExpandableDatatable } from '@@/datatables/ExpandableDatatable'; -import { createPersistedStore, refreshableSettings } from '@@/datatables/types'; import { useRepeater } from '@@/datatables/useRepeater'; import { useTableState } from '@@/datatables/useTableState'; import { InsightsBox } from '@@/InsightsBox'; @@ -14,21 +14,14 @@ import { KubernetesStack } from '../../types'; import { columns } from './columns'; import { SubRows } from './SubRows'; -import { Namespace, TableSettings } from './types'; +import { Namespace } from './types'; import { StacksSettingsMenu } from './StacksSettingsMenu'; import { NamespaceFilter } from './NamespaceFilter'; import { TableActions } from './TableActions'; const storageKey = 'kubernetes.applications.stacks'; -const settingsStore = createPersistedStore( - storageKey, - 'name', - (set) => ({ - ...systemResourcesSettings(set), - ...refreshableSettings(set), - }) -); +const settingsStore = createStore(storageKey); interface Props { dataset: Array; @@ -38,6 +31,8 @@ interface Props { namespaces: Array; onNamespaceChange(namespace: string): void; isLoading?: boolean; + showSystem?: boolean; + setSystemResources(showSystem: boolean): void; } export function ApplicationsStacksDatatable({ @@ -48,9 +43,16 @@ export function ApplicationsStacksDatatable({ namespaces, onNamespaceChange, isLoading, + showSystem, + setSystemResources, }: Props) { const tableState = useTableState(settingsStore, storageKey); + useEffect(() => { + tableState.setShowSystemResources(showSystem || false); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [showSystem]); + const authorized = useAuthorizations('K8sApplicationsW'); useRepeater(tableState.autoRefreshRate, onRefresh); @@ -98,7 +100,12 @@ export function ApplicationsStacksDatatable({ renderTableActions={(selectedItems) => ( )} - renderTableSettings={() => } + renderTableSettings={() => ( + + )} getRowId={(row) => `${row.Name}-${row.ResourcePool}`} /> ); diff --git a/app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/StacksSettingsMenu.tsx b/app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/StacksSettingsMenu.tsx index 179caaded..f33ea2815 100644 --- a/app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/StacksSettingsMenu.tsx +++ b/app/react/kubernetes/applications/ListView/ApplicationsStacksDatatable/StacksSettingsMenu.tsx @@ -5,12 +5,21 @@ import { TableSettingsMenuAutoRefresh } from '@@/datatables/TableSettingsMenuAut import { type TableSettings } from './types'; -export function StacksSettingsMenu({ settings }: { settings: TableSettings }) { +export function StacksSettingsMenu({ + settings, + setSystemResources, +}: { + settings: TableSettings; + setSystemResources(showSystem: boolean): void; +}) { return ( settings.setShowSystemResources(value)} + onChange={(value) => { + setSystemResources(value); + settings.setShowSystemResources(value); + }} />