add conditions tables to statefulset and deployment views (#1463)

pluralsh · Oct 11, 2024 · c2847c6 · c2847c6
1 parent b585075
commit c2847c6
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 14 deletions.
diff --git a/assets/src/components/component/info/Deployment.tsx b/assets/src/components/component/info/Deployment.tsx
@@ -6,6 +6,7 @@ import { useTheme } from 'styled-components'
 import { DeploymentFragment } from 'generated/graphql'
 
 import { InfoSection, PaddedCard, PropGroup, PropWideBold } from './common'
+import { ConditionsTable } from './Conditions'
 
 export function StatusChart({
   green,
@@ -78,7 +79,7 @@ export function DeploymentBase({
 
   const {
     spec,
-    status: { availableReplicas, replicas, unavailableReplicas },
+    status: { availableReplicas, replicas, unavailableReplicas, conditions },
   } = deployment
 
   return (
@@ -121,6 +122,14 @@ export function DeploymentBase({
           </PropWideBold>
         </PaddedCard>
       </InfoSection>
+      {conditions && (
+        <InfoSection
+          css={{ minWidth: '100%' }}
+          title="Conditions"
+        >
+          <ConditionsTable conditions={conditions} />
+        </InfoSection>
+      )}
     </>
   )
 }
diff --git a/assets/src/components/component/info/StatefulSet.tsx b/assets/src/components/component/info/StatefulSet.tsx
@@ -3,19 +3,30 @@ import { useTheme } from 'styled-components'
 
 import { InfoSection, PaddedCard, PropGroup, PropWideBold } from './common'
 import { StatusChart } from './Deployment'
+import { ConditionsTable } from './Conditions'
+import { ComponentDetailsContext } from '../ComponentDetails'
+import { StatefulSetQuery } from 'generated/graphql'
 
 export default function StatefulSet() {
   const theme = useTheme()
-  const { data } = useOutletContext<any>()
+  const {
+    data: { statefulSet },
+  } = useOutletContext<ComponentDetailsContext>() as {
+    data: StatefulSetQuery
+  }
 
-  if (!data?.statefulSet) return null
+  if (!statefulSet) return null
 
   const {
-    statefulSet: {
-      spec,
-      status: { replicas, currentReplicas, updatedReplicas, readyReplicas },
+    spec,
+    status: {
+      replicas,
+      currentReplicas,
+      updatedReplicas,
+      readyReplicas,
+      conditions,
     },
-  } = data
+  } = statefulSet
 
   return (
     <>
@@ -51,6 +62,14 @@ export default function StatefulSet() {
           </PropWideBold>
         </PaddedCard>
       </InfoSection>
+      {conditions && (
+        <InfoSection
+          css={{ minWidth: '100%' }}
+          title="Conditions"
+        >
+          <ConditionsTable conditions={conditions} />
+        </InfoSection>
+      )}
     </>
   )
 }