services/workbench2/src/views/workflow-panel/workflow-processes-panel-root.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from 'react';
   6 import { DataExplorer } from "views-components/data-explorer/data-explorer";
   7 import { DataTableFilterItem } from 'components/data-table-filters/data-table-filters';
   8 import { ContainerRequestState } from 'models/container-request';
   9 import { DataColumns, SortDirection } from 'components/data-table/data-column';
  10 import { ResourceKind } from 'models/resource';
  11 import { ResourceCreatedAtDate, ProcessStatus, ContainerRunTime } from 'views-components/data-explorer/renderers';
  12 import { ProcessIcon } from 'components/icon/icon';
  13 import { ResourceName } from 'views-components/data-explorer/renderers';
  14 import { WORKFLOW_PROCESSES_PANEL_ID } from 'store/workflow-panel/workflow-panel-actions';
  15 import { createTree } from 'models/tree';
  16 import { getInitialProcessStatusFilters } from 'store/resource-type-filters/resource-type-filters';
  17 import { ResourcesState } from 'store/resources/resources';
  18 import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
  19 import { CustomStyleRulesCallback } from 'common/custom-theme';
  20 import { Typography } from '@mui/material';
  21 import { WithStyles } from '@mui/styles';
  22 import withStyles from '@mui/styles/withStyles';
  23 import { ArvadosTheme } from 'common/custom-theme';
  24 import { ProcessResource } from 'models/process';
  25
  26 type CssRules = 'iconHeader' | 'cardHeader';
  27
  28 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  29     iconHeader: {
  30         fontSize: '1.875rem',
  31         color: theme.customs.colors.greyL,
  32         marginRight: theme.spacing(2),
  33     },
  34     cardHeader: {
  35         display: 'flex',
  36     },
  37 });
  38
  39 export enum WorkflowProcessesPanelColumnNames {
  40     NAME = "Name",
  41     STATUS = "Status",
  42     CREATED_AT = "Created At",
  43     RUNTIME = "Run Time"
  44 }
  45
  46 export interface WorkflowProcessesPanelFilter extends DataTableFilterItem {
  47     type: ResourceKind | ContainerRequestState;
  48 }
  49
  50 export const workflowProcessesPanelColumns: DataColumns<string, ProcessResource> = [
  51     {
  52         name: WorkflowProcessesPanelColumnNames.NAME,
  53         selected: true,
  54         configurable: true,
  55         sort: { direction: SortDirection.NONE, field: "name" },
  56         filters: createTree(),
  57         render: uuid => <ResourceName uuid={uuid} />
  58     },
  59     {
  60         name: WorkflowProcessesPanelColumnNames.STATUS,
  61         selected: true,
  62         configurable: true,
  63         mutuallyExclusiveFilters: true,
  64         filters: getInitialProcessStatusFilters(),
  65         render: uuid => <ProcessStatus uuid={uuid} />,
  66     },
  67     {
  68         name: WorkflowProcessesPanelColumnNames.CREATED_AT,
  69         selected: true,
  70         configurable: true,
  71         sort: { direction: SortDirection.DESC, field: "createdAt" },
  72         filters: createTree(),
  73         render: uuid => <ResourceCreatedAtDate uuid={uuid} />
  74     },
  75     {
  76         name: WorkflowProcessesPanelColumnNames.RUNTIME,
  77         selected: true,
  78         configurable: true,
  79         filters: createTree(),
  80         render: uuid => <ContainerRunTime uuid={uuid} />
  81     }
  82 ];
  83
  84 export interface WorkflowProcessesPanelDataProps {
  85     resources: ResourcesState;
  86 }
  87
  88 export interface WorkflowProcessesPanelActionProps {
  89     onItemClick: (item: string) => void;
  90     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: string, resources: ResourcesState) => void;
  91     onItemDoubleClick: (item: string) => void;
  92 }
  93
  94 type WorkflowProcessesPanelProps = WorkflowProcessesPanelActionProps & WorkflowProcessesPanelDataProps;
  95
  96 const DEFAULT_VIEW_MESSAGES = [
  97     'No processes available for listing.',
  98     'The current process may not have any or none matches current filtering.'
  99 ];
 100
 101 type WorkflowProcessesTitleProps = WithStyles<CssRules>;
 102
 103 const WorkflowProcessesTitle = withStyles(styles)(
 104     ({ classes }: WorkflowProcessesTitleProps) =>
 105         <div className={classes.cardHeader}>
 106             <ProcessIcon className={classes.iconHeader} /><span></span>
 107             <Typography noWrap variant='h6' color='inherit'>
 108                 Run History
 109             </Typography>
 110         </div>
 111 );
 112
 113 export const WorkflowProcessesPanelRoot = (props: WorkflowProcessesPanelProps & MPVPanelProps) => {
 114     return <DataExplorer
 115         id={WORKFLOW_PROCESSES_PANEL_ID}
 116         onRowClick={props.onItemClick}
 117         onRowDoubleClick={props.onItemDoubleClick}
 118         onContextMenu={(event, item) => props.onContextMenu(event, item, props.resources)}
 119         contextMenuColumn={false}
 120         defaultViewIcon={ProcessIcon}
 121         defaultViewMessages={DEFAULT_VIEW_MESSAGES}
 122         doHidePanel={props.doHidePanel}
 123         doMaximizePanel={props.doMaximizePanel}
 124         doUnMaximizePanel={props.doUnMaximizePanel}
 125         panelMaximized={props.panelMaximized}
 126         panelName={props.panelName}
 127         title={<WorkflowProcessesTitle />}
 128         />;
 129 };