X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/3433f306caf560017377b32adf7a23842ba9ab31..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 7a24089901..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 = (theme: ArvadosTheme) => ({ - root: { - width: "100%", - }, -}); - export interface ProcessPanelRootDataProps { process?: Process; subprocesses: Array; @@ -41,10 +31,11 @@ export interface ProcessPanelRootDataProps { auth: AuthState; inputRaw: WorkflowInputsData | null; inputParams: ProcessIOParameter[] | null; - outputRaw: OutputDetails | null; + outputData: OutputDetails | null; outputDefinitions: CommandOutputParameter[]; outputParams: ProcessIOParameter[] | null; nodeInfo: NodeInstanceType | null; + usageReport: string | null; } export interface ProcessPanelRootActionProps { @@ -64,155 +55,158 @@ export interface ProcessPanelRootActionProps { pollProcessLogs: (processUuid: string) => Promise; } -export type ProcessPanelRootProps = ProcessPanelRootDataProps & ProcessPanelRootActionProps & WithStyles; +export type ProcessPanelRootProps = ProcessPanelRootDataProps & ProcessPanelRootActionProps; const panelsData: MPVPanelState[] = [ { name: "Details" }, - { name: "Command" }, { name: "Logs", visible: true }, - { name: "Inputs" }, + { name: "Subprocesses" }, { name: "Outputs" }, + { name: "Inputs" }, + { name: "Command" }, { name: "Resources" }, - { name: "Subprocesses" }, ]; -export const ProcessPanelRoot = withStyles(styles)( - ({ - process, - auth, - processLogsPanel, - inputRaw, - inputParams, - outputRaw, - 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%"; - // Trigger processing output params when raw or definitions change - React.useEffect(() => { - updateOutputParams(); - }, [outputRaw, outputDefinitions, updateOutputParams]); + // Trigger processing output params when raw or definitions change + React.useEffect(() => { + updateOutputParams(); + }, [outputData, outputDefinitions, updateOutputParams]); - return process ? ( - - - props.onContextMenu(event, process)} - cancelProcess={props.cancelProcess} - startProcess={props.startProcess} - resumeOnHoldWorkflow={props.resumeOnHoldWorkflow} - /> - - - - - - ({ label: filter, value: filter }))} - onLogFilterChange={props.onLogFilterChange} - navigateToLog={props.navigateToLog} - pollProcessLogs={props.pollProcessLogs} - /> - - - - - - - - - - - - - - - ) : ( - - ); - } -); + return process ? ( + + + props.onContextMenu(event, process)} + cancelProcess={props.cancelProcess} + startProcess={props.startProcess} + resumeOnHoldWorkflow={props.resumeOnHoldWorkflow} + /> + + + ({ label: filter, value: filter }))} + onLogFilterChange={props.onLogFilterChange} + navigateToLog={props.navigateToLog} + pollProcessLogs={props.pollProcessLogs} + /> + + + + + + + + + + + + + + + + + + ) : ( + + ); +};