cr changes

Feature #13859

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

diff --git a/src/common/custom-theme.ts b/src/common/custom-theme.ts
index b47bd518a1867ae267c6eebffccdebc205671e4a..c4d3dbc35894537d2d66cda9926a2e56f74fb7cc 100644 (file)
--- a/src/common/custom-theme.ts
+++ b/src/common/custom-theme.ts
@@ -11,7 +11,7 @@ import green from '@material-ui/core/colors/green';
 import yellow from '@material-ui/core/colors/yellow';
 import red from '@material-ui/core/colors/red';
 
-interface ArvadosThemeOptions extends ThemeOptions {
+export interface ArvadosThemeOptions extends ThemeOptions {
     customs: any;
 }
 
@@ -39,7 +39,7 @@ const grey700 = grey["700"];
 const grey900 = grey["900"];
 const rocheBlue = '#06C';
 
-const themeOptions: ArvadosThemeOptions = {
+export const themeOptions: ArvadosThemeOptions = {
     customs: {
         colors: {
             green700: green["700"],

diff --git a/src/store/processes/process.ts b/src/store/processes/process.ts
index afd27b2e55124624ac8a01aa42d4c11a240585de..65b27e1308c386088c7534422fd81b2a5716a6d7 100644 (file)
--- a/src/store/processes/process.ts
+++ b/src/store/processes/process.ts
@@ -8,6 +8,8 @@ import { ResourcesState, getResource } from '~/store/resources/resources';
 import { filterResources } from '../resources/resources';
 import { ResourceKind, Resource } from '~/models/resource';
 import { getTimeDiff } from '~/common/formatters';
+import { SubprocessesStatus } from '~/views/process-panel/process-subprocesses-card';
+import { ArvadosTheme } from '~/common/custom-theme';
 
 export interface Process {
     containerRequest: ContainerRequestResource;
@@ -47,6 +49,23 @@ export const getProcessRuntime = (subprocess: Process) =>
         ? getTimeDiff(subprocess.container.finishedAt || '', subprocess.container.startedAt || '')
         : 0;
 
+export const getProcessStatusColor = (status: string, {customs}: ArvadosTheme) => {
+    switch (status) {
+        case SubprocessesStatus.COMPLETED:
+            return customs.colors.green700;
+        case SubprocessesStatus.CANCELED:
+            return customs.colors.red900;
+        case SubprocessesStatus.QUEUED:
+            return customs.colors.grey500;
+        case SubprocessesStatus.FAILED:
+            return customs.colors.red900;
+        case SubprocessesStatus.ACTIVE:
+            return customs.colors.blue500;
+        default:
+            return customs.colors.grey500;
+    }
+};
+
 export const getProcessStatus = (process: Process) =>
     process.container
         ? process.container.state
@@ -55,3 +74,4 @@ export const getProcessStatus = (process: Process) =>
 const isSubprocess = (containerUuid: string) => (resource: Resource) =>
     resource.kind === ResourceKind.CONTAINER_REQUEST
     && (resource as ContainerRequestResource).requestingContainerUuid === containerUuid;
+

diff --git a/src/views/process-panel/process-information-card.tsx b/src/views/process-panel/process-information-card.tsx
index e1c3b94345bdcf9c324a20e8dabbc08be33eb18a..1162a61a8bc8ad87b5cef3246cb11cfdaa392643 100644 (file)
--- a/src/views/process-panel/process-information-card.tsx
+++ b/src/views/process-panel/process-information-card.tsx
@@ -7,13 +7,12 @@ 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 { Process, getProcessStatusColor } from '~/store/processes/process';
 import { getProcessStatus } from '~/store/processes/process';
-import { getStatusColor } from '~/views/process-panel/process-panel-root';
+
 
 type CssRules = 'card' | 'iconHeader' | 'label' | 'value' | 'chip' | 'link' | 'content' | 'title' | 'avatar'
     | 'headerActive' | 'headerCompleted' | 'headerQueued' | 'headerFailed' | 'headerCanceled';
@@ -89,8 +88,8 @@ export interface ProcessInformationCardDataProps {
 
 type ProcessInformationCardProps = ProcessInformationCardDataProps & WithStyles<CssRules>;
 
-export const ProcessInformationCard = withStyles(styles)(
-    ({ classes, process, onContextMenu }: ProcessInformationCardProps) =>
+export const ProcessInformationCard = withStyles(styles, { withTheme: true })(
+    ({ classes, process, onContextMenu, theme }: ProcessInformationCardProps) =>
         <Card className={classes.card}>
             <CardHeader
                 classes={{
@@ -101,7 +100,8 @@ export const ProcessInformationCard = withStyles(styles)(
                 action={
                     <div>
                         <Chip label={getProcessStatus(process)}
-                            className={classnames([classes.chip, getStatusColor(getProcessStatus(process), classes)])} />
+                            className={classes.chip} 
+                            style={{ backgroundColor: getProcessStatusColor(getProcessStatus(process), theme as ArvadosTheme) }}/>
                         <IconButton
                             aria-label="More options"
                             onClick={event => onContextMenu(event)}>

diff --git a/src/views/process-panel/process-panel-root.tsx b/src/views/process-panel/process-panel-root.tsx
index f6d17395cd308f737dc99e9a878d04cf0f78f48d..8e78f564f288de0220f84ed82753cc0f3cb5bc33 100644 (file)
--- a/src/views/process-panel/process-panel-root.tsx
+++ b/src/views/process-panel/process-panel-root.tsx
@@ -78,20 +78,3 @@ export const ProcessPanelRoot = (props: ProcessPanelRootProps) =>
                 icon={ProcessIcon}
                 messages={['Process not found']} />
         </Grid>;
-
-export const getStatusColor = (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 --git a/src/views/process-panel/process-subprocesses-card.tsx b/src/views/process-panel/process-subprocesses-card.tsx
index 340e3c65deb42efde65088213b6af7e8217c488c..1bf2d4df909af2e10e69a5b8cbe9cfd56d21845d 100644 (file)
--- a/src/views/process-panel/process-subprocesses-card.tsx
+++ b/src/views/process-panel/process-subprocesses-card.tsx
@@ -7,13 +7,12 @@ 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 { getStatusColor } from '~/views/process-panel/process-panel-root';
 import { Process, getProcessStatus, getProcessRuntime } from '~/store/processes/process';
 import { formatTime } from '~/common/formatters';
+import { getProcessStatusColor } from '~/store/processes/process';
 
 export type CssRules = 'label' | 'value' | 'title' | 'content' | 'action' | 'options' | 'status' | 'rightSideHeader' | 'titleHeader'
     | 'header' | 'headerActive' | 'headerCompleted' | 'headerQueued' | 'headerFailed' | 'headerCanceled';
@@ -96,11 +95,12 @@ export interface ProcessSubprocessesCardDataProps {
 
 type ProcessSubprocessesCardProps = ProcessSubprocessesCardDataProps & WithStyles<CssRules>;
 
-export const ProcessSubprocessesCard = withStyles(styles)(
-    ({ classes, onContextMenu, subprocess }: ProcessSubprocessesCardProps) => {
+export const ProcessSubprocessesCard = withStyles(styles, { withTheme: true })(
+    ({ classes, onContextMenu, subprocess, theme }: ProcessSubprocessesCardProps) => {
         return <Card>
             <CardHeader
-                className={classnames([classes.header, getStatusColor(getProcessStatus(subprocess), classes)])}
+                className={classes.header}
+                style={{ backgroundColor: getProcessStatusColor(getProcessStatus(subprocess), theme as ArvadosTheme) }}
                 classes={{ content: classes.title, action: classes.action }}
                 action={
                     <div className={classes.rightSideHeader}>