[ARVADOS-WORKBENCH2] created: 1.2.0-196-g909ee82
Git user
git at public.curoverse.com
Thu Aug 30 09:19:16 EDT 2018
at 909ee82b3c7c7fd033c6ab2e82b4fb92f383e191 (commit)
commit 909ee82b3c7c7fd033c6ab2e82b4fb92f383e191
Author: Pawel Kowalczyk <pawel.kowalczyk at contractors.roche.com>
Date: Thu Aug 30 15:19:02 2018 +0200
process-view-subprocesses
Feature #13859
Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk at contractors.roche.com>
diff --git a/src/common/custom-theme.ts b/src/common/custom-theme.ts
index 2b0c589..b47bd51 100644
--- a/src/common/custom-theme.ts
+++ b/src/common/custom-theme.ts
@@ -24,6 +24,9 @@ export interface ArvadosTheme extends Theme {
interface Colors {
green700: string;
yellow700: string;
+ red900: string;
+ blue500: string;
+ grey500: string;
}
const red900 = red["900"];
@@ -40,7 +43,10 @@ const themeOptions: ArvadosThemeOptions = {
customs: {
colors: {
green700: green["700"],
- yellow700: yellow["700"]
+ yellow700: yellow["700"],
+ red900: red['900'],
+ blue500: blue['500'],
+ grey500,
}
},
overrides: {
diff --git a/src/views-components/process-subprocesses/process-subprocesses.ts b/src/views-components/process-subprocesses/process-subprocesses.ts
new file mode 100644
index 0000000..3dd9bca
--- /dev/null
+++ b/src/views-components/process-subprocesses/process-subprocesses.ts
@@ -0,0 +1,24 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import { Dispatch } from 'redux';
+import { openProcessContextMenu } from '~/store/context-menu/context-menu-actions';
+import { connect } from 'react-redux';
+import { RootState } from '~/store/store';
+import { ProcessSubprocessesDataProps, ProcessSubprocesses as SubprocessesComponent } from '~/views/process-panel/process-subprocesses';
+
+type SubprocessesActionProps = Pick<ProcessSubprocessesDataProps, 'onContextMenu'>;
+
+const mapStateToProps = (state: RootState) => ({
+ // todo processPanel
+ items: state.collectionPanel
+});
+
+const mapDispatchToProps = (dispatch: Dispatch): SubprocessesActionProps => ({
+ onContextMenu: (event: React.MouseEvent<HTMLElement>) => {
+ dispatch<any>(openProcessContextMenu(event));
+ }
+});
+
+export const ProcessSubprocesses = connect(mapStateToProps, mapDispatchToProps)(SubprocessesComponent);
\ No newline at end of file
diff --git a/src/views/process-panel/process-information-card.tsx b/src/views/process-panel/process-information-card.tsx
index a50490c..359c256 100644
--- a/src/views/process-panel/process-information-card.tsx
+++ b/src/views/process-panel/process-information-card.tsx
@@ -7,11 +7,15 @@ import {
StyleRulesCallback, WithStyles, withStyles, Card,
CardHeader, IconButton, CardContent, Grid, Chip, Typography, Tooltip
} from '@material-ui/core';
+import * as classnames from "classnames";
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';
-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: {
@@ -22,7 +26,8 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
color: theme.customs.colors.green700,
},
avatar: {
- alignSelf: 'flex-start'
+ alignSelf: 'flex-start',
+ paddingTop: theme.spacing.unit * 0.5
},
label: {
display: 'flex',
@@ -45,15 +50,10 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
chip: {
height: theme.spacing.unit * 3,
width: theme.spacing.unit * 12,
- backgroundColor: theme.customs.colors.green700,
color: theme.palette.common.white,
fontSize: '0.875rem',
borderRadius: theme.spacing.unit * 0.625,
},
- headerText: {
- fontSize: '0.875rem',
- marginLeft: theme.spacing.unit * 3,
- },
content: {
'&:last-child': {
paddingBottom: theme.spacing.unit * 2,
@@ -61,8 +61,24 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
}
},
title: {
- overflow: 'hidden'
- }
+ overflow: 'hidden',
+ paddingTop: theme.spacing.unit * 0.5
+ },
+ 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 ProcessInformationCardDataProps {
@@ -83,7 +99,8 @@ export const ProcessInformationCard = withStyles(styles)(
avatar={<ProcessIcon className={classes.iconHeader} />}
action={
<div>
- <Chip label="Complete" className={classes.chip} />
+ <Chip label={SubprocessesStatus.ACTIVE}
+ className={classnames([classes.chip, getBackgroundColorStatus(SubprocessesStatus.ACTIVE, classes)])} />
<IconButton
aria-label="More options"
onClick={event => onContextMenu(event)}>
diff --git a/src/views/process-panel/process-panel.tsx b/src/views/process-panel/process-panel.tsx
index f416f7b..5829a0c 100644
--- a/src/views/process-panel/process-panel.tsx
+++ b/src/views/process-panel/process-panel.tsx
@@ -3,8 +3,13 @@
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { ProcessInformationCard } from '~/views-components/process-information-card/process-information-card';
+import { } from '@material-ui/core';
import { Grid } from '@material-ui/core';
+import { ProcessInformationCard } from '~/views-components/process-information-card/process-information-card';
+import { ProcessSubprocesses } from '~/views-components/process-subprocesses/process-subprocesses';
+import { SubprocessesStatus } from '~/views/process-panel/process-subprocesses';
+
+export type CssRules = 'headerActive' | 'headerCompleted' | 'headerQueued' | 'headerFailed' | 'headerCanceled';
export class ProcessPanel extends React.Component {
render() {
@@ -14,6 +19,24 @@ export class ProcessPanel extends React.Component {
<ProcessInformationCard />
</Grid>
</Grid>
+ <ProcessSubprocesses />
</div>;
}
-}
\ No newline at end of file
+}
+
+export const getBackgroundColorStatus = (status: SubprocessesStatus, 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;
+ }
+};
\ No newline at end of file
diff --git a/src/views/process-panel/process-subprocesses-card.tsx b/src/views/process-panel/process-subprocesses-card.tsx
new file mode 100644
index 0000000..2ea1b7e
--- /dev/null
+++ b/src/views/process-panel/process-subprocesses-card.tsx
@@ -0,0 +1,114 @@
+// 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';
+
+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>;
+ });
\ No newline at end of file
diff --git a/src/views/process-panel/process-subprocesses.tsx b/src/views/process-panel/process-subprocesses.tsx
new file mode 100644
index 0000000..4ab444c
--- /dev/null
+++ b/src/views/process-panel/process-subprocesses.tsx
@@ -0,0 +1,67 @@
+// 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 { ProcessSubprocessesCard } from '~/views/process-panel/process-subprocesses-card';
+
+export enum SubprocessesStatus {
+ ACTIVE = 'Active',
+ COMPLETED = 'Completed',
+ QUEUED = 'Queued',
+ FAILED = 'Failed',
+ CANCELED = 'Canceled'
+}
+
+export interface ProcessSubprocessesDataProps {
+ onContextMenu: (event: React.MouseEvent<HTMLElement>) => void;
+}
+
+interface SubprocessesProps {
+ title: string;
+ status: string;
+ runtime?: string;
+}
+
+export const ProcessSubprocesses = ({ onContextMenu }: ProcessSubprocessesDataProps) => {
+ return <Grid container spacing={16}>
+ {items.map(it =>
+ <Grid item xs={2} key={it.title}>
+ <ProcessSubprocessesCard onContextMenu={onContextMenu} items={it} />
+ </Grid>
+ )}
+ </Grid>;
+};
+
+const items: Array<SubprocessesProps> = [
+ {
+ title: 'cos1',
+ status: SubprocessesStatus.ACTIVE
+ },
+ {
+ title: 'cos2',
+ status: SubprocessesStatus.FAILED
+ },
+ {
+ title: 'cos3',
+ status: SubprocessesStatus.QUEUED
+ },
+ {
+ title: 'cos4',
+ status: SubprocessesStatus.CANCELED
+ },
+ {
+ title: 'cos5',
+ status: SubprocessesStatus.COMPLETED
+ },
+ {
+ title: 'cos6',
+ status: SubprocessesStatus.COMPLETED
+ },
+ {
+ title: 'cos7',
+ status: SubprocessesStatus.COMPLETED
+ },
+];
+
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list