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 { Button, StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
   8 import { DataExplorer } from "../../views-components/data-explorer/data-explorer";
   9 import { DispatchProp, connect } from 'react-redux';
  10 import { DataColumns } from '../../components/data-table/data-table';
  11 import { RouteComponentProps } from 'react-router';
  12 import { RootState } from '../../store/store';
  13 import { DataTableFilterItem } from '../../components/data-table-filters/data-table-filters';
  14 import { ContainerRequestState } from '../../models/container-request';
  15 import { SortDirection } from '../../components/data-table/data-column';
  16 import { ResourceKind } from '../../models/resource';
  17 import { resourceLabel } from '../../common/labels';
  18 import { ArvadosTheme } from '../../common/custom-theme';
  19 import { renderName, renderStatus, renderType, renderOwner, renderFileSize, renderDate } from '../../views-components/data-explorer/renderers';
  20
  21 type CssRules = "toolbar" | "button";
  22
  23 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  24     toolbar: {
  25         paddingBottom: theme.spacing.unit * 3,
  26         textAlign: "right"
  27     },
  28     button: {
  29         marginLeft: theme.spacing.unit
  30     },
  31 });
  32
  33 export enum ProjectPanelColumnNames {
  34     NAME = "Name",
  35     STATUS = "Status",
  36     TYPE = "Type",
  37     OWNER = "Owner",
  38     FILE_SIZE = "File size",
  39     LAST_MODIFIED = "Last modified"
  40 }
  41
  42 export interface ProjectPanelFilter extends DataTableFilterItem {
  43     type: ResourceKind | ContainerRequestState;
  44 }
  45
  46 export const columns: DataColumns<ProjectPanelItem, ProjectPanelFilter> = [
  47     {
  48         name: ProjectPanelColumnNames.NAME,
  49         selected: true,
  50         sortDirection: SortDirection.ASC,
  51         render: renderName,
  52         width: "450px"
  53     },
  54     {
  55         name: "Status",
  56         selected: true,
  57         filters: [
  58             {
  59                 name: ContainerRequestState.COMMITTED,
  60                 selected: true,
  61                 type: ContainerRequestState.COMMITTED
  62             },
  63             {
  64                 name: ContainerRequestState.FINAL,
  65                 selected: true,
  66                 type: ContainerRequestState.FINAL
  67             },
  68             {
  69                 name: ContainerRequestState.UNCOMMITTED,
  70                 selected: true,
  71                 type: ContainerRequestState.UNCOMMITTED
  72             }
  73         ],
  74         render: renderStatus,
  75         width: "75px"
  76     },
  77     {
  78         name: ProjectPanelColumnNames.TYPE,
  79         selected: true,
  80         filters: [
  81             {
  82                 name: resourceLabel(ResourceKind.COLLECTION),
  83                 selected: true,
  84                 type: ResourceKind.COLLECTION
  85             },
  86             {
  87                 name: resourceLabel(ResourceKind.PROCESS),
  88                 selected: true,
  89                 type: ResourceKind.PROCESS
  90             },
  91             {
  92                 name: resourceLabel(ResourceKind.PROJECT),
  93                 selected: true,
  94                 type: ResourceKind.PROJECT
  95             }
  96         ],
  97         render: item => renderType(item.kind),
  98         width: "125px"
  99     },
 100     {
 101         name: ProjectPanelColumnNames.OWNER,
 102         selected: true,
 103         render: item => renderOwner(item.owner),
 104         width: "200px"
 105     },
 106     {
 107         name: ProjectPanelColumnNames.FILE_SIZE,
 108         selected: true,
 109         render: item => renderFileSize(item.fileSize),
 110         width: "50px"
 111     },
 112     {
 113         name: ProjectPanelColumnNames.LAST_MODIFIED,
 114         selected: true,
 115         sortDirection: SortDirection.NONE,
 116         render: item => renderDate(item.lastModified),
 117         width: "150px"
 118     }
 119 ];
 120
 121 export const PROJECT_PANEL_ID = "projectPanel";
 122
 123 interface ProjectPanelDataProps {
 124     currentItemId: string;
 125 }
 126
 127 interface ProjectPanelActionProps {
 128     onItemClick: (item: ProjectPanelItem) => void;
 129     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: ProjectPanelItem) => void;
 130     onDialogOpen: (ownerUuid: string) => void;
 131     onItemDoubleClick: (item: ProjectPanelItem) => void;
 132     onItemRouteChange: (itemId: string) => void;
 133 }
 134
 135 type ProjectPanelProps = ProjectPanelDataProps & ProjectPanelActionProps & DispatchProp
 136     & WithStyles<CssRules> & RouteComponentProps<{ id: string }>;
 137
 138 export const ProjectPanel = withStyles(styles)(
 139     connect((state: RootState) => ({ currentItemId: state.projects.currentItemId }))(
 140         class extends React.Component<ProjectPanelProps> {
 141             render() {
 142                 const { classes } = this.props;
 143                 return <div>
 144                     <div className={classes.toolbar}>
 145                         <Button color="primary" variant="raised" className={classes.button}>
 146                             Create a collection
 147                         </Button>
 148                         <Button color="primary" variant="raised" className={classes.button}>
 149                             Run a process
 150                         </Button>
 151                         <Button color="primary" onClick={this.handleNewProjectClick} variant="raised" className={classes.button}>
 152                             New project
 153                         </Button>
 154                     </div>
 155                     <DataExplorer
 156                         id={PROJECT_PANEL_ID}
 157                         onRowClick={this.props.onItemClick}
 158                         onRowDoubleClick={this.props.onItemDoubleClick}
 159                         onContextMenu={this.props.onContextMenu}
 160                         extractKey={(item: ProjectPanelItem) => item.uuid} />
 161                 </div>;
 162             }
 163
 164             handleNewProjectClick = () => {
 165                 this.props.onDialogOpen(this.props.currentItemId);
 166             }
 167             componentWillReceiveProps({ match, currentItemId, onItemRouteChange }: ProjectPanelProps) {
 168                 if (match.params.id !== currentItemId) {
 169                     onItemRouteChange(match.params.id);
 170                 }
 171             }
 172         }
 173     )
 174 );