Add quick actions to system layout (#1721)

* add quick actions to system layout

* fix labels slightly

app/hooks/use-quick-actions.tsx

@@ -21,6 +21,9 @@ type StoreState = {
  isOpen: boolean
 }
 
+// TODO: dedupe by group and value together so we can have, e.g., both silo and
+// system utilization at the same time
+
 // removeByValue dedupes items so they can be added as many times as we want
 // without appearing in the menu multiple times
 const removeByValue = (items: Items, toRemove: Items) => {

app/layouts/SystemLayout.tsx

@@ -5,9 +5,10 @@
  *
  * Copyright Oxide Computer Company
  */
-import { useParams } from 'react-router-dom'
+import { useMemo } from 'react'
+import { useLocation, useNavigate, useParams } from 'react-router-dom'
 
-import { apiQueryClient } from '@oxide/api'
+import { apiQueryClient, usePrefetchedApiQuery } from '@oxide/api'
 import {
  Cloud16Icon,
  Divider,
@@ -20,6 +21,7 @@ import { trigger404 } from 'app/components/ErrorBoundary'
 import { DocsLinkItem, NavLinkItem, Sidebar } from 'app/components/Sidebar'
 import { TopBar } from 'app/components/TopBar'
 import { SiloPicker, SiloSystemPicker } from 'app/components/TopBarPicker'
+import { useQuickActions } from 'app/hooks'
 import { pb } from 'app/util/path-builder'
 
 import { ContentPane, PageContainer } from './helpers'
@@ -43,6 +45,8 @@ SystemLayout.loader = async () => {
  // TODO: make sure 404 is the desired behavior. This situation should be
  // pretty unlikely.
  if (!isFleetViewer) throw trigger404
+
+ await apiQueryClient.prefetchQuery('currentUserView', {})
  return null
 }
 
@@ -52,6 +56,35 @@ export default function SystemLayout() {
  // silo-specific routes in the route config, but it's overkill considering
  // this is a one-liner. Switch to that approach at the first sign of trouble.
  const { silo } = useParams()
+ const navigate = useNavigate()
+ const { pathname } = useLocation()
+
+ const { data: user } = usePrefetchedApiQuery('currentUserView', {})
+
+ const actions = useMemo(() => {
+ const systemLinks = [
+ { value: 'Silos', path: pb.silos() },
+ { value: 'Utilization', path: pb.systemUtilization() },
+ { value: 'Inventory', path: pb.sledInventory() },
+ ]
+ // filter out the entry for the path we're currently on
+ .filter((i) => i.path !== pathname)
+ .map((i) => ({
+ navGroup: 'System',
+ value: i.value,
+ onSelect: () => navigate(i.path),
+ }))
+
+ const backToSilo = {
+ navGroup: `Back to current silo '${user.siloName}'`,
+ value: 'Projects',
+ onSelect: () => navigate(pb.projects()),
+ }
+ return [...systemLinks, backToSilo]
+ }, [pathname, navigate, user.siloName])
+
+ useQuickActions(actions)
+
  return (
  <PageContainer>
  <TopBar>

app/pages/system/SilosPage.tsx

@@ -82,7 +82,7 @@ export default function SilosPage() {
  ...silos.items.map((o) => ({
  value: o.name,
  onSelect: () => navigate(pb.silo({ silo: o.name })),
- navGroup: 'Go to silo',
+ navGroup: 'Silo detail',
  })),
  ],
  [navigate, silos]