Revert "Merge pull request #1479 from mjudeikis/revert.portal"

This reverts commit 11fba06fd7, reversing
changes made to 4039d66ac8.

.gitignore

@@ -26,3 +26,4 @@ gomock_reflect_*
 /report.xml
 /deploy/config.yaml
 **/*.swp
+/portal/node_modules/

Makefile

@@ -78,6 +78,12 @@ publish-image-proxy: image-proxy
 proxy:
 	go build -ldflags "-X github.com/Azure/ARO-RP/pkg/util/version.GitCommit=$(COMMIT)" ./hack/proxy
 
+run-portal:
+	go run -ldflags "-X github.com/Azure/ARO-RP/pkg/util/version.GitCommit=$(COMMIT)" ./cmd/aro portal
+
+build-portal:
+	cd portal && npm install && npm run build
+
 pyenv:
 	virtualenv pyenv
 	. pyenv/bin/activate && \

docs/portal-ui.md

@@ -0,0 +1,13 @@
+# Portal UI
+
+## Developing
+
+You will require Node.js and `npm`. These instructions were tested with the versions from the Fedora 34 repos.
+
+1. Make your desired changes in `portal/src/` and commit them.
+
+1. Run `make build-portal` from the main directory. This will install the dependencies and kick off the Webpack build, placing the results in `portal/dist/`.
+
+1. Run `make generate`. This will regenerate the golang file containing the portal content to be served.
+
+1. Commit the results of `build-portal` and `generate`.

pkg/portal/generate.go

@@ -3,5 +3,5 @@ package portal
 // Copyright (c) Microsoft Corporation.
 // Licensed under the Apache License 2.0.
 
-//go:generate go run ../../vendor/github.com/go-bindata/go-bindata/go-bindata -nometadata -pkg $GOPACKAGE -prefix assets assets/...
+//go:generate go run ../../vendor/github.com/go-bindata/go-bindata/go-bindata -nometadata -pkg $GOPACKAGE -prefix ../../portal/dist/ ../../portal/dist/...
 //go:generate gofmt -s -l -w bindata.go

pkg/portal/security_test.go

@@ -117,15 +117,15 @@ func TestSecurity(t *testing.T) {
 			},
 		},
 		{
-			name: "/index.js",
+			name: "/main.js",
 			request: func() (*http.Request, error) {
-				return http.NewRequest(http.MethodGet, "https://server/index.js", nil)
+				return http.NewRequest(http.MethodGet, "https://server/main.js", nil)
 			},
-			wantAuditOperation: "GET /index.js",
+			wantAuditOperation: "GET /main.js",
 			wantAuditTargetResources: []audit.TargetResource{
 				{
 					TargetResourceType: "",
-					TargetResourceName: "/index.js",
+					TargetResourceName: "/main.js",
 				},
 			},
 		},
@@ -337,7 +337,7 @@ func TestSecurity(t *testing.T) {
 				//
 				// [1] https://github.com/Azure/ARO-RP/blob/master/pkg/portal/portal.go#L222-L247
 				// [2] https://go.googlesource.com/go/+/go1.16.2/src/net/http/fs.go#337
-				if tt.name == "/" || tt.name == "/index.js" {
+				if tt.name == "/" || tt.name == "/main.js" {
 					return
 				}
 

portal/dist/index.html

@@ -5,8 +5,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
-    <link rel="stylesheet" href="lib/bootstrap-4.5.2.min.css">
-    <link rel="stylesheet" href="lib/bootstrap-select-1.13.14.min.css">
+    <link rel="stylesheet" href="styles.css">
 
     <title>ARO SRE portal ({{ .location }})</title>
 </head>
@@ -86,11 +85,7 @@
 
     {{ .csrfField }}
 
-    <script src="lib/jquery-3.5.1.min.js"></script>
-    <script src="lib/popper-1.12.9.min.js"></script>
-    <script src="lib/bootstrap-4.5.2.min.js"></script>
-    <script src="lib/bootstrap-select-1.13.14.min.js"></script>
-    <script src="index.js"></script>
+    <script src="main.js"></script>
 </body>
 
 </html>

portal/dist/main.js.LICENSE.txt

@@ -0,0 +1,68 @@
+/*!
+  * Bootstrap dropdown.js v4.6.0 (https://getbootstrap.com/)
+  * Copyright 2011-2021 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
+  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+  */
+
+/*!
+  * Bootstrap util.js v4.6.0 (https://getbootstrap.com/)
+  * Copyright 2011-2021 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
+  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+  */
+
+/*!
+ * Bootstrap-select v1.13.18 (https://developer.snapappointments.com/bootstrap-select)
+ *
+ * Copyright 2012-2020 SnapAppointments, LLC
+ * Licensed under MIT (https://github.com/snapappointments/bootstrap-select/blob/master/LICENSE)
+ */
+
+/*!
+ * Sizzle CSS Selector Engine v2.3.6
+ * https://sizzlejs.com/
+ *
+ * Copyright JS Foundation and other contributors
+ * Released under the MIT license
+ * https://js.foundation/
+ *
+ * Date: 2021-02-16
+ */
+
+/*!
+ * jQuery JavaScript Library v3.6.0
+ * https://jquery.com/
+ *
+ * Includes Sizzle.js
+ * https://sizzlejs.com/
+ *
+ * Copyright OpenJS Foundation and other contributors
+ * Released under the MIT license
+ * https://jquery.org/license
+ *
+ * Date: 2021-03-02T17:08Z
+ */
+
+/**!
+ * @fileOverview Kickass library to create and place poppers near their reference elements.
+ * @version 1.16.1
+ * @license
+ * Copyright (c) 2016 Federico Zivolo and contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */

