György Kohut avatar György Kohut committed 94f414c

refactor stats page modules

Comments (0)

Files changed (5)

hbwebui/static/js/hbwebui/mod_base.js

+mod_base = (function() {
+    
+    var timeFormat = d3.time.format("%Y-%m-%d %H:%M");
+    function convertTimestamp(ts) { return ts*1000; }
+    function renderTimestamp(ts) { return timeFormat(new Date(convertTimestamp(ts))); }
+    
+    return {
+        timeFormat: timeFormat,
+        convertTimestamp: convertTimestamp,
+        renderTimestamp: renderTimestamp
+    };
+})();

hbwebui/static/js/hbwebui/mod_stats_base.js

+mod_stats_base = (function() {
+    
+    function base(container, url) {
+        this.container = container;
+        this.url = url;
+    }
+    base.prototype = {
+        render: function() {
+            $.getJSON(this.url, this.renderer.bind(this));
+        },
+    };
+    
+    
+    function summary(container, url) {
+        base.call(this, container, url);
+                
+        this.tpl = ''
+    }
+    summary.prototype = utils.extend(
+        base,
+        {
+            pluralize: function pluralize(n, s, p) {
+                if (n == 1)
+                    return s;
+                else {
+                    if (p !== undefined)
+                        return p;
+                    else
+                        return s + 's';
+                }
+            },
+            
+            renderer: function(data) {
+                var c = $(this.container).empty();
+                
+                data.pluralize = this.pluralize;                
+                c.eq(0).html(_.template(this.tpl, data));
+            }
+        }
+    );
+    
+    
+    function table(container, url) {
+        base.call(this, container, url)
+        
+        this.dtConfig = {
+            'bPaginate': false,
+            'bLengthChange': false,
+            'bFilter': false,
+            'bSort': true,
+            'bInfo': false,
+            'bAutoWidth': false,
+            'sDom': '',
+            //'sDom': "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
+            'sPaginationType': 'bootstrap',
+        };
+        this.dataTable = null;
+    }
+    table.prototype = utils.extend(
+        base,
+        {
+            renderer: function(data) {
+                var c = $(this.container).empty();
+                var t = $('<table>').addClass('table').appendTo(c);
+                
+                this.dtConfig.aaData = data;
+                this.dataTable = t.dataTable(this.dtConfig);
+            }
+        }
+    );
+    
+    
+    return {
+        summary: summary,
+        table: table
+    };
+})();

hbwebui/static/js/hbwebui/mod_stats_binaries.js

+mod_stats_binaries = (function() {
+    
+    function summary(container, url) {
+        mod_stats_base.summary.call(this, container, url);
+                
+        this.tpl = this.tpl = '\
+            <h3><%= n_count %> <% print(pluralize(n_ident, "Binary", "Binaries")) %></h3>\
+            <ul>\
+                <li>collected by <%= n_ident %> <% print(pluralize(n_ident, "ident")) %></li>\
+                <li>on <%= n_target_port %> target <% print(pluralize(n_target_port, "port")) %></li>\
+                <li>from <%= n_source_ip %> source <% print(pluralize(n_source_ip, "IP")) %></li>\
+                <li>between <%= ts_first %> - <%= ts_last %></li>\
+                <li>in <%= n_total %> <% print(pluralize(n_total, "attack")) %> in total</li>\
+            </ul>';
+    }
+    summary.prototype = utils.extend(
+        mod_stats_base.summary,
+        {
+            renderer: function(data) {
+                data.ts_first = mod_base.renderTimestamp(data.ts_first);
+                data.ts_last = mod_base.renderTimestamp(data.ts_last);
+                mod_stats_base.summary.prototype.renderer.call(this, data);
+            }
+        }
+    );
+    
+    
+    function table(container, url) {
+        mod_stats_base.table.call(this, container, url);
+        
+        this.dtConfig = $.extend(
+            this.dtConfig,
+            {
+                'aoColumnDefs': [
+                    { 'sTitle': 'MD5', 'mDataProp': 'md5', 'sType': 'string', 'aTargets': [0], 'fnRender': function(o, val) { return '<a href="#">'+val+'</a>'; }},
+                    { 'sTitle': '# Attacks', 'mDataProp': 'n_count', 'sType': 'numeric', 'aTargets': [1] },
+                    { 'sTitle': '# Idents', 'mDataProp': 'n_ident', 'sType': 'numeric', 'aTargets': [2] },
+                    { 'sTitle': '# Source IPs', 'mDataProp': 'n_source_ip', 'sType': 'numeric', 'aTargets': [3] },
+                    { 'sTitle': '# Target Ports', 'mDataProp': 'n_target_port', 'sType': 'numeric', 'aTargets': [4] },
+                    { 'sTitle': 'Last', 'mDataProp': 'ts_last', 'sType': null, 'aTargets': [5], 'fnRender': function(o, val) { return mod_base.renderTimestamp(val); }},
+                    { 'sTitle': 'First', 'mDataProp': 'ts_first', 'sType': null, 'aTargets': [6], 'fnRender': function(o, val) { return mod_base.renderTimestamp(val); }}
+                ],
+                'aaSorting': [
+                    [1, 'desc'],
+                ]
+            }
+        );
+    }
+    table.prototype = utils.extend(mod_stats_base.table);
+    
+    
+    return {
+        summary: summary,
+        table: table
+    };
+})();

hbwebui/static/js/hbwebui/utils.js

+utils = (function() {
+    
+    function extend(base, methods) {
+            var proto;
+            function Extended() {};
+            
+            Extended.prototype = base.prototype;
+            proto = new Extended();
+                        
+            for (var m in methods) {
+                proto[m] = methods[m];
+            }
+            
+            return proto;
+    }
+    
+    return {
+        extend: extend
+    };
+})();

hbwebui/templates/stats_binaries.html

 {% load staticfiles %}
 
 <script src="{% static "js/lodash.min.js" %}"></script>
+<script src="{% static "js/hbwebui/utils.js" %}"></script>
+<script src="{% static "js/hbwebui/mod_base.js" %}"></script>
+<script src="{% static "js/hbwebui/mod_stats_base.js" %}"></script>
+<script src="{% static "js/hbwebui/mod_stats_binaries.js" %}"></script>
 
 
 <title>Binaries Stats</title>
 
 
 <script>
