UI customizations with alert handling
Adds preliminary UI customizations with Airship branding. Also adds message type to pass errors / alerts from backend to javascript frontend. Change-Id: I7c081b79095237c9ec1f2d8817755df6b3d95736
This commit is contained in:
Matthew Fuller
parent
ad93a323e7
commit
10cc34a00e
@ -16,6 +16,7 @@ package commands
|
||||
|
||||
import (
|
||||
"context"
|
||||
"fmt"
|
||||
"log"
|
||||
"os"
|
||||
"os/signal"
|
||||
@ -76,6 +77,13 @@ func launch(cmd *cobra.Command, args []string) {
|
||||
}
|
||||
} else {
|
||||
log.Printf("config %s", err)
|
||||
webservice.Alerts = append(
|
||||
webservice.Alerts,
|
||||
webservice.Alert{
|
||||
Level: "info",
|
||||
Message: fmt.Sprintf("%s", err),
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
// start the electron app
|
||||
|
||||
@ -32,6 +32,14 @@ type wsRequest struct {
|
||||
Data map[string]interface{} `json:"data"`
|
||||
}
|
||||
|
||||
// Alert basic structure to hold alert messages to pass to the UI
|
||||
type Alert struct {
|
||||
Level string
|
||||
Message string
|
||||
}
|
||||
|
||||
var Alerts []Alert
|
||||
|
||||
// gorilla ws specific HTTP upgrade to WebSockets
|
||||
var upgrader = websocket.Upgrader{
|
||||
ReadBufferSize: 1024,
|
||||
@ -70,6 +78,14 @@ func onOpen(w http.ResponseWriter, r *http.Request) {
|
||||
|
||||
ws = wsConn
|
||||
log.Printf("WebSocket established with %s\n", ws.RemoteAddr().String())
|
||||
|
||||
// send any initialization alerts to UI and clear the queue
|
||||
for len(Alerts) > 0 {
|
||||
sendAlert(Alerts[0].Level, Alerts[0].Message)
|
||||
Alerts[0] = Alert{}
|
||||
Alerts = Alerts[1:]
|
||||
}
|
||||
|
||||
go onMessage()
|
||||
}
|
||||
|
||||
@ -151,6 +167,20 @@ func handleAuth(w http.ResponseWriter, r *http.Request) {
|
||||
}
|
||||
}
|
||||
|
||||
// SendAlert sends an alert message to the frontend handler
|
||||
// to display alerts in the UI itself
|
||||
func sendAlert(alertLvl string, msg string) {
|
||||
if err := ws.WriteJSON(map[string]interface{}{
|
||||
"type": "electron",
|
||||
"component": "alert",
|
||||
"level": alertLvl,
|
||||
"message": msg,
|
||||
"timestamp": time.Now().UnixNano() / 1000000,
|
||||
}); err != nil {
|
||||
onError(err)
|
||||
}
|
||||
}
|
||||
|
||||
// WebServer will run the handler functions for WebSockets
|
||||
// TODO: potentially add in the ability to serve static content
|
||||
func WebServer() {
|
||||
|
||||
43
web/css/spinner.css
Normal file
43
web/css/spinner.css
Normal file
@ -0,0 +1,43 @@
|
||||
/* loading spinner CSS taken from SpinKit, http://tobiasahlin.com/spinkit/ */
|
||||
|
||||
.spinner {
|
||||
margin: 100px auto 0;
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.spinner > div {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-color: #333;
|
||||
|
||||
border-radius: 100%;
|
||||
display: inline-block;
|
||||
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
||||
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
||||
}
|
||||
|
||||
.spinner .bounce1 {
|
||||
-webkit-animation-delay: -0.32s;
|
||||
animation-delay: -0.32s;
|
||||
}
|
||||
|
||||
.spinner .bounce2 {
|
||||
-webkit-animation-delay: -0.16s;
|
||||
animation-delay: -0.16s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes sk-bouncedelay {
|
||||
0%, 80%, 100% { -webkit-transform: scale(0) }
|
||||
40% { -webkit-transform: scale(1.0) }
|
||||
}
|
||||
|
||||
@keyframes sk-bouncedelay {
|
||||
0%, 80%, 100% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
} 40% {
|
||||
-webkit-transform: scale(1.0);
|
||||
transform: scale(1.0);
|
||||
}
|
||||
}
|
||||
20
web/images/Airship_Icon_2Color_RGB.svg
Normal file
20
web/images/Airship_Icon_2Color_RGB.svg
Normal file
@ -0,0 +1,20 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 360 360" style="enable-background:new 0 0 360 360;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#65C7C2;}
|
||||
.st1{fill:#141F47;}
|
||||
</style>
|
||||
<g >
|
||||
<path class="st0" fill="#65C7C2" d="M162.1,227.5l-7.2-4.1c-2.2-1.2-3.7-3.4-4.2-5.8l-2.7-13.8c-3.6-6-7.6-17.2-7.6-17.2L118,225.7
|
||||
c-2.5,4.3,0.6,9.7,5.6,9.7h35.4c0.8,0,1.6-0.5,2-1.2l3.3-5.8C163.6,228.2,162.8,227.9,162.1,227.5z"/>
|
||||
<path class="st1" fill="#141F47" d="M185.7,127.8c-2.5-4.3-8.7-4.3-11.2,0l-27.9,48.4c0.8-1.1,2-2,3.4-2.3c9.1-2.4,27.4-5.6,41.6,2.6
|
||||
c7.3,4.2,12.5,10.8,16.2,17.5h14.8c0.8,0,1.4,0.3,1.8,0.9L185.7,127.8z"/>
|
||||
<path class="st0" fill="#65C7C2" d="M242.2,225.7l-17.5-30.3c0.3,0.8,0.2,1.7-0.5,2.5l-9.1,9.4l27.9,20.5C242.8,227.1,242.5,226.4,242.2,225.7z"/>
|
||||
<path class="st1" fill="#141F47" d="M176.9,201.8c-13-7.5-23.4-17-30.7-25l-0.5,0.9c-0.7,1.1-0.5,2.5-0.1,3.8c1.4,5.1,4,12.8,8.5,20l2.9,14.9
|
||||
c0.1,0.7,0.5,1.3,1.1,1.6l7.2,4.1c1.1,0.7,2.6,0.3,3.2-0.9l2.3-3.9c6.7,3.3,14.1,4.2,21,4.1l7.4,12.8c1,1.8,3.7,1.5,4.3-0.5
|
||||
l4.1-14.3c0.9-0.2,1.8-0.4,2.6-0.7c1.7-0.4,3-1.5,3.8-2.9C203.4,213.5,189.9,209.3,176.9,201.8z"/>
|
||||
<path class="st0" fill="#65C7C2" d="M238.7,235l-25.9-11.4l-3.3,11.7l27.1,0C237.3,235.4,238.1,235.3,238.7,235z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
1
web/images/Airship_Logo_Horizontal_2Color_RGB.svg
Normal file
1
web/images/Airship_Logo_Horizontal_2Color_RGB.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 267.97 72"><defs><style>.cls-1{fill:#141f47;}.cls-2{fill:#65c7c2;}</style></defs><title>Airship_Logo_Horizontal_2Color_RGB</title><path class="cls-1" fill="#141f47" d="M147.77,113.35a9.53,9.53,0,0,1-.88-2.95,10.65,10.65,0,0,1-8.31,3.56,11.66,11.66,0,0,1-8-2.8,9,9,0,0,1-3.18-7,9.32,9.32,0,0,1,3.88-8q3.89-2.79,11.21-2.83h4V91.37a5.42,5.42,0,0,0-1.17-3.65,4.61,4.61,0,0,0-3.69-1.37,5.24,5.24,0,0,0-3.49,1.07,3.61,3.61,0,0,0-1.26,2.91h-8.79A8.83,8.83,0,0,1,129.89,85a11.64,11.64,0,0,1,5-3.81,18.26,18.26,0,0,1,7.24-1.39q6.07,0,9.65,3.06t3.58,8.59v14.26a15.58,15.58,0,0,0,1.31,7.08v.52Zm-7.27-6.11a7.56,7.56,0,0,0,3.59-.87,5.69,5.69,0,0,0,2.43-2.32V98.39h-3.28q-6.6,0-7,4.56l0,.52a3.54,3.54,0,0,0,1.16,2.71A4.47,4.47,0,0,0,140.5,107.24Z" transform="translate(-46.01 -54)"/><path class="cls-1" fill="#141f47" d="M161.42,71.94a4.32,4.32,0,0,1,1.32-3.25,5.69,5.69,0,0,1,7.19,0,4.64,4.64,0,0,1,0,6.53,5.63,5.63,0,0,1-7.15,0A4.31,4.31,0,0,1,161.42,71.94Zm9.33,41.41h-8.81V80.45h8.81Z" transform="translate(-46.01 -54)"/><path class="cls-1" fill="#141f47" d="M195.84,88.69a24.24,24.24,0,0,0-3.16-.24q-5,0-6.54,3.37v21.53h-8.79V80.45h8.3l.25,3.93q2.64-4.55,7.32-4.54a9.3,9.3,0,0,1,2.74.4Z" transform="translate(-46.01 -54)"/><path class="cls-1" fill="#141f47" d="M218.82,104.26a2.85,2.85,0,0,0-1.6-2.54,18.11,18.11,0,0,0-5.12-1.66q-11.74-2.46-11.74-10A9,9,0,0,1,204,82.78a14.66,14.66,0,0,1,9.51-2.94q6.25,0,10,3a9.29,9.29,0,0,1,3.76,7.67h-8.79a4.25,4.25,0,0,0-1.21-3.12,5.15,5.15,0,0,0-3.8-1.23,5.26,5.26,0,0,0-3.44,1,3.18,3.18,0,0,0-1.22,2.56A2.69,2.69,0,0,0,210.2,92a14.06,14.06,0,0,0,4.66,1.55,38.33,38.33,0,0,1,5.54,1.48q7,2.55,7,8.85a8.59,8.59,0,0,1-3.86,7.28,16.7,16.7,0,0,1-10,2.78,17.32,17.32,0,0,1-7.35-1.48,12.32,12.32,0,0,1-5-4,9.42,9.42,0,0,1-1.82-5.55h8.33a4.6,4.6,0,0,0,1.73,3.59,6.87,6.87,0,0,0,4.32,1.25,6.33,6.33,0,0,0,3.81-1A3,3,0,0,0,218.82,104.26Z" transform="translate(-46.01 -54)"/><path class="cls-1" fill="#141f47" d="M242.52,84a11,11,0,0,1,8.79-4.2q10.71,0,10.86,12.44v21.07h-8.79V92.52a6.14,6.14,0,0,0-1.22-4.18,5.22,5.22,0,0,0-4-1.35,6,6,0,0,0-5.6,3v23.38h-8.78V66.65h8.78Z" transform="translate(-46.01 -54)"/><path class="cls-1" fill="#141f47" d="M268.34,71.94a4.29,4.29,0,0,1,1.33-3.25,5.69,5.69,0,0,1,7.19,0,4.65,4.65,0,0,1,0,6.53,5.62,5.62,0,0,1-7.14,0A4.28,4.28,0,0,1,268.34,71.94Zm9.34,41.41h-8.82V80.45h8.82Z" transform="translate(-46.01 -54)"/><path class="cls-1" fill="#141f47" d="M314,97.21q0,7.59-3.46,12.17a11.06,11.06,0,0,1-9.32,4.58,10.25,10.25,0,0,1-8-3.47V126h-8.79V80.45h8.15l.3,3.23a10.33,10.33,0,0,1,8.33-3.84,11.17,11.17,0,0,1,9.46,4.5Q314,88.84,314,96.75Zm-8.79-.64a12.94,12.94,0,0,0-1.63-7.09A5.3,5.3,0,0,0,298.84,87c-2.75,0-4.65,1.05-5.68,3.16v13.47c1.07,2.17,3,3.26,5.74,3.26Q305.2,106.88,305.2,96.57Z" transform="translate(-46.01 -54)"/><path class="cls-2" fill="#65c7c2" d="M70.14,109.14l-3.84-2.21a4.63,4.63,0,0,1-2.22-3.12l-1.45-7.38a66.9,66.9,0,0,1-4.06-9.2L46.48,108.16a3.46,3.46,0,0,0,3,5.19h19a1.28,1.28,0,0,0,1.1-.63l1.78-3.1A4.31,4.31,0,0,1,70.14,109.14Z" transform="translate(-46.01 -54)"/><path class="cls-1" fill="#141f47" d="M82.75,55.73a3.46,3.46,0,0,0-6,0l-15,25.92a3.32,3.32,0,0,1,1.83-1.25c4.88-1.31,14.65-3,22.28,1.39a23.93,23.93,0,0,1,8.67,9.35h7.91a1.28,1.28,0,0,1,1,.46Z" transform="translate(-46.01 -54)"/><path class="cls-2" fill="#65c7c2" d="M113,108.16l-9.38-16.23a1.25,1.25,0,0,1-.27,1.32l-4.89,5,14.94,11A3.41,3.41,0,0,0,113,108.16Z" transform="translate(-46.01 -54)"/><path class="cls-1" fill="#141f47" d="M78.05,95.33A70.74,70.74,0,0,1,61.62,82l-.29.49a2.61,2.61,0,0,0-.07,2,40.48,40.48,0,0,0,4.55,10.73l1.56,8A1.27,1.27,0,0,0,68,104l3.84,2.21a1.27,1.27,0,0,0,1.73-.46l1.21-2.11A24.72,24.72,0,0,0,86,105.87l4,6.85a1.26,1.26,0,0,0,2.31-.29l2.18-7.65c.5-.12,1-.23,1.39-.35a3.34,3.34,0,0,0,2-1.55A70.94,70.94,0,0,1,78.05,95.33Z" transform="translate(-46.01 -54)"/><path class="cls-2" fill="#65c7c2" d="M111.17,113.15,97.3,107.06l-1.79,6.29H110A3.25,3.25,0,0,0,111.17,113.15Z" transform="translate(-46.01 -54)"/></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
BIN
web/images/avatar.jpg
Normal file
BIN
web/images/avatar.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
148
web/index.html
148
web/index.html
@ -1,39 +1,111 @@
|
||||
<!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';" />
|
||||
<script src="js/websocket.js"></script>
|
||||
<script src="js/common.js"></script>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="HeaderDiv" class="topnav" style="display:none">
|
||||
<div id="HeaderNameDiv" class="topnavsuite"></div>
|
||||
<a href="index.html" id="AirshipUIHome">Airship UI</a>
|
||||
<div class="dropdown">
|
||||
<button class="dropbtn">Dropdown</button>
|
||||
<div id="PluginDropdown" class="dropdown-content">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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" style="display:none">
|
||||
</br>
|
||||
<center><img src="images/airship-color.png" width="100px" height="67px"></center>
|
||||
<center>
|
||||
<p>© <a href="http://www.att.com/" title="www.att.com">The Airship Authors.</a> All Rights
|
||||
Reserved.</p>
|
||||
</center>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<base href="./">
|
||||
<meta charset="utf-8">
|
||||
<title>Airship UI</title>
|
||||
<meta name="description"
|
||||
content="Airship User Interface. SPDX-License-Identifier: Apache-2.0">
|
||||
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<link rel="manifest" href="js/coreui-3.2.0/assets/favicon/manifest.json">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
<script src="js/websocket.js"></script>
|
||||
<script src="js/common.js"></script>
|
||||
<script src="js/coreui-3.2.0/vendors/@coreui/coreui/js/coreui.bundle.min.js"></script>
|
||||
<link href="js/coreui-3.2.0/css/style.css" rel="stylesheet">
|
||||
<link href="css/spinner.css" rel="stylesheet">
|
||||
<script>
|
||||
onload = () => {
|
||||
const webview = document.querySelector("webview")
|
||||
const spinner = document.querySelector(".spinner")
|
||||
const loadStart = () => {
|
||||
spinner.style.display = "block";
|
||||
}
|
||||
const loadStop = () => {
|
||||
spinner.style.display = "none";
|
||||
}
|
||||
const loadFail = (err) => {
|
||||
showDismissableAlert("danger", `Error loading '${err.validatedURL}': ${err.errorDescription} (${err.errorCode})`);
|
||||
}
|
||||
webview.addEventListener("did-start-loading", loadStart)
|
||||
webview.addEventListener("did-stop-loading", loadStop)
|
||||
webview.addEventListener("did-fail-load", loadFail)
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="c-app">
|
||||
<div id="MainDiv">
|
||||
<div class="c-sidebar c-sidebar-dark c-sidebar-fixed c-sidebar-lg-show" id="sidebar">
|
||||
<div class="c-sidebar-brand d-lg-down-none">
|
||||
<svg class="c-sidebar-brand-full" width="118" height="46" alt="Airship Logo">
|
||||
<use xlink:href="images/Airship_Logo_Horizontal_2Color_RGB.svg#Layer_1"></use>
|
||||
</svg>
|
||||
<svg class="c-sidebar-brand-minimized" width="46" height="46" alt="Airship Logo">
|
||||
<use xlink:href="images/Airship_Icon_2Color_RGB.svg#Layer_1"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<ul class="c-sidebar-nav">
|
||||
<li class="c-sidebar-nav-title">Components</li>
|
||||
<li class="c-sidebar-nav-item c-sidebar-nav-dropdown"><a class="c-sidebar-nav-link c-sidebar-nav-dropdown-toggle" href="#">
|
||||
<svg class="c-sidebar-nav-icon">
|
||||
<use xlink:href="js/coreui-3.2.0/vendors/@coreui/icons/svg/free.svg#cil-puzzle"></use>
|
||||
</svg> Plugins</a>
|
||||
<ul id="PluginDropdown" class="c-sidebar-nav-dropdown-items">
|
||||
</ul>
|
||||
</li>
|
||||
<li class="c-sidebar-nav-item c-sidebar-nav-dropdown"><a class="c-sidebar-nav-link c-sidebar-nav-dropdown-toggle" href="#">
|
||||
<svg class="c-sidebar-nav-icon">
|
||||
<use xlink:href="js/coreui-3.2.0/vendors/@coreui/icons/svg/free.svg#cil-speedometer"></use>
|
||||
</svg> Dashboards</a>
|
||||
<ul id="DashDropdown" class="c-sidebar-nav-dropdown-items">
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<button class="c-sidebar-minimizer c-class-toggler" type="button" data-target="_parent" data-class="c-sidebar-minimized"></button>
|
||||
</div>
|
||||
<div class="c-wrapper c-fixed-components">
|
||||
<header class="c-header c-header-light c-header-fixed c-header-with-subheader">
|
||||
<button class="c-header-toggler c-class-toggler d-lg-none mfe-auto" type="button" data-target="#sidebar" data-class="c-sidebar-show">
|
||||
<svg class="c-icon c-icon-lg">
|
||||
<use xlink:href="js/coreui-3.2.0/vendors/@coreui/icons/svg/free.svg#cil-menu"></use>
|
||||
</svg>
|
||||
</button><a class="c-header-brand d-lg-none" href="#">
|
||||
<svg width="118" height="46" alt="Airship Logo">
|
||||
<use xlink:href="images/Airship_Logo_Horizontal_2Color_RGB.svg#Layer_1"></use>
|
||||
</svg></a>
|
||||
<button class="c-header-toggler c-class-toggler mfs-3 d-md-down-none" type="button" data-target="#sidebar" data-class="c-sidebar-lg-show" responsive="true">
|
||||
<svg class="c-icon c-icon-lg">
|
||||
<use xlink:href="js/coreui-3.2.0/vendors/@coreui/icons/svg/free.svg#cil-menu"></use>
|
||||
</svg>
|
||||
</button>
|
||||
<ul class="c-header-nav ml-auto mr-4">
|
||||
<li class="c-header-nav-item dropdown"><a class="c-header-nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
|
||||
<div class="c-avatar"><img class="c-avatar-img" src="images/avatar.jpg" alt="user@email.com"></div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
<div class="c-body">
|
||||
<div id="alert-div"></div>
|
||||
<main class="c-main">
|
||||
<div class="container-fluid">
|
||||
<div class="fade-in"></div>
|
||||
</div>
|
||||
<div class="spinner" style="position:flex;top:0;left:0;width:100%;height:100%;display:none">
|
||||
<div class="bounce1"></div>
|
||||
<div class="bounce2"></div>
|
||||
<div class="bounce3"></div>
|
||||
</div>
|
||||
<div id="embedded-dashboard">
|
||||
<webview class="webview" id="DashView" autosize="on" style="height:92vh;display:none"></webview>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="c-footer">
|
||||
<div>Airship UI © 2020</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -38,12 +38,14 @@ function addServiceDashboards(json) { // eslint-disable-line no-unused-vars
|
||||
let namespace = cluster.namespaces[j];
|
||||
for (let k = 0; k < namespace.dashboards.length; k++) {
|
||||
let dash = namespace.dashboards[k];
|
||||
let { fqdn } = dash.fqdn;
|
||||
if (fqdn === undefined || fqdn === "") {
|
||||
let fqdn = "";
|
||||
if (dash.fqdn === undefined) {
|
||||
fqdn = `${dash.hostname}.${cluster.namespaces[j].name}.${cluster.baseFqdn}`
|
||||
} else {
|
||||
({ fqdn } = dash.fqdn);
|
||||
}
|
||||
let url = `${dash.protocol}://${fqdn}:${dash.port}/${dash.path}`;
|
||||
addDashboard("PluginDropdown", dash.name, url)
|
||||
addDashboard("DashDropdown", dash.name, url)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -53,7 +55,7 @@ function addServiceDashboards(json) { // eslint-disable-line no-unused-vars
|
||||
// add them to the dropdown
|
||||
function addPluginDashboards(json) { // eslint-disable-line no-unused-vars
|
||||
for (let i = 0; i < json.length; i++) {
|
||||
if (json[i].executable.autoStart && json[i].dashboard !== undefined) {
|
||||
if (json[i].executable.autoStart && json[i].dashboard.fqdn !== "") {
|
||||
let dash = json[i].dashboard;
|
||||
let url = `${dash.protocol}://${dash.fqdn}:${dash.port}/${dash.path}`;
|
||||
addDashboard("PluginDropdown", json[i].name, url)
|
||||
@ -63,15 +65,21 @@ function addPluginDashboards(json) { // eslint-disable-line no-unused-vars
|
||||
|
||||
function addDashboard(navElement, name, url) {
|
||||
let nav = document.getElementById(navElement);
|
||||
let li = document.createElement("li");
|
||||
li.className = "c-sidebar-nav-item";
|
||||
let a = document.createElement("a");
|
||||
a.className = "c-sidebar-nav-link";
|
||||
let span = document.createElement("span");
|
||||
span.className = "c-sidebar-nav-icon";
|
||||
a.innerText = name;
|
||||
a.onclick = () => {
|
||||
let view = document.getElementById("DashView");
|
||||
view.src = url;
|
||||
document.getElementById("MainDiv").style.display = "none";
|
||||
document.getElementById("DashView").style.display = "";
|
||||
}
|
||||
nav.appendChild(a);
|
||||
a.appendChild(span);
|
||||
li.appendChild(a);
|
||||
nav.appendChild(li);
|
||||
}
|
||||
|
||||
function authenticate(json) { // eslint-disable-line no-unused-vars
|
||||
@ -87,4 +95,41 @@ function removeElement(id) { // eslint-disable-line no-unused-vars
|
||||
if (document.contains(document.getElementById(id))) {
|
||||
document.getElementById(id).remove();
|
||||
}
|
||||
}
|
||||
|
||||
function showDismissableAlert(alertLevel, msg) { // eslint-disable-line no-unused-vars
|
||||
let e = document.getElementById("alert-div");
|
||||
let alertHeading = "";
|
||||
|
||||
switch (alertLevel) {
|
||||
case "danger":
|
||||
alertHeading = "Error";
|
||||
break;
|
||||
case "warning":
|
||||
alertHeading = "Warning";
|
||||
break;
|
||||
default:
|
||||
alertHeading = "Info";
|
||||
}
|
||||
|
||||
let div = document.createElement("div");
|
||||
div.className = `alert alert-${alertLevel} alert-dismissable fade show`;
|
||||
div.setAttribute("role", "alert");
|
||||
div.innerHTML = `<strong>${alertHeading}: </strong>${msg}`;
|
||||
|
||||
// dismissable button
|
||||
let btn = document.createElement("button");
|
||||
btn.className = "close";
|
||||
btn.type = "button";
|
||||
btn.setAttribute("data-dismiss", "alert");
|
||||
btn.setAttribute("aria-label", "Close");
|
||||
|
||||
let span = document.createElement("span");
|
||||
span.setAttribute("aria-hidden", "true");
|
||||
span.innerText = "×";
|
||||
|
||||
btn.appendChild(span);
|
||||
div.appendChild(btn);
|
||||
|
||||
e.appendChild(div);
|
||||
}
|
||||
@ -9802,7 +9802,7 @@ html:not([dir="rtl"]) .c-sidebar.c-sidebar-show.c-sidebar-right, html:not([dir="
|
||||
}
|
||||
|
||||
.c-sidebar .c-sidebar-brand,.c-sidebar .c-sidebar-header {
|
||||
background: rgba(0, 0, 21, 0.2);
|
||||
background: rgb(226, 226, 241);
|
||||
}
|
||||
|
||||
.c-sidebar .c-sidebar-form .c-form-control {
|
||||
@ -11879,7 +11879,6 @@ html:not([dir="rtl"]) .list-inline {
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
||||
@ -68,11 +68,16 @@ function handleMessages(message) {
|
||||
} else {
|
||||
authComplete();
|
||||
}
|
||||
addPluginDashboards(json["plugins"]);
|
||||
addServiceDashboards(json["dashboards"]);
|
||||
authenticate(json["authentication"]);
|
||||
if (json["plugins"] !== null) {
|
||||
addPluginDashboards(json["plugins"]);
|
||||
}
|
||||
if (json["dashboards"] !== null) {
|
||||
addServiceDashboards(json["dashboards"]);
|
||||
}
|
||||
} else if (json["component"] === "authcomplete") {
|
||||
authComplete();
|
||||
} else if (json["component"] === "alert") {
|
||||
showDismissableAlert(json["level"], json["message"]);
|
||||
}
|
||||
} else {
|
||||
// TODO: determine if we're dispatching events or just doing function calls
|
||||
@ -115,10 +120,7 @@ function close(code) {
|
||||
}
|
||||
|
||||
function authComplete() {
|
||||
document.getElementById("HeaderDiv").style.display = "";
|
||||
document.getElementById("MainDiv").style.display = "";
|
||||
document.getElementById("DashView").style.display = "none";
|
||||
document.getElementById("FooterDiv").style.display = "";
|
||||
}
|
||||
|
||||
function keepAlive() {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user