React: Add why-did-you-render dev extension to better see what components…

React: Add why-did-you-render dev extension to better see what components re-render and why (in console) (#23455)

* React: Add why-did-you-render dev extension to better understand what components re-renders

* Lock version

* Updated yarn locj

package.json

@@ -211,6 +211,7 @@
     "@types/md5": "^2.1.33",
     "@types/md5": "^2.1.33",
     "@types/react-loadable": "5.5.2",
     "@types/react-loadable": "5.5.2",
     "@types/react-virtualized-auto-sizer": "1.0.0",
     "@types/react-virtualized-auto-sizer": "1.0.0",
+    "@welldone-software/why-did-you-render": "4.0.6",
     "abortcontroller-polyfill": "1.4.0",
     "abortcontroller-polyfill": "1.4.0",
     "angular": "1.6.9",
     "angular": "1.6.9",
     "angular-bindonce": "0.3.1",
     "angular-bindonce": "0.3.1",

public/app/app.ts

@@ -43,11 +43,11 @@ import { registerEchoBackend, setEchoSrv } from '@grafana/runtime';
 import { Echo } from './core/services/echo/Echo';
 import { Echo } from './core/services/echo/Echo';
 import { reportPerformance } from './core/services/echo/EchoSrv';
 import { reportPerformance } from './core/services/echo/EchoSrv';
 import { PerformanceBackend } from './core/services/echo/backends/PerformanceBackend';
 import { PerformanceBackend } from './core/services/echo/backends/PerformanceBackend';
-
 import 'app/routes/GrafanaCtrl';
 import 'app/routes/GrafanaCtrl';
 import 'app/features/all';
 import 'app/features/all';
 import { getStandardFieldConfigs, getStandardOptionEditors } from '@grafana/ui';
 import { getStandardFieldConfigs, getStandardOptionEditors } from '@grafana/ui';
 import { getDefaultVariableAdapters, variableAdapters } from './features/variables/adapters';
 import { getDefaultVariableAdapters, variableAdapters } from './features/variables/adapters';
+import { initDevFeatures } from './dev';
 
 
 // add move to lodash for backward compatabiltiy
 // add move to lodash for backward compatabiltiy
 // @ts-ignore
 // @ts-ignore
@@ -62,6 +62,10 @@ extensionsIndex.keys().forEach((key: any) => {
   extensionsIndex(key);
   extensionsIndex(key);
 });
 });
 
 
+if (process.env.NODE_ENV === 'development') {
+  initDevFeatures();
+}
+
 export class GrafanaApp {
 export class GrafanaApp {
   registerFunctions: any;
   registerFunctions: any;
   ngModuleDependencies: any[];
   ngModuleDependencies: any[];

public/app/dev.ts

-import app from './app';
+import React from 'react';
 
 
-/*
-Import theme CSS based on env vars, e.g.: `env GRAFANA_THEME=light yarn start`
-*/
-declare var GRAFANA_THEME: any;
-require('../sass/grafana.' + GRAFANA_THEME + '.scss');
-
-app.init();
+export function initDevFeatures() {
+  // if why-render is in url enable why did you render react extension
+  if (window.location.search.indexOf('why-render') !== -1) {
+    const whyDidYouRender = require('@welldone-software/why-did-you-render');
+    whyDidYouRender(React, {
+      trackAllPureComponents: true,
+    });
+  }
+}