process-statuses-filters

Feature #13860

Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>

diff --git a/src/views/process-panel/process-information-card.tsx b/src/views/process-panel/process-information-card.tsx
index f2379ed8dd697af03cd227f84d55c1a80e28e3f4..ea5144c3f0bb0a25b459e3fb31b43f47038e5cba 100644 (file)
--- a/src/views/process-panel/process-information-card.tsx
+++ b/src/views/process-panel/process-information-card.tsx
@@ -10,8 +10,9 @@ import {
 import { ArvadosTheme } from '~/common/custom-theme';
 import { MoreOptionsIcon, ProcessIcon } from '~/components/icon/icon';
 import { DetailsAttribute } from '~/components/details-attribute/details-attribute';
-import { Process, getProcessStatusColor } from '~/store/processes/process';
-import { getProcessStatus } from '~/store/processes/process';
+import { Process } from '~/store/processes/process';
+import { getProcessStatus, getProcessStatusColor } from '../../store/processes/process';
+import { formatDate } from '~/common/formatters';
 
 
 type CssRules = 'card' | 'iconHeader' | 'label' | 'value' | 'chip' | 'link' | 'content' | 'title' | 'avatar';
@@ -105,9 +106,9 @@ export const ProcessInformationCard = withStyles(styles, { withTheme: true })(
                 <Grid container>
                     <Grid item xs={6}>
                         <DetailsAttribute classLabel={classes.label} classValue={classes.value}
-                            label='From' value={process.container ? process.container.startedAt : 'N/A'} />
+                            label='From' value={process.container ? formatDate(process.container.startedAt!) : 'N/A'} />
                         <DetailsAttribute classLabel={classes.label} classValue={classes.value}
-                            label='To' value={process.container ? process.container.finishedAt : 'N/A'} />
+                            label='To' value={process.container ? formatDate(process.container.finishedAt!) : 'N/A'} />
                         <DetailsAttribute classLabel={classes.label} classValue={classes.link}
                             label='Workflow' value='???' />
                     </Grid>

diff --git a/src/views/process-panel/process-panel-root.tsx b/src/views/process-panel/process-panel-root.tsx
index 8e78f564f288de0220f84ed82753cc0f3cb5bc33..4aa51d8e64238fff972a9b51d164d564a4ef57fc 100644 (file)
--- a/src/views/process-panel/process-panel-root.tsx
+++ b/src/views/process-panel/process-panel-root.tsx
@@ -7,12 +7,11 @@ import { Grid } from '@material-ui/core';
 import { ProcessInformationCard } from './process-information-card';
 import { DefaultView } from '~/components/default-view/default-view';
 import { ProcessIcon } from '~/components/icon/icon';
-import { Process } from '~/store/processes/process';
+import { Process, getProcessStatus } from '~/store/processes/process';
 import { SubprocessesCard } from './subprocesses-card';
+import { SubprocessFilterDataProps } from '~/components/subprocess-filter/subprocess-filter';
+import { groupBy } from 'lodash';
 import { ProcessSubprocesses } from '~/views/process-panel/process-subprocesses';
-import { SubprocessesStatus } from '~/views/process-panel/process-subprocesses-card';
-
-type CssRules = 'headerActive' | 'headerCompleted' | 'headerQueued' | 'headerFailed' | 'headerCanceled';
 
 export interface ProcessPanelRootDataProps {
     process?: Process;
@@ -32,37 +31,13 @@ export const ProcessPanelRoot = (props: ProcessPanelRootProps) =>
                 <ProcessInformationCard
                     process={props.process}
                     onContextMenu={props.onContextMenu} />
+                {console.log(props.subprocesses)}
             </Grid>
             <Grid item xs={5}>
                 <SubprocessesCard
-                    subprocesses={4}
-                    filters={[
-                        {
-                            key: 'queued',
-                            value: 1,
-                            label: 'Queued',
-                            checked: true
-                        }, {
-                            key: 'active',
-                            value: 2,
-                            label: 'Active',
-                            checked: true
-                        },
-                        {
-                            key: 'completed',
-                            value: 2,
-                            label: 'Completed',
-                            checked: true
-                        },
-                        {
-                            key: 'failed',
-                            value: 2,
-                            label: 'Failed',
-                            checked: true
-                        }
-                    ]}
-                    onToggle={() => { return; }}
-                />
+                    subprocesses={props.subprocesses}
+                    filters={mapGroupedProcessesToFilters(groupSubprocessesByStatus(props.subprocesses))}
+                    onToggle={() => { return; }} />
             </Grid>
             <Grid item xs={12}>
                 <ProcessSubprocesses
@@ -78,3 +53,15 @@ export const ProcessPanelRoot = (props: ProcessPanelRootProps) =>
                 icon={ProcessIcon}
                 messages={['Process not found']} />
         </Grid>;
+
+const groupSubprocessesByStatus = (processes: Process[]) =>
+    groupBy(processes, getProcessStatus);
+
+const mapGroupedProcessesToFilters = (groupedProcesses: { [status: string]: Process[] }): SubprocessFilterDataProps[] =>
+    Object
+        .keys(groupedProcesses)
+        .map(status => ({
+            label: status,
+            key: status,
+            value: groupedProcesses[status].length
+        }));

diff --git a/src/views/process-panel/subprocesses-card.tsx b/src/views/process-panel/subprocesses-card.tsx
index ac60c9f66ef56a4e3842bf1465ce5473e10f15f0..0ff628512782e63d729cdecbb12e84a23ce96fa0 100644 (file)
--- a/src/views/process-panel/subprocesses-card.tsx
+++ b/src/views/process-panel/subprocesses-card.tsx
@@ -7,6 +7,7 @@ import { ArvadosTheme } from '~/common/custom-theme';
 import { StyleRulesCallback, withStyles, WithStyles, Card, CardHeader, CardContent, Grid, Switch } from '@material-ui/core';
 import { SubprocessFilter } from '~/components/subprocess-filter/subprocess-filter';
 import { SubprocessFilterDataProps } from '~/components/subprocess-filter/subprocess-filter';
+import { Process } from '~/store/processes/process';
 
 type CssRules = 'root';
 
@@ -17,7 +18,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
 });
 
 interface SubprocessesDataProps {
-    subprocesses: number;
+    subprocesses: Array<Process>;
     filters: SubprocessFilterDataProps[];
     onToggle: (filter: SubprocessFilterDataProps) => void;
 }
@@ -31,7 +32,7 @@ export const SubprocessesCard = withStyles(styles)(
             <CardContent>
                 <Grid container direction="column" spacing={16}>
                     <Grid item xs={12} container spacing={16}>
-                        <SubprocessFilter label='Subprocesses' value={subprocesses} />     
+                        <SubprocessFilter label='Subprocesses' value={subprocesses.length} />     
                     </Grid>
                     <Grid item xs={12} container spacing={16}>
                         {