add simple UI

reddec · Oct 8, 2019 · c6e1710 · c6e1710
1 parent 05116d7
commit c6e1710
Show file tree

Hide file tree

Showing 5 changed files with 372 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -48,6 +48,10 @@ Next new public nodes require increasing number of additional operations (+N ope
 2. automatic keys distribution
 3. simplified procedure to add new node to existent net
 
+With simple UI (available on your VPN address with port 1655 by default)
+
+![image](https://user-images.githubusercontent.com/6597086/66371906-3cdf0500-e9d7-11e9-8e11-f6102fbdeb64.png)
+
 
 ## Installation
 

diff --git a/domain/monitor/assets.go b/domain/monitor/assets.go
diff --git a/domain/monitor/assets/nodes.gotemplate b/domain/monitor/assets/nodes.gotemplate
@@ -0,0 +1,96 @@
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>{{.Service.Config.Name}} - nodes</title>
+    <style>
+        body {
+            font-family: Arial, Helvetica, sans-serif;
+            align-items: center;
+            display: flex;
+            justify-content: center;
+        }
+        .card {
+            margin: 16px;
+            padding: 5px;
+            min-height: 30px;
+            border-radius: 3px;
+            box-shadow: 0px 1px 3px #777777;
+        }
+        .name {
+            font-size: large;
+            font-weight: bold;
+            padding-top: 3px;
+            padding-bottom: 5px;
+        }
+        .subnet {
+            font-family: monospace;
+        }
+        .status-pending {
+            float: right;
+            padding: 3px;
+            margin-top: -5px;
+            margin-right: -5px;
+            border-radius: 0 3px 0 5px;
+            color: #336699;
+            text-decoration: none;
+        }
+        .hostfile {
+            float: right;
+            padding: 3px;
+            margin-top: -5px;
+            margin-right: -5px;
+            border-radius: 0 3px 0 5px;
+            background-color: #336699;
+            color: white;
+            text-decoration: none;
+        }
+        .container {
+            display: block;
+            vertical-align: middle;
+            width: 800px;
+        }
+        .meta {
+            margin: 16px;
+            color: #84a3e1;
+        }
+
+        .meta-address {
+            font-family: monospace;
+        }
+
+        .meta > a {
+            text-decoration: none;
+            color: #84a3e1;
+            font-weight: bold;
+        }
+
+        .meta > a:hover {
+            text-decoration: underline;
+        }
+    </style>
+</head>
+<body>
+
+<div class="container">
+    <div class="meta">
+        <a href="../" download="{{.Service.Config.Name}}">{{.Service.Config.Name}}</a>, <span class="meta-address">{{.Service.Address}}</span>
+    </div>
+    {{range .Nodes}}
+        {{if .Fetched}}
+            <div class="card">
+                <a href="rpc/node/{{.Name}}/hostfile" class="hostfile" download="{{.Name}}">download</a>
+                <div class="name">{{.Name}}</div>
+                <div class="subnet">{{.Subnet}}</div>
+            </div>
+        {{else}}
+            <div class="card">
+                <div class="status-pending">pending...</div>
+                <div class="name">{{.Name}}</div>
+                <div class="subnet">{{.Subnet}}</div>
+            </div>
+        {{end}}
+    {{end}}
+</div>
+</body>
+</html>
diff --git a/domain/monitor/http_api.go b/domain/monitor/http_api.go
@@ -1,8 +1,10 @@
 package monitor
 
 import (
+	"bytes"
 	"github.com/gin-gonic/gin"
 	"github.com/reddec/tinc-boot/types"
+	"html/template"
 	"net/http"
 	"path/filepath"
 )
@@ -12,6 +14,7 @@ func (ms *service) createAPI() *gin.Engine {
 	engine := gin.Default()
 
 	engine.GET("/", ms.apiServeHostFile)
+	engine.GET("/ui", ms.apiUiNodes)
 	engine.POST("/rpc/watch", ms.apiWatchNode)
 	engine.POST("/rpc/forget", ms.apiForgetNode)
 	engine.POST("/rpc/kill", ms.apiKillNode)
@@ -69,3 +72,30 @@ func (ms *service) apiGetNodeFile(gctx *gin.Context) {
 	node := gctx.Param("node")
 	gctx.File(filepath.Join(ms.cfg.Hosts(), node))
 }
+
+//go:generate go-bindata -o assets.go -pkg monitor --prefix assets/ assets/
+func (ms *service) apiUiNodes(gctx *gin.Context) {
+	nodes := ms.nodes.Copy()
+	ms.renderTemplate(gctx, "nodes.gotemplate", gin.H{
+		"Nodes":   nodes,
+		"Service": ms,
+	})
+}
+
+func (ms *service) renderTemplate(gctx *gin.Context, name string, params interface{}) {
+	ms.initTemplates.Do(func() {
+		for _, assetName := range AssetNames() {
+			templateNodes = make(map[string]*template.Template)
+			templateNodes[assetName] = template.Must(template.New("").Parse(string(MustAsset(assetName))))
+		}
+	})
+	buf := &bytes.Buffer{}
+	err := templateNodes[name].Execute(buf, params)
+	if err != nil {
+		gctx.AbortWithError(http.StatusInternalServerError, err)
+		return
+	}
+	gctx.Data(http.StatusOK, "text/html", buf.Bytes())
+}
+
+var templateNodes map[string]*template.Template