feat(feature-flagged-query-cache): Added a feature flagged query cache

flags.yml

@@ -101,6 +101,14 @@
   lifetime: temporary
   expose: true
 
+- name: Query Cache for Dashboards UI
+  description: Enables a Dashboard Cache on the uI
+  key: queryCacheForDashboards
+  default: false
+  contact: Ariel Salem / Monitoring Team
+  lifetime: temporary
+  expose: true
+
 - name: Memory Optimized Fill
   description: Enable the memory optimized fill()
   key: memoryOptimizedFill

ui/src/dashboards/components/DashboardHeader.tsx

@@ -27,6 +27,8 @@ import {
 
 // Utils
 import {event} from 'src/cloud/utils/reporting'
+import {resetQueryCache} from 'src/shared/apis/queryCache'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 // Selectors
 import {getTimeRange} from 'src/dashboards/selectors'
@@ -125,6 +127,14 @@ const DashboardHeader: FC<Props> = ({
     }
   }
 
+  const resetCacheAndRefresh = (): void => {
+    // We want to invalidate the existing cache when a user manually refreshes the dashboard
+    if (isFlagEnabled('queryCacheForDashboards')) {
+      resetQueryCache()
+    }
+    onManualRefresh()
+  }
+
   return (
     <>
       <Page.Header fullWidth={true}>
@@ -169,7 +179,7 @@ const DashboardHeader: FC<Props> = ({
           <TimeZoneDropdown />
           <AutoRefreshDropdown
             onChoose={handleChooseAutoRefresh}
-            onManualRefresh={onManualRefresh}
+            onManualRefresh={resetCacheAndRefresh}
             selected={autoRefresh}
           />
           <TimeRangeDropdown

ui/src/dashboards/components/DashboardPage.tsx

@@ -21,9 +21,10 @@ import {AddNoteOverlay, EditNoteOverlay} from 'src/overlays/components'
 // Utils
 import {pageTitleSuffixer} from 'src/shared/utils/pageTitles'
 import {event} from 'src/cloud/utils/reporting'
+import {resetQueryCache} from 'src/shared/apis/queryCache'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 // Selectors & Actions
-import {resetCachedQueryResults} from 'src/queryCache/actions'
 import {setRenderID as setRenderIDAction} from 'src/perf/actions'
 import {getByID} from 'src/resources/selectors'
 
@@ -60,10 +61,15 @@ class DashboardPage extends Component<Props> {
     const fields = {renderID}
 
     event('Dashboard Mounted', tags, fields)
+    if (isFlagEnabled('queryCacheForDashboards')) {
+      resetQueryCache()
+    }
   }
 
   public componentWillUnmount() {
-    this.props.resetCachedQueryResults()
+    if (isFlagEnabled('queryCacheForDashboards')) {
+      resetQueryCache()
+    }
   }
 
   public render() {
@@ -119,7 +125,6 @@ const mstp = (state: AppState) => {
 
 const mdtp = {
   setRenderID: setRenderIDAction,
-  resetCachedQueryResults: resetCachedQueryResults,
 }
 
 const connector = connect(mstp, mdtp)

ui/src/dashboards/selectors/index.ts

@@ -41,6 +41,14 @@ export const sortDashboardByName = (dashboards: Dashboard[]): Dashboard[] =>
     a.name.toLowerCase() > b.name.toLowerCase() ? 1 : -1
   )
 
+/**
+ * We are currently using this to track whether the dashboard is active
+ * in order to conditionally check the QueryCache in dashboard cells
+ * in the TimeSeries.tsx file, since TimeSeries.tsx is used in Dashboard Cells and Check Alerts History
+ **/
+export const isCurrentPageDashboard = (state: AppState): boolean =>
+  state.currentPage === 'dashboard'
+
 // The purpose of this function is to set a user's custom time range selection
 // from the local time to the same time in UTC if UTC is selected from the
 // timezone dropdown. This is feature was original requested here:

ui/src/mockAppState.tsx

@@ -38,9 +38,7 @@ export const mockAppState = {
       byID: {
         '054b7476389f1000': {
           id: '054b7476389f1000',
-          orgID: '674b23253171ee69',
           name: 'bucket',
-          description: '',
           selected: ['Homeward Bound'],
           arguments: {
             type: 'query',
@@ -50,21 +48,10 @@ export const mockAppState = {
               language: 'flux',
             },
           },
-          createdAt: '2020-02-25T11:30:40.482278-08:00',
-          updatedAt: '2020-07-15T14:28:39.240725-07:00',
-          labels: [],
-          links: {
-            self: '/api/v2/variables/054b7476389f1000',
-            labels: '/api/v2/variables/054b7476389f1000/labels',
-            org: '/api/v2/orgs/674b23253171ee69',
-          },
-          status: RemoteDataState.NotStarted,
         },
         '05782ef09ddb8000': {
           id: '05782ef09ddb8000',
-          orgID: '674b23253171ee69',
           name: 'base_query',
-          description: '',
           selected: [],
           arguments: {
             type: 'query',
@@ -74,21 +61,10 @@ export const mockAppState = {
               language: 'flux',
             },
           },
-          createdAt: '2020-03-31T06:18:34.615076-07:00',
-          updatedAt: '2020-07-15T14:28:26.685766-07:00',
-          labels: [],
-          links: {
-            self: '/api/v2/variables/05782ef09ddb8000',
-            labels: '/api/v2/variables/05782ef09ddb8000/labels',
-            org: '/api/v2/orgs/674b23253171ee69',
-          },
-          status: RemoteDataState.NotStarted,
         },
         '05aeb0ad75aca000': {
           id: '05aeb0ad75aca000',
-          orgID: '674b23253171ee69',
           name: 'values',
-          description: '',
           selected: ['system'],
           arguments: {
             type: 'map',
@@ -97,21 +73,10 @@ export const mockAppState = {
               usage_user: 'usage_user',
             },
           },
-          createdAt: '2020-05-12T14:23:23.222747-07:00',
-          updatedAt: '2020-05-12T14:23:23.222747-07:00',
-          labels: [],
-          links: {
-            self: '/api/v2/variables/05aeb0ad75aca000',
-            labels: '/api/v2/variables/05aeb0ad75aca000/labels',
-            org: '/api/v2/orgs/674b23253171ee69',
-          },
-          status: RemoteDataState.Done,
         },
         '05ba3253105a5000': {
           id: '05ba3253105a5000',
-          orgID: '674b23253171ee69',
           name: 'broker_host',
-          description: '',
           selected: [],
           arguments: {
             type: 'query',
@@ -121,21 +86,10 @@ export const mockAppState = {
               language: 'flux',
             },
           },
-          createdAt: '2020-05-21T12:53:06.881887-07:00',
-          updatedAt: '2020-07-15T14:28:33.980146-07:00',
-          labels: [],
-          links: {
-            self: '/api/v2/variables/05ba3253105a5000',
-            labels: '/api/v2/variables/05ba3253105a5000/labels',
-            org: '/api/v2/orgs/674b23253171ee69',
-          },
-          status: RemoteDataState.NotStarted,
         },
         '05e6e4df2287b000': {
           id: '05e6e4df2287b000',
-          orgID: '674b23253171ee69',
           name: 'deployment',
-          description: '',
           selected: [],
           arguments: {
             type: 'query',
@@ -145,21 +99,10 @@ export const mockAppState = {
               language: 'flux',
             },
           },
-          createdAt: '2020-06-25T06:06:21.962137-07:00',
-          updatedAt: '2020-07-15T14:28:55.499456-07:00',
-          labels: [],
-          links: {
-            self: '/api/v2/variables/05e6e4df2287b000',
-            labels: '/api/v2/variables/05e6e4df2287b000/labels',
-            org: '/api/v2/orgs/674b23253171ee69',
-          },
-          status: RemoteDataState.NotStarted,
         },
         '05e6e4fb0887b000': {
           id: '05e6e4fb0887b000',
-          orgID: '674b23253171ee69',
           name: 'build',
-          description: '',
           selected: [],
           arguments: {
             type: 'query',
@@ -169,15 +112,6 @@ export const mockAppState = {
               language: 'flux',
             },
           },
-          createdAt: '2020-06-25T06:06:50.530959-07:00',
-          updatedAt: '2020-07-15T14:28:48.134806-07:00',
-          labels: [],
-          links: {
-            self: '/api/v2/variables/05e6e4fb0887b000',
-            labels: '/api/v2/variables/05e6e4fb0887b000/labels',
-            org: '/api/v2/orgs/674b23253171ee69',
-          },
-          status: RemoteDataState.NotStarted,
         },
       },
       allIDs: [