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 { createTree } from 'models/tree';
  17 import { getInitialProcessStatusFilters } from 'store/resource-type-filters/resource-type-filters';
  18 import { ResourcesState } from 'store/resources/resources';
  19 import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
  20
  21 export enum SubprocessPanelColumnNames {
  22     NAME = "Name",
  23     STATUS = "Status",
  24     CREATED_AT = "Created At",
  25     RUNTIME = "Run Time"
  26 }
  27
  28 export interface SubprocessPanelFilter extends DataTableFilterItem {
  29     type: ResourceKind | ContainerRequestState;
  30 }
  31
  32 export const subprocessPanelColumns: DataColumns<string> = [
  33     {
  34         name: SubprocessPanelColumnNames.NAME,
  35         selected: true,
  36         configurable: true,
  37         sortDirection: SortDirection.NONE,
  38         filters: createTree(),
  39         render: uuid => <ResourceName uuid={uuid} />
  40     },
  41     {
  42         name: SubprocessPanelColumnNames.STATUS,
  43         selected: true,
  44         configurable: true,
  45         mutuallyExclusiveFilters: true,
  46         filters: getInitialProcessStatusFilters(),
  47         render: uuid => <ProcessStatus uuid={uuid} />,
  48     },
  49     {
  50         name: SubprocessPanelColumnNames.CREATED_AT,
  51         selected: true,
  52         configurable: true,
  53         sortDirection: SortDirection.DESC,
  54         filters: createTree(),
  55         render: uuid => <ResourceCreatedAtDate uuid={uuid} />
  56     },
  57     {
  58         name: SubprocessPanelColumnNames.RUNTIME,
  59         selected: true,
  60         configurable: true,
  61         filters: createTree(),
  62         render: uuid => <ContainerRunTime uuid={uuid} />
  63     }
  64 ];
  65
  66 export interface SubprocessPanelDataProps {
  67     resources: ResourcesState;
  68 }
  69
  70 export interface SubprocessPanelActionProps {
  71     onItemClick: (item: string) => void;
  72     onContextMenu: (event: React.MouseEvent<HTMLElement>, item: string, resources: ResourcesState) => void;
  73     onItemDoubleClick: (item: string) => void;
  74 }
  75
  76 type SubprocessPanelProps = SubprocessPanelActionProps & SubprocessPanelDataProps;
  77
  78 const DEFAULT_VIEW_MESSAGES = [
  79     'No subprocesses available for listing.',
  80     'The current process may not have any or none matches current filtering.'
  81 ];
  82
  83 export const SubprocessPanelRoot = (props: SubprocessPanelProps & MPVPanelProps) => {
  84     return <DataExplorer
  85         id={SUBPROCESS_PANEL_ID}
  86         onRowClick={props.onItemClick}
  87         onRowDoubleClick={props.onItemDoubleClick}
  88         onContextMenu={(event, item) => props.onContextMenu(event, item, props.resources)}
  89         contextMenuColumn={true}
  90         defaultViewIcon={ProcessIcon}
  91         defaultViewMessages={DEFAULT_VIEW_MESSAGES}
  92         doHidePanel={props.doHidePanel}
  93         doMaximizePanel={props.doMaximizePanel}
  94         panelMaximized={props.panelMaximized}
  95         panelName={props.panelName} />;
  96 };