Moving the plugin dropdown population to go instead of node.js

This moves the npm components that were loading the json file to
go so that it can be handled as messages over the websocket

This should serve as an example how to communicate with the backend

Change-Id: I9fdeb420123034a549333ddb3aad45eea663cb09

internal/webservice/plugins.go

@@ -0,0 +1,87 @@
+/*
+ Copyright (c) 2020 AT&T. All Rights Reserved.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+package webservice
+
+import (
+	"encoding/json"
+	"io/ioutil"
+	"log"
+	"os"
+	"path/filepath"
+	"time"
+)
+
+// basic structure for a given external dashboard
+// TODO: solidify the struct requirements for the input
+type extPlugins struct {
+	ExtDashboard []interface{} `json:"external_dashboards"`
+}
+
+// cache the file so we don't have to reread every execution
+var pluginCache map[string]interface{}
+
+// getPlugins updates the pluginCache from file if needed
+func getPlugins() map[string]interface{} {
+	if pluginCache == nil {
+		err := getPluginsFromFile()
+		if err != nil {
+			log.Printf("Error attempting to get plugins from file: %s\n", err)
+		}
+	}
+	return pluginCache
+}
+
+// TODO: add watcher to the json file to reload conf on change
+// Get dashboard links for Plugins if present in $HOME/.airshipui/plugins.json
+func getPluginsFromFile() error {
+	var fileName string
+	home, err := os.UserHomeDir()
+	if err != nil {
+		log.Printf("Error determining the home directory %s\n", err)
+	}
+
+	fileName = filepath.FromSlash(home + "/.airship/plugins.json")
+
+	jsonFile, err := os.Open(fileName)
+	if err != nil {
+		return err
+	}
+
+	defer jsonFile.Close()
+
+	byteValue, err := ioutil.ReadAll(jsonFile)
+
+	if err != nil {
+		return err
+	}
+
+	var plugins extPlugins
+	err = json.Unmarshal(byteValue, &plugins)
+
+	if err != nil {
+		return err
+	}
+
+	log.Printf("Plugins found: %v\n", plugins)
+
+	pluginCache = map[string]interface{}{
+		"type":      "plugins",
+		"component": "dropdown",
+		"timestamp": time.Now().UnixNano() / 1000000,
+		"plugins":   plugins,
+	}
+	return err
+}

internal/webservice/server.go

@@ -19,23 +19,17 @@ import (
 	"fmt"
 	"log"
 	"net/http"
+	"time"
 
 	"github.com/gorilla/websocket"
 )
 
 // just a base structure to return from the web service
-type Message struct {
-	ID      int    `json:"id,omitempty"`
-	Sender  string `json:"sender"`
-	Message string `json:"message"`
-}
-
 type wsRequest struct {
-	ID        string              `json:"id,omitempty"`
 	Type      string                 `json:"type,omitempty"`
 	Component string                 `json:"component,omitempty"`
 	Error     string                 `json:"error"`
-	Data      []map[string]string `json:"data"`
+	Data      map[string]interface{} `json:"data"`
 }
 
 // gorilla ws specific HTTP upgrade to WebSockets
@@ -47,10 +41,13 @@ var upgrader = websocket.Upgrader{
 // this is a way to allow for arbitrary messages to be processed by the backend
 // most likely we will need to have sub components register with the system
 // TODO: make this a dynamic registration of components
-var functionMap = map[string]map[string]func() []map[string]string{
+var functionMap = map[string]map[string]func() map[string]interface{}{
 	"electron": {
-		"keepalive": basicReply,
+		"keepalive": keepaliveReply,
-		"getID":     basicReply,
+		"getID":     keepaliveReply,
+	},
+	"initialize": {
+		"getAll": getPlugins,
 	},
 }
 
@@ -92,8 +89,7 @@ func onMessage() {
 		if reqType, ok := functionMap[request.Type]; ok {
 			// the function map may have a component (function) to process the request
 			if component, ok := reqType[request.Component]; ok {
-				request.Data = component()
+				if err = ws.WriteJSON(component()); err != nil {
-				if err = ws.WriteJSON(request); err != nil {
 					onError(err)
 					break
 				}
@@ -116,14 +112,14 @@ func onMessage() {
 	}
 }
 
-func basicReply() []map[string]string {
+// The keepalive response including a timestamp from the server
-	m := make([]map[string]string, 0)
+// The electron / web app will occasionally ping the server due to the websocket default timeout
-	m = append(m, map[string]string{
+func keepaliveReply() map[string]interface{} {
-		"ID":        "foo",
+	return map[string]interface{}{
-		"type":      "bar",
+		"type":      "electron",
-		"component": "glitch",
+		"component": "keepalive",
-	})
+		"timestamp": time.Now().UnixNano() / 1000000,
-	return m
+	}
 }
 
 // common websocket close with logging

web/index.html

@@ -10,7 +10,6 @@
   <script src="js/websocket.js"></script>
   <script src="js/common.js"></script>
   <link rel="stylesheet" href="style.css">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 </head>
 
 <body>
@@ -18,15 +17,14 @@
     <div id="HeaderNameDiv" class="topnavsuite"></div>
     <a href="index.html" id="AirshipUIHome">Airship UI</a>
     <div class="dropdown">
-      <button class="dropbtn">Plugins
+      <button class="dropbtn">Dropdown</button>
-        <i class="fa fa-caret-down"></i>
+      <div id="PluginDropdown" class="dropdown-content">
-      </button>
-      <div id="plugins" class="dropdown-content">
       </div>
     </div>
-    <div id="NameDiv" class="topnavname"></div>
   </div>
-  <div class="container" id="MainDiv" style="width:98%">
+  <div class="container" id="MainDiv" style="width:98%"></div>
+  <div id="dashboard">
+    <webview class="webview" id="DashView" autosize="on" style="height:92vh;display:none"></webview>
   </div>
   <div id="FooterDiv">
     </br>

web/js/common.js

@@ -13,13 +13,10 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 */
-
 const remote = require('electron').remote;
 const app = remote.app;
