Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[7.x] Fix minor Console regressions introduced during EUIfication. (#41089) #41942

Merged
merged 1 commit into from
Jul 25, 2019
Merged

[7.x] Fix minor Console regressions introduced during EUIfication. (#41089) #41942

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/legacy/core_plugins/console/public/_app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,3 +61,7 @@
z-index: $euiZLevel1 + 2;
margin-top: 22px;
}

.conApp__settingsModal {
min-width: 460px;
}
2 changes: 1 addition & 1 deletion src/legacy/core_plugins/console/public/src/components/editor_example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@

import React, { useEffect } from 'react';
// @ts-ignore
import exampleText from 'raw-loader!./helpExample.txt';
import exampleText from 'raw-loader!./help_example.txt';
import $ from 'jquery';
// @ts-ignore
import SenseEditor from '../sense_editor/editor';
Expand Down
0 ...ole/public/src/components/helpExample.txt → ...le/public/src/components/help_example.txt
View file
Open in desktop
File renamed without changes.
108 changes: 67 additions & 41 deletions src/legacy/core_plugins/console/public/src/components/settings_modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
* under the License.
*/

import React, { useState } from 'react';
import React, { Fragment, useState } from 'react';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';

Expand All @@ -42,7 +42,7 @@ export type AutocompleteOptions = 'fields' | 'indices' | 'templates';
interface Props {
onSaveSettings: (newSettings: DevToolsSettings) => Promise<void>;
onClose: () => void;
refreshAutocompleteSettings: () => void;
refreshAutocompleteSettings: (selectedSettings: any) => void;
settings: DevToolsSettings;
}

Expand Down Expand Up @@ -106,9 +106,70 @@ export function DevToolsSettingsModal(props: Props) {
});
}

// It only makes sense to show polling options if the user needs to fetch any data.
const pollingFields =
fields || indices || templates ? (
<Fragment>
<EuiFormRow
label={
<FormattedMessage
id="console.settingsPage.refreshingDataLabel"
defaultMessage="Refreshing autocomplete suggestions"
/>
}
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."
/>
}
>
<EuiSwitch
checked={polling}
data-test-subj="autocompletePolling"
id="autocompletePolling"
label={
<FormattedMessage
defaultMessage="Automatically refresh autocomplete suggestions"
id="console.settingsPage.pollingLabelText"
/>
}
onChange={e => setPolling(e.target.checked)}
/>
</EuiFormRow>

<EuiButton
data-test-subj="autocompletePolling"
id="autocompletePolling"
onClick={() => {
// Only refresh the currently selected settings.
props.refreshAutocompleteSettings({
autocomplete: {
fields,
indices,
templates,
},
});
}}
>
<FormattedMessage
defaultMessage="Refresh autocomplete suggestions"
id="console.settingsPage.refreshButtonLabel"
/>
</EuiButton>
</Fragment>
) : (
undefined
);

return (
<EuiOverlayMask>
<EuiModal data-test-subj="devToolsSettingsModal" onClose={props.onClose}>
<EuiModal
data-test-subj="devToolsSettingsModal"
className="conApp__settingsModal"
onClose={props.onClose}
>
<EuiModalHeader>
<EuiModalHeaderTitle>
<FormattedMessage
Expand Down Expand Up @@ -140,6 +201,7 @@ export function DevToolsSettingsModal(props: Props) {
}}
/>
</EuiFormRow>

<EuiFormRow>
<EuiSwitch
checked={wrapMode}
Expand Down Expand Up @@ -176,6 +238,7 @@ export function DevToolsSettingsModal(props: Props) {
onChange={e => setTripleQuotes(e.target.checked)}
/>
</EuiFormRow>

<EuiFormRow
labelType="legend"
label={
Expand All @@ -193,45 +256,8 @@ export function DevToolsSettingsModal(props: Props) {
}}
/>
</EuiFormRow>
<EuiFormRow
label={
<FormattedMessage
id="console.settingsPage.refreshingDataLabel"
defaultMessage="Refreshing autocomplete suggestions"
/>
}
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."
/>
}
>
<EuiSwitch
checked={polling}
data-test-subj="autocompletePolling"
id="autocompletePolling"
label={
<FormattedMessage
defaultMessage="Automatically refresh autocomplete suggestions"
id="console.settingsPage.pollingLabelText"
/>
}
onChange={e => setPolling(e.target.checked)}
/>
</EuiFormRow>

