fix(stacks): show containers table [EE-5487] (#8935)

pull/5116/merge
Chaim Lev-Ari 2023-05-16 10:30:34 +07:00 committed by GitHub
parent e6984c5787
commit 23e3cdb193
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 52 additions and 47 deletions

View File

@ -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>
); );
} }