[WebUI] Rework webui

- Remove uploaders as they are utterly broken
- Simplify actions loading
- Rework interface loading

diff --git a/interface/css/rspamd.css b/interface/css/rspamd.css
index 87ecc3bb3b3f85f34d98204ef3e78eb059f67682..fd73d41ce650dc7fdee044a018b2cc425540a3e8 100644 (file)
--- a/interface/css/rspamd.css
+++ b/interface/css/rspamd.css
@@ -302,7 +302,7 @@ input::-webkit-inner-spin-button {
        height:200px;
        }
 .scan-textarea {
-       height:400px;
+       height:300px;
        }
 .stat-boxes {
        overflow:hidden !important;

diff --git a/interface/index.html b/interface/index.html
index a009f7060f8b2b599d5bfbc285e45c23904f7212..cef29803f032e48d83ece48808b8bbd4c079ee2a 100644 (file)
--- a/interface/index.html
+++ b/interface/index.html
@@ -6,7 +6,6 @@
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
-       <link href="//cdnjs.cloudflare.com/ajax/libs/file-uploader/3.7.0/fineuploader.min.css" rel="stylesheet">
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="./css/datatables.min.css"/>
        <link rel="stylesheet" type="text/css" href="//cdn.rawgit.com/moisseev/D3Evolution/fb6ea62c43e26e728b48a43012fb796c5ab6689c/d3evolution.css">
@@ -116,8 +115,7 @@
                                        <div class="widget-title">
                                                <span class="icon"><i class="glyphicon glyphicon-tasks"></i></span><h5>Actions</h5>
                                        </div>
-                                       <div class="widget-content actions-content" id="actionsBody">
-                                       </div>
+                                       <div class="widget-content actions-content" id="actionsBody"></div>
                                </div>
                                <div class="widget-box">
                                        <div class="widget-title">
@@ -148,20 +146,6 @@
                                                <span class="icon"><i class="glyphicon glyphicon-file"></i></span>
                                                <h5>Learn RSPAMD</h5>
                                        </div>
-                                       <div class="widget-content">
-                                               <div class="row">
-                                                       <form class="col-md-6 upload-form" id="uploadSpamForm">
-                                                               <h5>Upload SPAM examples:</h5>
-                                                               <button id="uploadSpamTrigger" class="btn pull-right btn-upload-trigger"><i class="glyphicon glyphicon-upload"></i> Upload files</button>
-                                                               <div id="uploadSpamFiles"></div>
-                                                       </form>
-                                                       <form class="col-md-6 upload-form" id="uploadHamForm">
-                                                               <h5>Upload HAM examples:</h5>
-                                                               <button id="uploadHamTrigger" class="btn pull-right btn-upload-trigger"><i class="glyphicon glyphicon-upload"></i> Upload files</button>
-                                                               <div id="uploadHamFiles"></div>
-                                                       </form>
-                                               </div>
-                                       </div>
                                        <div class="widget-content">
                                                <div class="row">
                                                        <form class="col-md-6">
@@ -175,29 +159,6 @@
                                                                <p><button class="btn btn-default pull-right" data-upload="ham"><i class="glyphicon glyphicon-upload"></i> Upload text</button></p>
                                                        </form>
                                                </div>
-                                               <div class="row">
-                                                               <form class="col-md-6 upload-form" id="uploadFuzzyForm">
-                                                                       <h5>Upload Fuzzy examples:</h5>
-                                                                       <div class="row">
-                                                                               <label class="pull-left">
-                                                                                       Flag
-                                                                               </label>
-                                                                               <div class="pull-right col-md-10">
-                                                                                       <input id="fuzzyFlagUpload" class="slider" type="slider" value="0"/>
-                                                                               </div>
-                                                                       </div>
-                                                                       <div class="row">
-                                                                               <label class="pull-left">
-                                                                                       Weight
-                                                                               </label>
-                                                                               <div class="pull-right col-md-10">
-                                                                                       <input id="fuzzyWeightUpload" class="slider" type="slider" value="0"/>
-                                                                               </div>
-                                                                       </div>
-                                                                       <button id="uploadFuzzyTrigger" class="btn pull-right btn-upload-trigger"><i class="glyphicon glyphicon-upload"></i> Upload files</button>
-                                                                       <div id="uploadFuzzyFiles"></div>
-                                                               </form>
-                                               </div>
                                                <div class="row">
                                                        <form class="col-md-6">
                                                                <h5>Insert raw Fuzzy storage:</h5>
@@ -207,7 +168,7 @@
                                                                                Flag
                                                                </label>
                                                                        <div class="pull-right col-md-10">
-                                                                               <input id="fuzzyFlagText" class="slider" type="slider" value="0"/>
+                                                                               <input id="fuzzyFlagText" class="slider" type="slider" value="1"/>
                                                                        </div>
                                                        </div>
                                                        <div class="row">
@@ -215,7 +176,7 @@
                                                                                Weight
                                                                </label>
                                                                        <div class="pull-right col-md-10">
-                                                                               <input id="fuzzyWeightText" class="slider" type="slider" value="0"/>
+                                                                               <input id="fuzzyWeightText" class="slider" type="slider" value="1"/>
                                                                        </div>
                                                        </div>
                                                                <p><button class="btn btn-default pull-right" data-upload="fuzzy"><i class="glyphicon glyphicon-upload"></i> Upload text</button></p>
@@ -357,7 +318,6 @@
 <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
-<script src="//cdnjs.cloudflare.com/ajax/libs/file-uploader/3.7.0/fineuploader.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
 <script src="./js/d3pie.min.js"></script>
 <script src="//cdn.rawgit.com/moisseev/D3Evolution/7789381ae8108690fc9903ddbcb74cfa562a9e13/d3evolution.js"></script>

diff --git a/interface/js/rspamd.js b/interface/js/rspamd.js
index bf860b238a5300bc21d72e8955f935b9ffc6a593..a7972caa6a79d7612857520f4c0eab71d2be4106 100644 (file)
--- a/interface/js/rspamd.js
+++ b/interface/js/rspamd.js
@@ -549,6 +549,12 @@
         // }
         // @get history log
         function getHistory() {
+
+            if (history) {
+                history.destroy();
+                $('#historyLog').children('tbody').remove();
+            }
+
             var items = [];
             $.ajax({
                 dataType: 'json',
@@ -671,8 +677,10 @@
         }
         // @update history log
         $('#resetHistory').on('click', function () {
-            history.destroy();
-            $('#historyLog').children('tbody').remove();
+            if (history) {
+                history.destroy();
+                $('#historyLog').children('tbody').remove();
+            }
             $.ajax({
                 dataType: 'json',
                 type: 'GET',
@@ -688,143 +696,12 @@
                 }
             });
         });
+
         // @reset history log
         $('#updateHistory').on('click', function () {
-            history.destroy();
-            $('#historyLog').children('tbody').remove();
             getHistory();
         });
-        // @spam upload form
-        function createUploaders() {
-            var spamUploader = new qq.FineUploader({
-                element: $('#uploadSpamFiles')[0],
-                request: {
-                    endpoint: 'learnspam',
-                    customHeaders: {
-                        'Password': getPassword()
-                    }
-                },
-                validation: {
-                    allowedExtensions: ['eml', 'msg', 'txt', 'html'],
-                    sizeLimit: 52428800
-                },
-                autoUpload: false,
-                text: {
-                    uploadButton: '<i class="glyphicon glyphicon-plus glyphicon-white"></i> Select Files'
-                },
-                retry: {
-                    enableAuto: false
-                },
-                template: '<div class="qq-uploader">' +
-                    '<pre class="qq-upload-drop-area span12"><span>{dragZoneText}</span></pre>' +
-                    '<div class="qq-upload-button btn btn-danger">{uploadButtonText}</div>' +
-                    '<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' +
-                    '<ul class="qq-upload-list"></ul>' +
-                    '</div>',
-                classes: {
-                    success: 'alert-success',
-                    fail: 'alert-error'
-                },
-                debug: true,
-                callbacks: {
-                    onError: function () {
-                        alertMessage('alert-error', 'Cannot upload data');
-                    }
-                }
-            });
-            var hamUploader = new qq.FineUploader({
-                element: $('#uploadHamFiles')[0],
-                request: {
-                    endpoint: 'learnham',
-                    customHeaders: {
-                        'Password': getPassword()
-                    }
-                },
-                validation: {
-                    allowedExtensions: ['eml', 'msg', 'txt', 'html'],
-                    sizeLimit: 52428800
-                },
-                autoUpload: false,
-                text: {
-                    uploadButton: '<i class="glyphicon glyphicon-plus glyphicon-white"></i> Select Files'
-                },
-                retry: {
-                    enableAuto: true
-                },
-                template: '<div class="qq-uploader">' +
-                    '<pre class="qq-upload-drop-area span12"><span>{dragZoneText}</span></pre>' +
-                    '<div class="qq-upload-button btn btn-success">{uploadButtonText}</div>' +
-                    '<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' +
-                    '<ul class="qq-upload-list"></ul>' +
-                    '</div>',
-                classes: {
-                    success: 'alert-success',
-                    fail: 'alert-error'
-                },
-                debug: true,
-                callbacks: {
-                    onError: function () {
-                        alertMessage('alert-error', 'Cannot upload data');
-                    }
-                }
-            });
-            var data = {
-                flag: $('#fuzzyFlagUpload').val(),
-                weight: $('#fuzzyWeightUpload').val()
-            };
-            var fuzzyUploader = new qq.FineUploader({
-                element: $('#uploadFuzzyFiles')[0],
-                request: {
-                    endpoint: 'learnfuzzy',
-                    customHeaders: {
-                        'Password': getPassword()
-                    }
-                },
-                validation: {
-                    allowedExtensions: ['eml', 'msg', 'txt', 'html', 'pdf'],
-                    sizeLimit: 52428800
-                },
-                autoUpload: false,
-                text: {
-                    uploadButton: '<i class="glyphicon glyphicon-plus glyphicon-white"></i> Select Files'
-                },
-                retry: {
-                    enableAuto: true
-                },
-                template: '<div class="qq-uploader">' +
-                    '<pre class="qq-upload-drop-area span12"><span>{dragZoneText}</span></pre>' +
-                    '<div class="qq-upload-button btn btn-success">{uploadButtonText}</div>' +
-                    '<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' +
-                    '<ul class="qq-upload-list"></ul>' +
-                    '</div>',
-                classes: {
-                    success: 'alert-success',
-                    fail: 'alert-error'
-                },
-                debug: true,
-                callbacks: {
-                    onError: function () {
-                        alertMessage('alert-error', 'Cannot upload data');
-                    }
-                }
-            });
-            // @upload spam button
-            $('#uploadSpamTrigger').on('click', function () {
-                spamUploader.uploadStoredFiles();
-                return false;
-            });
-            // @upload ham button
-            $('#uploadHamTrigger').on('click', function () {
-                hamUploader.uploadStoredFiles();
-                return false;
-            });
-            // @upload fuzzy button
-            $('#uploadFuzzyTrigger').on('click', function () {
-                fuzzyUploader.uploadStoredFiles();
-                uploadText(data, 'fuzzy');
-                return false;
-            });
-        }
+
         // @upload text
         function uploadText(data, source) {
             if (source === 'spam') {
@@ -1033,10 +910,11 @@
                             min = item.value;
                         }
                     });
-                    $('<form/>', { id: 'actionsForm', class: '', html: items.join('') }).appendTo('#actionsBody');
-                    $('<br><div class="form-group">' +
+
+                    $('#actionsBody').html('<form id="actionsForm">' + items.join('') +
+                        '<br><div class="form-group">' +
                         '<button class="btn btn-primary" ' +
-                        'type="submit">Save actions</button></div>').appendTo('#actionsForm');
+                        'type="submit">Save actions</button></div></form>');
                 }
             });
         }
@@ -1194,17 +1072,21 @@
             statWidgets();
             $('#mainUI').show();
             $('#progress').show();
-            getActions();
-            getMaps();
-            createUploaders();
-            getSymbols();
-            getHistory();
+
             getChart();
             initGraph();
             $('#progress').hide();
             $(disconnect).show();
         }
+
         connectRSPAMD();
+
+        $('#configuration_nav').bind('click', function (e) {
+            getActions();
+            getMaps();
+            getSymbols();
+        });
+
         $(document).ajaxStart(function () {
             $('#navBar').addClass('loading');
         });
@@ -1217,5 +1099,8 @@
         $('#throughput_nav').bind('click', function () {
             getGraphData(selected.selData);
         });
+        $('#history_nav').bind('click', function() {
+            getHistory();
+        });
     });
 })();