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