Misc fixes

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

Author: ashwin-pc

src/plugins/wizard/public/application/components/right_nav.tsx

@@ -3,15 +3,24 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
-import { EuiSuperSelect, EuiSuperSelectOption, EuiIcon, IconType } from '@elastic/eui';
+import React, { useState } from 'react';
+import {
+  EuiSuperSelect,
+  EuiSuperSelectOption,
+  EuiIcon,
+  IconType,
+  EuiConfirmModal,
+} from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+import { FormattedMessage } from '@osd/i18n/react';
 import { useVisualizationType } from '../utils/use';
 import './side_nav.scss';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import { WizardServices } from '../../types';
 import { setActiveVisualization, useTypedDispatch } from '../utils/state_management';
 
 export const RightNav = () => {
+  const [newVisType, setNewVisType] = useState<string>();
   const {
     services: { types },
   } = useOpenSearchDashboards<WizardServices>();
@@ -32,19 +41,46 @@ export const RightNav = () => {
           options={options}
           valueOfSelected={activeVisName}
           onChange={(name) => {
-            dispatch(
-              setActiveVisualization({
-                name,
-                style: types.get(name)?.ui.containerConfig.style.defaults,
-              })
-            );
+            setNewVisType(name);
           }}
           fullWidth
         />
       </div>
       <div className="wizSidenav__style">
         <StyleSection />
       </div>
+      {newVisType && (
+        <EuiConfirmModal
+          title={i18n.translate('wizard.rightNav.changeVisType.modalTitle', {
+            defaultMessage: 'Change Visualization type',
+          })}
+          confirmButtonText={i18n.translate('wizard.rightNav.changeVisType.confirmText', {
+            defaultMessage: 'Ok',
+          })}
+          cancelButtonText={i18n.translate('wizard.rightNav.changeVisType.cancelText', {
+            defaultMessage: 'Cancel',
+          })}
+          onCancel={() => setNewVisType(undefined)}
+          onConfirm={() => {
+            dispatch(
+              setActiveVisualization({
+                name: newVisType,
+                style: types.get(newVisType)?.ui.containerConfig.style.defaults,
+              })
+            );
+
+            setNewVisType(undefined);
+          }}
+          maxWidth="300px"
+        >
+          <p>
+            <FormattedMessage
+              id="wizard.rightNav.changeVisType.modalDescription"
+              defaultMessage="Currently, changing the visualization type clears the existing selection of fields. Are you sure you want to change the visualization type?"
+            />
+          </p>
+        </EuiConfirmModal>
+      )}
     </section>
   );
 };

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

@@ -8,6 +8,7 @@ import { buildExpression, buildExpressionFunction } from '../../../../../express
 import { AreaOptionsDefaults } from './area_vis_type';
 import { getAggExpressionFunctions } from '../../common/expression_helpers';
 import { VislibRootState } from '../common/types';
+import { getValueAxes } from '../common/get_value_axes';
 
 export const toExpression = async ({
   style: styleState,
@@ -24,6 +25,7 @@ export const toExpression = async ({
   vis.data.aggs = aggConfigs;
 
   const dimensions = await buildVislibDimensions(vis, pipelineConfigs as any);
+  const valueAxes = getValueAxes(dimensions.y);
 
   // TODO: what do we want to put in this "vis config"?
   const visConfig = {
@@ -32,6 +34,7 @@ export const toExpression = async ({
     addTimeMarker: false,
     addTooltip,
     dimensions,
+    valueAxes,
   };
 
   const vislib = buildExpressionFunction<any>('vislib', {

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

@@ -0,0 +1,31 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { SchemaConfig } from '../../../../../visualizations/public';
+import { ValueAxis } from '../../../../../vis_type_vislib/public';
+
+interface ValueAxisConfig extends ValueAxis {
+  style: any;
+}
+
+export const getValueAxes = (yAxes: SchemaConfig[]): ValueAxisConfig[] =>
+  yAxes.map((y, index) => ({
+    id: `ValueAxis-${index + 1}`,
+    labels: {
+      show: true,
+    },
+    name: `ValueAxis-${index + 1}`,
+    position: 'left',
+    scale: {
+      type: 'linear',
+      mode: 'normal',
+    },
+    show: true,
+    style: {},
+    title: {
+      text: y.label,
+    },
+    type: 'value',
+  }));

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

@@ -8,6 +8,7 @@ import { buildExpression, buildExpressionFunction } from '../../../../../express
 import { HistogramOptionsDefaults } from './histogram_vis_type';
 import { getAggExpressionFunctions } from '../../common/expression_helpers';
 import { VislibRootState } from '../common/types';
+import { getValueAxes } from '../common/get_value_axes';
 
 export const toExpression = async ({
   style: styleState,
@@ -24,6 +25,7 @@ export const toExpression = async ({
   vis.data.aggs = aggConfigs;
 
   const dimensions = await buildVislibDimensions(vis, pipelineConfigs as any);
+  const valueAxes = getValueAxes(dimensions.y);
 
   // TODO: what do we want to put in this "vis config"?
   const visConfig = {
@@ -32,6 +34,7 @@ export const toExpression = async ({
     addTimeMarker: false,
     addTooltip,
     dimensions,
+    valueAxes,
   };
 
   const vislib = buildExpressionFunction<any>('vislib', {

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

@@ -8,6 +8,7 @@ import { buildExpression, buildExpressionFunction } from '../../../../../express
 import { LineOptionsDefaults } from './line_vis_type';
 import { getAggExpressionFunctions } from '../../common/expression_helpers';
 import { VislibRootState } from '../common/types';
+import { getValueAxes } from '../common/get_value_axes';
 
 export const toExpression = async ({
   style: styleState,
@@ -24,6 +25,7 @@ export const toExpression = async ({
   vis.data.aggs = aggConfigs;
 
   const dimensions = await buildVislibDimensions(vis, pipelineConfigs as any);
+  const valueAxes = getValueAxes(dimensions.y);
 
   // TODO: what do we want to put in this "vis config"?
   const visConfig = {
@@ -32,6 +34,7 @@ export const toExpression = async ({
     addTimeMarker: false,
     addTooltip,
     dimensions,
+    valueAxes,
   };
 
   const vislib = buildExpressionFunction<any>('vislib', {

test/functional/apps/wizard/_base.ts

@@ -7,7 +7,7 @@ import expect from '@osd/expect';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
-  const PageObjects = getPageObjects(['visualize', 'wizard']);
+  const PageObjects = getPageObjects(['visualize', 'wizard', 'visChart']);
   const log = getService('log');
   const retry = getService('retry');
 
@@ -28,11 +28,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
     it('should show visualization when a field is added', async () => {
       await PageObjects.wizard.addField('metric', 'Average', 'machine.ram');
-      const avgMachineRam = ['13,104,036,080.615', 'Average machine.ram'];
 
-      await retry.try(async function tryingForTime() {
-        const metricValue = await PageObjects.wizard.getMetric();
-        expect(avgMachineRam).to.eql(metricValue);
+      await retry.try(async () => {
+        const data = await PageObjects.visChart.getBarChartData('Average machine.ram');
+        expect(data).to.eql([13104038093]);
       });
     });