X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/7c6d47d766b7b37463281387d8badbfe18522d09..392a0a3992e48d0544523869b850b925d6d7f4c8:/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 5cca904a0d..da6438a1b8 100644
--- a/src/views/process-panel/process-details-card.tsx
+++ b/src/views/process-panel/process-details-card.tsx
@@ -13,16 +13,16 @@ import {
     CardContent,
     Tooltip,
     Typography,
-    Chip,
 } from '@material-ui/core';
 import { ArvadosTheme } from 'common/custom-theme';
 import { CloseIcon, MoreOptionsIcon, ProcessIcon } from 'components/icon/icon';
-import { Process, getProcessStatus, getProcessStatusColor } from 'store/processes/process';
+import { Process } 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';
 
-type CssRules = 'card' | 'content' | 'title' | 'header' | 'cancelButton' | 'chip' | 'avatar' | 'iconHeader';
+type CssRules = 'card' | 'content' | 'title' | 'header' | 'cancelButton' | 'avatar' | 'iconHeader';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     card: {
@@ -41,8 +41,10 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         paddingTop: theme.spacing.unit * 0.5
     },
     content: {
+        padding: theme.spacing.unit * 1.0,
+        paddingTop: theme.spacing.unit * 0.5,
         '&:last-child': {
-            paddingBottom: theme.spacing.unit * 2,
+            paddingBottom: theme.spacing.unit * 1,
         }
     },
     title: {
@@ -57,13 +59,6 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
             cursor: 'pointer'
         }
     },
-    chip: {
-        height: theme.spacing.unit * 3,
-        width: theme.spacing.unit * 12,
-        color: theme.palette.common.white,
-        fontSize: '0.875rem',
-        borderRadius: theme.spacing.unit * 0.625,
-    },
 });
 
 export interface ProcessDetailsCardDataProps {
@@ -72,10 +67,10 @@ export interface ProcessDetailsCardDataProps {
     onContextMenu: (event: React.MouseEvent<HTMLElement>) => void;
 }
 
-type ProcessDetailsCardProps = ProcessDetailsCardDataProps & WithStyles<CssRules, true> & MPVPanelProps;
+type ProcessDetailsCardProps = ProcessDetailsCardDataProps & WithStyles<CssRules> & MPVPanelProps;
 
-export const ProcessDetailsCard = withStyles(styles, {withTheme: true})(
-    ({ theme, cancelProcess, onContextMenu, classes, process, doHidePanel, panelName }: ProcessDetailsCardProps) => {
+export const ProcessDetailsCard = withStyles(styles)(
+    ({ cancelProcess, onContextMenu, classes, process, doHidePanel, panelName }: ProcessDetailsCardProps) => {
         return <Card className={classes.card}>
             <CardHeader
                 className={classes.header}
@@ -101,9 +96,7 @@ export const ProcessDetailsCard = withStyles(styles, {withTheme: true})(
                     <div>
                         {process.container && process.container.state === ContainerState.RUNNING &&
                             <span className={classes.cancelButton} onClick={() => cancelProcess(process.containerRequest.uuid)}>Cancel</span>}
-                        <Chip label={getProcessStatus(process)}
-                            className={classes.chip}
-                            style={{ backgroundColor: getProcessStatusColor(getProcessStatus(process), theme as ArvadosTheme) }} />
+                        <ProcessStatus uuid={process.containerRequest.uuid} />
                         <Tooltip title="More options" disableFocusListener>
                             <IconButton
                                 aria-label="More options"
@@ -118,7 +111,7 @@ export const ProcessDetailsCard = withStyles(styles, {withTheme: true})(
                     </div>
                 } />
             <CardContent className={classes.content}>
-                <ProcessDetailsAttributes request={process.containerRequest} twoCol />
+                <ProcessDetailsAttributes request={process.containerRequest} twoCol hideProcessPanelRedundantFields />
             </CardContent>
         </Card>;
     }