From b2cb22df663d79ac7b0e64bb2d0aaa811e27d624 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Simon=20St=C3=BCrz?= Date: Wed, 14 Nov 2018 11:01:23 +0100 Subject: [PATCH] Add tabs for better overview --- data/debug-interface/script.js | 66 +++++++++++++-- data/debug-interface/styles.css | 45 +++++++++- libnymea-core/debugserverhandler.cpp | 119 ++++++++++++++++++++------- 3 files changed, 188 insertions(+), 42 deletions(-) diff --git a/data/debug-interface/script.js b/data/debug-interface/script.js index bbcc285f..50f401f3 100644 --- a/data/debug-interface/script.js +++ b/data/debug-interface/script.js @@ -19,11 +19,43 @@ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ +/* ========================================================================*/ +/* Navigation +/* ========================================================================*/ + +function selectSection(event, section) { + + console.log("Selected tab " + section) + + var i, tabcontent, tablinks; + tabcontent = document.getElementsByClassName("tabcontent"); + for (i = 0; i < tabcontent.length; i++) { + tabcontent[i].style.display = "none"; + } + + tablinks = document.getElementsByClassName("tablinks"); + for (i = 0; i < tablinks.length; i++) { + tablinks[i].className = tablinks[i].className.replace(" active", ""); + } + + document.getElementById(section).style.display = "block"; + event.currentTarget.className += " active"; +} + /* ========================================================================*/ /* Websocket connection /* ========================================================================*/ var webSocket = null; +var webSocketConnected = false; + +function toggleWebsocketConnection() { + if (webSocketConnected) { + disconnectWebsocket() + } else { + connectWebsocket() + } +} function connectWebsocket() { var urlString = "ws://" + window.location.hostname + ":2626" @@ -34,17 +66,17 @@ function connectWebsocket() { webSocket.onopen = function(openEvent) { console.log("WebSocket connected: " + JSON.stringify(openEvent, null, 4)); - document.getElementById("connectWebsocketButton").disabled = true; - document.getElementById("disconnectWebsocketButton").disabled = false; + webSocketConnected = true; + document.getElementById("toggleLogsButton").innerHTML = "Stop logs"; }; - webSocket.onclose = function (closeEvent) { + webSocket.onclose = function(closeEvent) { console.log("WebSocket disconnected: " + JSON.stringify(closeEvent, null, 4)); - document.getElementById("connectWebsocketButton").disabled = false; - document.getElementById("disconnectWebsocketButton").disabled = true; + webSocketConnected = false; + document.getElementById("toggleLogsButton").innerHTML = "Start logs"; }; - webSocket.onerror = function (errorEvent) { + webSocket.onerror = function(errorEvent) { console.log("WebSocket error: " + JSON.stringify(errorEvent, null, 4)); }; @@ -64,13 +96,19 @@ function connectWebsocket() { function disconnectWebsocket() { console.log("Disconnecting from: " + webSocket.url); webSocket.close() + webSocketConnected = false; + document.getElementById("toggleLogsButton").innerHTML = "Start logs"; } +/* ========================================================================*/ +/* File download / show functions +/* ========================================================================*/ -/* ========================================================================*/ -/* File download function -/* ========================================================================*/ +function showFile(path) { + console.log("Show file in tab " + path); + window.open(path, '_blank'); +} function downloadFile(filePath, fileName) { console.log("Download file requested " + filePath + " --> " + fileName); @@ -151,3 +189,13 @@ function startTracePathTest() { } }; } + +/* ========================================================================*/ +/* Start function calls +/* ========================================================================*/ + +window.onload = function() { + console.log("Window loading finished."); + document.getElementById("informationTabButton").click(); +}; + diff --git a/data/debug-interface/styles.css b/data/debug-interface/styles.css index 0397a77d..2720258e 100644 --- a/data/debug-interface/styles.css +++ b/data/debug-interface/styles.css @@ -29,7 +29,6 @@ p { color: #676767; font-family: "Ubuntu", Helvetica, "Helvetica Neue", Arial, sans-serif; font-size: 100%; - text-align: center; } h1, h2, h3, h4, h5, h6 { @@ -37,6 +36,7 @@ h1, h2, h3, h4, h5, h6 { font-weight: normal; color: #676767; text-transform: none; + text-align: center; } th, td { @@ -73,11 +73,48 @@ textarea { border-radius: 10px; } +.tab { + overflow: hidden; + background-color: #efefef; +} + +.tab button { + background-color: inherit; + float: left; + width: 25%; + border: none; + outline: none; + cursor: pointer; + padding: 14px 16px; + opacity: 0.8; + transition: 0.3s; + font-size: 18px; + font-family: "Ubuntu", Helvetica, "Helvetica Neue", Arial; +} + +.tab button:hover { + background-color: #ddd; +} + +.tab button.active { + background-color: #57baae; +} + +.tabcontent { + display: none; + animation: fadeEffect 0.5s; +} + +@keyframes fadeEffect { + from {opacity: 0;} + to {opacity: 1;} +} + .console-textarea { color: white; margin-top: 20px; padding: 15px; - font-family: "Ubuntu Mono"; + font-family: "Ubuntu Mono", "monospace"; font-size: 100%; } @@ -196,8 +233,8 @@ textarea { } .body { - padding-left: 15%; - padding-right: 15%; + padding-left: 10%; + padding-right: 10%; padding-bottom:120px; } diff --git a/libnymea-core/debugserverhandler.cpp b/libnymea-core/debugserverhandler.cpp index db2ccadc..fb99366f 100644 --- a/libnymea-core/debugserverhandler.cpp +++ b/libnymea-core/debugserverhandler.cpp @@ -344,7 +344,7 @@ void DebugServerHandler::logMessageHandler(QtMsgType type, const QMessageLogCont QByteArray DebugServerHandler::loadResourceData(const QString &resourceFileName) { QFile resourceFile(QString(":%1").arg(resourceFileName)); - if (!resourceFile.open(QFile::ReadOnly | QFile::Text)) { + if (!resourceFile.open(QFile::ReadOnly)) { qCWarning(dcWebServer()) << "DebugServer: Could not open resource file" << resourceFile.fileName(); return QByteArray(); } @@ -470,10 +470,54 @@ QByteArray DebugServerHandler::createDebugXmlDocument() writer.writeEndElement(); // h1 writer.writeEndElement(); // div header + // Tab bar + writer.writeStartElement("div"); + writer.writeAttribute("class", "tab"); + + writer.writeStartElement("button"); + writer.writeAttribute("class", "tablinks"); + writer.writeAttribute("id", "informationTabButton"); + writer.writeAttribute("onclick", "selectSection(event, 'information-section')"); + //: The name of the section tab in the debug server interface + writer.writeCharacters(tr("Information")); + writer.writeEndElement(); // button + + writer.writeStartElement("button"); + writer.writeAttribute("class", "tablinks"); + writer.writeAttribute("id", "downloadsTabButton"); + writer.writeAttribute("onclick", "selectSection(event, 'downloads-section')"); + //: The name of the section tab in the debug server interface + writer.writeCharacters(tr("Downloads")); + writer.writeEndElement(); // button + + writer.writeStartElement("button"); + writer.writeAttribute("class", "tablinks"); + writer.writeAttribute("id", "networkTabButton"); + writer.writeAttribute("onclick", "selectSection(event, 'network-section')"); + //: The name of the section tab in the debug server interface + writer.writeCharacters(tr("Network")); + writer.writeEndElement(); // button + + writer.writeStartElement("button"); + writer.writeAttribute("class", "tablinks"); + writer.writeAttribute("id", "logsTabButton"); + writer.writeAttribute("onclick", "selectSection(event, 'logs-section')"); + //: The name of the section tab in the debug server interface + writer.writeCharacters(tr("Logs")); + writer.writeEndElement(); // button + + writer.writeEndElement(); // tab + // Body writer.writeStartElement("div"); writer.writeAttribute("class", "body"); + + // --------------------------------------------------------------------------- + writer.writeStartElement("div"); + writer.writeAttribute("class", "tabcontent"); + writer.writeAttribute("id", "information-section"); + //: The welcome message of the debug interface writer.writeTextElement("p", tr("Welcome to the debug interface.")); writer.writeTextElement("p", tr("This debug interface was designed to provide an easy possibility to get helpful information about the running nymea server.")); @@ -633,7 +677,12 @@ QByteArray DebugServerHandler::createDebugXmlDocument() } writer.writeEndElement(); // table + writer.writeEndElement(); // information-section + // --------------------------------------------------------------------------- + writer.writeStartElement("div"); + writer.writeAttribute("class", "tabcontent"); + writer.writeAttribute("id", "downloads-section"); // Downloads section writer.writeEmptyElement("hr"); @@ -717,7 +766,7 @@ QByteArray DebugServerHandler::createDebugXmlDocument() writer.writeStartElement("button"); writer.writeAttribute("class", "button"); writer.writeAttribute("type", "button"); - writer.writeAttribute("onClick", "window.open('/debug/syslog', '_blank')"); + writer.writeAttribute("onClick", "showFile('/debug/syslog')"); writer.writeCharacters(tr("Show")); writer.writeEndElement(); // button writer.writeEndElement(); // form @@ -773,7 +822,7 @@ QByteArray DebugServerHandler::createDebugXmlDocument() if (!QFile::exists(NymeaSettings(NymeaSettings::SettingsRoleGlobal).fileName())) { writer.writeAttribute("disabled", "disabled"); } - writer.writeAttribute("onClick", "window.open('/debug/settings/nymead', '_blank')"); + writer.writeAttribute("onClick", "showFile('/debug/settings/nymead')"); writer.writeCharacters(tr("Show")); writer.writeEndElement(); // button writer.writeEndElement(); // form @@ -823,7 +872,7 @@ QByteArray DebugServerHandler::createDebugXmlDocument() if (!QFile::exists(NymeaSettings(NymeaSettings::SettingsRoleDevices).fileName())) { writer.writeAttribute("disabled", "true"); } - writer.writeAttribute("onClick", "window.open('/debug/settings/devices', '_blank')"); + writer.writeAttribute("onClick", "showFile('/debug/settings/devices')"); writer.writeCharacters(tr("Show")); writer.writeEndElement(); // button writer.writeEndElement(); // form @@ -873,7 +922,7 @@ QByteArray DebugServerHandler::createDebugXmlDocument() if (!QFile::exists(NymeaSettings(NymeaSettings::SettingsRoleDeviceStates).fileName())) { writer.writeAttribute("disabled", "true"); } - writer.writeAttribute("onClick", "window.open('/debug/settings/devicestates', '_blank')"); + writer.writeAttribute("onClick", "showFile('/debug/settings/devicestates')"); writer.writeCharacters(tr("Show")); writer.writeEndElement(); // button writer.writeEndElement(); // form @@ -923,7 +972,7 @@ QByteArray DebugServerHandler::createDebugXmlDocument() if (!QFile::exists(NymeaSettings(NymeaSettings::SettingsRoleRules).fileName())) { writer.writeAttribute("disabled", "true"); } - writer.writeAttribute("onClick", "window.open('/debug/settings/rules', '_blank')"); + writer.writeAttribute("onClick", "showFile('/debug/settings/rules')"); writer.writeCharacters(tr("Show")); writer.writeEndElement(); // button writer.writeEndElement(); // form @@ -973,15 +1022,21 @@ QByteArray DebugServerHandler::createDebugXmlDocument() if (!QFile::exists(NymeaSettings(NymeaSettings::SettingsRolePlugins).fileName())) { writer.writeAttribute("disabled", "true"); } - writer.writeAttribute("onClick", "window.open('/debug/settings/plugins', '_blank')"); + writer.writeAttribute("onClick", "showFile('/debug/settings/plugins')"); writer.writeCharacters(tr("Show")); writer.writeEndElement(); // button writer.writeEndElement(); // form writer.writeEndElement(); // div show-button-column writer.writeEndElement(); // div download-row + writer.writeEndElement(); // downloads-section + // --------------------------------------------------------------------------- + writer.writeStartElement("div"); + writer.writeAttribute("class", "tabcontent"); + writer.writeAttribute("id", "network-section"); + // Network section writer.writeStartElement("div"); writer.writeAttribute("class", "network"); @@ -991,7 +1046,7 @@ QByteArray DebugServerHandler::createDebugXmlDocument() //: The network section description of the debug interface writer.writeTextElement("p", tr("This section allows you to perform different network connectivity tests in order " - "to find out if the device nymea is running on is online and has full network connectivity.")); + "to find out if the device where nymea is running has full network connectivity.")); // Ping section @@ -1000,6 +1055,8 @@ QByteArray DebugServerHandler::createDebugXmlDocument() writer.writeTextElement("h3", tr("Ping nymea.io")); writer.writeEmptyElement("hr"); + writer.writeTextElement("p", tr("This test makes four ping attempts to the nymea.io server.")); + // Start ping button writer.writeStartElement("button"); writer.writeAttribute("class", "button"); @@ -1022,10 +1079,13 @@ QByteArray DebugServerHandler::createDebugXmlDocument() // Dig section writer.writeEmptyElement("hr"); - //: The ping section of the debug interface + //: The DNS lookup section of the debug interface writer.writeTextElement("h3", tr("DNS lookup for nymea.io")); writer.writeEmptyElement("hr"); + writer.writeTextElement("p", tr("This test makes a dynamic name server lookup for nymea.io.")); + + // Start dig button writer.writeStartElement("button"); writer.writeAttribute("class", "button"); @@ -1045,19 +1105,21 @@ QByteArray DebugServerHandler::createDebugXmlDocument() writer.writeCharacters(""); writer.writeEndElement(); // textarea - // Dig section + // Trace section writer.writeEmptyElement("hr"); - //: The ping section of the debug interface + //: The trace section of the debug interface writer.writeTextElement("h3", tr("Trace path to nymea.io")); writer.writeEmptyElement("hr"); + writer.writeTextElement("p", tr("This test showes the trace path from the nymea device to the nymea.io server.")); + // Start tracepath button writer.writeStartElement("button"); writer.writeAttribute("class", "button"); writer.writeAttribute("type", "button"); writer.writeAttribute("id", "tracePathButton"); writer.writeAttribute("onClick", "startTracePathTest()"); - //: The ping button text of the debug interface + //: The trace path button text of the debug interface writer.writeCharacters(tr("Start trace path test")); writer.writeEndElement(); // button @@ -1072,6 +1134,14 @@ QByteArray DebugServerHandler::createDebugXmlDocument() writer.writeEndElement(); // div network + writer.writeEndElement(); // network-section + + + // --------------------------------------------------------------------------- + writer.writeStartElement("div"); + writer.writeAttribute("class", "tabcontent"); + writer.writeAttribute("id", "logs-section"); + // Logs stream writer.writeStartElement("div"); writer.writeAttribute("class", "logstream"); @@ -1080,29 +1150,19 @@ QByteArray DebugServerHandler::createDebugXmlDocument() writer.writeTextElement("h2", tr("Server live logs")); writer.writeEmptyElement("hr"); - // Start stream button + writer.writeTextElement("p", tr("This section allowes you to see the live logs of the nymea server.")); + + // Toggle log button writer.writeStartElement("button"); writer.writeAttribute("class", "button"); writer.writeAttribute("type", "button"); - writer.writeAttribute("id", "connectWebsocketButton"); - writer.writeAttribute("onClick", "connectWebsocket()"); + writer.writeAttribute("id", "toggleLogsButton"); + writer.writeAttribute("onClick", "toggleWebsocketConnection()"); //: The connect button for the log stream of the debug interface - writer.writeCharacters(tr("Start server live logs")); + writer.writeCharacters(tr("Start logs")); writer.writeEndElement(); // button - // Stop stream button - writer.writeStartElement("button"); - writer.writeAttribute("class", "button"); - writer.writeAttribute("type", "button"); - writer.writeAttribute("id", "disconnectWebsocketButton"); - writer.writeAttribute("onClick", "disconnectWebsocket()"); - writer.writeAttribute("disabled", "true"); - //: The disconnect button for the log stream of the debug interface - writer.writeCharacters(tr("Stop server live logs")); - writer.writeEndElement(); // button - - - // Dig output + // Logs output writer.writeStartElement("textarea"); writer.writeAttribute("class", "console-textarea"); writer.writeAttribute("id", "logsTextArea"); @@ -1111,6 +1171,7 @@ QByteArray DebugServerHandler::createDebugXmlDocument() writer.writeCharacters(""); writer.writeEndElement(); // textarea + writer.writeEndElement(); // logs-section writer.writeEndElement(); // div body