@backstage/plugin-kubernetes 0.7.7 → 0.7.8-next.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @backstage/plugin-kubernetes
 
+## 0.7.8-next.1
+
+### Patch Changes
+
+- 145a79a15b: Condenses kubernetes ui plugin to fit more onscreen and increase visibility
+- 628e2bd89a: Updated dependency `@kubernetes/client-node` to `0.18.1`.
+- Updated dependencies
+  - @backstage/core-components@0.12.4-next.0
+  - @backstage/plugin-kubernetes-common@0.6.0-next.1
+  - @backstage/plugin-catalog-react@1.3.0-next.1
+  - @backstage/catalog-model@1.1.6-next.0
+  - @backstage/config@1.0.6
+  - @backstage/core-plugin-api@1.3.0
+  - @backstage/theme@0.2.16
+
+## 0.7.8-next.0
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/plugin-kubernetes-common@0.6.0-next.0
+  - @backstage/plugin-catalog-react@1.3.0-next.0
+  - @backstage/catalog-model@1.1.6-next.0
+
 ## 0.7.7
 
 ### Patch Changes

package/dist/index.esm.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import React__default, { Fragment, useCallback, useState, useContext } from 'react';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { Routes, Route } from 'react-router-dom';
-import { Typography, Chip, makeStyles, createStyles, Button, Drawer, Grid, IconButton, FormControlLabel, Switch, Accordion, AccordionSummary, AccordionDetails, Divider, Stepper, Step, StepLabel } from '@material-ui/core';
+import { Typography, Chip, makeStyles, createStyles, Button, Drawer, Grid, IconButton, FormControlLabel, Switch, Accordion, AccordionSummary, AccordionDetails, Stepper, Step, StepLabel } from '@material-ui/core';
 import { WarningPanel, Table, StatusOK, SubvalueCell, StatusError, StatusAborted, Button as Button$1, CodeSnippet, StructuredMetadataTable, StatusPending, Page, Content, Progress, MissingAnnotationEmptyState } from '@backstage/core-components';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import Close from '@material-ui/icons/Close';
@@ -320,7 +320,7 @@ const ErrorReporting = ({ detectedErrors }) => {
       title: "Error Reporting",
       data: errors,
       columns,
-      options: { paging: true, search: false }
+      options: { paging: true, search: false, emptyRowsWhenPaging: false }
     }
   ));
 };
@@ -1242,7 +1242,8 @@ const DEFAULT_COLUMNS = [
     render: (pod) => {
       var _a, _b;
       return (_b = (_a = pod.status) == null ? void 0 : _a.phase) != null ? _b : "unknown";
-    }
+    },
+    width: "auto"
   },
   {
     title: "status",
@@ -1253,13 +1254,15 @@ const READY = [
   {
     title: "containers ready",
     align: "center",
-    render: containersReady
+    render: containersReady,
+    width: "auto"
   },
   {
     title: "total restarts",
     align: "center",
     render: totalRestarts,
-    type: "numeric"
+    type: "numeric",
+    width: "auto"
   }
 ];
 const PodsTable = ({ pods, extraColumns = [] }) => {
@@ -1279,7 +1282,8 @@ const PodsTable = ({ pods, extraColumns = [] }) => {
             return "unknown";
           }
           return podStatusToCpuUtil(metrics);
-        }
+        },
+        width: "auto"
       },
       {
         title: "Memory usage %",
@@ -1290,7 +1294,8 @@ const PodsTable = ({ pods, extraColumns = [] }) => {
             return "unknown";
           }
           return podStatusToMemoryUtil(metrics);
-        }
+        },
+        width: "auto"
       }
     ];
     columns.push(...resourceColumns);
@@ -1299,11 +1304,15 @@ const PodsTable = ({ pods, extraColumns = [] }) => {
     minWidth: "0",
     width: "100%"
   };
+  const usePods = pods.map((p) => {
+    var _a;
+    return { ...p, id: (_a = p.metadata) == null ? void 0 : _a.uid };
+  });
   return /* @__PURE__ */ React__default.createElement("div", { style: tableStyle }, /* @__PURE__ */ React__default.createElement(
     Table,
     {
-      options: { paging: true, search: false },
-      data: pods,
+      options: { paging: true, search: false, emptyRowsWhenPaging: false },
+      data: usePods,
       columns
     }
   ));
