[TSVB] Documents the new index pattern mode

docs/user/dashboard/tsvb.asciidoc

@@ -118,6 +118,27 @@ The *Markdown* visualization supports Markdown with Handlebar (mustache) syntax
   The math context is able to do simple and advanced calculations per series.
   This function must always be the last metric in the series.
 
+[float]
+[[tsvb-index-pattern-mode]]
+==== TSVB Index pattern mode
+From 7.13.0, TSVB supports a new mode of creating a chart, the *index pattern mode*. 
+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 on the *Index pattern* setting.
+. Switch on the *Use only Kibana index patterns* switch
+. Reselect the index pattern from the dropdown and the timefield
+
+image::images/tsvb_index_pattern_selection_mode.png[Change index pattern selection mode action]
+
+The new mode unlocks many new features such as:
+* Runtime fields
+* Url drilldowns
+* Create filters by clicking on a timeseries chart
+* Better performance
+* and more features to come
+
+The old mode, which the users can create a TSVB chart by applying an es index string, is considered as deprecated and is going to be removed in the future.
+
 [float]
 [[tsvb-faq]]
 ==== Frequently asked questions

src/core/public/doc_links/doc_links_service.ts

@@ -251,6 +251,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`,

src/plugins/vis_type_timeseries/public/application/components/vis_editor.tsx

@@ -12,7 +12,8 @@ import uuid from 'uuid/v4';
 import { share } from 'rxjs/operators';
 import { isEqual, isEmpty, debounce } from 'lodash';
 import { EventEmitter } from 'events';
-
+import { EuiCallOut, EuiLink, EuiButton, EuiFlexGroup } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
 import type { IUiSettingsClient } from 'kibana/public';
 import {
   Vis,
@@ -55,6 +56,7 @@ interface TimeseriesEditorState {
   extractedIndexPatterns: IndexPatternValue[];
   model: TimeseriesVisParams;
   visFields?: VisFields;
+  hideCallout: boolean;
 }
 
 export class VisEditor extends Component<TimeseriesEditorProps, TimeseriesEditorState> {
@@ -70,6 +72,9 @@ export class VisEditor extends Component<TimeseriesEditorProps, TimeseriesEditor
       autoApply: true,
       dirty: false,
       defaultIndex: null,
+      hideCallout:
+        this.props.vis.params.use_kibana_indexes ||
+        Boolean(this.localStorage.get('CALLOUT_HIDDEN')),
       model: {
         // we should set default value for 'time_range_mode' in model so that when user save visualization
         // we set right mode in savedObject
@@ -163,8 +168,16 @@ export class VisEditor extends Component<TimeseriesEditorProps, TimeseriesEditor
     this.visDataSubject.next(visData);
   };
 
+  dismissNotice = () => {
+    this.localStorage.set('CALLOUT_HIDDEN', true);
+    this.setState({
+      hideCallout: true,
+    });
+  };
+
   render() {
-    const { model, visFields } = this.state;
+    const { model, visFields, hideCallout } = this.state;
+    const indexPatternModeLink = getCoreStart().docLinks.links.visualize.tsvbIndexPatternMode;
 
     if (!visFields) {
       // wait for fields initialization
@@ -182,6 +195,48 @@ export class VisEditor extends Component<TimeseriesEditorProps, TimeseriesEditor
       >
         <DefaultIndexPatternContext.Provider value={this.state.defaultIndex}>
           <div className="tvbEditor" data-test-subj="tvbVisEditor">
+            {!hideCallout && (
+              <EuiCallOut
+                title={
+                  <FormattedMessage
+                    id="visTypeTimeseries.visEditorVisualization.indexPatternMode.notificationTitle"
+                    defaultMessage="New: Index pattern mode"
+                  />
+                }
+                iconType="cheer"
+                size="s"
+              >
+                <p>
+                  <FormattedMessage
+                    id="visTypeTimeseries.visEditorVisualization.indexPatternMode.notificationMessage"
+                    defaultMessage="Introduced on 7.13.0, TSVB supports a new mode of creating charts, the index pattern mode. Check it out {indexPatternModeLink}."
+                    values={{
+                      indexPatternModeLink: (
+                        <EuiLink href={indexPatternModeLink} target="_blank" external>
+                          <FormattedMessage
+                            id="visTypeTimeseries.visEditorVisualization.indexPatternMode.link"
+                            defaultMessage="here."
+                          />
+                        </EuiLink>
+                      ),
+                    }}
+                  />
+                </p>
+                <EuiFlexGroup gutterSize="none">
+                  <EuiButton
+                    size="s"
+                    onClick={() => {
+                      this.dismissNotice();
+                    }}
+                  >
+                    <FormattedMessage
+                      id="visTypeTimeseries.visEditorVisualization.indexPatternMode.dismissNoticeButtonText"
+                      defaultMessage="Dismiss message"
+                    />
+                  </EuiButton>
+                </EuiFlexGroup>
+              </EuiCallOut>
+            )}
             <div className="tvbEditor--hideForReporting">
               <VisPicker currentVisType={model.type} onChange={this.handleChange} />
             </div>