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={() => onDialogOpen(currentItemId)} 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     componentWillReceiveProps({ match, currentItemId, onItemRouteChange }: ProjectPanelProps) {
  63         if (match.params.id !== currentItemId) {
  64             onItemRouteChange(match.params.id);
  65         }
  66     }
  67 }
  68
  69 type CssRules = "toolbar" | "button";
  70
  71 const styles: StyleRulesCallback<CssRules> = theme => ({
  72     toolbar: {
  73         paddingBottom: theme.spacing.unit * 3,
  74         textAlign: "right"
  75     },
  76     button: {
  77         marginLeft: theme.spacing.unit
  78     },
  79 });
  80
  81 const renderName = (item: ProjectPanelItem) =>
  82     <Grid
  83         container
  84         alignItems="center"
  85         wrap="nowrap"
  86         spacing={16}>
  87         <Grid item>
  88             {renderIcon(item)}
  89         </Grid>
  90         <Grid item>
  91             <Typography color="primary">
  92                 {item.name}
  93             </Typography>
  94         </Grid>
  95     </Grid>;
  96
  97
  98 const renderIcon = (item: ProjectPanelItem) => {
  99     switch (item.kind) {
 100         case ResourceKind.Project:
 101             return <i className="fas fa-folder fa-lg" />;
 102         case ResourceKind.Collection:
 103             return <i className="fas fa-archive fa-lg" />;
 104         case ResourceKind.Process:
 105             return <i className="fas fa-cogs fa-lg" />;
 106         default:
 107             return <i />;
 108     }
 109 };
 110
 111 const renderDate = (date: string) =>
 112     <Typography noWrap>
 113         {formatDate(date)}
 114     </Typography>;
 115
 116 const renderFileSize = (fileSize?: number) =>
 117     <Typography noWrap>
 118         {formatFileSize(fileSize)}
 119     </Typography>;
 120
 121 const renderOwner = (owner: string) =>
 122     <Typography noWrap color="primary">
 123         {owner}
 124     </Typography>;
 125
 126 const renderType = (type: string) => {
 127     return <Typography noWrap>
 128         {resourceLabel(type)}
 129     </Typography>;
 130 };
 131
 132 const renderStatus = (item: ProjectPanelItem) =>
 133     <Typography noWrap align="center">
 134         {item.status || "-"}
 135     </Typography>;
 136
 137 export enum ProjectPanelColumnNames {
 138     Name = "Name",
 139     Status = "Status",
 140     Type = "Type",
 141     Owner = "Owner",
 142     FileSize = "File size",
 143     LastModified = "Last modified"
 144
 145 }
 146
 147 export const columns: DataColumns<ProjectPanelItem, ProjectPanelFilter> = [{
 148     name: ProjectPanelColumnNames.Name,
 149     selected: true,
 150     sortDirection: SortDirection.Asc,
 151     render: renderName,
 152     width: "450px"
 153 }, {
 154     name: "Status",
 155     selected: true,
 156     filters: [{
 157         name: ContainerRequestState.Committed,
 158         selected: true,
 159         type: ContainerRequestState.Committed
 160     }, {
 161         name: ContainerRequestState.Final,
 162         selected: true,
 163         type: ContainerRequestState.Final
 164     }, {
 165         name: ContainerRequestState.Uncommitted,
 166         selected: true,
 167         type: ContainerRequestState.Uncommitted
 168     }],
 169     render: renderStatus,
 170     width: "75px"
 171 }, {
 172     name: ProjectPanelColumnNames.Type,
 173     selected: true,
 174     filters: [{
 175         name: resourceLabel(ResourceKind.Collection),
 176         selected: true,
 177         type: ResourceKind.Collection
 178     }, {
 179         name: resourceLabel(ResourceKind.Process),
 180         selected: true,
 181         type: ResourceKind.Process
 182     }, {
 183         name: resourceLabel(ResourceKind.Project),
 184         selected: true,
 185         type: ResourceKind.Project
 186     }],
 187     render: item => renderType(item.kind),
 188     width: "125px"
 189 }, {
 190     name: ProjectPanelColumnNames.Owner,
 191     selected: true,
 192     render: item => renderOwner(item.owner),
 193     width: "200px"
 194 }, {
 195     name: ProjectPanelColumnNames.FileSize,
 196     selected: true,
 197     render: item => renderFileSize(item.fileSize),
 198     width: "50px"
 199 }, {
 200     name: ProjectPanelColumnNames.LastModified,
 201     selected: true,
 202     sortDirection: SortDirection.None,
 203     render: item => renderDate(item.lastModified),
 204     width: "150px"
 205 }];
 206
 207
 208 export default withStyles(styles)(
 209     connect((state: RootState) => ({ currentItemId: state.projects.currentItemId }))(
 210         ProjectPanel));