[TSVB] Documents the new index pattern mode (#102880)
* [TSVB] Document the new index pattern mode * Add a callout to TSVB to advertise the new index pattern mode * Conditionally render the callout, give capability to dismiss it * Fix i18n * Update the notification texts * Update notification text * Change callout storage key * add UseIndexPatternModeCallout component * Update docs/user/dashboard/tsvb.asciidoc Co-authored-by: Kaarina Tungseth <kaarina.tungseth@elastic.co> * Update docs/user/dashboard/tsvb.asciidoc Co-authored-by: Kaarina Tungseth <kaarina.tungseth@elastic.co> * Update docs/user/dashboard/tsvb.asciidoc Co-authored-by: Kaarina Tungseth <kaarina.tungseth@elastic.co> * Update docs/user/dashboard/tsvb.asciidoc Co-authored-by: Kaarina Tungseth <kaarina.tungseth@elastic.co> * Update docs/user/dashboard/tsvb.asciidoc Co-authored-by: Kaarina Tungseth <kaarina.tungseth@elastic.co> * Update docs/user/dashboard/tsvb.asciidoc Co-authored-by: Kaarina Tungseth <kaarina.tungseth@elastic.co> * Update docs/user/dashboard/tsvb.asciidoc Co-authored-by: Kaarina Tungseth <kaarina.tungseth@elastic.co> * Update docs/user/dashboard/tsvb.asciidoc Co-authored-by: Kaarina Tungseth <kaarina.tungseth@elastic.co> * Final docs changes * Remove TSVB from title Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Alexey Antonov <alexwizp@gmail.com> Co-authored-by: Kaarina Tungseth <kaarina.tungseth@elastic.co>
This commit is contained in:
parent
6c328cc8e0
commit
c52e0e12aa
5 changed files with 96 additions and 2 deletions
BIN
docs/user/dashboard/images/tsvb_index_pattern_selection_mode.png
Normal file
BIN
docs/user/dashboard/images/tsvb_index_pattern_selection_mode.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 128 KiB |
|
@ -30,6 +30,29 @@ By default, *TSVB* drops the last bucket because the time filter intersects the
|
|||
|
||||
.. In the *Panel filter* field, enter <<kuery-query, KQL filters>> to view specific documents.
|
||||
|
||||
[float]
|
||||
[[tsvb-index-pattern-mode]]
|
||||
==== Index pattern mode
|
||||
Create *TSVB* visualizations with {kib} index patterns.
|
||||
|
||||
IMPORTANT: Creating *TSVB* visualizations with an {es} index string is deprecated and will be removed in a future release.
|
||||
It is the default one for new visualizations but it can also be switched for the old implementations:
|
||||
|
||||
. Click *Panel options*, then click the gear icon to open the *Index pattern selection mode* options.
|
||||
. Select *Use only Kibana index patterns*.
|
||||
. Reselect the index pattern from the dropdown, then select the *Time field*.
|
||||
|
||||
image::images/tsvb_index_pattern_selection_mode.png[Change index pattern selection mode action]
|
||||
|
||||
The index pattern mode unlocks many new features, such as:
|
||||
* Runtime fields
|
||||
|
||||
* URL drilldowns
|
||||
|
||||
* Interactive filters for time series visualizations
|
||||
|
||||
* Better performance
|
||||
|
||||
[float]
|
||||
[[configure-the-data-series]]
|
||||
==== Configure the series
|
||||
|
|
|
@ -263,6 +263,7 @@ export class DocLinksService {
|
|||
lensPanels: `${KIBANA_DOCS}lens.html`,
|
||||
maps: `${ELASTIC_WEBSITE_URL}maps`,
|
||||
vega: `${KIBANA_DOCS}vega.html`,
|
||||
tsvbIndexPatternMode: `${KIBANA_DOCS}tsvb.html#tsvb-index-pattern-mode`,
|
||||
},
|
||||
observability: {
|
||||
guide: `${ELASTIC_WEBSITE_URL}guide/en/observability/${DOC_LINK_VERSION}/index.html`,
|
||||
|
|
|
@ -0,0 +1,69 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
||||
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
||||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
import React, { useMemo, useCallback } from 'react';
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
import useLocalStorage from 'react-use/lib/useLocalStorage';
|
||||
import { EuiButton, EuiCallOut, EuiFlexGroup, EuiLink } from '@elastic/eui';
|
||||
import { getCoreStart } from '../../services';
|
||||
|
||||
const LOCAL_STORAGE_KEY = 'TSVB_INDEX_PATTERN_CALLOUT_HIDDEN';
|
||||
|
||||
export const UseIndexPatternModeCallout = () => {
|
||||
const [dismissed, setDismissed] = useLocalStorage(LOCAL_STORAGE_KEY, false);
|
||||
const indexPatternModeLink = useMemo(
|
||||
() => getCoreStart().docLinks.links.visualize.tsvbIndexPatternMode,
|
||||
[]
|
||||
);
|
||||
|
||||
const dismissNotice = useCallback(() => {
|
||||
setDismissed(true);
|
||||
}, [setDismissed]);
|
||||
|
||||
if (dismissed) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<EuiCallOut
|
||||
title={
|
||||
<FormattedMessage
|
||||
id="visTypeTimeseries.visEditorVisualization.indexPatternMode.notificationTitle"
|
||||
defaultMessage="TSVB now supports index patterns"
|
||||
/>
|
||||
}
|
||||
iconType="cheer"
|
||||
size="s"
|
||||
>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="visTypeTimeseries.visEditorVisualization.indexPatternMode.notificationMessage"
|
||||
defaultMessage="Great news! You can now visualize the data from Elasticsearch indices or Kibana index patterns. {indexPatternModeLink}."
|
||||
values={{
|
||||
indexPatternModeLink: (
|
||||
<EuiLink href={indexPatternModeLink} target="_blank" external>
|
||||
<FormattedMessage
|
||||
id="visTypeTimeseries.visEditorVisualization.indexPatternMode.link"
|
||||
defaultMessage="Check it out."
|
||||
/>
|
||||
</EuiLink>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
<EuiFlexGroup gutterSize="none">
|
||||
<EuiButton size="s" onClick={dismissNotice}>
|
||||
<FormattedMessage
|
||||
id="visTypeTimeseries.visEditorVisualization.indexPatternMode.dismissNoticeButtonText"
|
||||
defaultMessage="Dismiss"
|
||||
/>
|
||||
</EuiButton>
|
||||
</EuiFlexGroup>
|
||||
</EuiCallOut>
|
||||
);
|
||||
};
|
|
@ -12,7 +12,6 @@ import uuid from 'uuid/v4';
|
|||
import { share } from 'rxjs/operators';
|
||||
import { isEqual, isEmpty, debounce } from 'lodash';
|
||||
import { EventEmitter } from 'events';
|
||||
|
||||
import type { IUiSettingsClient } from 'kibana/public';
|
||||
import {
|
||||
Vis,
|
||||
|
@ -35,6 +34,7 @@ import { VisPicker } from './vis_picker';
|
|||
import { fetchFields, VisFields } from '../lib/fetch_fields';
|
||||
import { getDataStart, getCoreStart } from '../../services';
|
||||
import { TimeseriesVisParams } from '../../types';
|
||||
import { UseIndexPatternModeCallout } from './use_index_patter_mode_callout';
|
||||
|
||||
const VIS_STATE_DEBOUNCE_DELAY = 200;
|
||||
const APP_NAME = 'VisEditor';
|
||||
|
@ -182,6 +182,7 @@ export class VisEditor extends Component<TimeseriesEditorProps, TimeseriesEditor
|
|||
>
|
||||
<DefaultIndexPatternContext.Provider value={this.state.defaultIndex}>
|
||||
<div className="tvbEditor" data-test-subj="tvbVisEditor">
|
||||
{!this.props.vis.params.use_kibana_indexes && <UseIndexPatternModeCallout />}
|
||||
<div className="tvbEditor--hideForReporting">
|
||||
<VisPicker currentVisType={model.type} onChange={this.handleChange} />
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue