refactor(conns): desc sort first for columns with numeric value
This commit is contained in:
parent
2c9ee574dd
commit
29027c897a
2 changed files with 14 additions and 12 deletions
|
@ -7,25 +7,27 @@ 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' },
|
||||
{ Header: 'UL', accessor: 'upload' },
|
||||
{ Header: 'DL Speed', accessor: 'downloadSpeedCurr' },
|
||||
{ Header: 'UL Speed', accessor: 'uploadSpeedCurr' },
|
||||
{ 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' },
|
||||
{ Header: 'Time', accessor: 'start', sortDescFirst },
|
||||
{ Header: 'Source', accessor: 'source' },
|
||||
{ Header: 'Destination IP', accessor: 'destinationIP' },
|
||||
{ Header: 'Type', accessor: 'type' },
|
||||
];
|
||||
|
||||
function renderCell(cell, now) {
|
||||
function renderCell(cell) {
|
||||
switch (cell.column.id) {
|
||||
case 'start':
|
||||
return formatDistance(-cell.value, now);
|
||||
return formatDistance(cell.value, 0);
|
||||
case 'download':
|
||||
case 'upload':
|
||||
return prettyBytes(cell.value);
|
||||
|
@ -47,7 +49,6 @@ const tableState = {
|
|||
};
|
||||
|
||||
function Table({ data }) {
|
||||
const now = new Date();
|
||||
const { getTableProps, headerGroups, rows, prepareRow } = useTable(
|
||||
{
|
||||
columns,
|
||||
|
@ -90,7 +91,7 @@ function Table({ data }) {
|
|||
j >= 1 && j <= 4 ? s.du : false
|
||||
)}
|
||||
>
|
||||
{renderCell(cell, now)}
|
||||
{renderCell(cell)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
|
@ -47,7 +47,7 @@ function filterConns(conns, keyword) {
|
|||
);
|
||||
}
|
||||
|
||||
function formatConnectionDataItem(i, prevKv) {
|
||||
function formatConnectionDataItem(i, prevKv, now) {
|
||||
const { id, metadata, upload, download, start, chains, rule } = i;
|
||||
// eslint-disable-next-line prefer-const
|
||||
let {
|
||||
|
@ -66,7 +66,7 @@ function formatConnectionDataItem(i, prevKv) {
|
|||
id,
|
||||
upload,
|
||||
download,
|
||||
start: 0 - new Date(start),
|
||||
start: now - new Date(start),
|
||||
chains: chains.reverse().join(' / '),
|
||||
rule,
|
||||
...metadata,
|
||||
|
@ -119,8 +119,9 @@ function Conn({ apiConfig }) {
|
|||
const read = useCallback(
|
||||
({ connections }) => {
|
||||
const prevConnsKv = arrayToIdKv(prevConnsRef.current);
|
||||
const now = new Date();
|
||||
const x = connections.map((c) =>
|
||||
formatConnectionDataItem(c, prevConnsKv)
|
||||
formatConnectionDataItem(c, prevConnsKv, now)
|
||||
);
|
||||
const closed = [];
|
||||
for (const c of prevConnsRef.current) {
|
||||
|
|
Loading…
Reference in a new issue