<EuiButton
data-test-subj="autocompletePolling"
id="autocompletePolling"
onClick={props.refreshAutocompleteSettings}
>
<FormattedMessage
defaultMessage="Refresh autocomplete suggestions"
id="console.settingsPage.refreshButtonLabel"
/>
</EuiButton>
{pollingFields}
</EuiModalBody>

<EuiModalFooter>
Expand Down
31 changes: 24 additions & 7 deletions src/legacy/core_plugins/console/public/src/helpers/settings_show_modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
import { I18nContext } from 'ui/i18n';
import React from 'react';
import ReactDOM from 'react-dom';
import { DevToolsSettingsModal } from '../components/settings_modal';
import { DevToolsSettingsModal, AutocompleteOptions } from '../components/settings_modal';
import { DevToolsSettings } from '../components/dev_tools_settings';

// @ts-ignore
Expand All @@ -32,8 +32,8 @@ export function showSettingsModal() {
const container = document.getElementById('consoleSettingsModal');
const curSettings = getCurrentSettings();

const refreshAutocompleteSettings = () => {
mappings.retrieveAutoCompleteInfo();
const refreshAutocompleteSettings = (selectedSettings: any) => {
mappings.retrieveAutoCompleteInfo(selectedSettings);
};

const closeModal = () => {
Expand All @@ -53,13 +53,30 @@ export function showSettingsModal() {
newSettings: DevToolsSettings,
prevSettings: DevToolsSettings
) => {
// We'll only retrieve settings if polling is on.
const isPollingChanged = prevSettings.polling !== newSettings.polling;
// We'll only retrieve settings if polling is on. The expectation here is that if the user
// disables polling it's because they want manual control over the fetch request (possibly
// because it's a very expensive request given their cluster and bandwidth). In that case,
// they would be unhappy with any request that's sent automatically.
if (newSettings.polling) {
const autocompleteDiff = getAutocompleteDiff(newSettings, prevSettings);
if (autocompleteDiff.length > 0) {
mappings.retrieveAutoCompleteInfo(newSettings.autocomplete);

const isSettingsChanged = autocompleteDiff.length > 0;
const isPollingChanged = prevSettings.polling !== newSettings.polling;

if (isSettingsChanged) {
// If the user has changed one of the autocomplete settings, then we'll fetch just the
// ones which have changed.
const changedSettings: any = autocompleteDiff.reduce(
(changedSettingsAccum: any, setting: string): any => {
changedSettingsAccum[setting] =
newSettings.autocomplete[setting as AutocompleteOptions];
return changedSettingsAccum;
},
{}
);
mappings.retrieveAutoCompleteInfo(changedSettings);
} else if (isPollingChanged) {
// If the user has turned polling on, then we'll fetch all selected autocomplete settings.
mappings.retrieveAutoCompleteInfo();
}
}
Expand Down
10 changes: 10 additions & 0 deletions src/legacy/core_plugins/console/public/src/mappings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,6 +287,16 @@ function retrieveSettings(settingsKey, settingsToRetrieve) {
}

// Retrieve all selected settings by default.
// TODO: We should refactor this to be easier to consume. Ideally this function should retrieve
// whatever settings are specified, otherwise just use the saved settings. This requires changing
// the behavior to not *clear* whatever settings have been unselected, but it's hard to tell if
// this is possible without altering the autocomplete behavior. These are the scenarios we need to
// support:
// 1. Manual refresh. Specify what we want. Fetch specified, leave unspecified alone.
// 2. Changed selection and saved: Specify what we want. Fetch changed and selected, leave
// unchanged alone (both selected and unselected).
// 3. Poll: Use saved. Fetch selected. Ignore unselected.

function retrieveAutoCompleteInfo(settingsToRetrieve = settings.getAutocomplete()) {
if (pollTimeoutId) {
clearTimeout(pollTimeoutId);
Expand Down