mirror of https://github.com/portainer/portainer
fix(stacks): show containers table [EE-5487] (#8935)
parent
e6984c5787
commit
23e3cdb193
|
@ -18,6 +18,7 @@ import { TableSettingsProvider } from '@@/datatables/useTableSettings';
|
||||||
import { useTableState } from '@@/datatables/useTableState';
|
import { useTableState } from '@@/datatables/useTableState';
|
||||||
|
|
||||||
import { useContainers } from '../../containers/queries/containers';
|
import { useContainers } from '../../containers/queries/containers';
|
||||||
|
import { RowProvider } from '../../containers/ListView/ContainersDatatable/RowContext';
|
||||||
|
|
||||||
const storageKey = 'stack-containers';
|
const storageKey = 'stack-containers';
|
||||||
const settingsStore = createStore(storageKey);
|
const settingsStore = createStore(storageKey);
|
||||||
|
@ -51,53 +52,57 @@ export function StackContainersDatatable({ environment, stackName }: Props) {
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TableSettingsProvider settings={settingsStore}>
|
<RowProvider context={{ environment }}>
|
||||||
<Datatable
|
<TableSettingsProvider settings={settingsStore}>
|
||||||
title="Containers"
|
<Datatable
|
||||||
titleIcon={Box}
|
title="Containers"
|
||||||
settingsManager={tableState}
|
titleIcon={Box}
|
||||||
columns={columns}
|
settingsManager={tableState}
|
||||||
renderTableActions={(selectedRows) => (
|
columns={columns}
|
||||||
<ContainersDatatableActions
|
renderTableActions={(selectedRows) => (
|
||||||
selectedItems={selectedRows}
|
<ContainersDatatableActions
|
||||||
isAddActionVisible={false}
|
selectedItems={selectedRows}
|
||||||
endpointId={environment.Id}
|
isAddActionVisible={false}
|
||||||
/>
|
endpointId={environment.Id}
|
||||||
)}
|
/>
|
||||||
initialTableState={{
|
)}
|
||||||
columnVisibility: Object.fromEntries(
|
initialTableState={{
|
||||||
tableState.hiddenColumns.map((col) => [col, false])
|
columnVisibility: Object.fromEntries(
|
||||||
),
|
tableState.hiddenColumns.map((col) => [col, false])
|
||||||
}}
|
),
|
||||||
renderTableSettings={(tableInstance) => {
|
}}
|
||||||
const columnsToHide = tableInstance
|
renderTableSettings={(tableInstance) => {
|
||||||
.getAllColumns()
|
const columnsToHide = tableInstance
|
||||||
.filter((col) => col.getCanHide());
|
.getAllColumns()
|
||||||
|
.filter((col) => col.getCanHide());
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ColumnVisibilityMenu<DockerContainer>
|
<ColumnVisibilityMenu<DockerContainer>
|
||||||
columns={columnsToHide}
|
columns={columnsToHide}
|
||||||
onChange={(hiddenColumns) => {
|
onChange={(hiddenColumns) => {
|
||||||
tableState.setHiddenColumns(hiddenColumns);
|
tableState.setHiddenColumns(hiddenColumns);
|
||||||
tableInstance.setColumnVisibility(
|
tableInstance.setColumnVisibility(
|
||||||
Object.fromEntries(hiddenColumns.map((col) => [col, false]))
|
Object.fromEntries(
|
||||||
);
|
hiddenColumns.map((col) => [col, false])
|
||||||
}}
|
)
|
||||||
value={tableState.hiddenColumns}
|
);
|
||||||
/>
|
}}
|
||||||
<Table.SettingsMenu
|
value={tableState.hiddenColumns}
|
||||||
quickActions={<QuickActionsSettings actions={actions} />}
|
/>
|
||||||
>
|
<Table.SettingsMenu
|
||||||
<ContainersDatatableSettings settings={tableState} />
|
quickActions={<QuickActionsSettings actions={actions} />}
|
||||||
</Table.SettingsMenu>
|
>
|
||||||
</>
|
<ContainersDatatableSettings settings={tableState} />
|
||||||
);
|
</Table.SettingsMenu>
|
||||||
}}
|
</>
|
||||||
dataset={containersQuery.data || []}
|
);
|
||||||
isLoading={containersQuery.isLoading}
|
}}
|
||||||
emptyContentLabel="No containers found"
|
dataset={containersQuery.data || []}
|
||||||
/>
|
isLoading={containersQuery.isLoading}
|
||||||
</TableSettingsProvider>
|
emptyContentLabel="No containers found"
|
||||||
|
/>
|
||||||
|
</TableSettingsProvider>
|
||||||
|
</RowProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue