src/views/subprocess-panel/subprocess-panel-root.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from 'react';
   6 import { DataExplorer } from "views-components/data-explorer/data-explorer";
   7 import { DataColumns } from 'components/data-table/data-table';
   8 import { DataTableFilterItem } from 'components/data-table-filters/data-table-filters';
   9 import { ContainerRequestState } from 'models/container-request';
  10 import { SortDirection } from 'components/data-table/data-column';
  11 import { ResourceKind } from 'models/resource';
  12 import { ResourceCreatedAtDate, ProcessStatus, ContainerRunTime } from 'views-components/data-explorer/renderers';
  13 import { ProcessIcon } from 'components/icon/icon';
  14 import { ResourceName } from 'views-components/data-explorer/renderers';
  15 import { SUBPROCESS_PANEL_ID } from 'store/subprocess-panel/subprocess-panel-actions';
  16 import { DataTableDefaultView } from 'components/data-table-default-view/data-table-default-view';
  17 import { createTree } from 'models/tree';
  18 import { getInitialProcessStatusFilters } from 'store/resource-type-filters/resource-type-filters';
  19 import { ResourcesState } from 'store/resources/resources';
  20 import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
  21
  22 export enum SubprocessPanelColumnNames {
  23     NAME = "Name",
  24     STATUS = "Status",
  25     CREATED_AT = "Created At",
  26     RUNTIME = "Run Time"
  27 }
  28
  29 export interface SubprocessPanelFilter extends DataTableFilterItem {
  30     type: ResourceKind | ContainerRequestState;
  31 }
  32
  33 export const subprocessPanelColumns: DataColumns<string> = [
  34     {
  35         name: SubprocessPanelColumnNames.NAME,
  36         selected: true,
  37         configurable: true,
  38         sortDirection: SortDirection.NONE,
  39         filters: createTree(),
  40         render: uuid => <ResourceName uuid={uuid} />
  41     },
  42     {
  43         name: SubprocessPanelColumnNames.STATUS,
  44         selected: true,
  45         configurable: true,
  46         mutuallyExclusiveFilters: true,
  47         filters: getInitialProcessStatusFilters(),
  48         render: uuid => <ProcessStatus uuid={uuid} />,
  49     },
  50     {
  51         name: SubprocessPanelColumnNames.CREATED_AT,
  52         selected: true,
  53         configurable: true,
  54         sortDirection: SortDirection.DESC,
  55         filters: createTree(),
  56         render: uuid => <ResourceCreatedAtDate uuid={uuid} />
  57     },
  58     {
  59         name: SubprocessPanelColumnNames.RUNTIME,
  60         selected: true,
  61         configurable: true,
  62         filters: createTree(),
  63         render: uuid => <ContainerRunTime uuid={uuid} />
  64     }
  65 ];
  66
  67 export interface SubprocessPanelDataProps {
  68     resources: ResourcesState;
  69 }
  70
  71 export interface SubprocessPanelActionProps {
  72     onItemClick: (item: string) => void;
  73     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: string, resources: ResourcesState) => void;
  74     onItemDoubleClick: (item: string) => void;
  75 }
  76
  77 type SubprocessPanelProps = SubprocessPanelActionProps & SubprocessPanelDataProps;
  78
  79 const DEFAULT_VIEW_MESSAGES = [
  80     'No subprocesses available for listing.',
  81     'The current process may not have any or none matches current filtering.'
  82 ];
  83
  84 export const SubprocessPanelRoot = (props: SubprocessPanelProps & MPVPanelProps) => {
  85     return <DataExplorer
  86         id={SUBPROCESS_PANEL_ID}
  87         onRowClick={props.onItemClick}
  88         onRowDoubleClick={props.onItemDoubleClick}
  89         onContextMenu={(event, item) => props.onContextMenu(event, item, props.resources)}
  90         contextMenuColumn={true}
  91         dataTableDefaultView={
  92             <DataTableDefaultView
  93                 icon={ProcessIcon}
  94                 messages={DEFAULT_VIEW_MESSAGES} />
  95         }
  96         doHidePanel={props.doHidePanel}
  97         doMaximizePanel={props.doMaximizePanel}
  98         panelMaximized={props.panelMaximized}
  99         panelName={props.panelName} />;
 100 };