From 6a6b28f776009bf2aecbe1a90697e77a1167cdfd Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <benji@oxide.computer>
Date: Tue, 18 Feb 2025 11:22:41 +0000
Subject: [PATCH 1/3] OxQL metrics more actions

---
 app/components/CopyCode.tsx                   | 99 +++++++++++--------
 .../instance/tabs/MetricsTab/OxqlMetric.tsx   | 37 ++++++-
 2 files changed, 91 insertions(+), 45 deletions(-)

diff --git a/app/components/CopyCode.tsx b/app/components/CopyCode.tsx
index 930be0665..c82bd92c5 100644
--- a/app/components/CopyCode.tsx
+++ b/app/components/CopyCode.tsx
@@ -5,6 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
+import { motion as m } from 'framer-motion'
 import { useState, type ReactNode } from 'react'
 
 import { Success12Icon } from '@oxide/design-system/icons/react'
@@ -15,7 +16,6 @@ import { useTimeout } from '~/ui/lib/use-timeout'
 
 type CopyCodeProps = {
   code: string
-  modalButtonText: string
   copyButtonText: string
   modalTitle: string
   footer?: ReactNode
@@ -23,21 +23,33 @@ type CopyCodeProps = {
   children?: ReactNode
 }
 
-export function CopyCode({
-  code,
-  modalButtonText,
-  copyButtonText,
-  modalTitle,
-  children,
-  footer,
-}: CopyCodeProps) {
+export function CopyCode(props: CopyCodeProps & { modalButtonText: string }) {
   const [isOpen, setIsOpen] = useState(false)
-  const [hasCopied, setHasCopied] = useState(false)
 
   function handleDismiss() {
     setIsOpen(false)
   }
 
+  return (
+    <>
+      <Button variant="ghost" size="sm" className="ml-2" onClick={() => setIsOpen(true)}>
+        {props.modalButtonText}
+      </Button>
+      <CopyCodeModal {...props} isOpen={isOpen} onDismiss={handleDismiss} />
+    </>
+  )
+}
+
+export function CopyCodeModal({
+  isOpen,
+  onDismiss,
+  code,
+  copyButtonText,
+  modalTitle,
+  children,
+  footer,
+}: CopyCodeProps & { isOpen: boolean; onDismiss: () => void }) {
+  const [hasCopied, setHasCopied] = useState(false)
   useTimeout(() => setHasCopied(false), hasCopied ? 2000 : null)
 
   const handleCopy = () => {
@@ -47,37 +59,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>
   )
 }
 
diff --git a/app/pages/project/instances/instance/tabs/MetricsTab/OxqlMetric.tsx b/app/pages/project/instances/instance/tabs/MetricsTab/OxqlMetric.tsx
index 225f229ee..485a08486 100644
--- a/app/pages/project/instances/instance/tabs/MetricsTab/OxqlMetric.tsx
+++ b/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,39 @@ 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: () => {
+                const slug = queryObj.metricName.replace(':', '')
+                window.open(
+                  `https://docs-git-timeseries-guide-oxidecomputer.vercel.app/guides/operator/available-metric-data#_${slug}`,
+                  '_blank',
+                  'noopener,noreferrer'
+                )
+              },
+            },
+            {
+              label: 'OxQL Command',
+              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]" />}>

From 03d83d5d2d3558718123003c0685c6b2cc6f40ee Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Tue, 18 Feb 2025 14:35:34 -0600
Subject: [PATCH 2/3] take CopyCodeModal refactor further, fix motion import

---
 app/components/CopyCode.tsx                   | 51 ++++++++-----------
 .../instance/tabs/MetricsTab/OxqlMetric.tsx   |  8 +--
 2 files changed, 26 insertions(+), 33 deletions(-)

diff --git a/app/components/CopyCode.tsx b/app/components/CopyCode.tsx
index c82bd92c5..d4caa535a 100644
--- a/app/components/CopyCode.tsx
+++ b/app/components/CopyCode.tsx
@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { motion as m } from 'framer-motion'
+import * as m from 'motion/react-m'
 import { useState, type ReactNode } from 'react'
 
 import { Success12Icon } from '@oxide/design-system/icons/react'
@@ -14,30 +14,15 @@ 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
   copyButtonText: string
   modalTitle: string
   footer?: ReactNode
   /** rendered code */
   children?: ReactNode
-}
-
-export function CopyCode(props: CopyCodeProps & { modalButtonText: string }) {
-  const [isOpen, setIsOpen] = useState(false)
-
-  function handleDismiss() {
-    setIsOpen(false)
-  }
-
-  return (
-    <>
-      <Button variant="ghost" size="sm" className="ml-2" onClick={() => setIsOpen(true)}>
-        {props.modalButtonText}
-      </Button>
-      <CopyCodeModal {...props} isOpen={isOpen} onDismiss={handleDismiss} />
-    </>
-  )
+  isOpen: boolean
+  onDismiss: () => void
 }
 
 export function CopyCodeModal({
@@ -48,7 +33,7 @@ export function CopyCodeModal({
   modalTitle,
   children,
   footer,
-}: CopyCodeProps & { isOpen: boolean; onDismiss: () => void }) {
+}: CopyCodeModalProps) {
   const [hasCopied, setHasCopied] = useState(false)
   useTimeout(() => setHasCopied(false), hasCopied ? 2000 : null)
 
@@ -109,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>
+    </>
   )
 }
