From aa34cd9d5fc82442d852c3a89e09b0bb978a4096 Mon Sep 17 00:00:00 2001 From: Aaron LI Date: Thu, 17 Nov 2016 22:33:44 +0800 Subject: webui: console.js: Change to use AJAX instead of WebSocket messages Also support modal dialog for confirmation and operation results. --- fg21sim/webui/static/js/console.js | 105 +++++++++++++++++++++-------------- fg21sim/webui/static/js/websocket.js | 2 +- 2 files changed, 65 insertions(+), 42 deletions(-) (limited to 'fg21sim') diff --git a/fg21sim/webui/static/js/console.js b/fg21sim/webui/static/js/console.js index 1ee323b..69b475a 100644 --- a/fg21sim/webui/static/js/console.js +++ b/fg21sim/webui/static/js/console.js @@ -69,7 +69,7 @@ var updateTaskStatus = function (status) { /** * Append the logging messages to the "#log-messages" panel box * - * @param {Object} msg - Server pushed logging message of "action=log" + * @param {Object} msg - Server pushed logging message */ var appendLogMessage = function (msg) { var log_icons = { @@ -101,6 +101,7 @@ var appendLogMessage = function (msg) { */ var toggleLogMessages = function (level) { var valid_levels = ["debug", "info", "warning", "error", "critical"]; + var status = null; if (! level) { console.error("toggleLogMessages: level not specified"); } else if ($.inArray(level.toLowerCase(), valid_levels) == -1) { @@ -108,7 +109,6 @@ var toggleLogMessages = function (level) { } else { level = level.toLowerCase(); var logbox = $("#log-messages"); - var status = null; if (typeof logbox.data(level) === "undefined") { // No stored display status, assuming true: show status = true; @@ -124,8 +124,8 @@ var toggleLogMessages = function (level) { logbox.data(level, status); console.log("Toggled", level, "logging messages:", status ? "show" : "hide"); - return status; } + return status; }; @@ -137,71 +137,78 @@ var deleteLogMessages = function () { console.warn("Deleted all logging messages!"); }; + /** * Get the task status from the server * - * @param {Object} ws - The opened WebSocket object through which to send - * the request. + * @param {String} url - The URL that handles the "console" AJAX requests. */ -var getServerTaskStatus = function (ws) { - var msg = {type: "console", action: "get_status"}; - ws.send(JSON.stringify(msg)); +var getServerTaskStatus = function (url) { + return $.getJSON(url) + .fail(function (error) { + var modalData = {}; + modalData.icon = "times-circle"; + modalData.message = "Failed to get the task status!"; + modalData.code = error.status; + modalData.reason = error.statusText; + showModalConsole(modalData); + }); }; /** * Request to start the task on the server. - */ -var startServerTask = function (ws, time) { - time = typeof time !== "undefined" ? time : 5; - var msg = {type: "console", action: "start"}; - ws.send(JSON.stringify(msg)); -}; - -/** - * Request to start the test task on the server. * - * @param {Number} time - Time in seconds for the sleep test task on server + * @param {String} [task=null] - Name of the task to be started. + * If `null`, then start the default task. + * @param {Object} [kwargs={}] - Keyword arguments will be passed to the task */ -var startServerTaskTest = function (ws, time) { - time = typeof time !== "undefined" ? time : 5; - var msg = {type: "console", action: "start_test", time: time}; - ws.send(JSON.stringify(msg)); +var startServerTask = function (url, task, kwargs) { + task = typeof task !== "undefined" ? task : null; + kwargs = typeof kwargs !== "undefined" ? kwargs : {}; + var data = {action: "start", task: task, kwargs: kwargs}; + return $.postJSON(url, data) + .fail(function (error) { + var modalData = {}; + modalData.icon = "times-circle"; + modalData.message = "Failed to start the task!"; + modalData.code = error.status; + modalData.reason = error.statusText; + showModalConsole(modalData); + }); }; /** - * Handle the received message of type "console" + * Handle the received message of type "console" pushed through the WebSocket */ -var handleMsgConsole = function (msg) { - if (msg.action === "log") { +var handleWebSocketMsgConsole = function (msg) { + if (msg.subtype === "log") { appendLogMessage(msg); - } - else if (msg.action === "push") { - // Update the task status - updateTaskStatus(msg.status); - } - else if (msg.success) { - setFormConfigs(msg.data, msg.errors); - } - else { - console.error("WebSocket 'console' request failed:", msg.error); - // TODO: add error code support and handle each specific error ... + } else { + console.warn("WebSocket: received message:", msg); } }; $(document).ready(function () { + // URL to handle the "console" AJAX requests + var ajax_url = "/ajax/console"; + /** * Start the simulation task on the server */ $("#task-start").on("click", function () { if ($("#conf-status").data("validity")) { updateTaskStatus({running: true, finished: false}); - startServerTask(g_ws); - getServerTaskStatus(g_ws); + startServerTask(ajax_url) + .done(function () { + getServerTaskStatus(ajax_url) + .done(function (response) { + updateTaskStatus(response.status); + }); + }); } else { - $("#console-invalid-configs").modal(); var modalData = {}; modalData.icon = "times-circle"; modalData.message = ("Exist invalid configuration values! " + @@ -233,7 +240,23 @@ $(document).ready(function () { $(this).fadeTo("fast", status ? 1.0 : 0.5); }); $("#log-delete").on("click", function () { - // TODO: add a confirmation dialog - deleteLogMessages(); + var modalData = {}; + modalData.icon = "warning"; + modalData.message = ("Are you sure to delete all logging messages?"); + modalData.buttons = [ + { + text: "Cancel", + click: function () { $.modal.close(); } + }, + { + text: "Delete!", + "class": "button-warning", + click: function () { + $.modal.close(); + deleteLogMessages(); + } + }, + ]; + showModalConsole(modalData); }); }); diff --git a/fg21sim/webui/static/js/websocket.js b/fg21sim/webui/static/js/websocket.js index 45d550d..b0fe1b9 100644 --- a/fg21sim/webui/static/js/websocket.js +++ b/fg21sim/webui/static/js/websocket.js @@ -135,7 +135,7 @@ var connectWebSocket = function (url) { handleWebSocketMsgConfigs(msg); } else if (msg.type === "console") { - handleMsgConsole(msg); + handleWebSocketMsgConsole(msg); } else if (msg.type === "results") { console.error("NotImplementedError"); -- cgit v1.2.2