-    function Module_Stats_Binaries_Table(container) {
-        this.container = container;
-        this.table = null;
-        
-        var t = $('<table>').addClass('table').appendTo(container);
-        
-        var timeformat = d3.time.format("%Y-%m-%d %H:%M:%S");
-        function renderTimeStamp(ts) {
-            return timeformat(new Date(ts*1000));
-        }
-        
-        this.init = function(data) {            
-            this.table = t.dataTable( {
-                'bPaginate': false,
-                'bLengthChange': false,
-                'bFilter': false,
-                'bSort': true,
-                'bInfo': false,
-                'bAutoWidth': false,
-                'sDom': '',
-                //'sDom': "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
-                'sPaginationType': 'bootstrap',
-                
-                'aaData': data,
-                'aoColumnDefs': [
-                    { 'sTitle': 'MD5', 'mDataProp': 'md5', 'sType': 'string', 'aTargets': [0], 'fnRender': function(o, val) { return '<a href="#">'+val+'</a>'; }},
-                    { 'sTitle': '# Attacks', 'mDataProp': 'n_count', 'sType': 'numeric', 'aTargets': [1] },
-                    { 'sTitle': '# Idents', 'mDataProp': 'n_ident', 'sType': 'numeric', 'aTargets': [2] },
-                    { 'sTitle': '# Source IPs', 'mDataProp': 'n_source_ip', 'sType': 'numeric', 'aTargets': [3] },
-                    { 'sTitle': '# Target Ports', 'mDataProp': 'n_target_port', 'sType': 'numeric', 'aTargets': [4] },
-                    { 'sTitle': 'Last', 'mDataProp': 'ts_last', 'sType': null, 'aTargets': [5], 'fnRender': function(o, val) { return renderTimeStamp(val); }},
-                    { 'sTitle': 'First', 'mDataProp': 'ts_first', 'sType': null, 'aTargets': [6], 'fnRender': function(o, val) { return renderTimeStamp(val); }},
-                ],
-                'aaSorting': [
-                    [1, 'desc'],
-                ]
-            });
-        }
-    }
-    
-    function Module_Stats_Binaries_Summary(container) {
-        this.container = container;
-        
-        this.tpl = '\
-            <h3><%= n_count %> <% print(pluralize(n_ident, "Binary", "Binaries")) %></h3>\
-            <ul>\
-                <li>collected by <%= n_ident %> <% print(pluralize(n_ident, "ident")) %></li>\
-                <li>on <%= n_target_port %> target <% print(pluralize(n_target_port, "port")) %></li>\
-                <li>from <%= n_source_ip %> source <% print(pluralize(n_source_ip, "IP")) %></li>\
-                <li>between <%= ts_first %> - <%= ts_last %></li>\
-                <li>in <%= n_total %> <% print(pluralize(n_total, "attack")) %> in total</li>\
-            </ul>';
-        
-        var timeformat = d3.time.format("%Y-%m-%d %H:%M:%S");
-        function renderTimeStamp(ts) {
-            return timeformat(new Date(ts*1000));
-        }
-        
-        function pluralize(n, s, p) {
-            console.log(n.print);
-            if (n == 1)
-                return s;
-            else {
-                if (p !== undefined)
-                    return p;
-                else
-                    return s + 's';
-            }
-        }
-        
-        this.init = function(data) {
-            //_.templateSettings = {
-            //   'interpolate': /##(.+?)##/g
-            //};
-            
-            data.ts_first = renderTimeStamp(data.ts_first);
-            data.ts_last = renderTimeStamp(data.ts_last);
-            data.pluralize = pluralize;
-                        
-            container.eq(0).html(_.template(this.tpl, data));
-        }
-    }
-</script>
-
-<script>
-    var urls = {
-        'r_stats_binaries_summary': '{% url r_stats_binaries_summary %}',
-        'r_stats_binaries': '{% url r_stats_binaries %}',
+    urls = {
+        'mod_summary': '{% url r_stats_binaries_summary %}',
+        'mod_table': '{% url r_stats_binaries %}',
     };
     
     var idents = {{ idents|safe }};
     
     $(
         function() {
-            $.ajax(urls.r_stats_binaries_summary).done(function(data) {
-                mod_stats_binaries_summary = new Module_Stats_Binaries_Summary($('#mod-stats-binaries-summary'));
-                mod_stats_binaries_summary.init(data);
-            });
+            mod_summary = new mod_stats_binaries.summary($('#mod-summary'), urls.mod_summary);
+            mod_summary.render();
             
-            $.ajax(urls.r_stats_binaries).done(function(data) {
-                mod_stats_binaries_table = new Module_Stats_Binaries_Table($('#mod-stats-binaries-table'));
-                mod_stats_binaries_table.init(data);
-            });
+            mod_table = new mod_stats_binaries.table($('#mod-table'), urls.mod_table);
+            mod_table.render();
         }
     );
 </script>
 
 <div class="container-fluid">
     <div class="row-fluid">
-        <div id="mod-stats-binaries-summary"></div>
+        <div id="mod-summary"></div>
         <hr/>
     </div>
     <div class="row-fluid">
-        <div id="mod-stats-binaries-table"></div>
+        <div id="mod-table"></div>
     </div>
 </div>
 
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.