@@ -1344,8 +1353,8 @@ const DeploymentDrawer = ({
         alignItems: "flex-start",
         spacing: 0
       },
-      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "h5" }, (_c = (_b = deployment.metadata) == null ? void 0 : _b.name) != null ? _c : "unknown object")),
-      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { color: "textSecondary", variant: "body1" }, "Deployment")),
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "body1" }, (_c = (_b = deployment.metadata) == null ? void 0 : _b.name) != null ? _c : "unknown object")),
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { color: "textSecondary", variant: "subtitle1" }, "Deployment")),
       namespace && /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Chip, { size: "small", label: `namespace: ${namespace}` }))
     )
   );
@@ -1415,12 +1424,12 @@ const DeploymentSummary = ({
     {
       container: true,
       direction: "row",
-      justifyContent: "flex-start",
-      alignItems: "center"
+      justifyContent: "space-between",
+      alignItems: "center",
+      spacing: 0
     },
-    /* @__PURE__ */ React__default.createElement(Grid, { xs: 3, item: true }, /* @__PURE__ */ React__default.createElement(DeploymentDrawer, { deployment })),
-    /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 1 }, /* @__PURE__ */ React__default.createElement(Divider, { style: { height: "5em" }, orientation: "vertical" })),
-    hpa && /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 3 }, /* @__PURE__ */ React__default.createElement(HorizontalPodAutoscalerDrawer, { hpa }, /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement(Grid, { xs: 4, item: true }, /* @__PURE__ */ React__default.createElement(DeploymentDrawer, { deployment })),
+    hpa && /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 4 }, /* @__PURE__ */ React__default.createElement(HorizontalPodAutoscalerDrawer, { hpa }, /* @__PURE__ */ React__default.createElement(
       Grid,
       {
         item: true,
@@ -1439,10 +1448,11 @@ const DeploymentSummary = ({
       {
         item: true,
         container: true,
-        xs: 3,
+        xs: 4,
         direction: "column",
         justifyContent: "flex-start",
-        alignItems: "flex-start"
+        alignItems: "flex-end",
+        spacing: 0
       },
       /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(StatusOK, null, numberOfCurrentPods, " pods")),
       /* @__PURE__ */ React__default.createElement(Grid, { item: true }, numberOfPodsWithErrors > 0 ? /* @__PURE__ */ React__default.createElement(StatusError, null, numberOfPodsWithErrors, " pod", numberOfPodsWithErrors > 1 ? "s" : "", " with errors") : /* @__PURE__ */ React__default.createElement(StatusOK, null, "No pods with errors"))
@@ -1461,7 +1471,7 @@ const DeploymentAccordion = ({
       return podNamesWithErrors.has((_b = (_a = p.metadata) == null ? void 0 : _a.name) != null ? _b : "");
     }
   );
-  return /* @__PURE__ */ React__default.createElement(Accordion, { TransitionProps: { unmountOnExit: true } }, /* @__PURE__ */ React__default.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React__default.createElement(ExpandMoreIcon, null) }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(Accordion, { TransitionProps: { unmountOnExit: true }, variant: "outlined" }, /* @__PURE__ */ React__default.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React__default.createElement(ExpandMoreIcon, null) }, /* @__PURE__ */ React__default.createElement(
     DeploymentSummary,
     {
       deployment,
@@ -1549,8 +1559,8 @@ const StatefulSetDrawer = ({
         alignItems: "flex-start",
         spacing: 0
       },
-      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "h5" }, (_c = (_b = statefulset.metadata) == null ? void 0 : _b.name) != null ? _c : "unknown object")),
-      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { color: "textSecondary", variant: "body1" }, "Stateful Set")),
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "body1" }, (_c = (_b = statefulset.metadata) == null ? void 0 : _b.name) != null ? _c : "unknown object")),
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { color: "textSecondary", variant: "subtitle1" }, "Stateful Set")),
       namespace && /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Chip, { size: "small", label: `namespace: ${namespace}` }))
     )
   );
