@backstage/plugin-kubernetes-react 0.2.1 → 0.3.0-next.1

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @backstage/plugin-kubernetes-react
 
+## 0.3.0-next.1
+
+### Patch Changes
+
+- 3c184af: Extracted common dialog component.
+- Updated dependencies
+  - @backstage/core-components@0.14.0-next.0
+  - @backstage/catalog-model@1.4.4-next.0
+  - @backstage/core-plugin-api@1.8.3-next.0
+  - @backstage/errors@1.2.3
+  - @backstage/types@1.1.1
+  - @backstage/plugin-kubernetes-common@0.7.4-next.1
+
+## 0.3.0-next.0
+
+### Minor Changes
+
+- 0d526c8: **BREAKING** The pod exec terminal is now disabled by default since there are several scenarios where it is known not to work. It can be re-enabled at your own risk by setting the config parameter `kubernetes.podExecTerminal.enabled` to `true`.
+
+### Patch Changes
+
+- 536f67d: Fix broken XtermJS CSS import
+- db1054b: Fixed a bug where the logs dialog and any other functionality depending on the proxy endpoint would fail for clusters configured with the OIDC auth provider.
+- Updated dependencies
+  - @backstage/plugin-kubernetes-common@0.7.4-next.0
+  - @backstage/core-components@0.13.10
+  - @backstage/catalog-model@1.4.3
+  - @backstage/core-plugin-api@1.8.2
+  - @backstage/errors@1.2.3
+  - @backstage/types@1.1.1
+
 ## 0.2.1
 
 ### Patch Changes

package/config.d.ts

@@ -0,0 +1,31 @@
+import { PodExecTerminal } from './src/components/PodExecTerminal/PodExecTerminal';
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export interface Config {
+  kubernetes?: {
+    /**
+     * Pod Exec Terminal config
+     */
+    podExecTerminal?: {
+      /**
+       * Enable `PodExecTerminal` UI feature
+       * @visibility frontend
+       */
+      enabled?: boolean;
+    };
+  };
+}

package/dist/index.d.ts

@@ -860,6 +860,6 @@ declare const PodExecTerminal: (props: PodExecTerminalProps) => React__default.J
  *
  * @public
  */
-declare const PodExecTerminalDialog: (props: PodExecTerminalProps) => React__default.JSX.Element;
+declare const PodExecTerminalDialog: (props: PodExecTerminalProps) => false | React__default.JSX.Element | undefined;
 
 export { AksClusterLinksFormatter, AksKubernetesAuthProvider, Cluster, ClusterContext, ClusterLinksFormatter, ClusterLinksFormatterOptions, ClusterProps, ContainerCard, ContainerCardProps, ContainerScope, CronJobsAccordions, CronJobsAccordionsProps, CustomResources, CustomResourcesProps, DEFAULT_FORMATTER_NAME, DetectedErrorsContext, EksClusterLinksFormatter, ErrorList, ErrorListProps, ErrorMatcher, ErrorPanel, ErrorPanelProps, ErrorReporting, ErrorReportingProps, Events, EventsContent, EventsContentProps, EventsOptions, EventsProps, FixDialog, FixDialogProps, FormatClusterLinkOptions, GkeClusterLinksFormatter, GoogleKubernetesAuthProvider, GroupedResponsesContext, HorizontalPodAutoscalerDrawer, IngressesAccordions, IngressesAccordionsProps, JobsAccordions, JobsAccordionsProps, KubernetesApi, KubernetesAuthProvider, KubernetesAuthProviders, KubernetesAuthProvidersApi, KubernetesBackendClient, KubernetesClusterLinkFormatter, KubernetesClusterLinkFormatterApi, KubernetesDrawer, KubernetesDrawerProps, KubernetesDrawerable, KubernetesObject, KubernetesObjects, KubernetesProxyApi, KubernetesProxyClient, KubernetesStructuredMetadataTableDrawer, KubernetesStructuredMetadataTableDrawerProps, LinkErrorPanel, LinkErrorPanelProps, ManifestYaml, ManifestYamlProps, OidcKubernetesAuthProvider, OpenshiftClusterLinksFormatter, PendingPodContent, PendingPodContentProps, PodAndErrors, PodColumns, PodDrawer, PodDrawerProps, PodExecTerminal, PodExecTerminalDialog, PodExecTerminalProps, PodLogs, PodLogsDialog, PodLogsDialogProps, PodLogsOptions, PodLogsProps, PodMetricsContext, PodMetricsMatcher, PodNamesWithErrorsContext, PodNamesWithMetricsContext, PodScope, PodsTable, PodsTablesProps, READY_COLUMNS, RESOURCE_COLUMNS, RancherClusterLinksFormatter, ResourceUtilization, ResourceUtilizationProps, ServerSideKubernetesAuthProvider, ServicesAccordions, ServicesAccordionsProps, StandardClusterLinksFormatter, getDefaultFormatters, kubernetesApiRef, kubernetesAuthProvidersApiRef, kubernetesClusterLinkFormatterApiRef, kubernetesProxyApiRef, useCustomResources, useEvents, useKubernetesObjects, useMatchingErrors, usePodLogs, usePodMetrics };

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { createApiRef, useApi, discoveryApiRef } from '@backstage/core-plugin-api';
+import { useApi, configApiRef, createApiRef, discoveryApiRef } from '@backstage/core-plugin-api';
 import useAsync from 'react-use/lib/useAsync';
 import * as React from 'react';
 import React__default, { useCallback, useContext, useState, useEffect, useMemo, Fragment } from 'react';
