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     ResourceFileCount,
  21     ResourceCreatedAtDate,
  22     ResourceLastModifiedDate,
  23     ResourceTrashDate,
  24     ResourceDeleteDate,
  25     ProcessStatus,
  26     ResourceType,
  27     ResourceUUID,
  28     ResourceOutputUuid,
  29     ResourceProcessUuid,
  30     ResourceProcessState,
  31     ResourceParentProcess,
  32     ResourcePortableDataHash,
  33     ResourceVersion,
  34     ResourceDescription,
  35     ResourceOwnerWithName
  36 } from 'views-components/data-explorer/renderers';
  37 import { ProjectIcon } from 'components/icon/icon';
  38 import { ResourceName } from 'views-components/data-explorer/renderers';
  39 import {
  40     ResourcesState,
  41     getResource
  42 } from 'store/resources/resources';
  43 import { loadDetailsPanel } from 'store/details-panel/details-panel-action';
  44 import {
  45     openContextMenu,
  46     resourceUuidToContextMenuKind
  47 } from 'store/context-menu/context-menu-actions';
  48 import { navigateTo } from 'store/navigation/navigation-action';
  49 import { getProperty } from 'store/properties/properties';
  50 import { PROJECT_PANEL_CURRENT_UUID } from 'store/project-panel/project-panel-action';
  51 import { ArvadosTheme } from "common/custom-theme";
  52 import { createTree } from 'models/tree';
  53 import {
  54     getInitialResourceTypeFilters,
  55     getInitialProcessStatusFilters
  56 } from 'store/resource-type-filters/resource-type-filters';
  57 import { GroupContentsResource } from 'services/groups-service/groups-service';
  58 import { GroupClass, GroupResource } from 'models/group';
  59 import { CollectionResource } from 'models/collection';
  60 import { resourceIsFrozen } from 'common/frozen-resources';
  61
  62 type CssRules = 'root' | "button";
  63
  64 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  65     root: {
  66         width: '100%',
  67     },
  68     button: {
  69         marginLeft: theme.spacing.unit
  70     },
  71 });
  72
  73 export enum ProjectPanelColumnNames {
  74     NAME = "Name",
  75     STATUS = "Status",
  76     TYPE = "Type",
  77     OWNER = "Owner",
  78     FILE_SIZE = "File size",
  79     FILE_COUNT = "File count",
  80     UUID = "UUID",
  81     STATE = 'State',
  82     CONTAINER_UUID = "Container UUID",
  83     OUTPUT_UUID = "Output UUID",
  84     PARENT_PROCESS = 'Parent process',
  85     CREATED_AT = "Date created",
  86     LAST_MODIFIED = "Last modified",
  87     TRASH_AT = "Trash at",
  88     DELETE_AT = "Delete at",
  89     DESCRIPTION = "Description",
  90     PORTABLE_DATA_HASH = "Portable Data Hash",
  91     VERSION = "Version"
  92 }
  93
  94 export interface ProjectPanelFilter extends DataTableFilterItem {
  95     type: ResourceKind | ContainerRequestState;
  96 }
  97
  98 export const projectPanelColumns: DataColumns<string> = [
  99     {
 100         name: ProjectPanelColumnNames.NAME,
 101         selected: true,
 102         configurable: true,
 103         sortDirection: SortDirection.NONE,
 104         filters: createTree(),
 105         render: uuid => <ResourceName uuid={uuid} />
 106     },
 107     {
 108         name: ProjectPanelColumnNames.STATUS,
 109         selected: true,
 110         configurable: true,
 111         mutuallyExclusiveFilters: true,
 112         filters: getInitialProcessStatusFilters(),
 113         render: uuid => <ProcessStatus uuid={uuid} />,
 114     },
 115     {
 116         name: ProjectPanelColumnNames.TYPE,
 117         selected: true,
 118         configurable: true,
 119         filters: getInitialResourceTypeFilters(),
 120         render: uuid => <ResourceType uuid={uuid} />
 121     },
 122     {
 123         name: ProjectPanelColumnNames.OWNER,
 124         selected: false,
 125         configurable: true,
 126         filters: createTree(),
 127         render: uuid => <ResourceOwnerWithName uuid={uuid} />
 128     },
 129     {
 130         name: ProjectPanelColumnNames.FILE_SIZE,
 131         selected: false,
 132         configurable: true,
 133         filters: createTree(),
 134         render: uuid => <ResourceFileSize uuid={uuid} />
 135     },
 136     {
 137         name: ProjectPanelColumnNames.FILE_COUNT,
 138         selected: false,
 139         configurable: true,
 140         filters: createTree(),
 141         render: uuid =><ResourceFileCount uuid={uuid}/>
 142     },
 143     {
 144         name: ProjectPanelColumnNames.UUID,
 145         selected: false,
 146         configurable: true,
 147         filters: createTree(),
 148         render: uuid => <ResourceUUID uuid={uuid}/>
 149     },
 150     {
 151         name: ProjectPanelColumnNames.CONTAINER_UUID,
 152         selected: false,
 153         configurable: true,
 154         filters: createTree(),
 155         render: uuid => <ResourceProcessUuid uuid={uuid}/>
 156     },
 157     {
 158         name: ProjectPanelColumnNames.OUTPUT_UUID,
 159         selected: false,
 160         configurable: true,
 161         filters: createTree(),
 162         render: uuid => <ResourceOutputUuid uuid={uuid}/>
 163     },
 164     {
 165         name: ProjectPanelColumnNames.STATE,
 166         selected: true,
 167         configurable: true,
 168         filters: createTree(),
 169         render: uuid => <ResourceProcessState uuid={uuid}/>
 170     },
 171     {
 172         name: ProjectPanelColumnNames.PARENT_PROCESS,
 173         selected: false,
 174         configurable: true,
 175         filters: createTree(),
 176         render: uuid => <ResourceParentProcess uuid={uuid}/>
 177     },
 178     {
 179         name: ProjectPanelColumnNames.PORTABLE_DATA_HASH,
 180         selected: false,
 181         configurable: true,
 182         filters: createTree(),
 183         render: uuid => <ResourcePortableDataHash uuid={uuid}/>
 184     },
 185     {
 186         name: ProjectPanelColumnNames.CREATED_AT,
 187         selected: false,
 188         configurable: true,
 189         filters: createTree(),
 190         render: uuid =><ResourceCreatedAtDate uuid={uuid}/>
 191     },
 192     {
 193         name: ProjectPanelColumnNames.LAST_MODIFIED,
 194         selected: false,
 195         configurable: true,
 196         sortDirection: SortDirection.DESC,
 197         filters: createTree(),
 198         render: uuid => <ResourceLastModifiedDate uuid={uuid} />
 199     },
 200     {
 201         name: ProjectPanelColumnNames.TRASH_AT,
 202         selected: false,
 203         configurable: true,
 204         sortDirection: SortDirection.DESC,
 205         filters: createTree(),
 206         render: uuid => <ResourceTrashDate uuid={uuid} />
 207     },
 208     {
 209         name: ProjectPanelColumnNames.DELETE_AT,
 210         selected: false,
 211         configurable: true,
 212         sortDirection: SortDirection.DESC,
 213         filters: createTree(),
 214         render: uuid => <ResourceDeleteDate uuid={uuid} />
 215     },
 216     {
 217         name: ProjectPanelColumnNames.DESCRIPTION,
 218         selected: false,
 219         configurable: true,
 220         filters: createTree(),
 221         render: uuid =><ResourceDescription uuid={uuid}/>
 222     },
 223     {
 224         name: ProjectPanelColumnNames.VERSION,
 225         selected: false,
 226         configurable: true,
 227         filters: createTree(),
 228         render: uuid =><ResourceVersion uuid={uuid}/>
 229     }
 230
 231 ];
 232
 233 export const PROJECT_PANEL_ID = "projectPanel";
 234
 235 const DEFAULT_VIEW_MESSAGES = [
 236     'Your project is empty.',
 237     'Please create a project or create a collection and upload a data.',
 238 ];
 239
 240 interface ProjectPanelDataProps {
 241     currentItemId: string;
 242     resources: ResourcesState;
 243     isAdmin: boolean;
 244     userUuid: string;
 245     dataExplorerItems: any;
 246 }
 247
 248 type ProjectPanelProps = ProjectPanelDataProps & DispatchProp
 249     & WithStyles<CssRules> & RouteComponentProps<{ id: string }>;
 250
 251
 252 export const ProjectPanel = withStyles(styles)(
 253     connect((state: RootState) => ({
 254         currentItemId: getProperty(PROJECT_PANEL_CURRENT_UUID)(state.properties),
 255         resources: state.resources,
 256         userUuid: state.auth.user!.uuid
 257     }))(
 258         class extends React.Component<ProjectPanelProps> {
 259             render() {
 260                 const { classes } = this.props;
 261
 262                 return <div data-cy='project-panel' className={classes.root}>
 263                     <DataExplorer
 264                         id={PROJECT_PANEL_ID}
 265                         onRowClick={this.handleRowClick}
 266                         onRowDoubleClick={this.handleRowDoubleClick}
 267                         onContextMenu={this.handleContextMenu}
 268                         contextMenuColumn={true}
 269                         defaultViewIcon={ProjectIcon}
 270                         defaultViewMessages={DEFAULT_VIEW_MESSAGES}
 271                     />
 272                 </div>;
 273             }
 274
 275             isCurrentItemChild = (resource: Resource) => {
 276                 return resource.ownerUuid === this.props.currentItemId;
 277             }
 278
 279             handleContextMenu = (event: React.MouseEvent<HTMLElement>, resourceUuid: string) => {
 280                 const { resources, isAdmin } = this.props;
 281                 const resource = getResource<GroupContentsResource>(resourceUuid)(resources);
 282                 // When viewing the contents of a filter group, all contents should be treated as read only.
 283                 let readonly = false;
 284                 const project = getResource<GroupResource>(this.props.currentItemId)(resources);
 285                 if (project && project.groupClass === GroupClass.FILTER) {
 286                     readonly = true;
 287                 }
 288
 289                 const menuKind = this.props.dispatch<any>(resourceUuidToContextMenuKind(resourceUuid, readonly));
 290                 if (menuKind && resource) {
 291                     this.props.dispatch<any>(openContextMenu(event, {
 292                         name: resource.name,
 293                         uuid: resource.uuid,
 294                         ownerUuid: resource.ownerUuid,
 295                         isTrashed: ('isTrashed' in resource) ? resource.isTrashed : false,
 296                         kind: resource.kind,
 297                         menuKind,
 298                         isAdmin,
 299                         isFrozen: resourceIsFrozen(resource, resources),
 300                         description: resource.description,
 301                         storageClassesDesired: (resource as CollectionResource).storageClassesDesired,
 302                         properties: ('properties' in resource) ? resource.properties : {},
 303                     }));
 304                 }
 305                 this.props.dispatch<any>(loadDetailsPanel(resourceUuid));
 306             }
 307
 308             handleRowDoubleClick = (uuid: string) => {
 309                 this.props.dispatch<any>(navigateTo(uuid));
 310             }
 311
 312             handleRowClick = (uuid: string) => {
 313                 this.props.dispatch<any>(loadDetailsPanel(uuid));
 314             }
 315
 316         }
 317     )
 318 );