ui: fix browser compatibility check (#776)

- remove experimental API in checkBrowser.js - polyfill for Object.entries
pingcap · Oct 22, 2020 · 9ecbccf · 9ecbccf
1 parent 6476205
commit 9ecbccf
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 4 deletions.
diff --git a/ui/gulpfile.esm.js b/ui/gulpfile.esm.js
@@ -59,7 +59,7 @@ function updateBrowserList() {
 }
 
 task('gen:browserlist', () => {
-  return src('public/checkBrowser.js')
+  return src('public/compat.js')
     .pipe(updateBrowserList())
     .pipe(dest('public', { overwrite: true }))
 })
diff --git a/ui/public/checkBrowser.js → ui/public/compat.js b/ui/public/checkBrowser.js → ui/public/compat.js
@@ -40,8 +40,25 @@ function checkBrowser() {
     d.getElementsByTagName('a')[0].onclick = function () {
       d.getElementsByTagName('div')[0].style.top = '-60px'
     }
-    document.body.prepend(d)
+    document.body.insertBefore(d, document.body.firstChild)
   }
 }
 
 checkBrowser()
+
+// Dealing with compatibility issues manually for special cases
+
+// Object.entries
+// see https://github.com/pingcap-incubator/tidb-dashboard/issues/770
+// polyfill from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries
+if (!Object.entries) {
+  Object.entries = function( obj ){
+    var ownProps = Object.keys( obj ),
+      i = ownProps.length,
+      resArray = new Array(i); // preallocate the Array
+    while (i--)
+      resArray[i] = [ownProps[i], obj[ownProps[i]]];
+
+    return resArray;
+  };
+}
diff --git a/ui/public/diagnoseReport.html b/ui/public/diagnoseReport.html
@@ -10,7 +10,7 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <script src="%PUBLIC_URL%/checkBrowser.js"></script>
+    <script src="%PUBLIC_URL%/compat.js"></script>
     <div id="root"></div>
   </body>
 </html>
diff --git a/ui/public/index.html b/ui/public/index.html
@@ -91,7 +91,7 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <script src="%PUBLIC_URL%/checkBrowser.js"></script>
+    <script src="%PUBLIC_URL%/compat.js"></script>
     <div id="dashboard_page_spinner"><div class="dot-flashing"></div></div>
     <div id="root"></div>
   </body>