@backstage/plugin-kubernetes 0.4.21 → 0.4.22

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @backstage/plugin-kubernetes
 
+## 0.4.22
+
+### Patch Changes
+
+- 86ed770308: Added accordions to display information on Jobs and CronJobs in the kubernetes plugin. Updated the PodsTable with fewer default columns and the ability to pass in additional ones depending on the use case.
+- Updated dependencies
+  - @backstage/core-components@0.7.6
+  - @backstage/theme@0.2.14
+  - @backstage/core-plugin-api@0.2.2
+  - @backstage/plugin-kubernetes-common@0.1.7
+
 ## 0.4.21
 
 ### Patch Changes

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, SubvalueCell, StatusError, StatusOK, 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';
@@ -176,7 +177,7 @@ const ErrorPanel$1 = ({
   variant: "body2"
 }, "Errors: ", errorMessage));
 
-const columns$1 = [
+const columns = [
   {
     title: "cluster",
     width: "15%",
@@ -247,7 +248,7 @@ const ErrorReporting = ({detectedErrors}) => {
   }, /* @__PURE__ */ React.createElement(ErrorEmptyState, null)) : /* @__PURE__ */ React.createElement(Table, {
     title: "Error Reporting",
     data: errors,
-    columns: columns$1,
+    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: []
   });
 };
@@ -582,6 +591,8 @@ const GroupedResponsesContext = React__default.createContext({
   configMaps: [],
   horizontalPodAutoscalers: [],
   ingresses: [],
+  jobs: [],
+  cronJobs: [],
   customResources: []
 });
 
@@ -912,7 +923,7 @@ const PodDrawer = ({
   });
 };
 
-const columns = [
+const DEFAULT_COLUMNS = [
   {
     title: "name",
     highlight: true,
@@ -927,23 +938,12 @@ const columns = [
       return (_b = (_a = pod.status) == null ? void 0 : _a.phase) != null ? _b : "unknown";
     }
   },
-  {
-    title: "containers ready",
-    align: "center",
-    render: containersReady
-  },
-  {
-    title: "total restarts",
-    align: "center",
-    render: totalRestarts,
-    type: "numeric"
-  },
   {
     title: "status",
     render: containerStatuses
   }
 ];
-const PodsTable = ({pods}) => {
+const PodsTable = ({pods, extraColumns = []}) => {
   const tableStyle = {
     minWidth: "0",
     width: "100%"
@@ -953,7 +953,7 @@ const PodsTable = ({pods}) => {
   }, /* @__PURE__ */ React__default.createElement(Table, {
     options: {paging: true, search: false},
     data: pods,
-    columns
+    columns: DEFAULT_COLUMNS.concat(extraColumns)
   }));
 };
 
@@ -1047,6 +1047,19 @@ const getMatchingHpa = (ownerName, ownerKind, hpas) => {
   });
 };
 
+const deploymentPodColumns = [
+  {
+    title: "containers ready",
+    align: "center",
+    render: containersReady
+  },
+  {
+    title: "total restarts",
+    align: "center",
+    render: totalRestarts,
+    type: "numeric"
+  }
+];
 const DeploymentSummary = ({
   deployment,
   numberOfCurrentPods,
@@ -1127,7 +1140,8 @@ const DeploymentAccordion = ({
     numberOfPodsWithErrors: podsWithErrors.length,
     hpa: matchingHpa
   })), /* @__PURE__ */ React__default.createElement(AccordionDetails, null, /* @__PURE__ */ React__default.createElement(PodsTable, {
-    pods: ownedPods
+    pods: ownedPods,
+    extraColumns: deploymentPodColumns
   })));
 };
 const DeploymentsAccordions = ({}) => {
@@ -1339,6 +1353,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
@@ -1753,7 +1975,9 @@ 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}) => {