@digital-ai/plugin-dai-deploy/dist/components/DenseTable/DenseTable.esm.js

Frontend functionalities for the dai-deploy backstage plugin

import { Table, LinkButton, Link } from '@backstage/core-components';
import LaunchIcon from '@material-ui/icons/Launch';
import React from 'react';
import SyncIcon from '@material-ui/icons/Sync';
import Typography from '@mui/material/Typography';
import capitalize from 'lodash/capitalize';
import { formatTimestamp } from '../../utils/dateTimeUtils.esm.js';
import { makeStyles } from '@material-ui/core';

const headerStyle = {
  textTransform: "capitalize",
  whiteSpace: "nowrap"
};
const cellStyle = { width: "auto", whiteSpace: "nowrap" };
const useStyles = makeStyles((theme) => ({
  empty: {
    padding: theme.spacing(2),
    display: "flex",
    justifyContent: "center"
  }
}));
const columnFactories = Object.freeze({
  createUserColumns() {
    return {
      title: "User",
      field: "owner",
      cellStyle,
      headerStyle,
      render: (row) => ` ${row.owner}`,
      searchable: true,
      sorting: true
    };
  },
  createStateColumns() {
    return {
      title: "State",
      field: "state",
      cellStyle,
      headerStyle,
      render: (row) => capitalize(row.state),
      searchable: true,
      sorting: true
    };
  },
  createStartDateColumns() {
    return {
      title: "Start Date",
      field: "startDate",
      cellStyle,
      headerStyle,
      render: (row) => formatTimestamp(row.startDate),
      searchable: true,
      sorting: true
    };
  },
  createEndDateColumns() {
    return {
      title: "End Date",
      field: "completionDate",
      cellStyle,
      headerStyle,
      render: (row) => formatTimestamp(row.completionDate),
      searchable: true,
      sorting: true
    };
  },
  createPackageColumns() {
    return {
      title: "Package",
      field: "package",
      cellStyle,
      headerStyle,
      render: (row) => row.package,
      searchable: true,
      sorting: true
    };
  },
  createActivePackageColumns() {
    return {
      title: "Package",
      field: "metadata.application",
      cellStyle,
      headerStyle,
      customFilterAndSearch: (query, row) => `${row.metadata.application} ${row.metadata.version}`.toLocaleUpperCase("en-US").includes(query.toLocaleUpperCase("en-US")),
      render: (row) => `${row.metadata.application}/${row.metadata.version}`,
      customSort: (a, b) => {
        const packageA = `${a.metadata.application} ${a.metadata.version}`;
        const packageB = `${b.metadata.application} ${b.metadata.version}`;
        return packageA.localeCompare(packageB);
      },
      searchable: true,
      sorting: true
    };
  },
  createEnvironmentColumns() {
    return {
      title: "Environment",
      field: "environment",
      cellStyle,
      headerStyle,
      render: (row) => /* @__PURE__ */ React.createElement(Link, { to: row.environmentRedirectUri }, row.environment),
      searchable: true,
      sorting: true
    };
  },
  createActiveEnvironmentColumns() {
    return {
      title: "Environment",
      field: "metadata.environment",
      cellStyle,
      headerStyle,
      render: (row) => /* @__PURE__ */ React.createElement(Link, { to: row.environmentRedirectUri }, row.metadata.environment),
      searchable: true,
      sorting: true
    };
  },
  createScheduledDateColumns() {
    return {
      title: "Scheduled Date",
      field: "scheduledDate",
      cellStyle,
      headerStyle,
      render: (row) => formatTimestamp(row.scheduledDate),
      searchable: true,
      sorting: true
    };
  },
  createTypeColumns() {
    return {
      title: "Type",
      field: "type",
      cellStyle,
      headerStyle,
      render: (row) => capitalize(row.type),
      searchable: true,
      sorting: true
    };
  },
  createActiveTypeColumns() {
    return {
      title: "Type",
      field: "metadata.taskType",
      cellStyle,
      headerStyle,
      render: (row) => capitalize(row.metadata.taskType),
      searchable: true,
      sorting: true
    };
  },
  createRedirectionColumns() {
    return {
      title: "View",
      field: "taskId",
      cellStyle,
      headerStyle,
      render: (row) => /* @__PURE__ */ React.createElement(LinkButton, { to: `${row.detailsRedirectUri}` }, /* @__PURE__ */ React.createElement(LaunchIcon, null)),
      searchable: false,
      sorting: false
    };
  }
});
const defaultActiveColumns = [
  columnFactories.createActivePackageColumns(),
  columnFactories.createActiveEnvironmentColumns(),
  columnFactories.createActiveTypeColumns(),
  columnFactories.createUserColumns(),
  columnFactories.createStateColumns(),
  columnFactories.createScheduledDateColumns(),
  columnFactories.createStartDateColumns(),
  columnFactories.createEndDateColumns(),
  columnFactories.createRedirectionColumns()
];
const defaultArchivedColumns = [
  columnFactories.createPackageColumns(),
  columnFactories.createEnvironmentColumns(),
  columnFactories.createTypeColumns(),
  columnFactories.createUserColumns(),
  columnFactories.createStateColumns(),
  columnFactories.createStartDateColumns(),
  columnFactories.createEndDateColumns(),
  columnFactories.createRedirectionColumns()
];
const DenseTable = ({
  tableData,
  loading,
  page,
  pageSize,
  totalCount,
  onPageChange,
  onRowsPerPageChange,
  columns,
  retry,
  onOrderDirection,
  onOrderBy
}) => {
  const classes = useStyles();
  return /* @__PURE__ */ React.createElement(
    Table,
    {
      columns,
      data: tableData,
      page,
      totalCount,
      isLoading: loading,
      actions: [
        {
          icon: () => /* @__PURE__ */ React.createElement(SyncIcon, { fontSize: "medium" }),
          tooltip: "Refresh Data",
          isFreeAction: true,
          onClick: () => retry()
        }
      ],
      options: {
        paging: true,
        search: true,
        showTitle: false,
        pageSize,
        pageSizeOptions: [5, 10, 20, 50],
        padding: "dense",
        showFirstLastPageButtons: true,
        showEmptyDataSourceMessage: !loading,
        toolbar: true,
        toolbarButtonAlignment: "left"
      },
      onPageChange,
      onRowsPerPageChange,
      onOrderChange: (orderBy, orderDirection) => {
        onOrderBy(orderBy);
        onOrderDirection(orderDirection);
      },
      emptyContent: /* @__PURE__ */ React.createElement(Typography, { color: "textSecondary", className: classes.empty }, "No tasks available")
    }
  );
};

export { DenseTable, columnFactories, defaultActiveColumns, defaultArchivedColumns };
//# sourceMappingURL=DenseTable.esm.js.map