[Visualize] Add missing advanced settings and custom label for pipeli…

…ne aggs (#69688) * Show advanced settings in pipeline aggs * Add functional tests * Make sub metric in sibling pipeline to have custom label Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
elastic · Jul 2, 2020 · a8347fa · a8347fa
1 parent a0e2630
commit a8347fa
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 5 deletions.
diff --git a/src/plugins/vis_default_editor/public/components/agg_group.tsx b/src/plugins/vis_default_editor/public/components/agg_group.tsx
@@ -152,7 +152,7 @@ function DefaultEditorAggGroup({
         <EuiSpacer size="s" />
         {bucketsError && (
           <>
-            <EuiFormErrorText>{bucketsError}</EuiFormErrorText>
+            <EuiFormErrorText data-test-subj="bucketsError">{bucketsError}</EuiFormErrorText>
             <EuiSpacer size="s" />
           </>
         )}

diff --git a/src/plugins/vis_default_editor/public/components/agg_params_helper.ts b/src/plugins/vis_default_editor/public/components/agg_params_helper.ts
@@ -111,7 +111,11 @@ function getAggParamsToRender({
       const aggType = agg.type.type;
       const aggName = agg.type.name;
       const aggParams = get(aggParamsMap, [aggType, aggName], {});
-      paramEditor = get(aggParams, param.name) || get(aggParamsMap, ['common', param.type]);
+      paramEditor = get(aggParams, param.name);
+    }
+
+    if (!paramEditor) {
+      paramEditor = get(aggParamsMap, ['common', param.type]);
     }
 
     // show params with an editor component

diff --git a/src/plugins/vis_default_editor/public/components/controls/sub_metric.tsx b/src/plugins/vis_default_editor/public/components/controls/sub_metric.tsx
@@ -45,9 +45,10 @@ function SubMetricParamEditor({
     defaultMessage: 'Bucket',
   });
   const type = aggParam.name;
+  const isCustomMetric = type === 'customMetric';
 
-  const aggTitle = type === 'customMetric' ? metricTitle : bucketTitle;
-  const aggGroup = type === 'customMetric' ? AggGroupNames.Metrics : AggGroupNames.Buckets;
+  const aggTitle = isCustomMetric ? metricTitle : bucketTitle;
+  const aggGroup = isCustomMetric ? AggGroupNames.Metrics : AggGroupNames.Buckets;
 
   useMount(() => {
     if (agg.params[type]) {
@@ -87,7 +88,7 @@ function SubMetricParamEditor({
         setValidity={setValidity}
         setTouched={setTouched}
         schemas={schemas}
-        hideCustomLabel={true}
+        hideCustomLabel={!isCustomMetric}
       />
     </>
   );

diff --git a/test/functional/apps/visualize/_line_chart.js b/test/functional/apps/visualize/_line_chart.js
@@ -279,5 +279,79 @@ export default function ({ getService, getPageObjects }) {
         expect(labels).to.eql(expectedLabels);
       });
     });
+
+    describe('pipeline aggregations', () => {
+      before(async () => {
+        log.debug('navigateToApp visualize');
+        await PageObjects.visualize.navigateToNewVisualization();
+        log.debug('clickLineChart');
+        await PageObjects.visualize.clickLineChart();
+        await PageObjects.visualize.clickNewSearch();
+        await PageObjects.timePicker.setDefaultAbsoluteRange();
+      });
+
+      describe('parent pipeline', () => {
+        it('should have an error if bucket is not selected', async () => {
+          await PageObjects.visEditor.clickMetricEditor();
+          log.debug('Metrics agg = Serial diff');
+          await PageObjects.visEditor.selectAggregation('Serial diff', 'metrics');
+          await testSubjects.existOrFail('bucketsError');
+        });
+
+        it('should apply with selected bucket', async () => {
+          log.debug('Bucket = X-axis');
+          await PageObjects.visEditor.clickBucket('X-axis');
+          log.debug('Aggregation = Date Histogram');
+          await PageObjects.visEditor.selectAggregation('Date Histogram');
+          await PageObjects.visEditor.clickGo();
+          const title = await PageObjects.visChart.getYAxisTitle();
+          expect(title).to.be('Serial Diff of Count');
+        });
+
+        it('should change y-axis label to custom', async () => {
+          log.debug('set custom label of y-axis to "Custom"');
+          await PageObjects.visEditor.setCustomLabel('Custom', 1);
+          await PageObjects.visEditor.clickGo();
+          const title = await PageObjects.visChart.getYAxisTitle();
+          expect(title).to.be('Custom');
+        });
+
+        it('should have advanced accordion and json input', async () => {
+          await testSubjects.click('advancedParams-1');
+          await testSubjects.existOrFail('advancedParams-1 > codeEditorContainer');
+        });
+      });
+
+      describe('sibling pipeline', () => {
+        it('should apply with selected bucket', async () => {
+          log.debug('Metrics agg = Average Bucket');
+          await PageObjects.visEditor.selectAggregation('Average Bucket', 'metrics');
+          await PageObjects.visEditor.clickGo();
+          const title = await PageObjects.visChart.getYAxisTitle();
+          expect(title).to.be('Overall Average of Count');
+        });
+
+        it('should change sub metric custom label and calculate y-axis title', async () => {
+          log.debug('set custom label of sub metric to "Cats"');
+          await PageObjects.visEditor.setCustomLabel('Cats', '1-metric');
+          await PageObjects.visEditor.clickGo();
+          const title = await PageObjects.visChart.getYAxisTitle();
+          expect(title).to.be('Overall Average of Cats');
+        });
+
+        it('should outer custom label', async () => {
+          log.debug('set custom label to "Custom"');
+          await PageObjects.visEditor.setCustomLabel('Custom', 1);
+          await PageObjects.visEditor.clickGo();
+          const title = await PageObjects.visChart.getYAxisTitle();
+          expect(title).to.be('Custom');
+        });
+
+        it('should have advanced accordion and json input', async () => {
+          await testSubjects.click('advancedParams-1');
+          await testSubjects.existOrFail('advancedParams-1 > codeEditorContainer');
+        });
+      });
+    });
   });
 }