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