From 313f0af01f2c45c09f97ebe267c12aab245e10b3 Mon Sep 17 00:00:00 2001 From: Muhammad Ibragimov <53621505+mibragimov@users.noreply.github.com> Date: Mon, 17 Jan 2022 17:03:41 +0500 Subject: [PATCH] [Console] Refresh frequency refinements (#122125) * Refresh frequency refinements Co-authored-by: Muhammad Ibragimov Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- .../application/components/settings_modal.tsx | 81 +++++++++---------- .../translations/translations/ja-JP.json | 1 - .../translations/translations/zh-CN.json | 1 - 3 files changed, 39 insertions(+), 44 deletions(-) diff --git a/src/plugins/console/public/application/components/settings_modal.tsx b/src/plugins/console/public/application/components/settings_modal.tsx index aad45b6fc0bcf3..c4be329dabcb88 100644 --- 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 = 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={ } helpText={ } > - - - - } - onChange={(e) => setPolling(e.target.checked)} - /> - - - - - +