@@ -1568,11 +1578,11 @@ const StatefulSetSummary = ({
     {
       container: true,
       direction: "row",
-      justifyContent: "flex-start",
-      alignItems: "center"
+      justifyContent: "space-between",
+      alignItems: "center",
+      spacing: 0
     },
-    /* @__PURE__ */ React__default.createElement(Grid, { xs: 3, item: true }, /* @__PURE__ */ React__default.createElement(StatefulSetDrawer, { statefulset })),
-    /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 1 }, /* @__PURE__ */ React__default.createElement(Divider, { style: { height: "5em" }, orientation: "vertical" })),
+    /* @__PURE__ */ React__default.createElement(Grid, { xs: 6, item: true }, /* @__PURE__ */ React__default.createElement(StatefulSetDrawer, { statefulset })),
     hpa && /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 3 }, /* @__PURE__ */ React__default.createElement(HorizontalPodAutoscalerDrawer, { hpa }, /* @__PURE__ */ React__default.createElement(
       Grid,
       {
@@ -1595,7 +1605,8 @@ const StatefulSetSummary = ({
         xs: 3,
         direction: "column",
         justifyContent: "flex-start",
-        alignItems: "flex-start"
+        alignItems: "flex-start",
+        spacing: 0
       },
       /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(StatusOK, null, numberOfCurrentPods, " pods")),
       /* @__PURE__ */ React__default.createElement(Grid, { item: true }, numberOfPodsWithErrors > 0 ? /* @__PURE__ */ React__default.createElement(StatusError, null, numberOfPodsWithErrors, " pod", numberOfPodsWithErrors > 1 ? "s" : "", " with errors") : /* @__PURE__ */ React__default.createElement(StatusOK, null, "No pods with errors"))
@@ -1614,7 +1625,7 @@ const StatefulSetAccordion = ({
       return podNamesWithErrors.has((_b = (_a = p.metadata) == null ? void 0 : _a.name) != null ? _b : "");
     }
   );
-  return /* @__PURE__ */ React__default.createElement(Accordion, { TransitionProps: { unmountOnExit: true } }, /* @__PURE__ */ React__default.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React__default.createElement(ExpandMoreIcon, null) }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(Accordion, { TransitionProps: { unmountOnExit: true }, variant: "outlined" }, /* @__PURE__ */ React__default.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React__default.createElement(ExpandMoreIcon, null) }, /* @__PURE__ */ React__default.createElement(
     StatefulSetSummary,
     {
       statefulset,
@@ -1685,8 +1696,8 @@ const IngressDrawer = ({
         alignItems: "flex-start",
         spacing: 0
       },
-      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "h5" }, (_b = (_a = ingress.metadata) == null ? void 0 : _a.name) != null ? _b : "unknown object")),
-      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { color: "textSecondary", variant: "body1" }, "Ingress"))
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "body1" }, (_b = (_a = ingress.metadata) == null ? void 0 : _a.name) != null ? _b : "unknown object")),
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { color: "textSecondary", variant: "subtitle1" }, "Ingress"))
     )
   );
 };
@@ -1700,8 +1711,7 @@ const IngressSummary = ({ ingress }) => {
       justifyContent: "flex-start",
       alignItems: "center"
     },
-    /* @__PURE__ */ React__default.createElement(Grid, { xs: 3, item: true }, /* @__PURE__ */ React__default.createElement(IngressDrawer, { ingress })),
-    /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 1 }, /* @__PURE__ */ React__default.createElement(Divider, { style: { height: "5em" }, orientation: "vertical" }))
+    /* @__PURE__ */ React__default.createElement(Grid, { xs: 12, item: true }, /* @__PURE__ */ React__default.createElement(IngressDrawer, { ingress }))
   );
 };
 const IngressCard = ({ ingress }) => {
@@ -1755,8 +1765,8 @@ const ServiceDrawer = ({
         alignItems: "flex-start",
         spacing: 0
       },
-      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "h5" }, (_b = (_a = service.metadata) == null ? void 0 : _a.name) != null ? _b : "unknown object")),
-      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { color: "textSecondary", variant: "body1" }, "Service"))
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "body1" }, (_b = (_a = service.metadata) == null ? void 0 : _a.name) != null ? _b : "unknown object")),
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { color: "textSecondary", variant: "subtitle1" }, "Service"))
     )
   );
 };
