/
useConnectedInstancesTable.tsx
97 lines (92 loc) · 2.58 KB
/
useConnectedInstancesTable.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import { useMemo } from 'react';
import { IApiToken } from 'hooks/api/getters/useApiTokens/useApiTokens';
import { DateCell } from 'component/common/Table/cells/DateCell/DateCell';
import { HighlightCell } from 'component/common/Table/cells/HighlightCell/HighlightCell';
import { IconCell } from 'component/common/Table/cells/IconCell/IconCell';
import { TimeAgoCell } from 'component/common/Table/cells/TimeAgoCell/TimeAgoCell';
import { useTable, useGlobalFilter, useSortBy } from 'react-table';
import { sortTypes } from 'utils/sortTypes';
import { ProjectsList } from 'component/admin/apiToken/ProjectsList/ProjectsList';
import { Key } from '@mui/icons-material';
type ConnectedInstancesTableData = {
instanceId: string;
ip: string;
sdkVersion: string;
lastSeen: string;
};
export const useConnectedInstancesTable = (
instanceData: ConnectedInstancesTableData[],
) => {
const initialState = useMemo(
() => ({ sortBy: [{ id: 'instanceId' }] }),
[],
);
const COLUMNS = useMemo(() => {
return [
{
Header: 'Instances',
accessor: 'instanceId',
Cell: HighlightCell,
styles: {
width: '45%',
},
},
{
Header: 'SDK',
accessor: 'sdkVersion',
Cell: HighlightCell,
styles: {
width: '20%',
},
},
{
Header: 'Last seen',
accessor: 'lastSeen',
Cell: HighlightCell,
styles: {
width: '20%',
},
},
{
Header: 'IP',
accessor: 'ip',
Cell: HighlightCell,
styles: {
width: '15%',
},
},
];
}, []);
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
state,
setGlobalFilter,
setHiddenColumns,
} = useTable(
{
columns: COLUMNS as any,
data: instanceData as any,
initialState,
sortTypes,
autoResetHiddenColumns: false,
disableSortRemove: true,
},
useGlobalFilter,
useSortBy,
);
return {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
state,
setGlobalFilter,
setHiddenColumns,
columns: COLUMNS,
};
};