gitscope
/
← marzneshin / app/dashboard/src/pages/hosts/table/index.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
app/dashboard/src/pages/hosts/table/index.tsx · v0.2.0
Source
1 6aab6f0 Mrdn 2y ago import {
2 6aab6f0 Mrdn 2y ago Box,
3 6aab6f0 Mrdn 2y ago HStack,
4 6aab6f0 Mrdn 2y ago Table,
5 6aab6f0 Mrdn 2y ago TableProps,
6 6aab6f0 Mrdn 2y ago Tbody,
7 6aab6f0 Mrdn 2y ago Td,
8 6aab6f0 Mrdn 2y ago Th,
9 6aab6f0 Mrdn 2y ago Thead,
10 6aab6f0 Mrdn 2y ago Tr,
11 6aab6f0 Mrdn 2y ago } from '@chakra-ui/react';
12 6aab6f0 Mrdn 2y ago import classNames from 'classnames';
13 8d27a8d Mrdn 2y ago import { FC } from 'react';
14 6aab6f0 Mrdn 2y ago import { useTranslation } from 'react-i18next';
15 6aab6f0 Mrdn 2y ago import {
16 6aab6f0 Mrdn 2y ago EmptySection,
17 6aab6f0 Mrdn 2y ago Sort,
18 6aab6f0 Mrdn 2y ago handleSort,
19 6aab6f0 Mrdn 2y ago } from 'components/table';
20 16e5ea1 Mrdn 2y ago import { useInbounds, HostType } from 'stores';
21 6aab6f0 Mrdn 2y ago
22 6aab6f0 Mrdn 2y ago
23 16e5ea1 Mrdn 2y ago type NodesTableProps = {
24 16e5ea1 Mrdn 2y ago hosts: HostType[];
25 16e5ea1 Mrdn 2y ago } & TableProps;
26 6aab6f0 Mrdn 2y ago
27 16e5ea1 Mrdn 2y ago export const HostsTable: FC<NodesTableProps> = ({ hosts }) => {
28 6aab6f0 Mrdn 2y ago const {
29 6aab6f0 Mrdn 2y ago hostsFilters: filters,
30 16e5ea1 Mrdn 2y ago onHostsFilterChange,
31 6aab6f0 Mrdn 2y ago onEditingHost,
32 6aab6f0 Mrdn 2y ago } = useInbounds();
33 6aab6f0 Mrdn 2y ago
34 6aab6f0 Mrdn 2y ago const { t } = useTranslation();
35 6aab6f0 Mrdn 2y ago
36 6aab6f0 Mrdn 2y ago return (
37 8d27a8d Mrdn 2y ago <Box id="hosts-table" h="full" overflowX={{ base: 'unset', md: 'unset' }} >
38 6aab6f0 Mrdn 2y ago <Table
39 6aab6f0 Mrdn 2y ago orientation="vertical"
40 6aab6f0 Mrdn 2y ago >
41 6aab6f0 Mrdn 2y ago <Thead zIndex="docked" position="relative">
42 6aab6f0 Mrdn 2y ago <Tr>
43 6aab6f0 Mrdn 2y ago <Th
44 6aab6f0 Mrdn 2y ago minW="120px"
45 6aab6f0 Mrdn 2y ago pl={4}
46 6aab6f0 Mrdn 2y ago pr={4}
47 6aab6f0 Mrdn 2y ago cursor={'pointer'}
48 6aab6f0 Mrdn 2y ago onClick={handleSort.bind(null, filters, 'remark', onHostsFilterChange)}
49 6aab6f0 Mrdn 2y ago >
50 6aab6f0 Mrdn 2y ago <HStack>
51 6aab6f0 Mrdn 2y ago <span>{t('remark')}</span>
52 6aab6f0 Mrdn 2y ago <Sort sort={filters.sort} column="remark" />
53 6aab6f0 Mrdn 2y ago </HStack>
54 6aab6f0 Mrdn 2y ago </Th>
55 6aab6f0 Mrdn 2y ago <Th
56 6aab6f0 Mrdn 2y ago minW="100px"
57 6aab6f0 Mrdn 2y ago cursor={'pointer'}
58 6aab6f0 Mrdn 2y ago pr={0}
59 6aab6f0 Mrdn 2y ago onClick={handleSort.bind(null, filters, 'address', onHostsFilterChange)}
60 6aab6f0 Mrdn 2y ago >
61 6aab6f0 Mrdn 2y ago <HStack>
62 6aab6f0 Mrdn 2y ago <span>{t('hostsTable.address')}</span>
63 6aab6f0 Mrdn 2y ago <Sort sort={filters.sort} column="address" />
64 6aab6f0 Mrdn 2y ago </HStack>
65 6aab6f0 Mrdn 2y ago </Th>
66 6aab6f0 Mrdn 2y ago <Th
67 6aab6f0 Mrdn 2y ago minW="100px"
68 6aab6f0 Mrdn 2y ago cursor={'pointer'}
69 6aab6f0 Mrdn 2y ago pr={0}
70 6aab6f0 Mrdn 2y ago onClick={handleSort.bind(null, filters, 'port', onHostsFilterChange)}
71 6aab6f0 Mrdn 2y ago >
72 6aab6f0 Mrdn 2y ago <HStack>
73 6aab6f0 Mrdn 2y ago <span>{t('hostsTable.port')}</span>
74 6aab6f0 Mrdn 2y ago <Sort sort={filters.sort} column="port" />
75 6aab6f0 Mrdn 2y ago </HStack>
76 6aab6f0 Mrdn 2y ago </Th>
77 6aab6f0 Mrdn 2y ago </Tr>
78 6aab6f0 Mrdn 2y ago </Thead>
79 6aab6f0 Mrdn 2y ago <Tbody overflowY="auto">
80 16e5ea1 Mrdn 2y ago {hosts?.map((host, i) => {
81 6aab6f0 Mrdn 2y ago return (
82 6aab6f0 Mrdn 2y ago <Tr
83 6aab6f0 Mrdn 2y ago key={i}
84 6aab6f0 Mrdn 2y ago className={classNames('interactive', {
85 6aab6f0 Mrdn 2y ago 'last-row': i === hosts.length - 1,
86 6aab6f0 Mrdn 2y ago })}
87 6aab6f0 Mrdn 2y ago onClick={() => onEditingHost(true, host)}
88 6aab6f0 Mrdn 2y ago >
89 6aab6f0 Mrdn 2y ago <Td minW="140px">
90 6aab6f0 Mrdn 2y ago <div className="flex-status">
91 6aab6f0 Mrdn 2y ago {host.remark}
92 6aab6f0 Mrdn 2y ago </div>
93 6aab6f0 Mrdn 2y ago </Td>
94 6aab6f0 Mrdn 2y ago <Td width="400px" minW="150px">
95 6aab6f0 Mrdn 2y ago {host.address}
96 6aab6f0 Mrdn 2y ago </Td>
97 6aab6f0 Mrdn 2y ago <Td width="350px" minW="150px">
98 6aab6f0 Mrdn 2y ago {host.port}
99 6aab6f0 Mrdn 2y ago </Td>
100 6aab6f0 Mrdn 2y ago </Tr>
101 6aab6f0 Mrdn 2y ago );
102 6aab6f0 Mrdn 2y ago })}
103 6aab6f0 Mrdn 2y ago {(hosts?.length === 0 || hosts === undefined) && (
104 6aab6f0 Mrdn 2y ago <Tr>
105 6aab6f0 Mrdn 2y ago <Td colSpan={5}>
106 6aab6f0 Mrdn 2y ago <EmptySection
107 6aab6f0 Mrdn 2y ago isFiltered={/* isFiltered */ false}
108 6aab6f0 Mrdn 2y ago noObjectT="hostsTable.noHost"
109 6aab6f0 Mrdn 2y ago noObjectMatchedT='hostsTable.noHostMatched'
110 8d3056a Mrdn 2y ago createObjectT="hostsTable.createHosts"
111 6aab6f0 Mrdn 2y ago />
112 6aab6f0 Mrdn 2y ago </Td>
113 6aab6f0 Mrdn 2y ago </Tr>
114 6aab6f0 Mrdn 2y ago )}
115 6aab6f0 Mrdn 2y ago </Tbody>
116 6aab6f0 Mrdn 2y ago </Table>
117 6aab6f0 Mrdn 2y ago {/* TODO:
118 6aab6f0 Mrdn 2y ago * <Pagination filters={filters} total={hosts === undefined ? 0 : hosts.length} onHostsFilterChange={onFilterChange} pageSizeManager={pageSizeManagers.hosts} />
119 6aab6f0 Mrdn 2y ago */}
120 6aab6f0 Mrdn 2y ago </Box>
121 6aab6f0 Mrdn 2y ago );
122 6aab6f0 Mrdn 2y ago };