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 import { SortDirection } from '../../components/data-table/data-column';
  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     onItemRouteChange: (itemId: string) => void
  30 }
  31     & DispatchProp
  32     & WithStyles<CssRules>
  33     & RouteComponentProps<{ id: string }>;
  34 class ProjectPanel extends React.Component<ProjectPanelProps> {
  35     render() {
  36         return <div>
  37             <div className={this.props.classes.toolbar}>
  38                 <Button color="primary" variant="raised" className={this.props.classes.button}>
  39                     Create a collection
  40                 </Button>
  41                 <Button color="primary" variant="raised" className={this.props.classes.button}>
  42                     Run a process
  43                 </Button>
  44                 <Button color="primary" variant="raised" className={this.props.classes.button}>
  45                     Create a project
  46                 </Button>
  47             </div>
  48             <DataExplorer
  49                 id={PROJECT_PANEL_ID}
  50                 contextActions={contextMenuActions}
  51                 onRowClick={this.props.onItemClick}
  52                 onContextAction={this.executeAction} />;
  53         </div>;
  54     }
  55
  56     componentWillReceiveProps({ match, currentItemId }: ProjectPanelProps) {
  57         if (match.params.id !== currentItemId) {
  58             this.props.onItemRouteChange(match.params.id);
  59         }
  60     }
  61
  62     executeAction = (action: ContextMenuAction, item: ProjectPanelItem) => {
  63         alert(`Executing ${action.name} on ${item.name}`);
  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         case ResourceKind.Workflow:
 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
 127
 128 const typeToLabel = (type: string) => {
 129     switch (type) {
 130         case ResourceKind.Collection:
 131             return "Data collection";
 132         case ResourceKind.Project:
 133             return "Project";
 134         case ResourceKind.Process:
 135             return "Process";
 136         default:
 137             return "Unknown";
 138     }
 139 };
 140
 141 const renderType = (type: string) => {
 142     return <Typography noWrap>
 143         {typeToLabel(type)}
 144     </Typography>;
 145 };
 146
 147 const renderStatus = (item: ProjectPanelItem) =>
 148     <Typography noWrap align="center">
 149         {item.status || "-"}
 150     </Typography>;
 151
 152 export enum ProjectPanelColumnNames {
 153     Name = "Name",
 154     Status = "Status",
 155     Type = "Type",
 156     Owner = "Owner",
 157     FileSize = "File size",
 158     LastModified = "Last modified"
 159
 160 }
 161
 162 export const columns: DataColumns<ProjectPanelItem, ProjectPanelFilter> = [{
 163     name: ProjectPanelColumnNames.Name,
 164     selected: true,
 165     sortDirection: SortDirection.Asc,
 166     render: renderName,
 167     width: "450px"
 168 }, {
 169     name: "Status",
 170     selected: true,
 171     filters: [{
 172         name: ContainerRequestState.Committed,
 173         selected: true,
 174         type: ContainerRequestState.Committed
 175     }, {
 176         name: ContainerRequestState.Final,
 177         selected: true,
 178         type: ContainerRequestState.Final
 179     }, {
 180         name: ContainerRequestState.Uncommitted,
 181         selected: true,
 182         type: ContainerRequestState.Uncommitted
 183     }],
 184     render: renderStatus,
 185     width: "75px"
 186 }, {
 187     name: ProjectPanelColumnNames.Type,
 188     selected: true,
 189     filters: [{
 190         name: typeToLabel(ResourceKind.Collection),
 191         selected: true,
 192         type: ResourceKind.Collection
 193     }, {
 194         name: typeToLabel(ResourceKind.Process),
 195         selected: true,
 196         type: ResourceKind.Process
 197     }, {
 198         name: typeToLabel(ResourceKind.Project),
 199         selected: true,
 200         type: ResourceKind.Project
 201     }],
 202     render: item => renderType(item.kind),
 203     width: "125px"
 204 }, {
 205     name: ProjectPanelColumnNames.Owner,
 206     selected: true,
 207     render: item => renderOwner(item.owner),
 208     width: "200px"
 209 }, {
 210     name: ProjectPanelColumnNames.FileSize,
 211     selected: true,
 212     render: item => renderFileSize(item.fileSize),
 213     width: "50px"
 214 }, {
 215     name: ProjectPanelColumnNames.LastModified,
 216     selected: true,
 217     sortDirection: SortDirection.None,
 218     render: item => renderDate(item.lastModified),
 219     width: "150px"
 220 }];
 221
 222 const contextMenuActions = [[{
 223     icon: "fas fa-users fa-fw",
 224     name: "Share"
 225 }, {
 226     icon: "fas fa-sign-out-alt fa-fw",
 227     name: "Move to"
 228 }, {
 229     icon: "fas fa-star fa-fw",
 230     name: "Add to favourite"
 231 }, {
 232     icon: "fas fa-edit fa-fw",
 233     name: "Rename"
 234 }, {
 235     icon: "fas fa-copy fa-fw",
 236     name: "Make a copy"
 237 }, {
 238     icon: "fas fa-download fa-fw",
 239     name: "Download"
 240 }], [{
 241     icon: "fas fa-trash-alt fa-fw",
 242     name: "Remove"
 243 }
 244 ]];
 245
 246 export default withStyles(styles)(
 247     connect((state: RootState) => ({ currentItemId: state.projects.currentItemId }))(
 248         ProjectPanel));