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         width: "450px"
  70     },
  71     {
  72         name: "Status",
  73         selected: true,
  74         configurable: true,
  75         sortDirection: SortDirection.NONE,
  76         filters: [
  77             {
  78                 name: ContainerRequestState.COMMITTED,
  79                 selected: true,
  80                 type: ContainerRequestState.COMMITTED
  81             },
  82             {
  83                 name: ContainerRequestState.FINAL,
  84                 selected: true,
  85                 type: ContainerRequestState.FINAL
  86             },
  87             {
  88                 name: ContainerRequestState.UNCOMMITTED,
  89                 selected: true,
  90                 type: ContainerRequestState.UNCOMMITTED
  91             }
  92         ],
  93         render: uuid => <ProcessStatus uuid={uuid} />,
  94         width: "75px"
  95     },
  96     {
  97         name: ProjectPanelColumnNames.TYPE,
  98         selected: true,
  99         configurable: true,
 100         sortDirection: SortDirection.NONE,
 101         filters: [
 102             {
 103                 name: resourceLabel(ResourceKind.COLLECTION),
 104                 selected: true,
 105                 type: ResourceKind.COLLECTION
 106             },
 107             {
 108                 name: resourceLabel(ResourceKind.PROCESS),
 109                 selected: true,
 110                 type: ResourceKind.PROCESS
 111             },
 112             {
 113                 name: resourceLabel(ResourceKind.PROJECT),
 114                 selected: true,
 115                 type: ResourceKind.PROJECT
 116             }
 117         ],
 118         render: uuid => <ResourceType uuid={uuid} />,
 119         width: "125px"
 120     },
 121     {
 122         name: ProjectPanelColumnNames.OWNER,
 123         selected: true,
 124         configurable: true,
 125         sortDirection: SortDirection.NONE,
 126         filters: [],
 127         render: uuid => <ResourceOwner uuid={uuid} />,
 128         width: "200px"
 129     },
 130     {
 131         name: ProjectPanelColumnNames.FILE_SIZE,
 132         selected: true,
 133         configurable: true,
 134         sortDirection: SortDirection.NONE,
 135         filters: [],
 136         render: uuid => <ResourceFileSize uuid={uuid} />,
 137         width: "50px"
 138     },
 139     {
 140         name: ProjectPanelColumnNames.LAST_MODIFIED,
 141         selected: true,
 142         configurable: true,
 143         sortDirection: SortDirection.NONE,
 144         filters: [],
 145         render: uuid => <ResourceLastModifiedDate uuid={uuid} />,
 146         width: "150px"
 147     }
 148 ];
 149
 150 export const PROJECT_PANEL_ID = "projectPanel";
 151
 152 interface ProjectPanelDataProps {
 153     currentItemId: string;
 154     resources: ResourcesState;
 155 }
 156
 157 type ProjectPanelProps = ProjectPanelDataProps & DispatchProp
 158     & WithStyles<CssRules> & RouteComponentProps<{ id: string }>;
 159
 160 export const ProjectPanel = withStyles(styles)(
 161     connect((state: RootState) => ({
 162         currentItemId: getProperty(PROJECT_PANEL_CURRENT_UUID)(state.properties),
 163         resources: state.resources
 164     }))(
 165         class extends React.Component<ProjectPanelProps> {
 166             render() {
 167                 const { classes } = this.props;
 168                 return <div className={classes.root}>
 169                     <div className={classes.toolbar}>
 170                         <Button color="primary" onClick={this.handleNewCollectionClick} variant="raised" className={classes.button}>
 171                             Create a collection
 172                         </Button>
 173                         <Button color="primary" variant="raised" className={classes.button}>
 174                             Run a process
 175                         </Button>
 176                         <Button color="primary" onClick={this.handleNewProjectClick} variant="raised" className={classes.button}>
 177                             New project
 178                         </Button>
 179                     </div>
 180                     <DataExplorer
 181                         id={PROJECT_PANEL_ID}
 182                         onRowClick={this.handleRowClick}
 183                         onRowDoubleClick={this.handleRowDoubleClick}
 184                         onContextMenu={this.handleContextMenu}
 185                         defaultIcon={ProjectIcon}
 186                         defaultMessages={['Your project is empty.', 'Please create a project or create a collection and upload a data.']}
 187                         contextMenuColumn={true}/>
 188                 </div>;
 189             }
 190
 191             handleNewProjectClick = () => {
 192                 this.props.dispatch<any>(openProjectCreateDialog(this.props.currentItemId));
 193             }
 194
 195             handleNewCollectionClick = () => {
 196                 this.props.dispatch<any>(openCollectionCreateDialog(this.props.currentItemId));
 197             }
 198
 199             handleContextMenu = (event: React.MouseEvent<HTMLElement>, resourceUuid: string) => {
 200                 const menuKind = resourceKindToContextMenuKind(resourceUuid);
 201                 const resource = getResource<ProjectResource>(resourceUuid)(this.props.resources);
 202                 if (menuKind && resource) {
 203                     this.props.dispatch<any>(openContextMenu(event, {
 204                         name: resource.name,
 205                         uuid: resource.uuid,
 206                         ownerUuid: resource.ownerUuid,
 207                         isTrashed: resource.isTrashed,
 208                         kind: resource.kind,
 209                         menuKind
 210                     }));
 211                 }
 212             }
 213
 214             handleRowDoubleClick = (uuid: string) => {
 215                 this.props.dispatch<any>(navigateTo(uuid));
 216             }
 217
 218             handleRowClick = (uuid: string) => {
 219                 this.props.dispatch(loadDetailsPanel(uuid));
 220             }
 221
 222         }
 223     )
 224 );