airship/airshipui
Code Issues Proposed changes

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

Browse Source 
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
This commit is contained in:
Schiefelbein, Andrew 2020-05-04 15:52:45 -05:00
parent 7c18ae051c
commit 9e0f39f624
9 changed files with 2064 additions and 919 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
internal/webservice/plugins.go Executable file
View File

@ -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
}

44
internal/webservice/server.go
View File

@ -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"`
Type string `json:"type,omitempty"`
Component string `json:"component,omitempty"`
Error string `json:"error"`
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,
"getID": basicReply,
"keepalive": keepaliveReply,
"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(request); err != nil {
if err = ws.WriteJSON(component()); err != nil {
onError(err)
break
}
@ -116,14 +112,14 @@ func onMessage() {
}
}
func basicReply() []map[string]string {
m := make([]map[string]string, 0)
m = append(m, map[string]string{
"ID": "foo",
"type": "bar",
"component": "glitch",
})
return m
// The keepalive response including a timestamp from the server
// The electron / web app will occasionally ping the server due to the websocket default timeout
func keepaliveReply() map[string]interface{} {
return map[string]interface{}{
"type": "electron",
"component": "keepalive",
"timestamp": time.Now().UnixNano() / 1000000,
}
}
// common websocket close with logging

14
web/index.html
View File

@ -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
<i class="fa fa-caret-down"></i>
</button>
<div id="plugins" class="dropdown-content">
<button class="dropbtn">Dropdown</button>
<div id="PluginDropdown" class="dropdown-content">
</div>
</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>

97
web/js/common.js
View File

@ -13,17 +13,14 @@
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() {
window.onscroll = function() {
document.addEventListener("DOMContentLoaded", function () {
window.onscroll = function () {
let header = document.getElementById("HeaderDiv");
let sticky = header.offsetTop;
@ -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() {
try {
var f = fs.readFileSync(app.getPath('home') + '/.airshipui/plugins.json')
function addPlugins(json) {
console.log(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++) {
var path = app.getAppPath()
var p = document.getElementById("plugins")
var a = document.createElement("a")
// created as a lambda in order to prevent auto firing the onclick event
a.onclick = () => {
let view = document.getElementById("DashView");
view.src = dash["url"];
var dash = dashboards.external_dashboards[i]
config.set(i.toString(), dash.url)
a.setAttribute('href', `${path}/plugins/dashboards/index.html`)
a.setAttribute('onclick', `config.set('dashboard', ${i.toString()})`)
a.innerText = dash.name
p.appendChild(a)
document.getElementById("MainDiv").style.display = 'none';
document.getElementById("DashView").style.display = '';
}
} catch (e) {
console.log("Plugins file not found")
dropdown.appendChild(a);
}
}
@ -66,63 +60,4 @@ function removeElement(id) {
if (document.contains(document.getElementById(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;
}
}
}
}

14
web/js/websocket.js
View File

@ -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"] === "electron") {
document.getElementById("OutputDiv").innerHTML = JSON.stringify(json);
if (json["type"] === "plugins" && json["component"] === "dropdown") {
addPlugins(json["plugins"]);
} else {
// events based on the type are interesting to other pages
// create and dispatch an event based on the data received
document.dispatchEvent(new CustomEvent(json["type"], {detail: json}));
// 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();

2648
web/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

37
web/package.json
View File

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

40
web/plugins/dashboards/index.html
View File

@ -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>

2
web/style.css
View File

@ -137,4 +137,4 @@
.dropdown:hover .dropdown-content {
display: block;
}
}