add link to parent on service details (#2096)

jsladerman · web-flow · commit fe3908c68f25 · 2025-04-07T10:59:37.000-04:00
diff --git a/assets/src/components/ai/chatbot/ChatbotPanelThread.tsx b/assets/src/components/ai/chatbot/ChatbotPanelThread.tsx
@@ -121,7 +121,6 @@ export function ChatbotPanelThread({
       update: (cache, { data }) =>
         updateChatCache(currentThread.id, cache, data?.hybridChat ?? []),
     })
-  console.log({ messages })
 
   const sendingMessage = regLoading || hybridLoading
   const messageError = regError || hybridError
diff --git a/assets/src/components/cd/globalServices/GlobalServices.tsx b/assets/src/components/cd/globalServices/GlobalServices.tsx
diff --git a/assets/src/components/cd/globalServices/GlobalServicesTable.tsx b/assets/src/components/cd/globalServices/GlobalServicesTable.tsx
@@ -19,7 +19,7 @@ import {
   useFetchPaginatedData,
 } from '../../utils/table/useFetchPaginatedData'
 
-import { columns } from './GlobalService'
+import { columns } from './GlobalServices'
 
 function GlobalServicesTableComponent({
   setRefetch,
diff --git a/assets/src/components/cd/globalServices/details/GlobalService.tsx b/assets/src/components/cd/globalServices/details/GlobalService.tsx
@@ -30,7 +30,7 @@ import { PluralErrorBoundary } from '../../PluralErrorBoundary'
 import { GlobalServiceServices } from './GlobalServiceServices.tsx'
 import GlobalServiceSidecar from './GlobalServiceSidecar.tsx'
 import { ResponsiveLayoutPage } from '../../../utils/layout/ResponsiveLayoutPage.tsx'
-import { crumbs } from '../GlobalService.tsx'
+import { crumbs } from '../GlobalServices.tsx'
 import { RESPONSIVE_LAYOUT_CONTENT_WIDTH } from '../../../utils/layout/ResponsiveLayoutContentContainer.tsx'
 
 export default function GlobalService() {
@@ -70,56 +70,46 @@ export default function GlobalService() {
   if (!globalService || !globalServices) return <LoadingIndicator />
 
   return (
-    <ResponsiveLayoutPage css={{ flexDirection: 'column' }}>
-      <div
-        css={{
-          alignSelf: 'center',
-          height: '100%',
-          maxWidth: theme.breakpoints.desktop,
-          overflow: 'hidden',
-          width: '100%',
-
-          [`@media (min-width: 1833px)`]: {
-            maxWidth: theme.breakpoints.desktop + theme.spacing.large + 220, // Increased by sidecar and spacing size.
-          },
-        }}
-      >
-        <PluralErrorBoundary>
-          <Flex gap={'large'}>
-            <Flex
-              direction={'column'}
-              gap={'large'}
-              flexGrow={1}
-              flexShrink={1}
-              width={RESPONSIVE_LAYOUT_CONTENT_WIDTH}
-            >
-              <GlobalServiceSelect
-                selectedGlobalService={globalService}
-                globalServices={globalServices}
-              />
-              <GlobalServiceServices
-                globalServiceID={globalServiceId}
-                seedService={globalService?.service as ServiceDeployment}
-              />
-            </Flex>
-            <Flex
-              align={'flex-end'}
-              direction={'column'}
-              gap={'large'}
-            >
-              <KickButton
-                secondary
-                startIcon={<ReloadIcon />}
-                kickMutationHook={useSyncGlobalServiceMutation}
-                message="Resync"
-                tooltipMessage="Sync this service now instead of at the next poll interval"
-                variables={{ id: globalServiceId }}
-              />
-              <GlobalServiceSidecar globalService={globalService} />
-            </Flex>
-          </Flex>
-        </PluralErrorBoundary>
-      </div>
+    <ResponsiveLayoutPage
+      css={{
+        gap: theme.spacing.large,
+        maxWidth: theme.breakpoints.desktopLarge,
+        margin: 'auto',
+      }}
+    >
+      <PluralErrorBoundary>
+        <Flex
+          direction="column"
+          gap="large"
+          flexGrow={1}
+          flexShrink={1}
+          width={RESPONSIVE_LAYOUT_CONTENT_WIDTH}
+        >
+          <GlobalServiceSelect
+            selectedGlobalService={globalService}
+            globalServices={globalServices}
+          />
+          <GlobalServiceServices
+            globalServiceID={globalServiceId}
+            seedService={globalService?.service as ServiceDeployment}
+          />
+        </Flex>
+        <Flex
+          align="flex-end"
+          direction="column"
+          gap="large"
+        >
+          <KickButton
+            secondary
+            startIcon={<ReloadIcon />}
+            kickMutationHook={useSyncGlobalServiceMutation}
+            message="Resync"
+            tooltipMessage="Sync this service now instead of at the next poll interval"
+            variables={{ id: globalServiceId }}
+          />
+          <GlobalServiceSidecar globalService={globalService} />
+        </Flex>
+      </PluralErrorBoundary>
     </ResponsiveLayoutPage>
   )
 }
diff --git a/assets/src/components/cd/globalServices/details/GlobalServiceSidecar.tsx b/assets/src/components/cd/globalServices/details/GlobalServiceSidecar.tsx
@@ -36,8 +36,9 @@ export default function GlobalServiceSidecar({
 
   return (
     <Flex
-      direction={'column'}
-      gap={'medium'}
+      direction="column"
+      gap="medium"
+      overflow="auto"
       width={220}
     >
       <Sidecar heading="Source">
diff --git a/assets/src/components/cd/globalServices/details/columns.tsx b/assets/src/components/cd/globalServices/details/columns.tsx
@@ -24,7 +24,9 @@ const ColDeployment = columnHelper.accessor(({ node }) => node, {
     return (
       serviceDeployment && (
         <DecoratedName deletedAt={serviceDeployment.deletedAt}>
-          {serviceDeployment.name}
+          <span css={{ width: 'max-content', whiteSpace: 'nowrap' }}>
+            {serviceDeployment.name}
+          </span>
           {serviceDeployment.id === id && (
             <Chip size="small">Seed service</Chip>
           )}
diff --git a/assets/src/components/cd/services/ServicesColumns.tsx b/assets/src/components/cd/services/ServicesColumns.tsx
@@ -83,6 +83,7 @@ export const ColCluster = columnHelper.accessor(
 
       return (
         <ColWithIcon
+          css={{ width: 'max-content' }}
           icon={getClusterIconUrl({
             cluster: original?.node?.cluster,
             mode: theme.mode,
diff --git a/assets/src/components/cd/services/service/ServiceDetailsSidecar.tsx b/assets/src/components/cd/services/service/ServiceDetailsSidecar.tsx
@@ -1,8 +1,11 @@
 import {
   AppIcon,
+  ArrowTopRightIcon,
+  Button,
   Chip,
   DryRunIcon,
   ErrorIcon,
+  Flex,
   GitHubLogoIcon,
   Sidecar,
   SidecarItem,
@@ -20,7 +23,11 @@ import {
 } from 'generated/graphql'
 import { useMemo } from 'react'
 import { Link, useLocation } from 'react-router-dom'
-import { CD_REL_PATH, CLUSTERS_REL_PATH } from 'routes/cdRoutesConsts'
+import {
+  CD_REL_PATH,
+  CLUSTERS_REL_PATH,
+  getServiceDetailsPath,
+} from 'routes/cdRoutesConsts'
 import { useTheme } from 'styled-components'
 import { getStacksAbsPath } from '../../../../routes/stacksRoutesConsts.tsx'
 import StackStatusIcon from '../../../stacks/common/StackStatusIcon.tsx'
@@ -57,6 +64,7 @@ export function ServiceDetailsSidecar({
     namespace,
     repository,
     helmRepository,
+    parent,
   } = serviceDeployment
 
   return (
@@ -89,6 +97,23 @@ export function ServiceDetailsSidecar({
           width="100%"
         />
       </div>
+      {parent && (
+        <Sidecar>
+          <SidecarItem heading="Parent service">{parent.name}</SidecarItem>
+          <Button
+            marginTop={theme.spacing.large}
+            secondary
+            as={Link}
+            to={getServiceDetailsPath({
+              clusterId: cluster?.id,
+              serviceId: parent.id,
+            })}
+            endIcon={<ArrowTopRightIcon />}
+          >
+            Go to parent
+          </Button>
+        </Sidecar>
+      )}
       <Sidecar>
         {name && <SidecarItem heading="Service name"> {name}</SidecarItem>}
         {namespace && (
@@ -155,19 +180,24 @@ export function ServiceDetailsSidecar({
           </SidecarItem>
         )}
         {repository && (
-          <SidecarItem heading="Git repository">
+          <SidecarItem
+            heading={
+              <Flex
+                align="center"
+                gap="xsmall"
+              >
+                Git repository
+                <GitHubLogoIcon size={12} />
+              </Flex>
+            }
+          >
             <div
               css={{
                 display: 'flex',
                 alignItems: 'center',
                 gap: theme.spacing.xsmall,
               }}
             >
-              <AppIcon
-                spacing="padding"
-                size="xxsmall"
-                icon={<GitHubLogoIcon />}
-              />
               {repository.url}
             </div>
           </SidecarItem>
diff --git a/assets/src/generated/graphql.ts b/assets/src/generated/graphql.ts
diff --git a/assets/src/graph/cdServices.graphql b/assets/src/graph/cdServices.graphql
@@ -104,6 +104,10 @@ fragment ServiceDeploymentDetails on ServiceDeployment {
       deletedAt
     }
   }
+  parent {
+    id
+    name
+  }
   alerts(first: 500) {
     # just to get the count
     edges {
diff --git a/assets/src/routes/cdRoutes.tsx b/assets/src/routes/cdRoutes.tsx
@@ -4,7 +4,7 @@ import ContinuousDeployment, {
   useDefaultCDPath,
 } from 'components/cd/ContinuousDeployment'
 
-import GlobalServices from 'components/cd/globalServices/GlobalService'
+import GlobalServices from 'components/cd/globalServices/GlobalServices.tsx'
 
 import Namespaces from 'components/cd/namespaces/Namespaces'
 

Original file line number	Diff line number	Diff line change
`@@ -104,6 +104,10 @@ fragment ServiceDeploymentDetails on ServiceDeployment {`
`104`	`104`	`deletedAt`
`105`	`105`	`}`
`106`	`106`	`}`
	`107`	`+ parent {`
	`108`	`+ id`
	`109`	`+ name`
	`110`	`+ }`
`107`	`111`	`alerts(first: 500) {`
`108`	`112`	`# just to get the count`
`109`	`113`	`edges {`