21621: Add unit test for json copy to clipboard

[arvados.git] / 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 179335175e29d5defee35135bcdb5b2226414577..d738ed045be7018b1b10995b4c4250f0dbe5e431 100644 (file)
--- a/services/workbench2/src/views/process-panel/process-resource-card.tsx
+++ b/services/workbench2/src/views/process-panel/process-resource-card.tsx
@@ -22,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';
@@ -30,15 +31,14 @@ import { NodeInstanceType } from 'store/process-panel/process-panel';
 import { DetailsAttribute } from "components/details-attribute/details-attribute";
 import { formatFileSize } from "common/formatters";
 import { MountKind } from 'models/mount-types';
-import { CollectionFile } from 'models/collection-file';
 
 interface ProcessResourceCardDataProps {
     process: Process;
     nodeInfo: NodeInstanceType | null;
-    usageReport: CollectionFile | 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: {
@@ -67,6 +67,8 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         color: theme.customs.colors.greyD,
         fontSize: "0.8125rem",
         textTransform: "uppercase",
+    },
+    reportButton: {
     }
 });
 
@@ -99,6 +101,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>
@@ -114,7 +117,6 @@ export const ProcessResourceCard = withStyles(styles)(connect()(
                     </div>
                 } />
             <CardContent className={classes.content}>
-                {usageReport && <Link href={usageReport.url}>Resource usage report</Link>}
                 <Grid container>
                     <Grid item xs={4}>
                         <h3 className={classes.sectionH3}>Requested Resources</h3>