[ARVADOS-WORKBENCH2] created: 1.1.4-280-g99baf25
Git user
git at public.curoverse.com
Fri Jul 13 04:44:40 EDT 2018
at 99baf25913557ccaa4503dd7a7891f33e009e4ac (commit)
commit 99baf25913557ccaa4503dd7a7891f33e009e4ac
Author: Janicki Artur <artur.janicki at contractors.roche.com>
Date: Wed Jul 11 15:15:49 2018 +0200
fill common item details, clean code, change factory details panel
Feature #13705
Arvados-DCO-1.1-Signed-off-by: Janicki Artur <artur.janicki at contractors.roche.com>
diff --git a/src/common/labels.ts b/src/common/labels.ts
new file mode 100644
index 0000000..8ca9e53
--- /dev/null
+++ b/src/common/labels.ts
@@ -0,0 +1,18 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import { ResourceKind } from "../models/kinds";
+
+export const resourceLabel = (type: string) => {
+ switch (type) {
+ case ResourceKind.Collection:
+ return "Data collection";
+ case ResourceKind.Project:
+ return "Project";
+ case ResourceKind.Process:
+ return "Process";
+ default:
+ return "Unknown";
+ }
+};
\ No newline at end of file
diff --git a/src/components/attribute/attribute.tsx b/src/components/attribute/attribute.tsx
index 6d1c3bc..ea35f5b 100644
--- a/src/components/attribute/attribute.tsx
+++ b/src/components/attribute/attribute.tsx
@@ -9,7 +9,7 @@ import { ArvadosTheme } from 'src/common/custom-theme';
interface AttributeDataProps {
label: string;
- value?: string;
+ value?: string | number;
link?: string;
}
@@ -26,7 +26,7 @@ class Attribute extends React.Component<AttributeProps> {
return <Typography component="div" className={classes.attribute}>
<Typography component="span" className={classes.label}>{label}</Typography>
{ this.hasLink() ? (
- <a href='{link}' className={classes.link} target='_blank'>{value}</a>
+ <a href='{link}' className={classes.link} target='_blank'>{value}</a>
) : (
<Typography component="span" className={classes.value}>
{value}
@@ -42,9 +42,8 @@ type CssRules = 'attribute' | 'label' | 'value' | 'link';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
attribute: {
- height: '24px',
display: 'flex',
- alignItems: 'center',
+ alignItems: 'flex-start',
marginBottom: theme.spacing.unit
},
label: {
@@ -52,8 +51,10 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
width: '40%'
},
value: {
+ width: '60%',
display: 'flex',
- alignItems: 'center'
+ alignItems: 'flex-start',
+ textTransform: 'capitalize'
},
link: {
color: theme.palette.primary.main,
diff --git a/src/components/details-panel-factory/items/abstract-item.tsx b/src/components/details-panel-factory/items/abstract-item.tsx
index fb30e84..ae2b383 100644
--- a/src/components/details-panel-factory/items/abstract-item.tsx
+++ b/src/components/details-panel-factory/items/abstract-item.tsx
@@ -6,17 +6,17 @@ import * as React from 'react';
import { IconTypes } from '../../icon/icon';
import { DetailsPanelResource } from '../../../views-components/details-panel/details-panel';
-export default abstract class AbstractItem {
- protected item: DetailsPanelResource;
+export default abstract class AbstractItem<T extends DetailsPanelResource = DetailsPanelResource> {
+ protected item: T;
- constructor(item: DetailsPanelResource) {
+ constructor(item: T) {
this.item = item;
}
getTitle(): string {
return this.item.name;
}
-
+
abstract getIcon(): IconTypes;
abstract buildDetails(): React.ReactElement<any>;
diff --git a/src/components/details-panel-factory/items/collection-item.tsx b/src/components/details-panel-factory/items/collection-item.tsx
index 448eebb..2ef584e 100644
--- a/src/components/details-panel-factory/items/collection-item.tsx
+++ b/src/components/details-panel-factory/items/collection-item.tsx
@@ -7,11 +7,13 @@ import IconBase, { IconTypes } from '../../icon/icon';
import Attribute from '../../attribute/attribute';
import AbstractItem from './abstract-item';
import { CollectionResource } from '../../../models/collection';
+import { formatDate } from '../../../common/formatters';
-export default class CollectionItem extends AbstractItem {
+export default class CollectionItem extends AbstractItem<CollectionResource> {
constructor(item: CollectionResource) {
super(item);
+ console.log('Collection item: ', this.item);
}
getIcon(): IconTypes {
@@ -22,19 +24,15 @@ export default class CollectionItem extends AbstractItem {
return <div>
<Attribute label='Type' value='Data Collection' />
<Attribute label='Size' value='---' />
- <Attribute label="Location">
- <IconBase icon={IconTypes.FOLDER} />
- Collection
- </Attribute>
- <Attribute label='Owner' value='me' />
- <Attribute label='Last modified' value='5:25 PM 5/23/2018' />
- <Attribute label='Created at' value='1:25 PM 5/23/2018' />
+ <Attribute label='Owner' value={this.item.ownerUuid} />
+ <Attribute label='Last modified' value={formatDate(this.item.modifiedAt)} />
+ <Attribute label='Created at' value={formatDate(this.item.createdAt)} />
+ {/* Links but we dont have view */}
+ <Attribute label='Collection UUID' link={this.item.uuid} value={this.item.uuid} />
+ <Attribute label='Content address' link={this.item.portableDataHash} value={this.item.portableDataHash} />
+ {/* Missing attrs */}
<Attribute label='Number of files' value='20' />
<Attribute label='Content size' value='54 MB' />
- <Attribute label='Collection UUID' link='http://www.google.pl' value='nfnz05wp63ibf8w' />
- <Attribute label='Content address' link='http://www.google.pl' value='nfnz05wp63ibf8w' />
- <Attribute label='Creator' value='Chrystian' />
- <Attribute label='Used by' value='---' />
</div>;
}
}
\ No newline at end of file
diff --git a/src/components/details-panel-factory/items/process-item.tsx b/src/components/details-panel-factory/items/process-item.tsx
index c8eab0a..370bc29 100644
--- a/src/components/details-panel-factory/items/process-item.tsx
+++ b/src/components/details-panel-factory/items/process-item.tsx
@@ -7,11 +7,13 @@ import IconBase, { IconTypes } from '../../icon/icon';
import Attribute from '../../attribute/attribute';
import AbstractItem from './abstract-item';
import { ProcessResource } from '../../../models/process';
+import { formatDate } from '../../../common/formatters';
-export default class ProcessItem extends AbstractItem {
+export default class ProcessItem extends AbstractItem<ProcessResource> {
constructor(item: ProcessResource) {
super(item);
+ console.log('Process item: ', this.item);
}
getIcon(): IconTypes {
@@ -20,21 +22,27 @@ export default class ProcessItem extends AbstractItem {
buildDetails(): React.ReactElement<any> {
return <div>
- <Attribute label='Type' value='Data Collection' />
+ <Attribute label='Type' value='Process' />
<Attribute label='Size' value='---' />
- <Attribute label="Location">
- <IconBase icon={IconTypes.FOLDER} />
- Process
- </Attribute>
- <Attribute label='Owner' value='me' />
- <Attribute label='Last modified' value='5:25 PM 5/23/2018' />
- <Attribute label='Created at' value='1:25 PM 5/23/2018' />
- <Attribute label='Number of files' value='20' />
- <Attribute label='Content size' value='54 MB' />
- <Attribute label='Collection UUID' link='http://www.google.pl' value='nfnz05wp63ibf8w' />
- <Attribute label='Content address' link='http://www.google.pl' value='nfnz05wp63ibf8w' />
- <Attribute label='Creator' value='Chrystian' />
- <Attribute label='Used by' value='---' />
+ <Attribute label='Owner' value={this.item.ownerUuid} />
+
+ {/* Missing attr */}
+ <Attribute label='Status' value={this.item.state} />
+ <Attribute label='Last modified' value={formatDate(this.item.modifiedAt)} />
+
+ {/* Missing attrs */}
+ <Attribute label='Started at' value={formatDate(this.item.createdAt)} />
+ <Attribute label='Finished at' value={formatDate(this.item.expiresAt)} />
+
+ {/* Links but we dont have view */}
+ <Attribute label='Outputs' link={this.item.outputPath} value={this.item.outputPath} />
+ <Attribute label='UUID' link={this.item.uuid} value={this.item.uuid} />
+ <Attribute label='Container UUID' link={this.item.containerUuid} value={this.item.containerUuid} />
+
+ <Attribute label='Priority' value={this.item.priority} />
+ <Attribute label='Runtime Constraints' value={this.item.runtimeConstraints} />
+ {/* Link but we dont have view */}
+ <Attribute label='Docker Image locator' link={this.item.containerImage} value={this.item.containerImage} />
</div>;
}
}
\ No newline at end of file
diff --git a/src/components/details-panel-factory/items/project-item.tsx b/src/components/details-panel-factory/items/project-item.tsx
index 10402ed..02719f5 100644
--- a/src/components/details-panel-factory/items/project-item.tsx
+++ b/src/components/details-panel-factory/items/project-item.tsx
@@ -3,33 +3,34 @@
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import IconBase, { IconTypes } from '../../icon/icon';
+import { IconTypes } from '../../icon/icon';
import Attribute from '../../attribute/attribute';
import AbstractItem from './abstract-item';
import { ProjectResource } from '../../../models/project';
+import { formatDate } from '../../../common/formatters';
-export default class ProjectItem extends AbstractItem {
+export default class ProjectItem extends AbstractItem<ProjectResource> {
constructor(item: ProjectResource) {
super(item);
+ console.log('item: ', this.item);
}
getIcon(): IconTypes {
- return IconTypes.PROJECT;
+ return IconTypes.FOLDER;
}
buildDetails(): React.ReactElement<any> {
return <div>
- <Attribute label='Type' value='Project' />
+ <Attribute label='Type' value={this.item.groupClass} />
+ {/* Missing attr */}
<Attribute label='Size' value='---' />
- <Attribute label="Location">
- <IconBase icon={IconTypes.FOLDER} />
- Projects
- </Attribute>
- <Attribute label='Owner' value='me' />
- <Attribute label='Last modified' value='5:25 PM 5/23/2018' />
- <Attribute label='Created at' value='1:25 PM 5/23/2018' />
+ <Attribute label='Owner' value={this.item.ownerUuid} />
+ <Attribute label='Last modified' value={formatDate(this.item.modifiedAt)} />
+ <Attribute label='Created at' value={formatDate(this.item.createdAt)} />
+ {/* Missing attr */}
<Attribute label='File size' value='1.4 GB' />
+ <Attribute label='Description' value={this.item.description} />
</div>;
}
}
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index be01e0a..a06b485 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -17,6 +17,10 @@ import { authService } from "./services/services";
import { getProjectList } from "./store/project/project-action";
import { MuiThemeProvider } from '@material-ui/core/styles';
import { CustomTheme } from './common/custom-theme';
+import CommonResourceService from './common/api/common-resource-service';
+import { CollectionResource } from './models/collection';
+import { serverApi } from './common/api/server-api';
+import { ProcessResource } from './models/process';
const history = createBrowserHistory();
@@ -25,6 +29,14 @@ const store = configureStore(history);
store.dispatch(authActions.INIT());
store.dispatch<any>(getProjectList(authService.getUuid()));
+// const service = new CommonResourceService<CollectionResource>(serverApi, "collections");
+// service.create({ ownerUuid: "qr1hi-j7d0g-u55bcc7fa5w7v4p", name: "Collection 1 short title"});
+// service.create({ ownerUuid: "qr1hi-j7d0g-u55bcc7fa5w7v4p", name: "Collection 2 long long long title"});
+
+// const processService = new CommonResourceService<ProcessResource>(serverApi, "container_requests");
+// processService.create({ ownerUuid: "qr1hi-j7d0g-u55bcc7fa5w7v4p", name: "Process 1 short title"});
+// processService.create({ ownerUuid: "qr1hi-j7d0g-u55bcc7fa5w7v4p", name: "Process 2 long long long title" });
+
const App = () =>
<MuiThemeProvider theme={CustomTheme}>
<Provider store={store}>
diff --git a/src/views-components/details-panel/details-panel.tsx b/src/views-components/details-panel/details-panel.tsx
index 15ca8f3..fe49457 100644
--- a/src/views-components/details-panel/details-panel.tsx
+++ b/src/views-components/details-panel/details-panel.tsx
@@ -21,7 +21,7 @@ import IconBase, { IconTypes } from '../../components/icon/icon';
import { ProcessResource } from '../../models/process';
import DetailsPanelFactory from '../../components/details-panel-factory/details-panel-factory';
import AbstractItem from '../../components/details-panel-factory/items/abstract-item';
-import { ResourceKind } from '../../models/resource';
+import { ResourceKind, Resource } from '../../models/resource';
import { EmptyResource } from '../../models/empty';
export interface DetailsPanelDataProps {
@@ -53,8 +53,8 @@ class DetailsPanel extends React.Component<DetailsPanelProps, {}> {
<Typography component="div" className={classnames([classes.container, { [classes.opened]: isOpened }])}>
<Drawer variant="permanent" anchor="right" classes={{ paper: classes.drawerPaper }}>
<Typography component="div" className={classes.headerContainer}>
- <Grid container wrap="nowrap" alignItems='center' justify='space-around'>
- <Grid item>
+ <Grid container alignItems='center' justify='space-around'>
+ <Grid item xs={2}>
<IconBase className={classes.headerIcon} icon={item.getIcon()} />
</Grid>
<Grid item xs={8}>
@@ -127,7 +127,7 @@ const getItem = (res: DetailsPanelResource) => {
};
const getDefaultItem = () => {
- return DetailsPanelFactory.createItem({ kind: ResourceKind.UNKNOWN, name: 'Projects'});
+ return DetailsPanelFactory.createItem({ kind: ResourceKind.UNKNOWN, name: 'Projects' } as EmptyResource);
};
const mapStateToProps = ({ detailsPanel }: RootState) => {
diff --git a/src/views/project-panel/project-panel.tsx b/src/views/project-panel/project-panel.tsx
index 0b1be09..00ac729 100644
--- a/src/views/project-panel/project-panel.tsx
+++ b/src/views/project-panel/project-panel.tsx
@@ -15,6 +15,7 @@ import { ResourceKind } from '../../models/kinds';
import { DataTableFilterItem } from '../../components/data-table-filters/data-table-filters';
import { ContainerRequestState } from '../../models/container-request';
import { SortDirection } from '../../components/data-table/data-column';
+import { resourceLabel } from '../../common/labels';
export const PROJECT_PANEL_ID = "projectPanel";
@@ -120,24 +121,9 @@ const renderOwner = (owner: string) =>
{owner}
</Typography>;
-
-
-const typeToLabel = (type: string) => {
- switch (type) {
- case ResourceKind.Collection:
- return "Data collection";
- case ResourceKind.Project:
- return "Project";
- case ResourceKind.Process:
- return "Process";
- default:
- return "Unknown";
- }
-};
-
const renderType = (type: string) => {
return <Typography noWrap>
- {typeToLabel(type)}
+ {resourceLabel(type)}
</Typography>;
};
@@ -184,15 +170,15 @@ export const columns: DataColumns<ProjectPanelItem, ProjectPanelFilter> = [{
name: ProjectPanelColumnNames.Type,
selected: true,
filters: [{
- name: typeToLabel(ResourceKind.Collection),
+ name: resourceLabel(ResourceKind.Collection),
selected: true,
type: ResourceKind.Collection
}, {
- name: typeToLabel(ResourceKind.Process),
+ name: resourceLabel(ResourceKind.Process),
selected: true,
type: ResourceKind.Process
}, {
- name: typeToLabel(ResourceKind.Project),
+ name: resourceLabel(ResourceKind.Project),
selected: true,
type: ResourceKind.Project
}],
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list