1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
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';
19 ResourceOwnerWithName,
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';
35 type CssRules = "toolbar" | "button" | "root";
37 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
39 paddingBottom: theme.spacing.unit * 3,
43 marginLeft: theme.spacing.unit
50 export enum AllProcessesPanelColumnNames {
55 CREATED_AT = "Created at",
59 export interface AllProcessesPanelFilter extends DataTableFilterItem {
60 type: ResourceKind | ContainerRequestState;
63 export const allProcessesPanelColumns: DataColumns<string, ContainerRequestResource> = [
65 name: AllProcessesPanelColumnNames.NAME,
68 sort: {direction: SortDirection.NONE, field: "name"},
69 filters: createTree(),
70 render: uuid => <ResourceName uuid={uuid} />
73 name: AllProcessesPanelColumnNames.STATUS,
76 mutuallyExclusiveFilters: true,
77 filters: getInitialProcessStatusFilters(),
78 render: uuid => <ProcessStatus uuid={uuid} />
81 name: AllProcessesPanelColumnNames.TYPE,
84 filters: getInitialProcessTypeFilters(),
85 render: uuid => <ResourceType uuid={uuid} />
88 name: AllProcessesPanelColumnNames.OWNER,
91 filters: createTree(),
92 render: uuid => <ResourceOwnerWithName uuid={uuid} />
95 name: AllProcessesPanelColumnNames.CREATED_AT,
98 sort: {direction: SortDirection.DESC, field: "createdAt"},
99 filters: createTree(),
100 render: uuid => <ResourceCreatedAtDate uuid={uuid} />
103 name: AllProcessesPanelColumnNames.RUNTIME,
106 filters: createTree(),
107 render: uuid => <ContainerRunTime uuid={uuid} />
111 interface AllProcessesPanelDataProps {
112 resources: ResourcesState;
115 interface AllProcessesPanelActionProps {
116 onItemClick: (item: string) => void;
117 onDialogOpen: (ownerUuid: string) => void;
118 onItemDoubleClick: (item: string) => void;
120 const mapStateToProps = (state : RootState): AllProcessesPanelDataProps => ({
121 resources: state.resources
124 type AllProcessesPanelProps = AllProcessesPanelDataProps & AllProcessesPanelActionProps & DispatchProp
125 & WithStyles<CssRules> & RouteComponentProps<{ id: string }>;
127 export const AllProcessesPanel = withStyles(styles)(
128 connect(mapStateToProps)(
129 class extends React.Component<AllProcessesPanelProps> {
130 handleContextMenu = (event: React.MouseEvent<HTMLElement>, resourceUuid: string) => {
131 const process = getProcess(resourceUuid)(this.props.resources);
133 this.props.dispatch<any>(openProcessContextMenu(event, process));
135 this.props.dispatch<any>(loadDetailsPanel(resourceUuid));
138 handleRowDoubleClick = (uuid: string) => {
139 this.props.dispatch<any>(navigateTo(uuid));
142 handleRowClick = (uuid: string) => {
143 this.props.dispatch<any>(loadDetailsPanel(uuid));
147 return <div className={this.props.classes.root}><DataExplorer
148 id={ALL_PROCESSES_PANEL_ID}
149 onRowClick={this.handleRowClick}
150 onRowDoubleClick={this.handleRowDoubleClick}
151 onContextMenu={this.handleContextMenu}
152 contextMenuColumn={true}
153 defaultViewIcon={ProcessIcon}
154 defaultViewMessages={['Processes list empty.']} />