Integrate GUI into API Server.

Alluxio · Jan 3, 2024 · 1b2952b · 1b2952b
1 parent 7c22dca
commit 1b2952b
Show file tree

Hide file tree

Showing 34 changed files with 353 additions and 24 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/Documentation/devhandbook.md b/Documentation/devhandbook.md
@@ -35,15 +35,15 @@ Build dokcer image by running `docker build -t <docker username>/alluxio-operato
 
 * Example:
   ```shell
-  docker buildx build --platform linux/amd64 -t kshou433/alluxio-operator:withAPIServer_v5.1 -f dev/build/Dockerfile .
+  docker buildx build --platform linux/amd64 -t kshou433/alluxio-operator:withAPIServer_v6.0 -f dev/build/Dockerfile .
   ```
 
 ### Step 3
 Push image to docker hub : `docker push <docker username>/alluxio-operator:<tag>`.
 
 * Example:
   ```shell
-  docker push kshou433/alluxio-operator:withAPIServer_v5.1
+  docker push kshou433/alluxio-operator:withAPIServer_v6.0
   ```
 
 ### Step 4
@@ -67,4 +67,8 @@ Update image url and tage in ```operator-config.yaml```
 ### Access API Server Port
 `kubectl port-forward -n alluxio-operator <api-server-controller Pod Name> 5220:5220`
 
-Then use `curl` to do REST API Request.
+Then use `curl` to do REST API Request.
+
+
+# User Interface
+### Copy files under `build` folder in React to `gui` folder under `api_server'
diff --git a/cmd/api_server/.DS_Store b/cmd/api_server/.DS_Store
diff --git a/cmd/api_server/api_server/.DS_Store b/cmd/api_server/api_server/.DS_Store
diff --git a/cmd/api_server/api_server/endpoints/alluxio_cluster.go b/cmd/api_server/api_server/endpoints/alluxio_cluster.go
@@ -60,7 +60,6 @@ func (alluxioClusterEndpoint *AlluxioClusterEndpoint) show(request *restful.Requ
 			})
 		}
 	}
-	logger.Infof("Get Alluxio Clusters Successfully")
 }
 
 func (alluxioClusterEndpoint *AlluxioClusterEndpoint) create(request *restful.Request, response *restful.Response) {
@@ -132,7 +131,7 @@ func (alluxioClusterEndpoint *AlluxioClusterEndpoint) delete(request *restful.Re
 			Details: fmt.Sprintf("Could not Delete dataset: %s", err),
 		})
 	}
