mirror of
https://github.com/portainer/portainer.git
synced 2025-07-25 08:19:40 +02:00
refactor(ui/datatables): migrate views to use datatable component [EE-4064] (#7609)
This commit is contained in:
parent
0f0513c684
commit
fe8e834dbf
90 changed files with 1714 additions and 2717 deletions
|
@ -0,0 +1,132 @@
|
|||
import { Plus, Trash2 } from 'react-feather';
|
||||
import { useRouter } from '@uirouter/react';
|
||||
import { useStore } from 'zustand';
|
||||
|
||||
import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
|
||||
import { useNamespaces } from '@/react/kubernetes/namespaces/queries';
|
||||
import { useAuthorizations, Authorized } from '@/react/hooks/useUser';
|
||||
import { confirmDeletionAsync } from '@/portainer/services/modal.service/confirm';
|
||||
|
||||
import { Datatable } from '@@/datatables';
|
||||
import { Button } from '@@/buttons';
|
||||
import { Link } from '@@/Link';
|
||||
import { createPersistedStore } from '@@/datatables/types';
|
||||
import { useSearchBarState } from '@@/datatables/SearchBar';
|
||||
|
||||
import { DeleteIngressesRequest, Ingress } from '../types';
|
||||
import { useDeleteIngresses, useIngresses } from '../queries';
|
||||
|
||||
import { useColumns } from './columns';
|
||||
|
||||
import '../style.css';
|
||||
|
||||
interface SelectedIngress {
|
||||
Namespace: string;
|
||||
Name: string;
|
||||
}
|
||||
const storageKey = 'ingressClassesNameSpace';
|
||||
|
||||
const settingsStore = createPersistedStore(storageKey);
|
||||
|
||||
export function IngressDatatable() {
|
||||
const environmentId = useEnvironmentId();
|
||||
|
||||
const nsResult = useNamespaces(environmentId);
|
||||
const ingressesQuery = useIngresses(
|
||||
environmentId,
|
||||
Object.keys(nsResult?.data || {})
|
||||
);
|
||||
|
||||
const columns = useColumns();
|
||||
const deleteIngressesMutation = useDeleteIngresses();
|
||||
const settings = useStore(settingsStore);
|
||||
const [search, setSearch] = useSearchBarState(storageKey);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<Datatable
|
||||
dataset={ingressesQuery.data || []}
|
||||
columns={columns}
|
||||
isLoading={ingressesQuery.isLoading}
|
||||
emptyContentLabel="No supported ingresses found"
|
||||
title="Ingresses"
|
||||
titleIcon="svg-route"
|
||||
getRowId={(row) => row.Name + row.Type + row.Namespace}
|
||||
renderTableActions={tableActions}
|
||||
disableSelect={useCheckboxes()}
|
||||
initialPageSize={settings.pageSize}
|
||||
onPageSizeChange={settings.setPageSize}
|
||||
initialSortBy={settings.sortBy}
|
||||
onSortByChange={settings.setSortBy}
|
||||
searchValue={search}
|
||||
onSearchChange={setSearch}
|
||||
/>
|
||||
);
|
||||
|
||||
function tableActions(selectedFlatRows: Ingress[]) {
|
||||
return (
|
||||
<div className="ingressDatatable-actions">
|
||||
<Authorized authorizations="AzureContainerGroupDelete">
|
||||
<Button
|
||||
className="btn-wrapper"
|
||||
color="dangerlight"
|
||||
disabled={selectedFlatRows.length === 0}
|
||||
onClick={() => handleRemoveClick(selectedFlatRows)}
|
||||
icon={Trash2}
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
</Authorized>
|
||||
|
||||
<Authorized authorizations="K8sIngressesW">
|
||||
<Link to="kubernetes.ingresses.create" className="space-left">
|
||||
<Button
|
||||
icon={Plus}
|
||||
className="btn-wrapper vertical-center"
|
||||
color="secondary"
|
||||
>
|
||||
Add with form
|
||||
</Button>
|
||||
</Link>
|
||||
</Authorized>
|
||||
<Authorized authorizations="K8sIngressesW">
|
||||
<Link to="kubernetes.deploy" className="space-left">
|
||||
<Button icon={Plus} className="btn-wrapper">
|
||||
Create from manifest
|
||||
</Button>
|
||||
</Link>
|
||||
</Authorized>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function useCheckboxes() {
|
||||
return !useAuthorizations(['K8sIngressesW']);
|
||||
}
|
||||
|
||||
async function handleRemoveClick(ingresses: SelectedIngress[]) {
|
||||
const confirmed = await confirmDeletionAsync(
|
||||
'Are you sure you want to delete the selected ingresses?'
|
||||
);
|
||||
if (!confirmed) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const payload: DeleteIngressesRequest = {} as DeleteIngressesRequest;
|
||||
ingresses.forEach((ingress) => {
|
||||
payload[ingress.Namespace] = payload[ingress.Namespace] || [];
|
||||
payload[ingress.Namespace].push(ingress.Name);
|
||||
});
|
||||
|
||||
deleteIngressesMutation.mutate(
|
||||
{ environmentId, data: payload },
|
||||
{
|
||||
onSuccess: () => {
|
||||
router.stateService.reload();
|
||||
},
|
||||
}
|
||||
);
|
||||
return ingresses;
|
||||
}
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue