@backstage/plugin-kubernetes 0.4.18 → 0.4.22

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @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
+
+- 3739d3f773: Implement support for formatting OpenShift dashboard url links
+- Updated dependencies
+  - @backstage/plugin-kubernetes-common@0.1.6
+  - @backstage/core-plugin-api@0.2.1
+  - @backstage/core-components@0.7.5
+
+## 0.4.20
+
+### Patch Changes
+
+- a125278b81: Refactor out the deprecated path and icon from RouteRefs
+- Updated dependencies
+  - @backstage/catalog-model@0.9.7
+  - @backstage/plugin-catalog-react@0.6.4
+  - @backstage/core-components@0.7.4
+  - @backstage/core-plugin-api@0.2.0
+
+## 0.4.19
+
+### Patch Changes
+
+- 9f3dd76bc7: fix: kubernetes plugin shall pass id token on get clusters request if possible
+- Updated dependencies
+  - @backstage/core-components@0.7.3
+  - @backstage/theme@0.2.13
+  - @backstage/core-plugin-api@0.1.13
+  - @backstage/plugin-catalog-react@0.6.3
+
 ## 0.4.18
 
 ### 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';
@@ -54,9 +55,13 @@ class KubernetesBackendClient {
     return await this.postRequired(`/services/${requestBody.entity.metadata.name}`, requestBody);
   }
   async getClusters() {
+    const idToken = await this.identityApi.getIdToken();
     const url = `${await this.discoveryApi.getBaseUrl("kubernetes")}/clusters`;
     const response = await fetch(url, {
-      method: "GET"
+      method: "GET",
+      headers: {
+        ...idToken && {Authorization: `Bearer ${idToken}`}
+      }
     });
     return (await this.handleResponse(response)).items;
   }
@@ -116,8 +121,7 @@ class KubernetesAuthProviders {
 }
 
 const rootCatalogKubernetesRouteRef = createRouteRef({
-  path: "*",
-  title: "Kubernetes"
+  id: "kubernetes"
 });
 const kubernetesPlugin = createPlugin({
   id: "kubernetes",
@@ -173,7 +177,7 @@ const ErrorPanel$1 = ({
   variant: "body2"
 }, "Errors: ", errorMessage));
 
-const columns$1 = [
+const columns = [
   {
     title: "cluster",
     width: "15%",
@@ -244,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}
   }));
 };
@@ -273,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;
@@ -286,6 +296,8 @@ const groupResponses = (fetchResponse) => {
     configMaps: [],
     horizontalPodAutoscalers: [],
     ingresses: [],
+    jobs: [],
+    cronJobs: [],
     customResources: []
   });
 };
@@ -579,6 +591,8 @@ const GroupedResponsesContext = React__default.createContext({
   configMaps: [],
   horizontalPodAutoscalers: [],
   ingresses: [],
+  jobs: [],
+  cronJobs: [],
   customResources: []
 });
 
@@ -586,51 +600,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) {
@@ -672,7 +721,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({
@@ -874,7 +923,7 @@ const PodDrawer = ({
   });
 };
 
-const columns = [
+const DEFAULT_COLUMNS = [
   {
     title: "name",
     highlight: true,
@@ -889,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%"
@@ -915,7 +953,7 @@ const PodsTable = ({pods}) => {
   }, /* @__PURE__ */ React__default.createElement(Table, {
     options: {paging: true, search: false},
     data: pods,
-    columns
+    columns: DEFAULT_COLUMNS.concat(extraColumns)
   }));
 };
 
@@ -1009,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,
@@ -1089,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 = ({}) => {
@@ -1301,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
@@ -1715,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}) => {
@@ -1805,7 +2067,7 @@ const Router = (_props) => {
   const kubernetesLabelSelectorQueryAnnotationValue = (_b = entity.metadata.annotations) == null ? void 0 : _b[KUBERNETES_LABEL_SELECTOR_QUERY_ANNOTATION];
   if (kubernetesAnnotationValue || kubernetesLabelSelectorQueryAnnotationValue) {
     return /* @__PURE__ */ React__default.createElement(Routes, null, /* @__PURE__ */ React__default.createElement(Route, {
-      path: `/${rootCatalogKubernetesRouteRef.path}`,
+      path: "/",
       element: /* @__PURE__ */ React__default.createElement(KubernetesContent, {
         entity
       })