19295: Add "Cancelling" state.

Tweak "cancel" button styling from discussion with Sarah.

Arvados-DCO-1.1-Signed-off-by: Peter Amstutz <peter.amstutz@curii.com>

diff --git a/src/store/processes/process.ts b/src/store/processes/process.ts
index ec55535dde4e590a5971b851cbb7c2b02b04a030..e621949887a4307bd8477df2667d485bbbe8e2cb 100644 (file)
--- a/src/store/processes/process.ts
+++ b/src/store/processes/process.ts
@@ -27,6 +27,7 @@ export enum ProcessStatus {
     WARNING = 'Warning',
     UNKNOWN = 'Unknown',
     REUSED = 'Reused',
+    CANCELLING = 'Cancelling',
 }
 
 export const getProcess = (uuid: string) => (resources: ResourcesState): Process | undefined => {
@@ -95,6 +96,10 @@ export const getProcessStatusStyles = (status: string, theme: ArvadosTheme): Rea
             color = theme.customs.colors.red900;
             running = true;
             break;
+        case ProcessStatus.CANCELLING:
+            color = theme.customs.colors.red900;
+            running = true;
+            break;
         case ProcessStatus.CANCELLED:
         case ProcessStatus.FAILED:
             color = theme.customs.colors.red900;
@@ -164,6 +169,9 @@ export const getProcessStatus = ({ containerRequest, container }: Process): Proc
             return ProcessStatus.QUEUED;
 
         case container?.state === ContainerState.RUNNING:
+            if (container?.priority === 0) {
+                return ProcessStatus.CANCELLING;
+            }
             if (!!container?.runtimeStatus.error) {
                 return ProcessStatus.FAILING;
             }

diff --git a/src/views/process-panel/process-details-card.tsx b/src/views/process-panel/process-details-card.tsx
index f339d1b3dfab65cc22dc091eb6db2fb68a5257e3..abcbcdb4c3a6d30129da50c0e490b02c46cb1901 100644 (file)
--- a/src/views/process-panel/process-details-card.tsx
+++ b/src/views/process-panel/process-details-card.tsx
@@ -59,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',
@@ -126,7 +126,7 @@ export const ProcessDetailsCard = withStyles(styles)(
                         {isProcessCancelable(process) &&
                             <Button
                                 data-cy="process-cancel-button"
-                                variant="outlined"
+                                variant="contained"
                                 size="small"
                                 color="primary"
                                 className={classNames(classes.actionButton, classes.cancelButton)}