//
// SPDX-License-Identifier: AGPL-3.0
-import React, { ReactElement, memo, useState } from "react";
+import React, { ReactElement, memo } from "react";
import { Dispatch } from "redux";
import {
StyleRulesCallback,
CardContent,
Tooltip,
Typography,
- Tabs,
- Tab,
Table,
TableHead,
TableBody,
CircularProgress,
} from "@material-ui/core";
import { ArvadosTheme } from "common/custom-theme";
-import { CloseIcon, ImageIcon, InputIcon, ImageOffIcon, OutputIcon, MaximizeIcon, UnMaximizeIcon, InfoIcon } from "components/icon/icon";
+import { CloseIcon, InputIcon, OutputIcon, MaximizeIcon, UnMaximizeIcon, InfoIcon } from "components/icon/icon";
import { MPVPanelProps } from "components/multi-panel-view/multi-panel-view";
import {
BooleanCommandInputParameter,
import { FixedSizeList } from 'react-window';
import AutoSizer from "react-virtualized-auto-sizer";
import { LinkProps } from "@material-ui/core/Link";
+import { ConditionalTabs } from "components/conditional-tabs/conditional-tabs";
type CssRules =
| "card"
color: theme.customs.colors.greyD,
fontSize: "1.875rem",
},
- // Applies to table tab's content
+ // Applies to table tab and collection table content
tableWrapper: {
height: "auto",
maxHeight: `calc(100% - ${theme.spacing.unit * 6}px)`,
// Use flexbox to keep scrolling at the virtual list level
display: "flex",
flexDirection: "column",
- alignItems: "start", // Prevents scroll bars at different levels in json tab
+ alignItems: "stretch", // Stretches output collection to full width
+
},
// Param table virtual list styles
forceShowParams?: boolean;
}
-export interface ProcessIOCardActionProps {
- navigateTo: (uuid: string) => void;
-}
-
-const mapDispatchToProps = (dispatch: Dispatch): ProcessIOCardActionProps => ({
- navigateTo: uuid => dispatch<any>(navigateTo(uuid)),
-});
-
-type ProcessIOCardProps = ProcessIOCardDataProps & ProcessIOCardActionProps & WithStyles<CssRules> & MPVPanelProps;
+type ProcessIOCardProps = ProcessIOCardDataProps & WithStyles<CssRules> & MPVPanelProps;
export const ProcessIOCard = withStyles(styles)(
- connect(
- null,
- mapDispatchToProps
- )(
- ({
- classes,
- label,
- params,
- raw,
- mounts,
- outputUuid,
- doHidePanel,
- doMaximizePanel,
- doUnMaximizePanel,
- panelMaximized,
- panelName,
- process,
- navigateTo,
- forceShowParams,
- }: ProcessIOCardProps) => {
- const [mainProcTabState, setMainProcTabState] = useState(0);
- const [subProcTabState, setSubProcTabState] = useState(0);
- const handleMainProcTabChange = (event: React.MouseEvent<HTMLElement>, value: number) => {
- setMainProcTabState(value);
- };
- const handleSubProcTabChange = (event: React.MouseEvent<HTMLElement>, value: number) => {
- setSubProcTabState(value);
- };
-
- const PanelIcon = label === ProcessIOCardType.INPUT ? InputIcon : OutputIcon;
- const mainProcess = !(process && process!.containerRequest.requestingContainerUuid);
- const showParamTable = mainProcess || forceShowParams;
-
- const loading = raw === null || raw === undefined || params === null;
+ ({
+ classes,
+ label,
+ params,
+ raw,
+ mounts,
+ outputUuid,
+ doHidePanel,
+ doMaximizePanel,
+ doUnMaximizePanel,
+ panelMaximized,
+ panelName,
+ process,
+ forceShowParams,
+ }: ProcessIOCardProps) => {
+ const PanelIcon = label === ProcessIOCardType.INPUT ? InputIcon : OutputIcon;
+ const mainProcess = !(process && process!.containerRequest.requestingContainerUuid);
+ const showParamTable = mainProcess || forceShowParams;
+
+ const loading = raw === null || raw === undefined || params === null;
+
+ const hasRaw = !!(raw && Object.keys(raw).length > 0);
+ const hasParams = !!(params && params.length > 0);
+ // isRawLoaded allows subprocess panel to display raw even if it's {}
+ const isRawLoaded = !!(raw && Object.keys(raw).length >= 0);
+
+ // Subprocess
+ const hasInputMounts = !!(label === ProcessIOCardType.INPUT && mounts && mounts.length);
+ const hasOutputCollecton = !!(label === ProcessIOCardType.OUTPUT && outputUuid);
+ // Subprocess should not show loading if hasOutputCollection or hasInputMounts
+ const subProcessLoading = loading && !hasOutputCollecton && !hasInputMounts;
- const hasRaw = !!(raw && Object.keys(raw).length > 0);
- const hasParams = !!(params && params.length > 0);
- // isRawLoaded allows subprocess panel to display raw even if it's {}
- const isRawLoaded = !!(raw && Object.keys(raw).length >= 0);
-
- // Subprocess
- const hasInputMounts = !!(label === ProcessIOCardType.INPUT && mounts && mounts.length);
- const hasOutputCollecton = !!(label === ProcessIOCardType.OUTPUT && outputUuid);
- // Subprocess should not show loading if hasOutputCollection or hasInputMounts
- const subProcessLoading = loading && !hasOutputCollecton && !hasInputMounts;
-
- return (
- <Card
- className={classes.card}
- data-cy="process-io-card"
- >
- <CardHeader
- className={classes.header}
- classes={{
- content: classes.title,
- avatar: classes.avatar,
- }}
- avatar={<PanelIcon className={classes.iconHeader} />}
- title={
- <Typography
- noWrap
- variant="h6"
- color="inherit"
- >
- {label}
- </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}>
- {showParamTable ? (
- <>
- {/* raw is undefined until params are loaded */}
- {loading && (
- <Grid
- container
- item
- alignItems="center"
- justify="center"
+ return (
+ <Card
+ className={classes.card}
+ data-cy="process-io-card"
+ >
+ <CardHeader
+ className={classes.header}
+ classes={{
+ content: classes.title,
+ avatar: classes.avatar,
+ }}
+ avatar={<PanelIcon className={classes.iconHeader} />}
+ title={
+ <Typography
+ noWrap
+ variant="h6"
+ color="inherit"
+ >
+ {label}
+ </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}
>
- <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 && (hasRaw || hasParams) && (
- <>
- <Tabs
- value={mainProcTabState}
- onChange={handleMainProcTabChange}
- variant="fullWidth"
- className={classes.symmetricTabs}
- >
- {/* params will be empty on processes without workflow definitions in mounts, so we only show raw */}
- {hasParams && <Tab label="Parameters" />}
- {!forceShowParams && <Tab label="JSON" />}
- {hasOutputCollecton && <Tab label="Collection" />}
- </Tabs>
- {mainProcTabState === 0 && params && hasParams && (
- <div className={classes.tableWrapper}>
- <ProcessIOPreview
- data={params}
+ <CloseIcon />
+ </IconButton>
+ </Tooltip>
+ )}
+ </div>
+ }
+ />
+ <CardContent className={classes.content}>
+ {showParamTable ? (
+ <>
+ {/* 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 && (hasRaw || hasParams) && (
+ <ConditionalTabs
+ variant="fullWidth"
+ className={classes.symmetricTabs}
+ tabs={[
+ {
+ // params will be empty on processes without workflow definitions in mounts, so we only show raw
+ show: hasParams,
+ label: "Parameters",
+ content: <ProcessIOPreview
+ data={params || []}
valueLabel={forceShowParams ? "Default value" : "Value"}
- />
- </div>
- )}
- {(mainProcTabState === 1 || !hasParams) && (
- <div className={classes.jsonWrapper}>
- <ProcessIORaw data={raw} />
- </div>
- )}
- {mainProcTabState === 2 && hasOutputCollecton && (
- <>
- {outputUuid && (
- <Typography className={classes.collectionLink}>
- Output Collection:{" "}
- <MuiLink
- className={classes.keepLink}
- onClick={() => {
- navigateTo(outputUuid || "");
- }}
- >
- {outputUuid}
- </MuiLink>
- </Typography>
- )}
- <ProcessOutputCollectionFiles
- isWritable={false}
- currentItemUuid={outputUuid}
- />
- </>
- )}
-
- </>
- )}
- {!loading && !hasRaw && !hasParams && (
- <Grid
- container
- item
- alignItems="center"
- justify="center"
- >
- <DefaultView messages={["No parameters found"]} />
- </Grid>
- )}
- </>
- ) : (
- // Subprocess
- <>
- {subProcessLoading ? (
- <Grid
- container
- item
- alignItems="center"
- justify="center"
- >
- <CircularProgress />
- </Grid>
- ) : !subProcessLoading && (hasInputMounts || hasOutputCollecton || isRawLoaded) ? (
- <>
- <Tabs
- value={subProcTabState}
- onChange={handleSubProcTabChange}
- variant="fullWidth"
- className={classes.symmetricTabs}
- >
- {hasInputMounts && <Tab label="Collections" />}
- {hasOutputCollecton && <Tab label="Collection" />}
- {isRawLoaded && <Tab label="JSON" />}
- </Tabs>
- <div className={classes.tableWrapper}>
- {subProcTabState === 0 && hasInputMounts && <ProcessInputMounts mounts={mounts || []} />}
- {subProcTabState === 0 && hasOutputCollecton && (
- <>
- {outputUuid && (
- <Typography className={classes.collectionLink}>
- Output Collection:{" "}
- <MuiLink
- className={classes.keepLink}
- onClick={() => {
- navigateTo(outputUuid || "");
- }}
- >
- {outputUuid}
- </MuiLink>
- </Typography>
- )}
- <ProcessOutputCollectionFiles
- isWritable={false}
- currentItemUuid={outputUuid}
- />
- </>
- )}
- {isRawLoaded && (subProcTabState === 1 || (!hasInputMounts && !hasOutputCollecton)) && (
- <div className={classes.jsonWrapper}>
- <ProcessIORaw data={raw} />
- </div>
- )}
- </div>
- </>
- ) : (
- <Grid
- container
- item
- alignItems="center"
- justify="center"
- >
- <DefaultView messages={["No data to display"]} />
- </Grid>
- )}
- </>
- )}
- </CardContent>
- </Card>
- );
- }
- )
+ />,
+ },
+ {
+ show: !forceShowParams,
+ label: "JSON",
+ content: <ProcessIORaw data={raw} />,
+ },
+ {
+ show: hasOutputCollecton,
+ label: "Collection",
+ content: <ProcessOutputCollection outputUuid={outputUuid} />,
+ },
+ ]}
+ />
+ )}
+ {!loading && !hasRaw && !hasParams && (
+ <Grid
+ container
+ item
+ alignItems="center"
+ justify="center"
+ >
+ <DefaultView messages={["No parameters found"]} />
+ </Grid>
+ )}
+ </>
+ ) : (
+ // Subprocess
+ <>
+ {subProcessLoading ? (
+ <Grid
+ container
+ item
+ alignItems="center"
+ justify="center"
+ >
+ <CircularProgress />
+ </Grid>
+ ) : !subProcessLoading && (hasInputMounts || hasOutputCollecton || isRawLoaded) ? (
+ <ConditionalTabs
+ variant="fullWidth"
+ className={classes.symmetricTabs}
+ tabs={[
+ {
+ show: hasInputMounts,
+ label: "Collections",
+ content: <ProcessInputMounts mounts={mounts || []} />,
+ },
+ {
+ show: hasOutputCollecton,
+ label: "Collection",
+ content: <ProcessOutputCollection outputUuid={outputUuid} />,
+ },
+ {
+ show: isRawLoaded,
+ label: "JSON",
+ content: <ProcessIORaw data={raw} />,
+ },
+ ]}
+ />
+ ) : (
+ <Grid
+ container
+ item
+ alignItems="center"
+ justify="center"
+ >
+ <DefaultView messages={["No data to display"]} />
+ </Grid>
+ )}
+ </>
+ )}
+ </CardContent>
+ </Card>
+ );
+ }
);
export type ProcessIOValue = {
interface ProcessIOPreviewDataProps {
data: ProcessIOParameter[];
valueLabel: string;
+ hidden?: boolean;
}
type ProcessIOPreviewProps = ProcessIOPreviewDataProps & WithStyles<CssRules>;
const ProcessIOPreview = memo(
- withStyles(styles)(({ classes, data, valueLabel }: ProcessIOPreviewProps) => {
+ withStyles(styles)(({ data, valueLabel, hidden, classes }: ProcessIOPreviewProps) => {
const showLabel = data.some((param: ProcessIOParameter) => param.label);
const hasMoreValues = (index: number) => (
</TableRow>;
};
- return (
+ return <div className={classes.tableWrapper} hidden={hidden}>
<Table
className={classes.paramTableRoot}
aria-label="Process IO Preview"
</AutoSizer>
</TableBody>
</Table>
- );
+ </div>;
})
);
interface ProcessIORawDataProps {
data: ProcessIOParameter[];
+ hidden?: boolean;
}
-const ProcessIORaw = withStyles(styles)(({ data }: ProcessIORawDataProps) => (
- <Paper elevation={0} style={{minWidth: "100%", height: "100%"}}>
- <DefaultVirtualCodeSnippet
- lines={JSON.stringify(data, null, 2).split('\n')}
- linked
- />
- </Paper>
+const ProcessIORaw = withStyles(styles)(({ data, hidden, classes }: ProcessIORawDataProps & WithStyles<CssRules>) => (
+ <div className={classes.jsonWrapper} hidden={hidden}>
+ <Paper elevation={0} style={{minWidth: "100%", height: "100%"}}>
+ <DefaultVirtualCodeSnippet
+ lines={JSON.stringify(data, null, 2).split('\n')}
+ linked
+ />
+ </Paper>
+ </div>
));
interface ProcessInputMountsDataProps {
mounts: InputCollectionMount[];
+ hidden?: boolean;
}
type ProcessInputMountsProps = ProcessInputMountsDataProps & WithStyles<CssRules>;
const ProcessInputMounts = withStyles(styles)(
connect((state: RootState) => ({
auth: state.auth,
- }))(({ mounts, classes, auth }: ProcessInputMountsProps & { auth: AuthState }) => (
+ }))(({ mounts, hidden, classes, auth }: ProcessInputMountsProps & { auth: AuthState }) => (
<Table
className={classes.mountsTableRoot}
aria-label="Process Input Mounts"
+ hidden={hidden}
>
<TableHead>
<TableRow>
))
);
+export interface ProcessOutputCollectionActionProps {
+ navigateTo: (uuid: string) => void;
+}
+
+const mapNavigateToProps = (dispatch: Dispatch): ProcessOutputCollectionActionProps => ({
+ navigateTo: uuid => dispatch<any>(navigateTo(uuid)),
+});
+
+type ProcessOutputCollectionProps = {outputUuid: string | undefined, hidden?: boolean} & ProcessOutputCollectionActionProps & WithStyles<CssRules>;
+
+const ProcessOutputCollection = withStyles(styles)(connect(null, mapNavigateToProps)(({ outputUuid, hidden, navigateTo, classes }: ProcessOutputCollectionProps) => (
+ <div className={classes.tableWrapper} hidden={hidden}>
+ <>
+ {outputUuid && (
+ <Typography className={classes.collectionLink}>
+ Output Collection:{" "}
+ <MuiLink
+ className={classes.keepLink}
+ onClick={() => {
+ navigateTo(outputUuid || "");
+ }}
+ >
+ {outputUuid}
+ </MuiLink>
+ </Typography>
+ )}
+ <ProcessOutputCollectionFiles
+ isWritable={false}
+ currentItemUuid={outputUuid}
+ />
+ </>
+ </div>
+)));
+
type FileWithSecondaryFiles = {
secondaryFiles: File[];
};
className={classes.keepLink}
href={keepUrlPathNav}
target="_blank"
- rel="noopener"
+ rel="noopener noreferrer"
>
{keepUrlPath || "/"}
</a>
projects / arvados.git / blobdiff