omec-project · thakurajayL · Jul 16, 2024 · Jun 18, 2024 · Jun 19, 2024 · Jun 20, 2024
diff --git a/Makefile b/Makefile
@@ -53,8 +53,15 @@ $(GO_BIN_PATH)/$(WEBCONSOLE): server.go  $(WEBCONSOLE_GO_FILES)
 
 vpath %.go $(addprefix $(GO_SRC_PATH)/, $(GO_NF))
 
+webconsole-ui: $(GO_BIN_PATH)/$(WEBCONSOLE)-ui
+
+$(GO_BIN_PATH)/$(WEBCONSOLE)-ui: server.go  $(WEBCONSOLE_GO_FILES)
+	@echo "Start building $(@F)...."
+	go build --tags ui -o $(ROOT_PATH)/$@ ./server.go
+
 clean:
-	rm -rf $(WEBCONSOLE)/$(GO_BIN_PATH)/$(WEBCONSOLE)
+	rm -rf $(ROOT_PATH)/$(GO_BIN_PATH)/$(WEBCONSOLE)
+	rm -rf $(ROOT_PATH)/$(GO_BIN_PATH)/$(WEBCONSOLE)-ui
 
 docker-build:
 	@go mod vendor

diff --git a/README.md b/README.md
@@ -17,6 +17,24 @@ features Configuration Service provides APIs for subscriber management.
 4. 5G clients can connect & get complete configuration copy through grpc interface.
 5. 4G clients communicate with Webconsole through REST interface
 
+# UI
+
+Webconsole can optionally serve static files, which constitute the frontend part of the application.
+
+To build webui with a frontend, place the static files under `webconsole/ui/frontend_files` before compilation.
+
+To build the webconsole including the UI option:
+```
+make webconsole-ui
+```
+
+Access the UI at:
+```
+http://<webconsole-ip>:5000/
+```
+
+An example static file has been placed in the `webconsole/ui/frontend_files` directory.
+
 ## Webconsole Architecture diagram
 
 ![Architecture](/docs/images/architecture1.png)

diff --git a/backend/webui_service/dummy_ui_service.go b/backend/webui_service/dummy_ui_service.go
@@ -0,0 +1,16 @@
+// SPDX-License-Identifier: Apache-2.0
+// Copyright 2024 Canonical Ltd.
+
+//go:build !ui
+
+package webui_service
+
+import (
+	"github.com/gin-gonic/gin"
+	"github.com/omec-project/webconsole/backend/logger"
+)
+
+func AddUiService(engine *gin.Engine) *gin.RouterGroup {
+	logger.WebUILog.Infoln("UI service will not be added")
+	return nil
+}
diff --git a/backend/webui_service/ui_service.go b/backend/webui_service/ui_service.go
@@ -0,0 +1,42 @@
+// SPDX-License-Identifier: Apache-2.0
+// Copyright 2024 Canonical Ltd.
+
+// +build ui
+
+package webui_service
+
+import (
+    "io/fs"
+    "net/http"
+    "strings"
+
+    "github.com/gin-gonic/gin"
+    "github.com/omec-project/webconsole/backend/logger"
+    "github.com/omec-project/webconsole/ui"
+)
+
+func AddUiService(engine *gin.Engine) {
+	logger.WebUILog.Infoln("Adding UI service")
+    staticFilesSystem, err := fs.Sub(ui.FrontendFS, "frontend_files")
+    if err != nil {
+        logger.WebUILog.Fatal(err)
+    }
+
+    engine.Use(func(c *gin.Context) {
+        if !isApiUrlPath(c.Request.URL.Path){
+            htmlPath := strings.TrimPrefix(c.Request.URL.Path, "/") + ".html"
+            if _, err := staticFilesSystem.Open(htmlPath); err == nil {
+                c.Request.URL.Path = htmlPath
+            }
+            fileServer := http.FileServer(http.FS(staticFilesSystem))
+            fileServer.ServeHTTP(c.Writer, c.Request)
+            c.Abort()
+        }
+    })
+}
+
+func isApiUrlPath(path string) bool{
+    return strings.HasPrefix(path, "/config/v1/") || strings.HasPrefix(path, "/api/");
+}
+
+
diff --git a/backend/webui_service/webui_init.go b/backend/webui_service/webui_init.go
@@ -169,6 +169,7 @@ func (webui *WEBUI) Start() {
 
 	/* First HTTP Server running at port to receive Config from ROC */
 	subconfig_router := logger_util.NewGinWithLogrus(logger.GinLog)
+	AddUiService(subconfig_router)
 	configapi.AddServiceSub(subconfig_router)
 	configapi.AddService(subconfig_router)
 

diff --git a/ui/embed.go b/ui/embed.go
@@ -0,0 +1,13 @@
+// SPDX-License-Identifier: Apache-2.0
+// Copyright 2024 Canonical Ltd.
+
+// +build ui
+
+package ui
+
+import (
+    "embed"
+)
+
+//go:embed all:frontend_files
+var FrontendFS embed.FS
diff --git a/ui/frontend_files/index.html b/ui/frontend_files/index.html
@@ -0,0 +1,14 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!-- Copyright 2024 Canonical Ltd. -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Webui</title>
+</head>
+<body>
+    <h1>Welcome to the webconsole UI</h1>
+    <h3>This is an example of a static file from a frontend application.</h3>
+</body>
+</html>