Merge branch 'main' into instance-auto-restart

Author: benjaminleonard

.eslintrc.cjs

@@ -70,6 +70,8 @@ module.exports = {
     'import/no-default-export': 'error',
     'import/no-unresolved': 'off', // plugin doesn't know anything
     'jsx-a11y/label-has-associated-control': [2, { controlComponents: ['button'] }],
+    // only worry about console.log
+    'no-console': ['error', { allow: ['warn', 'error', 'info', 'table'] }],
     'no-param-reassign': 'error',
     'no-restricted-imports': [
       'error',
@@ -112,11 +114,18 @@ module.exports = {
     },
     {
       files: ['*.e2e.ts'],
-      extends: ['plugin:playwright/playwright-test'],
+      extends: ['plugin:playwright/recommended'],
       rules: {
         'playwright/expect-expect': [
           'warn',
-          { assertFunctionNames: ['expectVisible', 'expectRowVisible', 'expectOptions'] },
+          {
+            assertFunctionNames: [
+              'expectVisible',
+              'expectRowVisible',
+              'expectOptions',
+              'expectRowMenuStaysOpen',
+            ],
+          },
         ],
         'playwright/no-force-option': 'off',
       },

.github/workflows/reformatter.yaml

@@ -3,6 +3,8 @@
   "plugins": ["react", "react-hooks", "unicorn", "typescript", "oxc"],
   "rules": {
     "react-hooks/exhaustive-deps": "error",
+    // only worry about console.log
+    "no-console": ["error", { "allow": ["warn", "error", "info", "table"] }],
     // turning this off because it's more sensitive than eslint currently
     // "react-hooks/rules-of-hooks": "error",
     "no-unused-vars": [
@@ -13,5 +15,6 @@
         "caughtErrorsIgnorePattern": "^_"
       }
     ]
-  }
+  },
+  "ignorePatterns": ["dist/", "node_modules/"]
 }

.oxlintrc.json

@@ -346,7 +346,7 @@ export const wrapQueryClient = <A extends ApiClient>(api: A, queryClient: QueryC
               // directly without further processing
               throw data
             }
-            console.log(options.explanation)
+            console.info(options.explanation)
             return { type: 'error' as const, data }
           }),
       ...options,

app/api/hooks.ts

