Merge branch '20424-io-panel-performance' into main. Closes #20420

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

diff --git a/src/views/process-panel/process-details-card.tsx b/src/views/process-panel/process-details-card.tsx
index b8990b2f56630da55e5e338023eab2e82a8c5046..abcbcdb4c3a6d30129da50c0e490b02c46cb1901 100644 (file)
--- a/src/views/process-panel/process-details-card.tsx
+++ b/src/views/process-panel/process-details-card.tsx
@@ -17,12 +17,10 @@ import {
 } from '@material-ui/core';
 import { ArvadosTheme } from 'common/custom-theme';
 import { CloseIcon, MoreOptionsIcon, ProcessIcon, StartIcon, StopIcon } from 'components/icon/icon';
-import { Process } from 'store/processes/process';
+import { Process, isProcessRunnable, isProcessResumable, isProcessCancelable } from 'store/processes/process';
 import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
 import { ProcessDetailsAttributes } from './process-details-attributes';
 import { ProcessStatus } from 'views-components/data-explorer/renderers';
-import { ContainerState } from 'models/container';
-import { ContainerRequestState } from 'models/container-request';
 import classNames from 'classnames';
 
 type CssRules = 'card' | 'content' | 'title' | 'header' | 'cancelButton' | 'avatar' | 'iconHeader' | 'actionButton';
@@ -61,10 +59,10 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         fontSize: '0.78rem',
     },
     cancelButton: {
-        color: theme.customs.colors.red900,
-        borderColor: theme.customs.colors.red900,
+        color: theme.palette.common.white,
+        backgroundColor: theme.customs.colors.red900,
         '&:hover': {
-            borderColor: theme.customs.colors.red900,
+            backgroundColor: theme.customs.colors.red900,
         },
         '& svg': {
             fontSize: '22px',
@@ -85,13 +83,9 @@ type ProcessDetailsCardProps = ProcessDetailsCardDataProps & WithStyles<CssRules
 export const ProcessDetailsCard = withStyles(styles)(
     ({ cancelProcess, startProcess, resumeOnHoldWorkflow, onContextMenu, classes, process, doHidePanel, panelName }: ProcessDetailsCardProps) => {
         let runAction: ((uuid: string) => void) | undefined = undefined;
-        if (process.containerRequest.state === ContainerRequestState.UNCOMMITTED) {
+        if (isProcessRunnable(process)) {
             runAction = startProcess;
-        } else if (process.containerRequest.state === ContainerRequestState.COMMITTED &&
-                    process.containerRequest.priority === 0 &&
-                    // Don't show run button when container is present & running or cancelled
-                    !(process.container && (process.container.state === ContainerState.RUNNING ||
-                                            process.container.state === ContainerState.CANCELLED))) {
+        } else if (isProcessResumable(process)) {
             runAction = resumeOnHoldWorkflow;
         }
 
@@ -129,15 +123,10 @@ export const ProcessDetailsCard = withStyles(styles)(
                                 <StartIcon />
                                 Run
                             </Button>}
-                        {process.container &&
-                            (process.container.state === ContainerState.QUEUED ||
-                            process.container.state === ContainerState.LOCKED ||
-                            process.container.state === ContainerState.RUNNING) &&
-                            process.containerRequest.priority !== null &&
-                            process.containerRequest.priority > 0 &&
+                        {isProcessCancelable(process) &&
                             <Button
                                 data-cy="process-cancel-button"
-                                variant="outlined"
+                                variant="contained"
                                 size="small"
                                 color="primary"
                                 className={classNames(classes.actionButton, classes.cancelButton)}
@@ -153,10 +142,10 @@ export const ProcessDetailsCard = withStyles(styles)(
                                 <MoreOptionsIcon />
                             </IconButton>
                         </Tooltip>
-                        { doHidePanel &&
-                        <Tooltip title={`Close ${panelName || 'panel'}`} disableFocusListener>
-                            <IconButton onClick={doHidePanel}><CloseIcon /></IconButton>
-                        </Tooltip> }
+                        {doHidePanel &&
+                            <Tooltip title={`Close ${panelName || 'panel'}`} disableFocusListener>
+                                <IconButton onClick={doHidePanel}><CloseIcon /></IconButton>
+                            </Tooltip>}
                     </div>
                 } />
             <CardContent className={classes.content}>