[Console] Configure refresh frequency (#121874)

* Add configurable poll interval

Co-authored-by: Muhammad Ibragimov <muhammad.ibragimov@elastic.co>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

src/plugins/console/public/application/components/settings_modal.tsx

@@ -7,7 +7,7 @@
  */
 
 import _ from 'lodash';
-import React, { Fragment, useState } from 'react';
+import React, { Fragment, useCallback, useState, ChangeEventHandler } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 
@@ -23,12 +23,24 @@ import {
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiSwitch,
+  EuiSelect,
+  EuiFlexGroup,
+  EuiFlexItem,
 } from '@elastic/eui';
 
 import { DevToolsSettings } from '../../services';
 
 export type AutocompleteOptions = 'fields' | 'indices' | 'templates';
 
+const PRESETS_IN_MINUTES = [1, 5, 10];
+const intervalOptions = PRESETS_IN_MINUTES.map((value) => ({
+  value: value * 60000,
+  text: i18n.translate('console.settingsPage.refreshInterval.timeInterval', {
+    defaultMessage: '{value} {value, plural, one {minute} other {minutes}}',
+    values: { value },
+  }),
+}));
+
 interface Props {
   onSaveSettings: (newSettings: DevToolsSettings) => void;
   onClose: () => void;
@@ -43,6 +55,7 @@ export function DevToolsSettingsModal(props: Props) {
   const [indices, setIndices] = useState(props.settings.autocomplete.indices);
   const [templates, setTemplates] = useState(props.settings.autocomplete.templates);
   const [polling, setPolling] = useState(props.settings.polling);
+  const [pollInterval, setPollInterval] = useState(props.settings.pollInterval);
   const [tripleQuotes, setTripleQuotes] = useState(props.settings.tripleQuotes);
   const [historyDisabled, setHistoryDisabled] = useState(props.settings.historyDisabled);
 
@@ -93,11 +106,17 @@ export function DevToolsSettingsModal(props: Props) {
         templates,
       },
       polling,
+      pollInterval,
       tripleQuotes,
       historyDisabled,
     });
   }
 
+  const onIntervalChange: ChangeEventHandler<HTMLSelectElement> = useCallback(
+    (e) => setPollInterval(parseInt(e.target.value, 10)),
+    []
+  );
+
   // It only makes sense to show polling options if the user needs to fetch any data.
   const pollingFields =
     fields || indices || templates ? (
@@ -117,18 +136,32 @@ export function DevToolsSettingsModal(props: Props) {
             />
           }
         >
-          <EuiSwitch
-            checked={polling}
-            data-test-subj="autocompletePolling"
-            id="autocompletePolling"
-            label={
-              <FormattedMessage
-                defaultMessage="Automatically refresh autocomplete suggestions"
-                id="console.settingsPage.pollingLabelText"
+          <EuiFlexGroup alignItems="center" gutterSize="m">
+            <EuiFlexItem grow={false}>
+              <EuiSwitch
+                checked={polling}
+                data-test-subj="autocompletePolling"
+                id="autocompletePolling"
+                label={
+                  <FormattedMessage
+                    defaultMessage="Refresh every"
+                    id="console.settingsPage.pollingLabelText"
+                  />
+                }
+                onChange={(e) => setPolling(e.target.checked)}
               />
-            }
-            onChange={(e) => setPolling(e.target.checked)}
-          />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiSelect
+                fullWidth
+                compressed
+                options={intervalOptions}
+                value={pollInterval}
+                onChange={onIntervalChange}
+                disabled={!polling}
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
         </EuiFormRow>
 
         <EuiButton

src/plugins/console/public/lib/mappings/mappings.js

@@ -10,9 +10,6 @@ import $ from 'jquery';
 import _ from 'lodash';
 import * as es from '../es/es';
 
-// NOTE: If this value ever changes to be a few seconds or less, it might introduce flakiness
-// due to timing issues in our app.js tests.
-const POLL_INTERVAL = 60000;
 let pollTimeoutId;
 
 let perIndexTypes = {};
@@ -331,6 +328,6 @@ export function retrieveAutoCompleteInfo(settings, settingsToRetrieve) {
       if (settings.getPolling()) {
         retrieveAutoCompleteInfo(settings, settings.getAutocomplete());
       }
-    }, POLL_INTERVAL);
+    }, settings.getPollInterval());
   });
 }

src/plugins/console/public/services/settings.ts

@@ -11,6 +11,7 @@ import { Storage } from './index';
 export const DEFAULT_SETTINGS = Object.freeze({
   fontSize: 14,
   polling: true,
+  pollInterval: 60000,
   tripleQuotes: true,
   wrapMode: true,
   autocomplete: Object.freeze({ fields: true, indices: true, templates: true }),
@@ -26,6 +27,7 @@ export interface DevToolsSettings {
     templates: boolean;
   };
   polling: boolean;
+  pollInterval: number;
   tripleQuotes: boolean;
   historyDisabled: boolean;
 }
@@ -87,6 +89,14 @@ export class Settings {
     return this.storage.get('disable_history', DEFAULT_SETTINGS.historyDisabled);
   }
 
+  setPollInterval(interval: number) {
+    this.storage.set('poll_interval', interval);
+  }
+
+  getPollInterval() {
+    return this.storage.get('poll_interval', DEFAULT_SETTINGS.pollInterval);
+  }
+
   toJSON(): DevToolsSettings {
     return {
       autocomplete: this.getAutocomplete(),
@@ -94,6 +104,7 @@ export class Settings {
       tripleQuotes: this.getTripleQuotes(),
       fontSize: parseFloat(this.getFontSize()),
       polling: Boolean(this.getPolling()),
+      pollInterval: this.getPollInterval(),
       historyDisabled: Boolean(this.getHistoryDisabled()),
     };
   }
@@ -104,6 +115,7 @@ export class Settings {
     tripleQuotes,
     autocomplete,
     polling,
+    pollInterval,
     historyDisabled,
   }: DevToolsSettings) {
     this.setFontSize(fontSize);
@@ -111,6 +123,7 @@ export class Settings {
     this.setTripleQuotes(tripleQuotes);
     this.setAutocomplete(autocomplete);
     this.setPolling(polling);
+    this.setPollInterval(pollInterval);
     this.setHistoryDisabled(historyDisabled);
   }
 }