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.1.4
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 16e5ea1 Mrdn 2y ago import { FC, useEffect, } 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 6aab6f0 Mrdn 2y ago selectedInbound,
31 16e5ea1 Mrdn 2y ago refetchHosts,
32 16e5ea1 Mrdn 2y ago onHostsFilterChange,
33 6aab6f0 Mrdn 2y ago onEditingHost,
34 6aab6f0 Mrdn 2y ago onCreatingHost,
35 6aab6f0 Mrdn 2y ago } = useInbounds();
36 6aab6f0 Mrdn 2y ago
37 16e5ea1 Mrdn 2y ago useEffect(() => {
38 16e5ea1 Mrdn 2y ago refetchHosts();
39 16e5ea1 Mrdn 2y ago }, [selectedInbound]);
40 6aab6f0 Mrdn 2y ago
41 6aab6f0 Mrdn 2y ago const { t } = useTranslation();
42 6aab6f0 Mrdn 2y ago
43 6aab6f0 Mrdn 2y ago return (
44 6aab6f0 Mrdn 2y ago <Box id="hosts-table" borderTopStartRadius="0" overflowX={{ base: 'unset', md: 'unset' }} >
45 6aab6f0 Mrdn 2y ago <Table
46 6aab6f0 Mrdn 2y ago orientation="vertical"
47 6aab6f0 Mrdn 2y ago >
48 6aab6f0 Mrdn 2y ago <Thead zIndex="docked" position="relative">
49 6aab6f0 Mrdn 2y ago <Tr>
50 6aab6f0 Mrdn 2y ago <Th
51 6aab6f0 Mrdn 2y ago minW="120px"
52 6aab6f0 Mrdn 2y ago pl={4}
53 6aab6f0 Mrdn 2y ago pr={4}
54 6aab6f0 Mrdn 2y ago cursor={'pointer'}
55 6aab6f0 Mrdn 2y ago onClick={handleSort.bind(null, filters, 'remark', onHostsFilterChange)}
56 6aab6f0 Mrdn 2y ago >
57 6aab6f0 Mrdn 2y ago <HStack>
58 6aab6f0 Mrdn 2y ago <span>{t('remark')}</span>
59 6aab6f0 Mrdn 2y ago <Sort sort={filters.sort} column="remark" />
60 6aab6f0 Mrdn 2y ago </HStack>
61 6aab6f0 Mrdn 2y ago </Th>
62 6aab6f0 Mrdn 2y ago <Th
63 6aab6f0 Mrdn 2y ago minW="100px"
64 6aab6f0 Mrdn 2y ago cursor={'pointer'}
65 6aab6f0 Mrdn 2y ago pr={0}
66 6aab6f0 Mrdn 2y ago onClick={handleSort.bind(null, filters, 'address', onHostsFilterChange)}
67 6aab6f0 Mrdn 2y ago >
68 6aab6f0 Mrdn 2y ago <HStack>
69 6aab6f0 Mrdn 2y ago <span>{t('hostsTable.address')}</span>
70 6aab6f0 Mrdn 2y ago <Sort sort={filters.sort} column="address" />
71 6aab6f0 Mrdn 2y ago </HStack>
72 6aab6f0 Mrdn 2y ago </Th>
73 6aab6f0 Mrdn 2y ago <Th
74 6aab6f0 Mrdn 2y ago minW="100px"
75 6aab6f0 Mrdn 2y ago cursor={'pointer'}
76 6aab6f0 Mrdn 2y ago pr={0}
77 6aab6f0 Mrdn 2y ago onClick={handleSort.bind(null, filters, 'port', onHostsFilterChange)}
78 6aab6f0 Mrdn 2y ago >
79 6aab6f0 Mrdn 2y ago <HStack>
80 6aab6f0 Mrdn 2y ago <span>{t('hostsTable.port')}</span>
81 6aab6f0 Mrdn 2y ago <Sort sort={filters.sort} column="port" />
82 6aab6f0 Mrdn 2y ago </HStack>
83 6aab6f0 Mrdn 2y ago </Th>
84 6aab6f0 Mrdn 2y ago </Tr>
85 6aab6f0 Mrdn 2y ago </Thead>
86 6aab6f0 Mrdn 2y ago <Tbody overflowY="auto">
87 16e5ea1 Mrdn 2y ago {hosts?.map((host, i) => {
88 6aab6f0 Mrdn 2y ago return (
89 6aab6f0 Mrdn 2y ago <Tr
90 6aab6f0 Mrdn 2y ago key={i}
91 6aab6f0 Mrdn 2y ago className={classNames('interactive', {
92 6aab6f0 Mrdn 2y ago 'last-row': i === hosts.length - 1,
93 6aab6f0 Mrdn 2y ago })}
94 6aab6f0 Mrdn 2y ago onClick={() => onEditingHost(true, host)}
95 6aab6f0 Mrdn 2y ago >
96 6aab6f0 Mrdn 2y ago <Td minW="140px">
97 6aab6f0 Mrdn 2y ago <div className="flex-status">
98 6aab6f0 Mrdn 2y ago {host.remark}
99 6aab6f0 Mrdn 2y ago </div>
100 6aab6f0 Mrdn 2y ago </Td>
101 6aab6f0 Mrdn 2y ago <Td width="400px" minW="150px">
102 6aab6f0 Mrdn 2y ago {host.address}
103 6aab6f0 Mrdn 2y ago </Td>
104 6aab6f0 Mrdn 2y ago <Td width="350px" minW="150px">
105 6aab6f0 Mrdn 2y ago {host.port}
106 6aab6f0 Mrdn 2y ago </Td>
107 6aab6f0 Mrdn 2y ago </Tr>
108 6aab6f0 Mrdn 2y ago );
109 6aab6f0 Mrdn 2y ago })}
110 6aab6f0 Mrdn 2y ago {(hosts?.length === 0 || hosts === undefined) && (
111 6aab6f0 Mrdn 2y ago <Tr>
112 6aab6f0 Mrdn 2y ago <Td colSpan={5}>
113 6aab6f0 Mrdn 2y ago <EmptySection
114 6aab6f0 Mrdn 2y ago isFiltered={/* isFiltered */ false}
115 6aab6f0 Mrdn 2y ago noObjectT="hostsTable.noHost"
116 6aab6f0 Mrdn 2y ago noObjectMatchedT='hostsTable.noHostMatched'
117 8d3056a Mrdn 2y ago createObjectT="hostsTable.createHosts"
118 6aab6f0 Mrdn 2y ago />
119 6aab6f0 Mrdn 2y ago </Td>
120 6aab6f0 Mrdn 2y ago </Tr>
121 6aab6f0 Mrdn 2y ago )}
122 6aab6f0 Mrdn 2y ago </Tbody>
123 6aab6f0 Mrdn 2y ago </Table>
124 6aab6f0 Mrdn 2y ago {/* TODO:
125 6aab6f0 Mrdn 2y ago * <Pagination filters={filters} total={hosts === undefined ? 0 : hosts.length} onHostsFilterChange={onFilterChange} pageSizeManager={pageSizeManagers.hosts} />
126 6aab6f0 Mrdn 2y ago */}
127 6aab6f0 Mrdn 2y ago </Box>
128 6aab6f0 Mrdn 2y ago );
129 6aab6f0 Mrdn 2y ago };