diff --git a/app/pages/project/instances/instance/tabs/MetricsTab/OxqlMetric.tsx b/app/pages/project/instances/instance/tabs/MetricsTab/OxqlMetric.tsx
index 485a08486..d053053ec 100644
--- a/app/pages/project/instances/instance/tabs/MetricsTab/OxqlMetric.tsx
+++ b/app/pages/project/instances/instance/tabs/MetricsTab/OxqlMetric.tsx
@@ -339,6 +339,8 @@ export function OxqlMetric({ title, description, ...queryObj }: OxqlMetricProps)
             {
               label: 'Docs',
               onActivate: () => {
+                // Turn into a real link when this is fixed
+                // https://github.com/oxidecomputer/console/issues/1855
                 const slug = queryObj.metricName.replace(':', '')
                 window.open(
                   `https://docs-git-timeseries-guide-oxidecomputer.vercel.app/guides/operator/available-metric-data#_${slug}`,
@@ -348,10 +350,8 @@ export function OxqlMetric({ title, description, ...queryObj }: OxqlMetricProps)
               },
             },
             {
-              label: 'OxQL Command',
-              onActivate: () => {
-                setModalOpen(true)
-              },
+              label: 'OxQL Query',
+              onActivate: () => setModalOpen(true),
             },
           ]}
           isSmall

From 6e011d2f83492dafa0f9be1411500420917c653e Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Tue, 18 Feb 2025 16:22:30 -0600
Subject: [PATCH 3/3] move oxql schema docs thing into links file

---
 .../instances/instance/tabs/MetricsTab/OxqlMetric.tsx  | 10 +++-------
 app/util/links.ts                                      |  3 +++
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/app/pages/project/instances/instance/tabs/MetricsTab/OxqlMetric.tsx b/app/pages/project/instances/instance/tabs/MetricsTab/OxqlMetric.tsx
index d053053ec..80d44f5a9 100644
--- a/app/pages/project/instances/instance/tabs/MetricsTab/OxqlMetric.tsx
+++ b/app/pages/project/instances/instance/tabs/MetricsTab/OxqlMetric.tsx
@@ -341,16 +341,12 @@ export function OxqlMetric({ title, description, ...queryObj }: OxqlMetricProps)
               onActivate: () => {
                 // Turn into a real link when this is fixed
                 // https://github.com/oxidecomputer/console/issues/1855
-                const slug = queryObj.metricName.replace(':', '')
-                window.open(
-                  `https://docs-git-timeseries-guide-oxidecomputer.vercel.app/guides/operator/available-metric-data#_${slug}`,
-                  '_blank',
-                  'noopener,noreferrer'
-                )
+                const url = links.oxqlSchemaDocs(queryObj.metricName)
+                window.open(url, '_blank', 'noopener,noreferrer')
               },
             },
             {
-              label: 'OxQL Query',
+              label: 'OxQL query',
               onActivate: () => setModalOpen(true),
             },
           ]}
diff --git a/app/util/links.ts b/app/util/links.ts
index e03ed3e9e..a5f0d043c 100644
--- a/app/util/links.ts
+++ b/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: