From 2a97ca40a97ed5b4ca3f2f6efe7af8c12cbaf803 Mon Sep 17 00:00:00 2001
From: CD Cabrera <ccabrera@redhat.com>
Date: Wed, 12 Aug 2020 20:45:52 -0400
Subject: [PATCH] fix(toolbar): issues/377 openshiftView, remove usage filter
 (#378)

* graphCard,c3GraphCard, switch redux granularity type
* locale, i18n, switch toolbar strings to context
* openshiftView, rhelView, apply filters for toolbar
* redux, queryTypes, viewReducer, granularity, sla, usage types
* toolbar, convert to config based filter display
* toolbarTypes, use context for locale strings
---
 public/locales/en-US.json                     |  10 +-
 src/components/c3GraphCard/c3GraphCard.js     |   2 +-
 src/components/graphCard/graphCard.js         |   2 +-
 .../__tests__/__snapshots__/i18n.test.js.snap |  38 ++--
 .../__snapshots__/openshiftView.test.js.snap  |  21 ++
 src/components/openshiftView/openshiftView.js |  17 +-
 .../__snapshots__/rhelView.test.js.snap       |  33 +++
 src/components/rhelView/rhelView.js           |  20 +-
 .../__snapshots__/toolbar.test.js.snap        | 146 +++++++++----
 .../__snapshots__/toolbarTypes.test.js.snap   |   8 +-
 .../toolbar/__tests__/toolbar.test.js         |  22 +-
 src/components/toolbar/toolbar.js             | 191 +++++++++---------
 src/components/toolbar/toolbarTypes.js        |   4 +-
 .../__snapshots__/viewReducer.test.js.snap    |  44 ++--
 .../reducers/__tests__/viewReducer.test.js    |   4 +-
 src/redux/reducers/viewReducer.js             |   6 +-
 .../__snapshots__/index.test.js.snap          |  40 ++--
 src/redux/types/queryTypes.js                 |  42 ++--
 18 files changed, 427 insertions(+), 223 deletions(-)

diff --git a/public/locales/en-US.json b/public/locales/en-US.json
index e2e45ef32..09fb083cb 100644
--- a/public/locales/en-US.json
+++ b/public/locales/en-US.json
@@ -50,15 +50,15 @@
   },
   "curiosity-toolbar": {
     "category": "Filter by",
-    "categoryPlaceholder": "Filter by",
-    "slaCategory": "SLA",
+    "placeholder": "Filter by",
+    "category_sla": "SLA",
+    "placeholder_sla": "Filter by SLA",
+    "category_usage": "Usage",
+    "placeholder_usage": "Filter by usage",
     "slaNone": "No SLA",
-    "slaPlaceholder": "Filter by SLA",
     "slaPremium": "Premium",
     "slaSelfSupport": "Self-Support",
     "slaStandard": "Standard",
-    "usageCategory": "Usage",
-    "usagePlaceholder": "Filter by usage",
     "usageDevelopment": "Development/Test",
     "usageDisaster": "Disaster Recovery",
     "usageProduction": "Production",
diff --git a/src/components/c3GraphCard/c3GraphCard.js b/src/components/c3GraphCard/c3GraphCard.js
index ec520ac91..83c10930c 100644
--- a/src/components/c3GraphCard/c3GraphCard.js
+++ b/src/components/c3GraphCard/c3GraphCard.js
@@ -67,7 +67,7 @@ class C3GraphCard extends React.Component {
     const { viewId } = this.props;
 
     store.dispatch({
-      type: reduxTypes.query.SET_QUERY_GRANULARITY_RHSM,
+      type: reduxTypes.query.SET_QUERY_RHSM_TYPES[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY],
       viewId,
       [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: value
     });
diff --git a/src/components/graphCard/graphCard.js b/src/components/graphCard/graphCard.js
index d616f5836..6c2fa2260 100644
--- a/src/components/graphCard/graphCard.js
+++ b/src/components/graphCard/graphCard.js
@@ -67,7 +67,7 @@ class GraphCard extends React.Component {
     const { viewId } = this.props;
 
     store.dispatch({
-      type: reduxTypes.query.SET_QUERY_GRANULARITY_RHSM,
+      type: reduxTypes.query.SET_QUERY_RHSM_TYPES[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY],
       viewId,
       [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: value
     });
diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
index 72c13f5fa..f56f847f5 100644
--- a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
+++ b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
@@ -332,35 +332,23 @@ Array [
     "keys": Array [
       Object {
         "key": "curiosity-toolbar.category",
-        "match": "t('curiosity-toolbar.category')",
-      },
-      Object {
-        "key": "curiosity-toolbar.categoryPlaceholder",
-        "match": "t('curiosity-toolbar.categoryPlaceholder')",
-      },
-      Object {
-        "key": "curiosity-toolbar.slaCategory",
-        "match": "t('curiosity-toolbar.slaCategory')",
-      },
-      Object {
-        "key": "curiosity-toolbar.slaCategory",
-        "match": "t('curiosity-toolbar.slaCategory')",
+        "match": "t('curiosity-toolbar.category', { context: field })",
       },
       Object {
-        "key": "curiosity-toolbar.slaPlaceholder",
-        "match": "t('curiosity-toolbar.slaPlaceholder')",
+        "key": "curiosity-toolbar.category",
+        "match": "t('curiosity-toolbar.category', { context: field })",
       },
       Object {
-        "key": "curiosity-toolbar.usageCategory",
-        "match": "t('curiosity-toolbar.usageCategory')",
+        "key": "curiosity-toolbar.placeholder",
+        "match": "t('curiosity-toolbar.placeholder', { context: field })",
       },
       Object {
-        "key": "curiosity-toolbar.usageCategory",
-        "match": "t('curiosity-toolbar.usageCategory')",
+        "key": "curiosity-toolbar.category",
+        "match": "t('curiosity-toolbar.category')",
       },
       Object {
-        "key": "curiosity-toolbar.usagePlaceholder",
-        "match": "t('curiosity-toolbar.usagePlaceholder')",
+        "key": "curiosity-toolbar.placeholder",
+        "match": "t('curiosity-toolbar.placeholder')",
       },
     ],
   },
@@ -400,12 +388,12 @@ Array [
         "match": "translate('curiosity-toolbar.usageUnspecified')",
       },
       Object {
-        "key": "curiosity-toolbar.slaCategory",
-        "match": "translate('curiosity-toolbar.slaCategory')",
+        "key": "curiosity-toolbar.category",
+        "match": "translate('curiosity-toolbar.category', { context: RHSM_API_QUERY_SLA })",
       },
       Object {
-        "key": "curiosity-toolbar.usageCategory",
-        "match": "translate('curiosity-toolbar.usageCategory')",
+        "key": "curiosity-toolbar.category",
+        "match": "translate('curiosity-toolbar.category', { context: RHSM_API_QUERY_USAGE })",
       },
     ],
   },
diff --git a/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap b/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap
index 63a694b5f..9d03e20fd 100644
--- a/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap
+++ b/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap
@@ -10,6 +10,13 @@ exports[`OpenshiftView Component should display an alternate graph on query-stri
   </PageHeader>
   <PageToolbar>
     <Connect(Toolbar)
+      filterOptions={
+        Array [
+          Object {
+            "id": "sla",
+          },
+        ]
+      }
       query={
         Object {
           "granularity": "daily",
@@ -84,6 +91,13 @@ exports[`OpenshiftView Component should have a fallback title: title 1`] = `
   </PageHeader>
   <PageToolbar>
     <Connect(Toolbar)
+      filterOptions={
+        Array [
+          Object {
+            "id": "sla",
+          },
+        ]
+      }
       query={
         Object {
           "granularity": "daily",
@@ -158,6 +172,13 @@ exports[`OpenshiftView Component should render a non-connected component: non-co
   </PageHeader>
   <PageToolbar>
     <Connect(Toolbar)
+      filterOptions={
+        Array [
+          Object {
+            "id": "sla",
+          },
+        ]
+      }
       query={
         Object {
           "granularity": "daily",
diff --git a/src/components/openshiftView/openshiftView.js b/src/components/openshiftView/openshiftView.js
index 0aa86319f..fff7d6a69 100644
--- a/src/components/openshiftView/openshiftView.js
+++ b/src/components/openshiftView/openshiftView.js
@@ -74,7 +74,7 @@ class OpenshiftView extends React.Component {
    */
   render() {
     const { filters } = this.state;
-    const { query, location, routeDetail, t, viewId } = this.props;
+    const { query, initialToolbarFilters, location, routeDetail, t, viewId } = this.props;
     const isC3 = location?.parsedSearch?.c3 === '';
 
     return (
@@ -83,7 +83,7 @@ class OpenshiftView extends React.Component {
           {t(`curiosity-view.title`, { appName: helpers.UI_DISPLAY_NAME, context: viewId })}
         </PageHeader>
         <PageToolbar>
-          <Toolbar query={query} viewId={viewId} />
+          <Toolbar filterOptions={initialToolbarFilters} query={query} viewId={viewId} />
         </PageToolbar>
         <PageSection>
           {(isC3 && (
@@ -120,8 +120,8 @@ class OpenshiftView extends React.Component {
 /**
  * Prop types.
  *
- * @type {{initialFilters: Array, initialOption: string, viewId: string, t: Function, query: object,
- *     routeDetail: object, location: object}}
+ * @type {{initialFilters: Array, initialOption: string, initialToolbarFilters: Array, viewId: string,
+ *     t: Function, query: object, routeDetail: object, location: object}}
  */
 OpenshiftView.propTypes = {
   query: PropTypes.shape({
@@ -129,6 +129,7 @@ OpenshiftView.propTypes = {
   }),
   initialOption: PropTypes.oneOf(['cores', 'sockets']),
   initialFilters: PropTypes.array,
+  initialToolbarFilters: PropTypes.array,
   location: PropTypes.shape({
     parsedSearch: PropTypes.objectOf(PropTypes.string)
   }).isRequired,
@@ -146,7 +147,8 @@ OpenshiftView.propTypes = {
 /**
  * Default props.
  *
- * @type {{initialFilters: Array, initialOption: string, viewId: string, t: translate, query: object}}
+ * @type {{initialFilters: Array, initialOption: string, initialToolbarFilters: Array, viewId: string,
+ *     t: translate, query: object}}
  */
 OpenshiftView.defaultProps = {
   query: {
@@ -164,6 +166,11 @@ OpenshiftView.defaultProps = {
     { id: 'thresholdSockets' },
     { id: 'thresholdCores' }
   ],
+  initialToolbarFilters: [
+    {
+      id: rhsmApiTypes.RHSM_API_QUERY_SLA
+    }
+  ],
   t: translate,
   viewId: 'OpenShift'
 };
diff --git a/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap b/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap
index b1b480ac9..99b150ec8 100644
--- a/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap
+++ b/src/components/rhelView/__tests__/__snapshots__/rhelView.test.js.snap
@@ -10,6 +10,17 @@ exports[`RhelView Component should display an alternate graph on query-string up
   </PageHeader>
   <PageToolbar>
     <Connect(Toolbar)
+      filterOptions={
+        Array [
+          Object {
+            "id": "sla",
+          },
+          Object {
+            "id": "usage",
+            "selected": true,
+          },
+        ]
+      }
       query={
         Object {
           "granularity": "daily",
@@ -70,6 +81,17 @@ exports[`RhelView Component should have a fallback title: title 1`] = `
   </PageHeader>
   <PageToolbar>
     <Connect(Toolbar)
+      filterOptions={
+        Array [
+          Object {
+            "id": "sla",
+          },
+          Object {
+            "id": "usage",
+            "selected": true,
+          },
+        ]
+      }
       query={
         Object {
           "granularity": "daily",
@@ -130,6 +152,17 @@ exports[`RhelView Component should render a non-connected component: non-connect
   </PageHeader>
   <PageToolbar>
     <Connect(Toolbar)
+      filterOptions={
+        Array [
+          Object {
+            "id": "sla",
+          },
+          Object {
+            "id": "usage",
+            "selected": true,
+          },
+        ]
+      }
       query={
         Object {
           "granularity": "daily",
diff --git a/src/components/rhelView/rhelView.js b/src/components/rhelView/rhelView.js
index dd0253335..1d8218dd5 100644
--- a/src/components/rhelView/rhelView.js
+++ b/src/components/rhelView/rhelView.js
@@ -31,7 +31,7 @@ class RhelView extends React.Component {
    * @returns {Node}
    */
   render() {
-    const { query, initialFilters, location, routeDetail, t, viewId } = this.props;
+    const { query, initialFilters, initialToolbarFilters, location, routeDetail, t, viewId } = this.props;
     const isC3 = location?.parsedSearch?.c3 === '';
 
     return (
@@ -40,7 +40,7 @@ class RhelView extends React.Component {
           {t(`curiosity-view.title`, { appName: helpers.UI_DISPLAY_NAME, context: viewId })}
         </PageHeader>
         <PageToolbar>
-          <Toolbar query={query} viewId={viewId} />
+          <Toolbar filterOptions={initialToolbarFilters} query={query} viewId={viewId} />
         </PageToolbar>
         <PageSection>
           {(isC3 && (
@@ -73,14 +73,15 @@ class RhelView extends React.Component {
 /**
  * Prop types.
  *
- * @type {{initialFilters: Array, viewId: string, t: Function, query: object, routeDetail: object,
- *     location: object}}
+ * @type {{initialFilters: Array, initialToolbarFilters: Array, viewId: string, t: Function, query: object,
+ *     routeDetail: object, location: object}}
  */
 RhelView.propTypes = {
   query: PropTypes.shape({
     [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: PropTypes.oneOf([...Object.values(GRANULARITY_TYPES)])
   }),
   initialFilters: PropTypes.array,
+  initialToolbarFilters: PropTypes.array,
   location: PropTypes.shape({
     parsedSearch: PropTypes.objectOf(PropTypes.string)
   }).isRequired,
@@ -98,7 +99,7 @@ RhelView.propTypes = {
 /**
  * Default props.
  *
- * @type {{initialFilters: Array, viewId: string, t: translate, query: object}}
+ * @type {{initialFilters: Array, initialToolbarFilters: Array, viewId: string, t: translate, query: object}}
  */
 RhelView.defaultProps = {
   query: {
@@ -125,6 +126,15 @@ RhelView.defaultProps = {
     },
     { id: 'thresholdSockets' }
   ],
+  initialToolbarFilters: [
+    {
+      id: rhsmApiTypes.RHSM_API_QUERY_SLA
+    },
+    {
+      id: rhsmApiTypes.RHSM_API_QUERY_USAGE,
+      selected: true
+    }
+  ],
   t: translate,
   viewId: 'RHEL'
 };
diff --git a/src/components/toolbar/__tests__/__snapshots__/toolbar.test.js.snap b/src/components/toolbar/__tests__/__snapshots__/toolbar.test.js.snap
index fadfab502..75144e0c0 100644
--- a/src/components/toolbar/__tests__/__snapshots__/toolbar.test.js.snap
+++ b/src/components/toolbar/__tests__/__snapshots__/toolbar.test.js.snap
@@ -24,7 +24,7 @@ Array [
         "data": Object {
           "sla": "premium",
         },
-        "type": "SET_QUERY_SLA_RHSM",
+        "type": "SET_QUERY_RHSM_sla",
       },
     ],
   ],
@@ -42,7 +42,7 @@ Array [
         "data": Object {
           "sla": "standard",
         },
-        "type": "SET_QUERY_SLA_RHSM",
+        "type": "SET_QUERY_RHSM_sla",
       },
     ],
   ],
@@ -86,7 +86,7 @@ Array [
         "data": Object {
           "usage": "Development/Test",
         },
-        "type": "SET_QUERY_USAGE_RHSM",
+        "type": "SET_QUERY_RHSM_usage",
       },
     ],
   ],
@@ -104,7 +104,7 @@ Array [
         "data": Object {
           "usage": "Disaster Recovery",
         },
-        "type": "SET_QUERY_USAGE_RHSM",
+        "type": "SET_QUERY_RHSM_usage",
       },
     ],
   ],
@@ -119,7 +119,7 @@ Array [
       Object {
         "data": Object {
           "clearFilters": Object {
-            "usage": null,
+            "sla": null,
           },
         },
         "type": "SET_QUERY_CLEAR",
@@ -172,7 +172,7 @@ Array [
         "data": Object {
           "sla": "premium",
         },
-        "type": "SET_QUERY_SLA_RHSM",
+        "type": "SET_QUERY_RHSM_sla",
       },
     ],
   ],
@@ -190,7 +190,7 @@ Array [
         "data": Object {
           "sla": "standard",
         },
-        "type": "SET_QUERY_SLA_RHSM",
+        "type": "SET_QUERY_RHSM_sla",
       },
     ],
   ],
@@ -234,7 +234,7 @@ Array [
         "data": Object {
           "usage": "Development/Test",
         },
-        "type": "SET_QUERY_USAGE_RHSM",
+        "type": "SET_QUERY_RHSM_usage",
       },
     ],
   ],
@@ -252,7 +252,7 @@ Array [
         "data": Object {
           "usage": "Disaster Recovery",
         },
-        "type": "SET_QUERY_USAGE_RHSM",
+        "type": "SET_QUERY_RHSM_usage",
       },
     ],
   ],
@@ -267,7 +267,7 @@ Array [
       Object {
         "data": Object {
           "clearFilters": Object {
-            "usage": null,
+            "sla": null,
           },
         },
         "type": "SET_QUERY_CLEAR",
@@ -315,7 +315,7 @@ Array [
         "data": Object {
           "sla": "premium",
         },
-        "type": "SET_QUERY_SLA_RHSM",
+        "type": "SET_QUERY_RHSM_sla",
       },
     ],
   ],
@@ -333,7 +333,7 @@ Array [
         "data": Object {
           "sla": "standard",
         },
-        "type": "SET_QUERY_SLA_RHSM",
+        "type": "SET_QUERY_RHSM_sla",
       },
     ],
   ],
@@ -383,7 +383,7 @@ Array [
         "data": Object {
           "usage": "Development/Test",
         },
-        "type": "SET_QUERY_USAGE_RHSM",
+        "type": "SET_QUERY_RHSM_usage",
       },
     ],
   ],
@@ -401,7 +401,7 @@ Array [
         "data": Object {
           "usage": "Disaster Recovery",
         },
-        "type": "SET_QUERY_USAGE_RHSM",
+        "type": "SET_QUERY_RHSM_usage",
       },
     ],
   ],
@@ -416,7 +416,7 @@ Array [
       Object {
         "data": Object {
           "clearFilters": Object {
-            "usage": null,
+            "sla": null,
           },
         },
         "type": "SET_QUERY_CLEAR",
@@ -494,19 +494,19 @@ exports[`Toolbar Component should render a non-connected component: non-connecte
             options={
               Array [
                 Object {
-                  "title": "t(curiosity-toolbar.slaCategory)",
+                  "title": "t(curiosity-toolbar.category, [object Object])",
                   "value": "sla",
                 },
                 Object {
-                  "title": "t(curiosity-toolbar.usageCategory)",
+                  "title": "t(curiosity-toolbar.category, [object Object])",
                   "value": "usage",
                 },
               ]
             }
-            placeholder="t(curiosity-toolbar.categoryPlaceholder)"
+            placeholder="t(curiosity-toolbar.placeholder)"
             selectedOptions={
               Array [
-                "t(curiosity-toolbar.usageCategory)",
+                "t(curiosity-toolbar.category, [object Object])",
               ]
             }
             toggleIcon={
@@ -520,13 +520,14 @@ exports[`Toolbar Component should render a non-connected component: non-connecte
           />
         </ToolbarItem>
         <ToolbarFilter
-          categoryName="t(curiosity-toolbar.slaCategory)"
+          categoryName="t(curiosity-toolbar.category, [object Object])"
           chips={Array []}
           deleteChip={[Function]}
+          key="sla"
           showToolbarItem={false}
         >
           <Select
-            aria-label="t(curiosity-toolbar.slaCategory)"
+            aria-label="t(curiosity-toolbar.category, [object Object])"
             ariaLabel="Select option"
             className=""
             id="generatedid-"
@@ -554,20 +555,21 @@ exports[`Toolbar Component should render a non-connected component: non-connecte
                 },
               ]
             }
-            placeholder="t(curiosity-toolbar.slaPlaceholder)"
+            placeholder="t(curiosity-toolbar.placeholder, [object Object])"
             selectedOptions={Array []}
             toggleIcon={null}
             variant="single"
           />
         </ToolbarFilter>
         <ToolbarFilter
-          categoryName="t(curiosity-toolbar.usageCategory)"
+          categoryName="t(curiosity-toolbar.category, [object Object])"
           chips={Array []}
           deleteChip={[Function]}
+          key="usage"
           showToolbarItem={true}
         >
           <Select
-            aria-label="t(curiosity-toolbar.usageCategory)"
+            aria-label="t(curiosity-toolbar.category, [object Object])"
             ariaLabel="Select option"
             className=""
             id="generatedid-"
@@ -595,7 +597,7 @@ exports[`Toolbar Component should render a non-connected component: non-connecte
                 },
               ]
             }
-            placeholder="t(curiosity-toolbar.usagePlaceholder)"
+            placeholder="t(curiosity-toolbar.placeholder, [object Object])"
             selectedOptions={Array []}
             toggleIcon={null}
             variant="single"
@@ -644,19 +646,19 @@ exports[`Toolbar Component should render filters when props are populated: props
             options={
               Array [
                 Object {
-                  "title": "t(curiosity-toolbar.slaCategory)",
+                  "title": "t(curiosity-toolbar.category, [object Object])",
                   "value": "sla",
                 },
                 Object {
-                  "title": "t(curiosity-toolbar.usageCategory)",
+                  "title": "t(curiosity-toolbar.category, [object Object])",
                   "value": "usage",
                 },
               ]
             }
-            placeholder="t(curiosity-toolbar.categoryPlaceholder)"
+            placeholder="t(curiosity-toolbar.placeholder)"
             selectedOptions={
               Array [
-                "t(curiosity-toolbar.slaCategory)",
+                "t(curiosity-toolbar.category, [object Object])",
               ]
             }
             toggleIcon={
@@ -670,17 +672,18 @@ exports[`Toolbar Component should render filters when props are populated: props
           />
         </ToolbarItem>
         <ToolbarFilter
-          categoryName="t(curiosity-toolbar.slaCategory)"
+          categoryName="t(curiosity-toolbar.category, [object Object])"
           chips={
             Array [
               "t(curiosity-toolbar.slaPremium)",
             ]
           }
           deleteChip={[Function]}
+          key="sla"
           showToolbarItem={true}
         >
           <Select
-            aria-label="t(curiosity-toolbar.slaCategory)"
+            aria-label="t(curiosity-toolbar.category, [object Object])"
             ariaLabel="Select option"
             className=""
             id="generatedid-"
@@ -708,7 +711,7 @@ exports[`Toolbar Component should render filters when props are populated: props
                 },
               ]
             }
-            placeholder="t(curiosity-toolbar.slaPlaceholder)"
+            placeholder="t(curiosity-toolbar.placeholder, [object Object])"
             selectedOptions={
               Array [
                 "t(curiosity-toolbar.slaPremium)",
@@ -719,13 +722,14 @@ exports[`Toolbar Component should render filters when props are populated: props
           />
         </ToolbarFilter>
         <ToolbarFilter
-          categoryName="t(curiosity-toolbar.usageCategory)"
+          categoryName="t(curiosity-toolbar.category, [object Object])"
           chips={Array []}
           deleteChip={[Function]}
+          key="usage"
           showToolbarItem={false}
         >
           <Select
-            aria-label="t(curiosity-toolbar.usageCategory)"
+            aria-label="t(curiosity-toolbar.category, [object Object])"
             ariaLabel="Select option"
             className=""
             id="generatedid-"
@@ -753,7 +757,79 @@ exports[`Toolbar Component should render filters when props are populated: props
                 },
               ]
             }
-            placeholder="t(curiosity-toolbar.usagePlaceholder)"
+            placeholder="t(curiosity-toolbar.placeholder, [object Object])"
+            selectedOptions={Array []}
+            toggleIcon={null}
+            variant="single"
+          />
+        </ToolbarFilter>
+      </ForwardRef>
+    </ToolbarToggleGroup>
+  </ToolbarContent>
+</Toolbar>
+`;
+
+exports[`Toolbar Component should render specific filters when the filterOptions prop is used: filterOptions 1`] = `
+<Toolbar
+  className="curiosity-toolbar pf-m-toggle-group-container ins-c-primary-toolbar"
+  clearAllFilters={[Function]}
+  collapseListedFiltersBreakpoint="sm"
+  id="curiosity-toolbar"
+>
+  <ToolbarContent
+    isExpanded={false}
+    showClearFiltersButton={false}
+  >
+    <ToolbarToggleGroup
+      breakpoint="md"
+      toggleIcon={
+        <FilterIcon
+          color="currentColor"
+          noVerticalAlign={false}
+          size="sm"
+        />
+      }
+    >
+      <ForwardRef
+        variant="filter-group"
+      >
+        <ToolbarFilter
+          categoryName="t(curiosity-toolbar.category, [object Object])"
+          chips={Array []}
+          deleteChip={[Function]}
+          key="sla"
+          showToolbarItem={true}
+        >
+          <Select
+            aria-label="t(curiosity-toolbar.category, [object Object])"
+            ariaLabel="Select option"
+            className=""
+            id="generatedid-"
+            isDisabled={false}
+            isToggleText={true}
+            name={null}
+            onSelect={[Function]}
+            options={
+              Array [
+                Object {
+                  "title": "t(curiosity-toolbar.slaPremium)",
+                  "value": "premium",
+                },
+                Object {
+                  "title": "t(curiosity-toolbar.slaStandard)",
+                  "value": "standard",
+                },
+                Object {
+                  "title": "t(curiosity-toolbar.slaSelfSupport)",
+                  "value": "self-support",
+                },
+                Object {
+                  "title": "t(curiosity-toolbar.slaNone)",
+                  "value": "",
+                },
+              ]
+            }
+            placeholder="t(curiosity-toolbar.placeholder, [object Object])"
             selectedOptions={Array []}
             toggleIcon={null}
             variant="single"
diff --git a/src/components/toolbar/__tests__/__snapshots__/toolbarTypes.test.js.snap b/src/components/toolbar/__tests__/__snapshots__/toolbarTypes.test.js.snap
index f085e9fcb..559852d2d 100644
--- a/src/components/toolbar/__tests__/__snapshots__/toolbarTypes.test.js.snap
+++ b/src/components/toolbar/__tests__/__snapshots__/toolbarTypes.test.js.snap
@@ -10,11 +10,11 @@ exports[`ToolbarTypes should return an output for options selection: getOptionsT
 Object {
   "options": Array [
     Object {
-      "title": "t(curiosity-toolbar.slaCategory)",
+      "title": "t(curiosity-toolbar.category, [object Object])",
       "value": "sla",
     },
     Object {
-      "title": "t(curiosity-toolbar.usageCategory)",
+      "title": "t(curiosity-toolbar.category, [object Object])",
       "value": "usage",
     },
   ],
@@ -26,11 +26,11 @@ exports[`ToolbarTypes should return an output for options selection: getOptionsT
 Object {
   "options": Array [
     Object {
-      "title": "t(curiosity-toolbar.slaCategory)",
+      "title": "t(curiosity-toolbar.category, [object Object])",
       "value": "sla",
     },
     Object {
-      "title": "t(curiosity-toolbar.usageCategory)",
+      "title": "t(curiosity-toolbar.category, [object Object])",
       "value": "usage",
     },
   ],
diff --git a/src/components/toolbar/__tests__/toolbar.test.js b/src/components/toolbar/__tests__/toolbar.test.js
index 9938e284e..309f16978 100644
--- a/src/components/toolbar/__tests__/toolbar.test.js
+++ b/src/components/toolbar/__tests__/toolbar.test.js
@@ -31,6 +31,20 @@ describe('Toolbar Component', () => {
     expect(component).toMatchSnapshot('disabled component');
   });
 
+  it('should render specific filters when the filterOptions prop is used', () => {
+    const props = {
+      filterOptions: [
+        {
+          id: RHSM_API_QUERY_SLA
+        }
+      ],
+      query: {}
+    };
+    const component = shallow(<Toolbar {...props} />);
+
+    expect(component).toMatchSnapshot('filterOptions');
+  });
+
   it('should render filters when props are populated', () => {
     const [optionOne] = toolbarTypes.getOptions(RHSM_API_QUERY_SLA).options;
 
@@ -54,16 +68,16 @@ describe('Toolbar Component', () => {
       const componentInstance = component.instance();
 
       const filters = [
-        { category: RHSM_API_QUERY_SLA, method: 'onSlaSelect' },
-        { category: RHSM_API_QUERY_USAGE, method: 'onUsageSelect' }
+        { category: RHSM_API_QUERY_SLA, method: 'onSelect' },
+        { category: RHSM_API_QUERY_USAGE, method: 'onSelect' }
       ];
 
       filters.forEach(({ category, method }) => {
         componentInstance.onCategorySelect({ value: category });
 
         const [optionOne, optionTwo] = toolbarTypes.getOptions(category).options;
-        componentInstance[method]({ value: optionOne.value });
-        componentInstance[method]({ value: optionTwo.value });
+        componentInstance[method]({ event: { value: optionOne.value }, field: category });
+        componentInstance[method]({ event: { value: optionTwo.value }, field: category });
 
         const { title: categoryTitle } = toolbarTypes.getOptions().options.find(({ value }) => value === category);
         componentInstance.onClearFilter(categoryTitle);
diff --git a/src/components/toolbar/toolbar.js b/src/components/toolbar/toolbar.js
index 869eae1b2..4372f1b9a 100644
--- a/src/components/toolbar/toolbar.js
+++ b/src/components/toolbar/toolbar.js
@@ -23,8 +23,7 @@ import { translate } from '../i18n/i18n';
  * @fires onClear
  * @fires onClearFilter
  * @fires onCategorySelect
- * @fires onSlaSelect
- * @fires onUsageSelect
+ * @fires onSelect
  */
 class Toolbar extends React.Component {
   /**
@@ -105,38 +104,16 @@ class Toolbar extends React.Component {
   };
 
   /**
-   * Set SLA filter selection.
+   * Set select filter selection for dispatch.
    *
-   * @event onSlaSelect
-   * @param {object} event
-   */
-  onSlaSelect = event => {
-    const { activeFilters } = this.props;
-    const { value } = event;
-    const updatedActiveFilters = new Set(activeFilters).add(rhsmApiTypes.RHSM_API_QUERY_SLA);
-
-    this.setDispatch([
-      {
-        type: reduxTypes.toolbar.SET_ACTIVE_FILTERS,
-        data: { activeFilters: updatedActiveFilters }
-      },
-      {
-        type: reduxTypes.query.SET_QUERY_SLA_RHSM,
-        data: { [rhsmApiTypes.RHSM_API_QUERY_SLA]: value }
-      }
-    ]);
-  };
-
-  /**
-   * Set Usage filter selection.
-   *
-   * @event onUsageSelect
-   * @param {object} event
+   * @param {object} params
+   * @param {object} params.event
+   * @param {string} params.field
    */
-  onUsageSelect = event => {
+  onSelect = ({ event, field }) => {
     const { activeFilters } = this.props;
     const { value } = event;
-    const updatedActiveFilters = new Set(activeFilters).add(rhsmApiTypes.RHSM_API_QUERY_USAGE);
+    const updatedActiveFilters = new Set(activeFilters).add(field);
 
     this.setDispatch([
       {
@@ -144,8 +121,8 @@ class Toolbar extends React.Component {
         data: { activeFilters: updatedActiveFilters }
       },
       {
-        type: reduxTypes.query.SET_QUERY_USAGE_RHSM,
-        data: { [rhsmApiTypes.RHSM_API_QUERY_USAGE]: value }
+        type: reduxTypes.query.SET_QUERY_RHSM_TYPES[field],
+        data: { [field]: value }
       }
     ]);
   };
@@ -167,19 +144,19 @@ class Toolbar extends React.Component {
   }
 
   /**
-   * Available, and selected filter options.
+   * Available, and selected select filter options.
    *
-   * @param {string} filterType
+   * @param {string} field
    * @returns {{optionsSelected: Array, options: Array }}
    */
-  setFilter(filterType) {
-    const { currentFilter, query } = this.props;
-    const options = toolbarTypes.getOptions(filterType);
+  setSelectFilter(field) {
+    const { query } = this.props;
+    const options = toolbarTypes.getOptions(field);
+    const currentFilter = this.getCurrentFilter();
     let filter;
 
-    if (filterType) {
-      filter =
-        typeof query?.[filterType] === 'string' && options.options.find(({ value }) => value === query?.[filterType]);
+    if (field) {
+      filter = typeof query?.[field] === 'string' && options.options.find(({ value }) => value === query?.[field]);
     } else {
       filter = options.options.find(({ value }) => value === currentFilter);
     }
@@ -189,26 +166,65 @@ class Toolbar extends React.Component {
     return { options, optionsSelected };
   }
 
+  /**
+   * Return the currentFilter, fallback to selected
+   *
+   * @returns {string|undefined}
+   */
+  getCurrentFilter() {
+    const { currentFilter, filterOptions } = this.props;
+
+    return (
+      currentFilter ||
+      filterOptions.find(({ selected }) => selected === true)?.id ||
+      (filterOptions.length === 1 && filterOptions[0]?.id)
+    );
+  }
+
+  /**
+   * A select filter node.
+   *
+   * @param {object} params
+   * @param {string} params.id
+   * @returns {object}
+   */
+  renderSelectFilter({ id: field }) {
+    const { t } = this.props;
+    const { options, optionsSelected } = this.setSelectFilter(field);
+    const currentFilter = this.getCurrentFilter();
+
+    return (
+      <ToolbarFilter
+        key={field}
+        chips={optionsSelected}
+        deleteChip={this.onClearFilter}
+        categoryName={t('curiosity-toolbar.category', { context: field })}
+        showToolbarItem={currentFilter === field}
+      >
+        <Select
+          aria-label={t('curiosity-toolbar.category', { context: field })}
+          onSelect={event => this.onSelect({ event, field })}
+          selectedOptions={optionsSelected}
+          placeholder={t('curiosity-toolbar.placeholder', { context: field })}
+          options={options.options}
+        />
+      </ToolbarFilter>
+    );
+  }
+
   /**
    * Render a filter toolbar.
    *
    * @returns {Node}
    */
   render() {
-    const { currentFilter, isDisabled, t } = this.props;
+    const { filterOptions, isDisabled, t } = this.props;
 
     if (isDisabled) {
       return null;
     }
 
-    const { options: categoryOptions, optionsSelected: categoryOptionsSelected } = this.setFilter();
-
-    const { options: slaOptions, optionsSelected: slaOptionsSelected } = this.setFilter(
-      rhsmApiTypes.RHSM_API_QUERY_SLA
-    );
-    const { options: usageOptions, optionsSelected: usageOptionsSelected } = this.setFilter(
-      rhsmApiTypes.RHSM_API_QUERY_USAGE
-    );
+    const { options: categoryOptions, optionsSelected: categoryOptionsSelected } = this.setSelectFilter();
 
     return (
       <PfToolbar
@@ -220,44 +236,19 @@ class Toolbar extends React.Component {
         <ToolbarContent>
           <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="md">
             <ToolbarGroup variant="filter-group">
-              <ToolbarItem>
-                <Select
-                  aria-label={t('curiosity-toolbar.category')}
-                  onSelect={this.onCategorySelect}
-                  selectedOptions={categoryOptionsSelected}
-                  placeholder={t('curiosity-toolbar.categoryPlaceholder')}
-                  options={categoryOptions.options}
-                  toggleIcon={<FilterIcon />}
-                />
-              </ToolbarItem>
-              <ToolbarFilter
-                chips={slaOptionsSelected}
-                deleteChip={this.onClearFilter}
-                categoryName={t('curiosity-toolbar.slaCategory')}
-                showToolbarItem={currentFilter === rhsmApiTypes.RHSM_API_QUERY_SLA}
-              >
-                <Select
-                  aria-label={t('curiosity-toolbar.slaCategory')}
-                  onSelect={this.onSlaSelect}
-                  selectedOptions={slaOptionsSelected}
-                  placeholder={t('curiosity-toolbar.slaPlaceholder')}
-                  options={slaOptions.options}
-                />
-              </ToolbarFilter>
-              <ToolbarFilter
-                chips={usageOptionsSelected}
-                deleteChip={this.onClearFilter}
-                categoryName={t('curiosity-toolbar.usageCategory')}
-                showToolbarItem={currentFilter === rhsmApiTypes.RHSM_API_QUERY_USAGE}
-              >
-                <Select
-                  aria-label={t('curiosity-toolbar.usageCategory')}
-                  onSelect={this.onUsageSelect}
-                  selectedOptions={usageOptionsSelected}
-                  placeholder={t('curiosity-toolbar.usagePlaceholder')}
-                  options={usageOptions.options}
-                />
-              </ToolbarFilter>
+              {filterOptions.length !== 1 && (
+                <ToolbarItem>
+                  <Select
+                    aria-label={t('curiosity-toolbar.category')}
+                    onSelect={this.onCategorySelect}
+                    selectedOptions={categoryOptionsSelected}
+                    placeholder={t('curiosity-toolbar.placeholder')}
+                    options={categoryOptions.options}
+                    toggleIcon={<FilterIcon />}
+                  />
+                </ToolbarItem>
+              )}
+              {filterOptions.map(({ id, selected }) => this.renderSelectFilter({ id, selected }))}
             </ToolbarGroup>
           </ToolbarToggleGroup>
         </ToolbarContent>
@@ -270,7 +261,7 @@ class Toolbar extends React.Component {
  * Prop types
  *
  * @type {{viewId: string, t: Function, activeFilters, hardFilterReset: boolean, query, currentFilter: string,
- *     isDisabled: boolean}}
+ *     isDisabled: boolean, filterOptions: Array}}
  */
 Toolbar.propTypes = {
   query: PropTypes.shape({
@@ -279,6 +270,13 @@ Toolbar.propTypes = {
   }),
   activeFilters: PropTypes.instanceOf(Set),
   currentFilter: PropTypes.oneOf([rhsmApiTypes.RHSM_API_QUERY_SLA, rhsmApiTypes.RHSM_API_QUERY_USAGE]),
+  filterOptions: PropTypes.arrayOf(
+    PropTypes.shape({
+      filterType: PropTypes.oneOf(['select']),
+      id: PropTypes.oneOf([rhsmApiTypes.RHSM_API_QUERY_SLA, rhsmApiTypes.RHSM_API_QUERY_USAGE]),
+      selected: PropTypes.bool
+    })
+  ),
   hardFilterReset: PropTypes.bool,
   isDisabled: PropTypes.bool,
   t: PropTypes.func,
@@ -288,13 +286,24 @@ Toolbar.propTypes = {
 /**
  * Default props.
  *
- * @type {{viewId: string, t: translate, activeFilters: Set, hardFilterReset: boolean, query: {},
- *     currentFilter: null, isDisabled: boolean}}
+ * @type {{viewId: string, t: translate, activeFilters: Set, hardFilterReset: boolean, query: object,
+ *     currentFilter: string, isDisabled: boolean, filterOptions: Array}}
  */
 Toolbar.defaultProps = {
   query: {},
   activeFilters: new Set(),
-  currentFilter: rhsmApiTypes.RHSM_API_QUERY_USAGE,
+  currentFilter: null,
+  filterOptions: [
+    {
+      id: rhsmApiTypes.RHSM_API_QUERY_SLA,
+      filterType: 'select'
+    },
+    {
+      id: rhsmApiTypes.RHSM_API_QUERY_USAGE,
+      filterType: 'select',
+      selected: true
+    }
+  ],
   hardFilterReset: false,
   isDisabled: helpers.UI_DISABLED_TOOLBAR,
   t: translate,
diff --git a/src/components/toolbar/toolbarTypes.js b/src/components/toolbar/toolbarTypes.js
index 69aa56d7b..2e91853d0 100644
--- a/src/components/toolbar/toolbarTypes.js
+++ b/src/components/toolbar/toolbarTypes.js
@@ -63,11 +63,11 @@ const getOptionsType = optionsType => {
         selected: null,
         options: [
           {
-            title: translate('curiosity-toolbar.slaCategory'),
+            title: translate('curiosity-toolbar.category', { context: RHSM_API_QUERY_SLA }),
             value: RHSM_API_QUERY_SLA
           },
           {
-            title: translate('curiosity-toolbar.usageCategory'),
+            title: translate('curiosity-toolbar.category', { context: RHSM_API_QUERY_USAGE }),
             value: RHSM_API_QUERY_USAGE
           }
         ]
diff --git a/src/redux/reducers/__tests__/__snapshots__/viewReducer.test.js.snap b/src/redux/reducers/__tests__/__snapshots__/viewReducer.test.js.snap
index 8073de507..37062f120 100644
--- a/src/redux/reducers/__tests__/__snapshots__/viewReducer.test.js.snap
+++ b/src/redux/reducers/__tests__/__snapshots__/viewReducer.test.js.snap
@@ -11,46 +11,64 @@ Object {
 }
 `;
 
-exports[`ViewReducer should handle specific defined types: defined type SET_QUERY_GRANULARITY_RHSM 1`] = `
+exports[`ViewReducer should handle specific defined types: defined type SET_QUERY_PAGE_LIMIT_RHSM 1`] = `
 Object {
   "result": Object {
     "query": Object {
       "test_id": Object {
-        "granularity": "lorem granularity",
+        "limit": 10,
       },
     },
   },
-  "type": "SET_QUERY_GRANULARITY_RHSM",
+  "type": "SET_QUERY_PAGE_LIMIT_RHSM",
 }
 `;
 
-exports[`ViewReducer should handle specific defined types: defined type SET_QUERY_PAGE_LIMIT_RHSM 1`] = `
+exports[`ViewReducer should handle specific defined types: defined type SET_QUERY_PAGE_OFFSET_RHSM 1`] = `
 Object {
   "result": Object {
     "query": Object {
       "test_id": Object {
-        "limit": 10,
+        "offset": 10,
       },
     },
   },
-  "type": "SET_QUERY_PAGE_LIMIT_RHSM",
+  "type": "SET_QUERY_PAGE_OFFSET_RHSM",
 }
 `;
 
-exports[`ViewReducer should handle specific defined types: defined type SET_QUERY_PAGE_OFFSET_RHSM 1`] = `
+exports[`ViewReducer should handle specific defined types: defined type SET_QUERY_RHSM_granularity 1`] = `
 Object {
   "result": Object {
     "query": Object {
       "test_id": Object {
-        "offset": 10,
+        "granularity": "lorem granularity",
       },
     },
   },
-  "type": "SET_QUERY_PAGE_OFFSET_RHSM",
+  "type": "SET_QUERY_RHSM_granularity",
+}
+`;
+
+exports[`ViewReducer should handle specific defined types: defined type SET_QUERY_RHSM_limit 1`] = `
+Object {
+  "result": Object {
+    "query": Object {},
+  },
+  "type": "SET_QUERY_RHSM_limit",
+}
+`;
+
+exports[`ViewReducer should handle specific defined types: defined type SET_QUERY_RHSM_offset 1`] = `
+Object {
+  "result": Object {
+    "query": Object {},
+  },
+  "type": "SET_QUERY_RHSM_offset",
 }
 `;
 
-exports[`ViewReducer should handle specific defined types: defined type SET_QUERY_SLA_RHSM 1`] = `
+exports[`ViewReducer should handle specific defined types: defined type SET_QUERY_RHSM_sla 1`] = `
 Object {
   "result": Object {
     "query": Object {
@@ -59,11 +77,11 @@ Object {
       },
     },
   },
-  "type": "SET_QUERY_SLA_RHSM",
+  "type": "SET_QUERY_RHSM_sla",
 }
 `;
 
-exports[`ViewReducer should handle specific defined types: defined type SET_QUERY_USAGE_RHSM 1`] = `
+exports[`ViewReducer should handle specific defined types: defined type SET_QUERY_RHSM_usage 1`] = `
 Object {
   "result": Object {
     "query": Object {
@@ -72,6 +90,6 @@ Object {
       },
     },
   },
-  "type": "SET_QUERY_USAGE_RHSM",
+  "type": "SET_QUERY_RHSM_usage",
 }
 `;
diff --git a/src/redux/reducers/__tests__/viewReducer.test.js b/src/redux/reducers/__tests__/viewReducer.test.js
index e9969e03f..aefc0bd90 100644
--- a/src/redux/reducers/__tests__/viewReducer.test.js
+++ b/src/redux/reducers/__tests__/viewReducer.test.js
@@ -15,9 +15,7 @@ describe('ViewReducer', () => {
 
   it('should handle specific defined types', () => {
     const specificTypes = [
-      types.SET_QUERY_GRANULARITY_RHSM,
-      types.SET_QUERY_SLA_RHSM,
-      types.SET_QUERY_USAGE_RHSM,
+      ...Object.values(types.SET_QUERY_RHSM_TYPES),
       types.SET_QUERY_CLEAR,
       types.SET_QUERY_PAGE_LIMIT_RHSM,
       types.SET_QUERY_PAGE_OFFSET_RHSM
diff --git a/src/redux/reducers/viewReducer.js b/src/redux/reducers/viewReducer.js
index 89a72318b..0c40b44ce 100644
--- a/src/redux/reducers/viewReducer.js
+++ b/src/redux/reducers/viewReducer.js
@@ -41,7 +41,7 @@ const viewReducer = (state = initialState, action) => {
           reset: false
         }
       );
-    case reduxTypes.query.SET_QUERY_GRANULARITY_RHSM:
+    case reduxTypes.query.SET_QUERY_RHSM_TYPES[RHSM_API_QUERY_GRANULARITY]:
       return reduxHelpers.setStateProp(
         'query',
         {
@@ -55,7 +55,7 @@ const viewReducer = (state = initialState, action) => {
           reset: false
         }
       );
-    case reduxTypes.query.SET_QUERY_SLA_RHSM:
+    case reduxTypes.query.SET_QUERY_RHSM_TYPES[RHSM_API_QUERY_SLA]:
       return reduxHelpers.setStateProp(
         'query',
         {
@@ -69,7 +69,7 @@ const viewReducer = (state = initialState, action) => {
           reset: false
         }
       );
-    case reduxTypes.query.SET_QUERY_USAGE_RHSM:
+    case reduxTypes.query.SET_QUERY_RHSM_TYPES[RHSM_API_QUERY_USAGE]:
       return reduxHelpers.setStateProp(
         'query',
         {
diff --git a/src/redux/types/__tests__/__snapshots__/index.test.js.snap b/src/redux/types/__tests__/__snapshots__/index.test.js.snap
index 4fef8a138..f1b6bafce 100644
--- a/src/redux/types/__tests__/__snapshots__/index.test.js.snap
+++ b/src/redux/types/__tests__/__snapshots__/index.test.js.snap
@@ -25,11 +25,15 @@ Object {
     },
     "query": Object {
       "SET_QUERY_CLEAR": "SET_QUERY_CLEAR",
-      "SET_QUERY_GRANULARITY_RHSM": "SET_QUERY_GRANULARITY_RHSM",
       "SET_QUERY_PAGE_LIMIT_RHSM": "SET_QUERY_PAGE_LIMIT_RHSM",
       "SET_QUERY_PAGE_OFFSET_RHSM": "SET_QUERY_PAGE_OFFSET_RHSM",
-      "SET_QUERY_SLA_RHSM": "SET_QUERY_SLA_RHSM",
-      "SET_QUERY_USAGE_RHSM": "SET_QUERY_USAGE_RHSM",
+      "SET_QUERY_RHSM_TYPES": Object {
+        "granularity": "SET_QUERY_RHSM_granularity",
+        "limit": "SET_QUERY_RHSM_limit",
+        "offset": "SET_QUERY_RHSM_offset",
+        "sla": "SET_QUERY_RHSM_sla",
+        "usage": "SET_QUERY_RHSM_usage",
+      },
     },
     "rhsm": Object {
       "GET_GRAPH_CAPACITY_RHSM": "GET_GRAPH_CAPACITY_RHSM",
@@ -65,11 +69,15 @@ Object {
   },
   "queryTypes": Object {
     "SET_QUERY_CLEAR": "SET_QUERY_CLEAR",
-    "SET_QUERY_GRANULARITY_RHSM": "SET_QUERY_GRANULARITY_RHSM",
     "SET_QUERY_PAGE_LIMIT_RHSM": "SET_QUERY_PAGE_LIMIT_RHSM",
     "SET_QUERY_PAGE_OFFSET_RHSM": "SET_QUERY_PAGE_OFFSET_RHSM",
-    "SET_QUERY_SLA_RHSM": "SET_QUERY_SLA_RHSM",
-    "SET_QUERY_USAGE_RHSM": "SET_QUERY_USAGE_RHSM",
+    "SET_QUERY_RHSM_TYPES": Object {
+      "granularity": "SET_QUERY_RHSM_granularity",
+      "limit": "SET_QUERY_RHSM_limit",
+      "offset": "SET_QUERY_RHSM_offset",
+      "sla": "SET_QUERY_RHSM_sla",
+      "usage": "SET_QUERY_RHSM_usage",
+    },
   },
   "reduxTypes": Object {
     "app": Object {
@@ -90,11 +98,15 @@ Object {
     },
     "query": Object {
       "SET_QUERY_CLEAR": "SET_QUERY_CLEAR",
-      "SET_QUERY_GRANULARITY_RHSM": "SET_QUERY_GRANULARITY_RHSM",
       "SET_QUERY_PAGE_LIMIT_RHSM": "SET_QUERY_PAGE_LIMIT_RHSM",
       "SET_QUERY_PAGE_OFFSET_RHSM": "SET_QUERY_PAGE_OFFSET_RHSM",
-      "SET_QUERY_SLA_RHSM": "SET_QUERY_SLA_RHSM",
-      "SET_QUERY_USAGE_RHSM": "SET_QUERY_USAGE_RHSM",
+      "SET_QUERY_RHSM_TYPES": Object {
+        "granularity": "SET_QUERY_RHSM_granularity",
+        "limit": "SET_QUERY_RHSM_limit",
+        "offset": "SET_QUERY_RHSM_offset",
+        "sla": "SET_QUERY_RHSM_sla",
+        "usage": "SET_QUERY_RHSM_usage",
+      },
     },
     "rhsm": Object {
       "GET_GRAPH_CAPACITY_RHSM": "GET_GRAPH_CAPACITY_RHSM",
@@ -158,11 +170,15 @@ Object {
   },
   "query": Object {
     "SET_QUERY_CLEAR": "SET_QUERY_CLEAR",
-    "SET_QUERY_GRANULARITY_RHSM": "SET_QUERY_GRANULARITY_RHSM",
     "SET_QUERY_PAGE_LIMIT_RHSM": "SET_QUERY_PAGE_LIMIT_RHSM",
     "SET_QUERY_PAGE_OFFSET_RHSM": "SET_QUERY_PAGE_OFFSET_RHSM",
-    "SET_QUERY_SLA_RHSM": "SET_QUERY_SLA_RHSM",
-    "SET_QUERY_USAGE_RHSM": "SET_QUERY_USAGE_RHSM",
+    "SET_QUERY_RHSM_TYPES": Object {
+      "granularity": "SET_QUERY_RHSM_granularity",
+      "limit": "SET_QUERY_RHSM_limit",
+      "offset": "SET_QUERY_RHSM_offset",
+      "sla": "SET_QUERY_RHSM_sla",
+      "usage": "SET_QUERY_RHSM_usage",
+    },
   },
   "rhsm": Object {
     "GET_GRAPH_CAPACITY_RHSM": "GET_GRAPH_CAPACITY_RHSM",
diff --git a/src/redux/types/queryTypes.js b/src/redux/types/queryTypes.js
index c674c125f..b79a4cd94 100644
--- a/src/redux/types/queryTypes.js
+++ b/src/redux/types/queryTypes.js
@@ -1,33 +1,47 @@
+import {
+  RHSM_API_QUERY_GRANULARITY,
+  RHSM_API_QUERY_USAGE,
+  RHSM_API_QUERY_SLA,
+  RHSM_API_QUERY_LIMIT,
+  RHSM_API_QUERY_OFFSET
+} from '../../types/rhsmApiTypes';
+
 const SET_QUERY_CLEAR = 'SET_QUERY_CLEAR';
-const SET_QUERY_GRANULARITY_RHSM = 'SET_QUERY_GRANULARITY_RHSM';
+
+/**
+ * ToDo: convert use SET_QUERY_PAGE_LIMIT_RHSM and SET_QUERY_PAGE_OFFSET_RHSM to SET_QUERY_RHSM_TYPES syntax
+ * This work will be in place before the inventory display and paging. Make sure to switch over to the
+ * use of SET_QUERY_RHSM_TYPES when dealing with "limit" and "offset" for paging.
+ */
 const SET_QUERY_PAGE_LIMIT_RHSM = 'SET_QUERY_PAGE_LIMIT_RHSM';
 const SET_QUERY_PAGE_OFFSET_RHSM = 'SET_QUERY_PAGE_OFFSET_RHSM';
-const SET_QUERY_SLA_RHSM = 'SET_QUERY_SLA_RHSM';
-const SET_QUERY_USAGE_RHSM = 'SET_QUERY_USAGE_RHSM';
+
+const SET_QUERY_RHSM_TYPES = {
+  [RHSM_API_QUERY_GRANULARITY]: `SET_QUERY_RHSM_${RHSM_API_QUERY_GRANULARITY}`,
+  [RHSM_API_QUERY_USAGE]: `SET_QUERY_RHSM_${RHSM_API_QUERY_USAGE}`,
+  [RHSM_API_QUERY_SLA]: `SET_QUERY_RHSM_${RHSM_API_QUERY_SLA}`,
+  [RHSM_API_QUERY_LIMIT]: `SET_QUERY_RHSM_${RHSM_API_QUERY_LIMIT}`,
+  [RHSM_API_QUERY_OFFSET]: `SET_QUERY_RHSM_${RHSM_API_QUERY_OFFSET}`
+};
 
 /**
  * Query/filter reducer types.
  *
- * @type {{SET_QUERY_PAGE_OFFSET_RHSM: string, SET_QUERY_USAGE_RHSM: string,
- *     SET_QUERY_PAGE_LIMIT_RHSM: string, SET_QUERY_CLEAR: string, SET_QUERY_SLA_RHSM: string,
- *     SET_QUERY_GRANULARITY_RHSM: string}}
+ * @type {{SET_QUERY_PAGE_OFFSET_RHSM: string, SET_QUERY_RHSM_TYPES: object,
+ *     SET_QUERY_PAGE_LIMIT_RHSM: string, SET_QUERY_CLEAR: string}}
  */
 const queryTypes = {
   SET_QUERY_CLEAR,
-  SET_QUERY_GRANULARITY_RHSM,
+  SET_QUERY_RHSM_TYPES,
   SET_QUERY_PAGE_LIMIT_RHSM,
-  SET_QUERY_PAGE_OFFSET_RHSM,
-  SET_QUERY_SLA_RHSM,
-  SET_QUERY_USAGE_RHSM
+  SET_QUERY_PAGE_OFFSET_RHSM
 };
 
 export {
   queryTypes as default,
   queryTypes,
   SET_QUERY_CLEAR,
-  SET_QUERY_GRANULARITY_RHSM,
+  SET_QUERY_RHSM_TYPES,
   SET_QUERY_PAGE_LIMIT_RHSM,
-  SET_QUERY_PAGE_OFFSET_RHSM,
-  SET_QUERY_SLA_RHSM,
-  SET_QUERY_USAGE_RHSM
+  SET_QUERY_PAGE_OFFSET_RHSM
 };