[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>

docs/user/dashboard/tsvb.asciidoc

@@ -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
@@ -177,4 +200,4 @@ To group with multiple fields, create runtime fields in the index pattern you ar
 [role="screenshot"]
 image::images/tsvb_group_by_multiple_fields.png[Group by multiple fields]
 
-. Create a new TSVB visualization and group by this field.
+. Create a new TSVB visualization and group by this field.

src/core/public/doc_links/doc_links_service.ts

@@ -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`,

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

@@ -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>
+  );
+};

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

@@ -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>