StyleRulesCallback, WithStyles, withStyles, Card,
CardHeader, IconButton, CardContent, Typography, Tooltip
} from '@material-ui/core';
-import * as classnames from "classnames";
import { ArvadosTheme } from '~/common/custom-theme';
import { MoreOptionsIcon } from '~/components/icon/icon';
import { DetailsAttribute } from '~/components/details-attribute/details-attribute';
-import { getBackgroundColorStatus } from '~/views/process-panel/process-panel-root';
import { Process, getProcessStatus, getProcessRuntime } from '~/store/processes/process';
-import { msToTime } from '~/common/formatters';
+import { formatTime } from '~/common/formatters';
+import { getProcessStatusColor } from '~/store/processes/process';
-export type CssRules = 'label' | 'value' | 'title' | 'content' | 'action' | 'options' | 'status' | 'rightSideHeader' | 'titleHeader'
- | 'header' | 'headerActive' | 'headerCompleted' | 'headerQueued' | 'headerFailed' | 'headerCanceled';
+export type CssRules = 'label' | 'value' | 'title' | 'content' | 'action' | 'options' | 'status' | 'rightSideHeader' | 'titleHeader'| 'header';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
label: {
paddingTop: 0,
paddingBottom: 0,
},
- headerActive: {
- backgroundColor: theme.customs.colors.blue500,
- },
- headerCompleted: {
- backgroundColor: theme.customs.colors.green700,
- },
- headerQueued: {
- backgroundColor: theme.customs.colors.grey500,
- },
- headerFailed: {
- backgroundColor: theme.customs.colors.red900,
- },
- headerCanceled: {
- backgroundColor: theme.customs.colors.red900,
- },
});
export enum SubprocessesStatus {
type ProcessSubprocessesCardProps = ProcessSubprocessesCardDataProps & WithStyles<CssRules>;
-export const ProcessSubprocessesCard = withStyles(styles)(
- ({ classes, onContextMenu, subprocess }: ProcessSubprocessesCardProps) => {
+export const ProcessSubprocessesCard = withStyles(styles, { withTheme: true })(
+ ({ classes, onContextMenu, subprocess, theme }: ProcessSubprocessesCardProps) => {
return <Card>
<CardHeader
- className={classnames([classes.header, getBackgroundColorStatus(getProcessStatus(subprocess), classes)])}
+ className={classes.header}
+ style={{ backgroundColor: getProcessStatusColor(getProcessStatus(subprocess), theme as ArvadosTheme) }}
classes={{ content: classes.title, action: classes.action }}
action={
<div className={classes.rightSideHeader}>
<IconButton
className={classes.options}
aria-label="More options"
- onClick={event => onContextMenu(event)}>
+ onClick={onContextMenu}>
<MoreOptionsIcon />
</IconButton>
</div>
} />
<CardContent className={classes.content}>
<DetailsAttribute classLabel={classes.label} classValue={classes.value}
- label="Runtime" value={msToTime(getProcessRuntime(subprocess))} />
+ label="Runtime" value={formatTime(getProcessRuntime(subprocess))} />
</CardContent>
</Card>;
});
\ No newline at end of file