@backstage-community/plugin-tekton 3.16.0

package/dist/components/common/ClusterSelector.esm.js

@@ -0,0 +1,46 @@
+import React__default from 'react';
+import { Select } from '@backstage/core-components';
+import { makeStyles, Typography } from '@material-ui/core';
+import { TektonResourcesContext } from '../../hooks/TektonResourcesContext.esm.js';
+import './ClusterSelector.css.esm.js';
+
+const useStyles = makeStyles((theme) => ({
+  label: {
+    color: theme.palette.text.primary,
+    fontSize: "1rem",
+    paddingRight: "10px",
+    fontWeight: "bold"
+  }
+}));
+const ClusterSelector = () => {
+  const classes = useStyles();
+  const {
+    clusters: k8sClusters,
+    selectedCluster,
+    setSelectedCluster: setClusterContext
+  } = React__default.useContext(TektonResourcesContext);
+  const clusterOptions = k8sClusters.map((cluster) => ({
+    value: cluster,
+    label: cluster
+  }));
+  const curCluster = selectedCluster && k8sClusters?.length > 0 ? k8sClusters[selectedCluster] : k8sClusters?.[0];
+  const [clusterSelected, setClusterSelected] = React__default.useState(curCluster);
+  const onClusterChange = (arg) => {
+    const index = k8sClusters.findIndex((cluster) => cluster === arg);
+    setClusterContext(index);
+    setClusterSelected(arg);
+  };
+  return /* @__PURE__ */ React__default.createElement("div", { className: "bs-tkn-cluster-selector" }, /* @__PURE__ */ React__default.createElement(Typography, { className: classes.label }, "Cluster"), /* @__PURE__ */ React__default.createElement(
+    Select,
+    {
+      onChange: onClusterChange,
+      label: "",
+      items: clusterOptions,
+      selected: clusterSelected,
+      margin: "dense"
+    }
+  ));
+};
+
+export { ClusterSelector };
+//# sourceMappingURL=ClusterSelector.esm.js.map