portal/package.json

@@ -0,0 +1,31 @@
+{
+    "name": "aro-rp",
+    "version": "1.0.0",
+    "description": "",
+    "private": true,
+    "scripts": {
+        "build": "webpack --config webpack.prod.js"
+    },
+    "keywords": [],
+    "author": "Microsoft",
+    "license": "Apache2",
+    "dependencies": {
+        "bootstrap": "^4.5.2",
+        "bootstrap-select": "^1.13.14",
+        "jquery": "^3.5.0",
+        "popper.js": "^1.12.9"
+    },
+    "devDependencies": {
+        "copy-webpack-plugin": "^8.1.1",
+        "css-loader": "^5.2.4",
+        "css-minimizer-webpack-plugin": "^2.0.0",
+        "exports-loader": "^2.0.0",
+        "html-webpack-plugin": "^5.3.1",
+        "mini-css-extract-plugin": "^1.5.1",
+        "style-loader": "^2.0.0",
+        "webpack": "^5.36.1",
+        "webpack-cli": "^4.6.0",
+        "webpack-dev-server": "^3.11.2",
+        "webpack-merge": "^5.7.3"
+    }
+}

portal/src/index.html

@@ -0,0 +1,91 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <link rel="stylesheet" href="styles.css">
+
+    <title>ARO SRE portal ({{ .location }})</title>
+</head>
+
+<body>
+    <div class="navbar navbar-light bg-light shadow-sm">
+        <div class="navbar-brand">
+            <strong>ARO SRE portal ({{ .location }})</strong>
+        </div>
+
+        <button class="btn btn-secondary" id="btnLogout">Logout</button>
+    </div>
+
+    <div class="container py-4">
+        <div class="form-group">
+            <label for="selResourceId">Cluster:</label>
+            <div class="col-sm-10">
+                <select data-live-search="true" class="form-control form-control-sm" id="selResourceId">
+                </select>
+            </div>
+        </div>
+
+        <div class="form-group">
+            <label for="selMaster">Master:</label>
+            <div class="col-sm-10">
+                <select class="form-control form-control-sm" id="selMaster">
+                    <option value="0">master-0</option>
+                    <option value="1">master-1</option>
+                    <option value="2">master-2</option>
+                </select>
+            </div>
+        </div>
+
+        <button class="btn btn-secondary" id="btnPrometheus">Prometheus</button>
+
+        <button class="btn btn-secondary" id="btnKubeconfig">Kubeconfig</button>
+
+        <button class="btn btn-secondary" id="btnSSH">SSH</button>
+
+        <div class="py-4" id="divAlerts"></div>
+    </div>
+
+    <template id="tmplSSHAlert">
+        <div class="alert alert-primary alert-dismissible fade show" role="alert">
+            <div>
+                <button class="btn btn-secondary copy-button">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18px" height="18px">
+                        <path d="M0 0h24v24H0z" fill="none"/>
+                        <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
+                    </svg>
+                </button>
+                <span data-copy="command">Command: <code></code></span>
+            </div>
+            <div class="py-2">
+                <button class="btn btn-secondary copy-button">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18px" height="18px">
+                        <path d="M0 0h24v24H0z" fill="none"/>
+                        <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
+                    </svg>
+                </button>
+                <span data-copy="password">Password: <code></code></span>
+            </div>
+            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+            </button>
+        </div>
+    </template>
+
+    <template id="tmplSSHAlertError">
+        <div class="alert alert-danger alert-dismissible fade show" role="alert">
+            <span data-copy="error"></span>
+            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+            </button>
+        </div>
+    </template>
+
+    {{ .csrfField }}
+
+    <script src="main.js"></script>
+</body>
+
+</html>

