19744: Made the resource usage report button obvious

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

diff --git a/services/workbench2/src/views/process-panel/process-panel-root.tsx b/services/workbench2/src/views/process-panel/process-panel-root.tsx
index ce81bd74c2dfd4018135d8b61272daade7d2b7c4..2a9b3882e86bec1592764ad46f837938c5eb3aa5 100644 (file)
--- a/services/workbench2/src/views/process-panel/process-panel-root.tsx
+++ b/services/workbench2/src/views/process-panel/process-panel-root.tsx
@@ -46,7 +46,7 @@ export interface ProcessPanelRootDataProps {
     outputDefinitions: CommandOutputParameter[];
     outputParams: ProcessIOParameter[] | null;
     nodeInfo: NodeInstanceType | null;
-    usageReport: CollectionFile | null;
+    usageReport: string | null;
 }
 
 export interface ProcessPanelRootActionProps {

diff --git a/services/workbench2/src/views/process-panel/process-panel.tsx b/services/workbench2/src/views/process-panel/process-panel.tsx
index 5c2dd237aafe8d4478da8eaac2ec990cdb6a7c27..f305290cc0e83b27cb53f0bc3f65caa1349a5fc9 100644 (file)
--- a/services/workbench2/src/views/process-panel/process-panel.tsx
+++ b/services/workbench2/src/views/process-panel/process-panel.tsx
@@ -21,12 +21,14 @@ import {
 import { cancelRunningWorkflow, resumeOnHoldWorkflow, startWorkflow } from "store/processes/processes-actions";
 import { navigateToLogCollection, pollProcessLogs, setProcessLogsPanelFilter } from "store/process-logs-panel/process-logs-panel-actions";
 import { snackbarActions, SnackbarKind } from "store/snackbar/snackbar-actions";
+import { getInlineFileUrl } from "views-components/context-menu/actions/helpers";
 
 const mapStateToProps = ({ router, auth, resources, processPanel, processLogsPanel }: RootState): ProcessPanelRootDataProps => {
     const uuid = getProcessPanelCurrentUuid(router) || "";
     const subprocesses = getSubprocesses(uuid)(resources);
+    const process = getProcess(uuid)(resources);
     return {
-        process: getProcess(uuid)(resources),
+        process,
         subprocesses: subprocesses.filter(subprocess => processPanel.filters[getProcessStatus(subprocess)]),
         filters: getFilters(processPanel, subprocesses),
         processLogsPanel: processLogsPanel,
@@ -37,7 +39,11 @@ const mapStateToProps = ({ router, auth, resources, processPanel, processLogsPan
         outputDefinitions: processPanel.outputDefinitions,
         outputParams: processPanel.outputParams,
         nodeInfo: processPanel.nodeInfo,
-        usageReport: processPanel.usageReport,
+        usageReport: (process || null) && processPanel.usageReport && getInlineFileUrl(
+            `${auth.config.keepWebServiceUrl}${processPanel.usageReport.url}?api_token=${auth.apiToken}`,
+            auth.config.keepWebServiceUrl,
+            auth.config.keepWebInlineServiceUrl
+        ),
     };
 };
 

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..1832fe4744a66e9cb4afee8b3b6142b6ac96f542 100644 (file)
--- a/services/workbench2/src/views/process-panel/process-resource-card.tsx
+++ b/services/workbench2/src/views/process-panel/process-resource-card.tsx
@@ -15,6 +15,7 @@ import {
     Typography,
     Grid,
     Link,
+    Button
 } from '@material-ui/core';
 import { ArvadosTheme } from 'common/custom-theme';
 import {
@@ -30,12 +31,11 @@ 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";
@@ -99,6 +99,7 @@ export const ProcessResourceCard = withStyles(styles)(connect()(
                 }
                 action={
                     <div>
+                        {usageReport && <Button href={usageReport} variant="contained" color="primary">Resource usage report</Button>}
                         {doUnMaximizePanel && panelMaximized &&
                             <Tooltip title={`Unmaximize ${panelName || 'panel'}`} disableFocusListener>
                                 <IconButton onClick={doUnMaximizePanel}><UnMaximizeIcon /></IconButton>
@@ -114,7 +115,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>