import { ArvadosTheme } from '~/common/custom-theme';
import { MoreOptionsIcon, ProcessIcon } from '~/components/icon/icon';
import { DetailsAttribute } from '~/components/details-attribute/details-attribute';
- import { getBackgroundColorStatus } from '~/views/process-panel/process-panel';
- import { SubprocessesStatus } from '~/views/process-panel/process-subprocesses';
+ import { Process } from '~/store/processes/process';
-import { getProcessStatus } from '../../store/processes/process';
++import { getProcessStatus } from '~/store/processes/process';
++import { getBackgroundColorStatus } from '~/views/process-panel/process-panel-root';
-type CssRules = 'card' | 'iconHeader' | 'label' | 'value' | 'chip' | 'headerText' | 'link' | 'content' | 'title' | 'avatar';
+type CssRules = 'card' | 'iconHeader' | 'label' | 'value' | 'chip' | 'link' | 'content' | 'title' | 'avatar'
+ | 'headerActive' | 'headerCompleted' | 'headerQueued' | 'headerFailed' | 'headerCanceled';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
card: {
avatar={<ProcessIcon className={classes.iconHeader} />}
action={
<div>
- <Chip label={SubprocessesStatus.ACTIVE}
- className={classnames([classes.chip, getBackgroundColorStatus(SubprocessesStatus.ACTIVE, classes)])} />
- <Chip label={getProcessStatus(process)} className={classes.chip} />
++ <Chip label={getProcessStatus(process)}
++ className={classnames([classes.chip, getBackgroundColorStatus(getProcessStatus(process), classes)])} />
<IconButton
aria-label="More options"
onClick={event => onContextMenu(event)}>
--- /dev/null
+ // Copyright (C) The Arvados Authors. All rights reserved.
+ //
+ // SPDX-License-Identifier: AGPL-3.0
+
+ import * as React from 'react';
+ import { Grid } from '@material-ui/core';
+ import { ProcessInformationCard } from './process-information-card';
+ import { DefaultView } from '~/components/default-view/default-view';
+ import { ProcessIcon } from '~/components/icon/icon';
+ import { Process } from '~/store/processes/process';
+ import { SubprocessesCard } from './subprocesses-card';
++import { ProcessSubprocesses } from '~/views-components/process-subprocesses/process-subprocesses';
++import { SubprocessesStatus } from '~/views/process-panel/process-subprocesses';
++
++type CssRules = 'headerActive' | 'headerCompleted' | 'headerQueued' | 'headerFailed' | 'headerCanceled';
+
+ export interface ProcessPanelRootDataProps {
+ process?: Process;
+ }
+
+ export interface ProcessPanelRootActionProps {
+ onContextMenu: (event: React.MouseEvent<HTMLElement>) => void;
+ }
+
+ export type ProcessPanelRootProps = ProcessPanelRootDataProps & ProcessPanelRootActionProps;
+
+ export const ProcessPanelRoot = (props: ProcessPanelRootProps) =>
+ props.process
+ ? <Grid container spacing={16}>
+ <Grid item xs={7}>
+ <ProcessInformationCard
+ process={props.process}
+ onContextMenu={props.onContextMenu} />
+ </Grid>
+ <Grid item xs={5}>
+ <SubprocessesCard
+ subprocesses={4}
+ filters={[
+ {
+ key: 'queued',
+ value: 1,
+ label: 'Queued',
+ checked: true
+ }, {
+ key: 'active',
+ value: 2,
+ label: 'Active',
+ checked: true
+ },
+ {
+ key: 'completed',
+ value: 2,
+ label: 'Completed',
+ checked: true
+ },
+ {
+ key: 'failed',
+ value: 2,
+ label: 'Failed',
+ checked: true
+ }
+ ]}
+ onToggle={() => { return; }}
+ />
+ </Grid>
++ <ProcessSubprocesses />
+ </Grid>
+ : <Grid container
+ alignItems='center'
+ justify='center'>
+ <DefaultView
+ icon={ProcessIcon}
+ messages={['Process not found']} />
+ </Grid>;
++
++export const getBackgroundColorStatus = (status: string, classes: Record<CssRules, string>) => {
++ switch (status) {
++ case SubprocessesStatus.COMPLETED:
++ return classes.headerCompleted;
++ case SubprocessesStatus.CANCELED:
++ return classes.headerCanceled;
++ case SubprocessesStatus.QUEUED:
++ return classes.headerQueued;
++ case SubprocessesStatus.FAILED:
++ return classes.headerFailed;
++ case SubprocessesStatus.ACTIVE:
++ return classes.headerActive;
++ default:
++ return classes.headerQueued;
++ }
++};
--- /dev/null
- import { getBackgroundColorStatus } from '~/views/process-panel/process-panel';
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import {
+ 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';
+
+export type CssRules = 'label' | 'value' | 'title' | 'content' | 'action' | 'options' | 'status' | 'rightSideHeader' | 'titleHeader'
+ | 'header' | 'headerActive' | 'headerCompleted' | 'headerQueued' | 'headerFailed' | 'headerCanceled';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+ label: {
+ fontSize: '0.875rem',
+ },
+ value: {
+ textTransform: 'none',
+ fontSize: '0.875rem',
+ },
+ title: {
+ overflow: 'hidden'
+ },
+ content: {
+ paddingTop: theme.spacing.unit * 0.5,
+ '&:last-child': {
+ paddingBottom: 0
+ }
+ },
+ action: {
+ marginTop: 0
+ },
+ options: {
+ width: theme.spacing.unit * 4,
+ height: theme.spacing.unit * 4,
+ color: theme.palette.common.white,
+ },
+ status: {
+ paddingTop: theme.spacing.unit * 0.5,
+ color: theme.palette.common.white,
+ },
+ rightSideHeader: {
+ display: 'flex'
+ },
+ titleHeader: {
+ color: theme.palette.common.white,
+ fontWeight: 600
+ },
+ header: {
+ 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 interface ProcessSubprocessesCardDataProps {
+ onContextMenu: (event: React.MouseEvent<HTMLElement>) => void;
+ items: any;
+}
+
+type ProcessSubprocessesCardProps = ProcessSubprocessesCardDataProps & WithStyles<CssRules>;
+
+export const ProcessSubprocessesCard = withStyles(styles)(
+ ({ classes, onContextMenu, items }: ProcessSubprocessesCardProps) => {
+ return <Card>
+ <CardHeader
+ className={classnames([classes.header, getBackgroundColorStatus(items.status, classes)])}
+ classes={{ content: classes.title, action: classes.action }}
+ action={
+ <div className={classes.rightSideHeader}>
+ <Typography noWrap variant="body2" className={classes.status}>
+ {items.status}
+ </Typography>
+ <IconButton
+ className={classes.options}
+ aria-label="More options"
+ onClick={event => onContextMenu(event)}>
+ <MoreOptionsIcon />
+ </IconButton>
+ </div>
+ }
+ title={
+ <Tooltip title={items.title}>
+ <Typography noWrap variant="body2" className={classes.titleHeader}>
+ {items.title}
+ </Typography>
+ </Tooltip>
+ } />
+ <CardContent className={classes.content}>
+ <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+ label='Runtime' value="0h 2m" />
+ </CardContent>
+ </Card>;
+ });
projects / arvados-workbench2.git / commitdiff