[Console] Refresh frequency refinements (elastic#122125)

* Refresh frequency refinements Co-authored-by: Muhammad Ibragimov <muhammad.ibragimov@elastic.co> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
tomsonpl · Jan 17, 2022 · 313f0af · 313f0af
1 parent dcc4454
commit 313f0af
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 44 deletions.
diff --git a/src/plugins/console/public/application/components/settings_modal.tsx b/src/plugins/console/public/application/components/settings_modal.tsx
@@ -7,7 +7,7 @@
  */
 
 import _ from 'lodash';
-import React, { Fragment, useCallback, useState, ChangeEventHandler } from 'react';
+import React, { Fragment, useState, useCallback } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 
@@ -23,22 +23,38 @@ import {
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiSwitch,
-  EuiSelect,
-  EuiFlexGroup,
-  EuiFlexItem,
+  EuiSuperSelect,
 } 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}}',
+const onceTimeInterval = () =>
+  i18n.translate('console.settingsPage.refreshInterval.onceTimeInterval', {
+    defaultMessage: 'Once, when console loads',
+  });
+
+const everyNMinutesTimeInterval = (value: number) =>
+  i18n.translate('console.settingsPage.refreshInterval.everyNMinutesTimeInterval', {
+    defaultMessage: 'Every {value} {value, plural, one {minute} other {minutes}}',
     values: { value },
-  }),
+  });
+
+const everyHourTimeInterval = () =>
+  i18n.translate('console.settingsPage.refreshInterval.everyHourTimeInterval', {
+    defaultMessage: 'Every hour',
+  });
+
+const PRESETS_IN_MINUTES = [0, 1, 10, 20, 60];
+const intervalOptions = PRESETS_IN_MINUTES.map((value) => ({
+  value: (value * 60000).toString(),
+  inputDisplay:
+    value === 0
+      ? onceTimeInterval()
+      : value === 60
+      ? everyHourTimeInterval()
+      : everyNMinutesTimeInterval(value),
 }));
 
 interface Props {
@@ -112,10 +128,12 @@ export function DevToolsSettingsModal(props: Props) {
     });
   }
 
-  const onIntervalChange: ChangeEventHandler<HTMLSelectElement> = useCallback(
-    (e) => setPollInterval(parseInt(e.target.value, 10)),
-    []
-  );
+  const onPollingIntervalChange = useCallback((value: string) => {
+    const sanitizedValue = parseInt(value, 10);
+
+    setPolling(!!sanitizedValue);
+    setPollInterval(sanitizedValue);
+  }, []);
 
   // It only makes sense to show polling options if the user needs to fetch any data.
   const pollingFields =
@@ -125,43 +143,22 @@ export function DevToolsSettingsModal(props: Props) {
           label={
             <FormattedMessage
               id="console.settingsPage.refreshingDataLabel"
-              defaultMessage="Refreshing autocomplete suggestions"
+              defaultMessage="Refresh frequency"
             />
           }
           helpText={
             <FormattedMessage
               id="console.settingsPage.refreshingDataDescription"
               defaultMessage="Console refreshes autocomplete suggestions by querying Elasticsearch.
-              Automatic refreshes may be an issue if you have a large cluster or if you have network limitations."
+              Less frequent refresh is recommended to reduce bandwith costs."
             />
           }
         >
-          <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)}
-              />
-            </EuiFlexItem>
-            <EuiFlexItem>
-              <EuiSelect
-                fullWidth
-                compressed
-                options={intervalOptions}
-                value={pollInterval}
-                onChange={onIntervalChange}
-                disabled={!polling}
-              />
-            </EuiFlexItem>
-          </EuiFlexGroup>
+          <EuiSuperSelect
+            options={intervalOptions}
+            valueOfSelected={pollInterval.toString()}
+            onChange={onPollingIntervalChange}
+          />
         </EuiFormRow>
 
         <EuiButton

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -235,7 +235,6 @@
     "console.settingsPage.indicesAndAliasesLabelText": "インデックスとエイリアス",
     "console.settingsPage.jsonSyntaxLabel": "JSON構文",
     "console.settingsPage.pageTitle": "コンソール設定",
-    "console.settingsPage.pollingLabelText": "自動入力候補を自動的に更新",
     "console.settingsPage.refreshButtonLabel": "自動入力候補の更新",
     "console.settingsPage.refreshingDataDescription": "コンソールは、Elasticsearchをクエリして自動入力候補を更新します。クラスターが大きい場合や、ネットワークの制限がある場合には、自動更新で問題が発生する可能性があります。",
     "console.settingsPage.refreshingDataLabel": "自動入力候補を更新しています",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -238,7 +238,6 @@
     "console.settingsPage.indicesAndAliasesLabelText": "索引和别名",
     "console.settingsPage.jsonSyntaxLabel": "JSON 语法",
     "console.settingsPage.pageTitle": "控制台设置",
-    "console.settingsPage.pollingLabelText": "自动刷新自动完成建议",
     "console.settingsPage.refreshButtonLabel": "刷新自动完成建议",
     "console.settingsPage.refreshingDataDescription": "控制台通过查询 Elasticsearch 来刷新自动完成建议。如果您的集群较大或您的网络有限制，则自动刷新可能会造成问题。",
     "console.settingsPage.refreshingDataLabel": "正在刷新自动完成建议",