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