Browse Source

web: add jobs list filter

This change improves the job list page to enable filtering.

Change-Id: I81e12c0c473010f65ccae66d36b43bfcdd531f9e
tags/3.7.0
Tristan Cacqueray 2 months ago
parent
commit
0999d5d840
1 changed files with 76 additions and 20 deletions
  1. 76
    20
      web/src/containers/jobs/Jobs.jsx

+ 76
- 20
web/src/containers/jobs/Jobs.jsx View File

@@ -16,7 +16,13 @@ import * as React from 'react'
16 16
 import PropTypes from 'prop-types'
17 17
 import { connect } from 'react-redux'
18 18
 import { Link } from 'react-router-dom'
19
-import { TreeView } from 'patternfly-react'
19
+import {
20
+  Form,
21
+  FormGroup,
22
+  FormControl,
23
+  Icon,
24
+  TreeView
25
+} from 'patternfly-react'
20 26
 
21 27
 
22 28
 class JobsList extends React.Component {
@@ -25,8 +31,21 @@ class JobsList extends React.Component {
25 31
     jobs: PropTypes.array,
26 32
   }
27 33
 
34
+  state = {
35
+    filter: null
36
+  }
37
+
38
+  handleKeyPress = (e) => {
39
+    if (e.charCode === 13) {
40
+      this.setState({filter: e.target.value})
41
+      e.preventDefault()
42
+      e.target.blur()
43
+    }
44
+  }
45
+
28 46
   render () {
29 47
     const { jobs } = this.props
48
+    const { filter } = this.state
30 49
 
31 50
     const linkPrefix = this.props.tenant.linkPrefix + '/job/'
32 51
 
@@ -37,7 +56,7 @@ class JobsList extends React.Component {
37 56
     // visited contains individual node
38 57
     const visited = {}
39 58
     // getNode returns the tree node and visit each parents
40
-    const getNode = function (job) {
59
+    const getNode = function (job, filtered) {
41 60
       if (!visited[job.name]) {
42 61
         // Collect parents
43 62
         let parents = []
@@ -62,10 +81,11 @@ class JobsList extends React.Component {
62 81
             expanded: true,
63 82
           },
64 83
           parents: parents,
84
+          filtered: filtered,
65 85
         }
66 86
         // Visit parent recursively
67 87
         for (let parent of parents) {
68
-          getNode(jobMap[parent])
88
+          getNode(jobMap[parent], filtered)
69 89
         }
70 90
       }
71 91
       return visited[job.name]
@@ -74,30 +94,66 @@ class JobsList extends React.Component {
74 94
     for (let job of jobs) {
75 95
       jobMap[job.name] = job
76 96
     }
97
+    // filter job
98
+    let filtered = false
99
+    if (filter) {
100
+      filtered = true
101
+      for (let job of jobs) {
102
+        if (job.name.indexOf(filter) !== -1 ||
103
+            (job.description && job.description.indexOf(filter) !== -1)) {
104
+          getNode(job, !filtered)
105
+        }
106
+      }
107
+    }
77 108
     // process job list
78 109
     for (let job of jobs) {
79
-      const jobNode = getNode(job)
80
-      let attached = false
81
-      // add tree node to each parent and expand the parent
82
-      for (let parent of jobNode.parents) {
83
-        const parentNode = visited[parent]
84
-        if (!parentNode) {
85
-          console.log('Job ', job.name, ' parent ', parent, ' does not exist!')
86
-          continue
110
+      const jobNode = getNode(job, filtered)
111
+      if (!jobNode.filtered) {
112
+        let attached = false
113
+        // add tree node to each parent and expand the parent
114
+        for (let parent of jobNode.parents) {
115
+          const parentNode = visited[parent]
116
+          if (!parentNode) {
117
+            console.log(
118
+              'Job ', job.name, ' parent ', parent, ' does not exist!')
119
+            continue
120
+          }
121
+          if (!parentNode.nodes) {
122
+            parentNode.nodes = []
123
+          }
124
+          parentNode.nodes.push(jobNode)
125
+          attached = true
87 126
         }
88
-        if (!parentNode.nodes) {
89
-          parentNode.nodes = []
127
+        // else add node at the tree root
128
+        if (!attached || jobNode.parents.length === 0) {
129
+          nodes.push(jobNode)
90 130
         }
91
-        parentNode.nodes.push(jobNode)
92
-        attached = true
93
-      }
94
-      // else add node at the tree root
95
-      if (!attached || jobNode.parents.length === 0) {
96
-        nodes.push(jobNode)
97 131
       }
98 132
     }
99 133
     return (
100
-      <div className='tree-view-container'>
134
+      <div className="tree-view-container">
135
+        <Form inline>
136
+          <FormGroup controlId='jobs'>
137
+            <FormControl
138
+              type='text'
139
+              placeholder='job name'
140
+              defaultValue={filter}
141
+              inputRef={i => this.filter = i}
142
+              onKeyPress={this.handleKeyPress} />
143
+            {filter && (
144
+              <FormControl.Feedback>
145
+                <span
146
+                  onClick={() => {this.setState({filter: ''})
147
+                                 this.filter.value = ''}}
148
+                  style={{cursor: 'pointer', zIndex: 10, pointerEvents: 'auto'}}
149
+                >
150
+                  <Icon type='pf' title='Clear filter' name='delete' />
151
+                  &nbsp;
152
+                </span>
153
+              </FormControl.Feedback>
154
+            )}
155
+          </FormGroup>
156
+        </Form>
101 157
         <TreeView nodes={nodes} />
102 158
       </div>
103 159
     )

Loading…
Cancel
Save