some refinements to the status pages (#529)

PeerDB-io · Oct 18, 2023 · 20a284c · 20a284c
1 parent be08323
commit 20a284c
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 4 deletions.
diff --git a/ui/app/mirrors/edit/[mirrorId]/cdc.tsx b/ui/app/mirrors/edit/[mirrorId]/cdc.tsx
@@ -14,8 +14,8 @@ import { SearchField } from '@/lib/SearchField';
 import { Table, TableCell, TableRow } from '@/lib/Table';
 import * as Tabs from '@radix-ui/react-tabs';
 import moment, { Duration, Moment } from 'moment';
+import { useQueryState } from 'next-usequerystate';
 import Link from 'next/link';
-import { useState } from 'react';
 import styled from 'styled-components';
 import CDCDetails from './cdcDetails';
 
@@ -150,7 +150,9 @@ const SnapshotStatusTable = ({ status }: SnapshotStatusProps) => (
         </TableCell>
         <TableCell>{clone.completedNumRows}</TableCell>
         <TableCell>
-          <Label>{clone.avgTimePerPartition?.humanize() || 'N/A'}</Label>
+          <Label>
+            {clone.avgTimePerPartition?.humanize({ ss: 1 }) || 'N/A'}
+          </Label>
         </TableCell>
       </TableRow>
     ))}
@@ -175,7 +177,10 @@ type CDCMirrorStatusProps = {
   syncStatusChild?: React.ReactNode;
 };
 export function CDCMirror({ cdc, syncStatusChild }: CDCMirrorStatusProps) {
-  const [selectedTab, setSelectedTab] = useState<string>('tab1');
+  const [selectedTab, setSelectedTab] = useQueryState('tab', {
+    history: 'push',
+    defaultValue: 'tab1',
+  });
 
   let snapshot = <></>;
   if (cdc.snapshotStatus) {

diff --git a/ui/app/mirrors/edit/[mirrorId]/syncStatusTable.tsx b/ui/app/mirrors/edit/[mirrorId]/syncStatusTable.tsx
@@ -32,7 +32,7 @@ function TimeWithDurationOrRunning({
     return (
       <Label>
         {moment(endTime).format('YYYY-MM-DD HH:mm:ss')} (
-        {moment.duration(moment(endTime).diff(startTime)).humanize()})
+        {moment.duration(moment(endTime).diff(startTime)).humanize({ ss: 1 })})
       </Label>
     );
   } else {

diff --git a/ui/app/mirrors/status/qrep/[mirrorId]/qrepStatusTable.tsx b/ui/app/mirrors/status/qrep/[mirrorId]/qrepStatusTable.tsx
@@ -35,6 +35,13 @@ function RowPerPartition({
   endTime,
   numRows,
 }: QRepPartitionStatus) {
+  let duration = 'N/A';
+  if (startTime && endTime) {
+    duration = moment
+      .duration(moment(endTime).diff(moment(startTime)))
+      .humanize({ ss: 1 });
+  }
+
   return (
     <TableRow key={partitionId}>
       <TableCell variant='button'>
@@ -46,6 +53,9 @@ function RowPerPartition({
       <TableCell>
         <Label>{runUuid}</Label>
       </TableCell>
+      <TableCell>
+        <Label>{duration}</Label>
+      </TableCell>
       <TableCell>
         <Label>{moment(startTime)?.format('YYYY-MM-DD HH:mm:ss')}</Label>
       </TableCell>
@@ -132,6 +142,7 @@ export default function QRepStatusTable({
           </TableCell>
           <TableCell as='th'>Partition UUID</TableCell>
           <TableCell as='th'>Run UUID</TableCell>
+          <TableCell as='th'>Duration</TableCell>
           <TableCell as='th'>Start Time</TableCell>
           <TableCell as='th'>End Time</TableCell>
           <TableCell as='th'>Num Rows Synced</TableCell>

diff --git a/ui/package.json b/ui/package.json
@@ -41,6 +41,7 @@
     "material-symbols": "0.11.0",
     "moment": "^2.29.4",
     "next": "13.5.5",
+    "next-usequerystate": "^1.8.4",
     "prop-types": "^15.8.1",
     "protobufjs": "^7.2.5",
     "react": "18.2.0",

diff --git a/ui/yarn.lock b/ui/yarn.lock
@@ -8014,6 +8014,11 @@ minizlib@^2.1.1:
     minipass "^3.0.0"
     yallist "^4.0.0"
 
+mitt@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/mitt/-/mitt-3.0.1.tgz#ea36cf0cc30403601ae074c8f77b7092cdab36d1"
+  integrity sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==
+
 mkdirp-classic@^0.5.2:
   version "0.5.3"
   resolved "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz"
@@ -8094,6 +8099,13 @@ neo-async@^2.5.0, neo-async@^2.6.1, neo-async@^2.6.2:
   resolved "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
+next-usequerystate@^1.8.4:
+  version "1.8.4"
+  resolved "https://registry.yarnpkg.com/next-usequerystate/-/next-usequerystate-1.8.4.tgz#81125aa3dd5a0c6afbc21da8c1f663ee2e0a0350"
+  integrity sha512-V4xMh87cu950Zy1Jpw/H8GwWxAeAmqnLNJ8hAl5bdEWpyZV4UIKdkJePKMCUy1+h254EXGmY83BuCGJOASJRVg==
+  dependencies:
+    mitt "^3.0.1"
+
 [email protected]:
   version "13.5.5"
   resolved "https://registry.yarnpkg.com/next/-/next-13.5.5.tgz#65addd98a1ae42845d455e08bc491448bb34929b"