PMM-15326: Put the OM plugin on date-fns and plugin-react

Two review notes on #5817, both about using what the monorepo already has.

`vitest.config.ts` used `@vitejs/plugin-react-swc`. `main` moved to
`@vitejs/plugin-react` and vite itself now prints the recommendation on
every run, so this package follows. Only this package - the rest of the
tree is not this PR's to move.

`format.ts` hand-rolled parsing and date arithmetic that date-fns does,
and date-fns is already a dependency of `apps/pmm`. Parsing, validity
and differences now come from `parseISO`, `isValid`,
`differenceInMilliseconds` and `format`.

The compact duration formatter stays, and is renamed
`formatCompactDuration` to say why. Its callers are table cells and
chips that need `2d 3h`; date-fns' `formatDuration` emits
`2 days 3 hours`, and the short form needs a custom
`locale.formatDistance` - more code than the arithmetic it replaces.
The rename also ends a collision with date-fns' export of the same
name, so a file can now import both.

Two behaviours worth naming. `formatTimestamp` moves from
`toLocaleString()` to a fixed `yyyy-MM-dd HH:mm:ss` in local time: run
timestamps are read down a column, and a format that varies by locale
is not a column anyone can scan. `formatAge` deliberately does not use
`formatDistanceToNowStrict`, which rounds to one unit - these columns
have to distinguish `1h 12m` from `1h 58m`.

Signed-off-by: Pawel Lebioda <pawel.lebioda@percona.com>

Author: plebioda

ui/packages/plugins/om/package.json

@@ -24,7 +24,7 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.1.0",
-    "@vitejs/plugin-react-swc": "^4.3.1",
+    "@vitejs/plugin-react": "^6.1.0",
     "jsdom": "^29.1.1",
     "material-react-table": "^3.2.1",
     "notistack": "^3.0.0",
@@ -45,5 +45,8 @@
     "notistack": "^3.0.0",
     "react": "^19.0.0",
     "react-router-dom": "^7.14.0"
+  },
+  "dependencies": {
+    "date-fns": "4.1.0"
   }
 }

ui/packages/plugins/om/src/HostsPage.tsx

@@ -43,7 +43,7 @@ import {
 } from './constants';
 import { OmHeader } from './components/OmHeader';
 import { Unavailable } from './components/Unavailable';
