web: store status filter in the location hash

This change replaces the localStorage by the location hash to
store search filter so that different filter can be used on
different tabs.

Change-Id: I949adc4e1df4dfd26eb8d66b7f87e0e3ef1f28f8

web/src/Misc.jsx

@@ -16,6 +16,11 @@ import * as React from 'react'
 import PropTypes from 'prop-types'
 import { ExternalLinkAltIcon } from '@patternfly/react-icons'
 
+function removeHash() {
+  // Remove location hash from url
+  window.history.pushState('', document.title, window.location.pathname)
+}
+
 function ExternalLink(props) {
   const { target } = props
 
@@ -87,4 +92,4 @@ function buildExternalTableLink(buildish) {
   return null
 }
 
-export { ExternalLink, buildExternalLink, buildExternalTableLink }
+export { removeHash, ExternalLink, buildExternalLink, buildExternalTableLink }

web/src/pages/Status.jsx

@@ -28,6 +28,7 @@ import { PageSection, PageSectionVariants } from '@patternfly/react-core'
 import { fetchStatusIfNeeded } from '../actions/status'
 import Pipeline from '../containers/status/Pipeline'
 import { Fetchable } from '../containers/Fetching'
+import { removeHash } from '../Misc'
 
 
 class StatusPage extends React.Component {
@@ -57,7 +58,6 @@ class StatusPage extends React.Component {
   constructor () {
     super()
 
-    this.filterLoaded = false
     this.timer = null
     this.visible = true
 
@@ -125,9 +125,15 @@ class StatusPage extends React.Component {
   }
 
   setFilter = (filter) => {
+    // Update form ref value
     this.filter.value = filter
+    // Store value in location
+    if (filter) {
+      window.location.hash = '#' + filter
+    } else {
+      removeHash()
+    }
     this.setState({filter: filter})
-    localStorage.setItem('zuul_filter_string', filter)
   }
 
   handleKeyPress = (e) => {
@@ -144,15 +150,11 @@ class StatusPage extends React.Component {
   }
 
   loadState = () => {
-    let filter = localStorage.getItem('zuul_filter_string') || ''
+    const filter = this.props.location.hash ? this.props.location.hash.slice(1) : null
     let expanded = localStorage.getItem('zuul_expand_by_default') || false
     if (typeof expanded === 'string') {
       expanded = (expanded === 'true')
     }
-
-    if (this.props.location.hash) {
-      filter = this.props.location.hash.slice(1)
-    }
     if (filter || expanded) {
       this.setState({
         filter: filter,
@@ -193,10 +195,6 @@ class StatusPage extends React.Component {
     const { remoteData } = this.props
     const { filter, expanded } = this.state
     const status = remoteData.status
-    if (this.filter && !this.filterLoaded && filter) {
-      this.filterLoaded = true
-      this.filter.value = filter
-    }
     const statusControl = (
       <Form inline>
         <FormGroup controlId='status'>