merge master

[arvados-workbench2.git] / src / views / process-panel / process-information-card.tsx

diff --git a/src/views/process-panel/process-information-card.tsx b/src/views/process-panel/process-information-card.tsx
index 53c56ca2807e9b2585a5aa5aac6275041b4675fe..acc1d8f2c51bc03864c7496dd9bafaa082d580ae 100644 (file)
--- a/src/views/process-panel/process-information-card.tsx
+++ b/src/views/process-panel/process-information-card.tsx
@@ -7,13 +7,16 @@ import {
     StyleRulesCallback, WithStyles, withStyles, Card,
     CardHeader, IconButton, CardContent, Grid, Chip, Typography, Tooltip
 } from '@material-ui/core';
+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 { 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: {
@@ -24,7 +27,8 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         color: theme.customs.colors.green700,
     },
     avatar: {
-        alignSelf: 'flex-start'
+        alignSelf: 'flex-start',
+        paddingTop: theme.spacing.unit * 0.5
     },
     label: {
         display: 'flex',
@@ -47,15 +51,10 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     chip: {
         height: theme.spacing.unit * 3,
         width: theme.spacing.unit * 12,
-        backgroundColor: theme.customs.colors.green700,
         color: theme.palette.common.white,
         fontSize: '0.875rem',
         borderRadius: theme.spacing.unit * 0.625,
     },
-    headerText: {
-        fontSize: '0.875rem',
-        marginLeft: theme.spacing.unit * 3,
-    },
     content: {
         '&:last-child': {
             paddingBottom: theme.spacing.unit * 2,
@@ -63,8 +62,24 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         }
     },
     title: {
-        overflow: 'hidden'
-    }
+        overflow: 'hidden',
+        paddingTop: theme.spacing.unit * 0.5
+    },
+    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 ProcessInformationCardDataProps {
@@ -85,7 +100,8 @@ export const ProcessInformationCard = withStyles(styles)(
                 avatar={<ProcessIcon className={classes.iconHeader} />}
                 action={
                     <div>
-                        <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)}>