src/views/process-panel/process-panel.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 '~/views/process-panel/information-card';
   8 import { SubprocessesCard } from '~/views/process-panel/subprocesses-card';
   9 import { SubprocessFilterDataProps } from '~/components/subprocess-filter/subprocess-filter';
  10
  11 export class ProcessPanel extends React.Component {
  12     state = {
  13         filters: [
  14             {
  15                 key: 'queued',
  16                 value: 1,
  17                 label: 'Queued',
  18                 checked: true
  19             }, {
  20                 key: 'active',
  21                 value: 2,
  22                 label: 'Active',
  23                 checked: true
  24             },
  25             {
  26                 key: 'completed',
  27                 value: 2,
  28                 label: 'Completed',
  29                 checked: true
  30             },
  31             {
  32                 key: 'failed',
  33                 value: 2,
  34                 label: 'Failed',
  35                 checked: true
  36             }
  37         ]
  38     };
  39
  40     onToggle = (filter: SubprocessFilterDataProps) => {
  41         this.setState((prev: { filters: any[] }) => {
  42             return {
  43                 filters: prev.filters.map((f: SubprocessFilterDataProps) => {
  44                     if(f.key === filter.key) {
  45                         return {
  46                             ...filter,
  47                             checked: !filter.checked
  48                         };
  49                     }
  50                     return f;
  51                 })
  52             };
  53         });
  54     }
  55
  56     render() {
  57         return <Grid container spacing={16}>
  58             <Grid item xs={7}>
  59                 <ProcessInformationCard />
  60             </Grid>
  61             <Grid item xs={5}>
  62                 <SubprocessesCard
  63                     subprocesses={4}
  64                     filters={this.state.filters}
  65                     onToggle={this.onToggle}
  66                 />
  67             </Grid>
  68         </Grid>;
  69     }
  70 }