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 React from 'react';
   6 import withStyles from "@material-ui/core/styles/withStyles";
   7 import { DispatchProp, connect } from 'react-redux';
   8 import { RouteComponentProps } from 'react-router';
   9 import { StyleRulesCallback, WithStyles } from "@material-ui/core";
  10
  11 import { DataExplorer } from "views-components/data-explorer/data-explorer";
  12 import { DataColumns } from 'components/data-table/data-table';
  13 import { RootState } from 'store/store';
  14 import { DataTableFilterItem } from 'components/data-table-filters/data-table-filters';
  15 import { ContainerRequestState } from 'models/container-request';
  16 import { SortDirection } from 'components/data-table/data-column';
  17 import { ResourceKind, Resource } from 'models/resource';
  18 import {
  19     ResourceFileSize,
  20     ResourceLastModifiedDate,
  21     ProcessStatus,
  22     ResourceType,
  23     ResourceOwner
  24 } from 'views-components/data-explorer/renderers';
  25 import { ProjectIcon } from 'components/icon/icon';
  26 import { ResourceName } from 'views-components/data-explorer/renderers';
  27 import {
  28     ResourcesState,
  29     getResource
  30 } from 'store/resources/resources';
  31 import { loadDetailsPanel } from 'store/details-panel/details-panel-action';
  32 import {
  33     openContextMenu,
  34     resourceUuidToContextMenuKind
  35 } from 'store/context-menu/context-menu-actions';
  36 import { navigateTo } from 'store/navigation/navigation-action';
  37 import { getProperty } from 'store/properties/properties';
  38 import { PROJECT_PANEL_CURRENT_UUID } from 'store/project-panel/project-panel-action';
  39 import { DataTableDefaultView } from 'components/data-table-default-view/data-table-default-view';
  40 import { ArvadosTheme } from "common/custom-theme";
  41 import { createTree } from 'models/tree';
  42 import {
  43     getInitialResourceTypeFilters,
  44     getInitialProcessStatusFilters
  45 } from 'store/resource-type-filters/resource-type-filters';
  46 import { GroupContentsResource } from 'services/groups-service/groups-service';
  47 import { GroupClass, GroupResource } from 'models/group';
  48 import { CollectionResource } from 'models/collection';
  49
  50 type CssRules = 'root' | "button";
  51
  52 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  53     root: {
  54         position: 'relative',
  55         width: '100%',
  56         height: '100%'
  57     },
  58     button: {
  59         marginLeft: theme.spacing.unit
  60     },
  61 });
  62
  63 export enum ProjectPanelColumnNames {
  64     NAME = "Name",
  65     STATUS = "Status",
  66     TYPE = "Type",
  67     OWNER = "Owner",
  68     FILE_SIZE = "File size",
  69     LAST_MODIFIED = "Last modified"
  70 }
  71
  72 export interface ProjectPanelFilter extends DataTableFilterItem {
  73     type: ResourceKind | ContainerRequestState;
  74 }
  75
  76 export const projectPanelColumns: DataColumns<string> = [
  77     {
  78         name: ProjectPanelColumnNames.NAME,
  79         selected: true,
  80         configurable: true,
  81         sortDirection: SortDirection.NONE,
  82         filters: createTree(),
  83         render: uuid => <ResourceName uuid={uuid} />
  84     },
  85     {
  86         name: "Status",
  87         selected: true,
  88         configurable: true,
  89         mutuallyExclusiveFilters: true,
  90         filters: getInitialProcessStatusFilters(),
  91         render: uuid => <ProcessStatus uuid={uuid} />,
  92     },
  93     {
  94         name: ProjectPanelColumnNames.TYPE,
  95         selected: true,
  96         configurable: true,
  97         filters: getInitialResourceTypeFilters(),
  98         render: uuid => <ResourceType uuid={uuid} />
  99     },
 100     {
 101         name: ProjectPanelColumnNames.OWNER,
 102         selected: false,
 103         configurable: true,
 104         filters: createTree(),
 105         render: uuid => <ResourceOwner uuid={uuid} />
 106     },
 107     {
 108         name: ProjectPanelColumnNames.FILE_SIZE,
 109         selected: true,
 110         configurable: true,
 111         filters: createTree(),
 112         render: uuid => <ResourceFileSize uuid={uuid} />
 113     },
 114     {
 115         name: ProjectPanelColumnNames.LAST_MODIFIED,
 116         selected: true,
 117         configurable: true,
 118         sortDirection: SortDirection.DESC,
 119         filters: createTree(),
 120         render: uuid => <ResourceLastModifiedDate uuid={uuid} />
 121     }
 122 ];
 123
 124 export const PROJECT_PANEL_ID = "projectPanel";
 125
 126 const DEFAULT_VIEW_MESSAGES = [
 127     'Your project is empty.',
 128     'Please create a project or create a collection and upload a data.',
 129 ];
 130
 131 interface ProjectPanelDataProps {
 132     currentItemId: string;
 133     resources: ResourcesState;
 134     isAdmin: boolean;
 135     userUuid: string;
 136 }
 137
 138 type ProjectPanelProps = ProjectPanelDataProps & DispatchProp
 139     & WithStyles<CssRules> & RouteComponentProps<{ id: string }>;
 140
 141 export const ProjectPanel = withStyles(styles)(
 142     connect((state: RootState) => ({
 143         currentItemId: getProperty(PROJECT_PANEL_CURRENT_UUID)(state.properties),
 144         resources: state.resources,
 145         userUuid: state.auth.user!.uuid,
 146     }))(
 147         class extends React.Component<ProjectPanelProps> {
 148             render() {
 149                 const { classes } = this.props;
 150                 return <div className={classes.root}>
 151                     <DataExplorer
 152                         id={PROJECT_PANEL_ID}
 153                         onRowClick={this.handleRowClick}
 154                         onRowDoubleClick={this.handleRowDoubleClick}
 155                         onContextMenu={this.handleContextMenu}
 156                         contextMenuColumn={true}
 157                         dataTableDefaultView={
 158                             <DataTableDefaultView
 159                                 icon={ProjectIcon}
 160                                 messages={DEFAULT_VIEW_MESSAGES} />
 161                         } />
 162                 </div>;
 163             }
 164
 165             isCurrentItemChild = (resource: Resource) => {
 166                 return resource.ownerUuid === this.props.currentItemId;
 167             }
 168
 169             handleContextMenu = (event: React.MouseEvent<HTMLElement>, resourceUuid: string) => {
 170                 const { resources } = this.props;
 171                 const resource = getResource<GroupContentsResource>(resourceUuid)(resources);
 172                 // When viewing the contents of a filter group, all contents should be treated as read only.
 173                 let readonly = false;
 174                 const project = getResource<GroupResource>(this.props.currentItemId)(resources);
 175                 if (project && project.groupClass === GroupClass.FILTER) {
 176                     readonly = true;
 177                 }
 178
 179                 const menuKind = this.props.dispatch<any>(resourceUuidToContextMenuKind(resourceUuid, readonly));
 180                 if (menuKind && resource) {
 181                     this.props.dispatch<any>(openContextMenu(event, {
 182                         name: resource.name,
 183                         uuid: resource.uuid,
 184                         ownerUuid: resource.ownerUuid,
 185                         isTrashed: ('isTrashed' in resource) ? resource.isTrashed: false,
 186                         kind: resource.kind,
 187                         menuKind,
 188                         description: resource.description,
 189                         storageClassesDesired: (resource as CollectionResource).storageClassesDesired,
 190                     }));
 191                 }
 192                 this.props.dispatch<any>(loadDetailsPanel(resourceUuid));
 193             }
 194
 195             handleRowDoubleClick = (uuid: string) => {
 196                 this.props.dispatch<any>(navigateTo(uuid));
 197             }
 198
 199             handleRowClick = (uuid: string) => {
 200                 this.props.dispatch<any>(loadDetailsPanel(uuid));
 201             }
 202
 203         }
 204     )
 205 );