From c4f3a20dc23afd96c60ea3d8546f3ca76debc233 Mon Sep 17 00:00:00 2001
From: dmckernan <dmckernan@acvauctions.com>
Date: Tue, 24 Jan 2023 08:49:34 -0500
Subject: [PATCH] Removes UI components when `groupedResponse` does not contain
 relevant items. Fixes empty rows when table page contains fewer than
 requested page length. Gives Pod Table rows a unique id. Updates components
 for condensing the UI, and more visual distinction between Resource types
 Updates all Accordion components to use the 'outlined' variant (except
 Cluster) Updates all Drawer components to use 'body1' typography for the
 resource name and 'subtitle1' typography for the resource type, to be more
 condensed within the UI for instances whose base font size is larger. Updates
 all Accordion targets to remove needless divider between resource info and
 resource detail summary. Expands Accordion target grid items to utilize more
 space when grid content is likely to be long. Removes spacing on grid in
 Accordion target to further reduce used space.

Signed-off-by: dmckernan <dmckernan@acvauctions.com>
---
 .../src/components/Cluster/Cluster.tsx        | 64 +++++++++++--------
 .../CronJobsAccordions/CronJobsAccordions.tsx | 16 ++---
 .../CronJobsAccordions/CronJobsDrawer.tsx     |  4 +-
 .../CustomResources/ArgoRollouts/Rollout.tsx  | 13 ++--
 .../ArgoRollouts/RolloutDrawer.tsx            |  4 +-
 .../CustomResources/DefaultCustomResource.tsx | 10 ++-
 .../DefaultCustomResourceDrawer.tsx           |  4 +-
 .../DeploymentDrawer.tsx                      |  4 +-
 .../DeploymentsAccordions.tsx                 | 18 +++---
 .../ErrorReporting/ErrorReporting.tsx         |  2 +-
 .../IngressesAccordions/IngressDrawer.tsx     |  4 +-
 .../IngressesAccordions.tsx                   |  7 +-
 .../JobsAccordions/JobsAccordions.tsx         | 16 ++---
 .../components/JobsAccordions/JobsDrawer.tsx  |  4 +-
 .../src/components/Pods/PodsTable.tsx         | 11 +++-
 .../ServicesAccordions/ServiceDrawer.tsx      |  4 +-
 .../ServicesAccordions/ServicesAccordions.tsx | 12 ++--
 .../StatefulSetDrawer.tsx                     |  4 +-
 .../StatefulSetsAccordions.tsx                | 12 ++--
 19 files changed, 105 insertions(+), 108 deletions(-)

diff --git a/plugins/kubernetes/src/components/Cluster/Cluster.tsx b/plugins/kubernetes/src/components/Cluster/Cluster.tsx
index 8998c68253..58025955b2 100644
--- a/plugins/kubernetes/src/components/Cluster/Cluster.tsx
+++ b/plugins/kubernetes/src/components/Cluster/Cluster.tsx
@@ -19,7 +19,6 @@ import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
-  Divider,
   Grid,
   Typography,
 } from '@material-ui/core';
