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 { Grid, Typography, Button, StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
   8 import { formatDate, formatFileSize } from '../../common/formatters';
   9 import DataExplorer from "../../views-components/data-explorer/data-explorer";
  10 import { DispatchProp, connect } from 'react-redux';
  11 import { DataColumns } from '../../components/data-table/data-table';
  12 import { RouteComponentProps } from 'react-router';
  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 } from '../../models/resource';
  18 import { resourceLabel } from '../../common/labels';
  19
  20 export const PROJECT_PANEL_ID = "projectPanel";
  21
  22 export interface ProjectPanelFilter extends DataTableFilterItem {
  23     type: ResourceKind | ContainerRequestState;
  24 }
  25
  26 type ProjectPanelProps = {
  27     currentItemId: string,
  28     onItemClick: (item: ProjectPanelItem) => void,
  29     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: ProjectPanelItem) => void;
  30     onDialogOpen: (ownerUuid: string) => void;
  31     onItemDoubleClick: (item: ProjectPanelItem) => void,
  32     onItemRouteChange: (itemId: string) => void
  33 }
  34     & DispatchProp
  35     & WithStyles<CssRules>
  36     & RouteComponentProps<{ id: string }>;
  37
  38 class ProjectPanel extends React.Component<ProjectPanelProps> {
  39     render() {
  40         const { classes, currentItemId, onItemClick, onItemDoubleClick, onContextMenu, onDialogOpen } = this.props;
  41         return <div>
  42             <div className={classes.toolbar}>
  43                 <Button color="primary" variant="raised" className={classes.button}>
  44                     Create a collection
  45                 </Button>
  46                 <Button color="primary" variant="raised" className={classes.button}>
  47                     Run a process
  48                 </Button>
  49                 <Button color="primary" onClick={this.handleNewProjectClick} variant="raised" className={classes.button}>
  50                     New project
  51                 </Button>
  52             </div>
  53             <DataExplorer
  54                 id={PROJECT_PANEL_ID}
  55                 onRowClick={this.props.onItemClick}
  56                 onRowDoubleClick={this.props.onItemDoubleClick}
  57                 onContextMenu={this.props.onContextMenu}
  58                 extractKey={(item: ProjectPanelItem) => item.uuid} />
  59         </div>;
  60     }
  61
  62     handleNewProjectClick = () => {
  63         this.props.onDialogOpen(this.props.currentItemId);
  64     }
  65     componentWillReceiveProps({ match, currentItemId, onItemRouteChange }: ProjectPanelProps) {
  66         if (match.params.id !== currentItemId) {
  67             onItemRouteChange(match.params.id);
  68         }
  69     }
  70 }
  71
  72 type CssRules = "toolbar" | "button";
  73
  74 const styles: StyleRulesCallback<CssRules> = theme => ({
  75     toolbar: {
  76         paddingBottom: theme.spacing.unit * 3,
  77         textAlign: "right"
  78     },
  79     button: {
  80         marginLeft: theme.spacing.unit
  81     },
  82 });
  83
  84 const renderName = (item: ProjectPanelItem) =>
  85     <Grid
  86         container
  87         alignItems="center"
  88         wrap="nowrap"
  89         spacing={16}>
  90         <Grid item>
  91             {renderIcon(item)}
  92         </Grid>
  93         <Grid item>
  94             <Typography color="primary">
  95                 {item.name}
  96             </Typography>
  97         </Grid>
  98     </Grid>;
  99
 100
 101 const renderIcon = (item: ProjectPanelItem) => {
 102     switch (item.kind) {
 103         case ResourceKind.Project:
 104             return <i className="fas fa-folder fa-lg" />;
 105         case ResourceKind.Collection:
 106             return <i className="fas fa-archive fa-lg" />;
 107         case ResourceKind.Process:
 108             return <i className="fas fa-cogs fa-lg" />;
 109         default:
 110             return <i />;
 111     }
 112 };
 113
 114 const renderDate = (date: string) =>
 115     <Typography noWrap>
 116         {formatDate(date)}
 117     </Typography>;
 118
 119 const renderFileSize = (fileSize?: number) =>
 120     <Typography noWrap>
 121         {formatFileSize(fileSize)}
 122     </Typography>;
 123
 124 const renderOwner = (owner: string) =>
 125     <Typography noWrap color="primary">
 126         {owner}
 127     </Typography>;
 128
 129 const renderType = (type: string) => {
 130     return <Typography noWrap>
 131         {resourceLabel(type)}
 132     </Typography>;
 133 };
 134
 135 const renderStatus = (item: ProjectPanelItem) =>
 136     <Typography noWrap align="center">
 137         {item.status || "-"}
 138     </Typography>;
 139
 140 export enum ProjectPanelColumnNames {
 141     Name = "Name",
 142     Status = "Status",
 143     Type = "Type",
 144     Owner = "Owner",
 145     FileSize = "File size",
 146     LastModified = "Last modified"
 147
 148 }
 149
 150 export const columns: DataColumns<ProjectPanelItem, ProjectPanelFilter> = [{
 151     name: ProjectPanelColumnNames.Name,
 152     selected: true,
 153     sortDirection: SortDirection.Asc,
 154     render: renderName,
 155     width: "450px"
 156 }, {
 157     name: "Status",
 158     selected: true,
 159     filters: [{
 160         name: ContainerRequestState.Committed,
 161         selected: true,
 162         type: ContainerRequestState.Committed
 163     }, {
 164         name: ContainerRequestState.Final,
 165         selected: true,
 166         type: ContainerRequestState.Final
 167     }, {
 168         name: ContainerRequestState.Uncommitted,
 169         selected: true,
 170         type: ContainerRequestState.Uncommitted
 171     }],
 172     render: renderStatus,
 173     width: "75px"
 174 }, {
 175     name: ProjectPanelColumnNames.Type,
 176     selected: true,
 177     filters: [{
 178         name: resourceLabel(ResourceKind.Collection),
 179         selected: true,
 180         type: ResourceKind.Collection
 181     }, {
 182         name: resourceLabel(ResourceKind.Process),
 183         selected: true,
 184         type: ResourceKind.Process
 185     }, {
 186         name: resourceLabel(ResourceKind.Project),
 187         selected: true,
 188         type: ResourceKind.Project
 189     }],
 190     render: item => renderType(item.kind),
 191     width: "125px"
 192 }, {
 193     name: ProjectPanelColumnNames.Owner,
 194     selected: true,
 195     render: item => renderOwner(item.owner),
 196     width: "200px"
 197 }, {
 198     name: ProjectPanelColumnNames.FileSize,
 199     selected: true,
 200     render: item => renderFileSize(item.fileSize),
 201     width: "50px"
 202 }, {
 203     name: ProjectPanelColumnNames.LastModified,
 204     selected: true,
 205     sortDirection: SortDirection.None,
 206     render: item => renderDate(item.lastModified),
 207     width: "150px"
 208 }];
 209
 210
 211 export default withStyles(styles)(
 212     connect((state: RootState) => ({ currentItemId: state.projects.currentItemId }))(
 213         ProjectPanel));