Browse Source

Merge "web: refactor build page using a container"

tags/3.4.0
Zuul 5 months ago
parent
commit
972f91962c
2 changed files with 91 additions and 58 deletions
  1. 89
    0
      web/src/containers/build/Build.jsx
  2. 2
    58
      web/src/pages/Build.jsx

+ 89
- 0
web/src/containers/build/Build.jsx View File

@@ -0,0 +1,89 @@
1
+// Copyright 2018 Red Hat, Inc
2
+//
3
+// Licensed under the Apache License, Version 2.0 (the "License"); you may
4
+// not use this file except in compliance with the License. You may obtain
5
+// a copy of the License at
6
+//
7
+//      http://www.apache.org/licenses/LICENSE-2.0
8
+//
9
+// Unless required by applicable law or agreed to in writing, software
10
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
11
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
12
+// License for the specific language governing permissions and limitations
13
+// under the License.
14
+
15
+import * as React from 'react'
16
+import PropTypes from 'prop-types'
17
+import { connect } from 'react-redux'
18
+import { Link } from 'react-router-dom'
19
+import { Panel } from 'react-bootstrap'
20
+
21
+
22
+class Build extends React.Component {
23
+  static propTypes = {
24
+    build: PropTypes.object,
25
+    tenant: PropTypes.object,
26
+  }
27
+
28
+  render () {
29
+    const { build } = this.props
30
+    const rows = []
31
+    const myColumns = [
32
+      'job_name', 'result', 'voting',
33
+      'pipeline', 'start_time', 'end_time', 'duration',
34
+      'project', 'branch', 'change', 'patchset', 'oldrev', 'newrev',
35
+      'ref', 'new_rev', 'ref_url', 'log_url']
36
+
37
+    myColumns.forEach(column => {
38
+      let label = column
39
+      let value = build[column]
40
+      if (column === 'job_name') {
41
+        label = 'job'
42
+        value = (
43
+          <Link to={this.props.tenant.linkPrefix + '/job/' + value}>
44
+            {value}
45
+          </Link>
46
+        )
47
+      }
48
+      if (column === 'voting') {
49
+        if (value) {
50
+          value = 'true'
51
+        } else {
52
+          value = 'false'
53
+        }
54
+      }
55
+      if (value && (column === 'log_url' || column === 'ref_url')) {
56
+        value = <a href={value}>{value}</a>
57
+      }
58
+      if (column === 'log_url') {
59
+        label = 'log url'
60
+      }
61
+      if (column === 'ref_url') {
62
+        label = 'ref url'
63
+      }
64
+      if (value) {
65
+        rows.push({key: label, value: value})
66
+      }
67
+    })
68
+    return (
69
+      <Panel>
70
+        <Panel.Heading>Build result {build.uuid}</Panel.Heading>
71
+        <Panel.Body>
72
+          <table className="table table-striped table-bordered">
73
+            <tbody>
74
+              {rows.map(item => (
75
+                <tr key={item.key}>
76
+                  <td>{item.key}</td>
77
+                  <td>{item.value}</td>
78
+                </tr>
79
+              ))}
80
+            </tbody>
81
+          </table>
82
+        </Panel.Body>
83
+      </Panel>
84
+    )
85
+  }
86
+}
87
+
88
+
89
+export default connect(state => ({tenant: state.tenant}))(Build)

+ 2
- 58
web/src/pages/Build.jsx View File

@@ -15,11 +15,10 @@
15 15
 import * as React from 'react'
16 16
 import { connect } from 'react-redux'
17 17
 import PropTypes from 'prop-types'
18
-import { Link } from 'react-router-dom'
19
-import { Panel } from 'react-bootstrap'
20 18
 
21 19
 import { fetchBuildIfNeeded } from '../actions/build'
22 20
 import Refreshable from '../containers/Refreshable'
21
+import Build from '../containers/build/Build'
23 22
 
24 23
 
25 24
 class BuildPage extends Refreshable {
@@ -42,67 +41,12 @@ class BuildPage extends Refreshable {
42 41
   render () {
43 42
     const { remoteData } = this.props
44 43
     const build = remoteData.builds[this.props.match.params.buildId]
45
-    if (!build) {
46
-      return (<p>Loading...</p>)
47
-    }
48
-    const rows = []
49
-    const myColumns = [
50
-      'job_name', 'result', 'voting',
51
-      'pipeline', 'start_time', 'end_time', 'duration',
52
-      'project', 'branch', 'change', 'patchset', 'oldrev', 'newrev',
53
-      'ref', 'new_rev', 'ref_url', 'log_url']
54
-
55
-    myColumns.forEach(column => {
56
-      let label = column
57
-      let value = build[column]
58
-      if (column === 'job_name') {
59
-        label = 'job'
60
-        value = (
61
-          <Link to={this.props.tenant.linkPrefix + '/job/' + value}>
62
-            {value}
63
-          </Link>
64
-        )
65
-      }
66
-      if (column === 'voting') {
67
-        if (value) {
68
-          value = 'true'
69
-        } else {
70
-          value = 'false'
71
-        }
72
-      }
73
-      if (value && (column === 'log_url' || column === 'ref_url')) {
74
-        value = <a href={value}>{value}</a>
75
-      }
76
-      if (column === 'log_url') {
77
-        label = 'log url'
78
-      }
79
-      if (column === 'ref_url') {
80
-        label = 'ref url'
81
-      }
82
-      if (value) {
83
-        rows.push({key: label, value: value})
84
-      }
85
-    })
86 44
     return (
87 45
       <React.Fragment>
88 46
         <div style={{float: 'right'}}>
89 47
           {this.renderSpinner()}
90 48
         </div>
91
-        <Panel>
92
-          <Panel.Heading>Build result {build.uuid}</Panel.Heading>
93
-          <Panel.Body>
94
-            <table className="table table-striped table-bordered">
95
-              <tbody>
96
-                {rows.map(item => (
97
-                  <tr key={item.key}>
98
-                    <td>{item.key}</td>
99
-                    <td>{item.value}</td>
100
-                  </tr>
101
-                ))}
102
-              </tbody>
103
-            </table>
104
-          </Panel.Body>
105
-        </Panel>
49
+        {build && <Build build={build}/>}
106 50
       </React.Fragment>
107 51
     )
108 52
   }

Loading…
Cancel
Save