diff --git a/src/components/connections/RrdpTable.tsx b/src/components/connections/RrdpTable.tsx index 0f1f959..6e3979f 100644 --- a/src/components/connections/RrdpTable.tsx +++ b/src/components/connections/RrdpTable.tsx @@ -1,4 +1,4 @@ -import React, { useContext } from 'react'; +import React, { useContext, useState } from 'react'; import { t, tryFormatNumber } from '../../core/util'; import { Rrdp } from '../../types'; import Duration from './Duration'; @@ -19,6 +19,19 @@ const RRDP_FIELDS: RrdpKey[] = [ export default function RrdpTable() { const { status } = useContext(StatusContext); + const [sort, setSort] = useState(null); + let values = Object.entries(status.rrdp); + values = values.sort((a, b) => { + if (sort === null) { + return a[0].localeCompare(b[0]); + } else if (typeof a[1][sort] === "number") { + return ((b[1][sort] as number) || 0) - ((a[1][sort] as number) || 0); + } else { + return ("" + a[1][sort]).localeCompare("" + b[1][sort]) + } + }); + + const maxDuration = Object.values(status.rrdp).reduce( (acc, i) => Math.max(acc, i.duration), 0 @@ -30,14 +43,20 @@ export default function RrdpTable() { - + {RRDP_FIELDS.map((key) => ( - + ))} - {Object.entries(status.rrdp).map(([key, rrdp]: [string, Rrdp]) => ( + {values.map(([key, rrdp]: [string, Rrdp]) => (
URL setSort(null)} + className={`${sort === null ? 'active' : ''}`} + >URL{t(`connections.${key}`)} setSort(key)} + className={`${sort === key ? 'active' : ''}`} +>{t(`connections.${key}`)}
diff --git a/src/components/connections/RsyncTable.tsx b/src/components/connections/RsyncTable.tsx index 3455ec1..f783d22 100644 --- a/src/components/connections/RsyncTable.tsx +++ b/src/components/connections/RsyncTable.tsx @@ -1,4 +1,4 @@ -import React, { useContext } from 'react'; +import React, { useContext, useState } from 'react'; import { t, tryFormatNumber } from '../../core/util'; import { Rsync } from '../../types'; import Duration from './Duration'; @@ -10,6 +10,20 @@ const RSYNC_FIELDS: RsyncKey[] = ['duration', 'status']; export default function RsyncTable() { const { status } = useContext(StatusContext); + const [sort, setSort] = useState(null); + let values = Object.entries(status.rsync); + values = values.sort((a, b) => { + if (sort === null) { + return a[0].localeCompare(b[0]); + } else if (typeof a[1][sort] === "number") { + return ((b[1][sort] as number) || 0) - ((a[1][sort] as number) || 0); + } else { + return ("" + a[1][sort]).localeCompare("" + b[1][sort]) + } + }); + + + const maxDuration = Object.values(status.rsync).reduce( (acc, i) => Math.max(acc, i.duration), 0 @@ -21,14 +35,20 @@ export default function RsyncTable() { - + {RSYNC_FIELDS.map((key) => ( - + ))} - {Object.entries(status.rsync).map( + {values.map( ([key, rsync]: [string, Rsync]) => (
URL setSort(null)} + className={`${sort === null ? 'active' : ''}`} + >URL{t(`connections.${key}`)} setSort(key)} + className={`${sort === key ? 'active' : ''}`} + >{t(`connections.${key}`)}