Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-02 20:35:25 +02:00
Code Issues Releases Activity

chore(deps): upgrade react-table to v8 [EE-4837] (#8245)

Browse source
This commit is contained in:
Chaim Lev-Ari 2023-05-02 13:42:16 +07:00 • committed by GitHub
parent f20d3e72b9
commit 757461d58b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
140 changed files with 1805 additions and 2872 deletions
Download patch file Download diff file Expand all files Collapse all files

15
app/react/edge/edge-devices/WaitingRoomView/Datatable/Datatable.tsx
View file

@ -1,4 +1,3 @@
import { useStore } from 'zustand';
import { Trash2 } from 'lucide-react';
import { Environment } from '@/react/portainer/environments/types';
@ -9,7 +8,7 @@ import { Datatable as GenericDatatable } from '@@/datatables';
import { Button } from '@@/buttons';
import { TextTip } from '@@/Tip/TextTip';
import { createPersistedStore } from '@@/datatables/types';
import { useSearchBarState } from '@@/datatables/SearchBar';
import { useTableState } from '@@/datatables/useTableState';
import { confirm } from '@@/modals/confirm';
import { buildConfirmButton } from '@@/modals/utils';
import { ModalType } from '@@/modals';
@ -28,20 +27,14 @@ export function Datatable() {
const associateMutation = useAssociateDeviceMutation();
const removeMutation = useDeleteEnvironmentsMutation();
const licenseOverused = useLicenseOverused();
const settings = useStore(settingsStore);
const [search, setSearch] = useSearchBarState(storageKey);
const tableState = useTableState(settingsStore, storageKey);
const { data: environments, totalCount, isLoading } = useEnvironments();
return (
<GenericDatatable
settingsManager={tableState}
columns={columns}
dataset={environments}
initialPageSize={settings.pageSize}
onPageSizeChange={settings.setPageSize}
initialSortBy={settings.sortBy}
onSortByChange={settings.setSortBy}
searchValue={search}
onSearchChange={setSearch}
title="Edge Devices Waiting Room"
emptyContentLabel="No Edge Devices found"
renderTableActions={(selectedRows) => (
@ -57,7 +50,7 @@ export function Datatable() {
<Button
onClick={() => handleAssociateDevice(selectedRows)}
disabled={selectedRows.length === 0}
disabled={selectedRows.length === 0 || licenseOverused}
>
Associate Device
</Button>

93
app/react/edge/edge-devices/WaitingRoomView/Datatable/columns.ts
View file

@ -1,76 +1,37 @@
import moment from 'moment';
import { CellProps, Column } from 'react-table';
import { createColumnHelper } from '@tanstack/react-table';
import { WaitingRoomEnvironment } from '../types';
export const columns: readonly Column<WaitingRoomEnvironment>[] = [
{
Header: 'Name',
accessor: (row) => row.Name,
const columnHelper = createColumnHelper<WaitingRoomEnvironment>();
export const columns = [
columnHelper.accessor('Name', {
header: 'Name',
id: 'name',
disableFilters: true,
Filter: () => null,
canHide: false,
sortType: 'string',
},
{
Header: 'Edge ID',
accessor: (row) => row.EdgeID,
}),
columnHelper.accessor('EdgeID', {
header: 'Edge ID',
id: 'edge-id',
disableFilters: true,
Filter: () => null,
canHide: false,
sortType: 'string',
},
{
Header: 'Edge Groups',
accessor: (row) => row.EdgeGroups || [],
Cell: ({ value }: CellProps<WaitingRoomEnvironment, string[]>) =>
value.join(', ') || '-',
}),
columnHelper.accessor((row) => row.EdgeGroups.join(', ') || '-', {
header: 'Edge Groups',
id: 'edge-groups',
disableFilters: true,
Filter: () => null,
canHide: false,
sortType: 'string',
},
{
Header: 'Group',
accessor: (row) => row.Group || '-',
}),
columnHelper.accessor((row) => row.Group || '-', {
header: 'Group',
id: 'group',
disableFilters: true,
Filter: () => null,
canHide: false,
sortType: 'string',
},
{
Header: 'Tags',
accessor: (row) => row.Tags || [],
Cell: ({ value }: CellProps<WaitingRoomEnvironment, string[]>) =>
value.join(', ') || '-',
}),
columnHelper.accessor((row) => row.Tags.join(', ') || '-', {
header: 'Tags',
id: 'tags',
disableFilters: true,
Filter: () => null,
canHide: false,
sortType: 'string',
},
{
Header: 'Last Check-in',
accessor: 'LastCheckInDate',
Cell: LastCheckinDateCell,
}),
columnHelper.accessor((row) => row.LastCheckInDate, {
header: 'Last Check-in',
id: 'last-check-in',
disableFilters: true,
Filter: () => null,
canHide: false,
sortType: 'string',
},
] as const;
function LastCheckinDateCell({
value,
}: CellProps<WaitingRoomEnvironment, number>) {
if (!value) {
return '-';
}
return moment(value * 1000).fromNow();
}
cell: ({ getValue }) => {
const value = getValue();
return value ? moment(value * 1000).fromNow() : '-';
},
}),
];