@@ -34,7 +34,7 @@ function handleResult<T>(result: ApiResult<T>): T {
 }
 
 function logHeading(s: string) {
-  console.log(`%c${s}`, 'font-size: 16px; font-weight: bold;')
+  console.info(`%c${s}`, 'font-size: 16px; font-weight: bold;')
 }
 
 if (typeof window !== 'undefined') {

app/api/window.ts

@@ -5,10 +5,9 @@
  *
  * Copyright Oxide Computer Company
  */
+import { useReducedMotion } from 'motion/react'
 import { useEffect, useMemo, useState } from 'react'
 
-import { useReducedMotion } from '~/hooks/use-reduce-motion'
-
 export function RoundedSector({
   angle,
   size,

app/components/RoundedSector.tsx

@@ -154,59 +154,60 @@ export default function TimeSeriesChart({
   const data = useMemo(() => rawData || [], [rawData])
 
   return (
-    <ResponsiveContainer width="100%" height={300}>
-      <AreaChart
-        width={width}
-        height={height}
-        data={data}
-        margin={{ top: 0, right: 8, bottom: 16, left: 0 }}
-        className={cn(className, 'rounded-lg border border-default')}
-      >
-        <CartesianGrid stroke={GRID_GRAY} vertical={false} />
-        <XAxis
-          axisLine={{ stroke: GRID_GRAY }}
-          tickLine={{ stroke: GRID_GRAY }}
-          // TODO: show full given date range in the chart even if the data doesn't fill the range
-          domain={['auto', 'auto']}
-          dataKey="timestamp"
-          interval="preserveStart"
-          scale="time"
-          // TODO: use Date directly as x-axis values
-          type="number"
-          name="Time"
-          ticks={getTicks(data, 5)}
-          tickFormatter={isSameDay(startTime, endTime) ? shortTime : shortDateTime}
-          tick={textMonoMd}
-          tickMargin={8}
-        />
-        <YAxis
-          axisLine={{ stroke: GRID_GRAY }}
-          tickLine={{ stroke: GRID_GRAY }}
-          orientation="right"
-          tick={textMonoMd}
-          tickMargin={8}
-          tickFormatter={yAxisTickFormatter}
-          padding={{ top: 32 }}
-          {...yTicks}
-        />
-        {/* TODO: stop tooltip being focused by default on pageload if nothing else has been clicked */}
-        <Tooltip
-          isAnimationActive={false}
-          content={(props: TooltipProps<number, string>) => renderTooltip(props, unit)}
-          cursor={{ stroke: CURSOR_GRAY, strokeDasharray: '3,3' }}
-          wrapperStyle={{ outline: 'none' }}
-        />
-        <Area
-          dataKey="value"
-          name={title}
-          type={interpolation}
-          stroke={GREEN_600}
-          fill={GREEN_400}
-          isAnimationActive={false}
-          dot={false}
-          activeDot={{ fill: GREEN_800, r: 3, strokeWidth: 0 }}
-        />
-      </AreaChart>
-    </ResponsiveContainer>
+    <div className="h-[300px] w-full">
+      <ResponsiveContainer className={cn(className, 'rounded-lg border border-default')}>
+        <AreaChart
+          width={width}
+          height={height}
+          data={data}
+          margin={{ top: 0, right: 8, bottom: 16, left: 0 }}
+        >
+          <CartesianGrid stroke={GRID_GRAY} vertical={false} />
+          <XAxis
+            axisLine={{ stroke: GRID_GRAY }}
+            tickLine={{ stroke: GRID_GRAY }}
+            // TODO: show full given date range in the chart even if the data doesn't fill the range
+            domain={['auto', 'auto']}
+            dataKey="timestamp"
+            interval="preserveStart"
+            scale="time"
+            // TODO: use Date directly as x-axis values
+            type="number"
+            name="Time"
+            ticks={getTicks(data, 5)}
+            tickFormatter={isSameDay(startTime, endTime) ? shortTime : shortDateTime}
+            tick={textMonoMd}
+            tickMargin={8}
+          />
+          <YAxis
+            axisLine={{ stroke: GRID_GRAY }}
+            tickLine={{ stroke: GRID_GRAY }}
+            orientation="right"
+            tick={textMonoMd}
+            tickMargin={8}
+            tickFormatter={yAxisTickFormatter}
+            padding={{ top: 32 }}
+            {...yTicks}
+          />
+          {/* TODO: stop tooltip being focused by default on pageload if nothing else has been clicked */}
+          <Tooltip
+            isAnimationActive={false}
+            content={(props: TooltipProps<number, string>) => renderTooltip(props, unit)}
+            cursor={{ stroke: CURSOR_GRAY, strokeDasharray: '3,3' }}
+            wrapperStyle={{ outline: 'none' }}
+          />
+          <Area
+            dataKey="value"
+            name={title}
+            type={interpolation}
+            stroke={GREEN_600}
+            fill={GREEN_400}
+            isAnimationActive={false}
+            dot={false}
+            activeDot={{ fill: GREEN_800, r: 3, strokeWidth: 0 }}
+          />
+        </AreaChart>
+      </ResponsiveContainer>
+    </div>
   )
 }

app/components/TimeSeriesChart.tsx

@@ -5,45 +5,39 @@
  *
  * Copyright Oxide Computer Company
  */
-import { animated, useTransition } from '@react-spring/web'
+import { AnimatePresence } from 'motion/react'
+import * as m from 'motion/react-m'
 
 import { removeToast, useToastStore } from '~/stores/toast'
 import { Toast } from '~/ui/lib/Toast'
 
 export function ToastStack() {
   const toasts = useToastStore((state) => state.toasts)
 
-  const transition = useTransition(toasts, {
-    keys: (toast) => toast.id,
-    from: { opacity: 0, y: 10, scale: 95 },
-    enter: { opacity: 1, y: 0, scale: 100 },
-    leave: { opacity: 0, y: 10, scale: 95 },
-    config: { duration: 100 },
-  })
-
   return (
     <div
       className="pointer-events-auto fixed bottom-4 left-4 z-toast flex flex-col items-end space-y-2"
       data-testid="Toasts"
     >
-      {transition((style, item) => (
-        <animated.div
-          style={{
-            opacity: style.opacity,
-            y: style.y,
-            transform: style.scale.to((val) => `scale(${val}%, ${val}%)`),
-          }}
-        >
-          <Toast
-            key={item.id}
-            {...item.options}
-            onClose={() => {
-              removeToast(item.id)
-              item.options.onClose?.()
-            }}
-          />
-        </animated.div>
-      ))}
+      <AnimatePresence>
+        {toasts.map((toast) => (
+          <m.div
+            key={toast.id}
+            initial={{ opacity: 0, y: 20, scale: 0.95 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: 20, scale: 0.95 }}
+            transition={{ type: 'spring', duration: 0.2, bounce: 0 }}
+          >
+            <Toast
+              {...toast.options}
+              onClose={() => {
+                removeToast(toast.id)
+                toast.options.onClose?.()
+              }}
+            />
+          </m.div>
+        ))}
+      </AnimatePresence>
     </div>
   )
 }

app/components/ToastStack.tsx

@@ -6,25 +6,41 @@
  * Copyright Oxide Computer Company
  */
 import { useForm } from 'react-hook-form'
-import { useNavigate, type LoaderFunctionArgs } from 'react-router'
+import { Link, useNavigate, type LoaderFunctionArgs } from 'react-router'
 
-import { apiq, queryClient, useApiMutation, usePrefetchedApiQuery } from '@oxide/api'
+import {
+  apiq,
+  getListQFn,
+  queryClient,
+  useApiMutation,
+  usePrefetchedQuery,
+} from '@oxide/api'
 
 import { DescriptionField } from '~/components/form/fields/DescriptionField'
 import { NameField } from '~/components/form/fields/NameField'
 import { SideModalForm } from '~/components/form/SideModalForm'
 import { HL } from '~/components/HL'
 import { getFloatingIpSelector, useFloatingIpSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
+import { EmptyCell } from '~/table/cells/EmptyCell'
+import { IpPoolCell } from '~/table/cells/IpPoolCell'
+import { CopyableIp } from '~/ui/lib/CopyableIp'
+import { PropertiesTable } from '~/ui/lib/PropertiesTable'
+import { ALL_ISH } from '~/util/consts'
 import type * as PP from '~/util/path-params'
 import { pb } from 'app/util/path-builder'
 
 const floatingIpView = ({ project, floatingIp }: PP.FloatingIp) =>
   apiq('floatingIpView', { path: { floatingIp }, query: { project } })
+const instanceList = (project: string) =>
+  getListQFn('instanceList', { query: { project, limit: ALL_ISH } })
 
 EditFloatingIpSideModalForm.loader = async ({ params }: LoaderFunctionArgs) => {
   const selector = getFloatingIpSelector(params)
-  await queryClient.prefetchQuery(floatingIpView(selector))
+  await Promise.all([
+    queryClient.fetchQuery(floatingIpView(selector)),
+    queryClient.fetchQuery(instanceList(selector.project).optionsFn()),
+  ])
   return null
 }
 
@@ -35,10 +51,11 @@ export function EditFloatingIpSideModalForm() {
 
   const onDismiss = () => navigate(pb.floatingIps({ project: floatingIpSelector.project }))
 
-  const { data: floatingIp } = usePrefetchedApiQuery('floatingIpView', {
-    path: { floatingIp: floatingIpSelector.floatingIp },
-    query: { project: floatingIpSelector.project },
-  })
+  const { data: floatingIp } = usePrefetchedQuery(floatingIpView(floatingIpSelector))
+  const { data: instances } = usePrefetchedQuery(
+    instanceList(floatingIpSelector.project).optionsFn()
+  )
+  const instanceName = instances.items.find((i) => i.id === floatingIp.instanceId)?.name
 
   const editFloatingIp = useApiMutation('floatingIpUpdate', {
     onSuccess(_floatingIp) {
@@ -49,7 +66,6 @@ export function EditFloatingIpSideModalForm() {
   })
 
   const form = useForm({ defaultValues: floatingIp })
-
   return (
     <SideModalForm
       form={form}
@@ -66,6 +82,32 @@ export function EditFloatingIpSideModalForm() {
       loading={editFloatingIp.isPending}
       submitError={editFloatingIp.error}
     >
+      <PropertiesTable>
+        <PropertiesTable.IdRow id={floatingIp.id} />
+        <PropertiesTable.DateRow label="Created" date={floatingIp.timeCreated} />
+        <PropertiesTable.DateRow label="Updated" date={floatingIp.timeModified} />
+        <PropertiesTable.Row label="IP Address">
+          <CopyableIp ip={floatingIp.ip} isLinked={false} />
+        </PropertiesTable.Row>
+        <PropertiesTable.Row label="IP Pool">
+          <IpPoolCell ipPoolId={floatingIp.ipPoolId} />
+        </PropertiesTable.Row>
+        <PropertiesTable.Row label="Instance">
+          {instanceName ? (
+            <Link
+              to={pb.instanceNetworking({
+                project: floatingIpSelector.project,
+                instance: instanceName,
+              })}
+              className="link-with-underline group text-sans-md"
+            >
+              {instanceName}
+            </Link>
+          ) : (
+            <EmptyCell />
+          )}
+        </PropertiesTable.Row>
+      </PropertiesTable>
       <NameField name="name" control={form.control} />
       <DescriptionField name="description" control={form.control} />
     </SideModalForm>