X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/28b6afc1e8ccf652c7a8fd43e22a8ac788febd85..44c8f9ed561513b607d3eca752ad3e1efd376f56:/services/workbench2/src/views/process-panel/process-resource-card.tsx

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 b39f48ea12..d1492ddbf5 100644
--- a/services/workbench2/src/views/process-panel/process-resource-card.tsx
+++ b/services/workbench2/src/views/process-panel/process-resource-card.tsx
@@ -14,13 +14,16 @@ import {
     Tooltip,
     Typography,
     Grid,
+    Link,
+    Button
 } from '@material-ui/core';
 import { ArvadosTheme } from 'common/custom-theme';
 import {
     CloseIcon,
     MaximizeIcon,
-    MemoryIcon,
+    ResourceIcon,
     UnMaximizeIcon,
+    ShowChartIcon,
 } from 'components/icon/icon';
 import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
 import { connect } from 'react-redux';
@@ -33,9 +36,10 @@ import { MountKind } from 'models/mount-types';
 interface ProcessResourceCardDataProps {
     process: Process;
     nodeInfo: NodeInstanceType | null;
+    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: {
@@ -64,13 +68,15 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         color: theme.customs.colors.greyD,
         fontSize: "0.8125rem",
         textTransform: "uppercase",
+    },
+    reportButton: {
     }
 });
 
 type ProcessResourceCardProps = ProcessResourceCardDataProps & WithStyles<CssRules> & MPVPanelProps;
 
 export const ProcessResourceCard = withStyles(styles)(connect()(
-    ({ classes, nodeInfo, doHidePanel, doMaximizePanel, doUnMaximizePanel, panelMaximized, panelName, process, }: ProcessResourceCardProps) => {
+    ({ classes, nodeInfo, usageReport, doHidePanel, doMaximizePanel, doUnMaximizePanel, panelMaximized, panelName, process, }: ProcessResourceCardProps) => {
         let diskRequest = 0;
         if (process.container?.mounts) {
             for (const mnt in process.container.mounts) {
@@ -88,7 +94,7 @@ export const ProcessResourceCard = withStyles(styles)(connect()(
                     content: classes.title,
                     avatar: classes.avatar,
                 }}
-                avatar={<MemoryIcon className={classes.iconHeader} />}
+                avatar={<ResourceIcon className={classes.iconHeader} />}
                 title={
                     <Typography noWrap variant='h6' color='inherit'>
                         Resources
@@ -96,6 +102,7 @@ export const ProcessResourceCard = withStyles(styles)(connect()(
                 }
                 action={
                     <div>
+                        {usageReport && <Link href={usageReport} className={classes.reportButton} target="_blank"><ShowChartIcon /> Resource usage report</Link>}
                         {doUnMaximizePanel && panelMaximized &&
                             <Tooltip title={`Unmaximize ${panelName || 'panel'}`} disableFocusListener>
                                 <IconButton onClick={doUnMaximizePanel}><UnMaximizeIcon /></IconButton>