-	logger.Infof("DELETE Dataset: %s Successfully", alluxioClusterObj.ObjectMeta.Name)
+	logger.Infof("DELETE Alluxio Cluster: %s Successfully", alluxioClusterObj.ObjectMeta.Name)
 }
 
 func (alluxioClusterEndpoint *AlluxioClusterEndpoint) update(request *restful.Request, response *restful.Response) {

diff --git a/cmd/api_server/api_server/gui/asset-manifest.json b/cmd/api_server/api_server/gui/asset-manifest.json
@@ -0,0 +1,13 @@
+{
+  "files": {
+    "main.css": "/static/css/main.15468a32.css",
+    "main.js": "/static/js/main.0e4f4206.js",
+    "index.html": "/index.html",
+    "main.15468a32.css.map": "/static/css/main.15468a32.css.map",
+    "main.0e4f4206.js.map": "/static/js/main.0e4f4206.js.map"
+  },
+  "entrypoints": [
+    "static/css/main.15468a32.css",
+    "static/js/main.0e4f4206.js"
+  ]
+}
diff --git a/cmd/api_server/api_server/gui/favicon.ico b/cmd/api_server/api_server/gui/favicon.ico
diff --git a/cmd/api_server/api_server/gui/index.html b/cmd/api_server/api_server/gui/index.html
@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><script defer="defer" src="/static/js/main.0e4f4206.js"></script><link href="/static/css/main.15468a32.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/cmd/api_server/api_server/gui/logo192.png b/cmd/api_server/api_server/gui/logo192.png
diff --git a/cmd/api_server/api_server/gui/logo512.png b/cmd/api_server/api_server/gui/logo512.png
diff --git a/cmd/api_server/api_server/gui/manifest.json b/cmd/api_server/api_server/gui/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/cmd/api_server/api_server/gui/robots.txt b/cmd/api_server/api_server/gui/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/cmd/api_server/api_server/gui/static/css/main.15468a32.css b/cmd/api_server/api_server/gui/static/css/main.15468a32.css
diff --git a/cmd/api_server/api_server/gui/static/css/main.15468a32.css.map b/cmd/api_server/api_server/gui/static/css/main.15468a32.css.map
diff --git a/cmd/api_server/api_server/gui/static/js/main.0e4f4206.js b/cmd/api_server/api_server/gui/static/js/main.0e4f4206.js
diff --git a/cmd/api_server/api_server/gui/static/js/main.0e4f4206.js.LICENSE.txt b/cmd/api_server/api_server/gui/static/js/main.0e4f4206.js.LICENSE.txt
@@ -0,0 +1,48 @@
+/**
+ * @license React
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
diff --git a/cmd/api_server/api_server/gui/static/js/main.0e4f4206.js.map b/cmd/api_server/api_server/gui/static/js/main.0e4f4206.js.map
diff --git a/cmd/api_server/api_server/server.go b/cmd/api_server/api_server/server.go
@@ -2,9 +2,12 @@ package api_server
 
 import (
 	"bytes"
+	"embed"
 	"fmt"
 	"github.com/Alluxio/k8s-operator/cmd/api_server/api_server/endpoints"
 	"github.com/emicklei/go-restful"
+	"io/fs"
+	"log"
 	"net/http"
 	"sigs.k8s.io/controller-runtime/pkg/client"
 	kubelog "sigs.k8s.io/controller-runtime/pkg/log"
@@ -34,8 +37,19 @@ func init() {
 	}
 }
 
+//go:embed gui
+var embeddedFiles embed.FS
+
 func newApiServer(port int, allowedDomains []string, client client.Client) (*apiServer, error) {
 	container := restful.NewContainer()
+	// Add Web UI
+	guiFS, err := fs.Sub(embeddedFiles, "gui")
+	if err != nil {
+		log.Fatal(err)
+	}
+	// Declare Main Page for webui.
+	container.ServeMux.Handle("/", http.FileServer(http.FS(guiFS)))
+
 	srv := &http.Server{
 		Addr:    fmt.Sprintf(":%d", port),
 		Handler: container.ServeMux,
@@ -47,9 +61,10 @@ func newApiServer(port int, allowedDomains []string, client client.Client) (*api
 		Container:      container,
 	}
 
+	// RESTFUL API start at `/api`
 	ws := new(restful.WebService)
 	ws.
-		Path("/").
+		Path("/api").
 		Consumes(restful.MIME_JSON).
 		Produces(restful.MIME_JSON)
 
@@ -61,12 +76,10 @@ func newApiServer(port int, allowedDomains []string, client client.Client) (*api
 	}, nil
 }
 
-// TODO Add more endpoints here
 func addEndpoints(ws *restful.WebService, client client.Client) {
 	resources := []endpoints.Endpoint{
 		endpoints.NewAlluxioClusterEndpoint(client),
 		endpoints.NewDataSetEndpoint(client),
-		// More here ....
 	}
 	for _, ep := range resources {
 		ep.SetupWithWS(ws)

diff --git a/cmd/api_server/gui/.DS_Store b/cmd/api_server/gui/.DS_Store
diff --git a/cmd/api_server/gui/asset-manifest.json b/cmd/api_server/gui/asset-manifest.json
@@ -0,0 +1,13 @@
+{
+  "files": {
+    "main.css": "/static/css/main.e6c13ad2.css",
+    "main.js": "/static/js/main.c32d2a80.js",
+    "index.html": "/index.html",
+    "main.e6c13ad2.css.map": "/static/css/main.e6c13ad2.css.map",
+    "main.c32d2a80.js.map": "/static/js/main.c32d2a80.js.map"
+  },
+  "entrypoints": [
+    "static/css/main.e6c13ad2.css",
+    "static/js/main.c32d2a80.js"
+  ]
+}
diff --git a/cmd/api_server/gui/favicon.ico b/cmd/api_server/gui/favicon.ico
diff --git a/cmd/api_server/gui/index.html b/cmd/api_server/gui/index.html
@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><script defer="defer" src="/static/js/main.c32d2a80.js"></script><link href="/static/css/main.e6c13ad2.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/cmd/api_server/gui/logo192.png b/cmd/api_server/gui/logo192.png
diff --git a/cmd/api_server/gui/logo512.png b/cmd/api_server/gui/logo512.png
diff --git a/cmd/api_server/gui/manifest.json b/cmd/api_server/gui/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/cmd/api_server/gui/robots.txt b/cmd/api_server/gui/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/cmd/api_server/gui/static/css/main.e6c13ad2.css b/cmd/api_server/gui/static/css/main.e6c13ad2.css
diff --git a/cmd/api_server/gui/static/css/main.e6c13ad2.css.map b/cmd/api_server/gui/static/css/main.e6c13ad2.css.map
diff --git a/cmd/api_server/gui/static/js/main.c32d2a80.js b/cmd/api_server/gui/static/js/main.c32d2a80.js
diff --git a/cmd/api_server/gui/static/js/main.c32d2a80.js.LICENSE.txt b/cmd/api_server/gui/static/js/main.c32d2a80.js.LICENSE.txt
@@ -0,0 +1,81 @@
+/**
+ * @license React
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @remix-run/router v1.14.0
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+/**
+ * React Router DOM v6.21.0
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+/**
+ * React Router v6.21.0
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
diff --git a/cmd/api_server/gui/static/js/main.c32d2a80.js.map b/cmd/api_server/gui/static/js/main.c32d2a80.js.map