src/views/project-panel/project-panel.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import { Button, StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
   7 import { DataExplorer } from "~/views-components/data-explorer/data-explorer";
   8 import { DispatchProp, connect } from 'react-redux';
   9 import { DataColumns } from '~/components/data-table/data-table';
  10 import { RouteComponentProps } from 'react-router';
  11 import { RootState } from '~/store/store';
  12 import { DataTableFilterItem } from '~/components/data-table-filters/data-table-filters';
  13 import { ContainerRequestState } from '~/models/container-request';
  14 import { SortDirection } from '~/components/data-table/data-column';
  15 import { ResourceKind } from '~/models/resource';
  16 import { resourceLabel } from '~/common/labels';
  17 import { ArvadosTheme } from '~/common/custom-theme';
  18 import { ResourceFileSize, ResourceLastModifiedDate, ProcessStatus, ResourceType, ResourceOwner } from '~/views-components/data-explorer/renderers';
  19 import { ProjectIcon } from '~/components/icon/icon';
  20 import { ResourceName } from '~/views-components/data-explorer/renderers';
  21 import { ResourcesState, getResource } from '~/store/resources/resources';
  22 import { loadDetailsPanel } from '~/store/details-panel/details-panel-action';
  23 import { resourceKindToContextMenuKind, openContextMenu } from '~/store/context-menu/context-menu-actions';
  24 import { ProjectResource } from '~/models/project';
  25 import { navigateTo } from '~/store/navigation/navigation-action';
  26 import { getProperty } from '~/store/properties/properties';
  27 import { PROJECT_PANEL_CURRENT_UUID } from '~/store/project-panel/project-panel-action';
  28 import { openCollectionCreateDialog } from '../../store/collections/collection-create-actions';
  29 import { openProjectCreateDialog } from '~/store/projects/project-create-actions';
  30
  31 type CssRules = 'root' | "toolbar" | "button";
  32
  33 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  34     root: {
  35         position: 'relative',
  36         width: '100%',
  37         height: '100%'
  38     },
  39     toolbar: {
  40         paddingBottom: theme.spacing.unit * 3,
  41         textAlign: "right"
  42     },
  43     button: {
  44         marginLeft: theme.spacing.unit
  45     },
  46 });
  47
  48 export enum ProjectPanelColumnNames {
  49     NAME = "Name",
  50     STATUS = "Status",
  51     TYPE = "Type",
  52     OWNER = "Owner",
  53     FILE_SIZE = "File size",
  54     LAST_MODIFIED = "Last modified"
  55 }
  56
  57 export interface ProjectPanelFilter extends DataTableFilterItem {
  58     type: ResourceKind | ContainerRequestState;
  59 }
  60
  61 export const projectPanelColumns: DataColumns<string, ProjectPanelFilter> = [
  62     {
  63         name: ProjectPanelColumnNames.NAME,
  64         selected: true,
  65         configurable: true,
  66         sortDirection: SortDirection.ASC,
  67         filters: [],
  68         render: uuid => <ResourceName uuid={uuid} />
  69     },
  70     {
  71         name: "Status",
  72         selected: true,
  73         configurable: true,
  74         filters: [],
  75         render: uuid => <ProcessStatus uuid={uuid} />,
  76     },
  77     {
  78         name: ProjectPanelColumnNames.TYPE,
  79         selected: true,
  80         configurable: true,
  81         filters: [
  82             {
  83                 name: resourceLabel(ResourceKind.COLLECTION),
  84                 selected: true,
  85                 type: ResourceKind.COLLECTION
  86             },
  87             {
  88                 name: resourceLabel(ResourceKind.PROCESS),
  89                 selected: true,
  90                 type: ResourceKind.PROCESS
  91             },
  92             {
  93                 name: resourceLabel(ResourceKind.PROJECT),
  94                 selected: true,
  95                 type: ResourceKind.PROJECT
  96             }
  97         ],
  98         render: uuid => <ResourceType uuid={uuid} />
  99     },
 100     {
 101         name: ProjectPanelColumnNames.OWNER,
 102         selected: true,
 103         configurable: true,
 104         filters: [],
 105         render: uuid => <ResourceOwner uuid={uuid} />
 106     },
 107     {
 108         name: ProjectPanelColumnNames.FILE_SIZE,
 109         selected: true,
 110         configurable: true,
 111         filters: [],
 112         render: uuid => <ResourceFileSize uuid={uuid} />
 113     },
 114     {
 115         name: ProjectPanelColumnNames.LAST_MODIFIED,
 116         selected: true,
 117         configurable: true,
 118         sortDirection: SortDirection.NONE,
 119         filters: [],
 120         render: uuid => <ResourceLastModifiedDate uuid={uuid} />
 121     }
 122 ];
 123
 124 export const PROJECT_PANEL_ID = "projectPanel";
 125
 126 interface ProjectPanelDataProps {
 127     currentItemId: string;
 128     resources: ResourcesState;
 129 }
 130
 131 type ProjectPanelProps = ProjectPanelDataProps & DispatchProp
 132     & WithStyles<CssRules> & RouteComponentProps<{ id: string }>;
 133
 134 export const ProjectPanel = withStyles(styles)(
 135     connect((state: RootState) => ({
 136         currentItemId: getProperty(PROJECT_PANEL_CURRENT_UUID)(state.properties),
 137         resources: state.resources
 138     }))(
 139         class extends React.Component<ProjectPanelProps> {
 140             render() {
 141                 const { classes } = this.props;
 142                 return <div className={classes.root}>
 143                     <div className={classes.toolbar}>
 144                         <Button color="primary" onClick={this.handleNewCollectionClick} variant="raised" className={classes.button}>
 145                             New collection
 146                         </Button>
 147                         <Button color="primary" variant="raised" className={classes.button}>
 148                             Run a process
 149                         </Button>
 150                         <Button color="primary" onClick={this.handleNewProjectClick} variant="raised" className={classes.button}>
 151                             New project
 152                         </Button>
 153                     </div>
 154                     <DataExplorer
 155                         id={PROJECT_PANEL_ID}
 156                         onRowClick={this.handleRowClick}
 157                         onRowDoubleClick={this.handleRowDoubleClick}
 158                         onContextMenu={this.handleContextMenu}
 159                         defaultIcon={ProjectIcon}
 160                         defaultMessages={['Your project is empty.', 'Please create a project or create a collection and upload a data.']}
 161                         contextMenuColumn={true}/>
 162                 </div>;
 163             }
 164
 165             handleNewProjectClick = () => {
 166                 this.props.dispatch<any>(openProjectCreateDialog(this.props.currentItemId));
 167             }
 168
 169             handleNewCollectionClick = () => {
 170                 this.props.dispatch<any>(openCollectionCreateDialog(this.props.currentItemId));
 171             }
 172
 173             handleContextMenu = (event: React.MouseEvent<HTMLElement>, resourceUuid: string) => {
 174                 const menuKind = resourceKindToContextMenuKind(resourceUuid);
 175                 const resource = getResource<ProjectResource>(resourceUuid)(this.props.resources);
 176                 if (menuKind && resource) {
 177                     this.props.dispatch<any>(openContextMenu(event, {
 178                         name: resource.name,
 179                         uuid: resource.uuid,
 180                         ownerUuid: resource.ownerUuid,
 181                         isTrashed: resource.isTrashed,
 182                         kind: resource.kind,
 183                         menuKind
 184                     }));
 185                 }
 186             }
 187
 188             handleRowDoubleClick = (uuid: string) => {
 189                 this.props.dispatch<any>(navigateTo(uuid));
 190             }
 191
 192             handleRowClick = (uuid: string) => {
 193                 this.props.dispatch(loadDetailsPanel(uuid));
 194             }
 195
 196         }
 197     )
 198 );