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 } 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, getResource } 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 }
 119
 120 type ProjectPanelProps = ProjectPanelDataProps & DispatchProp
 121     & WithStyles<CssRules> & RouteComponentProps<{ id: string }>;
 122
 123 export const ProjectPanel = withStyles(styles)(
 124     connect((state: RootState) => ({
 125         currentItemId: getProperty(PROJECT_PANEL_CURRENT_UUID)(state.properties),
 126         resources: state.resources,
 127         isAdmin: state.auth.user!.isAdmin
 128     }))(
 129         class extends React.Component<ProjectPanelProps> {
 130             render() {
 131                 const { classes } = this.props;
 132                 return <div className={classes.root}>
 133                     <DataExplorer
 134                         id={PROJECT_PANEL_ID}
 135                         onRowClick={this.handleRowClick}
 136                         onRowDoubleClick={this.handleRowDoubleClick}
 137                         onContextMenu={this.handleContextMenu}
 138                         contextMenuColumn={true}
 139                         dataTableDefaultView={
 140                             <DataTableDefaultView
 141                                 icon={ProjectIcon}
 142                                 messages={DEFAULT_VIEW_MESSAGES} />
 143                         } />
 144                 </div>;
 145             }
 146
 147             isCurrentItemChild = (resource: Resource) => {
 148                 return resource.ownerUuid === this.props.currentItemId;
 149             }
 150
 151             handleContextMenu = (event: React.MouseEvent<HTMLElement>, resourceUuid: string) => {
 152                 const menuKind = resourceKindToContextMenuKind(resourceUuid, this.props.isAdmin);
 153                 const resource = getResource<ProjectResource>(resourceUuid)(this.props.resources);
 154                 if (menuKind && resource) {
 155                     this.props.dispatch<any>(openContextMenu(event, {
 156                         name: resource.name,
 157                         uuid: resource.uuid,
 158                         ownerUuid: resource.ownerUuid,
 159                         isTrashed: resource.isTrashed,
 160                         kind: resource.kind,
 161                         menuKind
 162                     }));
 163                 }
 164                 this.props.dispatch<any>(loadDetailsPanel(resourceUuid));
 165             }
 166
 167             handleRowDoubleClick = (uuid: string) => {
 168                 this.props.dispatch<any>(navigateTo(uuid));
 169             }
 170
 171             handleRowClick = (uuid: string) => {
 172                 this.props.dispatch(loadDetailsPanel(uuid));
 173             }
 174
 175         }
 176     )
 177 );