src/views/workflow-panel/workflow-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 { DataExplorer } from "~/views-components/data-explorer/data-explorer";
   7 import { connect, DispatchProp } from 'react-redux';
   8 import { RootState } from '~/store/store';
   9 import { WorkflowIcon } from '~/components/icon/icon';
  10 import { ResourcesState, getResource } from '~/store/resources/resources';
  11 import { navigateTo } from "~/store/navigation/navigation-action";
  12 import { loadDetailsPanel } from "~/store/details-panel/details-panel-action";
  13 import { DataTableDefaultView } from '~/components/data-table-default-view/data-table-default-view';
  14 import { WORKFLOW_PANEL_ID } from '~/store/workflow-panel/workflow-panel-actions';
  15 import { openContextMenu } from '~/store/context-menu/context-menu-actions';
  16 import { GroupResource } from '~/models/group';
  17 import { ContextMenuKind } from '~/views-components/context-menu/context-menu';
  18 import {
  19     ResourceLastModifiedDate,
  20     ResourceName,
  21 } from "~/views-components/data-explorer/renderers";
  22 import { SortDirection } from '~/components/data-table/data-column';
  23 import { DataColumns } from '~/components/data-table/data-table';
  24 import { DataTableFilterItem } from '~/components/data-table-filters/data-table-filters';
  25 import { Grid } from '@material-ui/core';
  26 import { WorkflowDescriptionCard } from './workflow-description-card';
  27
  28 export enum WorkflowPanelColumnNames {
  29     NAME = "Name",
  30     AUTHORISATION = "Authorisation",
  31     LAST_MODIFIED = "Last modified",
  32 }
  33
  34 interface WorkflowPanelDataProps {
  35     resources: ResourcesState;
  36 }
  37
  38 export enum ResourceStatus {
  39     PUBLIC = 'public',
  40     PRIVATE = 'private',
  41     SHARED = 'shared'
  42 }
  43
  44 const resourceStatus = (type: string) => {
  45     switch (type) {
  46         case ResourceStatus.PUBLIC:
  47             return "Public";
  48         case ResourceStatus.PRIVATE:
  49             return "Private";
  50         case ResourceStatus.SHARED:
  51             return "Shared";
  52         default:
  53             return "Unknown";
  54     }
  55 };
  56
  57 export const workflowPanelColumns: DataColumns<string, DataTableFilterItem> = [
  58     {
  59         name: WorkflowPanelColumnNames.NAME,
  60         selected: true,
  61         configurable: true,
  62         sortDirection: SortDirection.ASC,
  63         filters: [],
  64         render: (uuid: string) => <ResourceName uuid={uuid} />
  65     },
  66     {
  67         name: WorkflowPanelColumnNames.AUTHORISATION,
  68         selected: true,
  69         configurable: true,
  70         sortDirection: SortDirection.NONE,
  71         filters: [
  72             {
  73                 name: resourceStatus(ResourceStatus.PUBLIC),
  74                 selected: true,
  75             },
  76             {
  77                 name: resourceStatus(ResourceStatus.PRIVATE),
  78                 selected: true,
  79             },
  80             {
  81                 name: resourceStatus(ResourceStatus.SHARED),
  82                 selected: true,
  83             }
  84         ],
  85         render: (uuid: string) => <ResourceName uuid={uuid} />,
  86     },
  87     {
  88         name: WorkflowPanelColumnNames.LAST_MODIFIED,
  89         selected: true,
  90         configurable: true,
  91         sortDirection: SortDirection.NONE,
  92         filters: [],
  93         render: (uuid: string) => <ResourceLastModifiedDate uuid={uuid} />
  94     }
  95 ];
  96
  97 type WorkflowPanelProps = WorkflowPanelDataProps & DispatchProp;
  98
  99 export const WorkflowPanel = connect((state: RootState) => ({
 100     resources: state.resources
 101 }))(
 102     class extends React.Component<WorkflowPanelProps> {
 103         render() {
 104             return <Grid container>
 105                 <Grid item xs={6} style={{ paddingRight: '24px', display: 'grid' }}>
 106                     <DataExplorer
 107                         id={WORKFLOW_PANEL_ID}
 108                         onRowClick={this.handleRowClick}
 109                         onRowDoubleClick={this.handleRowDoubleClick}
 110                         onContextMenu={this.handleContextMenu}
 111                         contextMenuColumn={false}
 112                         dataTableDefaultView={<DataTableDefaultView icon={WorkflowIcon} />} />
 113                 </Grid>
 114                 <Grid item xs={6}>
 115                     <WorkflowDescriptionCard />
 116                 </Grid>
 117             </Grid>;
 118         }
 119
 120         handleContextMenu = (event: React.MouseEvent<HTMLElement>, resourceUuid: string) => {
 121             const resource = getResource<GroupResource>(resourceUuid)(this.props.resources);
 122             if (resource) {
 123                 this.props.dispatch<any>(openContextMenu(event, {
 124                     name: '',
 125                     uuid: resource.uuid,
 126                     ownerUuid: resource.ownerUuid,
 127                     isTrashed: resource.isTrashed,
 128                     kind: resource.kind,
 129                     menuKind: ContextMenuKind.PROJECT,
 130                 }));
 131             }
 132         }
 133
 134         handleRowDoubleClick = (uuid: string) => {
 135             this.props.dispatch<any>(navigateTo(uuid));
 136         }
 137
 138         handleRowClick = (uuid: string) => {
 139             this.props.dispatch(loadDetailsPanel(uuid));
 140         }
 141     }
 142 );