-import { formatDuration } from './format';
+import { formatCompactDuration } from './format';
 import { ageSeconds, isFailing, toHostRows } from './inventory';
 import {
   useForgetHost,
@@ -224,18 +224,18 @@ function useColumns(): MRT_ColumnDef<OmHostRow>[] {
           }
           const since = ageSeconds(original.freshness.failing_since);
           return since == null ? (
-            <>{formatDuration(age)} ago</>
+            <>{formatCompactDuration(age)} ago</>
           ) : (
             <Tooltip
-              title={`${original.freshness.last_error ?? 'The last probe failed.'} Failing for ${formatDuration(
+              title={`${original.freshness.last_error ?? 'The last probe failed.'} Failing for ${formatCompactDuration(
                 since
               )}, ${original.freshness.consecutive_failures} attempts.`}
             >
               <Box
                 component="span"
                 sx={{ color: 'error.main', cursor: 'help' }}
               >
-                {formatDuration(age)} ago (failing)
+                {formatCompactDuration(age)} ago (failing)
               </Box>
             </Tooltip>
           );

ui/packages/plugins/om/src/InventoryPage.tsx

@@ -41,7 +41,7 @@ import { RunStatusBadge } from './components/HealthBadge';
 import { RunEntities } from './components/RunEntities';
 import { OmHeader } from './components/OmHeader';
 import {
-  formatDuration,
+  formatCompactDuration,
   formatRunDuration,
   formatTimestamp,
   runDurationSeconds,
@@ -245,8 +245,8 @@ function LastRun({ run }: { run: OmInventoryRun | undefined }) {
       <RunStatusBadge status={run.status} />
       <Typography variant="body2" color="text.secondary">
         {active
-          ? `started ${age == null ? 'just now' : `${formatDuration(age)} ago`}`
-          : `${age == null ? '' : `${formatDuration(age)} ago`}, took ${
+          ? `started ${age == null ? 'just now' : `${formatCompactDuration(age)} ago`}`
+          : `${age == null ? '' : `${formatCompactDuration(age)} ago`}, took ${
               formatRunDuration(run.start_time, run.end_time) || '—'
             }`}
       </Typography>

ui/packages/plugins/om/src/ServicesPage.tsx

@@ -46,7 +46,7 @@ import {
   missingRowReason,
   type OmEstateStatus,
 } from './inventory';
-import { formatDuration } from './format';
+import { formatCompactDuration } from './format';
 import { ProbeValue } from './components/ProbeValue';
 import type { OmInventoryService, OmServiceInventoryRow } from './types';
 
@@ -181,7 +181,7 @@ function useColumns(
           return age == null ? (
             <Unavailable reason="probe_never_succeeded" />
           ) : (
-            <>{formatDuration(age)} ago</>
+            <>{formatCompactDuration(age)} ago</>
           );
         },
       },
@@ -372,7 +372,7 @@ function ProbeStatus({ inventory }: { inventory: OmInventoryService }) {
       }
     >
       <Box component="span" sx={{ color: 'error.main', cursor: 'help' }}>
-        failing {formatDuration(since)}
+        failing {formatCompactDuration(since)}
         {inventory.freshness.consecutive_failures > 0
           ? ` (${inventory.freshness.consecutive_failures}x)`
           : ''}

ui/packages/plugins/om/src/components/Metric.tsx

@@ -15,7 +15,7 @@
  * along with this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { formatDuration } from '../format';
+import { formatCompactDuration } from '../format';
 import { Unavailable } from './Unavailable';
 
 /** Reading that means "not measured" in the two percentage columns. */
@@ -45,5 +45,5 @@ export function Duration({ value }: { value: number | null | undefined }) {
   if (value === null || value === undefined) {
     return <Unavailable reason="not_applicable" />;
   }
-  return <>{formatDuration(value) || '0s'}</>;
+  return <>{formatCompactDuration(value) || '0s'}</>;
 }

ui/packages/plugins/om/src/components/ProbeValue.tsx

@@ -21,7 +21,7 @@ import {
   missingRowReason,
   type OmEstateStatus,
 } from '../inventory';
-import { formatDuration } from '../format';
+import { formatCompactDuration } from '../format';
 import { Unavailable } from './Unavailable';
 import type { OmInventoryService } from '../types';
 
@@ -86,10 +86,10 @@ export function ProbeValue({
   const detail = [
     age == null
       ? 'This service has never answered a probe.'
-      : `Last collected ${formatDuration(age)} ago.`,
+      : `Last collected ${formatCompactDuration(age)} ago.`,
     since == null
       ? null
-      : `Failing for ${formatDuration(since)} (${inventory.freshness.consecutive_failures} attempts).`,
+      : `Failing for ${formatCompactDuration(since)} (${inventory.freshness.consecutive_failures} attempts).`,
     inventory.freshness.last_error,
   ]
     .filter(Boolean)
@@ -117,7 +117,7 @@ export function ProbeValue({
           component="span"
           sx={{ color: 'warning.main', ml: 0.5, whiteSpace: 'nowrap' }}
         >
-          {age == null ? '(stale)' : `(${formatDuration(age)} old)`}
+          {age == null ? '(stale)' : `(${formatCompactDuration(age)} old)`}
         </Box>
       </Box>
     </Tooltip>

ui/packages/plugins/om/src/components/RunEntities.tsx

@@ -30,7 +30,7 @@ import {
   Typography,
 } from '@mui/material';
 import { useOmInventoryRun } from '../inventoryHooks';
-import { formatDuration } from '../format';
+import { formatCompactDuration } from '../format';
 import { Unavailable } from './Unavailable';
 import type { OmExecutorResolution, OmInventoryRun } from '../types';
 
@@ -48,15 +48,15 @@ const RESOLUTION_LABEL: Record<OmExecutorResolution, string> = {
 /**
  * A sub-second host time still deserves a number.
  *
- * `formatDuration` floors to whole seconds, which is right for an oplog window of days
+ * `formatCompactDuration` floors to whole seconds, which is right for an oplog window of days
  * and wrong here: a host that failed in 0.28s would read as `0s`, hiding that it
  * failed instantly rather than after a wait.
  */
 function formatHostDuration(seconds: number): string {
   if (seconds < 10) {
     return `${seconds.toFixed(2)}s`;
   }
-  return formatDuration(seconds) || `${Math.round(seconds)}s`;
+  return formatCompactDuration(seconds) || `${Math.round(seconds)}s`;
 }
 
 /**

ui/packages/plugins/om/src/format.ts

@@ -15,8 +15,51 @@
  * along with this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-/** Format a duration in seconds as a compact `2d 3h` / `4m 12s` string. */
-export function formatDuration(seconds: number | null | undefined): string {
+/**
+ * Formatting helpers, on `date-fns` where `date-fns` has the answer.
+ *
+ * It is the monorepo's date library and `apps/pmm` already uses it, so parsing,
+ * validity and differences come from there rather than from arithmetic kept here.
+ *
+ * `formatCompactDuration` is the exception, and deliberately not date-fns'
+ * `formatCompactDuration`. Every caller is a table cell or a chip, where the string has to be
+ * `2d 3h` rather than `2 days 3 hours`; date-fns emits words, and the short form needs
+ * a custom `locale.formatDistance` - more code than the arithmetic it would replace. It
+ * is named apart from date-fns' export of the same name so a file can import both.
+ */
+
+import { differenceInMilliseconds, format, isValid, parseISO } from 'date-fns';
+
+/** Placeholder for a value that has no usable timestamp behind it. */
+const NO_VALUE = '—';
+
+/** How a timestamp is shown when it is shown absolutely. */
+const TIMESTAMP_FORMAT = 'yyyy-MM-dd HH:mm:ss';
+
+/**
+ * Parse a wire timestamp, or null when there is nothing usable.
+ *
+ * One place for the two failure modes every helper here shares: no value at all, and a
+ * value that will not parse. `parseISO` answers an Invalid Date rather than throwing,
+ * so `isValid` is what separates them.
+ */
+function parse(iso: string | null | undefined): Date | null {
+  if (!iso) {
+    return null;
+  }
+  const date = parseISO(iso);
+  return isValid(date) ? date : null;
+}
+
+/**
+ * Format a duration in seconds as a compact `2d 3h` / `4m 12s` string.
+ *
+ * Two units, never more: these land in table cells beside other numbers, and
+ * `2d 3h 7m 12s` reads as noise where `2d 3h` reads at a glance.
+ */
+export function formatCompactDuration(
+  seconds: number | null | undefined
+): string {
   if (seconds == null || !Number.isFinite(seconds) || seconds < 0) {
     return '';
   }
@@ -38,7 +81,6 @@ export function formatDuration(seconds: number | null | undefined): string {
       parts.push(`${value}${suffix}`);
       left -= value * size;
     }
-    // Two units is enough to read at a glance; `2d 3h` beats `2d 3h 7m 12s`.
     if (parts.length === 2) {
       break;
     }
@@ -48,34 +90,31 @@ export function formatDuration(seconds: number | null | undefined): string {
 
 /** Absolute local timestamp, or an em-dash placeholder when there is none. */
 export function formatTimestamp(iso: string | null | undefined): string {
-  if (!iso) {
-    return '—';
-  }
-  const date = new Date(iso);
-  if (Number.isNaN(date.getTime())) {
-    return '—';
-  }
-  return date.toLocaleString();
+  const date = parse(iso);
+  return date ? format(date, TIMESTAMP_FORMAT) : NO_VALUE;
 }
 
 /**
  * Age of a timestamp as `3m ago`, relative to `now`.
  *
+ * Deliberately not `formatDistanceToNowStrict`: that rounds to a single unit and
+ * answers "3 minutes ago", and these are columns where `1h 12m` and `1h 58m` have to
+ * differ. The difference comes from date-fns; the rendering is the compact form above.
+ *
  * `now` is injectable so tests do not depend on the clock.
  */
 export function formatAge(
   iso: string | null | undefined,
   now: number = Date.now()
 ): string {
-  if (!iso) {
-    return '—';
+  const date = parse(iso);
+  if (!date) {
+    return NO_VALUE;
   }
-  const then = new Date(iso).getTime();
-  if (Number.isNaN(then)) {
-    return '—';
-  }
-  const seconds = Math.max(0, (now - then) / 1000);
-  return `${formatDuration(seconds) || '0s'} ago`;
+  // Clamped rather than signed: a host whose clock runs ahead should read as "just
+  // collected", not as a negative age.
+  const seconds = Math.max(0, differenceInMilliseconds(now, date) / 1000);
+  return `${formatCompactDuration(seconds) || '0s'} ago`;
 }
 
 /**
@@ -88,15 +127,13 @@ export function runDurationSeconds(
   startedAt: string,
   finishedAt: string | null | undefined
 ): number | null {
-  if (!finishedAt) {
-    return null;
-  }
-  const start = new Date(startedAt).getTime();
-  const end = new Date(finishedAt).getTime();
-  if (Number.isNaN(start) || Number.isNaN(end) || end < start) {
+  const start = parse(startedAt);
+  const end = parse(finishedAt);
+  if (!start || !end) {
     return null;
   }
-  return (end - start) / 1000;
+  const elapsed = differenceInMilliseconds(end, start);
+  return elapsed < 0 ? null : elapsed / 1000;
 }
 
 /** Wall-clock length of a run; empty while it is still going. */
@@ -108,5 +145,5 @@ export function formatRunDuration(
   if (seconds === null) {
     return '';
   }
-  return formatDuration(seconds) || '0s';
+  return formatCompactDuration(seconds) || '0s';
 }

ui/packages/plugins/om/src/index.ts

@@ -83,7 +83,7 @@ export {
 export type { OmEstateStatus } from './inventory';
 export {
   formatAge,
-  formatDuration,
+  formatCompactDuration,
   formatRunDuration,
   runDurationSeconds,
   formatTimestamp,

ui/packages/plugins/om/tests/format.test.ts

@@ -18,35 +18,35 @@
 import { describe, expect, it } from 'vitest';
 import {
   formatAge,
-  formatDuration,
+  formatCompactDuration,
   formatRunDuration,
   formatTimestamp,
 } from '../src/format';
 
-describe('formatDuration', () => {
+describe('formatCompactDuration', () => {
   it('renders sub-minute values in seconds', () => {
-    expect(formatDuration(0)).toBe('0s');
-    expect(formatDuration(47)).toBe('47s');
+    expect(formatCompactDuration(0)).toBe('0s');
+    expect(formatCompactDuration(47)).toBe('47s');
   });
 
   it('stops at two units so a value stays glanceable', () => {
-    expect(formatDuration(47323)).toBe('13h 8m');
-    expect(formatDuration(90)).toBe('1m 30s');
-    expect(formatDuration(2 * 86400 + 3 * 3600 + 7 * 60)).toBe('2d 3h');
+    expect(formatCompactDuration(47323)).toBe('13h 8m');
+    expect(formatCompactDuration(90)).toBe('1m 30s');
+    expect(formatCompactDuration(2 * 86400 + 3 * 3600 + 7 * 60)).toBe('2d 3h');
   });
 
   it('skips units that are zero rather than padding them', () => {
-    expect(formatDuration(86400)).toBe('1d');
-    expect(formatDuration(3600)).toBe('1h');
+    expect(formatCompactDuration(86400)).toBe('1d');
+    expect(formatCompactDuration(3600)).toBe('1h');
   });
 
   // A null here means "not observed", and the caller renders <Unavailable/>.
   // Returning '0s' would turn an absent observation into a real measurement.
   it('returns empty for values that are not measurements', () => {
-    expect(formatDuration(null)).toBe('');
-    expect(formatDuration(undefined)).toBe('');
-    expect(formatDuration(-1)).toBe('');
-    expect(formatDuration(Number.NaN)).toBe('');
+    expect(formatCompactDuration(null)).toBe('');
+    expect(formatCompactDuration(undefined)).toBe('');
+    expect(formatCompactDuration(-1)).toBe('');
+    expect(formatCompactDuration(Number.NaN)).toBe('');
   });
 });
 
@@ -72,6 +72,20 @@ describe('formatTimestamp', () => {
     expect(formatTimestamp(null)).toBe('—');
     expect(formatTimestamp('nonsense')).toBe('—');
   });
+
+  // A fixed pattern rather than toLocaleString: run timestamps are compared against
+  // one another down a column, and a format that varies with the reader's locale is
+  // not a column you can scan. The rendering is local time, so the assertion goes
+  // through the same conversion rather than hard-coding a zone.
+  it('renders a parsable timestamp in local time', () => {
+    const iso = '2026-08-07T09:58:48Z';
+    const local = new Date(iso);
+    const pad = (value: number) => String(value).padStart(2, '0');
+    expect(formatTimestamp(iso)).toBe(
+      `${local.getFullYear()}-${pad(local.getMonth() + 1)}-${pad(local.getDate())} ` +
+        `${pad(local.getHours())}:${pad(local.getMinutes())}:${pad(local.getSeconds())}`
+    );
+  });
 });
 
 describe('formatRunDuration', () => {