Merge "web: refactor jobs page to use a reducer"

web/src/actions/jobs.js

@@ -0,0 +1,61 @@
+/* global Promise */
+// Copyright 2018 Red Hat, Inc
+//
+// 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 * as API from '../api'
+
+export const JOBS_FETCH_REQUEST = 'JOBS_FETCH_REQUEST'
+export const JOBS_FETCH_SUCCESS = 'JOBS_FETCH_SUCCESS'
+export const JOBS_FETCH_FAIL = 'JOBS_FETCH_FAIL'
+
+export const requestJobs = () => ({
+  type: JOBS_FETCH_REQUEST
+})
+
+export const receiveJobs = (tenant, json) => ({
+  type: JOBS_FETCH_SUCCESS,
+  tenant: tenant,
+  jobs: json,
+  receivedAt: Date.now()
+})
+
+const failedJobs = error => ({
+  type: JOBS_FETCH_FAIL,
+  error
+})
+
+const fetchJobs = (tenant) => dispatch => {
+  dispatch(requestJobs())
+  return API.fetchJobs(tenant.apiPrefix)
+    .then(response => dispatch(receiveJobs(tenant.name, response.data)))
+    .catch(error => dispatch(failedJobs(error)))
+}
+
+const shouldFetchJobs = (tenant, state) => {
+  const jobs = state.jobs.jobs[tenant.name]
+  if (!jobs || jobs.length === 0) {
+    return true
+  }
+  if (jobs.isFetching) {
+    return false
+  }
+  return false
+}
+
+export const fetchJobsIfNeeded = (tenant, force) => (dispatch, getState) => {
+  if (force || shouldFetchJobs(tenant, getState())) {
+    return dispatch(fetchJobs(tenant))
+  }
+  return Promise.resolve()
+}

web/src/containers/jobs/Jobs.jsx

@@ -0,0 +1,84 @@
+// Copyright 2018 Red Hat, Inc
+//
+// 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 * as React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { Link } from 'react-router-dom'
+import { Table } from 'patternfly-react'
+
+
+class JobsList extends React.Component {
+  static propTypes = {
+    tenant: PropTypes.object,
+    jobs: PropTypes.array,
+  }
+
+  render () {
+    const { jobs } = this.props
+
+    const headerFormat = value => <Table.Heading>{value}</Table.Heading>
+    const cellFormat = (value) => (
+      <Table.Cell>{value}</Table.Cell>)
+    const cellJobFormat = (value) => (
+      <Table.Cell>
+        <Link to={this.props.tenant.linkPrefix + '/job/' + value}>
+          {value}
+        </Link>
+      </Table.Cell>)
+    const cellBuildFormat = (value) => (
+      <Table.Cell>
+        <Link to={this.props.tenant.linkPrefix + '/builds?job_name=' + value}>
+          builds
+        </Link>
+      </Table.Cell>)
+    const columns = []
+    const myColumns = ['name', 'description', 'Last builds']
+    myColumns.forEach(column => {
+      let formatter = cellFormat
+      let prop = column
+      if (column === 'name') {
+        formatter = cellJobFormat
+      }
+      if (column === 'Last builds') {
+        prop = 'name'
+        formatter = cellBuildFormat
+      }
+      columns.push({
+        header: {label: column,
+          formatters: [headerFormat]},
+        property: prop,
+        cell: {formatters: [formatter]}
+      })
+    })
+    return (
+      <Table.PfProvider
+        striped
+        bordered
+        hover
+        columns={columns}
+        >
+        <Table.Header/>
+        <Table.Body
+          rows={jobs}
+          rowKey="name"
+          />
+      </Table.PfProvider>
+    )
+  }
+}
+
+export default connect(state => ({
+  tenant: state.tenant,
+}))(JobsList)

web/src/pages/Jobs.jsx

@@ -15,94 +15,45 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import { Link } from 'react-router-dom'
-import { Table } from 'patternfly-react'
 