@@ -1768,11 +1778,11 @@ const ServiceSummary = ({ service }) => {
     {
       container: true,
       direction: "row",
-      justifyContent: "flex-start",
-      alignItems: "center"
+      justifyContent: "space-between",
+      alignItems: "center",
+      spacing: 0
     },
-    /* @__PURE__ */ React__default.createElement(Grid, { xs: 3, item: true }, /* @__PURE__ */ React__default.createElement(ServiceDrawer, { service })),
-    /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 1 }, /* @__PURE__ */ React__default.createElement(Divider, { style: { height: "5em" }, orientation: "vertical" })),
+    /* @__PURE__ */ React__default.createElement(Grid, { xs: 8, item: true }, /* @__PURE__ */ React__default.createElement(ServiceDrawer, { service })),
     /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "subtitle2" }, "Type: ", (_b = (_a = service.spec) == null ? void 0 : _a.type) != null ? _b : "?"))
   );
 };
@@ -1800,7 +1810,7 @@ const ServiceCard = ({ service }) => {
   );
 };
 const ServiceAccordion = ({ service }) => {
-  return /* @__PURE__ */ React__default.createElement(Accordion, { TransitionProps: { unmountOnExit: true } }, /* @__PURE__ */ React__default.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React__default.createElement(ExpandMoreIcon, null) }, /* @__PURE__ */ React__default.createElement(ServiceSummary, { service })), /* @__PURE__ */ React__default.createElement(AccordionDetails, null, /* @__PURE__ */ React__default.createElement(ServiceCard, { service })));
+  return /* @__PURE__ */ React__default.createElement(Accordion, { TransitionProps: { unmountOnExit: true }, variant: "outlined" }, /* @__PURE__ */ React__default.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React__default.createElement(ExpandMoreIcon, null) }, /* @__PURE__ */ React__default.createElement(ServiceSummary, { service })), /* @__PURE__ */ React__default.createElement(AccordionDetails, null, /* @__PURE__ */ React__default.createElement(ServiceCard, { service })));
 };
 const ServicesAccordions = ({}) => {
   const groupedResponses = useContext(GroupedResponsesContext);
@@ -1846,8 +1856,8 @@ const JobDrawer = ({
         alignItems: "flex-start",
         spacing: 0
       },
-      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "h6" }, (_b = (_a = job.metadata) == null ? void 0 : _a.name) != null ? _b : "unknown object")),
-      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { color: "textSecondary", variant: "body1" }, "Job"))
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "body1" }, (_b = (_a = job.metadata) == null ? void 0 : _a.name) != null ? _b : "unknown object")),
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { color: "textSecondary", variant: "subtitle1" }, "Job"))
     )
   );
 };
