src/views/process-panel/process-panel-root.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import { Grid } from '@material-ui/core';
   7 import { ProcessInformationCard } from './process-information-card';
   8 import { DefaultView } from '~/components/default-view/default-view';
   9 import { ProcessIcon } from '~/components/icon/icon';
  10 import { Process } from '~/store/processes/process';
  11 import { SubprocessesCard } from './subprocesses-card';
  12 import { ProcessSubprocesses } from '~/views-components/process-subprocesses/process-subprocesses';
  13 import { SubprocessesStatus } from '~/views/process-panel/process-subprocesses';
  14
  15 type CssRules = 'headerActive' | 'headerCompleted' | 'headerQueued' | 'headerFailed' | 'headerCanceled';
  16
  17 export interface ProcessPanelRootDataProps {
  18     process?: Process;
  19 }
  20
  21 export interface ProcessPanelRootActionProps {
  22     onContextMenu: (event: React.MouseEvent<HTMLElement>) => void;
  23 }
  24
  25 export type ProcessPanelRootProps = ProcessPanelRootDataProps & ProcessPanelRootActionProps;
  26
  27 export const ProcessPanelRoot = (props: ProcessPanelRootProps) =>
  28     props.process
  29         ? <Grid container spacing={16}>
  30             <Grid item xs={7}>
  31                 <ProcessInformationCard
  32                     process={props.process}
  33                     onContextMenu={props.onContextMenu} />
  34             </Grid>
  35             <Grid item xs={5}>
  36                 <SubprocessesCard
  37                     subprocesses={4}
  38                     filters={[
  39                         {
  40                             key: 'queued',
  41                             value: 1,
  42                             label: 'Queued',
  43                             checked: true
  44                         }, {
  45                             key: 'active',
  46                             value: 2,
  47                             label: 'Active',
  48                             checked: true
  49                         },
  50                         {
  51                             key: 'completed',
  52                             value: 2,
  53                             label: 'Completed',
  54                             checked: true
  55                         },
  56                         {
  57                             key: 'failed',
  58                             value: 2,
  59                             label: 'Failed',
  60                             checked: true
  61                         }
  62                     ]}
  63                     onToggle={() => { return; }}
  64                 />
  65             </Grid>
  66             <ProcessSubprocesses />
  67         </Grid>
  68         : <Grid container
  69             alignItems='center'
  70             justify='center'>
  71             <DefaultView
  72                 icon={ProcessIcon}
  73                 messages={['Process not found']} />
  74         </Grid>;
  75
  76 export const getBackgroundColorStatus = (status: string, classes: Record<CssRules, string>) => {
  77     switch (status) {
  78         case SubprocessesStatus.COMPLETED:
  79             return classes.headerCompleted;
  80         case SubprocessesStatus.CANCELED:
  81             return classes.headerCanceled;
  82         case SubprocessesStatus.QUEUED:
  83             return classes.headerQueued;
  84         case SubprocessesStatus.FAILED:
  85             return classes.headerFailed;
  86         case SubprocessesStatus.ACTIVE:
  87             return classes.headerActive;
  88         default:
  89             return classes.headerQueued;
  90     }
  91 };