services/workbench2/src/views/subprocess-panel/subprocess-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 { SUBPROCESS_PANEL_ID } from 'store/subprocess-panel/subprocess-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 { CustomStyleRulesCallback } from 'common/custom-theme';
  21 import { Typography } from '@mui/material';
  22 import { WithStyles } from '@mui/styles';
  23 import withStyles from '@mui/styles/withStyles';
  24 import { ArvadosTheme } from 'common/custom-theme';
  25 import { ProcessResource } from 'models/process';
  26 import { SubprocessProgressBar } from 'components/subprocess-progress-bar/subprocess-progress-bar';
  27 import { Process } from 'store/processes/process';
  28
  29 type CssRules = 'iconHeader' | 'cardHeader';
  30
  31 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  32     iconHeader: {
  33         fontSize: '1.875rem',
  34         color: theme.customs.colors.greyL,
  35         marginRight: theme.spacing(2),
  36     },
  37     cardHeader: {
  38         display: 'flex',
  39     },
  40 });
  41
  42 export enum SubprocessPanelColumnNames {
  43     NAME = "Name",
  44     STATUS = "Status",
  45     CREATED_AT = "Created At",
  46     RUNTIME = "Run Time"
  47 }
  48
  49 export interface SubprocessPanelFilter extends DataTableFilterItem {
  50     type: ResourceKind | ContainerRequestState;
  51 }
  52
  53 export const subprocessPanelColumns: DataColumns<string, ProcessResource> = [
  54     {
  55         name: SubprocessPanelColumnNames.NAME,
  56         selected: true,
  57         configurable: true,
  58         sort: {direction: SortDirection.NONE, field: "name"},
  59         filters: createTree(),
  60         render: uuid => <ResourceName uuid={uuid} />
  61     },
  62     {
  63         name: SubprocessPanelColumnNames.STATUS,
  64         selected: true,
  65         configurable: true,
  66         mutuallyExclusiveFilters: true,
  67         filters: getInitialProcessStatusFilters(),
  68         render: uuid => <ProcessStatus uuid={uuid} />,
  69     },
  70     {
  71         name: SubprocessPanelColumnNames.CREATED_AT,
  72         selected: true,
  73         configurable: true,
  74         sort: {direction: SortDirection.DESC, field: "createdAt"},
  75         filters: createTree(),
  76         render: uuid => <ResourceCreatedAtDate uuid={uuid} />
  77     },
  78     {
  79         name: SubprocessPanelColumnNames.RUNTIME,
  80         selected: true,
  81         configurable: true,
  82         filters: createTree(),
  83         render: uuid => <ContainerRunTime uuid={uuid} />
  84     }
  85 ];
  86
  87 export interface SubprocessPanelDataProps {
  88     process: Process;
  89     resources: ResourcesState;
  90 }
  91
  92 export interface SubprocessPanelActionProps {
  93     onRowClick: (item: string) => void;
  94     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: string, resources: ResourcesState) => void;
  95     onItemDoubleClick: (item: string) => void;
  96 }
  97
  98 type SubprocessPanelProps = SubprocessPanelActionProps & SubprocessPanelDataProps;
  99
 100 const DEFAULT_VIEW_MESSAGES = [
 101     'No subprocesses available for listing.',
 102     'The current process may not have any or none matches current filtering.'
 103 ];
 104
 105 type SubProcessesTitleProps = WithStyles<CssRules>;
 106
 107 const SubProcessesTitle = withStyles(styles)(
 108     ({classes}: SubProcessesTitleProps) =>
 109         <div className={classes.cardHeader}>
 110             <ProcessIcon className={classes.iconHeader} /><span></span>
 111             <Typography noWrap variant='h6' color='inherit'>
 112                 Subprocesses
 113             </Typography>
 114         </div>
 115 );
 116
 117 export const SubprocessPanelRoot = (props: SubprocessPanelProps & MPVPanelProps) => {
 118     return <DataExplorer
 119         id={SUBPROCESS_PANEL_ID}
 120         onRowClick={props.onRowClick}
 121         onRowDoubleClick={props.onItemDoubleClick}
 122         onContextMenu={(event, item) => props.onContextMenu(event, item, props.resources)}
 123         contextMenuColumn={false}
 124         defaultViewIcon={ProcessIcon}
 125         defaultViewMessages={DEFAULT_VIEW_MESSAGES}
 126         doHidePanel={props.doHidePanel}
 127         doMaximizePanel={props.doMaximizePanel}
 128         doUnMaximizePanel={props.doUnMaximizePanel}
 129         panelMaximized={props.panelMaximized}
 130         panelName={props.panelName}
 131         title={<SubProcessesTitle/>}
 132         progressBar={<SubprocessProgressBar parentResource={props.process} />}
 133         forceMultiSelectMode
 134     />;
 135 };