package/dist/components/common/ClusterSelector.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClusterSelector.esm.js","sources":["../../../src/components/common/ClusterSelector.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nimport { Select, SelectedItems } from '@backstage/core-components';\nimport { BackstageTheme } from '@backstage/theme';\n\nimport { makeStyles, Typography } from '@material-ui/core';\n\nimport { TektonResourcesContext } from '../../hooks/TektonResourcesContext';\n\nimport './ClusterSelector.css';\n\nconst useStyles = makeStyles<BackstageTheme>(theme => ({\n  label: {\n    color: theme.palette.text.primary,\n    fontSize: '1rem',\n    paddingRight: '10px',\n    fontWeight: 'bold',\n  },\n}));\n\nexport const ClusterSelector = () => {\n  const classes = useStyles();\n  const {\n    clusters: k8sClusters,\n    selectedCluster,\n    setSelectedCluster: setClusterContext,\n  } = React.useContext(TektonResourcesContext);\n  const clusterOptions = k8sClusters.map(cluster => ({\n    value: cluster,\n    label: cluster,\n  }));\n\n  const curCluster =\n    selectedCluster && k8sClusters?.length > 0\n      ? k8sClusters[selectedCluster]\n      : k8sClusters?.[0];\n\n  const [clusterSelected, setClusterSelected] =\n    React.useState<SelectedItems>(curCluster);\n\n  const onClusterChange = (arg: SelectedItems) => {\n    const index = k8sClusters.findIndex(cluster => cluster === arg);\n    setClusterContext(index);\n    setClusterSelected(arg);\n  };\n  return (\n    <div className=\"bs-tkn-cluster-selector\">\n      <Typography className={classes.label}>Cluster</Typography>\n      <Select\n        onChange={onClusterChange}\n        label=\"\"\n        items={clusterOptions}\n        selected={clusterSelected}\n        margin=\"dense\"\n      />\n    </div>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;AA0BA,MAAM,SAAA,GAAY,WAA2B,CAAU,KAAA,MAAA;AAAA,EACrD,KAAO,EAAA;AAAA,IACL,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,OAAA;AAAA,IAC1B,QAAU,EAAA,MAAA;AAAA,IACV,YAAc,EAAA,MAAA;AAAA,IACd,UAAY,EAAA;AAAA;AAEhB,CAAE,CAAA,CAAA;AAEK,MAAM,kBAAkB,MAAM;AACnC,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAM,MAAA;AAAA,IACJ,QAAU,EAAA,WAAA;AAAA,IACV,eAAA;AAAA,IACA,kBAAoB,EAAA;AAAA,GACtB,GAAIA,cAAM,CAAA,UAAA,CAAW,sBAAsB,CAAA;AAC3C,EAAM,MAAA,cAAA,GAAiB,WAAY,CAAA,GAAA,CAAI,CAAY,OAAA,MAAA;AAAA,IACjD,KAAO,EAAA,OAAA;AAAA,IACP,KAAO,EAAA;AAAA,GACP,CAAA,CAAA;AAEF,EAAM,MAAA,UAAA,GACJ,mBAAmB,WAAa,EAAA,MAAA,GAAS,IACrC,WAAY,CAAA,eAAe,CAC3B,GAAA,WAAA,GAAc,CAAC,CAAA;AAErB,EAAA,MAAM,CAAC,eAAiB,EAAA,kBAAkB,CACxC,GAAAA,cAAA,CAAM,SAAwB,UAAU,CAAA;AAE1C,EAAM,MAAA,eAAA,GAAkB,CAAC,GAAuB,KAAA;AAC9C,IAAA,MAAM,KAAQ,GAAA,WAAA,CAAY,SAAU,CAAA,CAAA,OAAA,KAAW,YAAY,GAAG,CAAA;AAC9D,IAAA,iBAAA,CAAkB,KAAK,CAAA;AACvB,IAAA,kBAAA,CAAmB,GAAG,CAAA;AAAA,GACxB;AACA,EACE,uBAAAA,cAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,yBACb,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,cAAW,SAAW,EAAA,OAAA,CAAQ,KAAO,EAAA,EAAA,SAAO,CAC7C,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,QAAU,EAAA,eAAA;AAAA,MACV,KAAM,EAAA,EAAA;AAAA,MACN,KAAO,EAAA,cAAA;AAAA,MACP,QAAU,EAAA,eAAA;AAAA,MACV,MAAO,EAAA;AAAA;AAAA,GAEX,CAAA;AAEJ;;;;"}

package/dist/components/common/ErrorPanel.esm.js

@@ -0,0 +1,33 @@
+import React__default from 'react';
+import { WarningPanel } from '@backstage/core-components';
+import { useEntity } from '@backstage/plugin-catalog-react';
+import { Typography } from '@material-ui/core';
+
+const ErrorPanel = ({ allErrors }) => {
+  const {
+    entity: {
+      metadata: { name: entityName }
+    }
+  } = useEntity();
+  return /* @__PURE__ */ React__default.createElement("div", { className: "warning-panel", style: { marginBottom: "16px" } }, /* @__PURE__ */ React__default.createElement(
+    WarningPanel,
+    {
+      title: "There was a problem retrieving Kubernetes objects",
+      message: `There was a problem retrieving some Kubernetes resources for the entity: ${entityName}. This could mean that the Error Reporting card is not completely accurate.`
+    },
+    /* @__PURE__ */ React__default.createElement("div", null, "Errors:", allErrors.map((err, _index) => {
+      const errMessage = err.message ? `${err.message}` : `Error fetching Kubernetes resource: '${err.resourcePath}', error: ${err.errorType}, status code: ${err.statusCode}`;
+      return /* @__PURE__ */ React__default.createElement(
+        Typography,
+        {
+          variant: "body2",
+          key: `${err.resourcePath}-${err.statusCode}`
+        },
+        err.errorType === "FETCH_ERROR" ? `Error communicating with Kubernetes: ${err.errorType}, message: ${err.message}` : errMessage
+      );
+    }))
+  ));
+};
+
+export { ErrorPanel };
+//# sourceMappingURL=ErrorPanel.esm.js.map

package/dist/components/common/ErrorPanel.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorPanel.esm.js","sources":["../../../src/components/common/ErrorPanel.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nimport { WarningPanel } from '@backstage/core-components';\nimport { useEntity } from '@backstage/plugin-catalog-react';\n\nimport { Typography } from '@material-ui/core';\n\nimport { ClusterError, ClusterErrors } from '../../types/types';\n\ntype ErrorPanelProps = { allErrors: ClusterErrors };\n\nexport const ErrorPanel = ({ allErrors }: ErrorPanelProps) => {\n  const {\n    entity: {\n      metadata: { name: entityName },\n    },\n  } = useEntity();\n  return (\n    <div className=\"warning-panel\" style={{ marginBottom: '16px' }}>\n      <WarningPanel\n        title=\"There was a problem retrieving Kubernetes objects\"\n        message={`There was a problem retrieving some Kubernetes resources for the entity: ${entityName}. This could mean that the Error Reporting card is not completely accurate.`}\n      >\n        <div>\n          Errors:\n          {allErrors.map((err: ClusterError, _index) => {\n            const errMessage = err.message\n              ? `${err.message}`\n              : `Error fetching Kubernetes resource: '${err.resourcePath}', error: ${err.errorType}, status code: ${err.statusCode}`;\n            return (\n              <Typography\n                variant=\"body2\"\n                key={`${err.resourcePath}-${err.statusCode}`}\n              >\n                {err.errorType === 'FETCH_ERROR'\n                  ? `Error communicating with Kubernetes: ${err.errorType}, message: ${err.message}`\n                  : errMessage}\n              </Typography>\n            );\n          })}\n        </div>\n      </WarningPanel>\n    </div>\n  );\n};\n"],"names":["React"],"mappings":";;;;;AA0BO,MAAM,UAAa,GAAA,CAAC,EAAE,SAAA,EAAiC,KAAA;AAC5D,EAAM,MAAA;AAAA,IACJ,MAAQ,EAAA;AAAA,MACN,QAAA,EAAU,EAAE,IAAA,EAAM,UAAW;AAAA;AAC/B,MACE,SAAU,EAAA;AACd,EACE,uBAAAA,cAAA,CAAA,aAAA,CAAC,SAAI,SAAU,EAAA,eAAA,EAAgB,OAAO,EAAE,YAAA,EAAc,QACpD,EAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,mDAAA;AAAA,MACN,OAAA,EAAS,4EAA4E,UAAU,CAAA,2EAAA;AAAA,KAAA;AAAA,iDAE9F,KAAI,EAAA,IAAA,EAAA,SAAA,EAEF,UAAU,GAAI,CAAA,CAAC,KAAmB,MAAW,KAAA;AAC5C,MAAA,MAAM,UAAa,GAAA,GAAA,CAAI,OACnB,GAAA,CAAA,EAAG,IAAI,OAAO,CAAA,CAAA,GACd,CAAwC,qCAAA,EAAA,GAAA,CAAI,YAAY,CAAa,UAAA,EAAA,GAAA,CAAI,SAAS,CAAA,eAAA,EAAkB,IAAI,UAAU,CAAA,CAAA;AACtH,MACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,OAAQ,EAAA,OAAA;AAAA,UACR,KAAK,CAAG,EAAA,GAAA,CAAI,YAAY,CAAA,CAAA,EAAI,IAAI,UAAU,CAAA;AAAA,SAAA;AAAA,QAEzC,GAAA,CAAI,cAAc,aACf,GAAA,CAAA,qCAAA,EAAwC,IAAI,SAAS,CAAA,WAAA,EAAc,GAAI,CAAA,OAAO,CAC9E,CAAA,GAAA;AAAA,OACN;AAAA,KAEH,CACH;AAAA,GAEJ,CAAA;AAEJ;;;;"}

package/dist/components/common/PermissionAlert.esm.js

@@ -0,0 +1,9 @@
+import React__default from 'react';
+import { Alert, AlertTitle } from '@material-ui/lab';
+
+const PermissionAlert = () => {
+  return /* @__PURE__ */ React__default.createElement(Alert, { severity: "warning", "data-testid": "no-permission-alert" }, /* @__PURE__ */ React__default.createElement(AlertTitle, null, "Permission required"), "To view Tekton Pipeline Runs, contact your administrator to give you the tekton.view.read permission.");
+};
+
+export { PermissionAlert as default };
+//# sourceMappingURL=PermissionAlert.esm.js.map

package/dist/components/common/PermissionAlert.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PermissionAlert.esm.js","sources":["../../../src/components/common/PermissionAlert.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nimport { Alert, AlertTitle } from '@material-ui/lab';\n\nconst PermissionAlert = () => {\n  return (\n    <Alert severity=\"warning\" data-testid=\"no-permission-alert\">\n      <AlertTitle>Permission required</AlertTitle>\n      To view Tekton Pipeline Runs, contact your administrator to give you the\n      tekton.view.read permission.\n    </Alert>\n  );\n};\nexport default PermissionAlert;\n"],"names":["React"],"mappings":";;;AAmBA,MAAM,kBAAkB,MAAM;AAC5B,EACE,uBAAAA,cAAA,CAAA,aAAA,CAAC,KAAM,EAAA,EAAA,QAAA,EAAS,SAAU,EAAA,aAAA,EAAY,yCACnCA,cAAA,CAAA,aAAA,CAAA,UAAA,EAAA,IAAA,EAAW,qBAAmB,CAAA,EAAa,uGAG9C,CAAA;AAEJ;;;;"}

package/dist/components/common/ResourceStatus.css.esm.js

@@ -0,0 +1,7 @@
+import styleInject from '../../node_modules/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = ".bs-tkn-resource-status {\n  padding-left: var(--pf-v5-global--spacer--sm);\n  white-space: nowrap;\n}\n\n.bs-tkn-resource-status__badge {\n  vertical-align: middle;\n}\n\n.bs-tkn-resource-status__badge--alt {\n  vertical-align: baseline;\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=ResourceStatus.css.esm.js.map

package/dist/components/common/ResourceStatus.css.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceStatus.css.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/components/common/StatusSelector.css.esm.js

@@ -0,0 +1,7 @@
+import styleInject from '../../node_modules/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = ".bs-tkn-status-selector {\n  display: flex;\n  align-items: center;\n}\n\n.bs-tkn-status-selector > div > div > div {\n  margin-top: 0;\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=StatusSelector.css.esm.js.map

package/dist/components/common/StatusSelector.css.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusSelector.css.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/components/common/StatusSelector.esm.js

@@ -0,0 +1,48 @@
+import React__default from 'react';
+import { Select } from '@backstage/core-components';
+import { makeStyles, Typography } from '@material-ui/core';
+import './StatusSelector.css.esm.js';
+import { ComputedStatus } from '@janus-idp/shared-react';
+import { TektonResourcesContext } from '../../hooks/TektonResourcesContext.esm.js';
+
+const useStyles = makeStyles((theme) => ({
+  label: {
+    color: theme.palette.text.primary,
+    fontSize: "1rem",
+    paddingRight: "10px",
+    fontWeight: "bold"
+  }
+}));
+const statusOptions = Object.entries(ComputedStatus).sort(([keyA], [keyB]) => {
+  if (keyA === keyB) {
+    return 0;
+  } else if (keyA < keyB) {
+    return -1;
+  }
+  return 1;
+}).map(([key, value]) => ({
+  value: key,
+  label: value
+}));
+const StatusSelector = () => {
+  const classes = useStyles();
+  const { selectedStatus, setSelectedStatus } = React__default.useContext(
+    TektonResourcesContext
+  );
+  const onStatusChange = (status) => {
+    setSelectedStatus(status);
+  };
+  return /* @__PURE__ */ React__default.createElement("div", { className: "bs-tkn-status-selector" }, /* @__PURE__ */ React__default.createElement(Typography, { className: classes.label }, "Status"), /* @__PURE__ */ React__default.createElement(
+    Select,
+    {
+      onChange: onStatusChange,
+      label: "",
+      items: statusOptions,
+      selected: selectedStatus,
+      margin: "dense"
+    }
+  ));
+};
+
+export { StatusSelector, statusOptions };
+//# sourceMappingURL=StatusSelector.esm.js.map

package/dist/components/common/StatusSelector.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusSelector.esm.js","sources":["../../../src/components/common/StatusSelector.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nimport { Select, SelectedItems } from '@backstage/core-components';\n\nimport { makeStyles, Theme, Typography } from '@material-ui/core';\n\nimport './StatusSelector.css';\n\nimport { ComputedStatus } from '@janus-idp/shared-react';\n\nimport { TektonResourcesContext } from '../../hooks/TektonResourcesContext';\n\nconst useStyles = makeStyles<Theme>(theme => ({\n  label: {\n    color: theme.palette.text.primary,\n    fontSize: '1rem',\n    paddingRight: '10px',\n    fontWeight: 'bold',\n  },\n}));\n\nexport const statusOptions = Object.entries(ComputedStatus)\n  .sort(([keyA], [keyB]) => {\n    if (keyA === keyB) {\n      return 0;\n    } else if (keyA < keyB) {\n      return -1;\n    }\n    return 1;\n  })\n  .map(([key, value]) => ({\n    value: key,\n    label: value,\n  }));\n\nexport const StatusSelector = () => {\n  const classes = useStyles();\n  const { selectedStatus, setSelectedStatus } = React.useContext(\n    TektonResourcesContext,\n  );\n\n  const onStatusChange = (status: SelectedItems) => {\n    setSelectedStatus(status as ComputedStatus);\n  };\n\n  return (\n    <div className=\"bs-tkn-status-selector\">\n      <Typography className={classes.label}>Status</Typography>\n      <Select\n        onChange={onStatusChange}\n        label=\"\"\n        items={statusOptions}\n        selected={selectedStatus}\n        margin=\"dense\"\n      />\n    </div>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;AA2BA,MAAM,SAAA,GAAY,WAAkB,CAAU,KAAA,MAAA;AAAA,EAC5C,KAAO,EAAA;AAAA,IACL,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,OAAA;AAAA,IAC1B,QAAU,EAAA,MAAA;AAAA,IACV,YAAc,EAAA,MAAA;AAAA,IACd,UAAY,EAAA;AAAA;AAEhB,CAAE,CAAA,CAAA;AAEK,MAAM,aAAgB,GAAA,MAAA,CAAO,OAAQ,CAAA,cAAc,CACvD,CAAA,IAAA,CAAK,CAAC,CAAC,IAAI,CAAA,EAAG,CAAC,IAAI,CAAM,KAAA;AACxB,EAAA,IAAI,SAAS,IAAM,EAAA;AACjB,IAAO,OAAA,CAAA;AAAA,GACT,MAAA,IAAW,OAAO,IAAM,EAAA;AACtB,IAAO,OAAA,CAAA,CAAA;AAAA;AAET,EAAO,OAAA,CAAA;AACT,CAAC,EACA,GAAI,CAAA,CAAC,CAAC,GAAA,EAAK,KAAK,CAAO,MAAA;AAAA,EACtB,KAAO,EAAA,GAAA;AAAA,EACP,KAAO,EAAA;AACT,CAAE,CAAA;AAEG,MAAM,iBAAiB,MAAM;AAClC,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAA,MAAM,EAAE,cAAA,EAAgB,iBAAkB,EAAA,GAAIA,cAAM,CAAA,UAAA;AAAA,IAClD;AAAA,GACF;AAEA,EAAM,MAAA,cAAA,GAAiB,CAAC,MAA0B,KAAA;AAChD,IAAA,iBAAA,CAAkB,MAAwB,CAAA;AAAA,GAC5C;AAEA,EACE,uBAAAA,cAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,wBACb,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,cAAW,SAAW,EAAA,OAAA,CAAQ,KAAO,EAAA,EAAA,QAAM,CAC5C,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,QAAU,EAAA,cAAA;AAAA,MACV,KAAM,EAAA,EAAA;AAAA,MACN,KAAO,EAAA,aAAA;AAAA,MACP,QAAU,EAAA,cAAA;AAAA,MACV,MAAO,EAAA;AAAA;AAAA,GAEX,CAAA;AAEJ;;;;"}

package/dist/components/common/TableExpandCollapse.esm.js

@@ -0,0 +1,44 @@
+import React__default from 'react';
+import { makeStyles, Tooltip, IconButton } from '@material-ui/core';
+import Collapse from '@material-ui/icons/UnfoldLess';
+import Expand from '@material-ui/icons/UnfoldMore';
+import { TektonResourcesContext } from '../../hooks/TektonResourcesContext.esm.js';
+
+const useStyles = makeStyles({
+  expandCollapse: {
+    flexGrow: 1,
+    textAlign: "end"
+  },
+  iconButton: {
+    padding: "2px"
+  }
+});
+const TableExpandCollapse = () => {
+  const classes = useStyles();
+  const { isExpanded, setIsExpanded } = React__default.useContext(
+    TektonResourcesContext
+  );
+  const handleExpandCollaspse = () => {
+    setIsExpanded(!isExpanded);
+  };
+  return /* @__PURE__ */ React__default.createElement("div", { className: classes.expandCollapse }, /* @__PURE__ */ React__default.createElement(Tooltip, { title: "Collapse all", placement: "top" }, /* @__PURE__ */ React__default.createElement("span", null, /* @__PURE__ */ React__default.createElement(
+    IconButton,
+    {
+      onClick: () => handleExpandCollaspse(),
+      disabled: !isExpanded,
+      className: classes.iconButton
+    },
+    /* @__PURE__ */ React__default.createElement(Collapse, null)
+  ))), /* @__PURE__ */ React__default.createElement(Tooltip, { title: "Expand all", placement: "top" }, /* @__PURE__ */ React__default.createElement("span", null, /* @__PURE__ */ React__default.createElement(
+    IconButton,
+    {
+      onClick: () => handleExpandCollaspse(),
+      disabled: isExpanded,
+      className: classes.iconButton
+    },
+    /* @__PURE__ */ React__default.createElement(Expand, null)
+  ))));
+};
+
+export { TableExpandCollapse };
+//# sourceMappingURL=TableExpandCollapse.esm.js.map

package/dist/components/common/TableExpandCollapse.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableExpandCollapse.esm.js","sources":["../../../src/components/common/TableExpandCollapse.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nimport { IconButton, makeStyles, Tooltip } from '@material-ui/core';\nimport Collapse from '@material-ui/icons/UnfoldLess';\nimport Expand from '@material-ui/icons/UnfoldMore';\n\nimport { TektonResourcesContext } from '../../hooks/TektonResourcesContext';\n\nconst useStyles = makeStyles({\n  expandCollapse: {\n    flexGrow: 1,\n    textAlign: 'end',\n  },\n  iconButton: {\n    padding: '2px',\n  },\n});\n\nexport const TableExpandCollapse = () => {\n  const classes = useStyles();\n  const { isExpanded, setIsExpanded } = React.useContext(\n    TektonResourcesContext,\n  );\n\n  const handleExpandCollaspse = () => {\n    setIsExpanded(!isExpanded);\n  };\n  return (\n    <div className={classes.expandCollapse}>\n      <Tooltip title=\"Collapse all\" placement=\"top\">\n        <span>\n          <IconButton\n            onClick={() => handleExpandCollaspse()}\n            disabled={!isExpanded}\n            className={classes.iconButton}\n          >\n            <Collapse />\n          </IconButton>\n        </span>\n      </Tooltip>\n      <Tooltip title=\"Expand all\" placement=\"top\">\n        <span>\n          <IconButton\n            onClick={() => handleExpandCollaspse()}\n            disabled={isExpanded}\n            className={classes.iconButton}\n          >\n            <Expand />\n          </IconButton>\n        </span>\n      </Tooltip>\n    </div>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;AAuBA,MAAM,YAAY,UAAW,CAAA;AAAA,EAC3B,cAAgB,EAAA;AAAA,IACd,QAAU,EAAA,CAAA;AAAA,IACV,SAAW,EAAA;AAAA,GACb;AAAA,EACA,UAAY,EAAA;AAAA,IACV,OAAS,EAAA;AAAA;AAEb,CAAC,CAAA;AAEM,MAAM,sBAAsB,MAAM;AACvC,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAA,MAAM,EAAE,UAAA,EAAY,aAAc,EAAA,GAAIA,cAAM,CAAA,UAAA;AAAA,IAC1C;AAAA,GACF;AAEA,EAAA,MAAM,wBAAwB,MAAM;AAClC,IAAA,aAAA,CAAc,CAAC,UAAU,CAAA;AAAA,GAC3B;AACA,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,cACtB,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,KAAA,EAAM,cAAe,EAAA,SAAA,EAAU,KACtC,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,MACC,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAS,MAAM,qBAAsB,EAAA;AAAA,MACrC,UAAU,CAAC,UAAA;AAAA,MACX,WAAW,OAAQ,CAAA;AAAA,KAAA;AAAA,iDAElB,QAAS,EAAA,IAAA;AAAA,GAEd,CACF,CAAA,kBACCA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,OAAM,YAAa,EAAA,SAAA,EAAU,KACpC,EAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,MACC,EAAA,IAAA,kBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAS,MAAM,qBAAsB,EAAA;AAAA,MACrC,QAAU,EAAA,UAAA;AAAA,MACV,WAAW,OAAQ,CAAA;AAAA,KAAA;AAAA,iDAElB,MAAO,EAAA,IAAA;AAAA,GAEZ,CACF,CACF,CAAA;AAEJ;;;;"}

package/dist/components/pipeline-topology/PipelineLayout.esm.js

@@ -0,0 +1,126 @@
+import React__default from 'react';
+import { Visualization, GRAPH_POSITION_CHANGE_EVENT, GRAPH_LAYOUT_END_EVENT, VisualizationProvider, TopologyView, VisualizationSurface, TopologyControlBar, createTopologyControlButtons, defaultControlButtonsOptions, action } from '@patternfly/react-topology';
+import { DROP_SHADOW_SPACING, TOOLBAR_HEIGHT, GRAPH_MIN_WIDTH, NODE_HEIGHT } from '../../consts/pipeline-topology-const.esm.js';
+import { getLayoutData } from '../../utils/pipeline-topology-utils.esm.js';
+import pipelineComponentFactory, { layoutFactory } from './pipelineComponentFactory.esm.js';
+
+const PipelineLayout = ({ model }) => {
+  const [vis, setVis] = React__default.useState(null);
+  const [maxSize, setMaxSize] = React__default.useState({ height: 0, width: 0 });
+  const storedGraphModel = React__default.useRef(null);
+  const layout = model.graph.layout;
+  const onLayoutUpdate = React__default.useCallback(
+    (nodes) => {
+      const nodeBounds = nodes.map(
+        (node) => node.getBounds()
+      );
+      const maxWidth = Math.floor(
+        nodeBounds.map((bounds) => bounds.width).reduce((w1, w2) => Math.max(w1, w2), 0)
+      );
+      const maxHeight = Math.floor(
+        nodeBounds.map((bounds) => bounds.height).reduce((h1, h2) => Math.max(h1, h2), 0)
+      );
+      const maxObject = nodeBounds.find((nb) => nb.height === maxHeight) ?? { y: 0 };
+      const maxX = Math.floor(
+        nodeBounds.map((bounds) => bounds.x).reduce((x1, x2) => Math.max(x1, x2), 0)
+      );
+      const maxY = Math.floor(
+        nodeBounds.map((bounds) => bounds.y).reduce((y1, y2) => Math.max(y1, y2), 0)
+      );
+      let horizontalMargin = 0;
+      let verticalMargin = 0;
+      if (layout) {
+        horizontalMargin = getLayoutData(layout)?.marginx || 0;
+        verticalMargin = getLayoutData(layout)?.marginy || 0;
+      }
+      const finallyTaskHeight = maxObject.y + maxHeight + DROP_SHADOW_SPACING + verticalMargin * 2;
+      const regularTaskHeight = maxY + NODE_HEIGHT + DROP_SHADOW_SPACING + verticalMargin * 2;
+      setMaxSize({
+        height: Math.max(finallyTaskHeight, regularTaskHeight) + TOOLBAR_HEIGHT,
+        width: Math.max(
+          maxX + maxWidth + DROP_SHADOW_SPACING + horizontalMargin * 2,
+          GRAPH_MIN_WIDTH
+        )
+      });
+    },
+    [setMaxSize, layout]
+  );
+  React__default.useEffect(() => {
+    if (model.graph.id !== storedGraphModel?.current?.id) {
+      storedGraphModel.current = null;
+      setVis(null);
+    }
+  }, [vis, model]);
+  React__default.useEffect(() => {
+    let mounted = true;
+    if (vis === null) {
+      const controller = new Visualization();
+      controller.registerLayoutFactory(layoutFactory);
+      controller.registerComponentFactory(pipelineComponentFactory);
+      controller.fromModel(model);
+      controller.addEventListener(GRAPH_POSITION_CHANGE_EVENT, () => {
+        storedGraphModel.current = controller.getGraph().toModel();
+      });
+      controller.addEventListener(GRAPH_LAYOUT_END_EVENT, () => {
+        onLayoutUpdate(controller.getGraph().getNodes());
+      });
+      if (mounted) {
+        setVis(controller);
+      }
+    } else {
+      const graph = storedGraphModel.current;
+      if (graph) {
+        model.graph = graph;
+      }
+      vis.fromModel(model);
+      vis.getGraph().layout();
+    }
+    return () => {
+      mounted = false;
+    };
+  }, [vis, model, onLayoutUpdate]);
+  React__default.useEffect(() => {
+    if (model && vis) {
+      const graph = storedGraphModel.current;
+      if (graph) {
+        model.graph = graph;
+      }
+      vis.fromModel(model);
+    }
+  }, [model, vis]);
+  if (!vis) return null;
+  const controlBar = (controller) => /* @__PURE__ */ React__default.createElement(
+    TopologyControlBar,
+    {
+      controlButtons: createTopologyControlButtons({
+        ...defaultControlButtonsOptions,
+        zoomInCallback: action(() => {
+          controller.getGraph().scaleBy(4 / 3);
+        }),
+        zoomOutCallback: action(() => {
+          controller.getGraph().scaleBy(0.75);
+        }),
+        fitToScreenCallback: action(() => {
+          controller.getGraph().fit(80);
+        }),
+        resetViewCallback: action(() => {
+          controller.getGraph().reset();
+          controller.getGraph().layout();
+        }),
+        legend: false
+      })
+    }
+  );
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      style: {
+        height: Math.min(window.innerHeight, maxSize?.height)
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(VisualizationProvider, { controller: vis }, /* @__PURE__ */ React__default.createElement(TopologyView, { controlBar: controlBar(vis) }, /* @__PURE__ */ React__default.createElement(VisualizationSurface, null)))
+  );
+};
+
+export { PipelineLayout };
+//# sourceMappingURL=PipelineLayout.esm.js.map

package/dist/components/pipeline-topology/PipelineLayout.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PipelineLayout.esm.js","sources":["../../../src/components/pipeline-topology/PipelineLayout.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nimport {\n  action,\n  Controller,\n  createTopologyControlButtons,\n  defaultControlButtonsOptions,\n  EdgeModel,\n  GRAPH_LAYOUT_END_EVENT,\n  GRAPH_POSITION_CHANGE_EVENT,\n  GraphModel,\n  Node,\n  NodeModel,\n  Rect,\n  TopologyControlBar,\n  TopologyView,\n  Visualization,\n  VisualizationProvider,\n  VisualizationSurface,\n} from '@patternfly/react-topology';\n\nimport {\n  DROP_SHADOW_SPACING,\n  GRAPH_MIN_WIDTH,\n  NODE_HEIGHT,\n  PipelineLayout as PipelineLayoutTypes,\n  TOOLBAR_HEIGHT,\n} from '../../consts/pipeline-topology-const';\nimport { PipelineMixedNodeModel } from '../../types/pipeline-topology-types';\nimport { getLayoutData } from '../../utils/pipeline-topology-utils';\nimport pipelineComponentFactory, {\n  layoutFactory,\n} from './pipelineComponentFactory';\n\ntype PipelineLayoutProps = {\n  model: {\n    graph: GraphModel;\n    nodes: PipelineMixedNodeModel[];\n    edges: EdgeModel[];\n  };\n};\n\nexport const PipelineLayout = ({ model }: PipelineLayoutProps) => {\n  const [vis, setVis] = React.useState<Controller | null>(null);\n  const [maxSize, setMaxSize] = React.useState<{\n    height: number;\n    width: number;\n  }>({ height: 0, width: 0 });\n  const storedGraphModel = React.useRef<GraphModel | null>(null);\n\n  const layout: PipelineLayoutTypes = model.graph.layout as PipelineLayoutTypes;\n\n  const onLayoutUpdate = React.useCallback(\n    (nodes: Node[]) => {\n      const nodeBounds = nodes.map((node: Node<NodeModel, any>) =>\n        node.getBounds(),\n      );\n      const maxWidth = Math.floor(\n        nodeBounds\n          .map((bounds: Rect) => bounds.width)\n          .reduce((w1: number, w2: number) => Math.max(w1, w2), 0),\n      );\n      const maxHeight = Math.floor(\n        nodeBounds\n          .map((bounds: Rect) => bounds.height)\n          .reduce((h1: number, h2: number) => Math.max(h1, h2), 0),\n      );\n      const maxObject =\n        nodeBounds.find((nb: Rect) => nb.height === maxHeight) ??\n        ({ y: 0 } as Rect);\n\n      const maxX = Math.floor(\n        nodeBounds\n          .map((bounds: Rect) => bounds.x)\n          .reduce((x1: number, x2: number) => Math.max(x1, x2), 0),\n      );\n      const maxY = Math.floor(\n        nodeBounds\n          .map((bounds: Rect) => bounds.y)\n          .reduce((y1: number, y2: number) => Math.max(y1, y2), 0),\n      );\n\n      let horizontalMargin = 0;\n      let verticalMargin = 0;\n      if (layout) {\n        horizontalMargin = getLayoutData(layout)?.marginx || 0;\n        verticalMargin = getLayoutData(layout)?.marginy || 0;\n      }\n      const finallyTaskHeight =\n        maxObject.y + maxHeight + DROP_SHADOW_SPACING + verticalMargin * 2;\n      const regularTaskHeight =\n        maxY + NODE_HEIGHT + DROP_SHADOW_SPACING + verticalMargin * 2;\n\n      setMaxSize({\n        height: Math.max(finallyTaskHeight, regularTaskHeight) + TOOLBAR_HEIGHT,\n        width: Math.max(\n          maxX + maxWidth + DROP_SHADOW_SPACING + horizontalMargin * 2,\n          GRAPH_MIN_WIDTH,\n        ),\n      });\n    },\n    [setMaxSize, layout],\n  );\n\n  React.useEffect(() => {\n    if (model.graph.id !== storedGraphModel?.current?.id) {\n      storedGraphModel.current = null;\n      setVis(null);\n    }\n  }, [vis, model]);\n\n  React.useEffect(() => {\n    let mounted = true;\n    if (vis === null) {\n      const controller = new Visualization();\n      controller.registerLayoutFactory(layoutFactory);\n      controller.registerComponentFactory(pipelineComponentFactory);\n      controller.fromModel(model);\n      controller.addEventListener(GRAPH_POSITION_CHANGE_EVENT, () => {\n        storedGraphModel.current = controller.getGraph().toModel();\n      });\n      controller.addEventListener(GRAPH_LAYOUT_END_EVENT, () => {\n        onLayoutUpdate(controller.getGraph().getNodes());\n      });\n      if (mounted) {\n        setVis(controller);\n      }\n    } else {\n      const graph = storedGraphModel.current;\n      if (graph) {\n        model.graph = graph;\n      }\n      vis.fromModel(model);\n      vis.getGraph().layout();\n    }\n    return () => {\n      mounted = false;\n    };\n  }, [vis, model, onLayoutUpdate]);\n\n  React.useEffect(() => {\n    if (model && vis) {\n      const graph = storedGraphModel.current;\n      if (graph) {\n        model.graph = graph;\n      }\n      vis.fromModel(model);\n    }\n  }, [model, vis]);\n\n  if (!vis) return null;\n\n  const controlBar = (controller: Controller) => (\n    <TopologyControlBar\n      controlButtons={createTopologyControlButtons({\n        ...defaultControlButtonsOptions,\n        zoomInCallback: action(() => {\n          controller.getGraph().scaleBy(4 / 3);\n        }),\n        zoomOutCallback: action(() => {\n          controller.getGraph().scaleBy(0.75);\n        }),\n        fitToScreenCallback: action(() => {\n          controller.getGraph().fit(80);\n        }),\n        resetViewCallback: action(() => {\n          controller.getGraph().reset();\n          controller.getGraph().layout();\n        }),\n        legend: false,\n      })}\n    />\n  );\n\n  return (\n    <div\n      style={{\n        height: Math.min(window.innerHeight, maxSize?.height),\n      }}\n    >\n      <VisualizationProvider controller={vis}>\n        <TopologyView controlBar={controlBar(vis)}>\n          <VisualizationSurface />\n        </TopologyView>\n      </VisualizationProvider>\n    </div>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;AAyDO,MAAM,cAAiB,GAAA,CAAC,EAAE,KAAA,EAAiC,KAAA;AAChE,EAAA,MAAM,CAAC,GAAK,EAAA,MAAM,CAAI,GAAAA,cAAA,CAAM,SAA4B,IAAI,CAAA;AAC5D,EAAM,MAAA,CAAC,OAAS,EAAA,UAAU,CAAI,GAAAA,cAAA,CAAM,QAGjC,CAAA,EAAE,MAAQ,EAAA,CAAA,EAAG,KAAO,EAAA,CAAA,EAAG,CAAA;AAC1B,EAAM,MAAA,gBAAA,GAAmBA,cAAM,CAAA,MAAA,CAA0B,IAAI,CAAA;AAE7D,EAAM,MAAA,MAAA,GAA8B,MAAM,KAAM,CAAA,MAAA;AAEhD,EAAA,MAAM,iBAAiBA,cAAM,CAAA,WAAA;AAAA,IAC3B,CAAC,KAAkB,KAAA;AACjB,MAAA,MAAM,aAAa,KAAM,CAAA,GAAA;AAAA,QAAI,CAAC,IAC5B,KAAA,IAAA,CAAK,SAAU;AAAA,OACjB;AACA,MAAA,MAAM,WAAW,IAAK,CAAA,KAAA;AAAA,QACpB,WACG,GAAI,CAAA,CAAC,MAAiB,KAAA,MAAA,CAAO,KAAK,CAClC,CAAA,MAAA,CAAO,CAAC,EAAA,EAAY,OAAe,IAAK,CAAA,GAAA,CAAI,EAAI,EAAA,EAAE,GAAG,CAAC;AAAA,OAC3D;AACA,MAAA,MAAM,YAAY,IAAK,CAAA,KAAA;AAAA,QACrB,WACG,GAAI,CAAA,CAAC,MAAiB,KAAA,MAAA,CAAO,MAAM,CACnC,CAAA,MAAA,CAAO,CAAC,EAAA,EAAY,OAAe,IAAK,CAAA,GAAA,CAAI,EAAI,EAAA,EAAE,GAAG,CAAC;AAAA,OAC3D;AACA,MAAM,MAAA,SAAA,GACJ,UAAW,CAAA,IAAA,CAAK,CAAC,EAAA,KAAa,EAAG,CAAA,MAAA,KAAW,SAAS,CAAA,IACpD,EAAE,CAAA,EAAG,CAAE,EAAA;AAEV,MAAA,MAAM,OAAO,IAAK,CAAA,KAAA;AAAA,QAChB,WACG,GAAI,CAAA,CAAC,MAAiB,KAAA,MAAA,CAAO,CAAC,CAC9B,CAAA,MAAA,CAAO,CAAC,EAAA,EAAY,OAAe,IAAK,CAAA,GAAA,CAAI,EAAI,EAAA,EAAE,GAAG,CAAC;AAAA,OAC3D;AACA,MAAA,MAAM,OAAO,IAAK,CAAA,KAAA;AAAA,QAChB,WACG,GAAI,CAAA,CAAC,MAAiB,KAAA,MAAA,CAAO,CAAC,CAC9B,CAAA,MAAA,CAAO,CAAC,EAAA,EAAY,OAAe,IAAK,CAAA,GAAA,CAAI,EAAI,EAAA,EAAE,GAAG,CAAC;AAAA,OAC3D;AAEA,MAAA,IAAI,gBAAmB,GAAA,CAAA;AACvB,MAAA,IAAI,cAAiB,GAAA,CAAA;AACrB,MAAA,IAAI,MAAQ,EAAA;AACV,QAAmB,gBAAA,GAAA,aAAA,CAAc,MAAM,CAAA,EAAG,OAAW,IAAA,CAAA;AACrD,QAAiB,cAAA,GAAA,aAAA,CAAc,MAAM,CAAA,EAAG,OAAW,IAAA,CAAA;AAAA;AAErD,MAAA,MAAM,iBACJ,GAAA,SAAA,CAAU,CAAI,GAAA,SAAA,GAAY,sBAAsB,cAAiB,GAAA,CAAA;AACnE,MAAA,MAAM,iBACJ,GAAA,IAAA,GAAO,WAAc,GAAA,mBAAA,GAAsB,cAAiB,GAAA,CAAA;AAE9D,MAAW,UAAA,CAAA;AAAA,QACT,MAAQ,EAAA,IAAA,CAAK,GAAI,CAAA,iBAAA,EAAmB,iBAAiB,CAAI,GAAA,cAAA;AAAA,QACzD,OAAO,IAAK,CAAA,GAAA;AAAA,UACV,IAAA,GAAO,QAAW,GAAA,mBAAA,GAAsB,gBAAmB,GAAA,CAAA;AAAA,UAC3D;AAAA;AACF,OACD,CAAA;AAAA,KACH;AAAA,IACA,CAAC,YAAY,MAAM;AAAA,GACrB;AAEA,EAAAA,cAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IAAI,KAAM,CAAA,KAAA,CAAM,EAAO,KAAA,gBAAA,EAAkB,SAAS,EAAI,EAAA;AACpD,MAAA,gBAAA,CAAiB,OAAU,GAAA,IAAA;AAC3B,MAAA,MAAA,CAAO,IAAI,CAAA;AAAA;AACb,GACC,EAAA,CAAC,GAAK,EAAA,KAAK,CAAC,CAAA;AAEf,EAAAA,cAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IAAI,OAAU,GAAA,IAAA;AACd,IAAA,IAAI,QAAQ,IAAM,EAAA;AAChB,MAAM,MAAA,UAAA,GAAa,IAAI,aAAc,EAAA;AACrC,MAAA,UAAA,CAAW,sBAAsB,aAAa,CAAA;AAC9C,MAAA,UAAA,CAAW,yBAAyB,wBAAwB,CAAA;AAC5D,MAAA,UAAA,CAAW,UAAU,KAAK,CAAA;AAC1B,MAAW,UAAA,CAAA,gBAAA,CAAiB,6BAA6B,MAAM;AAC7D,QAAA,gBAAA,CAAiB,OAAU,GAAA,UAAA,CAAW,QAAS,EAAA,CAAE,OAAQ,EAAA;AAAA,OAC1D,CAAA;AACD,MAAW,UAAA,CAAA,gBAAA,CAAiB,wBAAwB,MAAM;AACxD,QAAA,cAAA,CAAe,UAAW,CAAA,QAAA,EAAW,CAAA,QAAA,EAAU,CAAA;AAAA,OAChD,CAAA;AACD,MAAA,IAAI,OAAS,EAAA;AACX,QAAA,MAAA,CAAO,UAAU,CAAA;AAAA;AACnB,KACK,MAAA;AACL,MAAA,MAAM,QAAQ,gBAAiB,CAAA,OAAA;AAC/B,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,KAAA,CAAM,KAAQ,GAAA,KAAA;AAAA;AAEhB,MAAA,GAAA,CAAI,UAAU,KAAK,CAAA;AACnB,MAAI,GAAA,CAAA,QAAA,GAAW,MAAO,EAAA;AAAA;AAExB,IAAA,OAAO,MAAM;AACX,MAAU,OAAA,GAAA,KAAA;AAAA,KACZ;AAAA,GACC,EAAA,CAAC,GAAK,EAAA,KAAA,EAAO,cAAc,CAAC,CAAA;AAE/B,EAAAA,cAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IAAI,SAAS,GAAK,EAAA;AAChB,MAAA,MAAM,QAAQ,gBAAiB,CAAA,OAAA;AAC/B,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,KAAA,CAAM,KAAQ,GAAA,KAAA;AAAA;AAEhB,MAAA,GAAA,CAAI,UAAU,KAAK,CAAA;AAAA;AACrB,GACC,EAAA,CAAC,KAAO,EAAA,GAAG,CAAC,CAAA;AAEf,EAAI,IAAA,CAAC,KAAY,OAAA,IAAA;AAEjB,EAAM,MAAA,UAAA,GAAa,CAAC,UAClB,qBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,kBAAA;AAAA,IAAA;AAAA,MACC,gBAAgB,4BAA6B,CAAA;AAAA,QAC3C,GAAG,4BAAA;AAAA,QACH,cAAA,EAAgB,OAAO,MAAM;AAC3B,UAAA,UAAA,CAAW,QAAS,EAAA,CAAE,OAAQ,CAAA,CAAA,GAAI,CAAC,CAAA;AAAA,SACpC,CAAA;AAAA,QACD,eAAA,EAAiB,OAAO,MAAM;AAC5B,UAAW,UAAA,CAAA,QAAA,EAAW,CAAA,OAAA,CAAQ,IAAI,CAAA;AAAA,SACnC,CAAA;AAAA,QACD,mBAAA,EAAqB,OAAO,MAAM;AAChC,UAAW,UAAA,CAAA,QAAA,EAAW,CAAA,GAAA,CAAI,EAAE,CAAA;AAAA,SAC7B,CAAA;AAAA,QACD,iBAAA,EAAmB,OAAO,MAAM;AAC9B,UAAW,UAAA,CAAA,QAAA,GAAW,KAAM,EAAA;AAC5B,UAAW,UAAA,CAAA,QAAA,GAAW,MAAO,EAAA;AAAA,SAC9B,CAAA;AAAA,QACD,MAAQ,EAAA;AAAA,OACT;AAAA;AAAA,GACH;AAGF,EACE,uBAAAA,cAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,QAAQ,IAAK,CAAA,GAAA,CAAI,MAAO,CAAA,WAAA,EAAa,SAAS,MAAM;AAAA;AACtD,KAAA;AAAA,oBAECA,cAAA,CAAA,aAAA,CAAA,qBAAA,EAAA,EAAsB,UAAY,EAAA,GAAA,EAAA,kBAChCA,cAAA,CAAA,aAAA,CAAA,YAAA,EAAA,EAAa,UAAY,EAAA,UAAA,CAAW,GAAG,CAAA,EAAA,kBACrCA,cAAA,CAAA,aAAA,CAAA,oBAAA,EAAA,IAAqB,CACxB,CACF;AAAA,GACF;AAEJ;;;;"}

package/dist/components/pipeline-topology/PipelineRunVisualization.esm.js

@@ -0,0 +1,13 @@
+import React__default from 'react';
+import { useDarkTheme } from '../../hooks/useDarkTheme.esm.js';
+import { PipelineVisualizationView } from './PipelineVisualizationView.esm.js';
+
+const PipelineRunVisualization = ({
+  pipelineRunName
+}) => {
+  useDarkTheme();
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, pipelineRunName && /* @__PURE__ */ React__default.createElement(PipelineVisualizationView, { pipelineRun: pipelineRunName }));
+};
+
+export { PipelineRunVisualization };
+//# sourceMappingURL=PipelineRunVisualization.esm.js.map

package/dist/components/pipeline-topology/PipelineRunVisualization.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PipelineRunVisualization.esm.js","sources":["../../../src/components/pipeline-topology/PipelineRunVisualization.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nimport { useDarkTheme } from '../../hooks/useDarkTheme';\nimport { PipelineVisualizationView } from './PipelineVisualizationView';\n\ntype PipelineRunVisualizationProps = {\n  pipelineRunName?: string;\n};\n\nexport const PipelineRunVisualization = ({\n  pipelineRunName,\n}: PipelineRunVisualizationProps) => {\n  useDarkTheme();\n\n  return (\n    <>\n      {pipelineRunName && (\n        <PipelineVisualizationView pipelineRun={pipelineRunName} />\n      )}\n    </>\n  );\n};\n"],"names":["React"],"mappings":";;;;AAwBO,MAAM,2BAA2B,CAAC;AAAA,EACvC;AACF,CAAqC,KAAA;AACnC,EAAa,YAAA,EAAA;AAEb,EAAA,mFAEK,eACC,oBAAAA,cAAA,CAAA,aAAA,CAAC,yBAA0B,EAAA,EAAA,WAAA,EAAa,iBAAiB,CAE7D,CAAA;AAEJ;;;;"}

package/dist/components/pipeline-topology/PipelineTaskNode.css.esm.js

@@ -0,0 +1,7 @@
+import styleInject from '../../node_modules/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = ".bs-tkn-pipeline-task-node:focus {\n  outline: -webkit-focus-ring-color auto 5px;\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=PipelineTaskNode.css.esm.js.map

package/dist/components/pipeline-topology/PipelineTaskNode.css.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PipelineTaskNode.css.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/components/pipeline-topology/PipelineTaskNode.esm.js

@@ -0,0 +1,132 @@
+import React__default from 'react';
+import { Tooltip } from '@patternfly/react-core';
+import { useHover, useDetailsLevel, RunStatus, WhenDecorator, DEFAULT_WHEN_OFFSET, TaskNode, ScaleDetailsLevel, Layer, TOP_LAYER, DEFAULT_LAYER } from '@patternfly/react-topology';
+import { observer } from 'mobx-react';
+import { NodeType } from '../../consts/pipeline-topology-const.esm.js';
+import { TEKTON_PIPELINE_RUN, TEKTON_PIPELINE_TASK } from '../../consts/tekton-const.esm.js';
+import { TektonResourcesContext } from '../../hooks/TektonResourcesContext.esm.js';
+import { createStepStatus } from '../../utils/pipeline-step-utils.esm.js';
+import { getTaskStatus } from '../../utils/pipelineRun-utils.esm.js';
+import PipelineRunLogDialog from '../PipelineRunLogs/PipelineRunLogDialog.esm.js';
+import { PipelineVisualizationStepList } from './PipelineVisualizationStepList.esm.js';
+import './PipelineTaskNode.css.esm.js';
+
+const PipelineTaskNode = ({
+  element,
+  onContextMenu,
+  contextMenuOpen,
+  ...rest
+}) => {
+  const [open, setOpen] = React__default.useState(false);
+  const { watchResourcesData } = React__default.useContext(
+    TektonResourcesContext
+  );
+  const data = element.getData();
+  const triggerRef = React__default.useRef(null);
+  const pipelineRun = data.pipelineRun;
+  const [hover, hoverRef] = useHover();
+  const detailsLevel = useDetailsLevel();
+  const isFinallyTask = element.getType() === NodeType.FINALLY_NODE;
+  const pods = watchResourcesData?.pods?.data || [];
+  const taskRuns = watchResourcesData?.taskruns?.data || [];
+  const openDialog = () => {
+    setOpen(true);
+  };
+  const closeDialog = () => {
+    setOpen(false);
+  };
+  const computedTask = data.task;
+  const stepList = computedTask?.status?.steps || computedTask?.taskSpec?.steps || [];
+  const taskStatus = getTaskStatus(data.pipelineRun, data.task);
+  const stepStatusList = stepList.map(
+    (step) => createStepStatus(step, taskStatus)
+  );
+  const succeededStepsCount = stepStatusList.filter(
+    ({ status }) => status === RunStatus.Succeeded
+  ).length;
+  const badge = stepStatusList.length > 0 && data.status ? `${succeededStepsCount}/${stepStatusList.length}` : null;
+  const passedData = React__default.useMemo(() => {
+    const newData = { ...data };
+    Object.keys(newData).forEach((key) => {
+      if (newData[key] === void 0) {
+        delete newData[key];
+      }
+    });
+    return newData;
+  }, [data]);
+  const hasTaskIcon = !!(data.taskIconClass || data.taskIcon);
+  const whenDecorator = data.whenStatus ? /* @__PURE__ */ React__default.createElement(
+    WhenDecorator,
+    {
+      element,
+      status: data.whenStatus,
+      leftOffset: hasTaskIcon ? DEFAULT_WHEN_OFFSET + (element.getBounds().height - 4) * 0.75 : DEFAULT_WHEN_OFFSET
+    }
+  ) : null;
+  const activeTaskId = taskRuns.find(
+    (tr) => tr?.metadata?.labels?.[TEKTON_PIPELINE_RUN] === pipelineRun?.metadata?.name && tr?.metadata?.labels?.[TEKTON_PIPELINE_TASK] === data.task?.name
+  )?.metadata?.name;
+  const taskNode = /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+    PipelineRunLogDialog,
+    {
+      pipelineRun,
+      open,
+      closeDialog,
+      pods,
+      taskRuns,
+      activeTask: activeTaskId
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    TaskNode,
+    {
+      className: "bs-tkn-pipeline-task-node",
+      element,
+      onContextMenu: data.showContextMenu ? onContextMenu : void 0,
+      contextMenuOpen,
+      scaleNode: (hover || contextMenuOpen) && detailsLevel !== ScaleDetailsLevel.high,
+      hideDetailsAtMedium: true,
+      ...passedData,
+      ...rest,
+      badge,
+      truncateLength: element.getData()?.label?.length,
+      onSelect: activeTaskId && openDialog
+    },
+    whenDecorator
+  ));
+  return /* @__PURE__ */ React__default.createElement(
+    Layer,
+    {
+      id: detailsLevel !== ScaleDetailsLevel.high && (hover || contextMenuOpen) ? TOP_LAYER : DEFAULT_LAYER
+    },
+    /* @__PURE__ */ React__default.createElement(
+      "g",
+      {
+        "data-test": `task ${element.getLabel()}`,
+        className: "bs-tkn-pipeline-task-node",
+        ref: hoverRef
+      },
+      /* @__PURE__ */ React__default.createElement(
+        Tooltip,
+        {
+          position: "bottom",
+          enableFlip: false,
+          content: /* @__PURE__ */ React__default.createElement(
+            PipelineVisualizationStepList,
+            {
+              isSpecOverview: !data.status,
+              taskName: element.getLabel(),
+              steps: stepStatusList,
+              isFinallyTask
+            }
+          ),
+          triggerRef
+        },
+        /* @__PURE__ */ React__default.createElement("g", { ref: triggerRef }, taskNode)
+      )
+    )
+  );
+};
+var PipelineTaskNode$1 = React__default.memo(observer(PipelineTaskNode));
+
+export { PipelineTaskNode$1 as default };
+//# sourceMappingURL=PipelineTaskNode.esm.js.map

package/dist/components/pipeline-topology/PipelineTaskNode.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PipelineTaskNode.esm.js","sources":["../../../src/components/pipeline-topology/PipelineTaskNode.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\n\nimport { Tooltip } from '@patternfly/react-core';\nimport {\n  DEFAULT_LAYER,\n  DEFAULT_WHEN_OFFSET,\n  GraphElement,\n  Layer,\n  Node,\n  RunStatus,\n  ScaleDetailsLevel,\n  TaskNode,\n  TOP_LAYER,\n  useDetailsLevel,\n  useHover,\n  WhenDecorator,\n  WithContextMenuProps,\n  WithSelectionProps,\n} from '@patternfly/react-topology';\n// eslint-disable-next-line @backstage/no-undeclared-imports\nimport { observer } from 'mobx-react';\n\nimport { PipelineTaskWithStatus, TaskRunKind } from '@janus-idp/shared-react';\n\nimport { NodeType } from '../../consts/pipeline-topology-const';\nimport {\n  TEKTON_PIPELINE_RUN,\n  TEKTON_PIPELINE_TASK,\n} from '../../consts/tekton-const';\nimport { TektonResourcesContext } from '../../hooks/TektonResourcesContext';\nimport { StepStatus } from '../../types/taskRun';\nimport { TektonResourcesContextData } from '../../types/types';\nimport { createStepStatus } from '../../utils/pipeline-step-utils';\nimport { getTaskStatus } from '../../utils/pipelineRun-utils';\nimport PipelineRunLogDialog from '../PipelineRunLogs/PipelineRunLogDialog';\nimport { PipelineVisualizationStepList } from './PipelineVisualizationStepList';\n\nimport './PipelineTaskNode.css';\n\ntype PipelineTaskNodeProps = {\n  element: Node;\n} & WithContextMenuProps &\n  WithSelectionProps &\n  GraphElement;\n\nconst PipelineTaskNode = ({\n  element,\n  onContextMenu,\n  contextMenuOpen,\n  ...rest\n}: PipelineTaskNodeProps) => {\n  const [open, setOpen] = React.useState<boolean>(false);\n  const { watchResourcesData } = React.useContext<TektonResourcesContextData>(\n    TektonResourcesContext,\n  );\n  const data = element.getData();\n  const triggerRef = React.useRef<SVGGElement | null>(null);\n\n  const pipelineRun = data.pipelineRun;\n  const [hover, hoverRef] = useHover();\n  const detailsLevel = useDetailsLevel();\n  const isFinallyTask = element.getType() === NodeType.FINALLY_NODE;\n\n  const pods = watchResourcesData?.pods?.data || [];\n  const taskRuns = watchResourcesData?.taskruns?.data || [];\n  const openDialog = () => {\n    setOpen(true);\n  };\n\n  const closeDialog = () => {\n    setOpen(false);\n  };\n\n  const computedTask: PipelineTaskWithStatus = data.task;\n  const stepList =\n    computedTask?.status?.steps || computedTask?.taskSpec?.steps || [];\n\n  const taskStatus = getTaskStatus(data.pipelineRun, data.task);\n\n  const stepStatusList: StepStatus[] = stepList.map((step: { name: string }) =>\n    createStepStatus(step, taskStatus),\n  );\n  const succeededStepsCount = stepStatusList.filter(\n    ({ status }) => status === RunStatus.Succeeded,\n  ).length;\n\n  const badge =\n    stepStatusList.length > 0 && data.status\n      ? `${succeededStepsCount}/${stepStatusList.length}`\n      : null;\n\n  const passedData = React.useMemo(() => {\n    const newData = { ...data };\n    Object.keys(newData).forEach(key => {\n      if (newData[key] === undefined) {\n        delete newData[key];\n      }\n    });\n    return newData;\n  }, [data]);\n\n  const hasTaskIcon = !!(data.taskIconClass || data.taskIcon);\n  const whenDecorator = data.whenStatus ? (\n    <WhenDecorator\n      element={element}\n      status={data.whenStatus}\n      leftOffset={\n        hasTaskIcon\n          ? DEFAULT_WHEN_OFFSET + (element.getBounds().height - 4) * 0.75\n          : DEFAULT_WHEN_OFFSET\n      }\n    />\n  ) : null;\n  const activeTaskId = taskRuns.find(\n    (tr: TaskRunKind) =>\n      tr?.metadata?.labels?.[TEKTON_PIPELINE_RUN] ===\n        pipelineRun?.metadata?.name &&\n      tr?.metadata?.labels?.[TEKTON_PIPELINE_TASK] === data.task?.name,\n  )?.metadata?.name;\n\n  const taskNode = (\n    <>\n      <PipelineRunLogDialog\n        pipelineRun={pipelineRun}\n        open={open}\n        closeDialog={closeDialog}\n        pods={pods}\n        taskRuns={taskRuns}\n        activeTask={activeTaskId}\n      />\n      <TaskNode\n        className=\"bs-tkn-pipeline-task-node\"\n        element={element}\n        onContextMenu={data.showContextMenu ? onContextMenu : undefined}\n        contextMenuOpen={contextMenuOpen}\n        scaleNode={\n          (hover || contextMenuOpen) && detailsLevel !== ScaleDetailsLevel.high\n        }\n        hideDetailsAtMedium\n        {...passedData}\n        {...rest}\n        badge={badge}\n        truncateLength={element.getData()?.label?.length}\n        onSelect={activeTaskId && openDialog}\n      >\n        {whenDecorator}\n      </TaskNode>\n    </>\n  );\n\n  return (\n    <Layer\n      id={\n        detailsLevel !== ScaleDetailsLevel.high && (hover || contextMenuOpen)\n          ? TOP_LAYER\n          : DEFAULT_LAYER\n      }\n    >\n      <g\n        data-test={`task ${element.getLabel()}`}\n        className=\"bs-tkn-pipeline-task-node\"\n        ref={hoverRef as React.LegacyRef<SVGGElement>}\n      >\n        <Tooltip\n          position=\"bottom\"\n          enableFlip={false}\n          content={\n            <PipelineVisualizationStepList\n              isSpecOverview={!data.status}\n              taskName={element.getLabel()}\n              steps={stepStatusList}\n              isFinallyTask={isFinallyTask}\n            />\n          }\n          triggerRef={triggerRef}\n        >\n          <g ref={triggerRef}>{taskNode}</g>\n        </Tooltip>\n      </g>\n    </Layer>\n  );\n};\n\nexport default React.memo(observer(PipelineTaskNode));\n"],"names":["React"],"mappings":"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"}

package/dist/components/pipeline-topology/PipelineVisualization.css.esm.js

@@ -0,0 +1,7 @@
+import styleInject from '../../node_modules/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = ".bs-tkn-pipeline-visualization__label {\n  align-items: baseline;\n  padding-bottom: var(--pf-v5-global--spacer--xs);\n}\n\n.bs-tkn-pipeline-visualization__label .badge {\n  font-size: 17px;\n  line-height: 20px;\n  margin-right: 4px;\n  min-width: 24px;\n  padding: 0 7px;\n  border-radius: 20px;\n  color: var(--pf-v5-global--palette--white);\n  display: inline-block;\n  text-align: center;\n  white-space: nowrap;\n  width: 100%;\n}\n\n.bs-tkn-pipeline-visualization__layout .pf-topology-content {\n  border-radius: 20px;\n}\n\n.bs-tkn-pipeline-visualization__layout .pf-topology-visualization-surface {\n  font-size: 1rem;\n  border-radius: 1rem;\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=PipelineVisualization.css.esm.js.map

package/dist/components/pipeline-topology/PipelineVisualization.css.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PipelineVisualization.css.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/components/pipeline-topology/PipelineVisualization.esm.js

@@ -0,0 +1,24 @@
+import React__default from 'react';
+import { useDarkTheme } from '../../hooks/useDarkTheme.esm.js';
+import { getGraphDataModel } from '../../utils/pipeline-topology-utils.esm.js';
+import { PipelineLayout } from './PipelineLayout.esm.js';
+import './PipelineVisualization.css.esm.js';
+
+const PipelineVisualization = ({
+  pipelineRun,
+  taskRuns
+}) => {
+  useDarkTheme();
+  const model = getGraphDataModel(pipelineRun ?? void 0, taskRuns ?? []);
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, !model || model.nodes.length === 0 && model.edges.length === 0 ? /* @__PURE__ */ React__default.createElement("div", { "data-testid": "pipeline-no-tasks" }, "This Pipeline Run has no tasks to visualize") : /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      "data-testid": "pipelineRun-visualization",
+      className: "bs-tkn-pipeline-visualization__layout"
+    },
+    /* @__PURE__ */ React__default.createElement(PipelineLayout, { model })
+  ));
+};
+
+export { PipelineVisualization };
+//# sourceMappingURL=PipelineVisualization.esm.js.map