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 { ProjectPanelItem } from './project-panel-item';
   7 import { Button, StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
   8 import { DataExplorer } from "../../views-components/data-explorer/data-explorer";
   9 import { DispatchProp, connect } from 'react-redux';
  10 import { DataColumns } from '../../components/data-table/data-table';
  11 import { RouteComponentProps } from 'react-router';
  12 import { RootState } from '../../store/store';
  13 import { DataTableFilterItem } from '../../components/data-table-filters/data-table-filters';
  14 import { ContainerRequestState } from '../../models/container-request';
  15 import { SortDirection } from '../../components/data-table/data-column';
  16 import { ResourceKind } from '../../models/resource';
  17 import { resourceLabel } from '../../common/labels';
  18 import { ArvadosTheme } from '../../common/custom-theme';
  19 import { renderName, renderStatus, renderType, renderOwner, renderFileSize, renderDate } from '../../views-components/data-explorer/renderers';
  20 import { restoreBranch } from '../../store/navigation/navigation-action';
  21
  22 type CssRules = "toolbar" | "button";
  23
  24 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  25     toolbar: {
  26         paddingBottom: theme.spacing.unit * 3,
  27         textAlign: "right"
  28     },
  29     button: {
  30         marginLeft: theme.spacing.unit
  31     },
  32 });
  33
  34 export enum ProjectPanelColumnNames {
  35     NAME = "Name",
  36     STATUS = "Status",
  37     TYPE = "Type",
  38     OWNER = "Owner",
  39     FILE_SIZE = "File size",
  40     LAST_MODIFIED = "Last modified"
  41 }
  42
  43 export interface ProjectPanelFilter extends DataTableFilterItem {
  44     type: ResourceKind | ContainerRequestState;
  45 }
  46
  47 export const columns: DataColumns<ProjectPanelItem, ProjectPanelFilter> = [
  48     {
  49         name: ProjectPanelColumnNames.NAME,
  50         selected: true,
  51         configurable: true,
  52         sortDirection: SortDirection.ASC,
  53         render: renderName,
  54         width: "450px"
  55     },
  56     {
  57         name: "Status",
  58         selected: true,
  59         configurable: true,
  60         filters: [
  61             {
  62                 name: ContainerRequestState.COMMITTED,
  63                 selected: true,
  64                 type: ContainerRequestState.COMMITTED
  65             },
  66             {
  67                 name: ContainerRequestState.FINAL,
  68                 selected: true,
  69                 type: ContainerRequestState.FINAL
  70             },
  71             {
  72                 name: ContainerRequestState.UNCOMMITTED,
  73                 selected: true,
  74                 type: ContainerRequestState.UNCOMMITTED
  75             }
  76         ],
  77         render: renderStatus,
  78         width: "75px"
  79     },
  80     {
  81         name: ProjectPanelColumnNames.TYPE,
  82         selected: true,
  83         configurable: true,
  84         filters: [
  85             {
  86                 name: resourceLabel(ResourceKind.COLLECTION),
  87                 selected: true,
  88                 type: ResourceKind.COLLECTION
  89             },
  90             {
  91                 name: resourceLabel(ResourceKind.PROCESS),
  92                 selected: true,
  93                 type: ResourceKind.PROCESS
  94             },
  95             {
  96                 name: resourceLabel(ResourceKind.PROJECT),
  97                 selected: true,
  98                 type: ResourceKind.PROJECT
  99             }
 100         ],
 101         render: item => renderType(item.kind),
 102         width: "125px"
 103     },
 104     {
 105         name: ProjectPanelColumnNames.OWNER,
 106         selected: true,
 107         configurable: true,
 108         render: item => renderOwner(item.owner),
 109         width: "200px"
 110     },
 111     {
 112         name: ProjectPanelColumnNames.FILE_SIZE,
 113         selected: true,
 114         configurable: true,
 115         render: item => renderFileSize(item.fileSize),
 116         width: "50px"
 117     },
 118     {
 119         name: ProjectPanelColumnNames.LAST_MODIFIED,
 120         selected: true,
 121         configurable: true,
 122         sortDirection: SortDirection.NONE,
 123         render: item => renderDate(item.lastModified),
 124         width: "150px"
 125     }
 126 ];
 127
 128 export const PROJECT_PANEL_ID = "projectPanel";
 129
 130 interface ProjectPanelDataProps {
 131     currentItemId: string;
 132 }
 133
 134 interface ProjectPanelActionProps {
 135     onItemClick: (item: ProjectPanelItem) => void;
 136     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: ProjectPanelItem) => void;
 137     onProjectCreationDialogOpen: (ownerUuid: string) => void;
 138     onCollectionCreationDialogOpen: (ownerUuid: string) => void;
 139     onItemDoubleClick: (item: ProjectPanelItem) => void;
 140     onItemRouteChange: (itemId: string) => void;
 141 }
 142
 143 type ProjectPanelProps = ProjectPanelDataProps & ProjectPanelActionProps & DispatchProp
 144     & WithStyles<CssRules> & RouteComponentProps<{ id: string }>;
 145
 146 export const ProjectPanel = withStyles(styles)(
 147     connect((state: RootState) => ({ currentItemId: state.projects.currentItemId }))(
 148         class extends React.Component<ProjectPanelProps> {
 149             render() {
 150                 const { classes } = this.props;
 151                 return <div>
 152                     <div className={classes.toolbar}>
 153                         <Button color="primary" onClick={this.handleNewCollectionClick} variant="raised" className={classes.button}>
 154                             Create a collection
 155                         </Button>
 156                         <Button color="primary" variant="raised" className={classes.button}>
 157                             Run a process
 158                         </Button>
 159                         <Button color="primary" onClick={this.handleNewProjectClick} variant="raised" className={classes.button}>
 160                             New project
 161                         </Button>
 162                     </div>
 163                     <DataExplorer
 164                         id={PROJECT_PANEL_ID}
 165                         columns={columns}
 166                         onRowClick={this.props.onItemClick}
 167                         onRowDoubleClick={this.props.onItemDoubleClick}
 168                         onContextMenu={this.props.onContextMenu}
 169                         extractKey={(item: ProjectPanelItem) => item.uuid} />
 170                 </div>;
 171             }
 172
 173             handleNewProjectClick = () => {
 174                 this.props.onProjectCreationDialogOpen(this.props.currentItemId);
 175             }
 176
 177             handleNewCollectionClick = () => {
 178                 this.props.onCollectionCreationDialogOpen(this.props.currentItemId);
 179             }
 180
 181             componentWillReceiveProps({ match, currentItemId, onItemRouteChange }: ProjectPanelProps) {
 182                 if (match.params.id !== currentItemId) {
 183                     onItemRouteChange(match.params.id);
 184                 }
 185             }
 186
 187             componentDidMount() {
 188                 if (this.props.match.params.id && this.props.currentItemId === '') {
 189                     this.props.dispatch<any>(restoreBranch(this.props.match.params.id));
 190                 }
 191             }
 192         }
 193     )
 194 );