1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import React from "react";
6 import { StyleRulesCallback, WithStyles, withStyles } from "@material-ui/core";
7 import { ProcessIcon } from "components/icon/icon";
8 import { Process } from "store/processes/process";
9 import { SubprocessPanel } from "views/subprocess-panel/subprocess-panel";
10 import { SubprocessFilterDataProps } from "components/subprocess-filter/subprocess-filter";
11 import { MPVContainer, MPVPanelContent, MPVPanelState } from "components/multi-panel-view/multi-panel-view";
12 import { ArvadosTheme } from "common/custom-theme";
13 import { ProcessDetailsCard } from "./process-details-card";
14 import { ProcessIOCard, ProcessIOCardType, ProcessIOParameter } from "./process-io-card";
15 import { ProcessResourceCard } from "./process-resource-card";
16 import { getProcessPanelLogs, ProcessLogsPanel } from "store/process-logs-panel/process-logs-panel";
17 import { ProcessLogsCard } from "./process-log-card";
18 import { FilterOption } from "views/process-panel/process-log-form";
19 import { getInputCollectionMounts } from "store/processes/processes-actions";
20 import { WorkflowInputsData } from "models/workflow";
21 import { CommandOutputParameter } from "cwlts/mappings/v1.0/CommandOutputParameter";
22 import { AuthState } from "store/auth/auth-reducer";
23 import { ProcessCmdCard } from "./process-cmd-card";
24 import { ContainerRequestResource } from "models/container-request";
25 import { OutputDetails, NodeInstanceType } from "store/process-panel/process-panel";
26 import { NotFoundView } from 'views/not-found-panel/not-found-panel';
28 type CssRules = "root";
30 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
36 export interface ProcessPanelRootDataProps {
38 subprocesses: Array<Process>;
39 filters: Array<SubprocessFilterDataProps>;
40 processLogsPanel: ProcessLogsPanel;
42 inputRaw: WorkflowInputsData | null;
43 inputParams: ProcessIOParameter[] | null;
44 outputData: OutputDetails | null;
45 outputDefinitions: CommandOutputParameter[];
46 outputParams: ProcessIOParameter[] | null;
47 nodeInfo: NodeInstanceType | null;
48 usageReport: string | null;
51 export interface ProcessPanelRootActionProps {
52 onContextMenu: (event: React.MouseEvent<HTMLElement>, process: Process) => void;
53 onToggle: (status: string) => void;
54 cancelProcess: (uuid: string) => void;
55 startProcess: (uuid: string) => void;
56 resumeOnHoldWorkflow: (uuid: string) => void;
57 onLogFilterChange: (filter: FilterOption) => void;
58 navigateToLog: (uuid: string) => void;
59 onCopyToClipboard: (uuid: string) => void;
60 loadInputs: (containerRequest: ContainerRequestResource) => void;
61 loadOutputs: (containerRequest: ContainerRequestResource) => void;
62 loadNodeJson: (containerRequest: ContainerRequestResource) => void;
63 loadOutputDefinitions: (containerRequest: ContainerRequestResource) => void;
64 updateOutputParams: () => void;
65 pollProcessLogs: (processUuid: string) => Promise<void>;
68 export type ProcessPanelRootProps = ProcessPanelRootDataProps & ProcessPanelRootActionProps & WithStyles<CssRules>;
70 const panelsData: MPVPanelState[] = [
72 { name: "Logs", visible: true },
73 { name: "Subprocesses" },
77 { name: "Resources" },
80 export const ProcessPanelRoot = withStyles(styles)(
95 loadOutputDefinitions,
98 }: ProcessPanelRootProps) => {
99 const outputUuid = process?.containerRequest.outputUuid;
100 const containerRequest = process?.containerRequest;
101 const inputMounts = getInputCollectionMounts(process?.containerRequest);
103 React.useEffect(() => {
104 if (containerRequest) {
105 // Load inputs from mounts or props
106 loadInputs(containerRequest);
107 // Fetch raw output (loads from props or keep)
108 loadOutputs(containerRequest);
109 // Loads output definitions from mounts into store
110 loadOutputDefinitions(containerRequest);
111 // load the assigned instance type from node.json in
112 // the log collection
113 loadNodeJson(containerRequest);
115 }, [containerRequest, loadInputs, loadOutputs, loadOutputDefinitions, loadNodeJson]);
117 const maxHeight = "100%";
119 // Trigger processing output params when raw or definitions change
120 React.useEffect(() => {
121 updateOutputParams();
122 }, [outputData, outputDefinitions, updateOutputParams]);
126 className={props.classes.root}
128 panelStates={panelsData}
129 justify-content="flex-start"
135 data-cy="process-details">
138 onContextMenu={event => props.onContextMenu(event, process)}
139 cancelProcess={props.cancelProcess}
140 startProcess={props.startProcess}
141 resumeOnHoldWorkflow={props.resumeOnHoldWorkflow}
147 minHeight={maxHeight}
148 maxHeight={maxHeight}
149 data-cy="process-logs">
151 onCopy={props.onCopyToClipboard}
153 lines={getProcessPanelLogs(processLogsPanel)}
155 label: processLogsPanel.selectedFilter,
156 value: processLogsPanel.selectedFilter,
158 filters={processLogsPanel.filters.map(filter => ({ label: filter, value: filter }))}
159 onLogFilterChange={props.onLogFilterChange}
160 navigateToLog={props.navigateToLog}
161 pollProcessLogs={props.pollProcessLogs}
167 maxHeight={maxHeight}
168 data-cy="process-children">
169 <SubprocessPanel process={process} />
174 maxHeight={maxHeight}
175 data-cy="process-outputs">
177 label={ProcessIOCardType.OUTPUT}
179 params={outputParams}
180 raw={outputData?.raw}
181 outputUuid={outputUuid || ""}
187 maxHeight={maxHeight}
188 data-cy="process-inputs">
190 label={ProcessIOCardType.INPUT}
201 data-cy="process-cmd">
203 onCopy={props.onCopyToClipboard}
210 data-cy="process-resources">
214 usageReport={usageReport}
221 messages={["Process not found"]}