@@ -1859,20 +1869,21 @@ const JobSummary = ({ job }) => {
     {
       container: true,
       direction: "row",
-      justifyContent: "flex-start",
-      alignItems: "center"
+      justifyContent: "space-between",
+      alignItems: "center",
+      spacing: 0
     },
-    /* @__PURE__ */ React__default.createElement(Grid, { xs: 3, item: true }, /* @__PURE__ */ React__default.createElement(JobDrawer, { job })),
-    /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 1 }, /* @__PURE__ */ React__default.createElement(Divider, { style: { height: "5em" }, orientation: "vertical" })),
+    /* @__PURE__ */ React__default.createElement(Grid, { xs: 6, item: true }, /* @__PURE__ */ React__default.createElement(JobDrawer, { job })),
     /* @__PURE__ */ React__default.createElement(
       Grid,
       {
         item: true,
         container: true,
-        xs: 8,
+        xs: 6,
         direction: "column",
         justifyContent: "flex-start",
-        alignItems: "flex-start"
+        alignItems: "flex-end",
+        spacing: 0
       },
       /* @__PURE__ */ React__default.createElement(Grid, { item: true }, ((_a = job.status) == null ? void 0 : _a.succeeded) && /* @__PURE__ */ React__default.createElement(StatusOK, null, "Succeeded"), ((_b = job.status) == null ? void 0 : _b.active) && /* @__PURE__ */ React__default.createElement(StatusPending, null, "Running"), ((_c = job.status) == null ? void 0 : _c.failed) && /* @__PURE__ */ React__default.createElement(StatusError, null, "Failed")),
       /* @__PURE__ */ React__default.createElement(Grid, { item: true }, "Start time: ", (_e = (_d = job.status) == null ? void 0 : _d.startTime) == null ? void 0 : _e.toString()),
@@ -1881,7 +1892,7 @@ const JobSummary = ({ job }) => {
   );
 };
 const JobAccordion = ({ job, ownedPods }) => {
-  return /* @__PURE__ */ React__default.createElement(Accordion, { TransitionProps: { unmountOnExit: true } }, /* @__PURE__ */ React__default.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React__default.createElement(ExpandMoreIcon, null) }, /* @__PURE__ */ React__default.createElement(JobSummary, { job })), /* @__PURE__ */ React__default.createElement(AccordionDetails, null, /* @__PURE__ */ React__default.createElement(PodsTable, { pods: ownedPods })));
+  return /* @__PURE__ */ React__default.createElement(Accordion, { TransitionProps: { unmountOnExit: true }, variant: "outlined" }, /* @__PURE__ */ React__default.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React__default.createElement(ExpandMoreIcon, null) }, /* @__PURE__ */ React__default.createElement(JobSummary, { job })), /* @__PURE__ */ React__default.createElement(AccordionDetails, null, /* @__PURE__ */ React__default.createElement(PodsTable, { pods: ownedPods })));
 };
 const JobsAccordions = ({ jobs }) => {
   const groupedResponses = useContext(GroupedResponsesContext);
@@ -1934,8 +1945,8 @@ const CronJobDrawer = ({
         alignItems: "flex-start",
         spacing: 0
       },
-      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "h5" }, (_c = (_b = cronJob.metadata) == null ? void 0 : _b.name) != null ? _c : "unknown object")),
-      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { color: "textSecondary", variant: "body1" }, "CronJob")),
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "body1" }, (_c = (_b = cronJob.metadata) == null ? void 0 : _b.name) != null ? _c : "unknown object")),
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { color: "textSecondary", variant: "subtitle1" }, "CronJob")),
       namespace && /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Chip, { size: "small", label: `namespace: ${namespace}` }))
     )
   );
