web: add flatten checkbox

This change adds a checkbox to display the jobs as a flat list.

Change-Id: Iaf7c8f9de356661c9ab24c83c409c59f866ffaaf

1 files changed, 28 insertions, 16 deletions

diff --git a/web/src/containers/jobs/Jobs.jsx b/web/src/containers/jobs/Jobs.jsx
index 6a83d9bc4..fd7cd8d41 100644
--- a/web/src/containers/jobs/Jobs.jsx
+++ b/web/src/containers/jobs/Jobs.jsx
@@ -17,6 +17,7 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 import {
+  Checkbox,
   Form,
   FormGroup,
   FormControl,
@@ -32,7 +33,8 @@ class JobsList extends React.Component {
   }
 
   state = {
-    filter: null
+    filter: null,
+    flatten: false,
   }
 
   handleKeyPress = (e) => {
@@ -45,7 +47,7 @@ class JobsList extends React.Component {
 
   render () {
     const { jobs } = this.props
-    const { filter } = this.state
+    const { filter, flatten } = this.state
 
     const linkPrefix = this.props.tenant.linkPrefix + '/job/'
 
@@ -84,8 +86,10 @@ class JobsList extends React.Component {
           filtered: filtered,
         }
         // Visit parent recursively
-        for (let parent of parents) {
-          getNode(jobMap[parent], filtered)
+        if (!flatten) {
+          for (let parent of parents) {
+            getNode(jobMap[parent], filtered)
+          }
         }
       }
       return visited[job.name]
@@ -110,19 +114,21 @@ class JobsList extends React.Component {
       const jobNode = getNode(job, filtered)
       if (!jobNode.filtered) {
         let attached = false
-        // add tree node to each parent and expand the parent
-        for (let parent of jobNode.parents) {
-          const parentNode = visited[parent]
-          if (!parentNode) {
-            console.log(
-              'Job ', job.name, ' parent ', parent, ' does not exist!')
-            continue
-          }
-          if (!parentNode.nodes) {
-            parentNode.nodes = []
+        if (!flatten) {
+          // add tree node to each parent and expand the parent
+          for (let parent of jobNode.parents) {
+            const parentNode = visited[parent]
+            if (!parentNode) {
+              console.log(
+                'Job ', job.name, ' parent ', parent, ' does not exist!')
+              continue
+            }
+            if (!parentNode.nodes) {
+              parentNode.nodes = []
+            }
+            parentNode.nodes.push(jobNode)
+            attached = true
           }
-          parentNode.nodes.push(jobNode)
-          attached = true
         }
         // else add node at the tree root
         if (!attached || jobNode.parents.length === 0) {
@@ -153,6 +159,12 @@ class JobsList extends React.Component {
               </FormControl.Feedback>
             )}
           </FormGroup>
+          <FormGroup controlId='jobs-flatten'>
+            &nbsp; Flatten list &nbsp;
+            <Checkbox
+              defaultChecked={flatten}
+              onChange={(e) => this.setState({flatten: e.target.checked})} />
+          </FormGroup>
         </Form>
         <TreeView nodes={nodes} />
       </div>