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 { ContextMenuAction } from '../../components/context-menu/context-menu';
  11 import { DispatchProp, connect } from 'react-redux';
  12 import { DataColumns } from '../../components/data-table/data-table';
  13 import { RouteComponentProps } from 'react-router';
  14 import { RootState } from '../../store/store';
  15 import { ResourceKind } from '../../models/kinds';
  16 import { DataTableFilterItem } from '../../components/data-table-filters/data-table-filters';
  17 import { ContainerRequestState } from '../../models/container-request';
  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 }
  30     & DispatchProp
  31     & WithStyles<CssRules>
  32     & RouteComponentProps<{ id: string }>;
  33 class ProjectPanel extends React.Component<ProjectPanelProps> {
  34     render() {
  35         return <div>
  36             <div className={this.props.classes.toolbar}>
  37                 <Button color="primary" variant="raised" className={this.props.classes.button}>
  38                     Create a collection
  39                 </Button>
  40                 <Button color="primary" variant="raised" className={this.props.classes.button}>
  41                     Run a process
  42                 </Button>
  43                 <Button color="primary" variant="raised" className={this.props.classes.button}>
  44                     Create a project
  45                 </Button>
  46             </div>
  47             <DataExplorer
  48                 id={PROJECT_PANEL_ID}
  49                 contextActions={contextMenuActions}
  50                 onRowClick={this.props.onItemClick}
  51                 onContextAction={this.executeAction} />;
  52         </div>;
  53     }
  54
  55     componentWillReceiveProps({ match, currentItemId }: ProjectPanelProps) {
  56         if (match.params.id !== currentItemId) {
  57             this.props.onItemRouteChange(match.params.id);
  58         }
  59     }
  60
  61     executeAction = (action: ContextMenuAction, item: ProjectPanelItem) => {
  62         alert(`Executing ${action.name} on ${item.name}`);
  63     }
  64
  65 }
  66
  67 type CssRules = "toolbar" | "button";
  68
  69 const styles: StyleRulesCallback<CssRules> = theme => ({
  70     toolbar: {
  71         paddingBottom: theme.spacing.unit * 3,
  72         textAlign: "right"
  73     },
  74     button: {
  75         marginLeft: theme.spacing.unit
  76     }
  77 });
  78
  79 const renderName = (item: ProjectPanelItem) =>
  80     <Grid
  81         container
  82         alignItems="center"
  83         wrap="nowrap"
  84         spacing={16}>
  85         <Grid item>
  86             {renderIcon(item)}
  87         </Grid>
  88         <Grid item>
  89             <Typography color="primary">
  90                 {item.name}
  91             </Typography>
  92         </Grid>
  93     </Grid>;
  94
  95
  96 const renderIcon = (item: ProjectPanelItem) => {
  97     switch (item.kind) {
  98         case ResourceKind.Project:
  99             return <i className="fas fa-folder fa-lg" />;
 100         case ResourceKind.Collection:
 101             return <i className="fas fa-archive fa-lg" />;
 102         case ResourceKind.Process:
 103         case ResourceKind.Workflow:
 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
 126
 127 const typeToLabel = (type: string) => {
 128     switch (type) {
 129         case ResourceKind.Collection:
 130             return "Data collection";
 131         case ResourceKind.Project:
 132             return "Project";
 133         case ResourceKind.Process:
 134             return "Process";
 135         default:
 136             return "Unknown";
 137     }
 138 };
 139
 140 const renderType = (type: string) => {
 141     return <Typography noWrap>
 142         {typeToLabel(type)}
 143     </Typography>;
 144 };
 145
 146 const renderStatus = (item: ProjectPanelItem) =>
 147     <Typography noWrap align="center">
 148         {item.status || "-"}
 149     </Typography>;
 150
 151
 152
 153 export const columns: DataColumns<ProjectPanelItem, ProjectPanelFilter> = [{
 154     name: "Name",
 155     selected: true,
 156     sortDirection: "desc",
 157     render: renderName,
 158     width: "450px"
 159 }, {
 160     name: "Status",
 161     selected: true,
 162     filters: [{
 163         name: ContainerRequestState.Committed,
 164         selected: true,
 165         type: ContainerRequestState.Committed
 166     }, {
 167         name: ContainerRequestState.Final,
 168         selected: true,
 169         type: ContainerRequestState.Final
 170     }, {
 171         name: ContainerRequestState.Uncommitted,
 172         selected: true,
 173         type: ContainerRequestState.Uncommitted
 174     }],
 175     render: renderStatus,
 176     width: "75px"
 177 }, {
 178     name: "Type",
 179     selected: true,
 180     filters: [{
 181         name: typeToLabel(ResourceKind.Collection),
 182         selected: true,
 183         type: ResourceKind.Collection
 184     }, {
 185         name: typeToLabel(ResourceKind.Process),
 186         selected: true,
 187         type: ResourceKind.Process
 188     }, {
 189         name: typeToLabel(ResourceKind.Project),
 190         selected: true,
 191         type: ResourceKind.Project
 192     }],
 193     render: item => renderType(item.kind),
 194     width: "125px"
 195 }, {
 196     name: "Owner",
 197     selected: true,
 198     render: item => renderOwner(item.owner),
 199     width: "200px"
 200 }, {
 201     name: "File size",
 202     selected: true,
 203     render: item => renderFileSize(item.fileSize),
 204     width: "50px"
 205 }, {
 206     name: "Last modified",
 207     selected: true,
 208     sortDirection: "none",
 209     render: item => renderDate(item.lastModified),
 210     width: "150px"
 211 }];
 212
 213 const contextMenuActions = [[{
 214     icon: "fas fa-users fa-fw",
 215     name: "Share"
 216 }, {
 217     icon: "fas fa-sign-out-alt fa-fw",
 218     name: "Move to"
 219 }, {
 220     icon: "fas fa-star fa-fw",
 221     name: "Add to favourite"
 222 }, {
 223     icon: "fas fa-edit fa-fw",
 224     name: "Rename"
 225 }, {
 226     icon: "fas fa-copy fa-fw",
 227     name: "Make a copy"
 228 }, {
 229     icon: "fas fa-download fa-fw",
 230     name: "Download"
 231 }], [{
 232     icon: "fas fa-trash-alt fa-fw",
 233     name: "Remove"
 234 }
 235 ]];
 236
 237 export default withStyles(styles)(
 238     connect((state: RootState) => ({ currentItemId: state.projects.currentItemId }))(
 239         ProjectPanel));