Merge "PF4: Update "fetching info ..." and refresh animation"

web/src/App.jsx

@@ -64,6 +64,7 @@ import {
 } from '@patternfly/react-icons'
 
 import ErrorBoundary from './containers/ErrorBoundary'
+import { Fetching } from './containers/Fetching'
 import SelectTz from './containers/timezone/SelectTz'
 import logo from './images/logo.svg'
 import { clearError } from './actions/errors'
@@ -126,7 +127,7 @@ class App extends React.Component {
     const allRoutes = []
 
     if (info.isFetching) {
-      return (<h2>Fetching info...</h2>)
+      return <Fetching />
     }
     this.menu
       // Do not include '/tenants' route in white-label setup

web/src/containers/Fetching.jsx

@@ -0,0 +1,74 @@
+// Copyright 2020 BMW Group
+//
+// 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 {
+  Button,
+  Title,
+  EmptyState,
+  EmptyStateVariant,
+  Spinner,
+} from '@patternfly/react-core'
+
+import { SyncIcon } from '@patternfly/react-icons'
+
+function Fetchable(props) {
+  const { isFetching, fetchCallback } = props
+  let content = null
+
+  if (isFetching) {
+    content = (
+      <div>
+        <Spinner size="md" />
+      </div>
+    )
+  } else {
+    content = (
+      <Button
+        variant="link"
+        isInline icon={<SyncIcon />}
+        onClick={() => {fetchCallback({force: true})}}
+        style={{textDecoration: 'none'}}
+      >
+        refresh
+      </Button>
+    )
+  }
+
+  return (
+    <div style={{float: 'right'}}>
+      {content}
+    </div>
+  )
+}
+
+Fetchable.propTypes = {
+  isFetching: PropTypes.bool,
+  fetchCallback: PropTypes.func,
+}
+
+function Fetching() {
+  return (
+    <EmptyState variant={EmptyStateVariant.small}>
+      <Spinner />
+      <Title headingLevel="h4" size="lg">
+        Fetching info...
+      </Title>
+    </EmptyState>
+  )
+}
+
+export { Fetchable, Fetching }

web/src/containers/Refreshable.jsx

@@ -1,57 +0,0 @@
-// 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.
-
-// Boiler plate code to manage refresh button
-
-import * as React from 'react'
-import PropTypes from 'prop-types'
-import {
-  Icon,
-  Spinner
-} from 'patternfly-react'
-
-
-class Refreshable extends React.Component {
-  static propTypes = {
-    tenant: PropTypes.object,
-    remoteData: PropTypes.object,
-  }
-
-  componentDidMount () {
-    if (this.props.tenant.name) {
-      this.updateData()
-    }
-  }
-
-  componentDidUpdate (prevProps) {
-    if (this.props.tenant.name !== prevProps.tenant.name) {
-      this.updateData()
-    }
-  }
-
-  renderSpinner () {
-    const { remoteData } = this.props
-    return (
-      <Spinner loading={ remoteData.isFetching }>
-        {/* Lint warning jsx-a11y/anchor-is-valid */}
-        {/* eslint-disable-next-line */}
-        <a className="refresh" onClick={() => {this.updateData(true)}}>
-          <Icon type="fa" name="refresh" /> refresh&nbsp;&nbsp;
-        </a>
-      </Spinner>
-    )
-  }
-}
-
-export default Refreshable

web/src/pages/Build.jsx

@@ -18,16 +18,17 @@ import PropTypes from 'prop-types'
 import { PageSection, PageSectionVariants } from '@patternfly/react-core'
 
 import { fetchBuildIfNeeded } from '../actions/build'
-import Refreshable from '../containers/Refreshable'
+import { Fetchable } from '../containers/Fetching'
 import Build from '../containers/build/Build'
 import Summary from '../containers/build/Summary'
 
 
