[Lens][TSVB] Functional tests for converting of Metric. (#143164)

* Added test for metric with params.

* Added test for invalid model.

* Added test for unsupported aggregation.

* Added test for sibling pipeline agg.

* Added parent pipeline agg tests.

* Added functional tests for static value.

* Added tests for converting metric with params, unsupported metrics and not valid panels.

* Added tests for color ranges.

test/functional/page_objects/visual_builder_page.ts

@@ -417,6 +417,18 @@ export class VisualBuilderPageObject extends FtrService {
     });
   }
 
+  public async createColorRule(nth = 0) {
+    await this.clickPanelOptions('metric');
+
+    const elements = await this.testSubjects.findAll('AddAddBtn');
+    await elements[nth].click();
+    await this.visChart.waitForVisualizationRenderingStabilized();
+    await this.retry.waitFor('new color rule is added', async () => {
+      const currentAddButtons = await this.testSubjects.findAll('AddAddBtn');
+      return currentAddButtons.length > elements.length;
+    });
+  }
+
   public async selectAggType(value: string, nth = 0) {
     const elements = await this.testSubjects.findAll('aggSelector');
     await this.comboBox.setElement(elements[nth], value);

x-pack/test/functional/apps/lens/group3/open_in_lens/tsvb/metric.ts

@@ -9,9 +9,16 @@ import expect from '@kbn/expect';
 import { FtrProviderContext } from '../../../../../ftr_provider_context';
 
 export default function ({ getPageObjects, getService }: FtrProviderContext) {
-  const { visualize, visualBuilder, lens } = getPageObjects(['visualBuilder', 'visualize', 'lens']);
+  const { visualize, visualBuilder, lens, header } = getPageObjects([
+    'visualBuilder',
+    'visualize',
+    'lens',
+    'header',
+  ]);
 
   const testSubjects = getService('testSubjects');
+  const retry = getService('retry');
+  const find = getService('find');
 
   describe('Metric', function describeIndexTests() {
     before(async () => {
@@ -40,5 +47,95 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
       const metricData = await lens.getMetricVisualizationData();
       expect(metricData[0].title).to.eql('Count of records');
     });
+
+    it('should draw static value', async () => {
+      await visualBuilder.selectAggType('Static Value');
+      await visualBuilder.setStaticValue(10);
+
+      await header.waitUntilLoadingHasFinished();
+
+      const button = await testSubjects.find('visualizeEditInLensButton');
+      await button.click();
+      await lens.waitForVisualization('mtrVis');
+      await retry.try(async () => {
+        const layers = await find.allByCssSelector(`[data-test-subj^="lns-layerPanel-"]`);
+        expect(layers).to.have.length(1);
+
+        const dimensions = await testSubjects.findAll('lns-dimensionTrigger');
+        expect(dimensions).to.have.length(1);
+        expect(await dimensions[0].getVisibleText()).to.be('10');
+      });
+    });
+
+    it('should convert metric with params', async () => {
+      await visualBuilder.selectAggType('Value Count');
+      await visualBuilder.setFieldForAggregation('bytes');
+
+      await header.waitUntilLoadingHasFinished();
+
+      const button = await testSubjects.find('visualizeEditInLensButton');
+      await button.click();
+      await lens.waitForVisualization('mtrVis');
+      await retry.try(async () => {
+        const layers = await find.allByCssSelector(`[data-test-subj^="lns-layerPanel-"]`);
+        expect(layers).to.have.length(1);
+
+        const dimensions = await testSubjects.findAll('lns-dimensionTrigger');
+        expect(dimensions).to.have.length(1);
+        expect(await dimensions[0].getVisibleText()).to.be('Count of bytes');
+      });
+    });
+
+    it('should not allow converting of unsupported metric', async () => {
+      await visualBuilder.selectAggType('Counter Rate');
+      await visualBuilder.setFieldForAggregation('machine.ram');
+
+      await header.waitUntilLoadingHasFinished();
+
+      const canEdit = await testSubjects.exists('visualizeEditInLensButton');
+      expect(canEdit).to.be(false);
+    });
+
+    it('should not allow converting of not valid panel', async () => {
+      await visualBuilder.selectAggType('Value Count');
+      await header.waitUntilLoadingHasFinished();
+      const canEdit = await testSubjects.exists('visualizeEditInLensButton');
+      expect(canEdit).to.be(false);
+    });
+
+    it('should convert color ranges', async () => {
+      await visualBuilder.clickPanelOptions('metric');
+      await visualBuilder.setColorRuleOperator('>= greater than or equal');
+      await visualBuilder.setColorRuleValue(10);
+      await visualBuilder.setColorPickerValue('#54B399');
+
+      await header.waitUntilLoadingHasFinished();
+      const button = await testSubjects.find('visualizeEditInLensButton');
+      await button.click();
+
+      await lens.waitForVisualization('mtrVis');
+      await retry.try(async () => {
+        const closePalettePanels = await testSubjects.findAll(
+          'lns-indexPattern-PalettePanelContainerBack'
+        );
+        if (closePalettePanels.length) {
+          await lens.closePalettePanel();
+          await lens.closeDimensionEditor();
+        }
+
+        const dimensions = await testSubjects.findAll('lns-dimensionTrigger');
+        expect(dimensions).to.have.length(1);
+
+        dimensions[0].click();
+
+        await lens.openPalettePanel('lnsMetric');
+        const colorStops = await lens.getPaletteColorStops();
+
+        expect(colorStops).to.eql([
+          { stop: '10', color: 'rgba(84, 179, 153, 1)' },
+          { stop: '', color: undefined },
+        ]);
+      });
+    });
   });
 }

x-pack/test/functional/page_objects/lens_page.ts

@@ -1586,5 +1586,21 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont
         throw new Error(`Warning with text "${warningText}" not found`);
       }
     },
+
+    async getPaletteColorStops() {
+      const stops = await find.allByCssSelector(
+        `[data-test-subj^="lnsPalettePanel_dynamicColoring_range_value_"]`
+      );
+      const colorsElements = await testSubjects.findAll('euiColorPickerAnchor');
+      const colors = await Promise.all(
+        colorsElements.map((c) => c.getComputedStyle('background-color'))
+      );
+
+      return await Promise.all(
+        stops.map(async (stop, index) => {
+          return { stop: await stop.getAttribute('value'), color: colors[index] };
+        })
+      );
+    },
   });
 }