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