X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/7a2e9199172a3c102e8a6c7b723fd44bc031bda4..edcdf0ae72c56bf4aa05f93ed2877faa3a5e75c4:/services/workbench2/src/views/process-panel/process-panel-root.tsx

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 774e572cc9..4620ff047b 100644
--- a/services/workbench2/src/views/process-panel/process-panel-root.tsx
+++ b/services/workbench2/src/views/process-panel/process-panel-root.tsx
@@ -3,13 +3,11 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import React from "react";
-import { StyleRulesCallback, WithStyles, withStyles } from "@material-ui/core";
 import { ProcessIcon } from "components/icon/icon";
 import { Process } from "store/processes/process";
 import { SubprocessPanel } from "views/subprocess-panel/subprocess-panel";
 import { SubprocessFilterDataProps } from "components/subprocess-filter/subprocess-filter";
 import { MPVContainer, MPVPanelContent, MPVPanelState } from "components/multi-panel-view/multi-panel-view";
-import { ArvadosTheme } from "common/custom-theme";
 import { ProcessDetailsCard } from "./process-details-card";
 import { ProcessIOCard, ProcessIOCardType, ProcessIOParameter } from "./process-io-card";
 import { ProcessResourceCard } from "./process-resource-card";
@@ -25,14 +23,6 @@ import { ContainerRequestResource } from "models/container-request";
 import { OutputDetails, NodeInstanceType } from "store/process-panel/process-panel";
 import { NotFoundView } from 'views/not-found-panel/not-found-panel';
 