@@ -60,11 +59,12 @@ const ClusterSummary = ({
     <Grid
       container
       direction="row"
-      justifyContent="flex-start"
+      justifyContent="space-between"
       alignItems="flex-start"
+      spacing={0}
     >
       <Grid
-        xs={4}
+        xs={6}
         item
         container
         direction="column"
@@ -73,22 +73,20 @@ const ClusterSummary = ({
         spacing={0}
       >
         <Grid item xs>
-          <Typography variant="h3">{clusterName}</Typography>
-          <Typography color="textSecondary" variant="body1">
+          <Typography variant="body1">{clusterName}</Typography>
+          <Typography color="textSecondary" variant="subtitle1">
             Cluster
           </Typography>
         </Grid>
       </Grid>
-      <Grid item xs={1}>
-        <Divider style={{ height: '4em' }} orientation="vertical" />
-      </Grid>
       <Grid
         item
         container
         xs={3}
         direction="column"
         justifyContent="flex-start"
-        alignItems="flex-start"
+        alignItems="flex-end"
+        spacing={0}
       >
         <Grid item>
           <StatusOK>{totalNumberOfPods} pods</StatusOK>
@@ -137,24 +135,36 @@ export const Cluster = ({ clusterObjects, podsWithErrors }: ClusterProps) => {
               </AccordionSummary>
               <AccordionDetails>
                 <Grid container direction="column">
-                  <Grid item>
-                    <CustomResources />
-                  </Grid>
-                  <Grid item>
-                    <DeploymentsAccordions />
-                  </Grid>
-                  <Grid item>
-                    <StatefulSetsAccordions />
-                  </Grid>
-                  <Grid item>
-                    <IngressesAccordions />
-                  </Grid>
-                  <Grid item>
-                    <ServicesAccordions />
-                  </Grid>
-                  <Grid item>
-                    <CronJobsAccordions />
-                  </Grid>
+                  {groupedResponses.customResources.length > 0 ? (
+                    <Grid item>
+                      <CustomResources />
+                    </Grid>
+                  ) : undefined}
+                  {groupedResponses.deployments.length > 0 ? (
+                    <Grid item>
+                      <DeploymentsAccordions />
+                    </Grid>
+                  ) : undefined}
+                  {groupedResponses.statefulsets.length > 0 ? (
+                    <Grid item>
+                      <StatefulSetsAccordions />
+                    </Grid>
+                  ) : undefined}
+                  {groupedResponses.ingresses.length > 0 ? (
+                    <Grid item>
+                      <IngressesAccordions />
+                    </Grid>
+                  ) : undefined}
+                  {groupedResponses.services.length > 0 ? (
+                    <Grid item>
+                      <ServicesAccordions />
+                    </Grid>
+                  ) : undefined}
+                  {groupedResponses.cronJobs.length > 0 ? (
+                    <Grid item>
+                      <CronJobsAccordions />
+                    </Grid>
+                  ) : undefined}
                 </Grid>
               </AccordionDetails>
             </Accordion>
diff --git a/plugins/kubernetes/src/components/CronJobsAccordions/CronJobsAccordions.tsx b/plugins/kubernetes/src/components/CronJobsAccordions/CronJobsAccordions.tsx
index ce2dc340e7..c5babe67fc 100644
--- a/plugins/kubernetes/src/components/CronJobsAccordions/CronJobsAccordions.tsx
+++ b/plugins/kubernetes/src/components/CronJobsAccordions/CronJobsAccordions.tsx
@@ -18,7 +18,6 @@ import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
-  Divider,
   Grid,
   Typography,
 } from '@material-ui/core';
@@ -51,22 +50,21 @@ const CronJobSummary = ({ cronJob }: CronJobSummaryProps) => {
     <Grid
       container
       direction="row"
-      justifyContent="flex-start"
+      justifyContent="space-between"
       alignItems="center"
+      spacing={0}
     >
-      <Grid xs={3} item>
+      <Grid xs={6} item>
         <CronJobDrawer cronJob={cronJob} />
       </Grid>
-      <Grid item xs={1}>
-        <Divider style={{ height: '5em' }} orientation="vertical" />
-      </Grid>
       <Grid
         item
         container
-        xs={5}
+        xs={6}
         direction="column"
         justifyContent="flex-start"
-        alignItems="flex-start"
+        alignItems="flex-end"
+        spacing={0}
       >
         <Grid item>
           {cronJob.spec?.suspend ? (
@@ -92,7 +90,7 @@ const CronJobSummary = ({ cronJob }: CronJobSummaryProps) => {
 
 const CronJobAccordion = ({ cronJob, ownedJobs }: CronJobAccordionProps) => {
   return (
-    <Accordion TransitionProps={{ unmountOnExit: true }}>
+    <Accordion TransitionProps={{ unmountOnExit: true }} variant="outlined">
       <AccordionSummary expandIcon={<ExpandMoreIcon />}>
         <CronJobSummary cronJob={cronJob} />
       </AccordionSummary>
diff --git a/plugins/kubernetes/src/components/CronJobsAccordions/CronJobsDrawer.tsx b/plugins/kubernetes/src/components/CronJobsAccordions/CronJobsDrawer.tsx
index 758f17ade0..0dc53396bb 100644
--- a/plugins/kubernetes/src/components/CronJobsAccordions/CronJobsDrawer.tsx
+++ b/plugins/kubernetes/src/components/CronJobsAccordions/CronJobsDrawer.tsx
@@ -47,12 +47,12 @@ export const CronJobDrawer = ({
         spacing={0}
       >
         <Grid item>
-          <Typography variant="h5">
+          <Typography variant="body1">
             {cronJob.metadata?.name ?? 'unknown object'}
           </Typography>
         </Grid>
         <Grid item>
-          <Typography color="textSecondary" variant="body1">
+          <Typography color="textSecondary" variant="subtitle1">
             CronJob
           </Typography>
         </Grid>
diff --git a/plugins/kubernetes/src/components/CustomResources/ArgoRollouts/Rollout.tsx b/plugins/kubernetes/src/components/CustomResources/ArgoRollouts/Rollout.tsx
index 185eeb771e..91039ec314 100644
--- a/plugins/kubernetes/src/components/CustomResources/ArgoRollouts/Rollout.tsx
+++ b/plugins/kubernetes/src/components/CustomResources/ArgoRollouts/Rollout.tsx
@@ -19,7 +19,6 @@ import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
-  Divider,
   Grid,
   Typography,
 } from '@material-ui/core';
@@ -101,15 +100,13 @@ const RolloutSummary = ({
     <Grid
       container
       direction="row"
-      justifyContent="flex-start"
+      justifyContent="space-between"
       alignItems="center"
+      spacing={0}
     >
-      <Grid xs={3} item>
+      <Grid xs={6} item>
         <RolloutDrawer rollout={rollout} />
       </Grid>
-      <Grid item xs={1}>
-        <Divider style={{ height: '5em' }} orientation="vertical" />
-      </Grid>
       {hpa && (
         <Grid item xs={3}>
           <HorizontalPodAutoscalerDrawer hpa={hpa}>
@@ -149,7 +146,8 @@ const RolloutSummary = ({
         xs={3}
         direction="column"
         justifyContent="flex-start"
-        alignItems="flex-start"
+        alignItems="flex-end"
+        spacing={0}
       >
         <Grid item>
           <StatusOK>{numberOfCurrentPods} pods</StatusOK>
@@ -210,6 +208,7 @@ const RolloutAccordion = ({
     <Accordion
       defaultExpanded={defaultExpanded}
       TransitionProps={{ unmountOnExit: true }}
+      variant="outlined"
     >
       <AccordionSummary expandIcon={<ExpandMoreIcon />}>
         <RolloutSummary
diff --git a/plugins/kubernetes/src/components/CustomResources/ArgoRollouts/RolloutDrawer.tsx b/plugins/kubernetes/src/components/CustomResources/ArgoRollouts/RolloutDrawer.tsx
index d719f707d1..f1c4fe7f7e 100644
--- a/plugins/kubernetes/src/components/CustomResources/ArgoRollouts/RolloutDrawer.tsx
+++ b/plugins/kubernetes/src/components/CustomResources/ArgoRollouts/RolloutDrawer.tsx
@@ -40,12 +40,12 @@ export const RolloutDrawer = ({
         spacing={0}
       >
         <Grid item>
-          <Typography variant="h5">
+          <Typography variant="body1">
             {rollout.metadata?.name ?? 'unknown object'}
           </Typography>
         </Grid>
         <Grid item>
-          <Typography color="textSecondary" variant="body1">
+          <Typography color="textSecondary" variant="subtitle1">
             Rollout
           </Typography>
         </Grid>
diff --git a/plugins/kubernetes/src/components/CustomResources/DefaultCustomResource.tsx b/plugins/kubernetes/src/components/CustomResources/DefaultCustomResource.tsx
index 36d38d3fe0..cee3fb9e6c 100644
--- a/plugins/kubernetes/src/components/CustomResources/DefaultCustomResource.tsx
+++ b/plugins/kubernetes/src/components/CustomResources/DefaultCustomResource.tsx
@@ -19,7 +19,6 @@ import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
-  Divider,
   Grid,
 } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
@@ -54,18 +53,16 @@ const DefaultCustomResourceSummary = ({
     <Grid
       container
       direction="row"
-      justifyContent="flex-start"
+      justifyContent="space-between"
       alignItems="center"
+      spacing={0}
     >
-      <Grid xs={3} item>
+      <Grid xs={12} item>
         <DefaultCustomResourceDrawer
           customResource={customResource}
           customResourceName={customResourceName}
         />
       </Grid>
-      <Grid item xs={1}>
-        <Divider style={{ height: '5em' }} orientation="vertical" />
-      </Grid>
     </Grid>
   );
 };
@@ -79,6 +76,7 @@ const DefaultCustomResourceAccordion = ({
     <Accordion
       defaultExpanded={defaultExpanded}
       TransitionProps={{ unmountOnExit: true }}
+      variant="outlined"
     >
       <AccordionSummary expandIcon={<ExpandMoreIcon />}>
         <DefaultCustomResourceSummary
diff --git a/plugins/kubernetes/src/components/CustomResources/DefaultCustomResourceDrawer.tsx b/plugins/kubernetes/src/components/CustomResources/DefaultCustomResourceDrawer.tsx
index ba6169cdf3..5b968f72a5 100644
--- a/plugins/kubernetes/src/components/CustomResources/DefaultCustomResourceDrawer.tsx
+++ b/plugins/kubernetes/src/components/CustomResources/DefaultCustomResourceDrawer.tsx
@@ -47,12 +47,12 @@ export const DefaultCustomResourceDrawer = ({
         spacing={0}
       >
         <Grid item>
-          <Typography variant="h5">
+          <Typography variant="body1">
             {customResource.metadata?.name ?? 'unknown object'}
           </Typography>
         </Grid>
         <Grid item>
-          <Typography color="textSecondary" variant="body1">
+          <Typography color="textSecondary" variant="subtitle1">
             {capitalizedName}
           </Typography>
         </Grid>
diff --git a/plugins/kubernetes/src/components/DeploymentsAccordions/DeploymentDrawer.tsx b/plugins/kubernetes/src/components/DeploymentsAccordions/DeploymentDrawer.tsx
index 6d25702d70..8be5ee1e46 100644
--- a/plugins/kubernetes/src/components/DeploymentsAccordions/DeploymentDrawer.tsx
+++ b/plugins/kubernetes/src/components/DeploymentsAccordions/DeploymentDrawer.tsx
@@ -58,12 +58,12 @@ export const DeploymentDrawer = ({
         spacing={0}
       >
         <Grid item>
-          <Typography variant="h5">
+          <Typography variant="body1">
             {deployment.metadata?.name ?? 'unknown object'}
           </Typography>
         </Grid>
         <Grid item>
-          <Typography color="textSecondary" variant="body1">
+          <Typography color="textSecondary" variant="subtitle1">
             Deployment
           </Typography>
         </Grid>
diff --git a/plugins/kubernetes/src/components/DeploymentsAccordions/DeploymentsAccordions.tsx b/plugins/kubernetes/src/components/DeploymentsAccordions/DeploymentsAccordions.tsx
index d2fb6275bc..8432b9d133 100644
--- a/plugins/kubernetes/src/components/DeploymentsAccordions/DeploymentsAccordions.tsx
+++ b/plugins/kubernetes/src/components/DeploymentsAccordions/DeploymentsAccordions.tsx
@@ -19,7 +19,6 @@ import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
-  Divider,
   Grid,
   Typography,
 } from '@material-ui/core';
@@ -72,17 +71,15 @@ const DeploymentSummary = ({
     <Grid
       container
       direction="row"
-      justifyContent="flex-start"
+      justifyContent="space-between"
       alignItems="center"
+      spacing={0}
     >
-      <Grid xs={3} item>
+      <Grid xs={4} item>
         <DeploymentDrawer deployment={deployment} />
       </Grid>
-      <Grid item xs={1}>
-        <Divider style={{ height: '5em' }} orientation="vertical" />
-      </Grid>
       {hpa && (
-        <Grid item xs={3}>
+        <Grid item xs={4}>
           <HorizontalPodAutoscalerDrawer hpa={hpa}>
             <Grid
               item
@@ -117,10 +114,11 @@ const DeploymentSummary = ({
       <Grid
         item
         container
-        xs={3}
+        xs={4}
         direction="column"
         justifyContent="flex-start"
-        alignItems="flex-start"
+        alignItems="flex-end"
+        spacing={0}
       >
         <Grid item>
           <StatusOK>{numberOfCurrentPods} pods</StatusOK>
@@ -152,7 +150,7 @@ const DeploymentAccordion = ({
   );
 
   return (
-    <Accordion TransitionProps={{ unmountOnExit: true }}>
+    <Accordion TransitionProps={{ unmountOnExit: true }} variant="outlined">
       <AccordionSummary expandIcon={<ExpandMoreIcon />}>
         <DeploymentSummary
           deployment={deployment}
diff --git a/plugins/kubernetes/src/components/ErrorReporting/ErrorReporting.tsx b/plugins/kubernetes/src/components/ErrorReporting/ErrorReporting.tsx
index ed51b7d21d..a99fc21902 100644
--- a/plugins/kubernetes/src/components/ErrorReporting/ErrorReporting.tsx
+++ b/plugins/kubernetes/src/components/ErrorReporting/ErrorReporting.tsx
@@ -102,7 +102,7 @@ export const ErrorReporting = ({ detectedErrors }: ErrorReportingProps) => {
           title="Error Reporting"
           data={errors}
           columns={columns}
-          options={{ paging: true, search: false }}
+          options={{ paging: true, search: false, emptyRowsWhenPaging: false }}
         />
       )}
     </>
diff --git a/plugins/kubernetes/src/components/IngressesAccordions/IngressDrawer.tsx b/plugins/kubernetes/src/components/IngressesAccordions/IngressDrawer.tsx
index dc88987d53..ea79c1e4dc 100644
--- a/plugins/kubernetes/src/components/IngressesAccordions/IngressDrawer.tsx
+++ b/plugins/kubernetes/src/components/IngressesAccordions/IngressDrawer.tsx
@@ -43,12 +43,12 @@ export const IngressDrawer = ({
         spacing={0}
       >
         <Grid item>
-          <Typography variant="h5">
+          <Typography variant="body1">
             {ingress.metadata?.name ?? 'unknown object'}
           </Typography>
         </Grid>
         <Grid item>
-          <Typography color="textSecondary" variant="body1">
+          <Typography color="textSecondary" variant="subtitle1">
             Ingress
           </Typography>
         </Grid>
diff --git a/plugins/kubernetes/src/components/IngressesAccordions/IngressesAccordions.tsx b/plugins/kubernetes/src/components/IngressesAccordions/IngressesAccordions.tsx
index f6d6e4bf68..6e12c033ba 100644
--- a/plugins/kubernetes/src/components/IngressesAccordions/IngressesAccordions.tsx
+++ b/plugins/kubernetes/src/components/IngressesAccordions/IngressesAccordions.tsx
@@ -19,7 +19,6 @@ import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
-  Divider,
   Grid,
 } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
@@ -46,13 +45,9 @@ const IngressSummary = ({ ingress }: IngressSummaryProps) => {
       justifyContent="flex-start"
       alignItems="center"
     >
-      <Grid xs={3} item>
+      <Grid xs={12} item>
         <IngressDrawer ingress={ingress} />
       </Grid>
-
-      <Grid item xs={1}>
-        <Divider style={{ height: '5em' }} orientation="vertical" />
-      </Grid>
     </Grid>
   );
 };
diff --git a/plugins/kubernetes/src/components/JobsAccordions/JobsAccordions.tsx b/plugins/kubernetes/src/components/JobsAccordions/JobsAccordions.tsx
index 715be4c88a..e805e3664b 100644
--- a/plugins/kubernetes/src/components/JobsAccordions/JobsAccordions.tsx
+++ b/plugins/kubernetes/src/components/JobsAccordions/JobsAccordions.tsx
@@ -18,7 +18,6 @@ import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
-  Divider,
   Grid,
 } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
@@ -54,22 +53,21 @@ const JobSummary = ({ job }: JobSummaryProps) => {
     <Grid
       container
       direction="row"
-      justifyContent="flex-start"
+      justifyContent="space-between"
       alignItems="center"
+      spacing={0}
     >
-      <Grid xs={3} item>
+      <Grid xs={6} item>
         <JobDrawer job={job} />
       </Grid>
-      <Grid item xs={1}>
-        <Divider style={{ height: '5em' }} orientation="vertical" />
-      </Grid>
       <Grid
         item
         container
-        xs={8}
+        xs={6}
         direction="column"
         justifyContent="flex-start"
-        alignItems="flex-start"
+        alignItems="flex-end"
+        spacing={0}
       >
         <Grid item>
           {job.status?.succeeded && <StatusOK>Succeeded</StatusOK>}
@@ -89,7 +87,7 @@ const JobSummary = ({ job }: JobSummaryProps) => {
 
 const JobAccordion = ({ job, ownedPods }: JobAccordionProps) => {
   return (
-    <Accordion TransitionProps={{ unmountOnExit: true }}>
+    <Accordion TransitionProps={{ unmountOnExit: true }} variant="outlined">
       <AccordionSummary expandIcon={<ExpandMoreIcon />}>
         <JobSummary job={job} />
       </AccordionSummary>
diff --git a/plugins/kubernetes/src/components/JobsAccordions/JobsDrawer.tsx b/plugins/kubernetes/src/components/JobsAccordions/JobsDrawer.tsx
index a7217725b2..b91fb15541 100644
--- a/plugins/kubernetes/src/components/JobsAccordions/JobsDrawer.tsx
+++ b/plugins/kubernetes/src/components/JobsAccordions/JobsDrawer.tsx
@@ -47,12 +47,12 @@ export const JobDrawer = ({
         spacing={0}
       >
         <Grid item>
-          <Typography variant="h6">
+          <Typography variant="body1">
             {job.metadata?.name ?? 'unknown object'}
           </Typography>
         </Grid>
         <Grid item>
-          <Typography color="textSecondary" variant="body1">
+          <Typography color="textSecondary" variant="subtitle1">
             Job
           </Typography>
         </Grid>
diff --git a/plugins/kubernetes/src/components/Pods/PodsTable.tsx b/plugins/kubernetes/src/components/Pods/PodsTable.tsx
index 1d2369e322..a6e4b33020 100644
--- a/plugins/kubernetes/src/components/Pods/PodsTable.tsx
+++ b/plugins/kubernetes/src/components/Pods/PodsTable.tsx
@@ -46,6 +46,7 @@ const DEFAULT_COLUMNS: TableColumn<V1Pod>[] = [
   {
     title: 'phase',
     render: (pod: V1Pod) => pod.status?.phase ?? 'unknown',
+    width: 'auto',
   },
   {
     title: 'status',
@@ -58,12 +59,14 @@ const READY: TableColumn<V1Pod>[] = [
     title: 'containers ready',
     align: 'center',
     render: containersReady,
+    width: 'auto',
   },
   {
     title: 'total restarts',
     align: 'center',
     render: totalRestarts,
     type: 'numeric',
+    width: 'auto',
   },
 ];
 
@@ -87,6 +90,7 @@ export const PodsTable = ({ pods, extraColumns = [] }: PodsTablesProps) => {
 
           return podStatusToCpuUtil(metrics);
         },
+        width: 'auto',
       },
       {
         title: 'Memory usage %',
@@ -99,6 +103,7 @@ export const PodsTable = ({ pods, extraColumns = [] }: PodsTablesProps) => {
 
           return podStatusToMemoryUtil(metrics);
         },
+        width: 'auto',
       },
     ];
     columns.push(...resourceColumns);
@@ -109,11 +114,13 @@ export const PodsTable = ({ pods, extraColumns = [] }: PodsTablesProps) => {
     width: '100%',
   };
 
+  const usePods = pods.map(p => ({ ...p, id: p.metadata?.uid }));
+
   return (
     <div style={tableStyle}>
       <Table
-        options={{ paging: true, search: false }}
-        data={pods}
+        options={{ paging: true, search: false, emptyRowsWhenPaging: false }}
+        data={usePods}
         columns={columns}
       />
     </div>
diff --git a/plugins/kubernetes/src/components/ServicesAccordions/ServiceDrawer.tsx b/plugins/kubernetes/src/components/ServicesAccordions/ServiceDrawer.tsx
index 5d17fd7213..a088c4792d 100644
--- a/plugins/kubernetes/src/components/ServicesAccordions/ServiceDrawer.tsx
+++ b/plugins/kubernetes/src/components/ServicesAccordions/ServiceDrawer.tsx
@@ -43,12 +43,12 @@ export const ServiceDrawer = ({
         spacing={0}
       >
         <Grid item>
-          <Typography variant="h5">
+          <Typography variant="body1">
             {service.metadata?.name ?? 'unknown object'}
           </Typography>
         </Grid>
         <Grid item>
-          <Typography color="textSecondary" variant="body1">
+          <Typography color="textSecondary" variant="subtitle1">
             Service
           </Typography>
         </Grid>
diff --git a/plugins/kubernetes/src/components/ServicesAccordions/ServicesAccordions.tsx b/plugins/kubernetes/src/components/ServicesAccordions/ServicesAccordions.tsx
index a51b93b3bc..f0cb99ec9c 100644
--- a/plugins/kubernetes/src/components/ServicesAccordions/ServicesAccordions.tsx
+++ b/plugins/kubernetes/src/components/ServicesAccordions/ServicesAccordions.tsx
@@ -19,7 +19,6 @@ import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
-  Divider,
   Grid,
   Typography,
 } from '@material-ui/core';
@@ -38,17 +37,14 @@ const ServiceSummary = ({ service }: ServiceSummaryProps) => {
     <Grid
       container
       direction="row"
-      justifyContent="flex-start"
+      justifyContent="space-between"
       alignItems="center"
+      spacing={0}
     >
-      <Grid xs={3} item>
+      <Grid xs={8} item>
         <ServiceDrawer service={service} />
       </Grid>
 
-      <Grid item xs={1}>
-        <Divider style={{ height: '5em' }} orientation="vertical" />
-      </Grid>
-
       <Grid item>
         <Typography variant="subtitle2">
           Type: {service.spec?.type ?? '?'}
@@ -95,7 +91,7 @@ type ServiceAccordionProps = {
 
 const ServiceAccordion = ({ service }: ServiceAccordionProps) => {
   return (
-    <Accordion TransitionProps={{ unmountOnExit: true }}>
+    <Accordion TransitionProps={{ unmountOnExit: true }} variant="outlined">
       <AccordionSummary expandIcon={<ExpandMoreIcon />}>
         <ServiceSummary service={service} />
       </AccordionSummary>
diff --git a/plugins/kubernetes/src/components/StatefulSetsAccordions/StatefulSetDrawer.tsx b/plugins/kubernetes/src/components/StatefulSetsAccordions/StatefulSetDrawer.tsx
index 5dd3bafe37..e83c890426 100644
--- a/plugins/kubernetes/src/components/StatefulSetsAccordions/StatefulSetDrawer.tsx
+++ b/plugins/kubernetes/src/components/StatefulSetsAccordions/StatefulSetDrawer.tsx
@@ -59,12 +59,12 @@ export const StatefulSetDrawer = ({
         spacing={0}
       >
         <Grid item>
-          <Typography variant="h5">
+          <Typography variant="body1">
             {statefulset.metadata?.name ?? 'unknown object'}
           </Typography>
         </Grid>
         <Grid item>
-          <Typography color="textSecondary" variant="body1">
+          <Typography color="textSecondary" variant="subtitle1">
             Stateful Set
           </Typography>
         </Grid>
diff --git a/plugins/kubernetes/src/components/StatefulSetsAccordions/StatefulSetsAccordions.tsx b/plugins/kubernetes/src/components/StatefulSetsAccordions/StatefulSetsAccordions.tsx
index bb1c4821ba..37bb76c84e 100644
--- a/plugins/kubernetes/src/components/StatefulSetsAccordions/StatefulSetsAccordions.tsx
+++ b/plugins/kubernetes/src/components/StatefulSetsAccordions/StatefulSetsAccordions.tsx
@@ -19,7 +19,6 @@ import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
-  Divider,
   Grid,
   Typography,
 } from '@material-ui/core';
@@ -69,15 +68,13 @@ const StatefulSetSummary = ({
     <Grid
       container
       direction="row"
-      justifyContent="flex-start"
+      justifyContent="space-between"
       alignItems="center"
+      spacing={0}
     >
-      <Grid xs={3} item>
+      <Grid xs={6} item>
         <StatefulSetDrawer statefulset={statefulset} />
       </Grid>
-      <Grid item xs={1}>
-        <Divider style={{ height: '5em' }} orientation="vertical" />
-      </Grid>
       {hpa && (
         <Grid item xs={3}>
           <HorizontalPodAutoscalerDrawer hpa={hpa}>
@@ -118,6 +115,7 @@ const StatefulSetSummary = ({
         direction="column"
         justifyContent="flex-start"
         alignItems="flex-start"
+        spacing={0}
       >
         <Grid item>
           <StatusOK>{numberOfCurrentPods} pods</StatusOK>
@@ -149,7 +147,7 @@ const StatefulSetAccordion = ({
   );
 
   return (
-    <Accordion TransitionProps={{ unmountOnExit: true }}>
+    <Accordion TransitionProps={{ unmountOnExit: true }} variant="outlined">
       <AccordionSummary expandIcon={<ExpandMoreIcon />}>
         <StatefulSetSummary
           statefulset={statefulset}