src/views/workflow-panel/workflow-panel-view.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 { WorkflowIcon } from '~/components/icon/icon';
   8 import { DataTableDefaultView } from '~/components/data-table-default-view/data-table-default-view';
   9 import { WORKFLOW_PANEL_ID } from '~/store/workflow-panel/workflow-panel-actions';
  10 import {
  11     ResourceLastModifiedDate,
  12     RosurceWorkflowName,
  13     ResourceWorkflowStatus,
  14     ResourceShare
  15 } from "~/views-components/data-explorer/renderers";
  16 import { SortDirection } from '~/components/data-table/data-column';
  17 import { DataColumns } from '~/components/data-table/data-table';
  18 import { DataTableFilterItem } from '~/components/data-table-filters/data-table-filters';
  19 import { Grid, Paper } from '@material-ui/core';
  20 import { WorkflowDetailsCard } from './workflow-description-card';
  21 import { WorkflowResource } from '../../models/workflow';
  22
  23 export enum WorkflowPanelColumnNames {
  24     NAME = "Name",
  25     AUTHORISATION = "Authorisation",
  26     LAST_MODIFIED = "Last modified",
  27     SHARE = 'Share'
  28 }
  29
  30 export interface WorkflowPanelFilter extends DataTableFilterItem {
  31     type: ResourceStatus;
  32 }
  33
  34 export interface WorkflowPanelDataProps {
  35     workflow?: WorkflowResource;
  36 }
  37
  38 export interface WorfklowPanelActionProps {
  39     handleRowDoubleClick: (workflowUuid: string) => void;
  40     handleRowClick: (workflowUuid: string) => void;
  41 }
  42
  43 export type WorkflowPanelProps = WorkflowPanelDataProps & WorfklowPanelActionProps;
  44
  45 export enum ResourceStatus {
  46     PUBLIC = "Public",
  47     PRIVATE = "Private",
  48     SHARED = "Shared"
  49 }
  50
  51 const resourceStatus = (type: string) => {
  52     switch (type) {
  53         case ResourceStatus.PUBLIC:
  54             return "Public";
  55         case ResourceStatus.PRIVATE:
  56             return "Private";
  57         case ResourceStatus.SHARED:
  58             return "Shared";
  59         default:
  60             return "Unknown";
  61     }
  62 };
  63
  64 export const workflowPanelColumns: DataColumns<string, WorkflowPanelFilter> = [
  65     {
  66         name: WorkflowPanelColumnNames.NAME,
  67         selected: true,
  68         configurable: true,
  69         sortDirection: SortDirection.ASC,
  70         filters: [],
  71         render: (uuid: string) => <RosurceWorkflowName uuid={uuid} />
  72     },
  73     {
  74         name: WorkflowPanelColumnNames.AUTHORISATION,
  75         selected: true,
  76         configurable: true,
  77         filters: [
  78             {
  79                 name: resourceStatus(ResourceStatus.PUBLIC),
  80                 selected: true,
  81                 type: ResourceStatus.PUBLIC
  82             },
  83             {
  84                 name: resourceStatus(ResourceStatus.PRIVATE),
  85                 selected: true,
  86                 type: ResourceStatus.PRIVATE
  87             },
  88             {
  89                 name: resourceStatus(ResourceStatus.SHARED),
  90                 selected: true,
  91                 type: ResourceStatus.SHARED
  92             }
  93         ],
  94         render: (uuid: string) => <ResourceWorkflowStatus uuid={uuid} />,
  95     },
  96     {
  97         name: WorkflowPanelColumnNames.LAST_MODIFIED,
  98         selected: true,
  99         configurable: true,
 100         sortDirection: SortDirection.NONE,
 101         filters: [],
 102         render: (uuid: string) => <ResourceLastModifiedDate uuid={uuid} />
 103     },
 104     {
 105         name: '',
 106         selected: true,
 107         configurable: false,
 108         filters: [],
 109         render: (uuid: string) => <ResourceShare uuid={uuid} />
 110     }
 111 ];
 112
 113 export const WorkflowPanelView = (props: WorkflowPanelProps) => {
 114     return <Grid container spacing={16} style={{minHeight: '500px'}}>
 115         <Grid item xs={6}>
 116             <DataExplorer
 117                 id={WORKFLOW_PANEL_ID}
 118                 onRowClick={props.handleRowClick}
 119                 onRowDoubleClick={props.handleRowDoubleClick}
 120                 contextMenuColumn={false}
 121                 onContextMenu={e => e}
 122                 dataTableDefaultView={<DataTableDefaultView icon={WorkflowIcon} />} />
 123         </Grid>
 124         <Grid item xs={6}>
 125             <Paper style={{ height: '100%' }}>
 126                 <WorkflowDetailsCard workflow={props.workflow} />
 127             </Paper>
 128         </Grid>
 129     </Grid>;
 130 };