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