refactor(conns): desc sort first for columns with numeric value

This commit is contained in:
Haishan 2020-08-06 22:40:34 +08:00
parent 2c9ee574dd
commit 29027c897a
2 changed files with 14 additions and 12 deletions

View file

@ -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>
);
});

View file

@ -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) {