-const fs = require('fs')
 const config = require('electron-json-config')
 
-
 // add the footer and header when the page loads
 if (document.addEventListener) {
     document.addEventListener("DOMContentLoaded", function () {
@@ -33,32 +30,29 @@ if (document.addEventListener) {
                 header.classList.remove("sticky");
             }
         };
-        addPlugins()
     }, false);
 }
 
 // add dashboard links to Plugins if present in $HOME/.airshipui/plugins.json
-function addPlugins() {
+function addPlugins(json) {
-    try {
+    console.log(json);
-        var f = fs.readFileSync(app.getPath('home') + '/.airshipui/plugins.json')
+    let dropdown = document.getElementById("PluginDropdown");
+    for (let i = 0; i < json.external_dashboards.length; i++) {
+        let dash = json.external_dashboards[i];
 
-        var dashboards = JSON.parse(f)
+        let a = document.createElement("a");
+        a.innerText = dash["name"];
 
-        for (var i = 0; i < dashboards.external_dashboards.length; i++) {
+        // created as a lambda in order to prevent auto firing the onclick event
-            var path = app.getAppPath()
+        a.onclick = () => {
-            var p = document.getElementById("plugins")
+            let view = document.getElementById("DashView");
-            var a = document.createElement("a")
+            view.src = dash["url"];
 
-            var dash = dashboards.external_dashboards[i]
+            document.getElementById("MainDiv").style.display = 'none';
-            config.set(i.toString(), dash.url)
+            document.getElementById("DashView").style.display = '';
-            a.setAttribute('href', `${path}/plugins/dashboards/index.html`)
-            a.setAttribute('onclick', `config.set('dashboard', ${i.toString()})`)
-            a.innerText = dash.name
-            p.appendChild(a)
         }
 
-    } catch (e) {
+        dropdown.appendChild(a);
-        console.log("Plugins file not found")
     }
 }
 
@@ -67,62 +61,3 @@ function removeElement(id) {
         document.getElementById(id).remove();
     }
 }
-
-// based on w3school: https://www.w3schools.com/howto/howto_js_sort_table.asp
-function sortTable(tableID, column) {
-    var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
-    table = document.getElementById(tableID);
-    switching = true;
-    // Set the sorting direction to ascending:
-    dir = "asc";
-    /* Make a loop that will continue until
-    no switching has been done: */
-    while (switching) {
-        // Start by saying: no switching is done:
-        switching = false;
-        rows = table.rows;
-        /* Loop through all table rows (except the
-        first, which contains table headers): */
-        for (i = 1; i < (rows.length - 1); i++) {
-            // Start by saying there should be no switching:
-            shouldSwitch = false;
-            /* Get the two elements you want to compare,
-            one from current row and one from the next: */
-            x = rows[i].getElementsByTagName("TD")[column];
-            y = rows[i + 1].getElementsByTagName("TD")[column];
-
-            if (x !== undefined && y !== undefined) {
-                /* Check if the two rows should switch place,
-                based on the direction, asc or desc: */
-                if (dir == "asc") {
-                    if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
-                        // If so, mark as a switch and break the loop:
-                        shouldSwitch = true;
-                        break;
-                    }
-                } else if (dir == "desc") {
-                    if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
-                        // If so, mark as a switch and break the loop:
-                        shouldSwitch = true;
-                        break;
-                    }
-                }
-            }
-        }
-        if (shouldSwitch) {
-            /* If a switch has been marked, make the switch
-            and mark that a switch has been done: */
-            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
-            switching = true;
-            // Each time a switch is done, increase this count by 1:
-            switchcount++;
-        } else {
-            /* If no switching has been done AND the direction is "asc",
-            set the direction to "desc" and run the while loop again. */
-            if (switchcount == 0 && dir == "asc") {
-                dir = "desc";
-                switching = true;
-            }
-        }
-    }
-}

