import { CommandOutputParameter } from 'cwlts/mappings/v1.0/CommandOutputParameter';
import { CommandInputParameter, getIOParamId, WorkflowInputsData } from 'models/workflow';
import { getIOParamDisplayValue, ProcessIOParameter } from "views/process-panel/process-io-card";
-import { OutputDetails } from "./process-panel";
+import { OutputDetails, NodeInstanceType, NodeInfo } from "./process-panel";
import { AuthState } from "store/auth/auth-reducer";
+import { CommonService } from "services/common-service/common-service";
+import { camelCase } from "lodash";
export const processPanelActions = unionize({
RESET_PROCESS_PANEL: ofType<{}>(),
SET_OUTPUT_RAW: ofType<OutputDetails | null>(),
SET_OUTPUT_DEFINITIONS: ofType<CommandOutputParameter[]>(),
SET_OUTPUT_PARAMS: ofType<ProcessIOParameter[] | null>(),
+ SET_NODE_INFO: ofType<NodeInfo>(),
});
export type ProcessPanelAction = UnionOf<typeof processPanelActions>;
export const loadOutputs = (containerRequest: ContainerRequestResource) =>
async (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
- const noOutputs = {rawOutputs: {}};
+ const noOutputs = { rawOutputs: {} };
if (!containerRequest.outputUuid) {
dispatch<ProcessPanelAction>(processPanelActions.SET_OUTPUT_RAW(noOutputs));
return;
}
};
+
+export const loadNodeJson = (containerRequest: ContainerRequestResource) =>
+ async (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
+ const noLog = { nodeInfo: null };
+ if (!containerRequest.logUuid) {
+ dispatch<ProcessPanelAction>(processPanelActions.SET_NODE_INFO(noLog));
+ return;
+ };
+ try {
+ const propsOutputs = getRawOutputs(containerRequest);
+ const filesPromise = services.collectionService.files(containerRequest.logUuid);
+ const collectionPromise = services.collectionService.get(containerRequest.logUuid);
+ const [files, collection] = await Promise.all([filesPromise, collectionPromise]);
+
+ // Fetch node.json from keep
+ const nodeFile = files.find((file) => file.name === 'node.json') as CollectionFile | undefined;
+ let nodeData = nodeFile ? await services.collectionService.getFileContents(nodeFile) : undefined;
+ if (nodeData && (nodeData = JSON.parse(nodeData))) {
+ dispatch<ProcessPanelAction>(processPanelActions.SET_NODE_INFO({
+ nodeInfo: CommonService.mapKeys(camelCase)(nodeData) as NodeInstanceType
+ }));
+ } else {
+ dispatch<ProcessPanelAction>(processPanelActions.SET_NODE_INFO(noLog));
+ }
+ } catch {
+ dispatch<ProcessPanelAction>(processPanelActions.SET_NODE_INFO(noLog));
+ }
+ };
+
export const loadOutputDefinitions = (containerRequest: ContainerRequestResource) =>
async (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
if (containerRequest && containerRequest.mounts) {
inputRaw: null,
inputParams: null,
outputRaw: null,
+ nodeInfo: null,
outputDefinitions: [],
outputParams: null,
};
SET_OUTPUT_RAW: outputRaw => {
return { ...state, outputRaw };
},
+ SET_NODE_INFO: ({ nodeInfo }) => {
+ return { ...state, nodeInfo };
+ },
SET_OUTPUT_DEFINITIONS: outputDefinitions => {
// Set output definitions is only additive to avoid clearing when mounts go temporarily missing
if (outputDefinitions.length) {
pdh?: string;
}
+export interface CUDAFeatures {
+ driverVersion: string;
+ hardwareCapability: string;
+ deviceCount: number;
+}
+
+export interface NodeInstanceType {
+ name: string;
+ providerType: string;
+ VCPUs: number;
+ RAM: number;
+ scratch: number;
+ includedScratch: number;
+ addedScratch: number;
+ price: number;
+ preemptible: boolean;
+ CUDA: CUDAFeatures;
+};
+
+export interface NodeInfo {
+ nodeInfo: NodeInstanceType | null;
+};
+
export interface ProcessPanel {
containerRequestUuid: string;
filters: { [status: string]: boolean };
outputRaw: OutputDetails | null;
outputDefinitions: CommandOutputParameter[];
outputParams: ProcessIOParameter[] | null;
+ nodeInfo: NodeInstanceType | null;
}
export const getProcessPanelCurrentUuid = (router: RouterState) => {
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';
import { getProcessPanelLogs, ProcessLogsPanel } from 'store/process-logs-panel/process-logs-panel';
import { ProcessLogsCard } from './process-log-card';
import { FilterOption } from 'views/process-panel/process-log-form';
import { AuthState } from 'store/auth/auth-reducer';
import { ProcessCmdCard } from './process-cmd-card';
import { ContainerRequestResource } from 'models/container-request';
-import { OutputDetails } from 'store/process-panel/process-panel';
+import { OutputDetails, NodeInstanceType } from 'store/process-panel/process-panel';
type CssRules = 'root';
outputRaw: OutputDetails | null;
outputDefinitions: CommandOutputParameter[];
outputParams: ProcessIOParameter[] | null;
+ nodeInfo: NodeInstanceType | null;
}
export interface ProcessPanelRootActionProps {
onCopyToClipboard: (uuid: string) => void;
loadInputs: (containerRequest: ContainerRequestResource) => void;
loadOutputs: (containerRequest: ContainerRequestResource) => void;
+ loadNodeJson: (containerRequest: ContainerRequestResource) => void;
loadOutputDefinitions: (containerRequest: ContainerRequestResource) => void;
updateOutputParams: () => void;
}
export type ProcessPanelRootProps = ProcessPanelRootDataProps & ProcessPanelRootActionProps & WithStyles<CssRules>;
const panelsData: MPVPanelState[] = [
- {name: "Details"},
- {name: "Command"},
- {name: "Logs", visible: true},
- {name: "Inputs"},
- {name: "Outputs"},
- {name: "Subprocesses"},
+ { name: "Details" },
+ { name: "Command" },
+ { name: "Logs", visible: true },
+ { name: "Inputs" },
+ { name: "Outputs" },
+ { name: "Resources" },
+ { name: "Subprocesses" },
];
export const ProcessPanelRoot = withStyles(styles)(
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);
+ 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);
- }
- }, [containerRequest, loadInputs, loadOutputs, loadOutputDefinitions]);
+ 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]);
- // 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();
+ }, [outputRaw, 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}
- />
- </MPVPanelContent>
- <MPVPanelContent forwardProps xs="auto" data-cy="process-cmd">
- <ProcessCmdCard
- onCopy={props.onCopyToClipboard}
- process={process} />
- </MPVPanelContent>
- <MPVPanelContent forwardProps xs minHeight='50%' 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}
- />
- </MPVPanelContent>
- <MPVPanelContent forwardProps xs maxHeight='50%' data-cy="process-inputs">
- <ProcessIOCard
- label={ProcessIOCardType.INPUT}
- process={process}
- params={inputParams}
- raw={inputRaw}
- mounts={inputMounts}
- />
- </MPVPanelContent>
- <MPVPanelContent forwardProps xs maxHeight='50%' data-cy="process-outputs">
- <ProcessIOCard
- label={ProcessIOCardType.OUTPUT}
- process={process}
- params={outputParams}
- raw={outputRaw?.rawOutputs}
- outputUuid={outputUuid || ""}
- />
- </MPVPanelContent>
- <MPVPanelContent forwardProps xs maxHeight='50%' data-cy="process-children">
- <SubprocessPanel />
- </MPVPanelContent>
- </MPVContainer>
- : <Grid container
- alignItems='center'
- justify='center'
- style={{ minHeight: '100%' }}>
- <DefaultView
- icon={ProcessIcon}
- messages={['Process not found']} />
- </Grid>;
+ 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}
+ />
+ </MPVPanelContent>
+ <MPVPanelContent forwardProps xs="auto" data-cy="process-cmd">
+ <ProcessCmdCard
+ onCopy={props.onCopyToClipboard}
+ process={process} />
+ </MPVPanelContent>
+ <MPVPanelContent forwardProps xs minHeight='50%' 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}
+ />
+ </MPVPanelContent>
+ <MPVPanelContent forwardProps xs maxHeight='50%' data-cy="process-inputs">
+ <ProcessIOCard
+ label={ProcessIOCardType.INPUT}
+ process={process}
+ params={inputParams}
+ raw={inputRaw}
+ mounts={inputMounts}
+ />
+ </MPVPanelContent>
+ <MPVPanelContent forwardProps xs maxHeight='50%' data-cy="process-outputs">
+ <ProcessIOCard
+ label={ProcessIOCardType.OUTPUT}
+ process={process}
+ params={outputParams}
+ raw={outputRaw?.rawOutputs}
+ outputUuid={outputUuid || ""}
+ />
+ </MPVPanelContent>
+ <MPVPanelContent forwardProps xs maxHeight='50%' data-cy="process-resources">
+ <ProcessResourceCard
+ process={process}
+ nodeInfo={nodeInfo}
+ />
+ </MPVPanelContent>
+ <MPVPanelContent forwardProps xs maxHeight='50%' data-cy="process-children">
+ <SubprocessPanel />
+ </MPVPanelContent>
+ </MPVContainer>
+ : <Grid container
+ alignItems='center'
+ justify='center'
+ style={{ minHeight: '100%' }}>
+ <DefaultView
+ icon={ProcessIcon}
+ messages={['Process not found']} />
+ </Grid>;
}
);
loadOutputs,
toggleProcessPanelFilter,
updateOutputParams,
+ loadNodeJson
} from 'store/process-panel/process-panel-actions';
import { cancelRunningWorkflow } from 'store/processes/processes-actions';
import { navigateToLogCollection, setProcessLogsPanelFilter } from 'store/process-logs-panel/process-logs-panel-actions';
outputRaw: processPanel.outputRaw,
outputDefinitions: processPanel.outputDefinitions,
outputParams: processPanel.outputParams,
+ nodeInfo: processPanel.nodeInfo,
};
};
loadInputs: (containerRequest) => dispatch<any>(loadInputs(containerRequest)),
loadOutputs: (containerRequest) => dispatch<any>(loadOutputs(containerRequest)),
loadOutputDefinitions: (containerRequest) => dispatch<any>(loadOutputDefinitions(containerRequest)),
- updateOutputParams: () => dispatch<any>(updateOutputParams())
+ updateOutputParams: () => dispatch<any>(updateOutputParams()),
+ loadNodeJson: (containerRequest) => dispatch<any>(loadNodeJson(containerRequest)),
});
const getFilters = (processPanel: ProcessPanelState, processes: Process[]) => {
checked: processPanel.filters[filter],
key: filter,
}));
- };
+};
export const ProcessPanel = connect(mapStateToProps, mapDispatchToProps)(ProcessPanelRoot);
--- /dev/null
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import React from 'react';
+import {
+ StyleRulesCallback,
+ WithStyles,
+ withStyles,
+ Card,
+ CardHeader,
+ IconButton,
+ CardContent,
+ Tooltip,
+ Typography,
+ Grid,
+ CircularProgress,
+} from '@material-ui/core';
+import { ArvadosTheme } from 'common/custom-theme';
+import {
+ CloseIcon,
+ MaximizeIcon,
+ UnMaximizeIcon,
+ ProcessIcon
+} from 'components/icon/icon';
+import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
+import { connect } from 'react-redux';
+import { Process } from 'store/processes/process';
+import { NodeInstanceType } from 'store/process-panel/process-panel';
+import { DefaultView } from 'components/default-view/default-view';
+
+interface ProcessResourceCardDataProps {
+ process: Process;
+ nodeInfo: NodeInstanceType | null;
+}
+
+type CssRules = "card" | "header" | "title" | "avatar" | "iconHeader" | "content";
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+ card: {},
+ header: {},
+ title: {},
+ avatar: {},
+ iconHeader: {},
+ content: {}
+});
+
+type ProcessResourceCardProps = ProcessResourceCardDataProps & WithStyles<CssRules> & MPVPanelProps;
+
+export const ProcessResourceCard = withStyles(styles)(connect()(
+ ({ classes, nodeInfo, doHidePanel, doMaximizePanel, doUnMaximizePanel, panelMaximized, panelName, process, }: ProcessResourceCardProps) => {
+
+ const loading = nodeInfo === null;
+
+ return <Card className={classes.card} data-cy="process-resources-card">
+ <CardHeader
+ className={classes.header}
+ classes={{
+ content: classes.title,
+ avatar: classes.avatar,
+ }}
+ avatar={<ProcessIcon className={classes.iconHeader} />}
+ title={
+ <Typography noWrap variant='h6' color='inherit'>
+ Resources
+ </Typography>
+ }
+ action={
+ <div>
+ {doUnMaximizePanel && panelMaximized &&
+ <Tooltip title={`Unmaximize ${panelName || 'panel'}`} disableFocusListener>
+ <IconButton onClick={doUnMaximizePanel}><UnMaximizeIcon /></IconButton>
+ </Tooltip>}
+ {doMaximizePanel && !panelMaximized &&
+ <Tooltip title={`Maximize ${panelName || 'panel'}`} disableFocusListener>
+ <IconButton onClick={doMaximizePanel}><MaximizeIcon /></IconButton>
+ </Tooltip>}
+ {doHidePanel &&
+ <Tooltip title={`Close ${panelName || 'panel'}`} disableFocusListener>
+ <IconButton disabled={panelMaximized} onClick={doHidePanel}><CloseIcon /></IconButton>
+ </Tooltip>}
+ </div>
+ } />
+ <CardContent className={classes.content}>
+ <>
+ {/* raw is undefined until params are loaded */}
+ {loading && <Grid container item alignItems='center' justify='center'>
+ <CircularProgress />
+ </Grid>}
+ {/* Once loaded, either raw or params may still be empty
+ * Raw when all params are empty
+ * Params when raw is provided by containerRequest properties but workflow mount is absent for preview
+ */}
+ {!loading &&
+ <>
+ <div>
+ stuff
+ </div>
+ </>}
+ {!loading && <Grid container item alignItems='center' justify='center'>
+ <DefaultView messages={["No parameters found"]} />
+ </Grid>}
+ </>
+ </CardContent>
+ </Card>;
+ }
+));
projects / arvados-workbench2.git / commitdiff