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 { DataExplorer } from "~/views-components/data-explorer/data-explorer";
   7 import { DispatchProp, connect } from 'react-redux';
   8 import { DataColumns } from '~/components/data-table/data-table';
   9 import { RouteComponentProps } from 'react-router';
  10 import { RootState } from '~/store/store';
  11 import { DataTableFilterItem } from '~/components/data-table-filters/data-table-filters';
  12 import { ContainerRequestState } from '~/models/container-request';
  13 import { SortDirection } from '~/components/data-table/data-column';
  14 import { ResourceKind, Resource } from '~/models/resource';
  15 import { resourceLabel } from '~/common/labels';
  16 import { ResourceFileSize, ResourceLastModifiedDate, ProcessStatus, ResourceType, ResourceOwner } from '~/views-components/data-explorer/renderers';
  17 import { ProjectIcon } from '~/components/icon/icon';
  18 import { ResourceName } from '~/views-components/data-explorer/renderers';
  19 import { ResourcesState, getResource } from '~/store/resources/resources';
  20 import { loadDetailsPanel } from '~/store/details-panel/details-panel-action';
  21 import { resourceKindToContextMenuKind, openContextMenu } from '~/store/context-menu/context-menu-actions';
  22 import { ProjectResource } from '~/models/project';
  23 import { navigateTo } from '~/store/navigation/navigation-action';
  24 import { getProperty } from '~/store/properties/properties';
  25 import { PROJECT_PANEL_CURRENT_UUID } from '~/store/project-panel/project-panel-action';
  26 import { filterResources } from '~/store/resources/resources';
  27 import { PanelDefaultView } from '~/components/panel-default-view/panel-default-view';
  28 import { DataTableDefaultView } from '~/components/data-table-default-view/data-table-default-view';
  29
  30 export enum ProjectPanelColumnNames {
  31     NAME = "Name",
  32     STATUS = "Status",
  33     TYPE = "Type",
  34     OWNER = "Owner",
  35     FILE_SIZE = "File size",
  36     LAST_MODIFIED = "Last modified"
  37 }
  38
  39 export interface ProjectPanelFilter extends DataTableFilterItem {
  40     type: ResourceKind | ContainerRequestState;
  41 }
  42
  43 export const projectPanelColumns: DataColumns<string, ProjectPanelFilter> = [
  44     {
  45         name: ProjectPanelColumnNames.NAME,
  46         selected: true,
  47         configurable: true,
  48         sortDirection: SortDirection.ASC,
  49         filters: [],
  50         render: uuid => <ResourceName uuid={uuid} />
  51     },
  52     {
  53         name: "Status",
  54         selected: true,
  55         configurable: true,
  56         filters: [],
  57         render: uuid => <ProcessStatus uuid={uuid} />,
  58     },
  59     {
  60         name: ProjectPanelColumnNames.TYPE,
  61         selected: true,
  62         configurable: true,
  63         filters: [
  64             {
  65                 name: resourceLabel(ResourceKind.COLLECTION),
  66                 selected: true,
  67                 type: ResourceKind.COLLECTION
  68             },
  69             {
  70                 name: resourceLabel(ResourceKind.PROCESS),
  71                 selected: true,
  72                 type: ResourceKind.PROCESS
  73             },
  74             {
  75                 name: resourceLabel(ResourceKind.PROJECT),
  76                 selected: true,
  77                 type: ResourceKind.PROJECT
  78             }
  79         ],
  80         render: uuid => <ResourceType uuid={uuid} />
  81     },
  82     {
  83         name: ProjectPanelColumnNames.OWNER,
  84         selected: true,
  85         configurable: true,
  86         filters: [],
  87         render: uuid => <ResourceOwner uuid={uuid} />
  88     },
  89     {
  90         name: ProjectPanelColumnNames.FILE_SIZE,
  91         selected: true,
  92         configurable: true,
  93         filters: [],
  94         render: uuid => <ResourceFileSize uuid={uuid} />
  95     },
  96     {
  97         name: ProjectPanelColumnNames.LAST_MODIFIED,
  98         selected: true,
  99         configurable: true,
 100         sortDirection: SortDirection.NONE,
 101         filters: [],
 102         render: uuid => <ResourceLastModifiedDate uuid={uuid} />
 103     }
 104 ];
 105
 106 export const PROJECT_PANEL_ID = "projectPanel";
 107
 108 interface ProjectPanelDataProps {
 109     currentItemId: string;
 110     resources: ResourcesState;
 111 }
 112
 113 type ProjectPanelProps = ProjectPanelDataProps & DispatchProp & RouteComponentProps<{ id: string }>;
 114
 115 export const ProjectPanel = connect((state: RootState) => ({
 116         currentItemId: getProperty(PROJECT_PANEL_CURRENT_UUID)(state.properties),
 117         resources: state.resources
 118     }))(
 119         class extends React.Component<ProjectPanelProps> {
 120             render() {
 121                 return this.hasAnyItems()
 122                     ? <DataExplorer
 123                         id={PROJECT_PANEL_ID}
 124                         onRowClick={this.handleRowClick}
 125                         onRowDoubleClick={this.handleRowDoubleClick}
 126                         onContextMenu={this.handleContextMenu}
 127                         contextMenuColumn={true}
 128                         dataTableDefaultView={<DataTableDefaultView icon={ProjectIcon}/>} />
 129                     : <PanelDefaultView
 130                         icon={ProjectIcon}
 131                         messages={['Your project is empty.', 'Please create a project or create a collection and upload a data.']} />;
 132             }
 133
 134             hasAnyItems = () => {
 135                 const resources = filterResources(this.isCurrentItemChild)(this.props.resources);
 136                 return resources.length > 0;
 137             }
 138
 139             isCurrentItemChild = (resource: Resource) => {
 140                 return resource.ownerUuid === this.props.currentItemId;
 141             }
 142
 143             handleContextMenu = (event: React.MouseEvent<HTMLElement>, resourceUuid: string) => {
 144                 const menuKind = resourceKindToContextMenuKind(resourceUuid);
 145                 const resource = getResource<ProjectResource>(resourceUuid)(this.props.resources);
 146                 if (menuKind && resource) {
 147                     this.props.dispatch<any>(openContextMenu(event, {
 148                         name: resource.name,
 149                         uuid: resource.uuid,
 150                         ownerUuid: resource.ownerUuid,
 151                         isTrashed: resource.isTrashed,
 152                         kind: resource.kind,
 153                         menuKind
 154                     }));
 155                 }
 156             }
 157
 158             handleRowDoubleClick = (uuid: string) => {
 159                 this.props.dispatch<any>(navigateTo(uuid));
 160             }
 161
 162             handleRowClick = (uuid: string) => {
 163                 this.props.dispatch(loadDetailsPanel(uuid));
 164             }
 165
 166         }
 167     );