[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