web/js/websocket.js

@@ -59,20 +59,24 @@ function register() {
 
 function handleMessages(message) {
     var json = JSON.parse(message.data);
-    // keepalives aren't interesting to other pages
+    if (json["type"] === "plugins" && json["component"] === "dropdown") {
-    if (json["type"] === "electron") {
+        addPlugins(json["plugins"]);
-        document.getElementById("OutputDiv").innerHTML = JSON.stringify(json);
     } else {
         // events based on the type are interesting to other pages
         // create and dispatch an event based on the data received
+        // keepalives aren't interesting so suppressing normal actions for it
+        if (json["electron"] !== "plugins" && json["component"] !== "keepalive") {
             document.dispatchEvent(new CustomEvent(json["type"], {detail: json}));
         }
+    }
+
+    // TODO: Determine if these should be suppressed or only allowed in specific cases
     console.log("Received message: " + message.data);
 }
 
 function open() {
     console.log("Websocket established");
-    var json = {"id":"poc","type":"electron","component":"getID"};
+    var json = {"type":"initialize","component":"getAll"};
     ws.send(JSON.stringify(json));
     // start up the keepalive so the websocket stays open
     keepAlive();

web/package.json

@@ -5,14 +5,15 @@
   "scripts": {
     "start": "electron ."
   },
-  "description": "An attempt to create a small electron app for eventual usage with airship-ui",
+  "description": "Airship UI",
-  "author": "Andrew J. Schiefelbein, andrew.schiefelbein@att.com",
+  "author": "The Airship Authors",
   "license": "ISC",
   "devDependencies": {
-    "electron": "^8.2.4"
+    "electron": "^8.2.5"
   },
   "dependencies": {
     "electron-json-config": "^1.5.3",
+    "node-sass": "^4.14.0",
     "xmlhttprequest": "^1.8.0"
   }
 }

web/plugins/dashboards/index.html

@@ -1,40 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="UTF-8">
-  <title>Airship UI</title>
-  <meta name="description"
-    content="Airship User Interface.  Copyright (c) 2020 AT&T. All Rights Reserved.  SPDX-License-Identifier: Apache-2.0">
-    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
-    <link rel="stylesheet" href="../../style.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <script src="../../js/common.js"></script>
-    <script>
-        window.addEventListener('DOMContentLoaded', _ => {
-            var view = document.getElementById("dashview")
-            var dash = config.get('dashboard')
-            var url = config.get(dash.toString())
-            view.src = url
-        })
-    </script>
-</head>
-
-<body>
-  <div id="HeaderDiv" class="topnav">
-    <div id="HeaderNameDiv" class="topnavsuite"></div>
-    <a href="../../index.html" id="AirshipUIHome">Airship UI</a>
-    <div class="dropdown">
-      <button class="dropbtn">Plugins
-        <i class="fa fa-caret-down"></i>
-      </button>
-      <div id="plugins" class="dropdown-content">
-      </div>
-    </div>
-  </div>
-  <div id="dashboard">
-    <webview class="webview" id="dashview" src="" autosize="on" style="height:92vh"></webview>
-  </div>
-</body>
-
-</html>