From: Tiago Melo <tmelo@suse.com>
Date: Wed, 30 Sep 2020 14:34:27 +0000 (+0000)
Subject: mgr/dashboard: Enable Angular's debug tools when using dev mode
X-Git-Tag: v16.1.0~947^2
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=refs%2Fpull%2F37499%2Fhead;p=ceph.git

mgr/dashboard: Enable Angular's debug tools when using dev mode

Enabling this will allows us to run `ng.profiler.timeChangeDetection();`
in the browser.

Fixes: https://tracker.ceph.com/issues/47699

Signed-off-by: Tiago Melo <tmelo@suse.com>
---

diff --git a/src/pybind/mgr/dashboard/frontend/src/main.ts b/src/pybind/mgr/dashboard/frontend/src/main.ts
index 741c9eb862fe..f399daf9b637 100644
--- a/src/pybind/mgr/dashboard/frontend/src/main.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/main.ts
@@ -1,4 +1,5 @@
-import { enableProdMode } from '@angular/core';
+import { ApplicationRef, enableProdMode, isDevMode } from '@angular/core';
+import { enableDebugTools } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app/app.module';
@@ -10,4 +11,13 @@ if (environment.production) {
 
 platformBrowserDynamic()
   .bootstrapModule(AppModule)
+  .then((moduleRef) => {
+    if (isDevMode()) {
+      // source: https://medium.com/@dmitrymogilko/profiling-angular-change-detection-c00605862b9f
+      const applicationRef = moduleRef.injector.get(ApplicationRef);
+      const componentRef = applicationRef.components[0];
+      // allows to run `ng.profiler.timeChangeDetection();`
+      enableDebugTools(componentRef);
+    }
+  })
   .catch((err) => console.log(err));