--- /dev/null
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import React from 'react';
+import {
+ ExpansionPanel,
+ ExpansionPanelDetails,
+ ExpansionPanelSummary,
+ StyleRulesCallback,
+ Typography,
+ withStyles,
+ WithStyles
+} from "@material-ui/core";
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { RuntimeStatus } from "models/runtime-status";
+import { ArvadosTheme } from 'common/custom-theme';
+import classNames from 'classnames';
+
+type CssRules = 'heading' | 'summary' | 'details' | 'error' | 'errorColor' | 'warning' | 'warningColor';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+ heading: {
+ fontSize: '1rem',
+ },
+ summary: {
+ paddingLeft: theme.spacing.unit * 1,
+ paddingRight: theme.spacing.unit * 1,
+ },
+ details: {
+ paddingLeft: theme.spacing.unit * 1,
+ paddingRight: theme.spacing.unit * 1,
+ },
+ errorColor: {
+ color: theme.customs.colors.red900,
+ },
+ error: {
+ backgroundColor: theme.customs.colors.red100,
+
+ },
+ warning: {
+ backgroundColor: theme.customs.colors.yellow100,
+ },
+ warningColor: {
+ color: theme.customs.colors.yellow900,
+ },
+});
+export interface ProcessRuntimeStatusDataProps {
+ runtimeStatus: RuntimeStatus | undefined;
+}
+
+type ProcessRuntimeStatusProps = ProcessRuntimeStatusDataProps & WithStyles<CssRules>;
+
+export const ProcessRuntimeStatus = withStyles(styles)(
+ ({ runtimeStatus, classes }: ProcessRuntimeStatusProps) => {
+ return <>
+ { runtimeStatus?.error &&
+ <ExpansionPanel className={classes.error} elevation={0}>
+ <ExpansionPanelSummary className={classes.summary} expandIcon={<ExpandMoreIcon />}>
+ <Typography className={classNames(classes.heading, classes.errorColor)}>
+ {`Error: ${runtimeStatus.error }`}
+ </Typography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails className={classes.details}>
+ <Typography className={classes.errorColor}>
+ {runtimeStatus?.errorDetail || 'No additional error details available'}
+ </Typography>
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+ }
+ { runtimeStatus?.warning &&
+ <ExpansionPanel className={classes.warning} elevation={0}>
+ <ExpansionPanelSummary className={classes.summary} expandIcon={<ExpandMoreIcon />}>
+ <Typography className={classNames(classes.heading, classes.warningColor)}>
+ {`Warning: ${runtimeStatus.warning }`}
+ </Typography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails className={classes.details}>
+ <Typography className={classes.warningColor}>
+ {runtimeStatus?.warningDetail || 'No additional warning details available'}
+ </Typography>
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+ }
+ </>
+});
\ No newline at end of file
import classNames from 'classnames';
import { ContainerState } from 'models/container';
import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
+import { ProcessRuntimeStatus } from 'views-components/process-runtime-status/process-runtime-status';
type CssRules = 'card' | 'iconHeader' | 'label' | 'value' | 'chip' | 'link' | 'content' | 'title' | 'avatar' | 'cancelButton' | 'header';
},
label: {
display: 'flex',
- justifyContent: 'flex-end',
+ justifyContent: 'flex-start',
fontSize: '0.875rem',
marginRight: theme.spacing.unit * 3,
paddingRight: theme.spacing.unit
borderRadius: theme.spacing.unit * 0.625,
},
content: {
+ paddingTop: '0px',
+ paddingLeft: theme.spacing.unit * 1,
+ paddingRight: theme.spacing.unit * 1,
'&:last-child': {
- paddingBottom: theme.spacing.unit * 2,
+ paddingBottom: theme.spacing.unit * 1,
}
},
title: {
</Tooltip> }
</div>
}
- title={
- <Tooltip title={process.containerRequest.name} placement="bottom-start">
- <Typography noWrap variant='h6' color='inherit'>
- {process.containerRequest.name}
- </Typography>
- </Tooltip>
+ title={ !!process.containerRequest.name &&
+ <Typography noWrap variant='h6' color='inherit'>
+ {process.containerRequest.name}
+ </Typography>
}
subheader={
- <Tooltip title={getDescription(process)} placement="bottom-start">
- <Typography noWrap variant='body1' color='inherit'>
- {getDescription(process)}
- </Typography>
- </Tooltip>} />
+ <Typography noWrap variant='body1' color='inherit'>
+ {process.containerRequest.description}
+ </Typography>
+ }
+ />
<CardContent className={classes.content}>
<Grid container>
+ <Grid item xs={12}>
+ <ProcessRuntimeStatus runtimeStatus={process.container?.runtimeStatus} />
+ </Grid>
<Grid item xs={6}>
<DetailsAttribute classLabel={classes.label} classValue={classes.value}
- label='From'
+ label='Started at'
value={startedAt} />
<DetailsAttribute classLabel={classes.label} classValue={classes.value}
- label='To'
+ label='Finished at'
value={finishedAt} />
{process.containerRequest.properties.workflowUuid &&
<span onClick={() => openWorkflow(process.containerRequest.properties.workflowUuid)}>
</Card>;
}
);
-
-const getDescription = (process: Process) =>
- process.containerRequest.description || '(no-description)';