2022-11-28 02:00:28 +00:00
|
|
|
import { Box, Plus, Trash2 } from 'lucide-react';
|
2022-11-22 12:16:34 +00:00
|
|
|
import { useStore } from 'zustand';
|
2022-07-26 19:44:08 +00:00
|
|
|
|
|
|
|
import { ContainerGroup } from '@/react/azure/types';
|
2022-11-13 08:10:18 +00:00
|
|
|
import { Authorized } from '@/react/hooks/useUser';
|
2022-07-26 19:44:08 +00:00
|
|
|
|
2023-02-14 08:19:41 +00:00
|
|
|
import { confirmDelete } from '@@/modals/confirm';
|
2022-11-22 12:16:34 +00:00
|
|
|
import { Datatable } from '@@/datatables';
|
2022-07-26 19:44:08 +00:00
|
|
|
import { Button } from '@@/buttons';
|
|
|
|
import { Link } from '@@/Link';
|
2022-11-22 12:16:34 +00:00
|
|
|
import { createPersistedStore } from '@@/datatables/types';
|
|
|
|
import { useSearchBarState } from '@@/datatables/SearchBar';
|
2022-07-26 19:44:08 +00:00
|
|
|
|
2022-11-22 12:16:34 +00:00
|
|
|
import { columns } from './columns';
|
2022-07-26 19:44:08 +00:00
|
|
|
|
2022-11-22 12:16:34 +00:00
|
|
|
const tableKey = 'containergroups';
|
|
|
|
|
|
|
|
const settingsStore = createPersistedStore(tableKey, 'name');
|
2022-07-26 19:44:08 +00:00
|
|
|
export interface Props {
|
|
|
|
dataset: ContainerGroup[];
|
|
|
|
onRemoveClick(containerIds: string[]): void;
|
|
|
|
}
|
|
|
|
|
2022-11-22 12:16:34 +00:00
|
|
|
export function ContainersDatatable({ dataset, onRemoveClick }: Props) {
|
|
|
|
const settings = useStore(settingsStore);
|
|
|
|
const [search, setSearch] = useSearchBarState(tableKey);
|
2022-07-26 19:44:08 +00:00
|
|
|
|
|
|
|
return (
|
2022-11-22 12:16:34 +00:00
|
|
|
<Datatable
|
|
|
|
dataset={dataset}
|
|
|
|
columns={columns}
|
|
|
|
initialPageSize={settings.pageSize}
|
|
|
|
onPageSizeChange={settings.setPageSize}
|
|
|
|
initialSortBy={settings.sortBy}
|
|
|
|
onSortByChange={settings.setSortBy}
|
|
|
|
searchValue={search}
|
|
|
|
onSearchChange={setSearch}
|
|
|
|
title="Containers"
|
|
|
|
titleIcon={Box}
|
|
|
|
getRowId={(container) => container.id}
|
|
|
|
emptyContentLabel="No container available."
|
|
|
|
renderTableActions={(selectedRows) => (
|
|
|
|
<>
|
|
|
|
<Authorized authorizations="AzureContainerGroupDelete">
|
|
|
|
<Button
|
|
|
|
color="dangerlight"
|
|
|
|
disabled={selectedRows.length === 0}
|
|
|
|
onClick={() => handleRemoveClick(selectedRows.map((r) => r.id))}
|
|
|
|
icon={Trash2}
|
2022-07-26 19:44:08 +00:00
|
|
|
>
|
2022-11-22 12:16:34 +00:00
|
|
|
Remove
|
|
|
|
</Button>
|
|
|
|
</Authorized>
|
|
|
|
|
|
|
|
<Authorized authorizations="AzureContainerGroupCreate">
|
|
|
|
<Link to="azure.containerinstances.new" className="space-left">
|
|
|
|
<Button icon={Plus}>Add container</Button>
|
|
|
|
</Link>
|
|
|
|
</Authorized>
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
/>
|
2022-07-26 19:44:08 +00:00
|
|
|
);
|
|
|
|
|
|
|
|
async function handleRemoveClick(containerIds: string[]) {
|
2023-02-14 08:19:41 +00:00
|
|
|
const confirmed = await confirmDelete(
|
2022-07-26 19:44:08 +00:00
|
|
|
'Are you sure you want to delete the selected containers?'
|
|
|
|
);
|
|
|
|
if (!confirmed) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
return onRemoveClick(containerIds);
|
|
|
|
}
|
|
|
|
}
|