[TSVB] Fix Markdown variables are not available on the first rendering (#108836)

* [TSVB] Markdown variables are not available on the first rendering

Closes: #108721

* Update editor_controller.tsx

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

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

@@ -8,7 +8,6 @@
 
 import React, { Component } from 'react';
 import * as Rx from 'rxjs';
-import uuid from 'uuid/v4';
 import { share } from 'rxjs/operators';
 import { isEqual, isEmpty, debounce } from 'lodash';
 import { EventEmitter } from 'events';
@@ -64,6 +63,7 @@ export class VisEditor extends Component<TimeseriesEditorProps, TimeseriesEditor
   constructor(props: TimeseriesEditorProps) {
     super(props);
     this.localStorage = new Storage(window.localStorage);
+
     this.state = {
       autoApply: true,
       dirty: false,
@@ -77,9 +77,6 @@ export class VisEditor extends Component<TimeseriesEditorProps, TimeseriesEditor
             ? TIME_RANGE_DATA_MODES.LAST_VALUE
             : TIME_RANGE_DATA_MODES.ENTIRE_TIME_RANGE,
         ...this.props.vis.params,
-        ...(!this.props.vis.id && {
-          id: uuid(),
-        }),
       },
       extractedIndexPatterns: [''],
     };

src/plugins/vis_type_timeseries/public/application/editor_controller.tsx

@@ -8,13 +8,13 @@
 
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
-import { EventEmitter } from 'events';
+import type { EventEmitter } from 'events';
+import type { Vis, VisualizeEmbeddableContract } from 'src/plugins/visualizations/public';
+import type { IEditorController, EditorRenderProps } from 'src/plugins/visualize/public';
 
-import { Vis, VisualizeEmbeddableContract } from 'src/plugins/visualizations/public';
-import { IEditorController, EditorRenderProps } from 'src/plugins/visualize/public';
 import { getUISettings, getI18n } from '../services';
 import { VisEditor } from './components/vis_editor_lazy';
-import { TimeseriesVisParams } from '../types';
+import type { TimeseriesVisParams } from '../types';
 
 export const TSVB_EDITOR_NAME = 'tsvbEditor';
 

src/plugins/vis_type_timeseries/public/metrics_type.ts

@@ -13,10 +13,42 @@ import { PANEL_TYPES, TOOLTIP_MODES } from '../common/enums';
 import { isStringTypeIndexPattern } from '../common/index_patterns_utils';
 import { TSVB_DEFAULT_COLOR } from '../common/constants';
 import { toExpressionAst } from './to_ast';
-import { VIS_EVENT_TO_TRIGGER, VisGroups, VisParams } from '../../visualizations/public';
+import {
+  Vis,
+  VIS_EVENT_TO_TRIGGER,
+  VisGroups,
+  VisParams,
+  VisTypeDefinition,
+} from '../../visualizations/public';
 import { getDataStart } from './services';
+import type { TimeseriesVisDefaultParams, TimeseriesVisParams } from './types';
 
-export const metricsVisDefinition = {
+export const withReplacedIds = (
+  vis: Vis<TimeseriesVisParams | TimeseriesVisDefaultParams>
+): Vis<TimeseriesVisParams> => {
+  const doReplace = (
+    obj: Partial<{
+      id: string | (() => string);
+    }>
+  ) => {
+    if (typeof obj?.id === 'function') {
+      obj.id = obj.id();
+    }
+  };
+
+  doReplace(vis.params);
+
+  vis.params.series?.forEach((series) => {
+    doReplace(series);
+    series.metrics?.forEach((metric) => doReplace(metric));
+  });
+
+  return vis;
+};
+
+export const metricsVisDefinition: VisTypeDefinition<
+  TimeseriesVisParams | TimeseriesVisDefaultParams
+> = {
   name: 'metrics',
   title: i18n.translate('visTypeTimeseries.kbnVisTypes.metricsTitle', { defaultMessage: 'TSVB' }),
   description: i18n.translate('visTypeTimeseries.kbnVisTypes.metricsDescription', {
@@ -26,11 +58,11 @@ export const metricsVisDefinition = {
   group: VisGroups.PROMOTED,
   visConfig: {
     defaults: {
-      id: uuid(),
+      id: () => uuid(),
       type: PANEL_TYPES.TIMESERIES,
       series: [
         {
-          id: uuid(),
+          id: () => uuid(),
           color: TSVB_DEFAULT_COLOR,
           split_mode: 'everything',
           palette: {
@@ -39,7 +71,7 @@ export const metricsVisDefinition = {
           },
           metrics: [
             {
-              id: uuid(),
+              id: () => uuid(),
               type: 'count',
             },
           ],
@@ -66,6 +98,7 @@ export const metricsVisDefinition = {
       drop_last_bucket: 0,
     },
   },
+  setup: (vis) => Promise.resolve(withReplacedIds(vis)),
   editorConfig: {
     editor: TSVB_EDITOR_NAME,
   },

src/plugins/vis_type_timeseries/public/types.ts

@@ -19,3 +19,13 @@ export type DragHandleProps = FirstArgumentOf<
 >['dragHandleProps'];
 
 export type TimeseriesVisParams = Panel;
+
+export type TimeseriesVisDefaultParams = TimeseriesVisParams & {
+  id: () => string;
+  series: {
+    id: () => string;
+    metrics: {
+      id: () => string;
+    };
+  };
+};