services/workbench2/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 { ContainerRequestResource, ContainerRequestState } from "models/container-request";
  29 import { RootState } from "store/store";
  30 import { createTree } from "models/tree";
  31 import { getInitialProcessStatusFilters, getInitialProcessTypeFilters } from "store/resource-type-filters/resource-type-filters";
  32 import { getProcess } from "store/processes/process";
  33 import { ResourcesState } from "store/resources/resources";
  34 import { toggleOne } from "store/multiselect/multiselect-actions";
  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, ContainerRequestResource> = [
  65     {
  66         name: AllProcessesPanelColumnNames.NAME,
  67         selected: true,
  68         configurable: true,
  69         sort: { direction: SortDirection.NONE, field: "name" },
  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         sort: { direction: SortDirection.DESC, field: "createdAt" },
 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 &
 126     AllProcessesPanelActionProps &
 127     DispatchProp &
 128     WithStyles<CssRules> &
 129     RouteComponentProps<{ id: string }>;
 130
 131 export const AllProcessesPanel = withStyles(styles)(
 132     connect(mapStateToProps)(
 133         class extends React.Component<AllProcessesPanelProps> {
 134             handleContextMenu = (event: React.MouseEvent<HTMLElement>, resourceUuid: string) => {
 135                 const process = getProcess(resourceUuid)(this.props.resources);
 136                 if (process) {
 137                     this.props.dispatch<any>(openProcessContextMenu(event, process));
 138                 }
 139                 this.props.dispatch<any>(loadDetailsPanel(resourceUuid));
 140             };
 141
 142             handleRowDoubleClick = (uuid: string) => {
 143                 this.props.dispatch<any>(navigateTo(uuid));
 144             };
 145
 146             handleRowClick = (uuid: string) => {
 147                 this.props.dispatch<any>(toggleOne(uuid))
 148                 this.props.dispatch<any>(loadDetailsPanel(uuid));
 149             };
 150
 151             render() {
 152                 return (
 153                     <div className={this.props.classes.root}>
 154                         <DataExplorer
 155                             id={ALL_PROCESSES_PANEL_ID}
 156                             onRowClick={this.handleRowClick}
 157                             onRowDoubleClick={this.handleRowDoubleClick}
 158                             onContextMenu={this.handleContextMenu}
 159                             contextMenuColumn={true}
 160                             defaultViewIcon={ProcessIcon}
 161                             defaultViewMessages={["Processes list empty."]}
 162                         />
 163                     </div>
 164                 );
 165             }
 166         }
 167     )
 168 );