WebPanel: implemented log management user interface.

DnsServerCore/www/css/main.css

@@ -183,3 +183,22 @@ label {
     .zone-viewer-pane .resource-record {
         background-color: #f5f5f5;
     }
+
+.log-list-pane {
+    float: left;
+    width: 15%;
+}
+
+.logs {
+    font-size: 12px;
+}
+
+    .logs .log {
+        padding: 2px;
+    }
+
+.log-viewer-pane {
+    float: right;
+    width: 84%;
+    display: none;
+}

DnsServerCore/www/index.html

@@ -88,6 +88,7 @@
                                 <li id="mainPanelTabListCachedZones" role="presentation"><a href="#mainPanelTabPaneCachedZones" aria-controls="mainPanelTabPaneCachedZones" role="tab" data-toggle="tab" onclick="return false;">Cached Zones</a></li>
                                 <li id="mainPanelTabListDnsClient" role="presentation"><a href="#mainPanelTabPaneDnsClient" aria-controls="mainPanelTabPaneZones" role="tab" data-toggle="tab" onclick="return false;">DNS Client</a></li>
                                 <li id="mainPanelTabListSettings" role="presentation"><a href="#mainPanelTabPaneSettings" aria-controls="mainPanelTabPaneSettings" role="tab" data-toggle="tab" onclick="return loadDnsSettings();">Settings</a></li>
+                                <li id="mainPanelTabListLogs" role="presentation"><a href="#mainPanelTabPaneLogs" aria-controls="mainPanelTabPaneLogs" role="tab" data-toggle="tab" onclick="return refreshLogFilesList();">Logs</a></li>
                             </ul>
 
                             <div class="tab-content">
@@ -478,6 +479,36 @@
 
                                 </div>
 
+                                <div id="mainPanelTabPaneLogs" role="tabpanel" class="tab-pane" style="padding: 10px 0 0 0;">
+
+                                    <div class="well well-sm log-list-pane">
+                                        <div id="lstLogFiles" class="logs">
+                                            <div class="log"><a href="#" onclick="return viewLog('20171012');">20171012</a></div>
+                                        </div>
+                                    </div>
+
+                                    <div id="divLogViewer" class="log-viewer-pane">
+                                        <div class="panel panel-default">
+                                            <div class="panel-heading" style="height: 36px; padding: 4px 6px;">
+                                                <div id="txtLogViewerTitle" style="float: left; padding: 4px;">20171012</div>
+                                                <div style="float: right;">
+                                                    <button type="button" class="btn btn-default" data-loading-text="Download" onclick="return downloadLog();" style="font-size: 12px; padding: 4px 6px;">Download</button>
+                                                    <button id="btnDeleteLog" type="button" class="btn btn-danger" data-loading-text="Delete" onclick="return deleteLog();" style="font-size: 12px; padding: 4px 6px;">Delete</button>
+                                                </div>
+                                            </div>
+
+                                            <div class="panel-body">
+                                                <div id="divLogViewerLoader" style="margin-top: 20px; height: 400px;"></div>
+
+                                                <pre id="preLogViewerBody" style="display: none;">
+                                                    
+                                                </pre>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                </div>
+
                             </div>
                         </div>
 

DnsServerCore/www/js/common.js

@@ -138,6 +138,78 @@ function HTTPRequest(url, data, success, error, invalidToken, objAlertPlaceholde
     return successFlag;
 }
 
+function HTTPGetFileRequest(url, success, error, objAlertPlaceholder, objLoaderPlaceholder, dontHideAlert) {
+
+    var async = false;
+    var finalUrl;
+
+    finalUrl = arguments[0].url;
+
+    if (success != null)
+        async = true;
+    else
+        if (arguments[0].success != null) {
+            async = true;
+            success = arguments[0].success;
+        }
+
+    if (error == null)
+        error = arguments[0].error;
+
+    if (objAlertPlaceholder == null)
+        objAlertPlaceholder = arguments[0].objAlertPlaceholder;
+
+    if (dontHideAlert == null)
+        dontHideAlert = arguments[0].dontHideAlert;
+
+    if ((dontHideAlert == null) || !dontHideAlert)
+        hideAlert(objAlertPlaceholder);
+
+    if (objLoaderPlaceholder == null)
+        objLoaderPlaceholder = arguments[0].objLoaderPlaceholder;
+
+    if (objLoaderPlaceholder != null)
+        objLoaderPlaceholder.html("<div style='width: 64px; height: inherit; margin: auto;'><div style='height: inherit; display: table-cell; vertical-align: middle;'><img src='/img/loader.gif'/></div></div>");
+
+    var successFlag = false;
+
+    $.ajax({
+        type: "GET",
+        url: finalUrl,
+        async: async,
+        cache: false,
+        success: function (response, status, jqXHR) {
+
+            if (objLoaderPlaceholder != null)
+                objLoaderPlaceholder.html("");
+
+            if (success == null)
+                successFlag = true;
+            else
+                success(response);
+        },
+        error: function (jqXHR, textStatus, errorThrown) {
+
+            if (objLoaderPlaceholder != null)
+                objLoaderPlaceholder.html("");
+
+            if (error != null)
+                error();
+
+            var msg;
+
+            if ((textStatus === "error") && (errorThrown === ""))
+                msg = "Unable to connect to the server. Please try again."
+            else
+                msg = textStatus + " - " + errorThrown;
+
+            showAlert("danger", "Error!", msg, objAlertPlaceholder);
+        }
+    });
+
+    return successFlag;
+}
+
 function showAlert(type, title, message, objAlertPlaceholder) {
     var alertHTML = "<div class=\"alert alert-" + type + "\">\
     <button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>\

DnsServerCore/www/js/main.js

@@ -465,7 +465,7 @@ function refreshZonesList(hideLoader) {
             for (var i = 0; i < zones.length; i++) {
                 var zoneName = htmlEncode(zones[i].zoneName);
 
-                list += "<div class=\"zone\"><a href=\"#\" onclick=\"return viewZone('" + zoneName + "', " + zones[i].disabled + ");\">" + zoneName + "</a></div>"
+                list += "<div class=\"zone\"><a href=\"#\" onclick=\"return viewZone('" + zoneName + "', " + zones[i].disabled + ");\"" + (zones[i].disabled ? "style=\"color: #ff0000 !important\"" : "") + ">" + zoneName + "</a></div>"
             }
 
             lstZones.html(list);
@@ -1421,3 +1421,99 @@ function resolveQuery(importRecords) {
 
     return false;
 }
+
+function refreshLogFilesList() {
+
+    var lstLogFiles = $("#lstLogFiles");
+
+    HTTPRequest({
+        url: "/api/listLogs?token=" + token,
+        success: function (responseJSON) {
+            var logFiles = responseJSON.response.logFiles;
+
+            var list = "";
+
+            for (var i = 0; i < logFiles.length; i++) {
+                var logFile = logFiles[i];
+
+                list += "<div class=\"log\"><a href=\"#\" onclick=\"return viewLog('" + logFile.fileName + "');\">" + logFile.fileName + " [" + logFile.size + "]</a></div>"
+            }
+
+            lstLogFiles.html(list);
+        },
+        invalidToken: function () {
+            showPageLogin();
+        },
+        objLoaderPlaceholder: lstLogFiles
+    });
+
+    return false;
+}
+
+function viewLog(logFile) {
+
+    var divLogViewer = $("#divLogViewer");
+    var txtLogViewerTitle = $("#txtLogViewerTitle");
+    var divLogViewerLoader = $("#divLogViewerLoader");
+    var preLogViewerBody = $("#preLogViewerBody");
+
+    txtLogViewerTitle.text(logFile);
+
+    preLogViewerBody.hide();
+    divLogViewerLoader.show();
+    divLogViewer.show();
+
+    HTTPGetFileRequest({
+        url: "/log/" + logFile + "?token=" + token,
+        success: function (response) {
+
+            divLogViewerLoader.hide();
+
+            preLogViewerBody.text(response);
+            preLogViewerBody.show();
+        },
+        objLoaderPlaceholder: divLogViewerLoader
+    });
+
+    return false;
+}
+
+function downloadLog() {
+
+    var logFile = $("#txtLogViewerTitle").text();
+
+    window.open("/log/" + logFile + "?token=" + token, "_blank");
+
+    return false;
+}
+
+function deleteLog() {
+
+    var logFile = $("#txtLogViewerTitle").text();
+
+    if (!confirm("Are you sure you want to permanently delete the log file '" + logFile + "'?"))
+        return false;
+
+    var btn = $("#btnDeleteLog").button('loading');
+
+    HTTPRequest({
+        url: "/api/deleteLog?token=" + token + "&log=" + logFile,
+        success: function (responseJSON) {
+            refreshLogFilesList();
+
+            $("#divLogViewer").hide();
+            btn.button('reset');
+
+            showAlert("success", "Log Deleted!", "Log file was deleted successfully.");
+        },
+        error: function () {
+            btn.button('reset');
+        },
+        invalidToken: function () {
+            btn.button('reset');
+            showPageLogin();
+        }
+    });
+
+    return false;
+}