1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import * as 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';
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";
38 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
40 paddingBottom: theme.spacing.unit * 3,
44 marginLeft: theme.spacing.unit
48 export enum AllProcessesPanelColumnNames {
53 CREATED_AT = "Created at",
57 export interface AllProcessesPanelFilter extends DataTableFilterItem {
58 type: ResourceKind | ContainerRequestState;
61 export const allProcessesPanelColumns: DataColumns<string> = [
63 name: AllProcessesPanelColumnNames.NAME,
66 sortDirection: SortDirection.NONE,
67 filters: createTree(),
68 render: uuid => <ResourceName uuid={uuid} />
71 name: AllProcessesPanelColumnNames.STATUS,
74 mutuallyExclusiveFilters: true,
75 filters: getInitialProcessStatusFilters(),
76 render: uuid => <ProcessStatus uuid={uuid} />
79 name: AllProcessesPanelColumnNames.TYPE,
82 filters: getInitialProcessTypeFilters(),
83 render: uuid => <ResourceType uuid={uuid} />
86 name: AllProcessesPanelColumnNames.OWNER,
89 filters: createTree(),
90 render: uuid => <ResourceOwner uuid={uuid} />
93 name: AllProcessesPanelColumnNames.CREATED_AT,
96 sortDirection: SortDirection.DESC,
97 filters: createTree(),
98 render: uuid => <ResourceCreatedAtDate uuid={uuid} />
101 name: AllProcessesPanelColumnNames.RUNTIME,
104 filters: createTree(),
105 render: uuid => <ContainerRunTime uuid={uuid} />
109 interface AllProcessesPanelDataProps {
110 resources: ResourcesState;
113 interface AllProcessesPanelActionProps {
114 onItemClick: (item: string) => void;
115 onDialogOpen: (ownerUuid: string) => void;
116 onItemDoubleClick: (item: string) => void;
118 const mapStateToProps = (state : RootState): AllProcessesPanelDataProps => ({
119 resources: state.resources
122 type AllProcessesPanelProps = AllProcessesPanelDataProps & AllProcessesPanelActionProps & DispatchProp
123 & WithStyles<CssRules> & RouteComponentProps<{ id: string }>;
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);
131 this.props.dispatch<any>(openProcessContextMenu(event, process));
133 this.props.dispatch<any>(loadDetailsPanel(resourceUuid));
136 handleRowDoubleClick = (uuid: string) => {
137 this.props.dispatch<any>(navigateTo(uuid));
140 handleRowClick = (uuid: string) => {
141 this.props.dispatch(loadDetailsPanel(uuid));
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
154 messages={['Processes list empty.']}