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