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 { 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';
36 type CssRules = "toolbar" | "button" | "root";
38 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
40 paddingBottom: theme.spacing.unit * 3,
44 marginLeft: theme.spacing.unit
51 export enum AllProcessesPanelColumnNames {
56 CREATED_AT = "Created at",
60 export interface AllProcessesPanelFilter extends DataTableFilterItem {
61 type: ResourceKind | ContainerRequestState;
64 export const allProcessesPanelColumns: DataColumns<string> = [
66 name: AllProcessesPanelColumnNames.NAME,
69 sortDirection: SortDirection.NONE,
70 filters: createTree(),
71 render: uuid => <ResourceName uuid={uuid} />
74 name: AllProcessesPanelColumnNames.STATUS,
77 mutuallyExclusiveFilters: true,
78 filters: getInitialProcessStatusFilters(),
79 render: uuid => <ProcessStatus uuid={uuid} />
82 name: AllProcessesPanelColumnNames.TYPE,
85 filters: getInitialProcessTypeFilters(),
86 render: uuid => <ResourceType uuid={uuid} />
89 name: AllProcessesPanelColumnNames.OWNER,
92 filters: createTree(),
93 render: uuid => <ResourceOwnerWithName uuid={uuid} />
96 name: AllProcessesPanelColumnNames.CREATED_AT,
99 sortDirection: SortDirection.DESC,
100 filters: createTree(),
101 render: uuid => <ResourceCreatedAtDate uuid={uuid} />
104 name: AllProcessesPanelColumnNames.RUNTIME,
107 filters: createTree(),
108 render: uuid => <ContainerRunTime uuid={uuid} />
112 interface AllProcessesPanelDataProps {
113 resources: ResourcesState;
116 interface AllProcessesPanelActionProps {
117 onItemClick: (item: string) => void;
118 onDialogOpen: (ownerUuid: string) => void;
119 onItemDoubleClick: (item: string) => void;
121 const mapStateToProps = (state : RootState): AllProcessesPanelDataProps => ({
122 resources: state.resources
125 type AllProcessesPanelProps = AllProcessesPanelDataProps & AllProcessesPanelActionProps & DispatchProp
126 & WithStyles<CssRules> & RouteComponentProps<{ id: string }>;
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);
134 this.props.dispatch<any>(openProcessContextMenu(event, process));
136 this.props.dispatch<any>(loadDetailsPanel(resourceUuid));
139 handleRowDoubleClick = (uuid: string) => {
140 this.props.dispatch<any>(navigateTo(uuid));
143 handleRowClick = (uuid: string) => {
144 this.props.dispatch<any>(loadDetailsPanel(uuid));
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
156 messages={['Processes list empty.']}