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, getProcessStatus } from '~/store/processes/process';
  11 import { SubprocessesCard } from './subprocesses-card';
  12 import { SubprocessFilterDataProps } from '~/components/subprocess-filter/subprocess-filter';
  13 import { groupBy } from 'lodash';
  14 import { ProcessSubprocesses } from '~/views/process-panel/process-subprocesses';
  15
  16 export interface ProcessPanelRootDataProps {
  17     process?: Process;
  18     subprocesses: Array<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                 {console.log(props.subprocesses)}
  35             </Grid>
  36             <Grid item xs={5}>
  37                 <SubprocessesCard
  38                     subprocesses={props.subprocesses}
  39                     filters={mapGroupedProcessesToFilters(groupSubprocessesByStatus(props.subprocesses))}
  40                     onToggle={() => { return; }} />
  41             </Grid>
  42             <Grid item xs={12}>
  43                 <ProcessSubprocesses
  44                     subprocesses={props.subprocesses}
  45                     onContextMenu={props.onContextMenu} />
  46             </Grid>
  47         </Grid>
  48         : <Grid container
  49             alignItems='center'
  50             justify='center'
  51             style={{ minHeight: '100%' }}>
  52             <DefaultView
  53                 icon={ProcessIcon}
  54                 messages={['Process not found']} />
  55         </Grid>;
  56
  57 const groupSubprocessesByStatus = (processes: Process[]) =>
  58     groupBy(processes, getProcessStatus);
  59
  60 const mapGroupedProcessesToFilters = (groupedProcesses: { [status: string]: Process[] }): SubprocessFilterDataProps[] =>
  61     Object
  62         .keys(groupedProcesses)
  63         .map(status => ({
  64             label: status,
  65             key: status,
  66             value: groupedProcesses[status].length
  67         }));