[D&D] Fixes time series for new chart types (#2309) (#2323)

* fixes time series for new chart types
* moves translate to source string

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>
(cherry picked from commit 93f6872)

Co-authored-by: Ashwin P Chandran <ashwinpc@amazon.com>
Co-authored-by: Kawika Avilla <kavilla414@gmail.com>

src/plugins/wizard/public/application/utils/get_top_nav_config.tsx

@@ -80,13 +80,7 @@ export const getTopNavConfig = (
       }),
       testId: 'wizardSaveButton',
       disableButton: !!saveDisabledReason,
-      tooltip() {
-        if (saveDisabledReason) {
-          return i18n.translate('wizard.topNavMenu.saveVisualizationDisabledButtonTooltip', {
-            defaultMessage: saveDisabledReason,
-          });
-        }
-      },
+      tooltip: saveDisabledReason,
       run: (_anchorElement) => {
         const onSave = async ({
           newTitle,

src/plugins/wizard/public/application/utils/use/use_can_save.ts

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { i18n } from '@osd/i18n';
 import { useTypedSelector } from '../state_management';
 
 export const useCanSave = () => {
@@ -20,12 +21,20 @@ export const useCanSave = () => {
 
 // TODO: Need to finalize the error messages
 const getErrorMsg = (isEmpty, hasNoChange, hasDraftAgg) => {
+  const i18nTranslate = (key: string, defaultMessage: string) =>
+    i18n.translate(`wizard.saveVisualizationTooltip.${key}`, {
+      defaultMessage,
+    });
+
   if (isEmpty) {
-    return 'The canvas is empty. Add some aggregations before saving.';
+    return i18nTranslate('empty', 'The canvas is empty. Add some aggregations before saving.');
   } else if (hasNoChange) {
-    return 'Add some changes before saving.';
+    return i18nTranslate('noChange', 'Add some changes before saving.');
   } else if (hasDraftAgg) {
-    return 'Has unapplied aggregations changes, update them before saving.';
+    return i18nTranslate(
+      'hasDraftAgg',
+      'Has unapplied aggregations changes, update them before saving.'
+    );
   } else {
     return undefined;
   }

src/plugins/wizard/public/visualizations/vislib/area/to_expression.ts

@@ -7,24 +7,20 @@ import { Vis, buildVislibDimensions } from '../../../../../visualizations/public
 import { buildExpression, buildExpressionFunction } from '../../../../../expressions/public';
 import { AreaOptionsDefaults } from './area_vis_type';
 import { getAggExpressionFunctions } from '../../common/expression_helpers';
-import { VislibRootState } from '../common/types';
-import { getValueAxes } from '../common/get_value_axes';
+import { VislibRootState, getValueAxes, getPipelineParams } from '../common';
 
 export const toExpression = async ({
   style: styleState,
   visualization,
 }: VislibRootState<AreaOptionsDefaults>) => {
   const { aggConfigs, expressionFns } = await getAggExpressionFunctions(visualization);
   const { addLegend, addTooltip, legendPosition, type } = styleState;
-  const pipelineConfigs = {
-    // todo: this will blow up for time x dimensions
-    timefilter: null, // todo: get the time filter from elsewhere
-  };
+  const params = getPipelineParams();
 
   const vis = new Vis(type);
   vis.data.aggs = aggConfigs;
 
-  const dimensions = await buildVislibDimensions(vis, pipelineConfigs as any);
+  const dimensions = await buildVislibDimensions(vis, params);
   const valueAxes = getValueAxes(dimensions.y);
 
   // TODO: what do we want to put in this "vis config"?

src/plugins/wizard/public/visualizations/vislib/common/get_pipeline_params.ts

@@ -0,0 +1,15 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { BuildPipelineParams } from '../../../../../visualizations/public';
+import { getTimeFilter } from '../../../plugin_services';
+
+export const getPipelineParams = (): BuildPipelineParams => {
+  const timeFilter = getTimeFilter();
+  return {
+    timefilter: timeFilter,
+    timeRange: timeFilter.getTime(),
+  };
+};

src/plugins/wizard/public/visualizations/vislib/common/index.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './basic_vis_options';
+export * from './get_pipeline_params';
+export * from './get_value_axes';
+export * from './types';

src/plugins/wizard/public/visualizations/vislib/histogram/to_expression.ts

@@ -7,24 +7,20 @@ import { Vis, buildVislibDimensions } from '../../../../../visualizations/public
 import { buildExpression, buildExpressionFunction } from '../../../../../expressions/public';
 import { HistogramOptionsDefaults } from './histogram_vis_type';
 import { getAggExpressionFunctions } from '../../common/expression_helpers';
-import { VislibRootState } from '../common/types';
-import { getValueAxes } from '../common/get_value_axes';
+import { VislibRootState, getValueAxes, getPipelineParams } from '../common';
 
 export const toExpression = async ({
   style: styleState,
   visualization,
 }: VislibRootState<HistogramOptionsDefaults>) => {
   const { aggConfigs, expressionFns } = await getAggExpressionFunctions(visualization);
   const { addLegend, addTooltip, legendPosition, type } = styleState;
-  const pipelineConfigs = {
-    // todo: this will blow up for time x dimensions
-    timefilter: null, // todo: get the time filter from elsewhere
-  };
+  const params = getPipelineParams();
 
   const vis = new Vis(type);
   vis.data.aggs = aggConfigs;
 
-  const dimensions = await buildVislibDimensions(vis, pipelineConfigs as any);
+  const dimensions = await buildVislibDimensions(vis, params);
   const valueAxes = getValueAxes(dimensions.y);
 
   // TODO: what do we want to put in this "vis config"?

src/plugins/wizard/public/visualizations/vislib/line/to_expression.ts

@@ -7,24 +7,20 @@ import { Vis, buildVislibDimensions } from '../../../../../visualizations/public
 import { buildExpression, buildExpressionFunction } from '../../../../../expressions/public';
 import { LineOptionsDefaults } from './line_vis_type';
 import { getAggExpressionFunctions } from '../../common/expression_helpers';
-import { VislibRootState } from '../common/types';
-import { getValueAxes } from '../common/get_value_axes';
+import { VislibRootState, getValueAxes, getPipelineParams } from '../common';
 
 export const toExpression = async ({
   style: styleState,
   visualization,
 }: VislibRootState<LineOptionsDefaults>) => {
   const { aggConfigs, expressionFns } = await getAggExpressionFunctions(visualization);
   const { addLegend, addTooltip, legendPosition, type } = styleState;
-  const pipelineConfigs = {
-    // todo: this will blow up for time x dimensions
-    timefilter: null, // todo: get the time filter from elsewhere
-  };
+  const params = getPipelineParams();
 
   const vis = new Vis(type);
   vis.data.aggs = aggConfigs;
 
-  const dimensions = await buildVislibDimensions(vis, pipelineConfigs as any);
+  const dimensions = await buildVislibDimensions(vis, params);
   const valueAxes = getValueAxes(dimensions.y);
 
   // TODO: what do we want to put in this "vis config"?