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     ResourceOwnerWithName,
  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" | "root";
  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     root: {
  47         width: '100%',
  48     }
  49 });
  50
  51 export enum AllProcessesPanelColumnNames {
  52     NAME = "Name",
  53     STATUS = "Status",
  54     TYPE = "Type",
  55     OWNER = "Owner",
  56     CREATED_AT = "Created at",
  57     RUNTIME = "Run Time"
  58 }
  59
  60 export interface AllProcessesPanelFilter extends DataTableFilterItem {
  61     type: ResourceKind | ContainerRequestState;
  62 }
  63
  64 export const allProcessesPanelColumns: DataColumns<string> = [
  65     {
  66         name: AllProcessesPanelColumnNames.NAME,
  67         selected: true,
  68         configurable: true,
  69         sortDirection: SortDirection.NONE,
  70         filters: createTree(),
  71         render: uuid => <ResourceName uuid={uuid} />
  72     },
  73     {
  74         name: AllProcessesPanelColumnNames.STATUS,
  75         selected: true,
  76         configurable: true,
  77         mutuallyExclusiveFilters: true,
  78         filters: getInitialProcessStatusFilters(),
  79         render: uuid => <ProcessStatus uuid={uuid} />
  80     },
  81     {
  82         name: AllProcessesPanelColumnNames.TYPE,
  83         selected: true,
  84         configurable: true,
  85         filters: getInitialProcessTypeFilters(),
  86         render: uuid => <ResourceType uuid={uuid} />
  87     },
  88     {
  89         name: AllProcessesPanelColumnNames.OWNER,
  90         selected: true,
  91         configurable: true,
  92         filters: createTree(),
  93         render: uuid => <ResourceOwnerWithName uuid={uuid} />
  94     },
  95     {
  96         name: AllProcessesPanelColumnNames.CREATED_AT,
  97         selected: true,
  98         configurable: true,
  99         sortDirection: SortDirection.DESC,
 100         filters: createTree(),
 101         render: uuid => <ResourceCreatedAtDate uuid={uuid} />
 102     },
 103     {
 104         name: AllProcessesPanelColumnNames.RUNTIME,
 105         selected: true,
 106         configurable: true,
 107         filters: createTree(),
 108         render: uuid => <ContainerRunTime uuid={uuid} />
 109     }
 110 ];
 111
 112 interface AllProcessesPanelDataProps {
 113     resources: ResourcesState;
 114 }
 115
 116 interface AllProcessesPanelActionProps {
 117     onItemClick: (item: string) => void;
 118     onDialogOpen: (ownerUuid: string) => void;
 119     onItemDoubleClick: (item: string) => void;
 120 }
 121 const mapStateToProps = (state : RootState): AllProcessesPanelDataProps => ({
 122     resources: state.resources
 123 });
 124
 125 type AllProcessesPanelProps = AllProcessesPanelDataProps & AllProcessesPanelActionProps & DispatchProp
 126     & WithStyles<CssRules> & RouteComponentProps<{ id: string }>;
 127
 128 export const AllProcessesPanel = withStyles(styles)(
 129     connect(mapStateToProps)(
 130         class extends React.Component<AllProcessesPanelProps> {
 131             handleContextMenu = (event: React.MouseEvent<HTMLElement>, resourceUuid: string) => {
 132                 const process = getProcess(resourceUuid)(this.props.resources);
 133                 if (process) {
 134                     this.props.dispatch<any>(openProcessContextMenu(event, process));
 135                 }
 136                 this.props.dispatch<any>(loadDetailsPanel(resourceUuid));
 137             }
 138
 139             handleRowDoubleClick = (uuid: string) => {
 140                 this.props.dispatch<any>(navigateTo(uuid));
 141             }
 142
 143             handleRowClick = (uuid: string) => {
 144                 this.props.dispatch<any>(loadDetailsPanel(uuid));
 145             }
 146
 147             render() {
 148                 return <div className={this.props.classes.root}><DataExplorer
 149                     id={ALL_PROCESSES_PANEL_ID}
 150                     onRowClick={this.handleRowClick}
 151                     onRowDoubleClick={this.handleRowDoubleClick}
 152                     onContextMenu={this.handleContextMenu}
 153                     contextMenuColumn={true}
 154                     dataTableDefaultView={ <DataTableDefaultView
 155                         icon={ProcessIcon}
 156                         messages={['Processes list empty.']}
 157                         /> } />
 158                 </div>
 159             }
 160         }
 161     )
 162 );