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 { openContextMenu, resourceKindToContextMenuKind } 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';
34 type CssRules = "toolbar" | "button";
36 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
38 paddingBottom: theme.spacing.unit * 3,
42 marginLeft: theme.spacing.unit
46 export enum AllProcessesPanelColumnNames {
51 CREATED_AT = "Created at",
55 export interface AllProcessesPanelFilter extends DataTableFilterItem {
56 type: ResourceKind | ContainerRequestState;
59 export const allProcessesPanelColumns: DataColumns<string> = [
61 name: AllProcessesPanelColumnNames.NAME,
64 sortDirection: SortDirection.NONE,
65 filters: createTree(),
66 render: uuid => <ResourceName uuid={uuid} />
69 name: AllProcessesPanelColumnNames.STATUS,
72 mutuallyExclusiveFilters: true,
73 filters: getInitialProcessStatusFilters(),
74 render: uuid => <ProcessStatus uuid={uuid} />
77 name: AllProcessesPanelColumnNames.TYPE,
80 filters: getInitialProcessTypeFilters(),
81 render: uuid => <ResourceType uuid={uuid} />
84 name: AllProcessesPanelColumnNames.OWNER,
87 filters: createTree(),
88 render: uuid => <ResourceOwner uuid={uuid} />
91 name: AllProcessesPanelColumnNames.CREATED_AT,
94 sortDirection: SortDirection.DESC,
95 filters: createTree(),
96 render: uuid => <ResourceCreatedAtDate uuid={uuid} />
99 name: AllProcessesPanelColumnNames.RUNTIME,
102 filters: createTree(),
103 render: uuid => <ContainerRunTime uuid={uuid} />
107 interface AllProcessesPanelDataProps {
111 interface AllProcessesPanelActionProps {
112 onItemClick: (item: string) => void;
113 onDialogOpen: (ownerUuid: string) => void;
114 onItemDoubleClick: (item: string) => void;
116 const mapStateToProps = (state : RootState): AllProcessesPanelDataProps => ({
117 isAdmin: state.auth.user!.isAdmin
120 type AllProcessesPanelProps = AllProcessesPanelDataProps & AllProcessesPanelActionProps & DispatchProp
121 & WithStyles<CssRules> & RouteComponentProps<{ id: string }>;
123 export const AllProcessesPanel = withStyles(styles)(
124 connect(mapStateToProps)(
125 class extends React.Component<AllProcessesPanelProps> {
126 handleContextMenu = (event: React.MouseEvent<HTMLElement>, resourceUuid: string) => {
127 const menuKind = resourceKindToContextMenuKind(resourceUuid, this.props.isAdmin);
129 this.props.dispatch<any>(openContextMenu(event, {
133 kind: ResourceKind.NONE,
137 this.props.dispatch<any>(loadDetailsPanel(resourceUuid));
140 handleRowDoubleClick = (uuid: string) => {
141 this.props.dispatch<any>(navigateTo(uuid));
144 handleRowClick = (uuid: string) => {
145 this.props.dispatch(loadDetailsPanel(uuid));
150 id={ALL_PROCESSES_PANEL_ID}
151 onRowClick={this.handleRowClick}
152 onRowDoubleClick={this.handleRowDoubleClick}
153 onContextMenu={this.handleContextMenu}
154 contextMenuColumn={true}
155 dataTableDefaultView={
156 <DataTableDefaultView
158 messages={['Processes list empty.']}