19744: Add icon

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

diff --git a/services/workbench2/src/components/icon/icon.tsx b/services/workbench2/src/components/icon/icon.tsx
index a54bc999e97f580cf698df2369a7c2e5a9b9b259..1ba88d25b221ce4ea5567401ebff3f7e4ed2e6d7 100644 (file)
--- a/services/workbench2/src/components/icon/icon.tsx
+++ b/services/workbench2/src/components/icon/icon.tsx
@@ -77,6 +77,7 @@ import NotInterested from "@material-ui/icons/NotInterested";
 import Image from "@material-ui/icons/Image";
 import Stop from "@material-ui/icons/Stop";
 import FileCopy from "@material-ui/icons/FileCopy";
+import ShowChart from "@material-ui/icons/ShowChart";
 
 // Import FontAwesome icons
 import { library } from "@fortawesome/fontawesome-svg-core";
@@ -274,3 +275,4 @@ export const StartIcon: IconType = props => <PlayArrow {...props} />;
 export const StopIcon: IconType = props => <Stop {...props} />;
 export const SelectAllIcon: IconType = props => <CheckboxMultipleOutline {...props} />;
 export const SelectNoneIcon: IconType = props => <CheckboxMultipleBlankOutline {...props} />;
+export const ShowChartIcon: IconType = props => <ShowChart {...props} />;

diff --git a/services/workbench2/src/views/process-panel/process-resource-card.tsx b/services/workbench2/src/views/process-panel/process-resource-card.tsx
index 1832fe4744a66e9cb4afee8b3b6142b6ac96f542..a360e89f0b158badc3f7750a4b8fdbc3380ea7bd 100644 (file)
--- a/services/workbench2/src/views/process-panel/process-resource-card.tsx
+++ b/services/workbench2/src/views/process-panel/process-resource-card.tsx
@@ -14,7 +14,6 @@ import {
     Tooltip,
     Typography,
     Grid,
-    Link,
     Button
 } from '@material-ui/core';
 import { ArvadosTheme } from 'common/custom-theme';
@@ -23,6 +22,7 @@ import {
     MaximizeIcon,
     ResourceIcon,
     UnMaximizeIcon,
+    ShowChartIcon,
 } from 'components/icon/icon';
 import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
 import { connect } from 'react-redux';
@@ -38,7 +38,7 @@ interface ProcessResourceCardDataProps {
     usageReport: string | null;
 }
 
-type CssRules = "card" | "header" | "title" | "avatar" | "iconHeader" | "content" | "sectionH3";
+type CssRules = "card" | "header" | "title" | "avatar" | "iconHeader" | "content" | "sectionH3" | "reportButton";
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     card: {
@@ -67,6 +67,9 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         color: theme.customs.colors.greyD,
         fontSize: "0.8125rem",
         textTransform: "uppercase",
+    },
+    reportButton: {
+        fontSize: '0.75rem'
     }
 });
 
@@ -99,7 +102,7 @@ export const ProcessResourceCard = withStyles(styles)(connect()(
                 }
                 action={
                     <div>
-                        {usageReport && <Button href={usageReport} variant="contained" color="primary">Resource usage report</Button>}
+                        {usageReport && <Button href={usageReport} variant="contained" color="primary" className={classes.reportButton}><ShowChartIcon /> Resource usage report</Button>}
                         {doUnMaximizePanel && panelMaximized &&
                             <Tooltip title={`Unmaximize ${panelName || 'panel'}`} disableFocusListener>
                                 <IconButton onClick={doUnMaximizePanel}><UnMaximizeIcon /></IconButton>