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>

Author: benjaminleonard

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,31 +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,
   footer,
-}: CopyCodeProps) {
-  const [isOpen, setIsOpen] = useState(false)
+}: CopyCodeModalProps) {
   const [hasCopied, setHasCopied] = useState(false)
-
-  function handleDismiss() {
-    setIsOpen(false)
-  }
-
   useTimeout(() => setHasCopied(false), hasCopied ? 2000 : null)
 
   const handleCopy = () => {
@@ -47,37 +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="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>
-            </>
-          }
-        >
-          {footer}
-        </Modal.Footer>
-      </Modal>
-    </>
+                <Success12Icon className="text-accent" />
+              </m.span>
+            )}
+          </>
+        }
+      >
+        {footer}
+      </Modal.Footer>
+    </Modal>
   )
 }
 
@@ -90,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"
-    >
-      <span className="mr-2 select-none text-tertiary">$</span>
-      {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/pages/project/instances/instance/tabs/MetricsTab/OxqlMetric.tsx

@@ -11,11 +11,12 @@
  * https://github.com/oxidecomputer/omicron/tree/main/oximeter/oximeter/schema
  */
 
-import React, { Fragment, Suspense, useEffect, useMemo } from 'react'
+import React, { Fragment, Suspense, useEffect, useMemo, useState } from 'react'
 
 import { useApiQuery, type ChartDatum, type OxqlQueryResult } from '@oxide/api'
 
-import { CopyCode } from '~/components/CopyCode'
+import { CopyCodeModal } from '~/components/CopyCode'
+import { MoreActionsMenu } from '~/components/MoreActionsMenu'
 import { LearnMore } from '~/ui/lib/SettingsGroup'
 import { intersperse } from '~/util/array'
 import { classed } from '~/util/classed'
@@ -320,6 +321,8 @@ export function OxqlMetric({ title, description, ...queryObj }: OxqlMetricProps)
     return getPercentChartProps(chartData, startTime, endTime)
   }, [unit, chartData, startTime, endTime])
 
+  const [modalOpen, setModalOpen] = useState(false)
+
   return (
     <div className="flex w-full grow flex-col rounded-lg border border-default">
       <div className="flex items-center justify-between border-b px-6 py-5 border-secondary">
@@ -330,15 +333,35 @@ export function OxqlMetric({ title, description, ...queryObj }: OxqlMetricProps)
           </h2>
           <div className="mt-0.5 text-sans-md text-secondary">{description}</div>
         </div>
-        <CopyCode
+        <MoreActionsMenu
+          label="Instance actions"
+          actions={[
+            {
+              label: 'Docs',
+              onActivate: () => {
+                // Turn into a real link when this is fixed
+                // https://github.com/oxidecomputer/console/issues/1855
+                const url = links.oxqlSchemaDocs(queryObj.metricName)
+                window.open(url, '_blank', 'noopener,noreferrer')
+              },
+            },
+            {
+              label: 'OxQL query',
+              onActivate: () => setModalOpen(true),
+            },
+          ]}
+          isSmall
+        />
+        <CopyCodeModal
+          isOpen={modalOpen}
+          onDismiss={() => setModalOpen(false)}
           code={query}
-          modalButtonText="OxQL"
           copyButtonText="Copy query"
           modalTitle="OxQL query"
           footer={<LearnMore href={links.oxqlDocs} text="OxQL" />}
         >
           <HighlightedOxqlQuery {...queryObj} />
-        </CopyCode>
+        </CopyCodeModal>
       </div>
       <div className="px-6 py-5">
         <Suspense fallback={<div className="h-[300px]" />}>

app/util/links.ts

@@ -33,6 +33,9 @@ export const links = {
   keyConceptsProjectsDocs:
     'https://docs.oxide.computer/guides/key-entities-and-concepts#_projects',
   oxqlDocs: 'https://docs.oxide.computer/guides/operator/system-metrics#_oxql_quickstart',
+  // TODO: update URL once https://github.com/oxidecomputer/docs/pull/426 is merged
+  oxqlSchemaDocs: (metric: string) =>
+    `https://docs-git-timeseries-guide-oxidecomputer.vercel.app/guides/operator/available-metric-data#_${metric.replace(':', '')}`,
   projectsDocs: 'https://docs.oxide.computer/guides/onboarding-projects',
   quickStart: 'https://docs.oxide.computer/guides/quickstart',
   routersDocs: