src/views/all-processes-panel/all-processes-panel.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 { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
   7 import { DataExplorer } from "views-components/data-explorer/data-explorer";
   8 import { connect, DispatchProp } from 'react-redux';
   9 import { DataColumns } from 'components/data-table/data-table';
  10 import { RouteComponentProps } from 'react-router';
  11 import { DataTableFilterItem } from 'components/data-table-filters/data-table-filters';
  12 import { SortDirection } from 'components/data-table/data-column';
  13 import { ResourceKind } from 'models/resource';
  14 import { ArvadosTheme } from 'common/custom-theme';
  15 import { ALL_PROCESSES_PANEL_ID } from 'store/all-processes-panel/all-processes-panel-action';
  16 import {
  17     ProcessStatus,
  18     ResourceName,
  19     ResourceOwner,
  20     ResourceType,
  21     ContainerRunTime,
  22     ResourceCreatedAtDate
  23 } from 'views-components/data-explorer/renderers';
  24 import { ProcessIcon } from 'components/icon/icon';
  25 import { openProcessContextMenu } from 'store/context-menu/context-menu-actions';
  26 import { loadDetailsPanel } from 'store/details-panel/details-panel-action';
  27 import { navigateTo } from 'store/navigation/navigation-action';
  28 import { ContainerRequestState } from "models/container-request";
  29 import { RootState } from 'store/store';
  30 import { DataTableDefaultView } from 'components/data-table-default-view/data-table-default-view';
  31 import { createTree } from 'models/tree';
  32 import { getInitialProcessStatusFilters, getInitialProcessTypeFilters } from 'store/resource-type-filters/resource-type-filters';
  33 import { getProcess } from 'store/processes/process';
  34 import { ResourcesState } from 'store/resources/resources';
  35
  36 type CssRules = "toolbar" | "button";
  37
  38 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  39     toolbar: {
  40         paddingBottom: theme.spacing.unit * 3,
  41         textAlign: "right"
  42     },
  43     button: {
  44         marginLeft: theme.spacing.unit
  45     },
  46 });
  47
  48 export enum AllProcessesPanelColumnNames {
  49     NAME = "Name",
  50     STATUS = "Status",
  51     TYPE = "Type",
  52     OWNER = "Owner",
  53     CREATED_AT = "Created at",
  54     RUNTIME = "Run Time"
  55 }
  56
  57 export interface AllProcessesPanelFilter extends DataTableFilterItem {
  58     type: ResourceKind | ContainerRequestState;
  59 }
  60
  61 export const allProcessesPanelColumns: DataColumns<string> = [
  62     {
  63         name: AllProcessesPanelColumnNames.NAME,
  64         selected: true,
  65         configurable: true,
  66         sortDirection: SortDirection.NONE,
  67         filters: createTree(),
  68         render: uuid => <ResourceName uuid={uuid} />
  69     },
  70     {
  71         name: AllProcessesPanelColumnNames.STATUS,
  72         selected: true,
  73         configurable: true,
  74         mutuallyExclusiveFilters: true,
  75         filters: getInitialProcessStatusFilters(),
  76         render: uuid => <ProcessStatus uuid={uuid} />
  77     },
  78     {
  79         name: AllProcessesPanelColumnNames.TYPE,
  80         selected: true,
  81         configurable: true,
  82         filters: getInitialProcessTypeFilters(),
  83         render: uuid => <ResourceType uuid={uuid} />
  84     },
  85     {
  86         name: AllProcessesPanelColumnNames.OWNER,
  87         selected: true,
  88         configurable: true,
  89         filters: createTree(),
  90         render: uuid => <ResourceOwner uuid={uuid} />
  91     },
  92     {
  93         name: AllProcessesPanelColumnNames.CREATED_AT,
  94         selected: true,
  95         configurable: true,
  96         sortDirection: SortDirection.DESC,
  97         filters: createTree(),
  98         render: uuid => <ResourceCreatedAtDate uuid={uuid} />
  99     },
 100     {
 101         name: AllProcessesPanelColumnNames.RUNTIME,
 102         selected: true,
 103         configurable: true,
 104         filters: createTree(),
 105         render: uuid => <ContainerRunTime uuid={uuid} />
 106     }
 107 ];
 108
 109 interface AllProcessesPanelDataProps {
 110     resources: ResourcesState;
 111 }
 112
 113 interface AllProcessesPanelActionProps {
 114     onItemClick: (item: string) => void;
 115     onDialogOpen: (ownerUuid: string) => void;
 116     onItemDoubleClick: (item: string) => void;
 117 }
 118 const mapStateToProps = (state : RootState): AllProcessesPanelDataProps => ({
 119     resources: state.resources
 120 });
 121
 122 type AllProcessesPanelProps = AllProcessesPanelDataProps & AllProcessesPanelActionProps & DispatchProp
 123     & WithStyles<CssRules> & RouteComponentProps<{ id: string }>;
 124
 125 export const AllProcessesPanel = withStyles(styles)(
 126     connect(mapStateToProps)(
 127         class extends React.Component<AllProcessesPanelProps> {
 128             handleContextMenu = (event: React.MouseEvent<HTMLElement>, resourceUuid: string) => {
 129                 const process = getProcess(resourceUuid)(this.props.resources);
 130                 if (process) {
 131                     this.props.dispatch<any>(openProcessContextMenu(event, process));
 132                 }
 133                 this.props.dispatch<any>(loadDetailsPanel(resourceUuid));
 134             }
 135
 136             handleRowDoubleClick = (uuid: string) => {
 137                 this.props.dispatch<any>(navigateTo(uuid));
 138             }
 139
 140             handleRowClick = (uuid: string) => {
 141                 this.props.dispatch<any>(loadDetailsPanel(uuid));
 142             }
 143
 144             render() {
 145                 return <DataExplorer
 146                     id={ALL_PROCESSES_PANEL_ID}
 147                     onRowClick={this.handleRowClick}
 148                     onRowDoubleClick={this.handleRowDoubleClick}
 149                     onContextMenu={this.handleContextMenu}
 150                     contextMenuColumn={true}
 151                     dataTableDefaultView={
 152                         <DataTableDefaultView
 153                             icon={ProcessIcon}
 154                             messages={['Processes list empty.']}
 155                             />
 156                     } />;
 157             }
 158         }
 159     )
 160 );