Zuul-Web: Filter input validation for "Change"

User sometimes tends to copy the value from the "Change" column as a input
for filtering, which would cause a 500 error in API.

To fix this we do a input validation to indicate that the change must be
a integer for example a PR bumber. So that make it clear any other fomat
like a ref or a string with "," is not supported.

Change-Id: Ia25a60429acc48c5773c808be6a900ba9bdf608e

2 files changed, 46 insertions, 0 deletions

diff --git a/web/src/pages/Builds.jsx b/web/src/pages/Builds.jsx
index b89bcd678..f1c449ec0 100644
--- a/web/src/pages/Builds.jsx
+++ b/web/src/pages/Builds.jsx
@@ -195,6 +195,28 @@ class BuildsPage extends React.Component {
       this.updateData(filters)
     }
   }
+  
+  filterInputValidation = (filterKey, filterValue) => {
+    // Input value should not be empty for all cases
+    if (!filterValue) {
+      return {
+        success: false,
+        message: 'Input should not be empty'
+      }
+    }
+
+    // For change filter, it must be an integer
+    if (filterKey === 'change' && isNaN(filterValue)) {
+      return {
+        success: false,
+        message: 'Change must be an integer (do not include revision)'
+      }
+    }
+
+    return {
+      success: true
+    }
+  }
 
   handleFilterChange = (newFilters) => {
     const { location, history } = this.props
@@ -261,6 +283,7 @@ class BuildsPage extends React.Component {
           filterCategories={this.filterCategories}
           onFilterChange={this.handleFilterChange}
           filters={filters}
+          filterInputValidation={this.filterInputValidation}
         />
         <Pagination
           toggleTemplate={({ firstIndex, lastIndex, itemCount }) => (
diff --git a/web/src/pages/Buildsets.jsx b/web/src/pages/Buildsets.jsx
index 98d86d640..938309034 100644
--- a/web/src/pages/Buildsets.jsx
+++ b/web/src/pages/Buildsets.jsx
@@ -148,6 +148,28 @@ class BuildsetsPage extends React.Component {
     }
   }
 
+  filterInputValidation = (filterKey, filterValue) => {
+    // Input value should not be empty for all cases
+    if (!filterValue) {
+      return {
+        success: false,
+        message: 'Input should not be empty'
+      }
+    }
+
+    // For change filter, it must be an integer
+    if (filterKey === 'change' && isNaN(filterValue)) {
+      return {
+        success: false,
+        message: 'Change must be an integer (do not include revision)'
+      }
+    }
+
+    return {
+      success: true
+    }
+  }
+
   handleFilterChange = (newFilters) => {
     const { location, history } = this.props
     const { filters, itemCount } = this.state
@@ -213,6 +235,7 @@ class BuildsetsPage extends React.Component {
           filterCategories={this.filterCategories}
           onFilterChange={this.handleFilterChange}
           filters={filters}
+          filterInputValidation={this.filterInputValidation}
         />
         <Pagination
           toggleTemplate={({ firstIndex, lastIndex, itemCount }) => (