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

A Backstage plugin that integrates towards StackStorm

import { jsx } from 'react/jsx-runtime';
import { useState } from 'react';
import { ResponseErrorPanel, Table, Link } from '@backstage/core-components';
import { useApi } from '@backstage/core-plugin-api';
import { stackstormApiRef } from '../../api/types.esm.js';
import '@backstage/errors';
import { Status } from './Status.esm.js';
import { ExecutionPanel } from './ExecutionPanel.esm.js';
import useAsync from 'react-use/esm/useAsync';

const DenseTable = ({
  executions,
  loading,
  page,
  pageSize,
  onPageChange,
  onRowsPerPageChange
}) => {
  const st2 = useApi(stackstormApiRef);
  const columns = [
    {
      title: "Status",
      field: "status",
      render: (e) => /* @__PURE__ */ jsx(Status, { status: e.status })
    },
    {
      title: "Time",
      field: "start_timestamp",
      render: (e) => `${new Date(e.start_timestamp).toUTCString()}`
    },
    { title: "Name", field: "action.ref" },
    {
      title: "Execution ID",
      field: "id",
      render: (e) => /* @__PURE__ */ jsx(Link, { to: st2.getExecutionHistoryUrl(e.id), children: e.id })
    }
  ];
  const count = pageSize > executions.length ? (page + 1) * pageSize + executions.length - pageSize : (page + 1) * pageSize + 1;
  return /* @__PURE__ */ jsx(
    Table,
    {
      title: "Executions",
      columns,
      data: executions,
      page,
      totalCount: count,
      isLoading: loading,
      options: {
        paging: true,
        search: false,
        pageSize,
        padding: "dense",
        showFirstLastPageButtons: false
      },
      onPageChange,
      onRowsPerPageChange,
      detailPanel: (rowData) => {
        return /* @__PURE__ */ jsx(ExecutionPanel, { id: rowData.rowData.id });
      }
    }
  );
};
const ExecutionsTable = () => {
  const st2 = useApi(stackstormApiRef);
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(10);
  const { value, loading, error } = useAsync(async () => {
    const data = await st2.getExecutions(rowsPerPage, page * rowsPerPage);
    return data;
  }, [page, rowsPerPage, st2]);
  if (error) {
    return /* @__PURE__ */ jsx(ResponseErrorPanel, { error });
  }
  return /* @__PURE__ */ jsx(
    DenseTable,
    {
      page,
      pageSize: rowsPerPage,
      loading,
      executions: value || [],
      onRowsPerPageChange: setRowsPerPage,
      onPageChange: setPage
    }
  );
};

export { DenseTable, ExecutionsTable };
//# sourceMappingURL=ExecutionsTable.esm.js.map