webui: console.js: Change to use AJAX instead of WebSocket messages

Also support modal dialog for confirmation and operation results.

2 files changed, 65 insertions, 42 deletions

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");