feat: Add dedicated views for daemonsets and canaries (#567)

assets/src/components/cd/pipelines/Pipelines.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 import {
   AppIcon,
   Card,

assets/src/components/component/ComponentDetails.tsx

@@ -15,8 +15,10 @@ import LoadingIndicator from 'components/utils/LoadingIndicator'
 import { ViewLogsButton } from 'components/component/ViewLogsButton'
 import { directory } from 'components/component/directory'
 import {
+  CanaryDocument,
   CertificateDocument,
   CronJobDocument,
+  DaemonSetDocument,
   DeploymentDocument,
   IngressDocument,
   JobDocument,
@@ -36,6 +38,8 @@ export const kindToQuery = {
   job: JobDocument,
   service: ServiceDocument,
   statefulset: StatefulSetDocument,
+  daemonset: DaemonSetDocument,
+  canary: CanaryDocument,
 } as const
 
 type DetailsComponent = {

assets/src/components/component/ComponentInfo.tsx

@@ -13,12 +13,15 @@ import Deployment from './info/Deployment'
 import StatefulSet from './info/StatefulSet'
 import Metadata from './info/Metadata'
 import { ComponentDetailsContext } from './ComponentDetails'
+import DaemonSet from './info/Daemonset'
+import CanaryInfo from './info/Canary'
 
 const componentsWithPods: string[] = [
   'deployment',
   'job',
   'service',
   'statefulset',
+  'daemonset',
 ]
 
 export const componentsWithLogs: string[] = ['deployment', 'statefulset']
@@ -43,6 +46,10 @@ function getInfo(kind: string): JSX.Element | undefined {
       return <Service />
     case 'statefulset':
       return <StatefulSet />
+    case 'daemonset':
+      return <DaemonSet />
+    case 'canary':
+      return <CanaryInfo />
     default:
       return undefined
   }

assets/src/components/component/info/Canary.tsx

@@ -0,0 +1,201 @@
+import { useOutletContext } from 'react-router-dom'
+import { useTheme } from 'styled-components'
+import { createColumnHelper } from '@tanstack/react-table'
+
+import { Canary, Deployment, Ingress } from 'generated/graphql'
+
+import { Chip, Table } from '@pluralsh/design-system'
+
+import {
+  InfoSectionH2,
+  InfoSectionH3,
+  PaddedCard,
+  PropWideBold,
+} from './common'
+import { ConditionsTable } from './Conditions'
+
+const deploymentHelper = createColumnHelper<Deployment>()
+const ingressHelper = createColumnHelper<Ingress>()
+
+function StatusChip({ healthy }) {
+  return (
+    <Chip severity={healthy ? 'success' : 'warning'}>
+      {healthy ? 'Healthy' : 'Pending'}
+    </Chip>
+  )
+}
+
+const ColDepName = deploymentHelper.accessor((row) => row.metadata?.name, {
+  id: 'name',
+  header: 'Name',
+  cell: ({ getValue }) => getValue(),
+})
+
+const ColDepStatus = deploymentHelper.accessor((row) => row.status, {
+  id: 'status',
+  header: 'Status',
+  cell: ({ getValue }) => {
+    const status = getValue()
+
+    if (!status) return null
+    const healthy = status.replicas === status.availableReplicas
+
+    return <StatusChip healthy={healthy} />
+  },
+})
+
+const ColDepAvailable = deploymentHelper.accessor(
+  (row) => row.status?.availableReplicas,
+  {
+    id: 'available',
+    header: 'Available',
+    cell: ({ getValue }) => getValue(),
+  }
+)
+
+const ColDepReplicas = deploymentHelper.accessor(
+  (row) => row.status?.replicas,
+  {
+    id: 'replicas',
+    header: 'Replicas',
+    cell: ({ getValue }) => getValue(),
+  }
+)
+
+const depColumns = [ColDepName, ColDepStatus, ColDepReplicas, ColDepAvailable]
+
+const ColIngName = ingressHelper.accessor((row) => row.metadata?.name, {
+  id: 'name',
+  header: 'Name',
+  cell: ({ getValue }) => getValue(),
+})
+
+const ColIngStatus = ingressHelper.accessor((row) => row.status, {
+  id: 'status',
+  header: 'Status',
+  cell: ({ getValue }) => {
+    const status = getValue()
+
+    if (!status) return null
+    const healthy = (status?.loadBalancer?.ingress?.length || 0) > 0
+
+    return <StatusChip healthy={healthy} />
+  },
+})
+
+const ColIngClass = ingressHelper.accessor(
+  (row) => row.spec?.ingressClassName,
+  {
+    id: 'class',
+    header: 'Class',
+    cell: ({ getValue }) => getValue(),
+  }
+)
+
+const ingressColumns = [ColIngName, ColIngStatus, ColIngClass]
+
+function CanaryDeployments({ canary }: { canary: Canary }) {
+  const theme = useTheme()
+
+  return (
+    <>
+      <InfoSectionH3
+        css={{
+          marginBottom: theme.spacing.medium,
+          marginTop: theme.spacing.large,
+        }}
+      >
+        Deployments
+      </InfoSectionH3>
+      <Table
+        data={[canary.primaryDeployment, canary.canaryDeployment].filter(
+          (v) => !!v
+        )}
+        columns={depColumns}
+      />
+    </>
+  )
+}
+
+function CanaryIngresses({ canary }: { canary: Canary }) {
+  const theme = useTheme()
+
+  return (
+    <>
+      <InfoSectionH3
+        css={{
+          marginBottom: theme.spacing.medium,
+          marginTop: theme.spacing.large,
+        }}
+      >
+        Ingresses
+      </InfoSectionH3>
+      <Table
+        data={[canary.ingress, canary.ingressCanary].filter((v) => !!v)}
+        columns={ingressColumns}
+      />
+    </>
+  )
+}
+
+export default function CanaryInfo() {
+  const theme = useTheme()
+  const { data } = useOutletContext<any>()
+  const canary = data?.canary as Nullable<Canary>
+
+  if (!canary) return null
+
+  const { status } = canary
+
+  return (
+    <div
+      css={{
+        display: 'flex',
+        flexDirection: 'column',
+        flexGrow: 1,
+      }}
+    >
+      <InfoSectionH2>References</InfoSectionH2>
+      <CanaryDeployments canary={canary} />
+      <CanaryIngresses canary={canary} />
+      <InfoSectionH2
+        css={{
+          marginBottom: theme.spacing.medium,
+          marginTop: theme.spacing.medium,
+        }}
+      >
+        Status
+      </InfoSectionH2>
+      <PaddedCard>
+        <div
+          css={{
+            display: 'flex',
+            gap: theme.spacing.xlarge,
+          }}
+        >
+          <div
+            css={{
+              display: 'flex',
+              flexDirection: 'column',
+              flexGrow: 1,
+              justifyContent: 'center',
+            }}
+          >
+            <PropWideBold title="Failed Checks">
+              {status?.failedChecks || 0}
+            </PropWideBold>
+            <PropWideBold title="Canary Weight">
+              {status?.canaryWeight || 0}
+            </PropWideBold>
+            <PropWideBold title="Iterations">
+              {status?.iterations || 0}
+            </PropWideBold>
+          </div>
+        </div>
+      </PaddedCard>
+      <div css={{ marginTop: theme.spacing.medium }}>
+        <ConditionsTable conditions={status?.conditions} />
+      </div>
+    </div>
+  )
+}

assets/src/components/component/info/Conditions.tsx

@@ -0,0 +1,49 @@
+import { Table } from '@pluralsh/design-system'
+import { createColumnHelper } from '@tanstack/react-table'
+import { StatusConditionFragment } from 'generated/graphql'
+
+const columnHelper = createColumnHelper<StatusConditionFragment>()
+
+const ColType = columnHelper.accessor((row) => row.type, {
+  id: 'type',
+  header: 'Type',
+  cell: function Cell({ getValue }) {
+    return getValue()
+  },
+})
+
+const ColMessage = columnHelper.accessor((row) => row.message, {
+  id: 'message',
+  header: 'Message',
+  cell: function Cell({ getValue }) {
+    return getValue()
+  },
+})
+
+const ColReason = columnHelper.accessor((row) => row.reason, {
+  id: 'reason',
+  header: 'Reason',
+  cell: function Cell({ getValue }) {
+    return getValue()
+  },
+})
+
+const ColStatus = columnHelper.accessor((row) => row.reason, {
+  id: 'status',
+  header: 'Status',
+  cell: function Cell({ getValue }) {
+    return getValue()
+  },
+})
+
+const columns = [ColType, ColStatus, ColReason, ColMessage]
+
+export function ConditionsTable({ conditions, ...props }) {
+  return (
+    <Table
+      columns={columns}
+      data={conditions}
+      {...props}
+    />
+  )
+}

assets/src/components/component/info/Daemonset.tsx

@@ -0,0 +1,84 @@
+import { useOutletContext } from 'react-router-dom'
+import { useTheme } from 'styled-components'
+
+import { StatusChart } from './Deployment'
+import { InfoSectionH2, PaddedCard, PropWideBold } from './common'
+
+export default function DaemonSet() {
+  const theme = useTheme()
+  const { data } = useOutletContext<any>()
+
+  if (!data?.daemonSet) return null
+
+  const {
+    daemonSet: {
+      spec,
+      status: { desiredNumberScheduled, numberReady, currentNumberScheduled },
+    },
+  } = data
+
+  return (
+    <div
+      css={{
+        display: 'flex',
+        flexDirection: 'column',
+        flexGrow: 1,
+      }}
+    >
+      <InfoSectionH2 css={{ marginBottom: theme.spacing.medium }}>
+        Status
+      </InfoSectionH2>
+      <PaddedCard>
+        <div
+          css={{
+            display: 'flex',
+            gap: theme.spacing.xlarge,
+          }}
+        >
+          <div
+            css={{
+              display: 'flex',
+              width: 180,
+              height: 180,
+            }}
+          >
+            <StatusChart
+              available={numberReady}
+              unavailable={currentNumberScheduled - numberReady}
+              pending={desiredNumberScheduled - currentNumberScheduled}
+            />
+          </div>
+          <div
+            css={{
+              display: 'flex',
+              flexDirection: 'column',
+              flexGrow: 1,
+              justifyContent: 'center',
+            }}
+          >
+            <PropWideBold title="Desired">
+              {desiredNumberScheduled || 0}
+            </PropWideBold>
+            <PropWideBold title="Current Scheduled">
+              {currentNumberScheduled || 0}
+            </PropWideBold>
+            <PropWideBold title="Ready">{numberReady || 0}</PropWideBold>
+          </div>
+        </div>
+      </PaddedCard>
+      <InfoSectionH2
+        css={{
+          marginBottom: theme.spacing.medium,
+          marginTop: theme.spacing.large,
+        }}
+      >
+        Spec
+      </InfoSectionH2>
+      <PaddedCard>
+        <PropWideBold title="Strategy">
+          {spec?.strategy?.type || '-'}
+        </PropWideBold>
+      </PaddedCard>
+    </div>
+  )
+}

assets/src/components/component/info/Deployment.tsx

@@ -6,7 +6,7 @@ import { useTheme } from 'styled-components'
 
 import { InfoSectionH2, PaddedCard, PropWideBold } from './common'
 
-function StatusChart({
+export function StatusChart({
   available,
   unavailable,
   pending,