portal/src/index.js

@@ -1,4 +1,12 @@
-$.extend({
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap-select/dist/css/bootstrap-select.min.css';
+
+import 'bootstrap/js/dist/util';
+import 'bootstrap/js/dist/dropdown';
+
+import 'bootstrap-select'
+
+jQuery.extend({
     redirect: function (location, args) {
         var form = $("<form method='POST' style='display: none;'></form>");
         form.attr("action", location);
@@ -17,7 +25,7 @@ $.extend({
     }
 });
 
-$(document).ready(function () {
+jQuery(function () {
     $.ajax({
         url: "/api/clusters",
         success: function (clusters) {

portal/webpack.common.js

@@ -0,0 +1,61 @@
+const webpack = require('webpack');
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const CopyPlugin = require("copy-webpack-plugin");
+
+
+module.exports = {
+    entry: './src/index.js',
+    output: {
+        filename: '[name].js',
+        path: path.resolve(__dirname, 'dist'),
+        clean: true,
+    },
+    plugins: [
+        new MiniCssExtractPlugin(),
+        new webpack.ProvidePlugin({
+            $: 'jquery',
+            jQuery: 'jquery',
+        }),
+        new CopyPlugin({
+            patterns: [
+              { from: "src/index.html", to: "index.html" },
+            ],
+          }),
+    ],
+    module: {
+        rules: [
+            {
+                test: /\.s?css$/i,
+                use: [MiniCssExtractPlugin.loader, 'css-loader'],
+            },
+        ],
+    },
+    optimization: {
+        minimizer: [
+            `...`,
+            new CssMinimizerPlugin(),
+        ],
+        splitChunks: {
+            cacheGroups: {
+                styles: {
+                    name: 'styles',
+                    type: 'css/mini-extract',
+                    chunks: 'all',
+                    enforce: true,
+                },
+                defaultVendors: {
+                    test: /[\\/]node_modules[\\/]/,
+                    priority: -10,
+                    reuseExistingChunk: true,
+                },
+                default: {
+                    minChunks: 2,
+                    priority: -20,
+                    reuseExistingChunk: true,
+                }
+            },
+        },
+    },
+};

portal/webpack.dev.js

@@ -0,0 +1,8 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+const fs = require('fs');
+
+module.exports = merge(common, {
+    mode: 'development',
+    devtool: 'source-map',
+});

portal/webpack.prod.js

@@ -0,0 +1,6 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+    mode: 'production',
+});