-type CssRules = "root";
-
-const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
-    root: {
-        width: "100%",
-    },
-});
-
 export interface ProcessPanelRootDataProps {
     process?: Process;
     subprocesses: Array<Process>;
@@ -45,6 +35,7 @@ export interface ProcessPanelRootDataProps {
     outputDefinitions: CommandOutputParameter[];
     outputParams: ProcessIOParameter[] | null;
     nodeInfo: NodeInstanceType | null;
+    usageReport: string | null;
 }
 
 export interface ProcessPanelRootActionProps {
@@ -64,7 +55,7 @@ export interface ProcessPanelRootActionProps {
     pollProcessLogs: (processUuid: string) => Promise<void>;
 }
 
-export type ProcessPanelRootProps = ProcessPanelRootDataProps & ProcessPanelRootActionProps & WithStyles<CssRules>;
+export type ProcessPanelRootProps = ProcessPanelRootDataProps & ProcessPanelRootActionProps;
 
 const panelsData: MPVPanelState[] = [
     { name: "Details" },
@@ -76,146 +67,146 @@ const panelsData: MPVPanelState[] = [
     { name: "Resources" },
 ];
 
-export const ProcessPanelRoot = withStyles(styles)(
-    ({
-        process,
-        auth,
-        processLogsPanel,
-        inputRaw,
-        inputParams,
-        outputData,
-        outputDefinitions,
-        outputParams,
-        nodeInfo,
-        loadInputs,
-        loadOutputs,
-        loadNodeJson,
-        loadOutputDefinitions,
-        updateOutputParams,
-        ...props
-    }: ProcessPanelRootProps) => {
-        const outputUuid = process?.containerRequest.outputUuid;
-        const containerRequest = process?.containerRequest;
-        const inputMounts = getInputCollectionMounts(process?.containerRequest);
+export const ProcessPanelRoot = ({
+    process,
+    auth,
+    processLogsPanel,
+    inputRaw,
+    inputParams,
+    outputData,
+    outputDefinitions,
+    outputParams,
+    nodeInfo,
+    usageReport,
+    loadInputs,
+    loadOutputs,
+    loadNodeJson,
+    loadOutputDefinitions,
+    updateOutputParams,
+    ...props
+}: ProcessPanelRootProps) => {
+    const outputUuid = process?.containerRequest.outputUuid;
+    const containerRequest = process?.containerRequest;
+    const inputMounts = getInputCollectionMounts(process?.containerRequest);
 
-        React.useEffect(() => {
-            if (containerRequest) {
-                // Load inputs from mounts or props
-                loadInputs(containerRequest);
-                // Fetch raw output (loads from props or keep)
-                loadOutputs(containerRequest);
-                // Loads output definitions from mounts into store
-                loadOutputDefinitions(containerRequest);
-                // load the assigned instance type from node.json in
-                // the log collection
-                loadNodeJson(containerRequest);
-            }
-        }, [containerRequest, loadInputs, loadOutputs, loadOutputDefinitions, loadNodeJson]);
+    React.useEffect(() => {
+        if (containerRequest) {
+            // Load inputs from mounts or props
+            loadInputs(containerRequest);
+            // Fetch raw output (loads from props or keep)
+            loadOutputs(containerRequest);
+            // Loads output definitions from mounts into store
+            loadOutputDefinitions(containerRequest);
+            // load the assigned instance type from node.json in
+            // the log collection
+            loadNodeJson(containerRequest);
+        }
+    }, [containerRequest, loadInputs, loadOutputs, loadOutputDefinitions, loadNodeJson]);
 
-        const maxHeight = "100%";
+    const maxHeight = "100%";
 
-        // Trigger processing output params when raw or definitions change
-        React.useEffect(() => {
-            updateOutputParams();
-        }, [outputData, outputDefinitions, updateOutputParams]);
+    // Trigger processing output params when raw or definitions change
+    React.useEffect(() => {
+        updateOutputParams();
+    }, [outputData, outputDefinitions, updateOutputParams]);
 
-        return process ? (
-            <MPVContainer
-                className={props.classes.root}
-                spacing={8}
-                panelStates={panelsData}
-                justify-content="flex-start"
-                direction="column"
-                wrap="nowrap">
-                <MPVPanelContent
-                    forwardProps
-                    xs="auto"
-                    data-cy="process-details">
-                    <ProcessDetailsCard
-                        process={process}
-                        onContextMenu={event => props.onContextMenu(event, process)}
-                        cancelProcess={props.cancelProcess}
-                        startProcess={props.startProcess}
-                        resumeOnHoldWorkflow={props.resumeOnHoldWorkflow}
-                    />
-                </MPVPanelContent>
-                <MPVPanelContent
-                    forwardProps
-                    xs
-                    minHeight={maxHeight}
-                    maxHeight={maxHeight}
-                    data-cy="process-logs">
-                    <ProcessLogsCard
-                        onCopy={props.onCopyToClipboard}
-                        process={process}
-                        lines={getProcessPanelLogs(processLogsPanel)}
-                        selectedFilter={{
-                            label: processLogsPanel.selectedFilter,
-                            value: processLogsPanel.selectedFilter,
-                        }}
-                        filters={processLogsPanel.filters.map(filter => ({ label: filter, value: filter }))}
-                        onLogFilterChange={props.onLogFilterChange}
-                        navigateToLog={props.navigateToLog}
-                        pollProcessLogs={props.pollProcessLogs}
-                    />
-                </MPVPanelContent>
-                <MPVPanelContent
-                    forwardProps
-                    xs
-                    maxHeight={maxHeight}
-                    data-cy="process-children">
-                    <SubprocessPanel process={process} />
-                </MPVPanelContent>
-                <MPVPanelContent
-                    forwardProps
-                    xs
-                    maxHeight={maxHeight}
-                    data-cy="process-outputs">
-                    <ProcessIOCard
-                        label={ProcessIOCardType.OUTPUT}
-                        process={process}
-                        params={outputParams}
-                        raw={outputData?.raw}
-                        outputUuid={outputUuid || ""}
-                    />
-                </MPVPanelContent>
-                <MPVPanelContent
-                    forwardProps
-                    xs
-                    maxHeight={maxHeight}
-                    data-cy="process-inputs">
-                    <ProcessIOCard
-                        label={ProcessIOCardType.INPUT}
-                        process={process}
-                        params={inputParams}
-                        raw={inputRaw}
-                        mounts={inputMounts}
-                    />
-                </MPVPanelContent>
-                <MPVPanelContent
-                    forwardProps
-                    xs="auto"
-                    data-cy="process-cmd">
-                    <ProcessCmdCard
-                        onCopy={props.onCopyToClipboard}
-                        process={process}
-                    />
-                </MPVPanelContent>
-                <MPVPanelContent
-                    forwardProps
-                    xs
-                    data-cy="process-resources">
-                    <ProcessResourceCard
-                        process={process}
-                        nodeInfo={nodeInfo}
-                    />
-                </MPVPanelContent>
-            </MPVContainer>
-        ) : (
-            <NotFoundView
-                icon={ProcessIcon}
-                messages={["Process not found"]}
-            />
-        );
-    }
-);
+    return process ? (
+        <MPVContainer
+            spacing={8}
+            panelStates={panelsData}
+            justify-content="flex-start"
+            direction="column"
+            wrap="nowrap">
+            <MPVPanelContent
+                forwardProps
+                xs="auto"
+                data-cy="process-details">
+                <ProcessDetailsCard
+                    process={process}
+                    onContextMenu={event => props.onContextMenu(event, process)}
+                    cancelProcess={props.cancelProcess}
+                    startProcess={props.startProcess}
+                    resumeOnHoldWorkflow={props.resumeOnHoldWorkflow}
+                />
+            </MPVPanelContent>
+            <MPVPanelContent
+                forwardProps
+                xs
+                minHeight={maxHeight}
+                maxHeight={maxHeight}
+                data-cy="process-logs">
+                <ProcessLogsCard
+                    onCopy={props.onCopyToClipboard}
+                    process={process}
+                    lines={getProcessPanelLogs(processLogsPanel)}
+                    selectedFilter={{
+                        label: processLogsPanel.selectedFilter,
+                        value: processLogsPanel.selectedFilter,
+                    }}
+                    filters={processLogsPanel.filters.map(filter => ({ label: filter, value: filter }))}
+                    onLogFilterChange={props.onLogFilterChange}
+                    navigateToLog={props.navigateToLog}
+                    pollProcessLogs={props.pollProcessLogs}
+                />
+            </MPVPanelContent>
+            <MPVPanelContent
+                forwardProps
+                xs
+                maxHeight={maxHeight}
+                data-cy="process-children">
+                <SubprocessPanel process={process} />
+            </MPVPanelContent>
+            <MPVPanelContent
+                forwardProps
+                xs
+                maxHeight={maxHeight}
+                data-cy="process-outputs">
+                <ProcessIOCard
+                    label={ProcessIOCardType.OUTPUT}
+                    process={process}
+                    params={outputParams}
+                    raw={outputData?.raw}
+                    outputUuid={outputUuid || ""}
+                />
+            </MPVPanelContent>
+            <MPVPanelContent
+                forwardProps
+                xs
+                maxHeight={maxHeight}
+                data-cy="process-inputs">
+                <ProcessIOCard
+                    label={ProcessIOCardType.INPUT}
+                    process={process}
+                    params={inputParams}
+                    raw={inputRaw}
+                    mounts={inputMounts}
+                />
+            </MPVPanelContent>
+            <MPVPanelContent
+                forwardProps
+                xs="auto"
+                maxHeight={"50%"}
+                data-cy="process-cmd">
+                <ProcessCmdCard
+                    onCopy={props.onCopyToClipboard}
+                    process={process}
+                />
+            </MPVPanelContent>
+            <MPVPanelContent
+                forwardProps
+                xs
+                data-cy="process-resources">
+                <ProcessResourceCard
+                    process={process}
+                    nodeInfo={nodeInfo}
+                    usageReport={usageReport}
+                />
+            </MPVPanelContent>
+        </MPVContainer>
+    ) : (
+        <NotFoundView
+            icon={ProcessIcon}
+            messages={["Process not found"]}
+        />
+    );
+};
