Instance Metrics using OxQL (#2654)

* Add stub of Disk Metrics using OxQL

* Refactoring; getting chart working; needs better default situation

* refacotrs; remove old DiskMetrics; add writes and flushes charts

* initial stub for CPU metrics

* file reorg

* More CPU metrics, though we mgiht need to rethink the long-term plan

* working group_by

* Updates to routes to handle sub-tabs

* Dropdown working on CPU charts

* cleanup

* more work on charts; networking

* Standardize wrapper components

* Reorder charts a bit

* getting side tabs into place

* Update side tab CSS

* Consolidate SideTabs into legacy tabs, using props to control layout

* refactoring; getting rollups working for disks and network interfaces

* Pass pre-formed query string to metric component

* Move date selector up a level, using useContext

* Update routes in path-builder test

* Small refactor to align approach to useState and dropdowns for network and disk metrics tabs

* Add static values for metrics for testing and mock service worker

* Removes TS guard that was a bit onerous; relying on casting now, though, which isn't great

* Updated mock data for disks

* small refactor before integrating Ben's PR

* Refactoring chart logic

* Add tests for OxQL charts

* Better handle cumulative_u64 data with initial sum value

* Instance metrics design tweaks (#2676)

Co-authored-by: David Crespo <david.crespo@oxidecomputer.com>
Co-authored-by: Charlie Park <charlie@oxidecomputer.com>

* a little code cleanup

* make getOxqlQuery args more generic and structured

* view/copy oxql modal

* inline oxql query modal, remove comment about showing query

* NonEmptyArray whaaaaaaat

* highlight oxql

* Add 'More about OxQL queries' button/link to modal

* test for rendered oxql in modal

* Better link style for OxQL docs

* slightly smaller text

* clean up my weird half-finished metrics props change

* CopyCode footer

* handle no nics case on network metrics

* small aria label fix

* Add restriction to only turn on query reloading once initial data have succcessfully loaded in

* Simplify CPU utilization tab

* Metrics more actions (#2700)

* OxQL metrics more actions

* take CopyCodeModal refactor further, fix motion import

* move oxql schema docs thing into links file

---------

Co-authored-by: David Crespo <david.crespo@oxidecomputer.com>

* tweak more actions menu copy one more time

* Dynamic chart Y axis width (#2697)

* Dynamic Y axis width

* Remove spacing and make tick size/margin explicit

* Need spacing on old cards

* Updates, and better logic on utilization chart; still accounting for cpus count

* Updates to incorporate nCPUs in utilization calculation

* small refactor

* Updated test for utilization

* Move OxqlMetric files to own component directory

* A few more tests

* update import

* tests are easier to make sense of when you can see all the data at once

* Default to single state on CPU utiization tab; offer 'total' option

* Update metrics schema URL

* Metrics error & loading states (#2698)

* Move some loaders to parent component

* Update dropdown to cap at 24 hours and handle minimum mean_within

* Use seconds when determining durations

* remove intervalPicker until OxQL is faster

* Less twitchy datepicker wrap

* clean up chart loading states

* init MetricsContext with null instead of dummy values

* Update mock numbers so CPU utilization range is normal

* use lazy imports in the routes

* blarg lint

* Clean up CPU charts

* revert CpuStateMetric component

* utils file tweaks, abstract slightly less

* replace getUnit with explicit unit prop

* use date-fns

* use delay function for sleeps

---------

Co-authored-by: Benjamin Leonard <benji@oxide.computer>
Co-authored-by: David Crespo <david.crespo@oxidecomputer.com>

Author: 3 people

app/api/__tests__/safety.spec.ts

@@ -51,6 +51,7 @@ it('mock-api is only referenced in test files', () => {
       "app/main.tsx",
       "app/msw-mock-api.ts",
       "docs/mock-api-differences.md",
+      "mock-api/msw/util.ts",
       "package.json",
       "test/e2e/utils.ts",
       "test/unit/server.ts",

app/api/util.ts

@@ -229,7 +229,7 @@ export type ChartDatum = {
   // we're doing the x axis as timestamp ms instead of Date primarily to make
   // type=number work
   timestamp: number
-  value: number
+  value: number | null
 }
 
 /** fill in data points at start and end of range */

app/components/CopyCode.tsx

@@ -5,6 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
+import * as m from 'motion/react-m'
 import { useState, type ReactNode } from 'react'
 
 import { Success12Icon } from '@oxide/design-system/icons/react'
@@ -13,29 +14,27 @@ import { Button } from '~/ui/lib/Button'
 import { Modal } from '~/ui/lib/Modal'
 import { useTimeout } from '~/ui/lib/use-timeout'
 
-type CopyCodeProps = {
+type CopyCodeModalProps = {
   code: string
-  modalButtonText: string
   copyButtonText: string
   modalTitle: string
+  footer?: ReactNode
   /** rendered code */
   children?: ReactNode
+  isOpen: boolean
+  onDismiss: () => void
 }
 
-export function CopyCode({
+export function CopyCodeModal({
+  isOpen,
+  onDismiss,
   code,
-  modalButtonText,
   copyButtonText,
   modalTitle,
   children,
-}: CopyCodeProps) {
-  const [isOpen, setIsOpen] = useState(false)
+  footer,
+}: CopyCodeModalProps) {
   const [hasCopied, setHasCopied] = useState(false)
-
-  function handleDismiss() {
-    setIsOpen(false)
-  }
-
   useTimeout(() => setHasCopied(false), hasCopied ? 2000 : null)
 
   const handleCopy = () => {
@@ -45,35 +44,44 @@ export function CopyCode({
   }
 
   return (
-    <>
-      <Button variant="ghost" size="sm" className="ml-2" onClick={() => setIsOpen(true)}>
-        {modalButtonText}
-      </Button>
-      <Modal isOpen={isOpen} onDismiss={handleDismiss} title={modalTitle} width="free">
-        <Modal.Section>
-          <pre className="flex w-full rounded border px-4 py-3 !normal-case !tracking-normal text-mono-md bg-default border-secondary">
-            {children}
-          </pre>
-        </Modal.Section>
-        <Modal.Footer
-          onDismiss={handleDismiss}
-          onAction={handleCopy}
-          actionText={
-            <>
-              <span className={hasCopied ? 'invisible' : ''}>{copyButtonText}</span>
-              <span
-                className={`absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center ${
-                  hasCopied ? '' : 'invisible'
-                }`}
+    <Modal isOpen={isOpen} onDismiss={onDismiss} title={modalTitle} width="free">
+      <Modal.Section>
+        <pre className="w-full rounded border px-4 py-3 !normal-case !tracking-normal text-mono-md bg-default border-secondary">
+          {children}
+        </pre>
+      </Modal.Section>
+      <Modal.Footer
+        onDismiss={onDismiss}
+        onAction={handleCopy}
+        actionText={
+          <>
+            <m.span
+              className="flex items-center"
+              animate={{
+                opacity: hasCopied ? 0 : 1,
+                y: hasCopied ? 25 : 0,
+              }}
+              transition={{ type: 'spring', duration: 0.3, bounce: 0 }}
+            >
+              {copyButtonText}
+            </m.span>
+
+            {hasCopied && (
+              <m.span
+                animate={{ opacity: 1, y: '-50%', x: '-50%' }}
+                initial={{ opacity: 0, y: 'calc(-50% - 25px)', x: '-50%' }}
+                transition={{ type: 'spring', duration: 0.3, bounce: 0 }}
+                className="absolute left-1/2 top-1/2 flex items-center"
               >
-                <Success12Icon className="mr-2 text-accent" />
-                Copied
-              </span>
-            </>
-          }
-        />
-      </Modal>
-    </>
+                <Success12Icon className="text-accent" />
+              </m.span>
+            )}
+          </>
+        }
+      >
+        {footer}
+      </Modal.Footer>
+    </Modal>
   )
 }
 
@@ -86,15 +94,23 @@ export function EquivalentCliCommand({ project, instance }: EquivProps) {
     `--instance ${instance}`,
   ]
 
+  const [isOpen, setIsOpen] = useState(false)
+
   return (
-    <CopyCode
-      code={cmdParts.join(' ')}
-      modalButtonText="Equivalent CLI Command"
-      copyButtonText="Copy command"
-      modalTitle="CLI command"
-    >
-      <div className="mr-2 select-none text-tertiary">$</div>
-      {cmdParts.join(' \\\n')}
-    </CopyCode>
+    <>
+      <Button variant="ghost" size="sm" className="ml-2" onClick={() => setIsOpen(true)}>
+        Equivalent CLI Command
+      </Button>
+      <CopyCodeModal
+        code={cmdParts.join(' ')}
+        copyButtonText="Copy command"
+        modalTitle="CLI command"
+        isOpen={isOpen}
+        onDismiss={() => setIsOpen(false)}
+      >
+        <span className="mr-2 select-none text-tertiary">$</span>
+        {cmdParts.join(' \\\n    ')}
+      </CopyCodeModal>
+    </>
   )
 }

app/components/MoreActionsMenu.tsx

@@ -5,6 +5,8 @@
  *
  * Copyright Oxide Computer Company
  */
+import cn from 'classnames'
+
 import { More12Icon } from '@oxide/design-system/icons/react'
 
 import type { MenuAction } from '~/table/columns/action-col'
@@ -16,13 +18,21 @@ interface MoreActionsMenuProps {
   /** The accessible name for the menu button */
   label: string
   actions: MenuAction[]
+  isSmall?: boolean
 }
-export const MoreActionsMenu = ({ actions, label }: MoreActionsMenuProps) => {
+export const MoreActionsMenu = ({
+  actions,
+  label,
+  isSmall = false,
+}: MoreActionsMenuProps) => {
   return (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger
         aria-label={label}
-        className="flex h-8 w-8 items-center justify-center rounded border border-default hover:bg-tertiary"
+        className={cn(
+          'flex items-center justify-center rounded border border-default hover:bg-tertiary',
+          isSmall ? 'h-6 w-6' : 'h-8 w-8'
+        )}
       >
         <More12Icon />
       </DropdownMenu.Trigger>

app/components/RefetchIntervalPicker.tsx

@@ -37,9 +37,19 @@ type Props = {
   enabled: boolean
   isLoading: boolean
   fn: () => void
+  showLastFetched?: boolean
+  className?: string
+  isSlim?: boolean
 }
 
-export function useIntervalPicker({ enabled, isLoading, fn }: Props) {
+export function useIntervalPicker({
+  enabled,
+  isLoading,
+  fn,
+  showLastFetched = false,
+  className,
+  isSlim = false,
+}: Props) {
   const [intervalPreset, setIntervalPreset] = useState<IntervalPreset>('10s')
 
   const [lastFetched, setLastFetched] = useState(new Date())
@@ -53,11 +63,13 @@ export function useIntervalPicker({ enabled, isLoading, fn }: Props) {
   return {
     intervalMs: (enabled && intervalPresets[intervalPreset]) || undefined,
     intervalPicker: (
-      <div className="mb-12 flex items-center justify-between">
-        <div className="hidden items-center gap-2 text-right text-mono-sm text-tertiary lg+:flex">
-          <Time16Icon className="text-quaternary" /> Refreshed{' '}
-          {toLocaleTimeString(lastFetched)}
-        </div>
+      <div className={cn('flex items-center justify-between', className)}>
+        {showLastFetched && (
+          <div className="hidden items-center gap-2 text-right text-mono-sm text-tertiary lg+:flex">
+            <Time16Icon className="text-quaternary" /> Refreshed{' '}
+            {toLocaleTimeString(lastFetched)}
+          </div>
+        )}
         <div className="flex">
           <button
             type="button"
@@ -75,10 +87,11 @@ export function useIntervalPicker({ enabled, isLoading, fn }: Props) {
           </button>
           <Listbox
             selected={enabled ? intervalPreset : 'Off'}
-            className="w-24 [&_button]:!rounded-l-none"
+            className={cn('[&_button]:!rounded-l-none', isSlim ? '' : 'w-24')}
             items={intervalItems}
             onChange={setIntervalPreset}
             disabled={!enabled}
+            hideSelected={isSlim}
           />
         </div>
       </div>

app/components/RouteTabs.tsx

@@ -38,16 +38,35 @@ const selectTab = (e: React.KeyboardEvent<HTMLDivElement>) => {
 export interface RouteTabsProps {
   children: ReactNode
   fullWidth?: boolean
+  sideTabs?: boolean
+  tabListClassName?: string
 }
-export function RouteTabs({ children, fullWidth }: RouteTabsProps) {
+/** Tabbed views, controlling both the layout and functioning of tabs and the panel contents.
+ *  sideTabs: Whether the tabs are displayed on the side of the panel. Default is false.
+ */
+export function RouteTabs({
+  children,
+  fullWidth,
+  sideTabs = false,
+  tabListClassName,
+}: RouteTabsProps) {
+  const wrapperClasses = sideTabs
+    ? 'ox-side-tabs flex'
+    : cn('ox-tabs', { 'full-width': fullWidth })
+  const tabListClasses = sideTabs ? 'ox-side-tabs-list' : 'ox-tabs-list'
+  const panelClasses = cn('ox-tabs-panel @container', { 'ml-5 flex-grow': sideTabs })
   return (
-    <div className={cn('ox-tabs', { 'full-width': fullWidth })}>
+    <div className={wrapperClasses}>
       {/* eslint-disable-next-line jsx-a11y/interactive-supports-focus */}
-      <div role="tablist" className="ox-tabs-list" onKeyDown={selectTab}>
+      <div
+        role="tablist"
+        className={cn(tabListClasses, tabListClassName)}
+        onKeyDown={selectTab}
+      >
         {children}
       </div>
       {/* TODO: Add aria-describedby for active tab */}
-      <div className="ox-tabs-panel" role="tabpanel" tabIndex={0}>
+      <div className={panelClasses} role="tabpanel" tabIndex={0}>
         <Outlet />
       </div>
     </div>
@@ -57,14 +76,16 @@ export function RouteTabs({ children, fullWidth }: RouteTabsProps) {
 export interface TabProps {
   to: string
   children: ReactNode
+  sideTab?: boolean
 }
-export const Tab = ({ to, children }: TabProps) => {
+export const Tab = ({ to, children, sideTab = false }: TabProps) => {
   const isActive = useIsActivePath({ to })
+  const baseClass = sideTab ? 'ox-side-tab' : 'ox-tab'
   return (
     <Link
       role="tab"
       to={to}
-      className={cn('ox-tab', { 'is-selected': isActive })}
+      className={cn(baseClass, { 'is-selected': isActive })}
       tabIndex={isActive ? 0 : -1}
       aria-selected={isActive}
     >

app/components/SystemMetric.tsx

@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import React, { Suspense, useMemo, useRef } from 'react'
+import { useMemo, useRef } from 'react'
 
 import {
   synthesizeData,
@@ -16,7 +16,7 @@ import {
 
 import { Spinner } from '~/ui/lib/Spinner'
 
-const TimeSeriesChart = React.lazy(() => import('./TimeSeriesChart'))
+import { TimeSeriesChart } from './TimeSeriesChart'
 
 // The difference between system metric and silo metric is
 //   1. different endpoints
@@ -99,20 +99,18 @@ export function SiloMetric({
         {(inRange.isPending || beforeStart.isPending) && <Spinner />}
       </h2>
       {/* TODO: proper skeleton for empty chart */}
-      <Suspense fallback={<div />}>
-        <div className="mt-3 h-[300px]">
-          <TimeSeriesChart
-            data={data}
-            title={title}
-            width={480}
-            height={240}
-            interpolation="stepAfter"
-            startTime={startTime}
-            endTime={endTime}
-            unit={unit !== 'count' ? unit : undefined}
-          />
-        </div>
-      </Suspense>
+      <div className="mt-3 h-[300px]">
+        <TimeSeriesChart
+          data={data}
+          title={title}
+          width={480}
+          height={240}
+          interpolation="stepAfter"
+          startTime={startTime}
+          endTime={endTime}
+          unit={unit !== 'count' ? unit : undefined}
+        />
+      </div>
     </div>
   )
 }
@@ -177,20 +175,18 @@ export function SystemMetric({
         {(inRange.isPending || beforeStart.isPending) && <Spinner />}
       </h2>
       {/* TODO: proper skeleton for empty chart */}
-      <Suspense fallback={<div />}>
-        <div className="mt-3 h-[300px]">
-          <TimeSeriesChart
-            data={data}
-            title={title}
-            width={480}
-            height={240}
-            interpolation="stepAfter"
-            startTime={startTime}
-            endTime={endTime}
-            unit={unit !== 'count' ? unit : undefined}
-          />
-        </div>
-      </Suspense>
+      <div className="mt-3 h-[300px]">
+        <TimeSeriesChart
+          data={data}
+          title={title}
+          width={480}
+          height={240}
+          interpolation="stepAfter"
+          startTime={startTime}
+          endTime={endTime}
+          unit={unit !== 'count' ? unit : undefined}
+        />
+      </div>
     </div>
   )
 }