From: Pawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>
Date: Thu, 30 Aug 2018 13:34:30 +0000 (+0200)
Subject: merge master
X-Git-Tag: 1.3.0~123^2~8
X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/97de0bf90660e72220f350483981e35d53a5998f

merge master

Feature #13859

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

97de0bf90660e72220f350483981e35d53a5998f
diff --cc src/views/process-panel/process-information-card.tsx
index 359c2565,53c56ca2..acc1d8f2
--- a/src/views/process-panel/process-information-card.tsx
+++ b/src/views/process-panel/process-information-card.tsx
@@@ -11,11 -10,10 +11,12 @@@ import * as classnames from "classnames
  import { ArvadosTheme } from '~/common/custom-theme';
  import { MoreOptionsIcon, ProcessIcon } from '~/components/icon/icon';
  import { DetailsAttribute } from '~/components/details-attribute/details-attribute';
- import { getBackgroundColorStatus } from '~/views/process-panel/process-panel';
- import { SubprocessesStatus } from '~/views/process-panel/process-subprocesses';
+ import { Process } from '~/store/processes/process';
 -import { getProcessStatus } from '../../store/processes/process';
++import { getProcessStatus } from '~/store/processes/process';
++import { getBackgroundColorStatus } from '~/views/process-panel/process-panel-root';
  
 -type CssRules = 'card' | 'iconHeader' | 'label' | 'value' | 'chip' | 'headerText' | 'link' | 'content' | 'title' | 'avatar';
 +type CssRules = 'card' | 'iconHeader' | 'label' | 'value' | 'chip' | 'link' | 'content' | 'title' | 'avatar'
 +    | 'headerActive' | 'headerCompleted' | 'headerQueued' | 'headerFailed' | 'headerCanceled';
  
  const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
      card: {
@@@ -99,8 -85,7 +100,8 @@@ export const ProcessInformationCard = w
                  avatar={<ProcessIcon className={classes.iconHeader} />}
                  action={
                      <div>
-                         <Chip label={SubprocessesStatus.ACTIVE}
-                             className={classnames([classes.chip, getBackgroundColorStatus(SubprocessesStatus.ACTIVE, classes)])} />
 -                        <Chip label={getProcessStatus(process)} className={classes.chip} />
++                        <Chip label={getProcessStatus(process)}
++                            className={classnames([classes.chip, getBackgroundColorStatus(getProcessStatus(process), classes)])} />
                          <IconButton
                              aria-label="More options"
                              onClick={event => onContextMenu(event)}>
diff --cc src/views/process-panel/process-panel-root.tsx
index 00000000,feada3ac..49ce98c0
mode 000000,100644..100644
--- a/src/views/process-panel/process-panel-root.tsx
+++ b/src/views/process-panel/process-panel-root.tsx
@@@ -1,0 -1,69 +1,91 @@@
+ // Copyright (C) The Arvados Authors. All rights reserved.
+ //
+ // SPDX-License-Identifier: AGPL-3.0
+ 
+ import * as React from 'react';
+ 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 { SubprocessesCard } from './subprocesses-card';
++import { ProcessSubprocesses } from '~/views-components/process-subprocesses/process-subprocesses';
++import { SubprocessesStatus } from '~/views/process-panel/process-subprocesses';
++
++type CssRules = 'headerActive' | 'headerCompleted' | 'headerQueued' | 'headerFailed' | 'headerCanceled';
+ 
+ export interface ProcessPanelRootDataProps {
+     process?: Process;
+ }
+ 
+ export interface ProcessPanelRootActionProps {
+     onContextMenu: (event: React.MouseEvent<HTMLElement>) => void;
+ }
+ 
+ export type ProcessPanelRootProps = ProcessPanelRootDataProps & ProcessPanelRootActionProps;
+ 
+ export const ProcessPanelRoot = (props: ProcessPanelRootProps) =>
+     props.process
+         ? <Grid container spacing={16}>
+             <Grid item xs={7}>
+                 <ProcessInformationCard
+                     process={props.process}
+                     onContextMenu={props.onContextMenu} />
+             </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; }}
+                 />
+             </Grid>
++            <ProcessSubprocesses />
+         </Grid>
+         : <Grid container
+             alignItems='center'
+             justify='center'>
+             <DefaultView
+                 icon={ProcessIcon}
+                 messages={['Process not found']} />
+         </Grid>;
++
++export const getBackgroundColorStatus = (status: string, classes: Record<CssRules, string>) => {
++    switch (status) {
++        case SubprocessesStatus.COMPLETED:
++            return classes.headerCompleted;
++        case SubprocessesStatus.CANCELED:
++            return classes.headerCanceled;
++        case SubprocessesStatus.QUEUED:
++            return classes.headerQueued;
++        case SubprocessesStatus.FAILED:
++            return classes.headerFailed;
++        case SubprocessesStatus.ACTIVE:
++            return classes.headerActive;
++        default:
++            return classes.headerQueued;
++    }
++};
diff --cc src/views/process-panel/process-subprocesses-card.tsx
index 2ea1b7eb,00000000..17c44246
mode 100644,000000..100644
--- a/src/views/process-panel/process-subprocesses-card.tsx
+++ b/src/views/process-panel/process-subprocesses-card.tsx
@@@ -1,114 -1,0 +1,114 @@@
 +// Copyright (C) The Arvados Authors. All rights reserved.
 +//
 +// SPDX-License-Identifier: AGPL-3.0
 +
 +import * as React from 'react';
 +import {
 +    StyleRulesCallback, WithStyles, withStyles, Card,
 +    CardHeader, IconButton, CardContent, Typography, Tooltip
 +} from '@material-ui/core';
 +import * as classnames from "classnames";
 +import { ArvadosTheme } from '~/common/custom-theme';
 +import { MoreOptionsIcon } from '~/components/icon/icon';
 +import { DetailsAttribute } from '~/components/details-attribute/details-attribute';