@@ -11,8 +11,9 @@ import { groupResponses } from '@backstage/plugin-kubernetes-common';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { LinearGauge, DismissableBanner, EmptyState, LogViewer, StructuredMetadataTable, CodeSnippet, WarningPanel, LinkButton, StatusError, StatusOK, StatusWarning, ItemCardGrid, SubvalueCell, StatusAborted, Table, StatusPending } from '@backstage/core-components';
 import { DateTime } from 'luxon';
-import CloseIcon from '@material-ui/icons/Close';
 import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
+import CloseIcon from '@material-ui/icons/Close';
+import 'xterm/css/xterm.css';
 import { Terminal } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';
 import { AttachAddon } from 'xterm-addon-attach';
@@ -35,6 +36,11 @@ import lodash from 'lodash';
 import PauseIcon from '@material-ui/icons/Pause';
 import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
 
+const useIsPodExecTerminalEnabled = () => {
+  const configApi = useApi(configApiRef);
+  return configApi.getOptionalBoolean("kubernetes.podExecTerminal.enabled");
+};
+
 const kubernetesApiRef = createApiRef({
   id: "plugin.kubernetes.service"
 });
@@ -422,8 +428,10 @@ class KubernetesBackendClient {
     }
     return cluster;
   }
-  async getCredentials(authProvider) {
-    return await this.kubernetesAuthProvidersApi.getCredentials(authProvider);
+  async getCredentials(authProvider, oidcTokenProvider) {
+    return await this.kubernetesAuthProvidersApi.getCredentials(
+      authProvider === "oidc" ? `${authProvider}.${oidcTokenProvider}` : authProvider
+    );
   }
   async getObjectsByEntity(requestBody) {
     return await this.postRequired(
@@ -459,7 +467,10 @@ class KubernetesBackendClient {
     const { authProvider, oidcTokenProvider } = await this.getCluster(
       options.clusterName
     );
-    const kubernetesCredentials = await this.getCredentials(authProvider);
+    const kubernetesCredentials = await this.getCredentials(
+      authProvider,
+      oidcTokenProvider
+    );
     const url = `${await this.discoveryApi.getBaseUrl("kubernetes")}/proxy${options.path}`;
     const identityResponse = await this.identityApi.getCredentials();
     const headers = KubernetesBackendClient.getKubernetesHeaders(
@@ -842,6 +853,67 @@ const formatMillicores = (value) => {
   return `${(parseFloat(value.toString()) * 1e3).toFixed(0)}m`;
 };
 
+const useStyles$3 = makeStyles(
+  (theme) => createStyles({
+    dialogPaper: { minHeight: "calc(100% - 64px)" },
+    dialogContent: { flexBasis: 0 },
+    closeButton: {
+      position: "absolute",
+      right: theme.spacing(1),
+      top: theme.spacing(1),
+      color: theme.palette.grey[500]
+    }
+  })
+);
+const KubernetesDialog = ({
+  buttonAriaLabel,
+  buttonIcon,
+  buttonText,
+  children,
+  disabled,
+  title
+}) => {
+  const classes = useStyles$3();
+  const [open, setOpen] = useState(false);
+  const openDialog = () => {
+    setOpen(true);
+  };
+  const closeDialog = () => {
+    setOpen(false);
+  };
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+    Dialog,
+    {
+      maxWidth: "xl",
+      fullWidth: true,
+      open,
+      onClose: closeDialog,
+      PaperProps: { className: classes.dialogPaper }
+    },
+    /* @__PURE__ */ React__default.createElement(DialogTitle, { id: "dialog-title" }, title, /* @__PURE__ */ React__default.createElement(
+      IconButton,
+      {
+        "aria-label": "close",
+        className: classes.closeButton,
+        onClick: closeDialog
+      },
+      /* @__PURE__ */ React__default.createElement(CloseIcon, null)
+    )),
+    /* @__PURE__ */ React__default.createElement(DialogContent, { className: classes.dialogContent }, children)
+  ), /* @__PURE__ */ React__default.createElement(
+    Button,
+    {
+      variant: "outlined",
+      "aria-label": buttonAriaLabel,
+      component: "label",
+      disabled,
+      onClick: openDialog,
+      startIcon: buttonIcon
+    },
+    buttonText
+  ));
+};
+
 var __accessCheck = (obj, member, msg) => {
   if (!member.has(obj))
     throw TypeError("Cannot " + msg);
@@ -879,7 +951,17 @@ class PodExecTerminalAttachAddon extends AttachAddon {
 _textEncoder = new WeakMap();
 
 const hasSocketProtocol = (url) => /wss?:\/\//.test(url.toString());
+const useStyles$2 = makeStyles(
+  (theme) => createStyles({
+    podExecTerminal: {
+      width: "100%",
+      height: "100%",
+      "& .xterm-screen": { padding: theme.spacing(1) }
+    }
+  })
+);
 const PodExecTerminal = (props) => {
+  const classes = useStyles$2();
   const { containerName, podNamespace, podName } = props;
   const [baseUrl, setBaseUrl] = useState(window.location.host);
   const terminalRef = React__default.useRef(null);
@@ -941,68 +1023,25 @@ const PodExecTerminal = (props) => {
     {
       "data-testid": "terminal",
       ref: terminalRef,
-      style: {
-        width: "100%",
-        height: "100%"
-      }
+      className: classes.podExecTerminal
     }
   );
 };
 
-const useStyles$3 = makeStyles(
-  (theme) => createStyles({
-    dialogPaper: { minHeight: "calc(100% - 64px)" },
-    dialogContent: { flexBasis: 0 },
-    closeButton: {
-      position: "absolute",
-      right: theme.spacing(1),
-      top: theme.spacing(1),
-      color: theme.palette.grey[500]
-    }
-  })
-);
 const PodExecTerminalDialog = (props) => {
-  const classes = useStyles$3();
   const { clusterName, containerName, podName } = props;
-  const [open, setOpen] = useState(false);
   const isPodExecTerminalSupported = useIsPodExecTerminalSupported();
-  const openDialog = () => {
-    setOpen(true);
-  };
-  const closeDialog = () => {
-    setOpen(false);
-  };
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, !isPodExecTerminalSupported.loading && isPodExecTerminalSupported.value && /* @__PURE__ */ React__default.createElement(
-    Dialog,
+  return !isPodExecTerminalSupported.loading && isPodExecTerminalSupported.value && /* @__PURE__ */ React__default.createElement(
+    KubernetesDialog,
     {
-      maxWidth: false,
-      fullWidth: true,
-      open,
-      onClose: closeDialog,
-      PaperProps: { className: classes.dialogPaper }
-    },
-    /* @__PURE__ */ React__default.createElement(DialogTitle, { id: "dialog-title" }, podName, " - ", containerName, " terminal shell on cluster", " ", clusterName, /* @__PURE__ */ React__default.createElement(
-      IconButton,
-      {
-        "aria-label": "close",
-        className: classes.closeButton,
-        onClick: closeDialog
-      },
-      /* @__PURE__ */ React__default.createElement(CloseIcon, null)
-    )),
-    /* @__PURE__ */ React__default.createElement(DialogContent, { className: classes.dialogContent }, /* @__PURE__ */ React__default.createElement(PodExecTerminal, { ...props }))
-  ), /* @__PURE__ */ React__default.createElement(
-    Button,
-    {
-      variant: "outlined",
-      "aria-label": "open terminal",
-      component: "label",
+      buttonAriaLabel: "open terminal",
+      buttonIcon: /* @__PURE__ */ React__default.createElement(OpenInBrowserIcon, null),
+      buttonText: "Terminal",
       disabled: isPodExecTerminalSupported.loading || !isPodExecTerminalSupported.value,
-      onClick: openDialog,
-      startIcon: /* @__PURE__ */ React__default.createElement(OpenInBrowserIcon, null)
+      title: `${podName} - ${containerName} terminal shell on cluster ${clusterName}`
     },
-    "Terminal"
-  ));
+    /* @__PURE__ */ React__default.createElement(PodExecTerminal, { ...props })
+  );
 };
 
 const getProgressColor = ({
@@ -1096,44 +1135,18 @@ const PodLogs = ({
   ));
 };
 
-const useStyles$2 = makeStyles(
-  (theme) => createStyles({
-    closeButton: {
-      position: "absolute",
-      right: theme.spacing(1),
-      top: theme.spacing(1),
-      color: theme.palette.grey[500]
-    }
-  })
-);
 const PodLogsDialog = ({ containerScope }) => {
-  const classes = useStyles$2();
-  const [open, setOpen] = useState(false);
-  const openDialog = () => {
-    setOpen(true);
-  };
-  const closeDialog = () => {
-    setOpen(false);
-  };
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Dialog, { maxWidth: "xl", fullWidth: true, open, onClose: closeDialog }, /* @__PURE__ */ React__default.createElement(DialogTitle, { id: "dialog-title" }, containerScope.podName, " - ", containerScope.containerName, " logs on cluster ", containerScope.clusterName, /* @__PURE__ */ React__default.createElement(
-    IconButton,
-    {
-      "aria-label": "close",
-      className: classes.closeButton,
-      onClick: closeDialog
-    },
-    /* @__PURE__ */ React__default.createElement(CloseIcon, null)
-  )), /* @__PURE__ */ React__default.createElement(DialogContent, null, /* @__PURE__ */ React__default.createElement(PodLogs, { containerScope }))), /* @__PURE__ */ React__default.createElement(
-    Button,
+  return /* @__PURE__ */ React__default.createElement(
+    KubernetesDialog,
     {
-      variant: "outlined",
-      "aria-label": "get logs",
-      component: "label",
-      onClick: openDialog,
-      startIcon: /* @__PURE__ */ React__default.createElement(SubjectIcon, null)
+      buttonAriaLabel: "get logs",
+      buttonIcon: /* @__PURE__ */ React__default.createElement(SubjectIcon, null),
+      buttonText: "Logs",
+      disabled: false,
+      title: `${containerScope.podName} - ${containerScope.containerName} logs on cluster ${containerScope.clusterName}`
     },
-    "Logs"
-  ));
+    /* @__PURE__ */ React__default.createElement(PodLogs, { containerScope })
+  );
 };
 
 const getContainerHealthChecks = (containerSpec, containerStatus) => {
@@ -1172,6 +1185,7 @@ const ContainerCard = ({
   containerMetrics
 }) => {
   var _a, _b;
+  const isPodExecTerminalEnabled = useIsPodExecTerminalEnabled();
   if (containerSpec === void 0) {
     return /* @__PURE__ */ React__default.createElement(Typography, null, "error reading pod from cluster");
   }
@@ -1259,7 +1273,7 @@ const ContainerCard = ({
         ...podScope
       }
     }
-  ), /* @__PURE__ */ React__default.createElement(
+  ), isPodExecTerminalEnabled && /* @__PURE__ */ React__default.createElement(
     PodExecTerminalDialog,
     {
       clusterName: podScope.clusterName,
@@ -3302,5 +3316,5 @@ const ErrorReporting = ({ detectedErrors }) => {
   ));
 };
 
-export { AksClusterLinksFormatter, AksKubernetesAuthProvider, Cluster, ClusterContext, ContainerCard, CronJobsAccordions, CustomResources, DEFAULT_FORMATTER_NAME, DetectedErrorsContext, EksClusterLinksFormatter, ErrorList, ErrorPanel, ErrorReporting, Events, EventsContent, FixDialog, GkeClusterLinksFormatter, GoogleKubernetesAuthProvider, GroupedResponsesContext, HorizontalPodAutoscalerDrawer, IngressesAccordions, JobsAccordions, KubernetesAuthProviders, KubernetesBackendClient, KubernetesClusterLinkFormatter, KubernetesDrawer, KubernetesProxyClient, KubernetesStructuredMetadataTableDrawer, LinkErrorPanel, ManifestYaml, OidcKubernetesAuthProvider, OpenshiftClusterLinksFormatter, PendingPodContent, PodDrawer, PodExecTerminal, PodExecTerminalDialog, PodLogs, PodLogsDialog, PodMetricsContext, PodNamesWithErrorsContext, PodNamesWithMetricsContext, PodsTable, READY_COLUMNS, RESOURCE_COLUMNS, RancherClusterLinksFormatter, ResourceUtilization, ServerSideKubernetesAuthProvider, ServicesAccordions, StandardClusterLinksFormatter, getDefaultFormatters, kubernetesApiRef, kubernetesAuthProvidersApiRef, kubernetesClusterLinkFormatterApiRef, kubernetesProxyApiRef, useCustomResources, useEvents, useIsPodExecTerminalSupported, useKubernetesObjects, useMatchingErrors, usePodLogs, usePodMetrics };
+export { AksClusterLinksFormatter, AksKubernetesAuthProvider, Cluster, ClusterContext, ContainerCard, CronJobsAccordions, CustomResources, DEFAULT_FORMATTER_NAME, DetectedErrorsContext, EksClusterLinksFormatter, ErrorList, ErrorPanel, ErrorReporting, Events, EventsContent, FixDialog, GkeClusterLinksFormatter, GoogleKubernetesAuthProvider, GroupedResponsesContext, HorizontalPodAutoscalerDrawer, IngressesAccordions, JobsAccordions, KubernetesAuthProviders, KubernetesBackendClient, KubernetesClusterLinkFormatter, KubernetesDrawer, KubernetesProxyClient, KubernetesStructuredMetadataTableDrawer, LinkErrorPanel, ManifestYaml, OidcKubernetesAuthProvider, OpenshiftClusterLinksFormatter, PendingPodContent, PodDrawer, PodExecTerminal, PodExecTerminalDialog, PodLogs, PodLogsDialog, PodMetricsContext, PodNamesWithErrorsContext, PodNamesWithMetricsContext, PodsTable, READY_COLUMNS, RESOURCE_COLUMNS, RancherClusterLinksFormatter, ResourceUtilization, ServerSideKubernetesAuthProvider, ServicesAccordions, StandardClusterLinksFormatter, getDefaultFormatters, kubernetesApiRef, kubernetesAuthProvidersApiRef, kubernetesClusterLinkFormatterApiRef, kubernetesProxyApiRef, useCustomResources, useEvents, useIsPodExecTerminalEnabled, useIsPodExecTerminalSupported, useKubernetesObjects, useMatchingErrors, usePodLogs, usePodMetrics };
 //# sourceMappingURL=index.esm.js.map