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