@@ -1966,20 +1977,21 @@ const CronJobSummary = ({ cronJob }) => {
     {
       container: true,
       direction: "row",
-      justifyContent: "flex-start",
-      alignItems: "center"
+      justifyContent: "space-between",
+      alignItems: "center",
+      spacing: 0
     },
-    /* @__PURE__ */ React__default.createElement(Grid, { xs: 3, item: true }, /* @__PURE__ */ React__default.createElement(CronJobDrawer, { cronJob })),
-    /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 1 }, /* @__PURE__ */ React__default.createElement(Divider, { style: { height: "5em" }, orientation: "vertical" })),
+    /* @__PURE__ */ React__default.createElement(Grid, { xs: 6, item: true }, /* @__PURE__ */ React__default.createElement(CronJobDrawer, { cronJob })),
     /* @__PURE__ */ React__default.createElement(
       Grid,
       {
         item: true,
         container: true,
-        xs: 5,
+        xs: 6,
         direction: "column",
         justifyContent: "flex-start",
-        alignItems: "flex-start"
+        alignItems: "flex-end",
+        spacing: 0
       },
       /* @__PURE__ */ React__default.createElement(Grid, { item: true }, ((_a = cronJob.spec) == null ? void 0 : _a.suspend) ? /* @__PURE__ */ React__default.createElement(StatusError, null, "Suspended") : /* @__PURE__ */ React__default.createElement(StatusOK, null, "Active")),
       /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "body1" }, "Schedule:", " ", ((_b = cronJob.spec) == null ? void 0 : _b.schedule) ? `${cronJob.spec.schedule} (${humanizeCron(
@@ -1989,7 +2001,7 @@ const CronJobSummary = ({ cronJob }) => {
   );
 };
 const CronJobAccordion = ({ cronJob, ownedJobs }) => {
-  return /* @__PURE__ */ React__default.createElement(Accordion, { TransitionProps: { unmountOnExit: true } }, /* @__PURE__ */ React__default.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React__default.createElement(ExpandMoreIcon, null) }, /* @__PURE__ */ React__default.createElement(CronJobSummary, { cronJob })), /* @__PURE__ */ React__default.createElement(AccordionDetails, null, /* @__PURE__ */ React__default.createElement(JobsAccordions, { jobs: ownedJobs.reverse() })));
+  return /* @__PURE__ */ React__default.createElement(Accordion, { TransitionProps: { unmountOnExit: true }, variant: "outlined" }, /* @__PURE__ */ React__default.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React__default.createElement(ExpandMoreIcon, null) }, /* @__PURE__ */ React__default.createElement(CronJobSummary, { cronJob })), /* @__PURE__ */ React__default.createElement(AccordionDetails, null, /* @__PURE__ */ React__default.createElement(JobsAccordions, { jobs: ownedJobs.reverse() })));
 };
 const CronJobsAccordions = ({}) => {
   const groupedResponses = useContext(GroupedResponsesContext);
@@ -2033,8 +2045,8 @@ const RolloutDrawer = ({
         alignItems: "flex-start",
         spacing: 0
       },
-      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "h5" }, (_b = (_a = rollout.metadata) == null ? void 0 : _a.name) != null ? _b : "unknown object")),
-      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { color: "textSecondary", variant: "body1" }, "Rollout"))
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "body1" }, (_b = (_a = rollout.metadata) == null ? void 0 : _a.name) != null ? _b : "unknown object")),
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { color: "textSecondary", variant: "subtitle1" }, "Rollout"))
     )
   );
 };
@@ -2097,11 +2109,11 @@ const RolloutSummary = ({
     {
       container: true,
       direction: "row",
-      justifyContent: "flex-start",
-      alignItems: "center"
+      justifyContent: "space-between",
+      alignItems: "center",
+      spacing: 0
     },
-    /* @__PURE__ */ React__default.createElement(Grid, { xs: 3, item: true }, /* @__PURE__ */ React__default.createElement(RolloutDrawer, { rollout })),
-    /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 1 }, /* @__PURE__ */ React__default.createElement(Divider, { style: { height: "5em" }, orientation: "vertical" })),
+    /* @__PURE__ */ React__default.createElement(Grid, { xs: 6, item: true }, /* @__PURE__ */ React__default.createElement(RolloutDrawer, { rollout })),
     hpa && /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 3 }, /* @__PURE__ */ React__default.createElement(HorizontalPodAutoscalerDrawer, { hpa }, /* @__PURE__ */ React__default.createElement(
       Grid,
       {
@@ -2124,7 +2136,8 @@ const RolloutSummary = ({
         xs: 3,
         direction: "column",
         justifyContent: "flex-start",
-        alignItems: "flex-start"
+        alignItems: "flex-end",
+        spacing: 0
       },
       /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(StatusOK, null, numberOfCurrentPods, " pods")),
       /* @__PURE__ */ React__default.createElement(Grid, { item: true }, numberOfPodsWithErrors > 0 ? /* @__PURE__ */ React__default.createElement(StatusError, null, numberOfPodsWithErrors, " pod", numberOfPodsWithErrors > 1 ? "s" : "", " with errors") : /* @__PURE__ */ React__default.createElement(StatusOK, null, "No pods with errors"))
@@ -2164,7 +2177,8 @@ const RolloutAccordion = ({
     Accordion,
     {
       defaultExpanded,
-      TransitionProps: { unmountOnExit: true }
+      TransitionProps: { unmountOnExit: true },
+      variant: "outlined"
     },
     /* @__PURE__ */ React__default.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React__default.createElement(ExpandMoreIcon, null) }, /* @__PURE__ */ React__default.createElement(
       RolloutSummary,
@@ -2255,8 +2269,8 @@ const DefaultCustomResourceDrawer = ({
         alignItems: "flex-start",
         spacing: 0
       },
-      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "h5" }, (_b = (_a = customResource.metadata) == null ? void 0 : _a.name) != null ? _b : "unknown object")),
-      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { color: "textSecondary", variant: "body1" }, capitalizedName))
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "body1" }, (_b = (_a = customResource.metadata) == null ? void 0 : _a.name) != null ? _b : "unknown object")),
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { color: "textSecondary", variant: "subtitle1" }, capitalizedName))
     )
   );
 };
@@ -2270,17 +2284,17 @@ const DefaultCustomResourceSummary = ({
     {
       container: true,
       direction: "row",
-      justifyContent: "flex-start",
-      alignItems: "center"
+      justifyContent: "space-between",
+      alignItems: "center",
+      spacing: 0
     },
-    /* @__PURE__ */ React__default.createElement(Grid, { xs: 3, item: true }, /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement(Grid, { xs: 12, item: true }, /* @__PURE__ */ React__default.createElement(
       DefaultCustomResourceDrawer,
       {
         customResource,
         customResourceName
       }
-    )),
-    /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 1 }, /* @__PURE__ */ React__default.createElement(Divider, { style: { height: "5em" }, orientation: "vertical" }))
+    ))
   );
 };
 const DefaultCustomResourceAccordion = ({
@@ -2292,7 +2306,8 @@ const DefaultCustomResourceAccordion = ({
     Accordion,
     {
       defaultExpanded,
-      TransitionProps: { unmountOnExit: true }
+      TransitionProps: { unmountOnExit: true },
+      variant: "outlined"
     },
     /* @__PURE__ */ React__default.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React__default.createElement(ExpandMoreIcon, null) }, /* @__PURE__ */ React__default.createElement(
       DefaultCustomResourceSummary,
@@ -2363,13 +2378,14 @@ const ClusterSummary = ({
     {
       container: true,
       direction: "row",
-      justifyContent: "flex-start",
-      alignItems: "flex-start"
+      justifyContent: "space-between",
+      alignItems: "flex-start",
+      spacing: 0
     },
     /* @__PURE__ */ React__default.createElement(
       Grid,
       {
-        xs: 4,
+        xs: 6,
         item: true,
         container: true,
         direction: "column",
@@ -2377,9 +2393,8 @@ const ClusterSummary = ({
         alignItems: "flex-start",
         spacing: 0
       },
-      /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "h3" }, clusterName), /* @__PURE__ */ React__default.createElement(Typography, { color: "textSecondary", variant: "body1" }, "Cluster"))
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "body1" }, clusterName), /* @__PURE__ */ React__default.createElement(Typography, { color: "textSecondary", variant: "subtitle1" }, "Cluster"))
     ),
-    /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 1 }, /* @__PURE__ */ React__default.createElement(Divider, { style: { height: "4em" }, orientation: "vertical" })),
     /* @__PURE__ */ React__default.createElement(
       Grid,
       {
@@ -2388,7 +2403,8 @@ const ClusterSummary = ({
         xs: 3,
         direction: "column",
         justifyContent: "flex-start",
-        alignItems: "flex-start"
+        alignItems: "flex-end",
+        spacing: 0
       },
       /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(StatusOK, null, totalNumberOfPods, " pods")),
       /* @__PURE__ */ React__default.createElement(Grid, { item: true }, numberOfPodsWithErrors > 0 ? /* @__PURE__ */ React__default.createElement(StatusError, null, numberOfPodsWithErrors, " pods with errors") : /* @__PURE__ */ React__default.createElement(StatusOK, null, "No pods with errors"))
@@ -2412,7 +2428,7 @@ const Cluster = ({ clusterObjects, podsWithErrors }) => {
       totalNumberOfPods: groupedResponses.pods.length,
       numberOfPodsWithErrors: podsWithErrors.size
     }
-  )), /* @__PURE__ */ React__default.createElement(AccordionDetails, null, /* @__PURE__ */ React__default.createElement(Grid, { container: true, direction: "column" }, /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(CustomResources, null)), /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(DeploymentsAccordions, null)), /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(StatefulSetsAccordions, null)), /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(IngressesAccordions, null)), /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(ServicesAccordions, null)), /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(CronJobsAccordions, null)))))))));
+  )), /* @__PURE__ */ React__default.createElement(AccordionDetails, null, /* @__PURE__ */ React__default.createElement(Grid, { container: true, direction: "column" }, groupedResponses.customResources.length > 0 ? /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(CustomResources, null)) : void 0, groupedResponses.deployments.length > 0 ? /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(DeploymentsAccordions, null)) : void 0, groupedResponses.statefulsets.length > 0 ? /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(StatefulSetsAccordions, null)) : void 0, groupedResponses.ingresses.length > 0 ? /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(IngressesAccordions, null)) : void 0, groupedResponses.services.length > 0 ? /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(ServicesAccordions, null)) : void 0, groupedResponses.cronJobs.length > 0 ? /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(CronJobsAccordions, null)) : void 0)))))));
 };
 
 const KubernetesContent = ({