[arvados-workbench2] created: 2.4.0-423-ged4389e9
git repository hosting
git at public.arvados.org
Mon Dec 19 18:46:40 UTC 2022
at ed4389e99b60c9e2316312829ed5f105dd1cf3b7 (commit)
commit ed4389e99b60c9e2316312829ed5f105dd1cf3b7
Author: Peter Amstutz <peter.amstutz at curii.com>
Date: Mon Dec 19 13:45:56 2022 -0500
19438: Finished adding fields
Arvados-DCO-1.1-Signed-off-by: Peter Amstutz <peter.amstutz at curii.com>
diff --git a/src/common/formatters.ts b/src/common/formatters.ts
index 3cacc6c8..a38609a6 100644
--- a/src/common/formatters.ts
+++ b/src/common/formatters.ts
@@ -4,128 +4,128 @@
import { PropertyValue } from 'models/search-bar';
import {
- Vocabulary,
- getTagKeyLabel,
- getTagValueLabel,
+ Vocabulary,
+ getTagKeyLabel,
+ getTagValueLabel,
} from 'models/vocabulary';
export const formatDate = (isoDate?: string | null, utc: boolean = false) => {
- if (isoDate) {
- const date = new Date(isoDate);
- let text: string;
- if (utc) {
- text = date.toUTCString();
- } else {
- text = date.toLocaleString();
+ if (isoDate) {
+ const date = new Date(isoDate);
+ let text: string;
+ if (utc) {
+ text = date.toUTCString();
+ } else {
+ text = date.toLocaleString();
+ }
+ return text === 'Invalid Date' ? '(none)' : text;
}
- return text === 'Invalid Date' ? '(none)' : text;
- }
- return '-';
+ return '-';
};
export const formatFileSize = (size?: number | string) => {
- if (typeof size === 'number') {
- if (size === 0) {
- return '0 B';
- }
+ if (typeof size === 'number') {
+ if (size === 0) {
+ return '0 B';
+ }
- for (const { base, unit } of FILE_SIZES) {
- if (size >= base) {
- return `${(size / base).toFixed()} ${unit}`;
- }
+ for (const { base, unit } of FILE_SIZES) {
+ if (size >= base) {
+ return `${(size / base).toFixed(base === 1 ? 0 : 1)} ${unit}`;
+ }
+ }
}
- }
- if ((typeof size === 'string' && size === '') || size === undefined) {
- return '-';
- }
- return '0 B';
+ if ((typeof size === 'string' && size === '') || size === undefined) {
+ return '-';
+ }
+ return '0 B';
};
export const formatTime = (time: number, seconds?: boolean) => {
- const minutes = Math.floor((time / (1000 * 60)) % 60).toFixed(0);
- const hours = Math.floor(time / (1000 * 60 * 60)).toFixed(0);
+ const minutes = Math.floor((time / (1000 * 60)) % 60).toFixed(0);
+ const hours = Math.floor(time / (1000 * 60 * 60)).toFixed(0);
- if (seconds) {
- const seconds = Math.floor((time / 1000) % 60).toFixed(0);
- return hours + 'h ' + minutes + 'm ' + seconds + 's';
- }
+ if (seconds) {
+ const seconds = Math.floor((time / 1000) % 60).toFixed(0);
+ return hours + 'h ' + minutes + 'm ' + seconds + 's';
+ }
- return hours + 'h ' + minutes + 'm';
+ return hours + 'h ' + minutes + 'm';
};
export const getTimeDiff = (endTime: string, startTime: string) => {
- return new Date(endTime).getTime() - new Date(startTime).getTime();
+ return new Date(endTime).getTime() - new Date(startTime).getTime();
};
export const formatProgress = (loaded: number, total: number) => {
- const progress = loaded >= 0 && total > 0 ? (loaded * 100) / total : 0;
- return `${progress.toFixed(2)}%`;
+ const progress = loaded >= 0 && total > 0 ? (loaded * 100) / total : 0;
+ return `${progress.toFixed(2)}%`;
};
export function formatUploadSpeed(
- prevLoaded: number,
- loaded: number,
- prevTime: number,
- currentTime: number
+ prevLoaded: number,
+ loaded: number,
+ prevTime: number,
+ currentTime: number
) {
- const speed =
- loaded > prevLoaded && currentTime > prevTime
- ? (loaded - prevLoaded) / (currentTime - prevTime)
- : 0;
+ const speed =
+ loaded > prevLoaded && currentTime > prevTime
+ ? (loaded - prevLoaded) / (currentTime - prevTime)
+ : 0;
- return `${(speed / 1000).toFixed(2)} MB/s`;
+ return `${(speed / 1000).toFixed(2)} MB/s`;
}
const FILE_SIZES = [
- {
- base: 1099511627776,
- unit: 'TB',
- },
- {
- base: 1073741824,
- unit: 'GB',
- },
- {
- base: 1048576,
- unit: 'MB',
- },
- {
- base: 1024,
- unit: 'KB',
- },
- {
- base: 1,
- unit: 'B',
- },
+ {
+ base: 1099511627776,
+ unit: 'TiB',
+ },
+ {
+ base: 1073741824,
+ unit: 'GiB',
+ },
+ {
+ base: 1048576,
+ unit: 'MiB',
+ },
+ {
+ base: 1024,
+ unit: 'KiB',
+ },
+ {
+ base: 1,
+ unit: 'B',
+ },
];
export const formatPropertyValue = (
- pv: PropertyValue,
- vocabulary?: Vocabulary
+ pv: PropertyValue,
+ vocabulary?: Vocabulary
) => {
- if (vocabulary && pv.keyID && pv.valueID) {
- return `${getTagKeyLabel(pv.keyID, vocabulary)}: ${getTagValueLabel(
- pv.keyID,
- pv.valueID!,
- vocabulary
- )}`;
- }
- if (pv.key) {
- return pv.value ? `${pv.key}: ${pv.value}` : pv.key;
- }
- return '';
+ if (vocabulary && pv.keyID && pv.valueID) {
+ return `${getTagKeyLabel(pv.keyID, vocabulary)}: ${getTagValueLabel(
+ pv.keyID,
+ pv.valueID!,
+ vocabulary
+ )}`;
+ }
+ if (pv.key) {
+ return pv.value ? `${pv.key}: ${pv.value}` : pv.key;
+ }
+ return '';
};
export const formatContainerCost = (cost: number): string => {
- const decimalPlaces = 3;
+ const decimalPlaces = 3;
- const factor = Math.pow(10, decimalPlaces);
- const rounded = Math.round(cost * factor) / factor;
- if (cost > 0 && rounded === 0) {
- // Display min value of 0.001
- return `$${1 / factor}`;
- } else {
- // Otherwise use rounded value to proper decimal places
- return `$${rounded}`;
- }
+ const factor = Math.pow(10, decimalPlaces);
+ const rounded = Math.round(cost * factor) / factor;
+ if (cost > 0 && rounded === 0) {
+ // Display min value of 0.001
+ return `$${1 / factor}`;
+ } else {
+ // Otherwise use rounded value to proper decimal places
+ return `$${rounded}`;
+ }
};
diff --git a/src/models/runtime-constraints.ts b/src/models/runtime-constraints.ts
index 89101c6e..63982529 100644
--- a/src/models/runtime-constraints.ts
+++ b/src/models/runtime-constraints.ts
@@ -2,9 +2,17 @@
//
// SPDX-License-Identifier: AGPL-3.0
+export interface CUDAParameters {
+ device_count: number;
+ driver_version: string;
+ hardware_capability: string;
+}
+
export interface RuntimeConstraints {
ram: number;
vcpus: number;
keep_cache_ram?: number;
+ keep_cache_disk?: number;
API: boolean;
+ cuda?: CUDAParameters;
}
diff --git a/src/store/process-panel/process-panel-actions.ts b/src/store/process-panel/process-panel-actions.ts
index 71cb83a1..9b1e9847 100644
--- a/src/store/process-panel/process-panel-actions.ts
+++ b/src/store/process-panel/process-panel-actions.ts
@@ -114,7 +114,6 @@ export const loadNodeJson = (containerRequest: ContainerRequestResource) =>
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]);
@@ -124,7 +123,7 @@ export const loadNodeJson = (containerRequest: ContainerRequestResource) =>
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
+ nodeInfo: nodeData as NodeInstanceType
}));
} else {
dispatch<ProcessPanelAction>(processPanelActions.SET_NODE_INFO(noLog));
diff --git a/src/store/process-panel/process-panel.ts b/src/store/process-panel/process-panel.ts
index 34abd614..1ec60ff5 100644
--- a/src/store/process-panel/process-panel.ts
+++ b/src/store/process-panel/process-panel.ts
@@ -14,21 +14,21 @@ export type OutputDetails = {
}
export interface CUDAFeatures {
- driverVersion: string;
- hardwareCapability: string;
- deviceCount: number;
+ DriverVersion: string;
+ HardwareCapability: string;
+ DeviceCount: number;
}
export interface NodeInstanceType {
- name: string;
- providerType: string;
+ Name: string;
+ ProviderType: string;
VCPUs: number;
RAM: number;
- scratch: number;
- includedScratch: number;
- addedScratch: number;
- price: number;
- preemptible: boolean;
+ Scratch: number;
+ IncludedScratch: number;
+ AddedScratch: number;
+ Price: number;
+ Preemptible: boolean;
CUDA: CUDAFeatures;
};
diff --git a/src/views/process-panel/process-resource-card.tsx b/src/views/process-panel/process-resource-card.tsx
index 79e600e7..88b8155b 100644
--- a/src/views/process-panel/process-resource-card.tsx
+++ b/src/views/process-panel/process-resource-card.tsx
@@ -28,21 +28,36 @@ 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';
+import { DetailsAttribute } from "components/details-attribute/details-attribute";
+import { formatFileSize } from "common/formatters";
+import { InputCollectionMount } from 'store/processes/processes-actions';
+import { MountKind, TemporaryDirectoryMount } from 'models/mount-types';
interface ProcessResourceCardDataProps {
process: Process;
nodeInfo: NodeInstanceType | null;
}
-type CssRules = "card" | "header" | "title" | "avatar" | "iconHeader" | "content";
+type CssRules = "card" | "header" | "title" | "avatar" | "iconHeader" | "content" | "sectionH3";
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
- card: {},
- header: {},
+ card: {
+ height: '100%'
+ },
+ header: {
+ paddingBottom: "0px"
+ },
title: {},
avatar: {},
iconHeader: {},
- content: {}
+ content: {
+ paddingTop: "0px",
+ maxHeight: `calc(100% - ${theme.spacing.unit * 4.5}px)`,
+ overflow: "auto"
+ },
+ sectionH3: {
+ margin: "0.5em"
+ }
});
type ProcessResourceCardProps = ProcessResourceCardDataProps & WithStyles<CssRules> & MPVPanelProps;
@@ -50,7 +65,17 @@ type ProcessResourceCardProps = ProcessResourceCardDataProps & WithStyles<CssRul
export const ProcessResourceCard = withStyles(styles)(connect()(
({ classes, nodeInfo, doHidePanel, doMaximizePanel, doUnMaximizePanel, panelMaximized, panelName, process, }: ProcessResourceCardProps) => {
- const loading = nodeInfo === null;
+ const loading = false;
+
+ let diskRequest = 0;
+ if (process.container?.mounts) {
+ for (const mnt in process.container.mounts) {
+ const mp = process.container.mounts[mnt];
+ if (mp.kind === MountKind.TEMPORARY_DIRECTORY) {
+ diskRequest += mp.capacity;
+ }
+ }
+ }
return <Card className={classes.card} data-cy="process-resources-card">
<CardHeader
@@ -82,26 +107,104 @@ export const ProcessResourceCard = withStyles(styles)(connect()(
</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>}
- </>
+ <Grid container>
+ <Grid item xs={4}>
+ <h3 className={classes.sectionH3}>Requested resources</h3>
+ <Grid container>
+ <Grid item xs={12}>
+ <DetailsAttribute label="cores" value={process.container?.runtimeConstraints.vcpus} />
+ </Grid>
+ <Grid item xs={12}>
+ <DetailsAttribute label="RAM" value={formatFileSize(process.container?.runtimeConstraints.ram)} />
+ </Grid>
+ <Grid item xs={12}>
+ <DetailsAttribute label="Disk" value={formatFileSize(diskRequest)} />
+ </Grid>
+ <Grid item xs={12}>
+ <DetailsAttribute label="API access" value={process.container?.runtimeConstraints.API.toString()} />
+ </Grid>
+
+ {process.container?.runtimeConstraints.keep_cache_ram &&
+ process.container?.runtimeConstraints.keep_cache_ram > 0 ?
+ <Grid item xs={12}>
+ <DetailsAttribute label="Keep cache (RAM)" value={formatFileSize(process.container?.runtimeConstraints.keep_cache_ram)} />
+ </Grid> : null}
+
+ {process.container?.runtimeConstraints.keep_cache_disk &&
+ process.container?.runtimeConstraints.keep_cache_disk > 0 ?
+ <Grid item xs={12}>
+ <DetailsAttribute label="Keep cache (disk)" value={formatFileSize(process.container?.runtimeConstraints.keep_cache_disk)} />
+ </Grid> : null}
+
+ {process.container?.runtimeConstraints.cuda &&
+ process.container?.runtimeConstraints.cuda.device_count > 0 ?
+ <>
+ <Grid item xs={12}>
+ <DetailsAttribute label="CUDA devices" value={process.container?.runtimeConstraints.cuda.device_count} />
+ </Grid>
+ <Grid item xs={12}>
+ <DetailsAttribute label="CUDA driver version" value={process.container?.runtimeConstraints.cuda.driver_version} />
+ </Grid>
+ <Grid item xs={12}>
+ <DetailsAttribute label="CUDA hardware capability" value={process.container?.runtimeConstraints.cuda.hardware_capability} />
+ </Grid>
+ </> : null}
+ </Grid>
+ </Grid>
+
+
+ <Grid item xs={8}>
+ <h3 className={classes.sectionH3}>Assigned instance type</h3>
+ {nodeInfo === null ? <Grid item xs={8}>
+ No instance type recorded
+ </Grid>
+ :
+ <Grid container>
+ <Grid item xs={6}>
+ <DetailsAttribute label="cores" value={nodeInfo.VCPUs} />
+ </Grid>
+
+ <Grid item xs={6}>
+ <DetailsAttribute label="Provider type" value={nodeInfo.ProviderType} />
+ </Grid>
+
+ <Grid item xs={6}>
+ <DetailsAttribute label="RAM" value={formatFileSize(nodeInfo.RAM)} />
+ </Grid>
+
+ <Grid item xs={6}>
+ <DetailsAttribute label="Price" value={"$" + nodeInfo.Price.toString()} />
+ </Grid>
+
+ <Grid item xs={6}>
+ <DetailsAttribute label="Included scratch disk" value={formatFileSize(nodeInfo.IncludedScratch)} />
+ </Grid>
+
+ <Grid item xs={6}>
+ <DetailsAttribute label="Preemptible" value={nodeInfo.Preemptible.toString()} />
+ </Grid>
+
+ <Grid item xs={6}>
+ <DetailsAttribute label="Added scratch disk" value={formatFileSize(nodeInfo.AddedScratch)} />
+ </Grid>
+
+ {nodeInfo.CUDA.DeviceCount > 0 &&
+ <>
+ <Grid item xs={6}>
+ <DetailsAttribute label="CUDA devices" value={formatFileSize(nodeInfo.CUDA.DeviceCount)} />
+ </Grid>
+ <Grid item xs={6}>
+ <DetailsAttribute label="CUDA driver version" value={formatFileSize(nodeInfo.CUDA.DriverVersion)} />
+ </Grid>
+ <Grid item xs={6}>
+ <DetailsAttribute label="CUDA hardware capability" value={formatFileSize(nodeInfo.CUDA.HardwareCapability)} />
+ </Grid>
+ </>
+ }
+ </Grid>}
+ </Grid>
+ </Grid>
</CardContent>
- </Card>;
+ </Card >;
}
));
commit 1d0297e01e0196d63b4fb42573e5bd6d1e1a31b9
Author: Peter Amstutz <peter.amstutz at curii.com>
Date: Mon Dec 19 11:29:13 2022 -0500
19438: Hooked up panel, no content yet
Arvados-DCO-1.1-Signed-off-by: Peter Amstutz <peter.amstutz at curii.com>
diff --git a/src/store/process-panel/process-panel-actions.ts b/src/store/process-panel/process-panel-actions.ts
index 6a9ea337..71cb83a1 100644
--- a/src/store/process-panel/process-panel-actions.ts
+++ b/src/store/process-panel/process-panel-actions.ts
@@ -19,8 +19,10 @@ import { ContainerRequestResource } from "models/container-request";
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<{}>(),
@@ -32,6 +34,7 @@ export const processPanelActions = unionize({
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>;
@@ -67,7 +70,7 @@ export const loadInputs = (containerRequest: ContainerRequestResource) =>
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;
@@ -102,6 +105,35 @@ export const loadOutputs = (containerRequest: ContainerRequestResource) =>
}
};
+
+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) {
diff --git a/src/store/process-panel/process-panel-reducer.ts b/src/store/process-panel/process-panel-reducer.ts
index 45ca10ca..8e190ead 100644
--- a/src/store/process-panel/process-panel-reducer.ts
+++ b/src/store/process-panel/process-panel-reducer.ts
@@ -11,6 +11,7 @@ const initialState: ProcessPanel = {
inputRaw: null,
inputParams: null,
outputRaw: null,
+ nodeInfo: null,
outputDefinitions: [],
outputParams: null,
};
@@ -50,6 +51,9 @@ export const processPanelReducer = (state = initialState, action: ProcessPanelAc
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) {
diff --git a/src/store/process-panel/process-panel.ts b/src/store/process-panel/process-panel.ts
index 36c3e29f..34abd614 100644
--- a/src/store/process-panel/process-panel.ts
+++ b/src/store/process-panel/process-panel.ts
@@ -13,6 +13,29 @@ export type OutputDetails = {
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 };
@@ -21,6 +44,7 @@ export interface ProcessPanel {
outputRaw: OutputDetails | null;
outputDefinitions: CommandOutputParameter[];
outputParams: ProcessIOParameter[] | null;
+ nodeInfo: NodeInstanceType | null;
}
export const getProcessPanelCurrentUuid = (router: RouterState) => {
diff --git a/src/views/process-panel/process-panel-root.tsx b/src/views/process-panel/process-panel-root.tsx
index 388dc746..28d2e978 100644
--- a/src/views/process-panel/process-panel-root.tsx
+++ b/src/views/process-panel/process-panel-root.tsx
@@ -13,7 +13,7 @@ import { MPVContainer, MPVPanelContent, MPVPanelState } from 'components/multi-p
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';
@@ -23,7 +23,7 @@ import { CommandOutputParameter } from 'cwlts/mappings/v1.0/CommandOutputParamet
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';
@@ -44,6 +44,7 @@ export interface ProcessPanelRootDataProps {
outputRaw: OutputDetails | null;
outputDefinitions: CommandOutputParameter[];
outputParams: ProcessIOParameter[] | null;
+ nodeInfo: NodeInstanceType | null;
}
export interface ProcessPanelRootActionProps {
@@ -55,6 +56,7 @@ 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;
}
@@ -62,12 +64,13 @@ export interface ProcessPanelRootActionProps {
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)(
@@ -80,92 +83,103 @@ 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>;
}
);
diff --git a/src/views/process-panel/process-panel.tsx b/src/views/process-panel/process-panel.tsx
index 6e2d75c6..d853fd09 100644
--- a/src/views/process-panel/process-panel.tsx
+++ b/src/views/process-panel/process-panel.tsx
@@ -23,6 +23,7 @@ import {
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';
@@ -42,6 +43,7 @@ const mapStateToProps = ({ router, auth, resources, processPanel, processLogsPan
outputRaw: processPanel.outputRaw,
outputDefinitions: processPanel.outputDefinitions,
outputParams: processPanel.outputParams,
+ nodeInfo: processPanel.nodeInfo,
};
};
@@ -65,7 +67,8 @@ const mapDispatchToProps = (dispatch: Dispatch): ProcessPanelRootActionProps =>
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[]) => {
@@ -78,6 +81,6 @@ const getFilters = (processPanel: ProcessPanelState, processes: Process[]) => {
checked: processPanel.filters[filter],
key: filter,
}));
- };
+};
export const ProcessPanel = connect(mapStateToProps, mapDispatchToProps)(ProcessPanelRoot);
diff --git a/src/views/process-panel/process-resource-card.tsx b/src/views/process-panel/process-resource-card.tsx
new file mode 100644
index 00000000..79e600e7
--- /dev/null
+++ b/src/views/process-panel/process-resource-card.tsx
@@ -0,0 +1,107 @@
+// 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>;
+ }
+));
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list