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