diff --git a/app/docker/react/components/services.ts b/app/docker/react/components/services.ts index 76eeeb63b..d5abd06d4 100644 --- a/app/docker/react/components/services.ts +++ b/app/docker/react/components/services.ts @@ -31,6 +31,7 @@ const ngModule = angular 'isStackColumnVisible', 'onRefresh', 'titleIcon', + 'tableKey', ]) ); diff --git a/app/docker/views/services/services.html b/app/docker/views/services/services.html index fc1dcb9fd..e1a7b8a56 100644 --- a/app/docker/views/services/services.html +++ b/app/docker/views/services/services.html @@ -6,4 +6,5 @@ on-refresh="(getServices)" is-add-action-visible="true" is-stack-column-visible="true" + table-key="'services'" > diff --git a/app/portainer/views/stacks/edit/stack.html b/app/portainer/views/stacks/edit/stack.html index 2cdf107d3..caf7a4f92 100644 --- a/app/portainer/views/stacks/edit/stack.html +++ b/app/portainer/views/stacks/edit/stack.html @@ -241,7 +241,13 @@ environment="endpoint" > - + ( - tableKey, - 'name', - (set) => ({ - ...refreshableSettings(set), - ...hiddenColumnsSettings(set), - expanded: {}, - setExpanded(value) { - set({ expanded: value }); - }, - }) -); - export function ServicesDatatable({ titleIcon = Shuffle, dataset, isAddActionVisible, isStackColumnVisible, onRefresh, + tableKey, }: { dataset: Array | undefined; titleIcon?: IconProps['icon']; isAddActionVisible?: boolean; isStackColumnVisible?: boolean; onRefresh?(): void; + tableKey: string; }) { + // use a unique tableKey so that unrelated services datatables don't share state + const store = createPersistedStore( + tableKey, + 'name', + (set) => ({ + ...refreshableSettings(set), + ...hiddenColumnsSettings(set), + expanded: {}, + setExpanded(value) { + set({ expanded: value }); + }, + }) + ); + // useRef so that updating the parent filter doesn't cause a re-render const parentFilteredStatusRef = useRef>(new Map()); const environmentId = useEnvironmentId();