@backstage/plugin-kubernetes 0.4.20 → 0.5.1

package/dist/index.esm.js

@@ -4,7 +4,7 @@ import React__default, { Fragment, useState, useEffect, useContext } from 'react
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { Routes, Route } from 'react-router-dom';
 import { Typography, Chip, Grid, makeStyles, createStyles, Button, Drawer, IconButton, FormControlLabel, Switch, Accordion, AccordionSummary, AccordionDetails, Divider, Stepper, Step, StepLabel } from '@material-ui/core';
-import { WarningPanel, InfoCard, Table, SubvalueCell, StatusError, StatusOK, StatusAborted, Button as Button$1, CodeSnippet, StructuredMetadataTable, Page, Content, Progress, MissingAnnotationEmptyState } from '@backstage/core-components';
+import { WarningPanel, InfoCard, Table, StatusOK, SubvalueCell, StatusError, StatusAborted, Button as Button$1, CodeSnippet, StructuredMetadataTable, StatusPending, Page, Content, Progress, MissingAnnotationEmptyState } from '@backstage/core-components';
 import EmptyStateImage from './assets/emptystate.svg';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import Close from '@material-ui/icons/Close';
@@ -12,6 +12,7 @@ import OpenInNewIcon from '@material-ui/icons/OpenInNew';
 import { withStyles } from '@material-ui/core/styles';
 import jsYaml from 'js-yaml';
 import { useInterval } from 'react-use';
+import cronstrue from 'cronstrue';
 import lodash from 'lodash';
 import PauseIcon from '@material-ui/icons/Pause';
 import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
@@ -44,7 +45,7 @@ class KubernetesBackendClient {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
-        ...idToken && {Authorization: `Bearer ${idToken}`}
+        ...idToken && { Authorization: `Bearer ${idToken}` }
       },
       body: JSON.stringify(requestBody)
     });
@@ -59,7 +60,7 @@ class KubernetesBackendClient {
     const response = await fetch(url, {
       method: "GET",
       headers: {
-        ...idToken && {Authorization: `Bearer ${idToken}`}
+        ...idToken && { Authorization: `Bearer ${idToken}` }
       }
     });
     return (await this.handleResponse(response)).items;
@@ -85,7 +86,7 @@ class GoogleKubernetesAuthProvider {
     if ("auth" in requestBody) {
       requestBody.auth.google = googleAuthToken;
     } else {
-      requestBody.auth = {google: googleAuthToken};
+      requestBody.auth = { google: googleAuthToken };
     }
     return requestBody;
   }
@@ -105,7 +106,7 @@ class AwsKubernetesAuthProvider {
 
 class KubernetesAuthProviders {
   constructor(options) {
-    this.kubernetesAuthProviderMap = new Map();
+    this.kubernetesAuthProviderMap = /* @__PURE__ */ new Map();
     this.kubernetesAuthProviderMap.set("google", new GoogleKubernetesAuthProvider(options.googleAuthApi));
     this.kubernetesAuthProviderMap.set("serviceAccount", new ServiceAccountKubernetesAuthProvider());
     this.kubernetesAuthProviderMap.set("aws", new AwsKubernetesAuthProvider());
@@ -131,13 +132,13 @@ const kubernetesPlugin = createPlugin({
         discoveryApi: discoveryApiRef,
         identityApi: identityApiRef
       },
-      factory: ({discoveryApi, identityApi}) => new KubernetesBackendClient({discoveryApi, identityApi})
+      factory: ({ discoveryApi, identityApi }) => new KubernetesBackendClient({ discoveryApi, identityApi })
     }),
     createApiFactory({
       api: kubernetesAuthProvidersApiRef,
-      deps: {googleAuthApi: googleAuthApiRef},
-      factory: ({googleAuthApi}) => {
-        return new KubernetesAuthProviders({googleAuthApi});
+      deps: { googleAuthApi: googleAuthApiRef },
+      factory: ({ googleAuthApi }) => {
+        return new KubernetesAuthProviders({ googleAuthApi });
       }
     })
   ],
@@ -176,7 +177,7 @@ const ErrorPanel$1 = ({
   variant: "body2"
 }, "Errors: ", errorMessage));
 
-const columns$1 = [
+const columns = [
   {
     title: "cluster",
     width: "15%",
@@ -240,15 +241,15 @@ const ErrorEmptyState = () => {
     "data-testid": "emptyStateImg"
   })));
 };
-const ErrorReporting = ({detectedErrors}) => {
+const ErrorReporting = ({ detectedErrors }) => {
   const errors = Array.from(detectedErrors.values()).flat().sort(sortBySeverity);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, errors.length === 0 ? /* @__PURE__ */ React.createElement(InfoCard, {
     title: "Error Reporting"
   }, /* @__PURE__ */ React.createElement(ErrorEmptyState, null)) : /* @__PURE__ */ React.createElement(Table, {
     title: "Error Reporting",
     data: errors,
-    columns: columns$1,
-    options: {paging: true, search: false}
+    columns,
+    options: { paging: true, search: false }
   }));
 };
 
@@ -276,6 +277,12 @@ const groupResponses = (fetchResponse) => {
       case "ingresses":
         prev.ingresses.push(...next.resources);
         break;
+      case "jobs":
+        prev.jobs.push(...next.resources);
+        break;
+      case "cronjobs":
+        prev.cronJobs.push(...next.resources);
+        break;
       case "customresources":
         prev.customResources.push(...next.resources);
         break;
@@ -289,6 +296,8 @@ const groupResponses = (fetchResponse) => {
     configMaps: [],
     horizontalPodAutoscalers: [],
     ingresses: [],
+    jobs: [],
+    cronJobs: [],
     customResources: []
   });
 };
