@backstage-community/plugin-stackstorm/dist/components/ExecutionsTable/ExecutionPanel.esm.js

A Backstage plugin that integrates towards StackStorm

import { jsx, jsxs } from 'react/jsx-runtime';
import { Progress, ResponseErrorPanel, CodeSnippet } from '@backstage/core-components';
import { useApi } from '@backstage/core-plugin-api';
import { stackstormApiRef } from '../../api/types.esm.js';
import '@backstage/errors';
import useAsync from 'react-use/esm/useAsync';
import Button from '@material-ui/core/Button';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';
import Typography from '@material-ui/core/Typography';
import { makeStyles, withStyles } from '@material-ui/core/styles';
import { Status } from './Status.esm.js';

const useStyles = makeStyles((theme) => ({
  table: {
    maxWidth: "50%",
    flex: "i"
  },
  title: {
    paddingTop: theme.spacing(2),
    fontSize: 14,
    fontWeight: "bold",
    textTransform: "uppercase"
  },
  card: {
    borderBottom: `2px solid ${theme.palette.divider}`
  }
}));
const THead = withStyles(() => ({
  root: {
    paddingLeft: 0
  }
}))(TableCell);
const TRow = withStyles((theme) => ({
  root: {
    "&:nth-of-type(odd)": {
      backgroundColor: theme.palette.background.paper
    }
  }
}))(TableRow);
const ExecutionCard = ({ e }) => {
  const st2 = useApi(stackstormApiRef);
  const classes = useStyles();
  return /* @__PURE__ */ jsxs(Card, { className: classes.card, children: [
    /* @__PURE__ */ jsxs(CardContent, { children: [
      /* @__PURE__ */ jsx(Table, { className: classes.table, size: "small", children: /* @__PURE__ */ jsxs(TableBody, { children: [
        /* @__PURE__ */ jsxs(TRow, { children: [
          /* @__PURE__ */ jsx(THead, { component: "th", scope: "row", children: "Name" }),
          /* @__PURE__ */ jsx(TableCell, { children: e.action.ref })
        ] }),
        /* @__PURE__ */ jsxs(TRow, { children: [
          /* @__PURE__ */ jsx(THead, { component: "th", scope: "row", children: "Status" }),
          /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Status, { status: e.status }) })
        ] }),
        /* @__PURE__ */ jsxs(TRow, { children: [
          /* @__PURE__ */ jsx(THead, { component: "th", scope: "row", children: "Execution ID" }),
          /* @__PURE__ */ jsx(TableCell, { children: e.id })
        ] }),
        /* @__PURE__ */ jsxs(TRow, { children: [
          /* @__PURE__ */ jsx(THead, { component: "th", scope: "row", children: "Started" }),
          /* @__PURE__ */ jsx(TableCell, { children: new Date(e.start_timestamp).toUTCString() })
        ] }),
        /* @__PURE__ */ jsxs(TRow, { children: [
          /* @__PURE__ */ jsx(THead, { component: "th", scope: "row", children: "Finished" }),
          /* @__PURE__ */ jsx(TableCell, { children: new Date(e.end_timestamp).toUTCString() })
        ] }),
        /* @__PURE__ */ jsxs(TRow, { children: [
          /* @__PURE__ */ jsx(THead, { component: "th", scope: "row", children: "Execution Time" }),
          /* @__PURE__ */ jsxs(TableCell, { children: [
            Math.round(e.elapsed_seconds),
            " s"
          ] })
        ] }),
        /* @__PURE__ */ jsxs(TRow, { children: [
          /* @__PURE__ */ jsx(THead, { component: "th", scope: "row", children: "Runner" }),
          /* @__PURE__ */ jsx(TableCell, { children: e.action.runner_type })
        ] })
      ] }) }),
      /* @__PURE__ */ jsx(Typography, { className: classes.title, gutterBottom: true, children: "Action Output" }),
      /* @__PURE__ */ jsx(
        CodeSnippet,
        {
          text: JSON.stringify(e.result, null, 2),
          language: "json",
          customStyle: { width: 800 }
        }
      ),
      /* @__PURE__ */ jsx(Typography, { className: classes.title, gutterBottom: true, children: "Action Input" }),
      /* @__PURE__ */ jsx(
        CodeSnippet,
        {
          text: JSON.stringify(e.parameters, null, 2),
          language: "json",
          customStyle: { width: 800 }
        }
      )
    ] }),
    /* @__PURE__ */ jsx(CardActions, { children: /* @__PURE__ */ jsx(
      Button,
      {
        size: "small",
        href: `${st2.getExecutionHistoryUrl(e.id)}`,
        target: "_blank",
        children: "View in ST2"
      }
    ) })
  ] });
};
const ExecutionPanel = ({ id }) => {
  const st2 = useApi(stackstormApiRef);
  const { value, loading, error } = useAsync(async () => {
    const data = await st2.getExecution(id);
    return data;
  }, []);
  if (loading) {
    return /* @__PURE__ */ jsx(Progress, {});
  } else if (error) {
    return /* @__PURE__ */ jsx(ResponseErrorPanel, { error });
  }
  return /* @__PURE__ */ jsx(ExecutionCard, { e: value });
};

export { ExecutionPanel };
//# sourceMappingURL=ExecutionPanel.esm.js.map