Graphite: Fixed issue with query editor and next select metric now showing after…

Graphite: Fixed issue with query editor and next select metric now showing after selecting metric node  (#22856)

* Graphite: Fixed digest issue in graphite query editor

* Fixed unit test

* Updated

(cherry picked from commit aa4ed76a)

public/app/plugins/datasource/graphite/query_ctrl.ts

@@ -5,6 +5,7 @@ import _ from 'lodash';
 import GraphiteQuery from './graphite_query';
 import GraphiteQuery from './graphite_query';
 import { QueryCtrl } from 'app/plugins/sdk';
 import { QueryCtrl } from 'app/plugins/sdk';
 import appEvents from 'app/core/app_events';
 import appEvents from 'app/core/app_events';
+import { promiseToDigest } from 'app/core/utils/promiseToDigest';
 import { auto } from 'angular';
 import { auto } from 'angular';
 import { TemplateSrv } from 'app/features/templating/template_srv';
 import { TemplateSrv } from 'app/features/templating/template_srv';
 import { AppEvents } from '@grafana/data';
 import { AppEvents } from '@grafana/data';
@@ -59,7 +60,8 @@ export class GraphiteQueryCtrl extends QueryCtrl {
     });
     });
 
 
     const checkOtherSegmentsIndex = this.queryModel.checkOtherSegmentsIndex || 0;
     const checkOtherSegmentsIndex = this.queryModel.checkOtherSegmentsIndex || 0;
-    this.checkOtherSegments(checkOtherSegmentsIndex, modifyLastSegment);
+
+    promiseToDigest(this.$scope)(this.checkOtherSegments(checkOtherSegmentsIndex, modifyLastSegment));
 
 
     if (this.queryModel.seriesByTagUsed) {
     if (this.queryModel.seriesByTagUsed) {
       this.fixTagSegments();
       this.fixTagSegments();
@@ -207,20 +209,24 @@ export class GraphiteQueryCtrl extends QueryCtrl {
       const tag = removeTagPrefix(segment.value);
       const tag = removeTagPrefix(segment.value);
       this.pause();
       this.pause();
       this.addSeriesByTagFunc(tag);
       this.addSeriesByTagFunc(tag);
-      return;
+      return null;
     }
     }
 
 
     if (segment.expandable) {
     if (segment.expandable) {
-      return this.checkOtherSegments(segmentIndex + 1).then(() => {
-        this.setSegmentFocus(segmentIndex + 1);
-        this.targetChanged();
-      });
+      return promiseToDigest(this.$scope)(
+        this.checkOtherSegments(segmentIndex + 1).then(() => {
+          this.setSegmentFocus(segmentIndex + 1);
+          this.targetChanged();
+        })
+      );
     } else {
     } else {
       this.spliceSegments(segmentIndex + 1);
       this.spliceSegments(segmentIndex + 1);
     }
     }
 
 
     this.setSegmentFocus(segmentIndex + 1);
     this.setSegmentFocus(segmentIndex + 1);
     this.targetChanged();
     this.targetChanged();
+
+    return null;
   }
   }
 
 
   spliceSegments(index: any) {
   spliceSegments(index: any) {

public/app/plugins/datasource/graphite/specs/query_ctrl.test.ts

@@ -3,6 +3,12 @@ import gfunc from '../gfunc';
 import { GraphiteQueryCtrl } from '../query_ctrl';
 import { GraphiteQueryCtrl } from '../query_ctrl';
 import { TemplateSrvStub } from 'test/specs/helpers';
 import { TemplateSrvStub } from 'test/specs/helpers';
 
 
+jest.mock('app/core/utils/promiseToDigest', () => ({
+  promiseToDigest: (scope: any) => {
+    return (p: Promise<any>) => p;
+  },
+}));
+
 describe('GraphiteQueryCtrl', () => {
 describe('GraphiteQueryCtrl', () => {
   const ctx = {
   const ctx = {
     datasource: {
     datasource: {