@@ -330,7 +339,7 @@ const containerStatuses = (pod) => {
       return /* @__PURE__ */ React__default.createElement(Fragment, {
         key: `${(_a2 = pod.metadata) == null ? void 0 : _a2.name}-${next.name}`
       }, /* @__PURE__ */ React__default.createElement(SubvalueCell, {
-        value: /* @__PURE__ */ React__default.createElement(StatusError, null, "Container: ", next.name),
+        value: reason === "Completed" ? /* @__PURE__ */ React__default.createElement(StatusOK, null, "Container: ", next.name) : /* @__PURE__ */ React__default.createElement(StatusError, null, "Container: ", next.name),
         subvalue: reason
       }), /* @__PURE__ */ React__default.createElement("br", null));
     };
@@ -363,10 +372,36 @@ const renderCondition = (condition) => {
   }
   return [condition.type, /* @__PURE__ */ React__default.createElement(StatusAborted, null)];
 };
+const currentToDeclaredResourceToPerc = (current, resource) => {
+  if (typeof current === "number" && typeof resource === "number") {
+    return `${Math.round(current / resource * 100)}%`;
+  }
+  const numerator = BigInt(current);
+  const denominator = BigInt(resource);
+  return `${numerator * BigInt(100) / denominator}%`;
+};
+const podStatusToCpuUtil = (podStatus) => {
+  const cpuUtil = podStatus.cpu;
+  let currentUsage = cpuUtil.currentUsage;
+  if (typeof cpuUtil.currentUsage === "number") {
+    currentUsage = cpuUtil.currentUsage / 10;
+  }
+  return /* @__PURE__ */ React__default.createElement(SubvalueCell, {
+    value: `requests: ${currentToDeclaredResourceToPerc(currentUsage, cpuUtil.requestTotal)}`,
+    subvalue: `limits: ${currentToDeclaredResourceToPerc(currentUsage, cpuUtil.limitTotal)}`
+  });
+};
+const podStatusToMemoryUtil = (podStatus) => {
+  const memUtil = podStatus.memory;
+  return /* @__PURE__ */ React__default.createElement(SubvalueCell, {
+    value: `requests: ${currentToDeclaredResourceToPerc(memUtil.currentUsage, memUtil.requestTotal)}`,
+    subvalue: `limits: ${currentToDeclaredResourceToPerc(memUtil.currentUsage, memUtil.limitTotal)}`
+  });
+};
 
 const detectErrorsInObjects = (objects, kind, clusterName, errorMappers) => {
   var _a, _b;
-  const errors = new Map();
+  const errors = /* @__PURE__ */ new Map();
   for (const object of objects) {
     for (const errorMapper of errorMappers) {
       if (errorMapper.errorExists(object)) {
@@ -514,7 +549,7 @@ const hpaErrorMappers = [
 const detectErrorsInHpa = (hpas, clusterName) => detectErrorsInObjects(hpas, "HorizontalPodAutoscaler", clusterName, hpaErrorMappers);
 
 const detectErrors = (objects) => {
-  const errors = new Map();
+  const errors = /* @__PURE__ */ new Map();
   for (const clusterResponse of objects.items) {
     let clusterErrors = [];
     const groupedResponses = groupResponses(clusterResponse.resources);
@@ -572,7 +607,7 @@ const useKubernetesObjects = (entity, intervalMs = 1e4) => {
   };
 };
 
-const PodNamesWithErrorsContext = React__default.createContext(new Set());
+const PodNamesWithErrorsContext = React__default.createContext(/* @__PURE__ */ new Set());
 
 const GroupedResponsesContext = React__default.createContext({
   pods: [],
@@ -582,6 +617,8 @@ const GroupedResponsesContext = React__default.createContext({
   configMaps: [],
   horizontalPodAutoscalers: [],
   ingresses: [],
+  jobs: [],
+  cronJobs: [],
   customResources: []
 });
 
@@ -589,51 +626,86 @@ const ClusterContext = React__default.createContext({
   name: ""
 });
 
-const kindMappings$1 = {
+const kindMappings$2 = {
   deployment: "deployment",
   ingress: "ingress",
   service: "service",
   horizontalpodautoscaler: "deployment"
 };
 function standardFormatter(options) {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const result = new URL(options.dashboardUrl.href);
-  const name = (_a = options.object.metadata) == null ? void 0 : _a.name;
-  const namespace = (_b = options.object.metadata) == null ? void 0 : _b.namespace;
-  const validKind = kindMappings$1[options.kind.toLocaleLowerCase("en-US")];
-  if (namespace) {
-    result.searchParams.set("namespace", namespace);
+  const name = encodeURIComponent((_b = (_a = options.object.metadata) == null ? void 0 : _a.name) != null ? _b : "");
+  const namespace = encodeURIComponent((_d = (_c = options.object.metadata) == null ? void 0 : _c.namespace) != null ? _d : "");
+  const validKind = kindMappings$2[options.kind.toLocaleLowerCase("en-US")];
+  if (!result.pathname.endsWith("/")) {
+    result.pathname += "/";
   }
   if (validKind && name && namespace) {
     result.hash = `/${validKind}/${namespace}/${name}`;
   } else if (namespace) {
     result.hash = "/workloads";
   }
+  if (namespace) {
+    result.hash += `?namespace=${namespace}`;
+  }
   return result;
 }
 
-const kindMappings = {
+const kindMappings$1 = {
   deployment: "apps.deployment",
   ingress: "networking.k8s.io.ingress",
   service: "service",
   horizontalpodautoscaler: "autoscaling.horizontalpodautoscaler"
 };
 function rancherFormatter(options) {
-  var _a, _b;
-  const result = new URL(options.dashboardUrl.href);
-  const name = (_a = options.object.metadata) == null ? void 0 : _a.name;
-  const namespace = (_b = options.object.metadata) == null ? void 0 : _b.namespace;
-  const validKind = kindMappings[options.kind.toLocaleLowerCase("en-US")];
+  var _a, _b, _c, _d;
+  const basePath = new URL(options.dashboardUrl.href);
+  const name = encodeURIComponent((_b = (_a = options.object.metadata) == null ? void 0 : _a.name) != null ? _b : "");
+  const namespace = encodeURIComponent((_d = (_c = options.object.metadata) == null ? void 0 : _c.namespace) != null ? _d : "");
+  const validKind = kindMappings$1[options.kind.toLocaleLowerCase("en-US")];
+  if (!basePath.pathname.endsWith("/")) {
+    basePath.pathname += "/";
+  }
+  let path = "";
   if (validKind && name && namespace) {
-    result.pathname += `explorer/${validKind}/${namespace}/${name}`;
+    path = `explorer/${validKind}/${namespace}/${name}`;
   } else if (namespace) {
-    result.pathname += "explorer/workload";
+    path = "explorer/workload";
   }
-  return result;
+  return new URL(path, basePath);
 }
 
-function openshiftFormatter(_options) {
-  throw new Error("OpenShift formatter is not yet implemented. Please, contribute!");
+const kindMappings = {
+  deployment: "deployments",
+  ingress: "ingresses",
+  service: "services",
+  horizontalpodautoscaler: "horizontalpodautoscalers",
+  persistentvolume: "persistentvolumes"
+};
+function openshiftFormatter(options) {
+  var _a, _b, _c, _d;
+  const basePath = new URL(options.dashboardUrl.href);
+  const name = encodeURIComponent((_b = (_a = options.object.metadata) == null ? void 0 : _a.name) != null ? _b : "");
+  const namespace = encodeURIComponent((_d = (_c = options.object.metadata) == null ? void 0 : _c.namespace) != null ? _d : "");
+  const validKind = kindMappings[options.kind.toLocaleLowerCase("en-US")];
+  if (!basePath.pathname.endsWith("/")) {
+    basePath.pathname += "/";
+  }
+  let path = "";
+  if (namespace) {
+    if (name && validKind) {
+      path = `k8s/ns/${namespace}/${validKind}/${name}`;
+    } else {
+      path = `k8s/cluster/projects/${namespace}`;
+    }
+  } else if (validKind) {
+    path = `k8s/cluster/${validKind}`;
+    if (name) {
+      path += `/${name}`;
+    }
+  }
+  return new URL(path, basePath);
 }
 
 function aksFormatter(_options) {
@@ -675,7 +747,7 @@ function formatClusterLink(options) {
     object: options.object,
     kind: options.kind
   });
-  return `${url.origin}${url.pathname}${url.hash}${url.search}`;
+  return url.toString();
 }
 
 const useDrawerStyles = makeStyles((theme) => createStyles({
@@ -715,7 +787,7 @@ const PodDrawerButton = withStyles({
     textTransform: "none"
   }
 })(Button);
-const ErrorPanel = ({cluster, errorMessage}) => /* @__PURE__ */ React__default.createElement(WarningPanel, {
+const ErrorPanel = ({ cluster, errorMessage }) => /* @__PURE__ */ React__default.createElement(WarningPanel, {
   title: "There was a problem formatting the link to the Kubernetes dashboard",
   message: `Could not format the link to the dashboard of your cluster named '${cluster.name}'. Its dashboardApp property has been set to '${cluster.dashboardApp || "standard"}.'`
 }, errorMessage && /* @__PURE__ */ React__default.createElement(Typography, {
@@ -748,7 +820,7 @@ const KubernetesDrawerContent = ({
   const [isYaml, setIsYaml] = useState(false);
   const classes = useDrawerContentStyles();
   const cluster = useContext(ClusterContext);
-  const {clusterLink, errorMessage} = tryFormatClusterLink({
+  const { clusterLink, errorMessage } = tryFormatClusterLink({
     dashboardUrl: cluster.dashboardUrl,
     dashboardApp: cluster.dashboardApp,
     object,
@@ -877,7 +949,11 @@ const PodDrawer = ({
   });
 };
 
-const columns = [
+const PodNamesWithMetricsContext = React__default.createContext(/* @__PURE__ */ new Map());
+
+const READY_COLUMNS = "READY";
+const RESOURCE_COLUMNS = "RESOURCE";
+const DEFAULT_COLUMNS = [
   {
     title: "name",
     highlight: true,
@@ -892,6 +968,12 @@ const columns = [
       return (_b = (_a = pod.status) == null ? void 0 : _a.phase) != null ? _b : "unknown";
     }
   },
+  {
+    title: "status",
+    render: containerStatuses
+  }
+];
+const READY = [
   {
     title: "containers ready",
     align: "center",
@@ -902,13 +984,41 @@ const columns = [
     align: "center",
     render: totalRestarts,
     type: "numeric"
-  },
-  {
-    title: "status",
-    render: containerStatuses
   }
 ];
-const PodsTable = ({pods}) => {
+const PodsTable = ({ pods, extraColumns = [] }) => {
+  const podNamesWithMetrics = useContext(PodNamesWithMetricsContext);
+  const columns = [...DEFAULT_COLUMNS];
+  if (extraColumns.includes(READY_COLUMNS)) {
+    columns.push(...READY);
+  }
+  if (extraColumns.includes(RESOURCE_COLUMNS)) {
+    const resourceColumns = [
+      {
+        title: "CPU usage %",
+        render: (pod) => {
+          var _a, _b;
+          const metrics = podNamesWithMetrics.get((_b = (_a = pod.metadata) == null ? void 0 : _a.name) != null ? _b : "");
+          if (!metrics) {
+            return "unknown";
+          }
+          return podStatusToCpuUtil(metrics);
+        }
+      },
+      {
+        title: "Memory usage %",
+        render: (pod) => {
+          var _a, _b;
+          const metrics = podNamesWithMetrics.get((_b = (_a = pod.metadata) == null ? void 0 : _a.name) != null ? _b : "");
+          if (!metrics) {
+            return "unknown";
+          }
+          return podStatusToMemoryUtil(metrics);
+        }
+      }
+    ];
+    columns.push(...resourceColumns);
+  }
   const tableStyle = {
     minWidth: "0",
     width: "100%"
@@ -916,7 +1026,7 @@ const PodsTable = ({pods}) => {
   return /* @__PURE__ */ React__default.createElement("div", {
     style: tableStyle
   }, /* @__PURE__ */ React__default.createElement(Table, {
-    options: {paging: true, search: false},
+    options: { paging: true, search: false },
     data: pods,
     columns
   }));
@@ -1033,7 +1143,7 @@ const DeploymentSummary = ({
     item: true,
     xs: 1
   }, /* @__PURE__ */ React__default.createElement(Divider, {
-    style: {height: "5em"},
+    style: { height: "5em" },
     orientation: "vertical"
   })), hpa && /* @__PURE__ */ React__default.createElement(Grid, {
     item: true,
@@ -1083,7 +1193,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}
+    TransitionProps: { unmountOnExit: true }
   }, /* @__PURE__ */ React__default.createElement(AccordionSummary, {
     expandIcon: /* @__PURE__ */ React__default.createElement(ExpandMoreIcon, null)
   }, /* @__PURE__ */ React__default.createElement(DeploymentSummary, {
@@ -1092,7 +1202,8 @@ const DeploymentAccordion = ({
     numberOfPodsWithErrors: podsWithErrors.length,
     hpa: matchingHpa
   })), /* @__PURE__ */ React__default.createElement(AccordionDetails, null, /* @__PURE__ */ React__default.createElement(PodsTable, {
-    pods: ownedPods
+    pods: ownedPods,
+    extraColumns: [READY_COLUMNS, RESOURCE_COLUMNS]
   })));
 };
 const DeploymentsAccordions = ({}) => {
@@ -1150,7 +1261,7 @@ const IngressDrawer = ({
   }, "Ingress"))));
 };
 
-const IngressSummary = ({ingress}) => {
+const IngressSummary = ({ ingress }) => {
   return /* @__PURE__ */ React__default.createElement(Grid, {
     container: true,
     direction: "row",
@@ -1165,20 +1276,20 @@ const IngressSummary = ({ingress}) => {
     item: true,
     xs: 1
   }, /* @__PURE__ */ React__default.createElement(Divider, {
-    style: {height: "5em"},
+    style: { height: "5em" },
     orientation: "vertical"
   })));
 };
-const IngressCard = ({ingress}) => {
+const IngressCard = ({ ingress }) => {
   return /* @__PURE__ */ React__default.createElement(StructuredMetadataTable, {
     metadata: {
       ...ingress.spec
     }
   });
 };
-const IngressAccordion = ({ingress}) => {
+const IngressAccordion = ({ ingress }) => {
   return /* @__PURE__ */ React__default.createElement(Accordion, {
-    TransitionProps: {unmountOnExit: true}
+    TransitionProps: { unmountOnExit: true }
   }, /* @__PURE__ */ React__default.createElement(AccordionSummary, {
     expandIcon: /* @__PURE__ */ React__default.createElement(ExpandMoreIcon, null)
   }, /* @__PURE__ */ React__default.createElement(IngressSummary, {
@@ -1233,7 +1344,7 @@ const ServiceDrawer = ({
   }, "Service"))));
 };
 
-const ServiceSummary = ({service}) => {
+const ServiceSummary = ({ service }) => {
   var _a, _b;
   return /* @__PURE__ */ React__default.createElement(Grid, {
     container: true,
@@ -1249,7 +1360,7 @@ const ServiceSummary = ({service}) => {
     item: true,
     xs: 1
   }, /* @__PURE__ */ React__default.createElement(Divider, {
-    style: {height: "5em"},
+    style: { height: "5em" },
     orientation: "vertical"
   })), /* @__PURE__ */ React__default.createElement(Grid, {
     item: true
@@ -1257,7 +1368,7 @@ const ServiceSummary = ({service}) => {
     variant: "subtitle2"
   }, "Type: ", (_b = (_a = service.spec) == null ? void 0 : _a.type) != null ? _b : "?")));
 };
-const ServiceCard = ({service}) => {
+const ServiceCard = ({ service }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const metadata = {};
   if ((_d = (_c = (_b = (_a = service.status) == null ? void 0 : _a.loadBalancer) == null ? void 0 : _b.ingress) == null ? void 0 : _c.length) != null ? _d : -1 > 0) {
@@ -1277,9 +1388,9 @@ const ServiceCard = ({service}) => {
     }
   });
 };
-const ServiceAccordion = ({service}) => {
+const ServiceAccordion = ({ service }) => {
   return /* @__PURE__ */ React__default.createElement(Accordion, {
-    TransitionProps: {unmountOnExit: true}
+    TransitionProps: { unmountOnExit: true }
   }, /* @__PURE__ */ React__default.createElement(AccordionSummary, {
     expandIcon: /* @__PURE__ */ React__default.createElement(ExpandMoreIcon, null)
   }, /* @__PURE__ */ React__default.createElement(ServiceSummary, {
@@ -1304,6 +1415,214 @@ const ServicesAccordions = ({}) => {
   }))));
 };
 
+const JobDrawer = ({
+  job,
+  expanded
+}) => {
+  var _a, _b;
+  return /* @__PURE__ */ React__default.createElement(KubernetesDrawer, {
+    object: job,
+    expanded,
+    kind: "Job",
+    renderObject: (jobObj) => {
+      var _a2, _b2, _c, _d, _e, _f, _g, _h;
+      return {
+        parallelism: (_b2 = (_a2 = jobObj.spec) == null ? void 0 : _a2.parallelism) != null ? _b2 : "???",
+        completions: (_d = (_c = jobObj.spec) == null ? void 0 : _c.completions) != null ? _d : "???",
+        backoffLimit: (_f = (_e = jobObj.spec) == null ? void 0 : _e.backoffLimit) != null ? _f : "???",
+        startTime: (_h = (_g = jobObj.status) == null ? void 0 : _g.startTime) != null ? _h : "???"
+      };
+    }
+  }, /* @__PURE__ */ React__default.createElement(Grid, {
+    container: true,
+    direction: "column",
+    justifyContent: "flex-start",
+    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"))));
+};
+
+const JobSummary = ({ job }) => {
+  var _a, _b, _c, _d, _e, _f;
+  return /* @__PURE__ */ React__default.createElement(Grid, {
+    container: true,
+    direction: "row",
+    justifyContent: "flex-start",
+    alignItems: "center"
+  }, /* @__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, {
+    item: true,
+    container: true,
+    xs: 8,
+    direction: "column",
+    justifyContent: "flex-start",
+    alignItems: "flex-start"
+  }, /* @__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()), ((_f = job.status) == null ? void 0 : _f.completionTime) && /* @__PURE__ */ React__default.createElement(Grid, {
+    item: true
+  }, "Completion time: ", job.status.completionTime.toString())));
+};
+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
+  })));
+};
+const JobsAccordions = ({ jobs }) => {
+  const groupedResponses = useContext(GroupedResponsesContext);
+  return /* @__PURE__ */ React__default.createElement(Grid, {
+    container: true,
+    direction: "column",
+    justifyContent: "flex-start",
+    alignItems: "flex-start"
+  }, jobs.map((job, i) => /* @__PURE__ */ React__default.createElement(Grid, {
+    container: true,
+    item: true,
+    key: i,
+    xs: true
+  }, /* @__PURE__ */ React__default.createElement(Grid, {
+    item: true,
+    xs: true
+  }, /* @__PURE__ */ React__default.createElement(JobAccordion, {
+    ownedPods: getOwnedResources(job, groupedResponses.pods),
+    job
+  })))));
+};
+
+const CronJobDrawer = ({
+  cronJob,
+  expanded
+}) => {
+  var _a, _b, _c;
+  const namespace = (_a = cronJob.metadata) == null ? void 0 : _a.namespace;
+  return /* @__PURE__ */ React__default.createElement(KubernetesDrawer, {
+    object: cronJob,
+    expanded,
+    kind: "CronJob",
+    renderObject: (cronJobObj) => {
+      var _a2, _b2, _c2, _d, _e, _f, _g, _h;
+      return {
+        schedule: (_b2 = (_a2 = cronJobObj.spec) == null ? void 0 : _a2.schedule) != null ? _b2 : "???",
+        startingDeadlineSeconds: (_d = (_c2 = cronJobObj.spec) == null ? void 0 : _c2.startingDeadlineSeconds) != null ? _d : "???",
+        concurrencyPolicy: (_f = (_e = cronJobObj.spec) == null ? void 0 : _e.concurrencyPolicy) != null ? _f : "???",
+        lastScheduleTime: (_h = (_g = cronJobObj.status) == null ? void 0 : _g.lastScheduleTime) != null ? _h : "???"
+      };
+    }
+  }, /* @__PURE__ */ React__default.createElement(Grid, {
+    container: true,
+    direction: "column",
+    justifyContent: "flex-start",
+    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")), namespace && /* @__PURE__ */ React__default.createElement(Grid, {
+    item: true
+  }, /* @__PURE__ */ React__default.createElement(Chip, {
+    size: "small",
+    label: `namespace: ${namespace}`
+  }))));
+};
+
+const CronJobSummary = ({ cronJob }) => {
+  var _a, _b;
+  return /* @__PURE__ */ React__default.createElement(Grid, {
+    container: true,
+    direction: "row",
+    justifyContent: "flex-start",
+    alignItems: "center"
+  }, /* @__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, {
+    item: true,
+    container: true,
+    xs: 5,
+    direction: "column",
+    justifyContent: "flex-start",
+    alignItems: "flex-start"
+  }, /* @__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} (${cronstrue.toString(cronJob.spec.schedule)})` : "N/A"))));
+};
+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()
+  })));
+};
+const CronJobsAccordions = ({}) => {
+  const groupedResponses = useContext(GroupedResponsesContext);
+  return /* @__PURE__ */ React__default.createElement(Grid, {
+    container: true,
+    direction: "column",
+    justifyContent: "flex-start",
+    alignItems: "flex-start"
+  }, groupedResponses.cronJobs.map((cronJob, i) => /* @__PURE__ */ React__default.createElement(Grid, {
+    container: true,
+    item: true,
+    key: i,
+    xs: true
+  }, /* @__PURE__ */ React__default.createElement(Grid, {
+    item: true,
+    xs: true
+  }, /* @__PURE__ */ React__default.createElement(CronJobAccordion, {
+    ownedJobs: getOwnedResources(cronJob, groupedResponses.jobs),
+    cronJob
+  })))));
+};
+
 const RolloutDrawer = ({
   rollout,
   expanded
@@ -1403,7 +1722,7 @@ const RolloutSummary = ({
     item: true,
     xs: 1
   }, /* @__PURE__ */ React__default.createElement(Divider, {
-    style: {height: "5em"},
+    style: { height: "5em" },
     orientation: "vertical"
   })), hpa && /* @__PURE__ */ React__default.createElement(Grid, {
     item: true,
@@ -1451,7 +1770,7 @@ const RolloutSummary = ({
     }
   }, /* @__PURE__ */ React__default.createElement(PauseIcon, null), /* @__PURE__ */ React__default.createElement(Typography, {
     variant: "subtitle1"
-  }, "Paused (", DateTime.fromISO(pauseTime).toRelative({locale: "en"}), ")"))), abortedMessage && /* @__PURE__ */ React__default.createElement(Grid, {
+  }, "Paused (", DateTime.fromISO(pauseTime).toRelative({ locale: "en" }), ")"))), abortedMessage && /* @__PURE__ */ React__default.createElement(Grid, {
     item: true,
     xs: 3
   }, AbortedTitle));
@@ -1472,7 +1791,7 @@ const RolloutAccordion = ({
   const abortedMessage = findAbortedMessage(rollout);
   return /* @__PURE__ */ React__default.createElement(Accordion, {
     defaultExpanded,
-    TransitionProps: {unmountOnExit: true}
+    TransitionProps: { unmountOnExit: true }
   }, /* @__PURE__ */ React__default.createElement(AccordionSummary, {
     expandIcon: /* @__PURE__ */ React__default.createElement(ExpandMoreIcon, null)
   }, /* @__PURE__ */ React__default.createElement(RolloutSummary, {
@@ -1481,11 +1800,11 @@ const RolloutAccordion = ({
     numberOfPodsWithErrors: podsWithErrors.length,
     hpa: matchingHpa
   })), /* @__PURE__ */ React__default.createElement(AccordionDetails, null, /* @__PURE__ */ React__default.createElement("div", {
-    style: {width: "100%"}
+    style: { width: "100%" }
   }, /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(Typography, {
     variant: "h6"
   }, "Rollout status")), /* @__PURE__ */ React__default.createElement("div", {
-    style: {margin: "1rem"}
+    style: { margin: "1rem" }
   }, abortedMessage && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, AbortedTitle, /* @__PURE__ */ React__default.createElement(Typography, {
     variant: "subtitle2"
   }, abortedMessage)), /* @__PURE__ */ React__default.createElement(StepsProgress, {
@@ -1493,7 +1812,8 @@ const RolloutAccordion = ({
     steps: (_f = (_e = (_d = (_c = rollout.spec) == null ? void 0 : _c.strategy) == null ? void 0 : _d.canary) == null ? void 0 : _e.steps) != null ? _f : [],
     currentStepIndex
   })), /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(PodsTable, {
-    pods: ownedPods
+    pods: ownedPods,
+    extraColumns: [READY_COLUMNS, RESOURCE_COLUMNS]
   })))));
 };
 const RolloutAccordions = ({
@@ -1575,7 +1895,7 @@ const DefaultCustomResourceSummary = ({
     item: true,
     xs: 1
   }, /* @__PURE__ */ React__default.createElement(Divider, {
-    style: {height: "5em"},
+    style: { height: "5em" },
     orientation: "vertical"
   })));
 };
@@ -1586,7 +1906,7 @@ const DefaultCustomResourceAccordion = ({
 }) => {
   return /* @__PURE__ */ React__default.createElement(Accordion, {
     defaultExpanded,
-    TransitionProps: {unmountOnExit: true}
+    TransitionProps: { unmountOnExit: true }
   }, /* @__PURE__ */ React__default.createElement(AccordionSummary, {
     expandIcon: /* @__PURE__ */ React__default.createElement(ExpandMoreIcon, null)
   }, /* @__PURE__ */ React__default.createElement(DefaultCustomResourceSummary, {
@@ -1676,7 +1996,7 @@ const ClusterSummary = ({
     item: true,
     xs: 1
   }, /* @__PURE__ */ React__default.createElement(Divider, {
-    style: {height: "4em"},
+    style: { height: "4em" },
     orientation: "vertical"
   })), /* @__PURE__ */ React__default.createElement(Grid, {
     item: true,
@@ -1691,16 +2011,26 @@ const ClusterSummary = ({
     item: true
   }, numberOfPodsWithErrors > 0 ? /* @__PURE__ */ React__default.createElement(StatusError, null, numberOfPodsWithErrors, " pods with errors") : /* @__PURE__ */ React__default.createElement(StatusOK, null, "No pods with errors"))));
 };
-const Cluster = ({clusterObjects, podsWithErrors}) => {
+const Cluster = ({ clusterObjects, podsWithErrors }) => {
   const groupedResponses = groupResponses(clusterObjects.resources);
+  const podNameToMetrics = clusterObjects.podMetrics.flat().reduce((accum, next) => {
+    var _a;
+    const name = (_a = next.pod.metadata) == null ? void 0 : _a.name;
+    if (name !== void 0) {
+      accum.set(name, next);
+    }
+    return accum;
+  }, /* @__PURE__ */ new Map());
   return /* @__PURE__ */ React__default.createElement(ClusterContext.Provider, {
     value: clusterObjects.cluster
   }, /* @__PURE__ */ React__default.createElement(GroupedResponsesContext.Provider, {
     value: groupedResponses
+  }, /* @__PURE__ */ React__default.createElement(PodNamesWithMetricsContext.Provider, {
+    value: podNameToMetrics
   }, /* @__PURE__ */ React__default.createElement(PodNamesWithErrorsContext.Provider, {
     value: podsWithErrors
   }, /* @__PURE__ */ React__default.createElement(Accordion, {
-    TransitionProps: {unmountOnExit: true}
+    TransitionProps: { unmountOnExit: true }
   }, /* @__PURE__ */ React__default.createElement(AccordionSummary, {
     expandIcon: /* @__PURE__ */ React__default.createElement(ExpandMoreIcon, null)
   }, /* @__PURE__ */ React__default.createElement(ClusterSummary, {
@@ -1718,14 +2048,16 @@ const Cluster = ({clusterObjects, podsWithErrors}) => {
     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(ServicesAccordions, null)), /* @__PURE__ */ React__default.createElement(Grid, {
+    item: true
+  }, /* @__PURE__ */ React__default.createElement(CronJobsAccordions, null)))))))));
 };
 
-const KubernetesContent = ({entity}) => {
+const KubernetesContent = ({ entity }) => {
   var _a;
-  const {kubernetesObjects, error} = useKubernetesObjects(entity);
+  const { kubernetesObjects, error } = useKubernetesObjects(entity);
   const clustersWithErrors = (_a = kubernetesObjects == null ? void 0 : kubernetesObjects.items.filter((r) => r.errors.length > 0)) != null ? _a : [];
-  const detectedErrors = kubernetesObjects !== void 0 ? detectErrors(kubernetesObjects) : new Map();
+  const detectedErrors = kubernetesObjects !== void 0 ? detectErrors(kubernetesObjects) : /* @__PURE__ */ new Map();
   return /* @__PURE__ */ React__default.createElement(Page, {
     themeId: "tool"
   }, /* @__PURE__ */ React__default.createElement(Content, null, kubernetesObjects === void 0 && error === void 0 && /* @__PURE__ */ React__default.createElement(Progress, null), clustersWithErrors.length > 0 && /* @__PURE__ */ React__default.createElement(Grid, {
@@ -1803,7 +2135,7 @@ const isKubernetesAvailable = (entity) => {
 };
 const Router = (_props) => {
   var _a, _b;
-  const {entity} = useEntity();
+  const { entity } = useEntity();
   const kubernetesAnnotationValue = (_a = entity.metadata.annotations) == null ? void 0 : _a[KUBERNETES_ANNOTATION];
   const kubernetesLabelSelectorQueryAnnotationValue = (_b = entity.metadata.annotations) == null ? void 0 : _b[KUBERNETES_LABEL_SELECTOR_QUERY_ANNOTATION];
   if (kubernetesAnnotationValue || kubernetesLabelSelectorQueryAnnotationValue) {