summaryrefslogtreecommitdiff
path: root/src/components/ConnectionTable.js
diff options
context:
space:
mode:
authorHaishan <[email protected]>2020-10-31 18:18:04 +0800
committerHaishan <[email protected]>2020-11-01 17:42:52 +0800
commitff1a39d04e53b428e34d46c55ecd6689189b5443 (patch)
tree94a60abe3d28a1d729b877356bdd38d75ce655a5 /src/components/ConnectionTable.js
parente62c9165481ef12ee2310dee1c32f890b3fe4b78 (diff)
chore: run ts-migrate
Diffstat (limited to 'src/components/ConnectionTable.js')
-rw-r--r--src/components/ConnectionTable.js106
1 files changed, 0 insertions, 106 deletions
diff --git a/src/components/ConnectionTable.js b/src/components/ConnectionTable.js
deleted file mode 100644
index 6d9f86e..0000000
--- a/src/components/ConnectionTable.js
+++ /dev/null
@@ -1,106 +0,0 @@
-import cx from 'clsx';
-import { formatDistance } from 'date-fns';
-import React from 'react';
-import { ChevronDown } from 'react-feather';
-import { useSortBy, useTable } from 'react-table';
-
-import prettyBytes from '../misc/pretty-bytes';
-import s from './ConnectionTable.module.css';
-
-const sortDescFirst = true;
-
-const columns = [
- { accessor: 'id', show: false },
- { Header: 'Host', accessor: 'host' },
- { Header: 'DL', accessor: 'download', sortDescFirst },
- { Header: 'UL', accessor: 'upload', sortDescFirst },
- { Header: 'DL Speed', accessor: 'downloadSpeedCurr', sortDescFirst },
- { Header: 'UL Speed', accessor: 'uploadSpeedCurr', sortDescFirst },
- { Header: 'Chains', accessor: 'chains' },
- { Header: 'Rule', accessor: 'rule' },
- { Header: 'Time', accessor: 'start', sortDescFirst },
- { Header: 'Source', accessor: 'source' },
- { Header: 'Destination IP', accessor: 'destinationIP' },
- { Header: 'Type', accessor: 'type' },
-];
-
-function renderCell(cell) {
- switch (cell.column.id) {
- case 'start':
- return formatDistance(cell.value, 0);
- case 'download':
- case 'upload':
- return prettyBytes(cell.value);
- case 'downloadSpeedCurr':
- case 'uploadSpeedCurr':
- return prettyBytes(cell.value) + '/s';
- default:
- return cell.value;
- }
-}
-
-const sortById = { id: 'id', desc: true };
-const tableState = {
- sortBy: [
- // maintain a more stable order
- sortById,
- ],
- hiddenColumns: ['id'],
-};
-
-function Table({ data }) {
- const { getTableProps, headerGroups, rows, prepareRow } = useTable(
- {
- columns,
- data,
- initialState: tableState,
- autoResetSortBy: false,
- },
- useSortBy
- );
- return (
- <div {...getTableProps()}>
- {headerGroups.map((headerGroup) => {
- return (
- <div {...headerGroup.getHeaderGroupProps()} className={s.tr}>
- {headerGroup.headers.map((column) => (
- <div
- {...column.getHeaderProps(column.getSortByToggleProps())}
- className={s.th}
- >
- <span>{column.render('Header')}</span>
- <span className={s.sortIconContainer}>
- {column.isSorted ? (
- <span className={column.isSortedDesc ? '' : s.rotate180}>
- <ChevronDown size={16} />
- </span>
- ) : null}
- </span>
- </div>
- ))}
-
- {rows.map((row, i) => {
- prepareRow(row);
- return row.cells.map((cell, j) => {
- return (
- <div
- {...cell.getCellProps()}
- className={cx(
- s.td,
- i % 2 === 0 ? s.odd : false,
- j >= 1 && j <= 4 ? s.du : false
- )}
- >
- {renderCell(cell)}
- </div>
- );
- });
- })}
- </div>
- );
- })}
- </div>
- );
-}
-
-export default Table;