- import { getBackgroundColorStatus } from '~/views/process-panel/process-panel';
++import { getBackgroundColorStatus } from '~/views/process-panel/process-panel-root';
 +
 +export type CssRules = 'label' | 'value' | 'title' | 'content' | 'action' | 'options' | 'status' | 'rightSideHeader' | 'titleHeader'
 +    | 'header' | 'headerActive' | 'headerCompleted' | 'headerQueued' | 'headerFailed' | 'headerCanceled';
 +
 +const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
 +    label: {
 +        fontSize: '0.875rem',
 +    },
 +    value: {
 +        textTransform: 'none',
 +        fontSize: '0.875rem',
 +    },
 +    title: {
 +        overflow: 'hidden'
 +    },
 +    content: {
 +        paddingTop: theme.spacing.unit * 0.5,
 +        '&:last-child': {
 +            paddingBottom: 0
 +        }
 +    },
 +    action: {
 +        marginTop: 0
 +    },
 +    options: {
 +        width: theme.spacing.unit * 4,
 +        height: theme.spacing.unit * 4,
 +        color: theme.palette.common.white,
 +    },
 +    status: {
 +        paddingTop: theme.spacing.unit * 0.5,
 +        color: theme.palette.common.white,
 +    },
 +    rightSideHeader: {
 +        display: 'flex'
 +    },
 +    titleHeader: {
 +        color: theme.palette.common.white,
 +        fontWeight: 600
 +    },
 +    header: {
 +        paddingTop: 0,
 +        paddingBottom: 0,
 +    },
 +    headerActive: {
 +        backgroundColor: theme.customs.colors.blue500,
 +    },
 +    headerCompleted: {
 +        backgroundColor: theme.customs.colors.green700,
 +    },
 +    headerQueued: {
 +        backgroundColor: theme.customs.colors.grey500,
 +    },
 +    headerFailed: {
 +        backgroundColor: theme.customs.colors.red900,
 +    },
 +    headerCanceled: {
 +        backgroundColor: theme.customs.colors.red900,
 +    },
 +});
 +
 +export interface ProcessSubprocessesCardDataProps {
 +    onContextMenu: (event: React.MouseEvent<HTMLElement>) => void;
 +    items: any;
 +}
 +
 +type ProcessSubprocessesCardProps = ProcessSubprocessesCardDataProps & WithStyles<CssRules>;
 +
 +export const ProcessSubprocessesCard = withStyles(styles)(
 +    ({ classes, onContextMenu, items }: ProcessSubprocessesCardProps) => {
 +        return <Card>
 +            <CardHeader
 +                className={classnames([classes.header, getBackgroundColorStatus(items.status, classes)])}
 +                classes={{ content: classes.title, action: classes.action }}
 +                action={
 +                    <div className={classes.rightSideHeader}>
 +                        <Typography noWrap variant="body2" className={classes.status}>
 +                            {items.status}
 +                        </Typography>
 +                        <IconButton
 +                            className={classes.options}
 +                            aria-label="More options"
 +                            onClick={event => onContextMenu(event)}>
 +                            <MoreOptionsIcon />
 +                        </IconButton>
 +                    </div>
 +                }
 +                title={
 +                    <Tooltip title={items.title}>
 +                        <Typography noWrap variant="body2" className={classes.titleHeader}>
 +                            {items.title}
 +                        </Typography>
 +                    </Tooltip>
 +                } />
 +            <CardContent className={classes.content}>
 +                <DetailsAttribute classLabel={classes.label} classValue={classes.value}
 +                    label='Runtime' value="0h 2m" />
 +            </CardContent>
 +        </Card>;
 +    });