-class BuildPage extends Refreshable {
+class BuildPage extends React.Component {
   static propTypes = {
     match: PropTypes.object.isRequired,
     remoteData: PropTypes.object,
-    tenant: PropTypes.object
+    tenant: PropTypes.object,
+    dispatch: PropTypes.func,
   }
 
   updateData = (force) => {
@@ -37,7 +38,15 @@ class BuildPage extends Refreshable {
 
   componentDidMount () {
     document.title = 'Zuul Build'
-    super.componentDidMount()
+    if (this.props.tenant.name) {
+      this.updateData()
+    }
+  }
+
+  componentDidUpdate (prevProps) {
+    if (this.props.tenant.name !== prevProps.tenant.name) {
+      this.updateData()
+    }
   }
 
   render () {
@@ -45,9 +54,12 @@ class BuildPage extends Refreshable {
     const build = remoteData.builds[this.props.match.params.buildId]
     return (
       <PageSection variant={PageSectionVariants.light}>
-        <div style={{float: 'right'}}>
-          {this.renderSpinner()}
-        </div>
+        <PageSection style={{paddingRight: '5px'}}>
+          <Fetchable
+            isFetching={remoteData.isFetching}
+            fetchCallback={this.updateData}
+          />
+        </PageSection>
       {build &&
        <Build build={build} active='summary'>
          <Summary build={build}/>

web/src/pages/BuildConsole.jsx

@@ -18,16 +18,18 @@ import PropTypes from 'prop-types'
 import { PageSection, PageSectionVariants } from '@patternfly/react-core'
 
 import { fetchBuildIfNeeded } from '../actions/build'
-import Refreshable from '../containers/Refreshable'
+import { Fetchable } from '../containers/Fetching'
 import Build from '../containers/build/Build'
 import Console from '../containers/build/Console'
 
 
-class BuildConsolePage extends Refreshable {
+class BuildConsolePage extends React.Component {
   static propTypes = {
     match: PropTypes.object.isRequired,
     remoteData: PropTypes.object,
-    tenant: PropTypes.object
+    tenant: PropTypes.object,
+    dispatch: PropTypes.func,
+    location: PropTypes.object,
   }
 
   updateData = (force) => {
@@ -37,7 +39,15 @@ class BuildConsolePage extends Refreshable {
 
   componentDidMount () {
     document.title = 'Zuul Build'
-    super.componentDidMount()
+    if (this.props.tenant.name) {
+      this.updateData()
+    }
+  }
+
+  componentDidUpdate (prevProps) {
+    if (this.props.tenant.name !== prevProps.tenant.name) {
+      this.updateData()
+    }
   }
 
   render () {
@@ -47,9 +57,12 @@ class BuildConsolePage extends Refreshable {
 
     return (
       <PageSection variant={PageSectionVariants.light}>
-        <div style={{float: 'right'}}>
-          {this.renderSpinner()}
-        </div>
+        <PageSection style={{paddingRight: '5px'}}>
+          <Fetchable
+            isFetching={remoteData.isFetching}
+            fetchCallback={this.updateData}
+          />
+        </PageSection>
         {build && build.output &&
          <Build build={build} active='console'>
            <Console

web/src/pages/BuildLogs.jsx

@@ -18,16 +18,17 @@ import PropTypes from 'prop-types'
 import { PageSection, PageSectionVariants } from '@patternfly/react-core'
 
 import { fetchBuildIfNeeded } from '../actions/build'
-import Refreshable from '../containers/Refreshable'
+import { Fetchable } from '../containers/Fetching'
 import Build from '../containers/build/Build'
 import Manifest from '../containers/build/Manifest'
 
 
-class BuildLogsPage extends Refreshable {
+class BuildLogsPage extends React.Component {
   static propTypes = {
     match: PropTypes.object.isRequired,
     remoteData: PropTypes.object,
-    tenant: PropTypes.object
+    tenant: PropTypes.object,
+    dispatch: PropTypes.func,
   }
 
   updateData = (force) => {
@@ -37,7 +38,15 @@ class BuildLogsPage extends Refreshable {
 
   componentDidMount () {
     document.title = 'Zuul Build'
-    super.componentDidMount()
+    if (this.props.tenant.name) {
+      this.updateData()
+    }
+  }
+
+  componentDidUpdate (prevProps) {
+    if (this.props.tenant.name !== prevProps.tenant.name) {
+      this.updateData()
+    }
   }
 
   render () {
@@ -45,9 +54,12 @@ class BuildLogsPage extends Refreshable {
     const build = remoteData.builds[this.props.match.params.buildId]
     return (
       <PageSection variant={PageSectionVariants.light}>
-        <div style={{float: 'right'}}>
-          {this.renderSpinner()}
-        </div>
+        <PageSection style={{paddingRight: '5px'}}>
+          <Fetchable
+            isFetching={remoteData.isFetching}
+            fetchCallback={this.updateData}
+          />
+        </PageSection>
         {build && build.manifest &&
          <Build build={build} active='logs'>
            <Manifest tenant={this.props.tenant} build={build}/>

web/src/pages/Buildset.jsx

@@ -18,15 +18,16 @@ import PropTypes from 'prop-types'
 import { PageSection, PageSectionVariants } from '@patternfly/react-core'
 
 import { fetchBuildsetIfNeeded } from '../actions/build'
-import Refreshable from '../containers/Refreshable'
+import { Fetchable } from '../containers/Fetching'
 import Buildset from '../containers/build/Buildset'
 
 
-class BuildsetPage extends Refreshable {
+class BuildsetPage extends React.Component {
   static propTypes = {
     match: PropTypes.object.isRequired,
     remoteData: PropTypes.object,
-    tenant: PropTypes.object
+    tenant: PropTypes.object,
+    dispatch: PropTypes.func,
   }
 
   updateData = (force) => {
@@ -36,17 +37,29 @@ class BuildsetPage extends Refreshable {
 
   componentDidMount () {
     document.title = 'Zuul Buildset'
-    super.componentDidMount()
+    if (this.props.tenant.name) {
+      this.updateData()
+    }
+  }
+
+  componentDidUpdate (prevProps) {
+    if (this.props.tenant.name !== prevProps.tenant.name) {
+      this.updateData()
+    }
   }
 
   render () {
     const { remoteData } = this.props
+
     const buildset = remoteData.buildsets[this.props.match.params.buildsetId]
     return (
       <PageSection variant={PageSectionVariants.light}>
-        <div style={{float: 'right'}}>
-          {this.renderSpinner()}
-        </div>
+        <PageSection style={{paddingRight: '5px'}}>
+          <Fetchable
+            isFetching={remoteData.isFetching}
+            fetchCallback={this.updateData}
+          />
+        </PageSection>
         {buildset && <Buildset buildset={buildset}/>}
       </PageSection>
     )

web/src/pages/ChangeStatus.jsx

@@ -19,10 +19,10 @@ import { PageSection, PageSectionVariants } from '@patternfly/react-core'
 
 import { fetchChangeIfNeeded } from '../actions/change'
 import ChangePanel from '../containers/status/ChangePanel'
-import Refreshable from '../containers/Refreshable'
+import { Fetchable } from '../containers/Fetching'
 
 
-class ChangeStatusPage extends Refreshable {
+class ChangeStatusPage extends React.Component {
   static propTypes = {
     match: PropTypes.object.isRequired,
     tenant: PropTypes.object,
@@ -43,7 +43,15 @@ class ChangeStatusPage extends Refreshable {
 
   componentDidMount () {
     document.title = this.props.match.params.changeId + ' | Zuul Status'
-    super.componentDidMount()
+    if (this.props.tenant.name) {
+      this.updateData()
+    }
+  }
+
+  componentDidUpdate (prevProps) {
+    if (this.props.tenant.name !== prevProps.tenant.name) {
+      this.updateData()
+    }
   }
 
   componentWillUnmount () {
@@ -58,9 +66,12 @@ class ChangeStatusPage extends Refreshable {
     const change = remoteData.change
     return (
       <PageSection variant={PageSectionVariants.light}>
-        <div style={{float: 'right'}}>
-          {this.renderSpinner()}
-        </div><br />
+        <PageSection style={{paddingRight: '5px'}}>
+          <Fetchable
+            isFetching={remoteData.isFetching}
+            fetchCallback={this.updateData}
+          />
+        </PageSection>
         {change && change.map((item, idx) => (
           <div className='row zuul-change-content' key={idx}>
             <ChangePanel

web/src/pages/Job.jsx

@@ -18,11 +18,11 @@ import PropTypes from 'prop-types'
 import { PageSection, PageSectionVariants } from '@patternfly/react-core'
 
 import Job from '../containers/job/Job'
-import Refreshable from '../containers/Refreshable'
+import { Fetchable } from '../containers/Fetching'
 import { fetchJobIfNeeded } from '../actions/job'
 
 
-class JobPage extends Refreshable {
+class JobPage extends React.Component {
   static propTypes = {
     match: PropTypes.object.isRequired,
     tenant: PropTypes.object,
@@ -37,7 +37,9 @@ class JobPage extends Refreshable {
 
   componentDidMount () {
     document.title = 'Zuul Job | ' + this.props.match.params.jobName
-    super.componentDidMount()
+    if (this.props.tenant.name) {
+      this.updateData()
+    }
   }
 
   componentDidUpdate (prevProps) {
@@ -53,9 +55,12 @@ class JobPage extends Refreshable {
     const jobName = this.props.match.params.jobName
     return (
       <PageSection variant={PageSectionVariants.light}>
-        <div style={{float: 'right'}}>
-          {this.renderSpinner()}
-        </div>
+        <PageSection style={{paddingRight: '5px'}}>
+          <Fetchable
+            isFetching={remoteData.isFetching}
+            fetchCallback={this.updateData}
+          />
+        </PageSection>
         {tenantJobs && tenantJobs[jobName] && <Job job={tenantJobs[jobName]} />}
       </PageSection>
     )

web/src/pages/Jobs.jsx

@@ -18,34 +18,46 @@ import { connect } from 'react-redux'
 import { PageSection, PageSectionVariants } from '@patternfly/react-core'
 
 import { fetchJobsIfNeeded } from '../actions/jobs'
-import Refreshable from '../containers/Refreshable'
+import { Fetchable } from '../containers/Fetching'
 import Jobs from '../containers/jobs/Jobs'
 
 
-class JobsPage extends Refreshable {
+class JobsPage extends React.Component {
   static propTypes = {
     tenant: PropTypes.object,
     remoteData: PropTypes.object,
     dispatch: PropTypes.func
   }
 
-  updateData (force) {
+  updateData = (force) => {
     this.props.dispatch(fetchJobsIfNeeded(this.props.tenant, force))
   }
 
   componentDidMount () {
     document.title = 'Zuul Jobs'
-    super.componentDidMount()
+    if (this.props.tenant.name) {
+      this.updateData()
+    }
+  }
+
+  componentDidUpdate (prevProps) {
+    if (this.props.tenant.name !== prevProps.tenant.name) {
+      this.updateData()
+    }
   }
 
   render () {
     const { remoteData } = this.props
+
     const jobs = remoteData.jobs[this.props.tenant.name]
     return (
       <PageSection variant={PageSectionVariants.light}>
-        <div style={{float: 'right'}}>
-          {this.renderSpinner()}
-        </div>
+        <PageSection style={{paddingRight: '5px'}}>
+          <Fetchable
+            isFetching={remoteData.isFetching}
+            fetchCallback={this.updateData}
+          />
+        </PageSection>
         {jobs && jobs.length > 0 &&
           <Jobs
               jobs={jobs}

web/src/pages/Labels.jsx

@@ -19,10 +19,10 @@ import { Table } from 'patternfly-react'
 import { PageSection, PageSectionVariants } from '@patternfly/react-core'
 
 import { fetchLabelsIfNeeded } from '../actions/labels'
-import Refreshable from '../containers/Refreshable'
+import { Fetchable, Fetching } from '../containers/Fetching'
 
 
-class LabelsPage extends Refreshable {
+class LabelsPage extends React.Component {
   static propTypes = {
     tenant: PropTypes.object,
     remoteData: PropTypes.object,
@@ -35,7 +35,15 @@ class LabelsPage extends Refreshable {
 
   componentDidMount () {
     document.title = 'Zuul Labels'
-    super.componentDidMount()
+    if (this.props.tenant.name) {
+      this.updateData()
+    }
+  }
+
+  componentDidUpdate (prevProps) {
+    if (this.props.tenant.name !== prevProps.tenant.name) {
+      this.updateData()
+    }
   }
 
   render () {
@@ -43,7 +51,7 @@ class LabelsPage extends Refreshable {
     const labels = remoteData.labels[this.props.tenant.name]
 
     if (!labels) {
-      return (<p>Loading...</p>)
+      return <Fetching />
     }
 
     const headerFormat = value => <Table.Heading>{value}</Table.Heading>
@@ -61,9 +69,12 @@ class LabelsPage extends Refreshable {
     })
     return (
       <PageSection variant={PageSectionVariants.light}>
-        <div style={{float: 'right'}}>
-          {this.renderSpinner()}
-        </div>
+        <PageSection style={{paddingRight: '5px'}}>
+          <Fetchable
+            isFetching={remoteData.isFetching}
+            fetchCallback={this.updateData}
+          />
+        </PageSection>
         <Table.PfProvider
           striped
           bordered

web/src/pages/LogFile.jsx

@@ -19,15 +19,18 @@ import { parse } from 'query-string'
 import { PageSection, PageSectionVariants } from '@patternfly/react-core'
 
 import { fetchLogfileIfNeeded } from '../actions/logfile'
-import Refreshable from '../containers/Refreshable'
+import { Fetching } from '../containers/Fetching'
 import LogFile from '../containers/logfile/LogFile'
 
 
-class LogFilePage extends Refreshable {
+class LogFilePage extends React.Component {
   static propTypes = {
     match: PropTypes.object.isRequired,
     remoteData: PropTypes.object,
     tenant: PropTypes.object,
+    dispatch: PropTypes.func,
+    location: PropTypes.object,
+    build: PropTypes.object,
   }
 
   state = {
@@ -45,7 +48,9 @@ class LogFilePage extends Refreshable {
 
   componentDidMount () {
     document.title = 'Zuul Build Logfile'
-    super.componentDidMount()
+    if (this.props.tenant.name) {
+      this.updateData()
+    }
   }
 
   highlightDidUpdate = (lines) => {
@@ -108,13 +113,14 @@ class LogFilePage extends Refreshable {
 
   render () {
     const { remoteData } = this.props
+    if (remoteData.isFetching) {
+      return <Fetching />
+    }
+
     const build = this.props.build.builds[this.props.match.params.buildId]
     const severity = parse(this.props.location.search).severity
     return (
       <PageSection variant={PageSectionVariants.light}>
-        <div style={{float: 'right'}}>
-          {this.renderSpinner()}
-        </div>
         {remoteData.data && <LogFile build={build} data={remoteData.data} severity={severity}/>}
       </PageSection>
     )

web/src/pages/Nodes.jsx

@@ -20,23 +20,31 @@ import * as moment from 'moment'
 import { PageSection, PageSectionVariants } from '@patternfly/react-core'
 
 import { fetchNodesIfNeeded } from '../actions/nodes'
-import Refreshable from '../containers/Refreshable'
+import { Fetchable } from '../containers/Fetching'
 
 
-class NodesPage extends Refreshable {
+class NodesPage extends React.Component {
   static propTypes = {
     tenant: PropTypes.object,
     remoteData: PropTypes.object,
     dispatch: PropTypes.func
   }
 
-  updateData (force) {
+  updateData = (force) => {
     this.props.dispatch(fetchNodesIfNeeded(this.props.tenant, force))
   }
 
   componentDidMount () {
     document.title = 'Zuul Nodes'
-    super.componentDidMount()
+    if (this.props.tenant.name) {
+      this.updateData()
+    }
+  }
+
+  componentDidUpdate (prevProps) {
+    if (this.props.tenant.name !== prevProps.tenant.name) {
+      this.updateData()
+    }
   }
 
   render () {
@@ -83,9 +91,12 @@ class NodesPage extends Refreshable {
     })
     return (
       <PageSection variant={PageSectionVariants.light}>
-        <div style={{float: 'right'}}>
-          {this.renderSpinner()}
-        </div>
+        <PageSection style={{paddingRight: '5px'}}>
+          <Fetchable
+            isFetching={remoteData.isFetching}
+            fetchCallback={this.updateData}
+          />
+        </PageSection>
         <Table.PfProvider
           striped
           bordered

web/src/pages/OpenApi.jsx

@@ -20,10 +20,9 @@ import 'swagger-ui/dist/swagger-ui.css'
 import { PageSection, PageSectionVariants } from '@patternfly/react-core'
 
 import { fetchOpenApiIfNeeded } from '../actions/openapi'
-import Refreshable from '../containers/Refreshable'
 
 
-class OpenApiPage extends Refreshable {
+class OpenApiPage extends React.Component {
   static propTypes = {
     tenant: PropTypes.object,
     remoteData: PropTypes.object,
@@ -53,9 +52,6 @@ class OpenApiPage extends Refreshable {
   render() {
     return (
       <PageSection variant={PageSectionVariants.light}>
-        <div className="pull-right" style={{display: 'flex'}}>
-          {this.renderSpinner()}
-        </div>
         <div id="swaggerContainer" />
       </PageSection>
     )

web/src/pages/Project.jsx

@@ -19,10 +19,10 @@ import { PageSection, PageSectionVariants } from '@patternfly/react-core'
 
 import Project from '../containers/project/Project'
 import { fetchProjectIfNeeded } from '../actions/project'
-import Refreshable from '../containers/Refreshable'
+import { Fetchable } from '../containers/Fetching'
 
 
-class ProjectPage extends Refreshable {
+class ProjectPage extends React.Component {
   static propTypes = {
     match: PropTypes.object.isRequired,
     tenant: PropTypes.object,
@@ -37,7 +37,15 @@ class ProjectPage extends Refreshable {
 
   componentDidMount () {
     document.title = 'Zuul Project | ' + this.props.match.params.projectName
-    super.componentDidMount()
+    if (this.props.tenant.name) {
+      this.updateData()
+    }
+  }
+
+  componentDidUpdate (prevProps) {
+    if (this.props.tenant.name !== prevProps.tenant.name) {
+      this.updateData()
+    }
   }
 
   render () {
@@ -46,9 +54,12 @@ class ProjectPage extends Refreshable {
     const projectName = this.props.match.params.projectName
     return (
       <PageSection variant={PageSectionVariants.light}>
-        <div style={{float: 'right'}}>
-          {this.renderSpinner()}
-        </div>
+        <PageSection style={{paddingRight: '5px'}}>
+          <Fetchable
+            isFetching={remoteData.isFetching}
+            fetchCallback={this.updateData}
+          />
+        </PageSection>
         {tenantProjects && tenantProjects[projectName] &&
          <Project project={tenantProjects[projectName]} />}
       </PageSection>

web/src/pages/Projects.jsx

@@ -20,31 +20,43 @@ import { Table } from 'patternfly-react'
 import { PageSection, PageSectionVariants } from '@patternfly/react-core'
 
 import { fetchProjectsIfNeeded } from '../actions/projects'
-import Refreshable from '../containers/Refreshable'
+import { Fetchable, Fetching } from '../containers/Fetching'
 
 
-class ProjectsPage extends Refreshable {
+class ProjectsPage extends React.Component {
   static propTypes = {
     tenant: PropTypes.object,
     remoteData: PropTypes.object,
     dispatch: PropTypes.func
   }
 
-  updateData (force) {
+  updateData = (force) => {
     this.props.dispatch(fetchProjectsIfNeeded(this.props.tenant, force))
   }
 
   componentDidMount () {
     document.title = 'Zuul Projects'
-    super.componentDidMount()
+    if (this.props.tenant.name) {
+      this.updateData()
+    }
+  }
+
+  componentDidUpdate (prevProps) {
+    if (this.props.tenant.name !== prevProps.tenant.name) {
+      this.updateData()
+    }
   }
 
   render () {
     const { remoteData } = this.props
     const projects = remoteData.projects[this.props.tenant.name]
 
+    // TODO (felix): Can we somehow differentiate between "no projects yet" (due
+    // to fetching) and "no projects at all", so we could show an empty state
+    // in the latter case. The same applies for other pages like labels, nodes,
+    // buildsets, ... as well.
     if (!projects) {
-      return (<p>Loading...</p>)
+      return <Fetching />
     }
 
     const headerFormat = value => <Table.Heading>{value}</Table.Heading>
@@ -86,9 +98,12 @@ class ProjectsPage extends Refreshable {
     })
     return (
       <PageSection variant={PageSectionVariants.light}>
-        <div style={{float: 'right'}}>
-          {this.renderSpinner()}
-        </div>
+        <PageSection style={{paddingRight: '5px'}}>
+          <Fetchable
+            isFetching={remoteData.isFetching}
+            fetchCallback={this.updateData}
+          />
+        </PageSection>
         <Table.PfProvider
           striped
           bordered

web/src/pages/Status.jsx

@@ -27,10 +27,10 @@ import { PageSection, PageSectionVariants } from '@patternfly/react-core'
 
 import { fetchStatusIfNeeded } from '../actions/status'
 import Pipeline from '../containers/status/Pipeline'
-import Refreshable from '../containers/Refreshable'
+import { Fetchable } from '../containers/Fetching'
 
 
-class StatusPage extends Refreshable {
+class StatusPage extends React.Component {
   static propTypes = {
     location: PropTypes.object,
     tenant: PropTypes.object,
@@ -96,10 +96,18 @@ class StatusPage extends Refreshable {
   componentDidMount () {
     document.title = 'Zuul Status'
     this.loadState()
-    super.componentDidMount()
+    if (this.props.tenant.name) {
+      this.updateData()
+    }
     window.addEventListener('storage', this.loadState)
   }
 
+  componentDidUpdate (prevProps) {
+    if (this.props.tenant.name !== prevProps.tenant.name) {
+      this.updateData()
+    }
+  }
+
   componentWillUnmount () {
     if (this.timer) {
       clearTimeout(this.timer)
@@ -214,12 +222,15 @@ class StatusPage extends Refreshable {
     )
     return (
       <PageSection variant={PageSectionVariants.light}>
-        <div className="pull-right" style={{display: 'flex'}}>
-          {this.renderSpinner()}
+        <div style={{display: 'flex', float: 'right'}}>
+          <Fetchable
+            isFetching={remoteData.isFetching}
+            fetchCallback={this.updateData}
+          />
           <Checkbox
             defaultChecked={autoReload}
             onChange={(e) => {this.setState({autoReload: e.target.checked})}}
-            style={{marginTop: '0px'}}>
+            style={{marginTop: '0px', marginLeft: '10px'}}>
             auto reload
           </Checkbox>
         </div>

web/src/pages/Tenants.jsx

@@ -19,11 +19,11 @@ import { Link } from 'react-router-dom'
 import { Table } from 'patternfly-react'
 import { PageSection, PageSectionVariants } from '@patternfly/react-core'
 
-import Refreshable from '../containers/Refreshable'
+import { Fetching } from '../containers/Fetching'
 import { fetchTenantsIfNeeded } from '../actions/tenants'
 
 
-class TenantsPage extends Refreshable {
+class TenantsPage extends React.Component {
   static propTypes = {
     remoteData: PropTypes.object,
     dispatch: PropTypes.func
@@ -43,6 +43,10 @@ class TenantsPage extends Refreshable {
 
   render () {
     const { remoteData } = this.props
+    if (remoteData.isFetching) {
+      return <Fetching />
+    }
+
     const tenants = remoteData.tenants
     const headerFormat = value => <Table.Heading>{value}</Table.Heading>
     const cellFormat = (value) => (
@@ -79,9 +83,6 @@ class TenantsPage extends Refreshable {
     })
     return (
       <PageSection variant={PageSectionVariants.light}>
-        <div style={{float: 'right'}}>
-          {this.renderSpinner()}
-        </div>
         <Table.PfProvider
           striped
           bordered