feat: remove go-bindata-assetfs in favor of embed by upgrading to go1.16 (#11733)

browser/.gitignore

@@ -17,4 +17,3 @@ release
 *.syso
 coverage.txt
 node_modules
-production

browser/README.md

@@ -17,24 +17,13 @@ nvm install stable
 npm install
 ```
 
-### Install `go-bindata` and `go-bindata-assetfs`
-
-If you do not have a working Golang environment, please follow [Install Golang](https://golang.org/doc/install)
-
-```sh
-go get github.com/go-bindata/go-bindata/go-bindata
-go get github.com/elazarl/go-bindata-assetfs/go-bindata-assetfs
-```
-
 ## Generating Assets
 
-### Generate ui-assets.go
-
 ```sh
 npm run release
 ```
 
-This generates ui-assets.go in the current directory. Now do `make` in the parent directory to build the minio binary with the newly generated ``ui-assets.go``
+This generates `production` in the current directory. 
 
 
 ## Run MinIO Browser with live reload

browser/assets.go

@@ -0,0 +1,11 @@
+package browser
+
+import "embed"
+
+//go:embed production/*
+var fs embed.FS
+
+// GetStaticAssets returns assets
+func GetStaticAssets() embed.FS {
+	return fs
+}

browser/build.js

@@ -14,19 +14,11 @@
  * limitations under the License.
  */
 
-var moment = require('moment')
 var async = require('async')
 var exec = require('child_process').exec
 var fs = require('fs')
 
 var isProduction = process.env.NODE_ENV == 'production' ? true : false
-var assetsFileName = ''
-var commitId = ''
-var date = moment.utc()
-var version = date.format('YYYY-MM-DDTHH:mm:ss') + 'Z'
-var releaseTag = date.format('YYYY-MM-DDTHH-mm-ss') + 'Z'
-var buildType = 'DEVELOPMENT'
-if (process.env.MINIO_UI_BUILD) buildType = process.env.MINIO_UI_BUILD
 
 rmDir = function(dirPath) {
   try { var files = fs.readdirSync(dirPath); }
@@ -53,74 +45,6 @@ async.waterfall([
       console.log('Running', cmd)
       exec(cmd, cb)
     },
-    function(stdout, stderr, cb) {
-      if (isProduction) {
-        fs.renameSync('production/index_bundle.js',
-                      'production/index_bundle-' + releaseTag + '.js')
-      } else {
-        fs.renameSync('dev/index_bundle.js',
-                      'dev/index_bundle-' + releaseTag + '.js')
-      }
-      var cmd = 'git log --format="%H" -n1'
-      console.log('Running', cmd)
-      exec(cmd, cb)
-    },
-    function(stdout, stderr, cb) {
-      if (!stdout) throw new Error('commitId is empty')
-      commitId = stdout.replace('\n', '')
-      if (commitId.length !== 40) throw new Error('commitId invalid : ' + commitId)
-      assetsFileName = 'ui-assets.go';
-      var cmd = 'go-bindata-assetfs -o bindata_assetfs.go -pkg browser -nocompress=true production/...'
-      if (!isProduction) {
-        cmd = 'go-bindata-assetfs -o bindata_assetfs.go -pkg browser -nocompress=true dev/...'
-      }
-      console.log('Running', cmd)
-      exec(cmd, cb)
-    },
-    function(stdout, stderr, cb) {
-      var cmd = 'gofmt -s -w -l bindata_assetfs.go'
-      console.log('Running', cmd)
-      exec(cmd, cb)
-    },
-    function(stdout, stderr, cb) {
-      fs.renameSync('bindata_assetfs.go', assetsFileName)
-      fs.appendFileSync(assetsFileName, '\n')
-      fs.appendFileSync(assetsFileName, 'var UIReleaseTag = "' + buildType + '.' +
-                        releaseTag + '"\n')
-      fs.appendFileSync(assetsFileName, 'var UICommitID = "' + commitId + '"\n')
-      fs.appendFileSync(assetsFileName, 'var UIVersion = "' + version + '"')
-      fs.appendFileSync(assetsFileName, '\n')
-      var contents;
-      if (isProduction) {
-        contents = fs.readFileSync(assetsFileName, 'utf8')
-                     .replace(/_productionIndexHtml/g, '_productionIndexHTML')
-                     .replace(/productionIndexHtmlBytes/g, 'productionIndexHTMLBytes')
-                     .replace(/productionIndexHtml/g, 'productionIndexHTML')
-                     .replace(/_productionIndex_bundleJs/g, '_productionIndexBundleJs')
-                     .replace(/productionIndex_bundleJsBytes/g, 'productionIndexBundleJsBytes')
-                     .replace(/productionIndex_bundleJs/g, 'productionIndexBundleJs')
-                     .replace(/_productionJqueryUiMinJs/g, '_productionJqueryUIMinJs')
-                     .replace(/productionJqueryUiMinJsBytes/g, 'productionJqueryUIMinJsBytes')
-                     .replace(/productionJqueryUiMinJs/g, 'productionJqueryUIMinJs');
-      } else {
-        contents = fs.readFileSync(assetsFileName, 'utf8')
-                     .replace(/_devIndexHtml/g, '_devIndexHTML')
-                     .replace(/devIndexHtmlBytes/g, 'devIndexHTMLBytes')
-                     .replace(/devIndexHtml/g, 'devIndexHTML')
-                     .replace(/_devIndex_bundleJs/g, '_devIndexBundleJs')
-                     .replace(/devIndex_bundleJsBytes/g, 'devIndexBundleJsBytes')
-                     .replace(/devIndex_bundleJs/g, 'devIndexBundleJs')
-                     .replace(/_devJqueryUiMinJs/g, '_devJqueryUIMinJs')
-                     .replace(/devJqueryUiMinJsBytes/g, 'devJqueryUIMinJsBytes')
-                     .replace(/devJqueryUiMinJs/g, 'devJqueryUIMinJs');
-      }
-      contents = contents.replace(/MINIO_UI_VERSION/g, version)
-      contents = contents.replace(/index_bundle.js/g, 'index_bundle-' + releaseTag + '.js')
-
-      fs.writeFileSync(assetsFileName, contents, 'utf8')
-      console.log('UI assets file :', assetsFileName)
-      cb()
-    }
   ], function(err) {
     if (err) return console.log(err)
   })

browser/production/index.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>MinIO Browser</title>
+
+        <link rel="icon" type="image/png" sizes="32x32" href="/minio/favicon-32x32.png">
+        <link rel="icon" type="image/png" sizes="96x96" href="/minio/favicon-96x96.png">
+        <link rel="icon" type="image/png" sizes="16x16" href="/minio/favicon-16x16.png">
+
+        <link rel="stylesheet" href="/minio/loader.css" type="text/css">
+    </head>
+
+    <body>
+        <div class="page-load">
+            <div class="pl-inner">
+                <img src="/minio/logo.svg" alt="">
+            </div>
+        </div>
+        <div id="root"></div>
+
+        <!--[if lt IE 11]>
+            <div class="ie-warning">
+                <div class="iw-inner">
+                    <i class="iwi-icon fas fa-exclamation-triangle"></i>
+
+                    You are using Internet Explorer version 12.0 or lower. Due to security issues and lack of support for Web Standards it is highly recommended that you upgrade to a modern browser
+
+                    <ul>
+                        <li>
+                            <a href="http://www.google.com/chrome/">
+                                <img src="chrome.png" alt="">
+                                <div>Chrome</div>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="https://www.mozilla.org/en-US/firefox/new/">
+                                <img src="firefox.png" alt="">
+                                <div>Firefox</div>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="https://www.apple.com/safari/">
+                                <img src="safari.png" alt="">
+                                <div>Safari</div>
+                            </a>
+                        </li>
+                    </ul>
+
+                    <div class="iwi-skip">Skip & Continue</div>
+                </div>
+            </div>
+        <![endif]-->
+
+        <script>currentUiVersion = 'MINIO_UI_VERSION'</script>
+        <script src="/minio/index_bundle.js"></script>
+    </body>
+</html>

browser/production/loader.css

@@ -0,0 +1,98 @@
+.page-load {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: #002a37;
+    z-index: 100;
+    transition: opacity 200ms;
+    -webkit-transition: opacity 200ms;
+}
+
+.pl-0{
+    opacity: 0;
+}
+
+.pl-1 {
+    display: none;
+}
+
+.pl-inner {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    left: 50%;
+    margin-left: -50px;
+    top: 50%;
+    margin-top: -50px;
+    text-align: center;
+    -webkit-animation: fade-in 500ms;
+    animation: fade-in 500ms;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+    animation-delay: 350ms;
+    -webkit-animation-delay: 350ms;
+    -webkit-backface-visibility: visible;
+    backface-visibility: visible;
+}
+
+.pl-inner:before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    display: block;
+    -webkit-animation: spin 1000ms infinite linear;
+    animation: spin 1000ms infinite linear;
+    border: 1px solid rgba(255, 255, 255, 0.2);;
+    border-left-color: #fff;
+    border-radius: 50%;
+}
+
+.pl-inner > img {
+    width: 30px;
+    margin-top: 21px;
+}
+
+@-webkit-keyframes fade-in {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes fade-in {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@-webkit-keyframes spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}

browser/production/logo.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="93px" height="187px" viewBox="0 0 93 187" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
+    <title>logo</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="logo" transform="translate(0.187500, -0.683594)" fill="#FFFFFF" fill-rule="nonzero">
+            <path d="M91.49,46.551 C86.7827023,38.7699609 82.062696,30.9966172 77.33,23.231 C74.87,19.231 72.33,15.231 69.88,11.231 C69.57,10.731 69.18,10.291 68.88,9.831 C64.35,2.931 55.44,-1.679 46.73,2.701 C42.9729806,4.51194908 40.0995718,7.75449451 38.7536428,11.7020516 C37.4077139,15.6496086 37.701799,19.9721186 39.57,23.701 C41.08,26.641 43.57,29.121 45.91,31.581 C53.03,39.141 60.38,46.491 67.45,54.111 C72.4175495,59.4492221 74.4526451,66.8835066 72.8965704,74.0075359 C71.3404956,81.1315653 66.390952,87.0402215 59.65,89.821 C59.4938176,89.83842 59.3361824,89.83842 59.18,89.821 L59.18,54.591 C46.6388051,61.0478363 35.3944735,69.759905 26.01,80.291 C11.32,96.671 2.64,117.141 0.01,132.071 L23.96,119.821 C31.96,115.771 39.86,111.821 48.14,107.581 L48.14,175.921 L59.14,187.131 L59.14,101.831 C59.14,101.831 59.39,101.711 60.22,101.261 C63.5480598,99.6738911 66.7772674,97.8873078 69.89,95.911 C77.7130888,90.4306687 82.7479457,81.8029342 83.6709542,72.295947 C84.5939627,62.7889599 81.3127806,53.3538429 74.69,46.471 C66.49,37.891 58.24,29.351 50.05,20.761 C47.67,18.261 47.72,15.101 50.05,12.881 C52.38,10.661 55.56,10.881 57.96,13.331 L61.38,16.781 C64.1,19.681 66.79,22.611 69.53,25.481 C76.4547149,32.7389629 83.3947303,39.9823123 90.35,47.211 C90.7,47.571 91.12,47.871 91.5,48.211 L91.93,47.951 C91.8351945,47.4695902 91.6876376,47.0000911 91.49,46.551 Z M48.11,94.931 C47.9883217,95.5022568 47.6230065,95.9917791 47.11,96.271 C42.72,98.601 38.29,100.871 33.87,103.141 L17.76,111.401 C24.771203,96.7435071 35.1132853,83.9289138 47.96,73.981 C48.08,74.221 48.16,74.301 48.16,74.381 C48.15,81.231 48.17,88.081 48.11,94.931 Z" id="Shape"></path>
+        </g>
+    </g>
+</svg>