-import { fetchJobs } from '../api'
+import { fetchJobsIfNeeded } from '../actions/jobs'
+import Refreshable from '../containers/Refreshable'
+import Jobs from '../containers/jobs/Jobs'
 
 
-class JobsPage extends React.Component {
+class JobsPage extends Refreshable {
   static propTypes = {
-    tenant: PropTypes.object
+    tenant: PropTypes.object,
+    remoteData: PropTypes.object,
+    dispatch: PropTypes.func
   }
 
-  state = {
-    jobs: null
-  }
-
-  updateData () {
-    fetchJobs(this.props.tenant.apiPrefix).then(response => {
-      this.setState({jobs: response.data})
-    })
+  updateData (force) {
+    this.props.dispatch(fetchJobsIfNeeded(this.props.tenant, force))
   }
 
   componentDidMount () {
     document.title = 'Zuul Jobs'
-    if (this.props.tenant.name) {
-      this.updateData()
-    }
-  }
-
-  componentDidUpdate (prevProps) {
-    if (this.props.tenant.name !== prevProps.tenant.name) {
-      this.updateData()
-    }
+    super.componentDidMount()
   }
 
   render () {
-    const { jobs } = this.state
-    if (!jobs) {
-      return (<p>Loading...</p>)
-    }
-
-    const headerFormat = value => <Table.Heading>{value}</Table.Heading>
-    const cellFormat = (value) => (
-      <Table.Cell>{value}</Table.Cell>)
-    const cellJobFormat = (value) => (
-      <Table.Cell>
-        <Link to={this.props.tenant.linkPrefix + '/job/' + value}>
-          {value}
-        </Link>
-      </Table.Cell>)
-    const cellBuildFormat = (value) => (
-      <Table.Cell>
-        <Link to={this.props.tenant.linkPrefix + '/builds?job_name=' + value}>
-          builds
-        </Link>
-      </Table.Cell>)
-    const columns = []
-    const myColumns = ['name', 'description', 'Last builds']
-    myColumns.forEach(column => {
-      let formatter = cellFormat
-      let prop = column
-      if (column === 'name') {
-        formatter = cellJobFormat
-      }
-      if (column === 'Last builds') {
-        prop = 'name'
-        formatter = cellBuildFormat
-      }
-      columns.push({
-        header: {label: column,
-          formatters: [headerFormat]},
-        property: prop,
-        cell: {formatters: [formatter]}
-      })
-    })
+    const { remoteData } = this.props
+    const jobs = remoteData.jobs[this.props.tenant.name]
     return (
-      <Table.PfProvider
-        striped
-        bordered
-        hover
-        columns={columns}
-      >
-        <Table.Header/>
-        <Table.Body
-          rows={jobs}
-          rowKey="name"
-        />
-      </Table.PfProvider>)
+      <React.Fragment>
+        <div className="pull-right" style={{display: 'flex'}}>
+          {this.renderSpinner()}
+        </div>
+        {jobs && jobs.length > 0 &&
+          <Jobs
+              jobs={jobs}
+              />}
+      </React.Fragment>)
   }
 }
 
-export default connect(state => ({tenant: state.tenant}))(JobsPage)
+export default connect(state => ({
+  tenant: state.tenant,
+  remoteData: state.jobs,
+}))(JobsPage)

web/src/reducers/index.js

@@ -17,11 +17,13 @@ import { combineReducers } from 'redux'
 import configErrors from './configErrors'
 import errors from './errors'
 import info from './info'
+import jobs from './jobs'
 import status from './status'
 import tenant from './tenant'
 
 const reducers = {
   info,
+  jobs,
   configErrors,
   errors,
   status,

web/src/reducers/jobs.js

@@ -0,0 +1,46 @@
+// Copyright 2018 Red Hat, Inc
+//
+// 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 {
+  JOBS_FETCH_FAIL,
+  JOBS_FETCH_REQUEST,
+  JOBS_FETCH_SUCCESS
+} from '../actions/jobs'
+
+import update from 'immutability-helper'
+
+export default (state = {
+  isFetching: false,
+  jobs: {},
+}, action) => {
+  switch (action.type) {
+    case JOBS_FETCH_REQUEST:
+      return {
+        isFetching: true,
+        jobs: state.jobs,
+      }
+    case JOBS_FETCH_SUCCESS:
+      return {
+        isFetching: false,
+        jobs: update(state.jobs, {$merge: {[action.tenant]: action.jobs}}),
+      }
+    case JOBS_FETCH_FAIL:
+      return {
+        isFetching: false,
+        jobs: state.jobs,
+      }
+    default:
+      return state
+  }
+}