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

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @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

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

@@ -11,8 +11,8 @@ 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';
@@ -853,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);
@@ -890,7 +951,7 @@ class PodExecTerminalAttachAddon extends AttachAddon {
 _textEncoder = new WeakMap();
 
 const hasSocketProtocol = (url) => /wss?:\/\//.test(url.toString());
-const useStyles$4 = makeStyles(
+const useStyles$2 = makeStyles(
   (theme) => createStyles({
     podExecTerminal: {
       width: "100%",
@@ -900,7 +961,7 @@ const useStyles$4 = makeStyles(
   })
 );
 const PodExecTerminal = (props) => {
-  const classes = useStyles$4();
+  const classes = useStyles$2();
   const { containerName, podNamespace, podName } = props;
   const [baseUrl, setBaseUrl] = useState(window.location.host);
   const terminalRef = React__default.useRef(null);
@@ -967,60 +1028,20 @@ const PodExecTerminal = (props) => {
   );
 };
 
-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,
-    {
-      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,
+  return !isPodExecTerminalSupported.loading && isPodExecTerminalSupported.value && /* @__PURE__ */ React__default.createElement(
+    KubernetesDialog,
     {
-      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 = ({
@@ -1114,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) => {