[TSVB] Change the default mode from last value to entire timerange

src/plugins/telemetry/schema/oss_plugins.json

@@ -9321,6 +9321,16 @@
         }
       }
     },
+    "vis_type_timeseries": {
+      "properties": {
+        "timeseries_use_last_value_mode_total": {
+          "type": "long",
+          "_meta": {
+            "description": "Number of TSVB visualizations using \"last value\" as a time range"
+          }
+        }
+      }
+    },
     "vis_type_vega": {
       "properties": {
         "vega_lib_specs_total": {

src/plugins/vis_type_timeseries/kibana.json

@@ -5,5 +5,6 @@
   "server": true,
   "ui": true,
   "requiredPlugins": ["charts", "data", "expressions", "visualizations", "visualize"],
+  "optionalPlugins": ["usageCollection"],
   "requiredBundles": ["kibanaUtils", "kibanaReact"]
 }

src/plugins/vis_type_timeseries/public/application/components/index_pattern.js

@@ -89,20 +89,20 @@ export const IndexPattern = ({
   const handleTextChange = createTextHandler(onChange);
 
   const timeRangeOptions = [
-    {
-      label: i18n.translate('visTypeTimeseries.indexPattern.timeRange.lastValue', {
-        defaultMessage: 'Last value',
-      }),
-      value: TIME_RANGE_DATA_MODES.LAST_VALUE,
-      disabled: !isTimerangeModeEnabled(TIME_RANGE_DATA_MODES.LAST_VALUE, uiRestrictions),
-    },
     {
       label: i18n.translate('visTypeTimeseries.indexPattern.timeRange.entireTimeRange', {
         defaultMessage: 'Entire time range',
       }),
       value: TIME_RANGE_DATA_MODES.ENTIRE_TIME_RANGE,
       disabled: !isTimerangeModeEnabled(TIME_RANGE_DATA_MODES.ENTIRE_TIME_RANGE, uiRestrictions),
     },
+    {
+      label: i18n.translate('visTypeTimeseries.indexPattern.timeRange.lastValue', {
+        defaultMessage: 'Last value',
+      }),
+      value: TIME_RANGE_DATA_MODES.LAST_VALUE,
+      disabled: !isTimerangeModeEnabled(TIME_RANGE_DATA_MODES.LAST_VALUE, uiRestrictions),
+    },
   ];
 
   const defaults = {
@@ -139,6 +139,7 @@ export const IndexPattern = ({
               })}
             >
               <EuiComboBox
+                data-test-subj="dataTimeRangeMode"
                 isClearable={false}
                 placeholder={i18n.translate(
                   'visTypeTimeseries.indexPattern.timeRange.selectTimeRange',

src/plugins/vis_type_timeseries/public/application/components/panel_config/gauge.js

@@ -321,13 +321,21 @@ class GaugePanelConfigUi extends Component {
     return (
       <>
         <EuiTabs size="s">
-          <EuiTab isSelected={selectedTab === 'data'} onClick={() => this.switchTab('data')}>
+          <EuiTab
+            isSelected={selectedTab === 'data'}
+            onClick={() => this.switchTab('data')}
+            data-test-subj="gaugeEditorDataBtn"
+          >
             <FormattedMessage
               id="visTypeTimeseries.gauge.dataTab.dataButtonLabel"
               defaultMessage="Data"
             />
           </EuiTab>
-          <EuiTab isSelected={selectedTab === 'options'} onClick={() => this.switchTab('options')}>
+          <EuiTab
+            isSelected={selectedTab === 'options'}
+            onClick={() => this.switchTab('options')}
+            data-test-subj="gaugeEditorPanelOptionsBtn"
+          >
             <FormattedMessage
               id="visTypeTimeseries.gauge.optionsTab.panelOptionsButtonLabel"
               defaultMessage="Panel options"

src/plugins/vis_type_timeseries/public/application/components/panel_config/metric.js

@@ -158,7 +158,11 @@ export class MetricPanelConfig extends Component {
     return (
       <>
         <EuiTabs size="s">
-          <EuiTab isSelected={selectedTab === 'data'} onClick={() => this.switchTab('data')}>
+          <EuiTab
+            isSelected={selectedTab === 'data'}
+            onClick={() => this.switchTab('data')}
+            data-test-subj="metricEditorDataBtn"
+          >
             <FormattedMessage
               id="visTypeTimeseries.metric.dataTab.dataButtonLabel"
               defaultMessage="Data"

src/plugins/vis_type_timeseries/public/application/components/panel_config/table.js

@@ -265,13 +265,21 @@ export class TablePanelConfig extends Component {
     return (
       <>
         <EuiTabs size="s">
-          <EuiTab isSelected={selectedTab === 'data'} onClick={() => this.switchTab('data')}>
+          <EuiTab
+            data-test-subj="tableEditorDataBtn"
+            isSelected={selectedTab === 'data'}
+            onClick={() => this.switchTab('data')}
+          >
             <FormattedMessage
               id="visTypeTimeseries.table.dataTab.columnsButtonLabel"
               defaultMessage="Columns"
             />
           </EuiTab>
-          <EuiTab isSelected={selectedTab === 'options'} onClick={() => this.switchTab('options')}>
+          <EuiTab
+            data-test-subj="tableEditorPanelOptionsBtn"
+            isSelected={selectedTab === 'options'}
+            onClick={() => this.switchTab('options')}
+          >
             <FormattedMessage
               id="visTypeTimeseries.table.optionsTab.panelOptionsButtonLabel"
               defaultMessage="Panel options"

src/plugins/vis_type_timeseries/public/application/components/panel_config/top_n.js

@@ -218,13 +218,21 @@ export class TopNPanelConfig extends Component {
     return (
       <>
         <EuiTabs size="s">
-          <EuiTab isSelected={selectedTab === 'data'} onClick={() => this.switchTab('data')}>
+          <EuiTab
+            isSelected={selectedTab === 'data'}
+            onClick={() => this.switchTab('data')}
+            data-test-subj="topNEditorDataBtn"
+          >
             <FormattedMessage
               id="visTypeTimeseries.topN.dataTab.dataButtonLabel"
               defaultMessage="Data"
             />
           </EuiTab>
-          <EuiTab isSelected={selectedTab === 'options'} onClick={() => this.switchTab('options')}>
+          <EuiTab
+            isSelected={selectedTab === 'options'}
+            onClick={() => this.switchTab('options')}
+            data-test-subj="topNEditorPanelOptionsBtn"
+          >
             <FormattedMessage
               id="visTypeTimeseries.topN.optionsTab.panelOptionsButtonLabel"
               defaultMessage="Panel options"

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

@@ -27,6 +27,7 @@ import { Storage } from '../../../../../plugins/kibana_utils/public';
 import { VisEditorVisualization } from './vis_editor_visualization';
 import { PanelConfig } from './panel_config';
 import { extractIndexPatterns } from '../../../common/extract_index_patterns';
+import { TIME_RANGE_DATA_MODES, TIME_RANGE_MODE_KEY } from '../../../common/timerange_data_modes';
 import { VisPicker } from './vis_picker';
 import { fetchFields, VisFields } from '../lib/fetch_fields';
 import { getDataStart, getCoreStart } from '../../services';
@@ -64,7 +65,16 @@ export class VisEditor extends Component<TimeseriesEditorProps, TimeseriesEditor
     this.state = {
       autoApply: true,
       dirty: false,
-      model: this.props.vis.params,
+      model: {
+        // we should set default value for 'time_range_mode' in model so that when user save visualization
+        // we set right mode in savedObject
+        // ternary operator needed because old visualization have 'time_range_mode' as undefined for 'last_value'
+        // but for creating new visaulization we should use 'entire_timerange' as default.
+        [TIME_RANGE_MODE_KEY]: this.props.vis.title
+          ? TIME_RANGE_DATA_MODES.LAST_VALUE
+          : TIME_RANGE_DATA_MODES.ENTIRE_TIME_RANGE,
+        ...this.props.vis.params,
+      },
       extractedIndexPatterns: [''],
     };
 

src/plugins/vis_type_timeseries/server/plugin.ts

@@ -37,6 +37,8 @@ import {
 } from './lib/search_strategies';
 import { TimeseriesVisData, VisPayload } from '../common/types';
 
+import { registerTimeseriesUsageCollector } from './usage_collector';
+
 export interface LegacySetup {
   server: Server;
 }
@@ -117,6 +119,10 @@ export class VisTypeTimeseriesPlugin implements Plugin<VisTypeTimeseriesSetup> {
     visDataRoutes(router, framework);
     fieldsRoutes(router, framework);
 
+    if (plugins.usageCollection) {
+      registerTimeseriesUsageCollector(plugins.usageCollection, globalConfig$);
+    }
+
     return {
       getVisData: async (
         requestContext: VisTypeTimeseriesRequestHandlerContext,

src/plugins/vis_type_timeseries/server/types.ts

@@ -6,6 +6,8 @@
  * Side Public License, v 1.
  */
 
+import { Observable } from 'rxjs';
+import { SharedGlobalConfig } from 'kibana/server';
 import type { IRouter, IUiSettingsClient, KibanaRequest } from 'src/core/server';
 import type {
   DataRequestHandlerContext,
@@ -15,6 +17,8 @@ import type {
 import { VisPayload } from '../common/types';
 import { SearchStrategyRegistry } from './lib/search_strategies';
 
+export type ConfigObservable = Observable<SharedGlobalConfig>;
+
 export type VisTypeTimeseriesRequestHandlerContext = DataRequestHandlerContext;
 export type VisTypeTimeseriesRouter = IRouter<VisTypeTimeseriesRequestHandlerContext>;
 export type VisTypeTimeseriesVisDataRequest = KibanaRequest<{}, {}, VisPayload>;

src/plugins/vis_type_timeseries/server/usage_collector/get_usage_collector.mock.ts

@@ -0,0 +1,14 @@
+/*
+ * 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.
+ */
+
+export const mockStats = { somestat: 1 };
+export const mockGetStats = jest.fn().mockResolvedValue(mockStats);
+
+jest.doMock('./get_usage_collector', () => ({
+  getStats: mockGetStats,
+}));

src/plugins/vis_type_timeseries/server/usage_collector/get_usage_collector.test.ts

@@ -0,0 +1,168 @@
+/*
+ * 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 { getStats } from './get_usage_collector';
+import { createCollectorFetchContextMock } from 'src/plugins/usage_collection/server/mocks';
+import { TIME_RANGE_DATA_MODES } from '../../common/timerange_data_modes';
+
+const mockedSavedObjects = [
+  {
+    _id: 'visualization:timeseries-123',
+    _source: {
+      type: 'visualization',
+      visualization: {
+        visState: JSON.stringify({
+          type: 'metrics',
+          title: 'TSVB visualization 1',
+          params: {
+            time_range_mode: TIME_RANGE_DATA_MODES.ENTIRE_TIME_RANGE,
+          },
+        }),
+      },
+    },
+  },
+  {
+    _id: 'visualization:timeseries-321',
+    _source: {
+      type: 'visualization',
+      visualization: {
+        visState: JSON.stringify({
+          type: 'metrics',
+          title: 'TSVB visualization 2',
+          params: {
+            time_range_mode: TIME_RANGE_DATA_MODES.LAST_VALUE,
+          },
+        }),
+      },
+    },
+  },
+  {
+    _id: 'visualization:timeseries-456',
+    _source: {
+      type: 'visualization',
+      visualization: {
+        visState: JSON.stringify({
+          type: 'metrics',
+          title: 'TSVB visualization 3',
+          params: {
+            time_range_mode: undefined,
+          },
+        }),
+      },
+    },
+  },
+];
+
+const mockedSavedObjectsByValue = [
+  {
+    attributes: {
+      panelsJSON: JSON.stringify({
+        type: 'visualization',
+        embeddableConfig: {
+          savedVis: {
+            type: 'metrics',
+            params: {
+              time_range_mode: TIME_RANGE_DATA_MODES.LAST_VALUE,
+            },
+          },
+        },
+      }),
+    },
+  },
+  {
+    attributes: {
+      panelsJSON: JSON.stringify({
+        type: 'visualization',
+        embeddableConfig: {
+          savedVis: {
+            type: 'metrics',
+            params: {
+              time_range_mode: TIME_RANGE_DATA_MODES.ENTIRE_TIME_RANGE,
+            },
+          },
+        },
+      }),
+    },
+  },
+];
+
+const getMockCollectorFetchContext = (hits?: unknown[], savedObjectsByValue: unknown[] = []) => {
+  const fetchParamsMock = createCollectorFetchContextMock();
+
+  fetchParamsMock.esClient.search = jest.fn().mockResolvedValue({ body: { hits: { hits } } });
+  fetchParamsMock.soClient.find = jest.fn().mockResolvedValue({
+    saved_objects: savedObjectsByValue,
+  });
+  return fetchParamsMock;
+};
+
+describe('Timeseries visualization usage collector', () => {
+  const mockIndex = 'mock_index';
+
+  test('Returns undefined when no results found (undefined)', async () => {
+    const mockCollectorFetchContext = getMockCollectorFetchContext([], []);
+    const result = await getStats(
+      mockCollectorFetchContext.esClient,
+      mockCollectorFetchContext.soClient,
+      mockIndex
+    );
+
+    expect(result).toBeUndefined();
+  });
+
+  test('Returns undefined when no timeseries saved objects found', async () => {
+    const mockCollectorFetchContext = getMockCollectorFetchContext(
+      [
+        {
+          _id: 'visualization:myvis-123',
+          _source: {
+            type: 'visualization',
+            visualization: { visState: '{"type": "area"}' },
+          },
+        },
+      ],
+      [
+        {
+          attributes: {
+            panelsJSON: JSON.stringify({
+              type: 'visualization',
+              embeddableConfig: {
+                savedVis: {
+                  type: 'area',
+                },
+              },
+            }),
+          },
+        },
+      ]
+    );
+    const result = await getStats(
+      mockCollectorFetchContext.esClient,
+      mockCollectorFetchContext.soClient,
+      mockIndex
+    );
+
+    expect(result).toBeUndefined();
+  });
+
+  test('Summarizes visualizations response data', async () => {
+    const mockCollectorFetchContext = getMockCollectorFetchContext(
+      mockedSavedObjects,
+      mockedSavedObjectsByValue
+    );
+    const result = await getStats(
+      mockCollectorFetchContext.esClient,
+      mockCollectorFetchContext.soClient,
+      mockIndex
+    );
+
+    expect(result).toMatchObject({
+      timeseries_use_last_value_mode_total: 3,
+    });
+  });
+});