Chore: Fixes PhantomJs by adding polyfills for fetch and AbortController (#21655)

* Chore: Fixes PhantomJs rendering

* Docs: Updated docs

* Update contribute/style-guides/e2e.md

Co-Authored-By: Dominik Prokop <dominik.prokop@grafana.com>

* Docs: Updates docs according to PR comments

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

contribute/style-guides/e2e.md

@@ -150,6 +150,14 @@ describe('List test', () => {
 
 ## Debugging PhantomJS image rendering
 
+### Common Error
+The most common error with PhantomJs image rendering is when a PR introduces an import that has functionality that's not supported by PhantomJs. To quickly identify which new import causes this you can use a tool like `es-check`.
+   
+1. Run > `npx es-check es5 './public/build/*.js'`
+2. Check the output for files that break es5 compatibility.
+3. Lazy load the failing imports if possible. 
+
+### Debugging
 There is no easy or comprehensive way to debug PhantomJS smoke test (image rendering) failures. However, PhantomJS exposes remote debugging interface which can give you a sense of what is going wrong in the smoke test. Before performing the steps described below make sure your local Grafana instance is running:
 
 1. Go to `tools/phantomjs` directory

package.json

@@ -208,6 +208,7 @@
     "@types/md5": "^2.1.33",
     "@types/react-loadable": "5.5.2",
     "@types/react-virtualized-auto-sizer": "1.0.0",
+    "abortcontroller-polyfill": "1.4.0",
     "angular": "1.6.9",
     "angular-bindonce": "0.3.1",
     "angular-native-dragdrop": "1.2.2",
@@ -267,6 +268,7 @@
     "tether-drop": "https://github.com/torkelo/drop/tarball/master",
     "tinycolor2": "1.4.1",
     "tti-polyfill": "0.2.2",
+    "whatwg-fetch": "3.0.0",
     "xss": "1.0.3"
   },
   "resolutions": {

public/app/app.ts

 import '@babel/polyfill';
+import 'whatwg-fetch'; // fetch polyfill needed for PhantomJs rendering
+import 'abortcontroller-polyfill/dist/polyfill-patch-fetch'; // fetch polyfill needed for PhantomJs rendering
 import 'file-saver';
 import 'lodash';
 import 'jquery';
@@ -20,23 +22,15 @@ import config from 'app/core/config';
 import ttiPolyfill from 'tti-polyfill';
 // @ts-ignore ignoring this for now, otherwise we would have to extend _ interface with move
 import _ from 'lodash';
-import { AppEvents, setMarkdownOptions, setLocale } from '@grafana/data';
+import { AppEvents, setLocale, setMarkdownOptions } from '@grafana/data';
 import appEvents from 'app/core/app_events';
 import { addClassIfNoOverlayScrollbar } from 'app/core/utils/scrollbar';
 import { checkBrowserCompatibility } from 'app/core/utils/browser';
 import { importPluginModule } from 'app/features/plugins/plugin_loader';
-
-// add move to lodash for backward compatabiltiy
-// @ts-ignore
-_.move = (array: [], fromIndex: number, toIndex: number) => {
-  array.splice(toIndex, 0, array.splice(fromIndex, 1)[0]);
-  return array;
-};
-
-import { coreModule, angularModules } from 'app/core/core_module';
+import { angularModules, coreModule } from 'app/core/core_module';
 import { registerAngularDirectives } from 'app/core/core';
 import { setupAngularRoutes } from 'app/routes/routes';
-import { setEchoSrv, registerEchoBackend } from '@grafana/runtime';
+import { registerEchoBackend, setEchoSrv } from '@grafana/runtime';
 import { Echo } from './core/services/echo/Echo';
 import { reportPerformance } from './core/services/echo/EchoSrv';
 import { PerformanceBackend } from './core/services/echo/backends/PerformanceBackend';
@@ -44,6 +38,13 @@ import { PerformanceBackend } from './core/services/echo/backends/PerformanceBac
 import 'app/routes/GrafanaCtrl';
 import 'app/features/all';
 
+// add move to lodash for backward compatabiltiy
+// @ts-ignore
+_.move = (array: [], fromIndex: number, toIndex: number) => {
+  array.splice(toIndex, 0, array.splice(fromIndex, 1)[0]);
+  return array;
+};
+
 // import symlinked extensions
 const extensionsIndex = (require as any).context('.', true, /extensions\/index.ts/);
 extensionsIndex.keys().forEach((key: any) => {

yarn.lock

@@ -4841,6 +4841,11 @@ abbrev@1, abbrev@~1.1.1:
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
   integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
 
+abortcontroller-polyfill@1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/abortcontroller-polyfill/-/abortcontroller-polyfill-1.4.0.tgz#0d5eb58e522a461774af8086414f68e1dda7a6c4"
+  integrity sha512-3ZFfCRfDzx3GFjO6RAkYx81lPGpUS20ISxux9gLxuKnqafNcFQo59+IoZqpO2WvQlyc287B62HDnDdNYRmlvWA==
+
 accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7:
   version "1.3.7"
   resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd"
@@ -22227,7 +22232,7 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3:
   dependencies:
     iconv-lite "0.4.24"
 
-whatwg-fetch@>=0.10.0:
+whatwg-fetch@3.0.0, whatwg-fetch@>=0.10.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"
   integrity sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==