(#3902) Integrate pipeline result table

client/src/components/runs/run-details/sections/reports/components/path-cell/index.js

@@ -0,0 +1,3 @@
+import {PathCell} from './path-cell';
+
+export default PathCell;

client/src/components/runs/run-details/sections/reports/components/path-cell/path-cell.css

@@ -0,0 +1,13 @@
+.show-more-path-button {
+  background-color: white;
+  color: #1890ff;
+  border-color: #1890ff;
+  border-radius: 50px;
+  display: inline-block;
+}
+
+.paths-popover-content {
+  max-height: 45vh;
+  overflow: auto;
+  padding-right: 20px;
+}

client/src/components/runs/run-details/sections/reports/components/path-cell/path-cell.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import {Button, Popover} from 'antd';
+import {PathList} from './path-list';
+
+import styles from './path-cell.css';
+
+const DISPLAY_LIMIT = 2;
+
+export const PathCell = ({paths = []}) => {
+  const hasMoreToShow = paths.length > DISPLAY_LIMIT;
+  const visiblePaths = hasMoreToShow ? paths.slice(0, DISPLAY_LIMIT) : paths;
+  const showMoreAmount = paths.length - DISPLAY_LIMIT;
+  const showMoreText = `+ ${showMoreAmount} more`;
+
+  return (
+    <div>
+      <PathList paths={visiblePaths} />
+      {hasMoreToShow && (
+        <Popover
+          content={(
+            <div className={styles.pathsPopoverContent}>
+              <PathList paths={paths} />
+            </div>)}
+          trigger="click"
+        >
+          <Button className={styles.showMorePathButton} size="small">
+            {showMoreText}
+          </Button>
+        </Popover>
+      )}
+    </div>
+  );
+};

client/src/components/runs/run-details/sections/reports/components/path-cell/path-list.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+export const PathList = ({paths}) => {
+  return (
+    <ul>
+      {
+        paths.map((path, index) => (
+          <li>
+            <a key={index} href="#" style={{display: 'block'}}>
+              {path}
+            </a>
+          </li>
+        ))
+      }
+    </ ul>
+  );
+};

client/src/components/runs/run-details/sections/reports/components/result-table/index.js

@@ -0,0 +1,3 @@
+import {ResultTable} from './result-table';
+
+export default ResultTable;

client/src/components/runs/run-details/sections/reports/components/result-table/result-table.css

@@ -0,0 +1,14 @@
+.table-row-light {
+  background-color: #ffffff; /* Белый цвет фона */
+}
+
+.table-row-dark {
+  background-color: #f7f7f7; /* Серый цвет фона */
+}
+
+.path-search-input {
+  width: 20%;
+  margin-left: 5px;
+  margin-bottom: 5px;
+  display: inline-block;
+}

client/src/components/runs/run-details/sections/reports/components/result-table/result-table.jsx

@@ -0,0 +1,77 @@
+import React, {Component} from 'react';
+import {Input, Table} from 'antd';
+import PathCell from '../path-cell';
+
+import styles from './result-table.css';
+
+export class ResultTable extends Component {
+  state = {
+    sortedInfo: {},
+    searchText: ''
+  };
+
+  handleChange = (pagination, filters, sorter) => {
+    this.setState({
+      sortedInfo: sorter
+    });
+  };
+
+  onSearch = (e) => {
+    const {value} = e.target;
+
+    this.setState({searchText: value});
+  };
+
+  computeRowClassName = (record, index) => {
+    return index % 2 === 0 ? styles.tableRowDark : styles.tableRowLight;
+  }
+
+  render () {
+    let {sortedInfo, searchText} = this.state;
+    const filteredData = this.props.resultItems.filter(entry => entry.items.some(path => {
+      return path.toLowerCase().includes(searchText.toLowerCase());
+    }));
+
+    return (
+      <div>
+        <Input
+          className={styles.pathSearchInput}
+          placeholder="Filter by path"
+          value={searchText}
+          onChange={this.onSearch}
+        />
+        <Table
+          onChange={this.handleChange}
+          dataSource={filteredData}
+          rowClassName={this.computeRowClassName}
+          columns={[{
+            title: (
+              <span>
+                Name
+              </span>
+            ),
+            dataIndex: 'fileMask',
+            key: 'fileMask',
+            sorter: (a, b) => a.name.localeCompare(b.name),
+            sortOrder: sortedInfo.columnKey === 'fileMask' && sortedInfo.order,
+            render: (text) => (
+              <div>
+                {text}
+              </div>
+            )
+          },
+          {
+            title: 'Path',
+            dataIndex: 'items',
+            key: 'items',
+            render: (paths) => {
+              return <PathCell paths={paths} />;
+            }
+          }]}
+          showSorterTooltip={{target: 'sorter-icon'}}
+          pagination={false}
+          size="small" />
+      </div>
+    );
+  }
+};

client/src/components/runs/run-details/sections/reports/index.js

@@ -0,0 +1,3 @@
+import Reports from './reports';
+
+export default Reports;

client/src/components/runs/run-details/sections/reports/reports.jsx

@@ -0,0 +1,52 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import {Spin, Row} from 'antd';
+import ResultTable from './components/result-table';
+import PipelineRunResults from '../../../../../models/pipelines/PipelineRunResults';
+
+export class Reports extends Component {
+  static propTypes = {
+    runId: PropTypes.string.isRequired
+  };
+
+  state = {
+    results: [],
+    pending: false
+  }
+
+  componentDidMount () {
+    this.fetchRunResults();
+  }
+
+  fetchRunResults = async () => {
+    const {runId} = this.props;
+
+    const pipelineResults = new PipelineRunResults(runId);
+    try {
+      this.setState({pending: true});
+      await pipelineResults.fetch();
+
+      this.setState({results: pipelineResults.value});
+    } catch (error) {
+      // No handler
+    }
+
+    this.setState({pending: false});
+  }
+
+  render () {
+    if (this.state.pending) {
+      return (
+        <Row type={'flex'} style={{marginTop: 40}} justify="center" >
+          <Spin spinning={this.state.pending} />
+        </Row>
+      );
+    }
+
+    return (
+      <ResultTable resultItems={this.state.results} />
+    );
+  }
+}
+
+export default Reports;

client/src/components/runs/run-details/widgets/run-tabs/tabs.js

@@ -3,6 +3,7 @@ import {Icon} from 'antd';
 import {isNextflowEngine} from '../../utilities/helpers';
 import NextflowEngineTasks from '../../sections/nextflow-engine/tasks';
 import RunParametersSection from '../../sections/parameters';
+import Reports from '../../sections/reports';
 import RunLogsSection from '../../sections/logs';
 import RunLaunchCommandSection from '../../sections/launch-command';
 
@@ -22,6 +23,18 @@ export const nextflowTasksTab = {
   render: ({run}) => (<NextflowEngineTasks run={run} />)
 };
 
+export const reportTab = {
+  tab: 'reports',
+  title: 'Reports',
+  icon: <Icon type="copy" style={iconStyle} />,
+  render: (...props) => {
+    console.log(props);
+    // return (<Reports runId={run.id} />)
+
+    return (null)
+  }
+};
+
 export const logsTab = {
   tab: 'logs',
   title: 'Logs',
@@ -69,15 +82,20 @@ export function getRunTabs (run) {
   if (!run) {
     return [logsTab];
   }
+
   const tabs = [];
+
   if (isNextflowEngine(run)) {
     tabs.push(nextflowTasksTab);
     tabs.push(parametersTab);
     tabs.push(logsTab);
+    tabs.push(reportTab);
   } else {
     tabs.push(logsTab);
     tabs.push(parametersTab);
   }
+
   tabs.push(launchCommandTab);
+
   return tabs;
 }

client/src/models/pipelines/PipelineRunResults.js

@@ -0,0 +1,26 @@
+/*
+ * Copyright 2017-2019 EPAM Systems, Inc. (https://www.epam.com/)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Remote from '../basic/Remote';
+
+export default class PipelineRunResults extends Remote {
+  static defaultValue = [];
+
+  constructor (runId) {
+    super();
+    this.url = `/run/${runId}/result`;
+  };
+}