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