[ARVADOS-WORKBENCH2] updated: 1.2.0-194-ga54f527
Git user
git at public.curoverse.com
Wed Aug 29 06:14:53 EDT 2018
Summary of changes:
src/store/context-menu/context-menu-actions.ts | 11 ++
.../process-information-card.ts | 24 ++++
src/views/process-panel/information-card.tsx | 123 ---------------------
.../process-panel/process-information-card.tsx | 119 ++++++++++++++++++++
src/views/process-panel/process-panel.tsx | 2 +-
5 files changed, 155 insertions(+), 124 deletions(-)
create mode 100644 src/views-components/process-information-card/process-information-card.ts
delete mode 100644 src/views/process-panel/information-card.tsx
create mode 100644 src/views/process-panel/process-information-card.tsx
via a54f5270f980d4c2c6143b6654fb96a57b7bf46c (commit)
from d911869b4340a32575e3a2cdce26ebd543522e42 (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
commit a54f5270f980d4c2c6143b6654fb96a57b7bf46c
Author: Pawel Kowalczyk <pawel.kowalczyk at contractors.roche.com>
Date: Wed Aug 29 12:13:29 2018 +0200
13858-process-view-information-card
Feature #13858
Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk at contractors.roche.com>
diff --git a/src/store/context-menu/context-menu-actions.ts b/src/store/context-menu/context-menu-actions.ts
index 4062399..cf66a53 100644
--- a/src/store/context-menu/context-menu-actions.ts
+++ b/src/store/context-menu/context-menu-actions.ts
@@ -67,6 +67,17 @@ export const openSidePanelContextMenu = (event: React.MouseEvent<HTMLElement>, i
}
};
+export const openProcessContextMenu = (event: React.MouseEvent<HTMLElement>) =>
+ (dispatch: Dispatch, getState: () => RootState) => {
+ const resource = {
+ uuid: '',
+ name: '',
+ description: '',
+ kind: ContextMenuKind.PROCESS
+ };
+ dispatch<any>(openContextMenu(event, resource));
+ };
+
export const resourceKindToContextMenuKind = (uuid: string) => {
const kind = extractUuidKind(uuid);
switch (kind) {
diff --git a/src/views-components/process-information-card/process-information-card.ts b/src/views-components/process-information-card/process-information-card.ts
new file mode 100644
index 0000000..bf9172d
--- /dev/null
+++ b/src/views-components/process-information-card/process-information-card.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 { ProcessInformationCard as InformationCardComponent, ProcessInformationCardDataProps } from '~/views/process-panel/process-information-card';
+
+type InformationCardActionProps = Pick<ProcessInformationCardDataProps, 'onContextMenu'>;
+
+const mapStateToProps = (state: RootState) => ({
+ // todo: change for processPanel
+ item: state.collectionPanel.item
+});
+
+const mapDispatchToProps = (dispatch: Dispatch): InformationCardActionProps => ({
+ onContextMenu: (event: React.MouseEvent<HTMLElement>) => {
+ dispatch<any>(openProcessContextMenu(event));
+ }
+});
+
+export const ProcessInformationCard = connect(mapStateToProps, mapDispatchToProps)(InformationCardComponent);
\ No newline at end of file
diff --git a/src/views/process-panel/information-card.tsx b/src/views/process-panel/information-card.tsx
deleted file mode 100644
index 22e08d2..0000000
--- a/src/views/process-panel/information-card.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-// 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, Grid, Chip
-} from '@material-ui/core';
-import { ArvadosTheme } from '~/common/custom-theme';
-import { ProcessResource } from '~/models/process';
-import { DispatchProp, connect } from 'react-redux';
-import { MoreOptionsIcon, ProcessIcon } from '~/components/icon/icon';
-import { DetailsAttribute } from '~/components/details-attribute/details-attribute';
-import { RootState } from '~/store/store';
-import { ContextMenuKind } from '~/views-components/context-menu/context-menu';
-import { openContextMenu } from '~/store/context-menu/context-menu-actions';
-
-type CssRules = 'card' | 'iconHeader' | 'label' | 'value' | 'chip' | 'headerText' | 'link';
-
-const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
- card: {
- marginBottom: theme.spacing.unit * 2,
- paddingBottom: theme.spacing.unit * 3,
- position: 'relative'
- },
- iconHeader: {
- fontSize: '1.875rem',
- color: theme.customs.colors.green700
- },
- label: {
- display: 'flex',
- justifyContent: 'flex-end',
- fontSize: '0.875rem',
- marginRight: theme.spacing.unit * 3
- },
- value: {
- textTransform: 'none',
- fontSize: '0.875rem',
- },
- link: {
- fontSize: '0.875rem',
- color: theme.palette.primary.main,
- '&:hover': {
- cursor: 'pointer'
- }
- },
- 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,
- position: 'absolute',
- top: theme.spacing.unit * 2.5,
- right: theme.spacing.unit * 8,
- },
- headerText: {
- fontSize: '0.875rem',
- marginLeft: theme.spacing.unit * 3,
- }
-});
-
-interface ProcessInformationCardDataProps {
- item: ProcessResource;
-}
-
-type ProcessInformationCardProps = ProcessInformationCardDataProps & DispatchProp & WithStyles<CssRules>;
-
-export const ProcessInformationCard = withStyles(styles)(
- connect((state: RootState) => ({
- item: state.collectionPanel.item
- }))(
- class extends React.Component<ProcessInformationCardProps> {
- render() {
- const { classes } = this.props;
-
- return <div>
- <Card className={classes.card}>
- <CardHeader
- avatar={<ProcessIcon className={classes.iconHeader} />}
- action={
- <IconButton
- aria-label="More options"
- onClick={this.handleContextMenu}>
- <MoreOptionsIcon />
- </IconButton>}
- title="Pipeline template that generates a config file from a template"
- subheader="(no description)" />
- <Chip label="Complete" className={classes.chip} />
- <CardContent>
- <Grid container>
- <Grid item xs={6}>
- <DetailsAttribute classLabel={classes.label} classValue={classes.value}
- label='From' value="1:25 PM 3/23/2018" />
- <DetailsAttribute classLabel={classes.label} classValue={classes.value}
- label='To' value='1:25 PM 3/23/2018' />
- <DetailsAttribute classLabel={classes.label} classValue={classes.link}
- label='Workflow' value='FastQC MultiQC' />
- </Grid>
- <Grid item xs={6}>
- <DetailsAttribute classLabel={classes.link} label='Outputs' />
- <DetailsAttribute classLabel={classes.link} label='Inputs' />
- </Grid>
- </Grid>
- </CardContent>
- </Card>
- </div>;
- }
-
- handleContextMenu = (event: React.MouseEvent<any>) => {
- const resource = {
- uuid: '',
- name: '',
- description: '',
- kind: ContextMenuKind.PROCESS
- };
- this.props.dispatch<any>(openContextMenu(event, resource));
- }
- }
- )
-);
\ 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
new file mode 100644
index 0000000..a50490c
--- /dev/null
+++ b/src/views/process-panel/process-information-card.tsx
@@ -0,0 +1,119 @@
+// 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, Grid, Chip, Typography, Tooltip
+} from '@material-ui/core';
+import { ArvadosTheme } from '~/common/custom-theme';
+import { MoreOptionsIcon, ProcessIcon } from '~/components/icon/icon';
+import { DetailsAttribute } from '~/components/details-attribute/details-attribute';
+
+type CssRules = 'card' | 'iconHeader' | 'label' | 'value' | 'chip' | 'headerText' | 'link' | 'content' | 'title' | 'avatar';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+ card: {
+ marginBottom: theme.spacing.unit * 2
+ },
+ iconHeader: {
+ fontSize: '1.875rem',
+ color: theme.customs.colors.green700,
+ },
+ avatar: {
+ alignSelf: 'flex-start'
+ },
+ label: {
+ display: 'flex',
+ justifyContent: 'flex-end',
+ fontSize: '0.875rem',
+ marginRight: theme.spacing.unit * 3,
+ paddingRight: theme.spacing.unit
+ },
+ value: {
+ textTransform: 'none',
+ fontSize: '0.875rem',
+ },
+ link: {
+ fontSize: '0.875rem',
+ color: theme.palette.primary.main,
+ '&:hover': {
+ cursor: 'pointer'
+ }
+ },
+ 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,
+ paddingTop: '0px'
+ }
+ },
+ title: {
+ overflow: 'hidden'
+ }
+});
+
+export interface ProcessInformationCardDataProps {
+ item: any;
+ onContextMenu: (event: React.MouseEvent<HTMLElement>) => void;
+}
+
+type ProcessInformationCardProps = ProcessInformationCardDataProps & WithStyles<CssRules>;
+
+export const ProcessInformationCard = withStyles(styles)(
+ ({ classes, onContextMenu }: ProcessInformationCardProps) =>
+ <Card className={classes.card}>
+ <CardHeader
+ classes={{
+ content: classes.title,
+ avatar: classes.avatar
+ }}
+ avatar={<ProcessIcon className={classes.iconHeader} />}
+ action={
+ <div>
+ <Chip label="Complete" className={classes.chip} />
+ <IconButton
+ aria-label="More options"
+ onClick={event => onContextMenu(event)}>
+ <MoreOptionsIcon />
+ </IconButton>
+ </div>
+ }
+ title={
+ <Tooltip title="Pipeline template that generates a config file from a template">
+ <Typography noWrap variant="title">
+ Pipeline template that generates a config file from a template
+ </Typography>
+ </Tooltip>
+ }
+ subheader="(no-description)" />
+ <CardContent className={classes.content}>
+ <Grid container>
+ <Grid item xs={6}>
+ <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+ label='From' value="1:25 PM 3/23/2018" />
+ <DetailsAttribute classLabel={classes.label} classValue={classes.value}
+ label='To' value='1:25 PM 3/23/2018' />
+ <DetailsAttribute classLabel={classes.label} classValue={classes.link}
+ label='Workflow' value='FastQC MultiQC' />
+ </Grid>
+ <Grid item xs={6}>
+ <DetailsAttribute classLabel={classes.link} label='Outputs' />
+ <DetailsAttribute classLabel={classes.link} label='Inputs' />
+ </Grid>
+ </Grid>
+ </CardContent>
+ </Card>
+);
\ No newline at end of file
diff --git a/src/views/process-panel/process-panel.tsx b/src/views/process-panel/process-panel.tsx
index ce98a48..f416f7b 100644
--- a/src/views/process-panel/process-panel.tsx
+++ b/src/views/process-panel/process-panel.tsx
@@ -3,7 +3,7 @@
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { ProcessInformationCard } from '~/views/process-panel/information-card';
+import { ProcessInformationCard } from '~/views-components/process-information-card/process-information-card';
import { Grid } from '@material-ui/core';
export class ProcessPanel extends React.Component {
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list