feat: Services tree diagram (#1187)

Co-authored-by: michaeljguarino <mguarino46@gmail.com>
Co-authored-by: Kevin Jayne <seemywingz@users.noreply.github.com>

assets/package.json

@@ -192,4 +192,4 @@
   "lint-staged": {
     "./src/**/*.{js,jsx,ts,tsx,graphql,md}": "prettier --write"
   }
-}
+}

assets/src/components/apps/app/components/misc.tsx

@@ -13,6 +13,7 @@ import {
 } from '@pluralsh/design-system'
 import { ComponentState } from 'generated/graphql'
 import { ComponentProps } from 'react'
+import { ChipProps } from '@pluralsh/design-system/dist/components/Chip'
 
 export const statusToBorder = {
   [Readiness.Ready]: '',
@@ -84,10 +85,11 @@ export function ComponentStatusChip({
 export function ComponentStateChip({
   state,
   className,
+  ...props
 }: {
   className?: string
   state?: ComponentState | null | undefined
-}) {
+} & ChipProps) {
   if (!state) {
     return null
   }
@@ -97,6 +99,7 @@ export function ComponentStateChip({
       <Chip
         size="small"
         severity={stateToSeverity[state]}
+        {...props}
       >
         {stateToDisplay[state]}
       </Chip>

assets/src/components/cd/cluster/Cluster.tsx

@@ -5,7 +5,7 @@ import {
   TabPanel,
   useSetBreadcrumbs,
 } from '@pluralsh/design-system'
-import { Suspense, useMemo, useRef, useState } from 'react'
+import { ReactNode, Suspense, useMemo, useRef, useState } from 'react'
 import { ResponsivePageFullWidth } from 'components/utils/layout/ResponsivePageFullWidth'
 import {
   Outlet,
@@ -32,10 +32,9 @@ import { useTheme } from 'styled-components'
 import { useLogsEnabled } from 'components/contexts/DeploymentSettingsContext'
 
 import { ClusterFragment, useClusterQuery } from '../../../generated/graphql'
-import { CD_BASE_CRUMBS } from '../ContinuousDeployment'
+import { CD_BASE_CRUMBS, PageHeaderContext } from '../ContinuousDeployment'
 import LoadingIndicator from '../../utils/LoadingIndicator'
 import ClusterSelector from '../utils/ClusterSelector'
-import { DeployService } from '../services/deployModal/DeployService'
 
 import ClusterPermissions from './ClusterPermissions'
 import ClusterSettings from './ClusterSettings'
@@ -90,7 +89,7 @@ export default function Cluster() {
   const navigate = useNavigate()
   const tabStateRef = useRef<any>(null)
   const { clusterId } = useParams<{ clusterId: string }>()
-  const tab = useMatch(`${CLUSTER_ABS_PATH}/:tab`)?.params?.tab || ''
+  const tab = useMatch(`${CLUSTER_ABS_PATH}/:tab/*`)?.params?.tab || ''
   const [refetchServices, setRefetchServices] = useState(() => () => {})
   const logs = useLogsEnabled()
 
@@ -101,8 +100,18 @@ export default function Cluster() {
     fetchPolicy: 'cache-and-network',
     pollInterval: POLL_INTERVAL,
   })
+
   const cluster = data?.cluster
 
+  const [headerContent, setHeaderContent] = useState<ReactNode>()
+
+  const pageHeaderContext = useMemo(
+    () => ({
+      setHeaderContent,
+    }),
+    []
+  )
+
   const crumbs: Breadcrumb[] = useMemo(
     () =>
       getClusterBreadcrumbs({
@@ -178,12 +187,7 @@ export default function Cluster() {
               gap: theme.spacing.small,
             }}
           >
-            {tab === 'services' && (
-              <DeployService
-                refetch={refetchServices}
-                cluster={cluster}
-              />
-            )}
+            {headerContent}
             <ClusterPermissions cluster={cluster} />
             {!cluster.self && <ClusterSettings cluster={cluster} />}
           </div>
@@ -194,17 +198,20 @@ export default function Cluster() {
         css={{ height: '100%' }}
         stateRef={tabStateRef}
       >
-        <Suspense fallback={<LoadingIndicator />}>
-          <Outlet
-            context={
-              {
-                cluster,
-                refetch: refetchCluster,
-                setRefetchServices,
-              } satisfies ClusterContextType
-            }
-          />
-        </Suspense>
+        <PageHeaderContext.Provider value={pageHeaderContext}>
+          <Suspense fallback={<LoadingIndicator />}>
+            <Outlet
+              context={
+                {
+                  cluster,
+                  refetch: refetchCluster,
+                  refetchServices,
+                  setRefetchServices,
+                } satisfies ClusterContextType
+              }
+            />
+          </Suspense>
+        </PageHeaderContext.Provider>
       </TabPanel>
     </ResponsivePageFullWidth>
   )
@@ -213,6 +220,7 @@ export default function Cluster() {
 type ClusterContextType = {
   cluster: ClusterFragment
   refetch: () => void
+  refetchServices: () => void
   setRefetchServices: (refetch: () => () => void) => void
 }
 

assets/src/components/cd/cluster/ClusterServices.tsx

@@ -1,17 +1,100 @@
-import { useParams } from 'react-router-dom'
+import { Outlet, useMatch, useParams } from 'react-router-dom'
 
-import { ServicesTable } from '../services/ServicesTable'
+import { useMemo, useRef } from 'react'
+import {
+  ListIcon,
+  NetworkInterfaceIcon,
+  SubTab,
+  TabList,
+} from '@pluralsh/design-system'
+
+import { useTheme } from 'styled-components'
+
+import { LinkTabWrap } from '../../utils/Tabs'
+import {
+  CLUSTER_SERVICES_PATH,
+  getClusterDetailsPath,
+} from '../../../routes/cdRoutesConsts'
+import { useSetPageHeaderContent } from '../ContinuousDeployment'
+
+import { DeployService } from '../services/deployModal/DeployService'
+
+import { ServicesContextT } from '../services/Services'
 
 import { useClusterContext } from './Cluster'
 
+const directory = [
+  { path: '', label: 'Table', icon: <ListIcon /> },
+  { path: 'tree', label: 'Tree', icon: <NetworkInterfaceIcon /> },
+]
+
 export default function ClusterServices() {
+  const theme = useTheme()
   const { clusterId } = useParams()
-  const { setRefetchServices } = useClusterContext()
+  const pathMatch = useMatch(
+    `${getClusterDetailsPath({ clusterId })}/${CLUSTER_SERVICES_PATH}/:tab`
+  )
+  const tab = pathMatch?.params?.tab || ''
+  const currentTab = directory.find(({ path }) => path === tab)
+  const tabStateRef = useRef<any>(null)
 
-  return (
-    <ServicesTable
-      clusterId={clusterId}
-      setRefetch={setRefetchServices}
-    />
+  const {
+    cluster,
+    refetchServices: refetch,
+    setRefetchServices: setRefetch,
+  } = useClusterContext()
+
+  useSetPageHeaderContent(
+    useMemo(
+      () => (
+        <div
+          css={{
+            display: 'flex',
+            justifyContent: 'end',
+            gap: theme.spacing.small,
+          }}
+        >
+          <TabList
+            gap="xxsmall"
+            margin={1}
+            stateRef={tabStateRef}
+            stateProps={{
+              orientation: 'horizontal',
+              selectedKey: currentTab?.path,
+            }}
+          >
+            {directory.map(({ path, label, icon }) => (
+              <LinkTabWrap
+                subTab
+                key={path}
+                textValue={label}
+                to={`${getClusterDetailsPath({
+                  clusterId,
+                })}/${CLUSTER_SERVICES_PATH}/${path}`}
+              >
+                <SubTab
+                  key={path}
+                  textValue={label}
+                  css={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    gap: theme.spacing.small,
+                  }}
+                >
+                  {icon} {label}
+                </SubTab>
+              </LinkTabWrap>
+            ))}
+          </TabList>
+          <DeployService
+            refetch={refetch}
+            cluster={cluster}
+          />
+        </div>
+      ),
+      [cluster, clusterId, currentTab?.path, refetch, theme.spacing.small]
+    )
   )
+
+  return <Outlet context={{ setRefetch, clusterId } as ServicesContextT} />
 }