feat(units): improve display of bytes and duration units (#1329)

package.json

@@ -40,6 +40,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^14.4.3",
+    "@types/humanize-duration": "^3.27.4",
     "@types/jest": "^27.0.2",
     "@types/js-base64": "3.3.1",
     "@types/react-test-renderer": "^17.0.7",
@@ -101,6 +102,7 @@
     "@types/lodash": "^4.14.202",
     "@types/react": "^17.0.69",
     "dayjs": "^1.11.7",
+    "humanize-duration": "^3.32.1",
     "i18next": "^22.4.10",
     "i18next-browser-languagedetector": "^7.0.1",
     "i18next-parser": "^8.12.0",

src/app/Recordings/ActiveRecordingsTable.tsx

@@ -46,7 +46,7 @@ import { ServiceContext } from '@app/Shared/Services/Services';
 import { useDayjs } from '@app/utils/hooks/useDayjs';
 import { useSort } from '@app/utils/hooks/useSort';
 import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
-import { formatBytes, sortResources, TableColumn } from '@app/utils/utils';
+import { formatBytes, formatDuration, sortResources, TableColumn } from '@app/utils/utils';
 import {
   Bullseye,
   Button,
@@ -908,7 +908,7 @@ export const ActiveRecordingRow: React.FC<ActiveRecordingRowProps> = ({
     const options: KeyValue[] = [];
     options.push({ key: 'toDisk', value: String(recording.toDisk) });
     if (recording.maxAge) {
-      options.push({ key: 'maxAge', value: `${recording.maxAge / 1000}s` });
+      options.push({ key: 'maxAge', value: formatDuration(recording.maxAge, 1) });
     }
     if (recording.maxSize) {
       options.push({ key: 'maxSize', value: formatBytes(recording.maxSize) });
@@ -919,7 +919,7 @@ export const ActiveRecordingRow: React.FC<ActiveRecordingRowProps> = ({
   const parentRow = React.useMemo(() => {
     const RecordingDuration = (props: { duration: number }) => {
       const str = React.useMemo(
-        () => (props.duration === 0 ? 'Continuous' : `${props.duration / 1000}s`),
+        () => (props.duration === 0 ? 'Continuous' : formatDuration(recording.duration, 1)),
         [props.duration],
       );
       return <span>{str}</span>;

src/app/Rules/Rules.tsx

@@ -19,7 +19,7 @@ import { LoadingView } from '@app/Shared/Components/LoadingView';
 import { Rule, NotificationCategory } from '@app/Shared/Services/api.types';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
-import { TableColumn, sortResources } from '@app/utils/utils';
+import { TableColumn, formatBytes, formatDuration, sortResources } from '@app/utils/utils';
 import {
   Button,
   Card,
@@ -83,35 +83,35 @@ const tableColumns: TableColumn[] = [
     keyPaths: ['eventSpecifier'],
     tooltip: 'The name and location of the Event Template applied by this rule.',
   },
+  {
+    title: 'Maximum age',
+    keyPaths: ['maxAgeSeconds'],
+    tooltip:
+      'The maximum age for data kept in the JFR Recordings started by this rule. Values less than 1 indicate no limit.',
+  },
+  {
+    title: 'Maximum size',
+    keyPaths: ['maxSizeBytes'],
+    tooltip: 'The maximum size for JFR Recordings started by this rule. Values less than 1 indicate no limit.',
+  },
   {
     title: 'Archival period',
     keyPaths: ['archivalPeriodSeconds'],
     tooltip:
-      'Period in seconds. Cryostat will connect to matching targets at this interval and copy the relevant Recording data into its archives. Values less than 1 prevent data from being repeatedly copied into archives - Recordings will be started and remain only in Target JVM memory.',
+      'Cryostat will connect to matching targets at this interval and copy the relevant Recording data into its archives. Values less than 1 prevent data from being repeatedly copied into archives - Recordings will be started and remain only in Target JVM memory.',
   },
   {
     title: 'Initial delay',
     keyPaths: ['initialDelaySeconds'],
     tooltip:
-      'Initial delay in seconds. Cryostat will wait this amount of time before first copying Recording data into its archives. Values less than 0 default to equal to the Archival period. You can set a non-zero Initial delay with a zero Archival period, which will start a Recording and copy it into archives exactly once after a set delay.',
+      'Cryostat will wait this amount of time before first copying Recording data into its archives. Values less than 0 default to equal to the Archival period. You can set a non-zero Initial delay with a zero Archival period, which will start a Recording and copy it into archives exactly once after a set delay.',
   },
   {
     title: 'Preserved archives',
     keyPaths: ['preservedArchives'],
     tooltip:
       'The number of Recording copies to be maintained in the Cryostat archives. Cryostat will continue retrieving further archived copies and trimming the oldest copies from the archive to maintain this limit. Values less than 1 prevent data from being copied into archives - Recordings will be started and remain only in Target JVM memory.',
   },
-  {
-    title: 'Maximum age',
-    keyPaths: ['maxAgeSeconds'],
-    tooltip:
-      'The maximum age in seconds for data kept in the JFR Recordings started by this rule. Values less than 1 indicate no limit.',
-  },
-  {
-    title: 'Maximum size',
-    keyPaths: ['maxSizeBytes'],
-    tooltip: 'The maximum size in bytes for JFR Recordings started by this rule. Values less than 1 indicate no limit.',
-  },
 ];
 
 export interface RulesTableProps {}
@@ -335,20 +335,20 @@ export const RulesTable: React.FC<RulesTableProps> = (_) => {
         <Td key={`automatic-rule-eventSpecifier-${index}`} dataLabel={tableColumns[4].title}>
           {r.eventSpecifier}
         </Td>
-        <Td key={`automatic-rule-archivalPeriodSeconds-${index}`} dataLabel={tableColumns[5].title}>
-          {r.archivalPeriodSeconds}
+        <Td key={`automatic-rule-maxAgeSeconds-${index}`} dataLabel={tableColumns[5].title}>
+          {formatDuration(r.maxAgeSeconds)}
         </Td>
-        <Td key={`automatic-rule-initialDelaySeconds-${index}`} dataLabel={tableColumns[6].title}>
-          {r.initialDelaySeconds}
+        <Td key={`automatic-rule-maxSizeBytes-${index}`} dataLabel={tableColumns[6].title}>
+          {formatBytes(r.maxSizeBytes)}
         </Td>
-        <Td key={`automatic-rule-preservedArchives-${index}`} dataLabel={tableColumns[7].title}>
-          {r.preservedArchives}
+        <Td key={`automatic-rule-archivalPeriodSeconds-${index}`} dataLabel={tableColumns[7].title}>
+          {formatDuration(r.archivalPeriodSeconds)}
         </Td>
-        <Td key={`automatic-rule-maxAgeSeconds-${index}`} dataLabel={tableColumns[8].title}>
-          {r.maxAgeSeconds}
+        <Td key={`automatic-rule-initialDelaySeconds-${index}`} dataLabel={tableColumns[8].title}>
+          {formatDuration(r.initialDelaySeconds)}
         </Td>
-        <Td key={`automatic-rule-maxSizeBytes-${index}`} dataLabel={tableColumns[9].title}>
-          {r.maxSizeBytes}
+        <Td key={`automatic-rule-preservedArchives-${index}`} dataLabel={tableColumns[9].title}>
+          {r.preservedArchives}
         </Td>
         <Td key={`automatic-rule-action-${index}`} isActionCell style={{ paddingRight: '0' }}>
           <ActionsColumn

src/app/utils/utils.ts

@@ -16,6 +16,7 @@
 
 import { KeyValue } from '@app/Shared/Services/api.types';
 import { ISortBy, SortByDirection } from '@patternfly/react-table';
+import humanizeDuration from 'humanize-duration';
 import _ from 'lodash';
 import { NavigateFunction } from 'react-router-dom';
 import { BehaviorSubject, Observable } from 'rxjs';
@@ -95,6 +96,11 @@ export const formatBytes = (bytes: number, decimals = 2): string => {
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizeUnits[i]}`;
 };
 
+/* scalar is the time unit. Default milliseconds. */
+export const formatDuration = (quantity: number, scalar = 1000): string => {
+  return humanizeDuration(quantity * scalar);
+};
+
 export interface AutomatedAnalysisTimerObject {
   quantity: number;
   unit: string;

src/test/Recordings/ActiveRecordingsTable.test.tsx

@@ -235,7 +235,7 @@ describe('<ActiveRecordingsTable />', () => {
     expect(toolTip).toBeVisible();
 
     const duration = screen.getByText(
-      mockRecording.continuous || mockRecording.duration === 0 ? 'Continuous' : `${mockRecording.duration / 1000}s`,
+      mockRecording.continuous || mockRecording.duration === 0 ? 'Continuous' : '1 second',
     );
     expect(duration).toBeInTheDocument();
     expect(duration).toBeVisible();

yarn.lock

@@ -2231,6 +2231,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/humanize-duration@npm:^3.27.4":
+  version: 3.27.4
+  resolution: "@types/humanize-duration@npm:3.27.4"
+  checksum: aa7fa41af839021c846a1728d2f097b7885f80acbc5050623a9804d23fd8fee19d2654eaae331f000a4e551b88d99cd0b5f6cc97aa99f869b9205f6248066827
+  languageName: node
+  linkType: hard
+
 "@types/istanbul-lib-coverage@npm:*, @types/istanbul-lib-coverage@npm:^2.0.0, @types/istanbul-lib-coverage@npm:^2.0.1":
   version: 2.0.4
   resolution: "@types/istanbul-lib-coverage@npm:2.0.4"
@@ -4361,6 +4368,7 @@ __metadata:
     "@testing-library/jest-dom": ^5.16.5
     "@testing-library/react": ^12.1.5
     "@testing-library/user-event": ^14.4.3
+    "@types/humanize-duration": ^3.27.4
     "@types/jest": ^27.0.2
     "@types/js-base64": 3.3.1
     "@types/lodash": ^4.14.202
@@ -4382,6 +4390,7 @@ __metadata:
     file-loader: ^6.2.0
     fork-ts-checker-webpack-plugin: ^7.3.0
     html-webpack-plugin: ^5.5.4
+    humanize-duration: ^3.32.1
     i18next: ^22.4.10
     i18next-browser-languagedetector: ^7.0.1
     i18next-parser: ^8.12.0
@@ -7461,6 +7470,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"humanize-duration@npm:^3.32.1":
+  version: 3.32.1
+  resolution: "humanize-duration@npm:3.32.1"
+  checksum: 17f6f2ec09a931eb0bf7de1fc8ac01f90174f366f60390289bd0797c6e4545255bd5d770dd18909c9b21685d76cc190b3a8ec880d2ecc088a1ad032e0d2f57cb
+  languageName: node
+  linkType: hard
+
 "humanize-ms@npm:^1.2.1":
   version: 1.2.1
   resolution: "humanize-ms@npm:1.2.1"