18881: Make all process status widgets consistent. Updates tests.

[arvados-workbench2.git] / src / views-components / data-explorer / renderers.tsx

diff --git a/src/views-components/data-explorer/renderers.tsx b/src/views-components/data-explorer/renderers.tsx
index e854da0ee6caeebfdfd41af58dc8a081b58ecf0e..fe1bd07cc52effa2f57fb74af390824dab422a74 100644 (file)
--- a/src/views-components/data-explorer/renderers.tsx
+++ b/src/views-components/data-explorer/renderers.tsx
@@ -3,7 +3,15 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import React from 'react';
-import { Grid, Typography, withStyles, Tooltip, IconButton, Checkbox } from '@material-ui/core';
+import {
+    Grid,
+    Typography,
+    withStyles,
+    Tooltip,
+    IconButton,
+    Checkbox,
+    Chip
+} from '@material-ui/core';
 import { FavoriteStar, PublicFavoriteStar } from '../favorite-star/favorite-star';
 import { Resource, ResourceKind, TrashableResource } from 'models/resource';
 import {
@@ -827,11 +835,16 @@ export const ProcessStatus = compose(
     withStyles({}, { withTheme: true }))
     ((props: { process?: Process, theme: ArvadosTheme }) => {
         const status = props.process ? getProcessStatus(props.process) : "-";
-        return <Typography
-            noWrap
-            style={{ color: getProcessStatusColor(status, props.theme) }} >
-            {status}
-        </Typography>;
+        return <Chip label={status}
+            style={{
+                height: props.theme.spacing.unit * 3,
+                width: props.theme.spacing.unit * 12,
+                backgroundColor: getProcessStatusColor(status, props.theme),
+                color: props.theme.palette.common.white,
+                fontSize: '0.875rem',
+                borderRadius: props.theme.spacing.unit * 0.625,
+            }}
+        />;
     });
 
 export const ProcessStartDate = connect(