Merge branch 'devel' of https://github.com/triAGENS/ArangoDB into devel

js/apps/system/aardvark/frontend/js/arango/arango.js

@@ -9,7 +9,10 @@
       return {
         major: parseInt(parts[0], 10) || 0,
         minor: parseInt(parts[1], 10) || 0,
-        patch: parseInt(parts[2], 10) || 0
+        patch: parseInt(parts[2], 10) || 0,
+        toString: function() {
+          return this.major + "." + this.minor + "." + this.patch;
+        }
       };
     },
     toString: function (v) {
@@ -122,8 +125,7 @@
       var returnVal = false;
       $.ajax({
         type: "GET",
-        cache: false,
+        url: "/_api/collection/" + encodeURIComponent(val) + "/properties",
-        url: "/_api/collection/"+encodeURIComponent(val)+"/properties",
         contentType: "application/json",
         processData: false,
         async: false,

js/apps/system/aardvark/frontend/js/config/newDygraphConfig.js

@@ -0,0 +1,250 @@
+/*jslint indent: 2, nomen: true, maxlen: 120, vars: true, white: true, plusplus: true, continue: true, regexp: true */
+/*global require, _, Dygraph, window */
+
+(function () {
+    "use strict";
+    window.newDygraphConfig = {
+
+        defaultFrame : 20 * 60 * 1000,
+
+        zeropad: function (x) {
+            if (x < 10) {
+                return "0" + x;
+            }
+            return x;
+        },
+
+        xAxisFormat: function (d) {
+            if (d === -1) {
+                return "";
+            }
+            var date = new Date(d);
+            return this.zeropad(date.getHours()) + ":"
+                + this.zeropad(date.getMinutes()) + ":"
+                + this.zeropad(date.getSeconds());
+        },
+
+        mergeObjects: function (o1, o2, mergeAttribList) {
+            if (!mergeAttribList) {
+                mergeAttribList = [];
+            }
+            var vals = {}, res;
+            mergeAttribList.forEach(function (a) {
+                var valO1 = o1[a],
+                    valO2 = o2[a];
+                if (valO1 === undefined) {
+                    valO1 = {};
+                }
+                if (valO2 === undefined) {
+                    valO2 = {};
+                }
+                vals[a] = _.extend(valO1, valO2);
+            });
+            res = _.extend(o1, o2);
+            Object.keys(vals).forEach(function (k) {
+                res[k] = vals[k];
+            });
+            return res;
+        },
+
+        mapStatToFigure : {
+            numberOfThreads : ["times", "numberOfThreadsCurrent"],
+            residentSize : ["times", "residentSizePercent"],
+            virtualSize : ["times", "virtualSize"],
+            pageFaults : ["times", "majorPageFaultsPerSecond", "minorPageFaultsPerSecond"],
+            systemUserTime : ["times", "cpuSystemTime", "cpuUserTime"],
+            httpConnections : ["times", "clientConnectionsCurrent"],
+            totalTime : ["times", "avgQueueTime", "avgRequestTime", "avgIoTime"],
+            dataTransfer : ["times", "bytesSentPerSecond", "bytesReceivedPerSecond"],
+            requests : ["times", "getsPerSecond", "putsPerSecond", "postsPerSecond",
+                "deletesPerSecond", "patchesPerSecond", "headsPerSecond",
+                "optionsPerSecond", "othersPerSecond"],
+            requestsAsync : ["times", "asyncsPerSecond"]
+        },
+        //colors for dygraphs
+        colors: ["#617e2b", "#296e9c", "#81ccd8", "#7ca530", "#3c3c3c",
+            "#aa90bd", "#e1811d", "#c7d4b2", "#d0b2d4"],
+
+        //figure dependend options
+        figureDependedOptions: {
+            numberOfThreads: {
+                header: "Number of Threads"
+            },
+            residentSize: {
+                header: "Resident Size",
+                axes: {
+                    y: {
+                        labelsKMG2: false,
+                        axisLabelFormatter: function (y) {
+                            return y.toPrecision(2) + "%";
+                        },
+                        valueFormatter: function (y) {
+                            return y.toPrecision(2) + "%";
+                        }
+                    }
+                }
+            },
+            virtualSize: {
+                header: "Virtual Size"
+            },
+            pageFaults: {
+                header : "Page Faults",
+                visibility: [true, false],
+                labels: ["datetime", "Major Page Faults", "Minor Page Faults"],
+                div: "pageFaultsChart",
+                labelsKMG2: false
+            },
+            systemUserTime: {
+                div: "systemUserTimeChart",
+                header: "System and User Time",
+                labels: ["datetime", "System Time", "User Time"],
+                stacked: true,
+                labelsKMG2: false,
+                axes: {
+                    y: {
+                        valueFormatter: function (y) {
+                            return y.toPrecision(3);
+                        },
+                        axisLabelFormatter: function (y) {
+                            if (y === 0) {
+                                return 0;
+                            }
+                            return y.toPrecision(3);
+                        }
+                    }
+                }
+            },
+            httpConnections: {
+                header: "Client Connections"
+            },
+            totalTime: {
+                div: "totalTimeChart",
+                header: "Total Time",
+                labels: ["datetime", "Queue Time", "Request Time", "IO Time"],
+                labelsKMG2: false,
+                axes: {
+                    y: {
+                        valueFormatter: function (y) {
+                            return y.toPrecision(3);
+                        },
+                        axisLabelFormatter: function (y) {
+                            if (y === 0) {
+                                return 0;
+                            }
+                            return y.toPrecision(3);
+                        }
+                    }
+                },
+                stacked: true
+            },
+            dataTransfer: {
+                header: "Data Transfer",
+                labels: ["datetime", "Bytes sent", "Bytes received"],
+                stacked: true,
+                div: "dataTransferChart"
+            },
+            requests: {
+                header: "Requests",
+                labels: ["datetime", "GET", "PUT", "POST", "DELETE", "PATCH", "HEAD", "OPTIONS", "OTHER"],
+                stacked: true,
+                div: "requestsChart"
+            },
+            requestsAsync: {
+                header: "Async Requests"
+            }
+        },
+
+        getDashBoardFigures : function (all) {
+            var result = [], self = this;
+            Object.keys(this.figureDependedOptions).forEach(function (k) {
+                if (self.figureDependedOptions[k].div || all) {
+                    result.push(k);
+                }
+            })
+            return result;
+        },
+
+
+        //configuration for chart overview
+        getDefaultConfig: function (figure) {
+            var self = this;
+            var result = {
+                digitsAfterDecimal: 2,
+                drawGapPoints: true,
+                fillGraph: true,
+                showLabelsOnHighlight: false,
+                strokeWidth: 2,
+                strokeBorderWidth: 1,
+                includeZero: true,
+                highlightCircleSize: 0,
+                labelsSeparateLines : true,
+                strokeBorderColor: '#ffffff',
+                interactionModel: {},
+                maxNumberWidth : 10,
+                colors: [this.colors[0]],
+                xAxisLabelWidth: "60",
+                rightGap: 10,
+                showRangeSelector: false,
+                rangeSelectorHeight: 40,
+                rangeSelectorPlotStrokeColor: '#365300',
+                rangeSelectorPlotFillColor: '#414a4c',
+                pixelsPerLabel: 60,
+                labelsKMG2: true,
+                dateWindow: [
+                    new Date().getTime() -
+                    this.defaultFrame,
+                    new Date().getTime()
+                ],
+                axes: {
+                    x: {
+                        valueFormatter: function (d) {
+                            return self.xAxisFormat(d);
+                        }
+                    },
+                    y: {
+                        ticker: Dygraph.numericLinearTicks
+                    }
+                }
+            };
+            if (this.figureDependedOptions[figure]) {
+                result = this.mergeObjects(
+                    result, this.figureDependedOptions[figure], ["axes"]
+                );
+                if (result.div && result.labels && figure !== "pageFaults") {
+                    result.colors = this.getColors(result.labels);
+                    result.labelsDiv = document.getElementById(result.div + "Legend");
+                    result.legend = "always";
+                    result.showLabelsOnHighlight = true;
+                }
+            }
+            return result;
+
+        },
+
+        getDetailChartConfig: function (figure) {
+            var result = _.extend(
+                this.getDefaultConfig(figure),
+                {
+                    showRangeSelector: true,
+                    interactionModel: null,
+                    showLabelsOnHighlight: true,
+                    highlightCircleSize: 3
+                }
+            );
+            if (figure === "pageFaults") {
+                result.visibility = [true, true];
+            }
+            if (!result.labels) {
+                result.labels = ["datetime", result.header];
+                result.colors = this.getColors(result.labels);
+            }
+            return result;
+        },
+
+        getColors: function (labels) {
+            var colorList;
+            colorList = this.colors.concat([]);
+            return colorList.slice(0, labels.length - 1);
+        }
+    };
+}());

js/apps/system/aardvark/frontend/js/routers/router.js

@@ -76,7 +76,7 @@
       // This should be the only global object
       window.modalView = new window.ModalView();
       var self = this;
-            this.bind('all', function (trigger, args) {
+      /* this.bind('all', function (trigger, args) {
        if (trigger === "route") {
          if (self.currentRoute === "dashboard" && self.dashboardView) {
            self.dashboardView.stopUpdating();
@@ -85,7 +85,7 @@
          }
          self.currentRoute = args;
        }
-            });
+       });*/
       this.graphs = new window.GraphCollection();
       this.notificationList = new window.NotificationCollection();
 
@@ -218,12 +218,17 @@
             }
 
             if (update !== undefined) {
-                            var msg = "A newer version of ArangoDB (" + update.version +
+              var buttons = [];
-                                ") has become available. You may want to check the " +
+              buttons.push(window.modalView.createSuccessButton("Download Page", function() {
-                                "changelog at <a href=\"" + update.changes + "\">" +
+                window.open('https://www.arangodb.org/download','_blank');
-                                update.changes + "</a>";
+              }));
-                            arangoHelper.arangoNotification(msg, 15000);
+              var infos = {
-
+                newVersion: update.version,
+                oldVersion: currentVersion.toString()
+              };
+              window.modalView.show(
+                "modalNewVersion.ejs", "New Version Available", buttons, infos
+              );
             }
           },
           error: function () {
@@ -368,6 +373,17 @@
        this.naviView.selectMenuItem('tools-menu');
      },
      */
+    dashboard: function () {
+      this.naviView.selectMenuItem('dashboard-menu');
+      if (this.dashboardView === undefined) {
+        this.dashboardView = new newDashboardView({
+          dygraphConfig: window.newDygraphConfig
+        });
+      }
+      this.dashboardView.render();
+    },
+
+    /*
      dashboard: function () {
        this.naviView.selectMenuItem('dashboard-menu');
        if (this.statisticsDescriptionCollection === undefined) {
@@ -389,6 +405,8 @@
        }
        this.dashboardView.render();
      },
+     */
+
 
     graph: function () {
       var self = this;

js/apps/system/aardvark/frontend/js/templates/modalGraph.ejs

@@ -0,0 +1,3 @@
+<script id="modalGraph.ejs" type="text/template">
+		<div id="lineChartDetail" class="modalChartDetail"></div>
+</script>

js/apps/system/aardvark/frontend/js/templates/modalNewVersion.ejs

@@ -0,0 +1,6 @@
+<script id="modalNewVersion.ejs" type="text/template">
+  <p>
+    A newer version of ArangoDB (<b><%= content.newVersion %></b>) has become available.
+    You are using <b><%= content.oldVersion %></b>.
+  </p>
+</script>

js/apps/system/aardvark/frontend/js/templates/newDashboardView.ejs

@@ -1,18 +1,22 @@
 <script id="newDashboardView.ejs" type="text/template">
   <% var largeChart = function(name) { %>
-    <div class="dashboard-large-chart">
+    <div class="dashboard-large-chart dashboard-chart" id="<%= name %>Container">
-      <div id="<%= name %>"></div>
+      <div id="<%= name %>" class="dashboard-interior-chart"></div>
-      <div class="dasboard-legend" id="<%= name %>Legend"></div>
+      <div class="dashboard-legend">
+        <div class="dashboard-legend-inner" id="<%= name %>Legend"></div>
+      </div>
     </div>
   <% } %>
   <% var smallChart = function(name) { %>
-    <div class="dashboard-small-chart">
+    <div class="dashboard-small-chart dashboard-chart"  id="<%= name %>Container">
-      <div id="<%= name %>"></div>
+      <div id="<%= name %>" class="dashboard-interior-chart"></div>
-      <div class="dasboard-legend" id="<%= name %>Legend"></div>
+      <div class="dashboard-legend">
+        <div class="dashboard-legend-inner" id="<%= name %>Legend"></div>
+      </div>
     </div>
   <% } %>
   <% var tendency = function(title, name) { %>
-    <div class="dashboard-half-height-chart">
+    <div class="dashboard-half-height-chart dashboard-chart"  id="<%= name %>Container">
       <div class="dashboard-title-bar"><%= title %></div>
       <div class="dashboard-subtitle-bar">current</div>
       <div class="dashboard-subtitle-bar">15-min-avg</div>
@@ -28,20 +32,20 @@
     <a class="arangoHeader">Request Statistics</a>
   </div>
   <div class="contentDiv">
-    <div class="dashboard-title-bar">Total Time</div>
     <div class="dashboard-row">
+      <div class="dashboard-title-bar">Total Time in seconds</div>
       <% largeChart("totalTimeChart") %>
       <% smallChart("totalTimeDistribution") %>
     </div>
-    <div class="dashboard-title-bar">Data Transfer</div>
     <div class="dashboard-row">
+      <div class="dashboard-title-bar">Data Transfer in Bytes</div>
       <% largeChart("dataTransferChart") %>
       <% smallChart("dataTransferDistribution") %>
     </div>
-    <div class="dashboard-title-bar">Requests</div>
     <div class="dashboard-row">
+      <div class="dashboard-title-bar">Requests</div>
       <% largeChart("requestsChart") %>
-      <div class="dashboard-small-chart">
+      <div class="dashboard-tendency-chart">
         <% tendency("Async Requests", "asyncRequests"); %>
         <% tendency("Client Connections", "clientConnections"); %>
       </div>
@@ -51,26 +55,33 @@
     <a class="arangoHeader">System Resources</a>
   </div>
   <div class="dashboard-row">
-    <div class="dashboard-small-chart dashboard-half-height-chart">
+    <div class="dashboard-tendency-chart dashboard-half-height-chart">
       <% tendency("Number of threads", "numberOfThreads"); %>
     </div>
-    <div class="dashboard-small-chart dashboard-half-height-chart">
+    <div class="dashboard-tendency-chart dashboard-half-height-chart">
       <div class="dashboard-title-bar">Resident Size</div>
       <div id="residentSizeChart"></div>
     </div>
-    <div class="dashboard-small-chart dashboard-half-height-chart">
+    <div class="dashboard-tendency-chart dashboard-half-height-chart">
       <% tendency("Virtual Size in GB", "virualSize"); %>
     </div>
   </div>
   <div class="dashboard-row">
-    <div class="dashboard-medium-chart">
+    <div class="dashboard-title-bar">
-      <div class="dashboard-title-bar">Major Page Faults</div>
+      <div class="dashboard-half-title-bar">Major Page Faults</div>
-      <div id="majorPageFaultsChart"></div>
+      <div class="dashboard-half-title-bar">System User Time in seconds</div>
+    </div>
+    <div class="dashboard-medium-chart dashboard-chart" id="<%= name %>Container">
+      <div id="pageFaultsChart" class="dashboard-interior-chart"></div>
+      <div class="dashboard-legend">
+        <div class="dashboard-legend-inner" id="pageFaultsChartLegend"></div>
+      </div>
+    </div>
+    <div class="dashboard-medium-chart dashboard-chart" id="<%= name %>Container">
+      <div id="systemUserTimeChart" class="dashboard-interior-chart"></div>
+      <div class="dashboard-legend">
+        <div class="dashboard-legend-inner" id="systemUserTimeChartLegend"></div>
       </div>
-    <div class="dashboard-medium-chart">
-      <div class="dashboard-title-bar">System User Time</div>
-      <div id="systemUserTimeChart"></div>
-      <div class="dasboard-legend" id="systemUserTimeLegend"></div>
     </div>
   </div>
 </script>

js/apps/system/aardvark/frontend/js/views/modalView.js

@@ -43,7 +43,8 @@
       SUCCESS: "success",
       NOTIFICATION: "notification",
       DELETE: "danger",
-      NEUTRAL: "neutral"
+      NEUTRAL: "neutral",
+      CLOSE: "close"
     },
     tables: {
       READONLY: "readonly",
@@ -68,6 +69,15 @@
       //this.hide.bind(this);
     },
 
+    createCloseButton: function(cb) {
+      var self = this;
+      return createButtonStub(this.buttons.CLOSE, this.closeButton.title, function () {
+          self.closeButton.callback();
+          cb();
+      });
+    },
+
+
     createSuccessButton: function(title, cb) {
       return createButtonStub(this.buttons.SUCCESS, title, cb);
     },
@@ -159,13 +169,20 @@
     },
 
     show: function(templateName, title, buttons, tableContent, advancedContent) {
-      var self = this, lastBtn;
+      var self = this, lastBtn, closeButtonFound = false;
       buttons = buttons || [];
       // Insert close as second from right
       if (buttons.length > 0) {
+        buttons.forEach(function (b) {
+            if (b.type === self.buttons.CLOSE) {
+                closeButtonFound = true
+            }
+        });
+        if (!closeButtonFound) {
             lastBtn = buttons.pop();
-        buttons.push(this.closeButton);
+            buttons.push(self.closeButton);
             buttons.push(lastBtn);
+        }
       } else {
         buttons.push(this.closeButton);
       }

js/apps/system/aardvark/frontend/js/views/newDashboardView.js

@@ -0,0 +1,257 @@
+/*jslint indent: 2, nomen: true, maxlen: 100, vars: true, white: true, plusplus: true */
+/*global require, exports, Backbone, EJS, $, flush, window, arangoHelper, nv, d3, localStorage*/
+/*global document, Dygraph, _,templateEngine */
+
+(function() {
+  "use strict";
+
+  window.newDashboardView = Backbone.View.extend({
+    el: '#content',
+    interval: 15000, // in milliseconds
+    defaultFrame : 20 * 60 * 1000,
+    defaultDetailFrame : 14 *24 * 60 * 60 * 1000,
+    history : {},
+    graphs  : {},
+    alreadyCalledDetailChart : [],
+
+    events: {
+      "click .dashboard-chart" : "showDetail",
+      "mousedown .dygraph-rangesel-zoomhandle" : "stopRendering",
+      "mouseup .dygraph-rangesel-zoomhandle" : "startRendering",
+      "mouseleave .dygraph-rangesel-zoomhandle" : "startRendering",
+      "click #backToCluster" : "returnToClusterView"
+    },
+    
+    showDetail : function(e) {
+        var self = this;
+        var figure = $(e.currentTarget).attr("id").replace(/ChartContainer/g , "");
+        this.getStatistics(figure)
+        var options = this.dygraphConfig.getDetailChartConfig(figure);
+
+        this.detailGraphFigure = figure;
+        window.modalView.show(
+            "modalGraph.ejs",
+            options.header,
+            [window.modalView.createCloseButton(
+                    this.hidden.bind(this)
+                )
+            ]
+        );
+
+        $('#modal-dialog').toggleClass("modalChartDetail", true);
+        $('#modal-body').toggleClass("modal-body", true);
+
+        var dimensions = self.getCurrentSize("#lineChartDetail");
+        options.height = dimensions.height;
+        options.width = dimensions.width;
+
+        self.detailGraph = new Dygraph(
+            document.getElementById("lineChartDetail"),
+            self.history[figure],
+            options
+        );
+
+    },
+
+    hidden: function () {
+        this.detailGraph.destroy();
+        delete this.detailGraph;
+        delete this.detailGraphFigure;
+    },
+
+
+    getCurrentSize : function (div) {
+        var height, width;
+        height = $(div).height();
+        width = $(div).width();
+        return {
+            height : height,
+            width: width
+        }
+    },
+
+    prepareDygraphs : function () {
+        var self = this, options;
+        this.dygraphConfig.getDashBoardFigures().forEach(function (f) {
+            options = self.dygraphConfig.getDefaultConfig(f);
+            var dimensions = self.getCurrentSize(options.div);
+            options.height = dimensions.height;
+            options.width = dimensions.width;
+            self.graphs[f] = new Dygraph(
+                document.getElementById(options.div),
+                self.history[f],
+                options
+            );
+        });
+    },
+
+    initialize: function () {
+        this.dygraphConfig = this.options.dygraphConfig;
+
+    },
+
+    updateCharts : function () {
+        var self = this;
+        if (this.detailGraph) {
+            this.updateLineChart(this.detailGraphFigure, true);
+            return
+        }
+        this.updateD3Charts();
+        Object.keys(this.graphs).forEach(function(f) {
+            self.updateLineChart(f);
+        });
+    },
+
+    updateD3Charts : function () {
+
+    },
+
+    prepareD3Charts : function () {
+
+    },
+
+    updateDateWindow : function(graph, isDetailChart) {
+        var t = new Date().getTime();
+        var borderLeft, borderRight;
+        if (isDetailChart) {
+         /*   displayOptions.height = $('#lineChartDetail').height() - 34 -29;
+            displayOptions.width = $('#lineChartDetail').width() -10;
+            chart.detailChartConfig();
+            if (chart.graph.dateWindow_) {
+                borderLeft = chart.graph.dateWindow_[0];
+                borderRight = t - chart.graph.dateWindow_[1] - self.interval * 5 > 0 ?
+                    chart.graph.dateWindow_[1] : t;
+            }*/
+        } else {
+           /* chart.updateDateWindow();
+            borderLeft = chart.options.dateWindow[0];
+            borderRight = chart.options.dateWindow[1];*/
+        }
+        /*if (self.modal && createDiv) {
+            displayOptions.height = $('.innerDashboardChart').height() - 34;
+            displayOptions.width = $('.innerDashboardChart').width() -45;
+        }*/
+
+        return [new Date().getTime() - this.defaultFrame, new Date().getTime()]
+
+
+    },
+
+    updateLineChart : function (figure, isDetailChart) {
+
+        var opts = {
+            file: this.history[figure],
+            dateWindow : this.updateDateWindow(isDetailChart)
+        };
+        if (isDetailChart) {
+            this.detailGraph.updateOptions(opts);
+        } else {
+            this.graphs[figure].updateOptions(opts);
+        }
+
+
+
+
+
+    },
+
+
+    mergeHistory : function (newData) {
+        var self = this, valueList, i, figures = this.dygraphConfig.getDashBoardFigures(true);
+
+        for (i = 0;  i < newData["times"].length;  ++i) {
+            figures.forEach(function (f) {
+                if (!self.history[f]) {
+                    self.history[f] = [];
+                }
+                valueList = [];
+                self.dygraphConfig.mapStatToFigure[f].forEach(function (a) {
+                    if (!newData[a]) {
+                        return;
+                    }
+                    if (a === "times") {
+                        valueList.push(new Date(newData[a][i] * 1000));
+                    } else {
+                        valueList.push(newData[a][i]);
+                    }
+                });
+                if (valueList.length > 1) {
+                    self.history[f].push(valueList);
+                }
+            });
+        };
+        this.nextStart = newData.nextStart;
+    },
+
+
+    getStatistics : function (figure) {
+        var url = "statistics/full?", self = this, d;
+        if (!figure) {
+            d = this.nextStart ? this.nextStart : (new Date().getTime() - this.defaultFrame);
+            url+= "start=" +  (this.nextStart ? this.nextStart : (new Date().getTime() - this.defaultFrame)/ 1000);
+        } else {
+            if ( this.alreadyCalledDetailChart.indexOf(figure) !== -1) {
+                return;
+            }
+            this.history[figure] = [];
+            d = new Date().getTime() - this.defaultDetailFrame;
+            url+=  "start=" + (new Date().getTime() - this.defaultDetailFrame)/ 1000;
+            url+= "&filter=" + this.dygraphConfig.mapStatToFigure[figure].join();
+            this.alreadyCalledDetailChart.push(figure);
+        }
+        $.ajax(
+            url,
+            {async: false}
+        ).done(
+            function(d) {
+                self.mergeHistory(d)
+            }
+        );
+
+    },
+
+    stopUpdating: function () {
+      this.isUpdating = false;
+    },
+
+    startUpdating: function () {
+      var self = this;
+      if (self.isUpdating) {
+        return;
+      }
+      self.isUpdating = true;
+      self.timer = window.setInterval(function() {
+              self.getStatistics();
+              self.updateCharts();
+      },
+      self.interval
+    );
+  },
+
+
+  resize: function() {
+      var self = this, dimensions;
+      Object.keys(this.graphs).forEach(function (f) {
+          var g = self.graphs[f];
+          dimensions = self.getCurrentSize(g.maindiv_.id);
+          g.resize(dimensions.width , dimensions.height);
+      });
+  },
+
+  template: templateEngine.createTemplate("newDashboardView.ejs"),
+
+  render: function() {
+    $(this.el).html(this.template.render());
+    this.getStatistics();
+    this.prepareDygraphs();
+    this.prepareD3Charts();
+    this.startUpdating();
+  },
+
+
+
+  returnToClusterView : function() {
+    window.history.back();
+  }
+});
+}());

js/apps/system/aardvark/frontend/scss/_constants.scss

@@ -1 +1,2 @@
 $tile-width: 240px;
+$legend-width: 200px;

js/apps/system/aardvark/frontend/scss/_modals.scss

@@ -116,7 +116,7 @@
 }
 
 .modalChartDetail {
-  height: 70%;
+  height: 570px;
   margin-left: 0;
   width: 70%;
 }

js/apps/system/aardvark/frontend/scss/_newDashboard.scss

@@ -1,4 +1,5 @@
 $dashboard-height: 250px;
+$dashboard-padding: 28px;
 
 %dashboard-chart-box {
   @extend %pull-left;
@@ -11,34 +12,58 @@ $dashboard-height: 250px;
   }
 }
 
+.dashboard-interior-chart {
+  @extend %pull-left;
+  height: $dashboard-height - $dashboard-padding;
+}
+
 .dashboard-large-chart {
   @extend %dashboard-chart-box;
+  @extend %pull-left;
   height: $dashboard-height;
+  padding-top: $dashboard-padding;
 }
 
 .dashboard-medium-chart {
   @extend %dashboard-chart-box;
+  @extend %pull-left;
   height: $dashboard-height;
+  padding-top: $dashboard-padding;
 }
 
 .dashboard-small-chart {
   @extend %dashboard-chart-box;
+  @extend %pull-left;
   height: $dashboard-height;
+  padding-top: $dashboard-padding;
+}
+
+.dashboard-tendency-chart {
+  @extend %dashboard-chart-box;
+  @extend %pull-left;
+  height: $dashboard-height + $dashboard-padding;
 }
 
 .dashboard-legend {
-  display: block;
+  @extend %pull-left;
+  height: $dashboard-height;
+  width: $legend-width;
+
+  .dashboard-legend-inner {
+    padding-top: 20px;
+  }
 }
 
 .dashboard-half-height-chart {
   @extend %clear-float;
-  height: $dashboard-height / 2;
+  height: ($dashboard-height + $dashboard-padding) / 2;
 }
 
 .dashboard-title-bar {
   background-color: $c-bar-bg;
   border: {
-    bottom: 0;
+    bottom: 1px;
+    bottom-color: $c-black;
     left: 1px;
     left-color: $c-black;
     right: 1px;
@@ -54,13 +79,24 @@ $dashboard-height: 250px;
   margin-left: -1px;
   margin-right: -1px;
   text-align: center;
+
+  .dashboard-half-title-bar {
+    @extend %pull-left;
+    border-left: 1px solid $c-black;
+    margin-left: -1px;
+    width: 50%;
+
+    &:first-child {
+      border-left: 0;
+      margin-left: 0;
+    }
+  }
 }
 
 .dashboard-subtitle-bar {
   @extend %pull-left;
   @extend %dashboard-chart-box;
   border-bottom: 1px solid $c-black;
-  border-top: 1px solid $c-black;
   font-size: 16px;
   height: 36px;
   line-height: 36px;
@@ -71,7 +107,7 @@ $dashboard-height: 250px;
 .dashboard-tendency {
   @extend %pull-left;
   @extend %dashboard-chart-box;
-  height: $dashboard-height / 2 - 36px - 36px;
+  height: ($dashboard-height + $dashboard-padding) / 2 - 36px - 36px - 2px;
   width: 50%;
 }
 

js/apps/system/aardvark/frontend/scss/_resizing.scss

@@ -37,6 +37,7 @@ div.resizecontainer {
 @for $i from 1 through 11 {
   $min: $tile-width * $i;
   $content-size: $min - 12px;
+  
   @media (min-width: $min) and (max-width: $min + $tile-width - 1) {
 
     div.resizecontainer {
@@ -50,17 +51,42 @@ div.resizecontainer {
     }
 
     .dashboard-large-chart {
-      width: ($content-size * 2 / 3);
+      $int-width: ($content-size * 2 / 3);
+      width: $int-width;
+
+      .dashboard-interior-chart {
+        width: $int-width - $legend-width;
+      }
     }
 
     .dashboard-medium-chart {
-      width: ($content-size / 2);
+      $int-width: ($content-size / 2);
+      width: $int-width;
+
+      .dashboard-interior-chart {
+        width: $int-width - $legend-width;
+      }
     }
 
     .dashboard-small-chart {
-      width: ($content-size / 3);
+      $int-width: ($content-size / 3);
+      width: $int-width;
+
+      .dashboard-interior-chart {
+        width: $int-width - $legend-width;
       }
     }
+
+    .dashboard-tendency-chart {
+      $int-width: ($content-size / 3);
+      width: $int-width;
+
+      .dashboard-interior-chart {
+        width: $int-width - $legend-width;
+      }
+    }
+
+  }
 }
 
 div.centralRow {

js/apps/system/aardvark/frontend/scss/generated.css

@@ -1369,7 +1369,7 @@ textarea,
 .fa-plus-square-o:before {
   content: "\f196"; }
 
-ul.link-dropdown-menu, ul.user-dropdown-menu, ul.gv-dropdown-menu, div.navlogo, ul.navlist li, div.footer-left, div.footer-left p, a.headerButton, a.button-gui, div .tile, div .bigtile, div .tile a span.add-Icon, div .bigtile a span.add-Icon, div.centralContent, .contentDiv li, div.dropdownInner ul, .search-field, .fixedDropdown .notificationItemContent, .fixedDropdown .notificationItem i, .innerDropdownInnerUL, .dashboard-large-chart, .dashboard-medium-chart, .dashboard-small-chart, .dashboard-subtitle-bar, .dashboard-tendency, .dashboardModal, .pagination-line li a {
+ul.link-dropdown-menu, ul.user-dropdown-menu, ul.gv-dropdown-menu, div.navlogo, ul.navlist li, div.footer-left, div.footer-left p, a.headerButton, a.button-gui, div .tile, div .bigtile, div .tile a span.add-Icon, div .bigtile a span.add-Icon, div.centralContent, .contentDiv li, div.dropdownInner ul, .search-field, .fixedDropdown .notificationItemContent, .fixedDropdown .notificationItem i, .innerDropdownInnerUL, .dashboard-large-chart, .dashboard-medium-chart, .dashboard-small-chart, .dashboard-tendency-chart, .dashboard-subtitle-bar, .dashboard-tendency, .dashboard-interior-chart, .dashboard-legend, .dashboard-title-bar .dashboard-half-title-bar, .dashboardModal, .pagination-line li a {
   float: left; }
 
 div.navmenu, div.footer-right, div.footer-right p, ul.headerButtonList li, div .tile div.iconSet span, div .bigtile div.iconSet span, div.headerBar > div.headerButtonBar, .fixedDropdown button, .query-button, .arango-tab li, .show-save-state, div.gv_colour_list, .docsThirdCol {
@@ -2085,12 +2085,23 @@ div.resizecontainer {
 
   .dashboard-large-chart {
     width: 152px; }
+    .dashboard-large-chart .dashboard-interior-chart {
+      width: -48px; }
 
   .dashboard-medium-chart {
     width: 114px; }
+    .dashboard-medium-chart .dashboard-interior-chart {
+      width: -86px; }
 
   .dashboard-small-chart {
-    width: 76px; } }
+    width: 76px; }
+    .dashboard-small-chart .dashboard-interior-chart {
+      width: -124px; }
+
+  .dashboard-tendency-chart {
+    width: 76px; }
+    .dashboard-tendency-chart .dashboard-interior-chart {
+      width: -124px; } }
 @media (min-width: 480px) and (max-width: 719px) {
   div.resizecontainer {
     width: 468px; }
@@ -2102,12 +2113,23 @@ div.resizecontainer {
 
   .dashboard-large-chart {
     width: 312px; }
+    .dashboard-large-chart .dashboard-interior-chart {
+      width: 112px; }
 
   .dashboard-medium-chart {
     width: 234px; }
+    .dashboard-medium-chart .dashboard-interior-chart {
+      width: 34px; }
 
   .dashboard-small-chart {
-    width: 156px; } }
+    width: 156px; }
+    .dashboard-small-chart .dashboard-interior-chart {
+      width: -44px; }
+
+  .dashboard-tendency-chart {
+    width: 156px; }
+    .dashboard-tendency-chart .dashboard-interior-chart {
+      width: -44px; } }
 @media (min-width: 720px) and (max-width: 959px) {
   div.resizecontainer {
     width: 708px; }
@@ -2119,12 +2141,23 @@ div.resizecontainer {
 
   .dashboard-large-chart {
     width: 472px; }
+    .dashboard-large-chart .dashboard-interior-chart {
+      width: 272px; }
 
   .dashboard-medium-chart {
     width: 354px; }
+    .dashboard-medium-chart .dashboard-interior-chart {
+      width: 154px; }
 
   .dashboard-small-chart {
-    width: 236px; } }
+    width: 236px; }
+    .dashboard-small-chart .dashboard-interior-chart {
+      width: 36px; }
+
+  .dashboard-tendency-chart {
+    width: 236px; }
+    .dashboard-tendency-chart .dashboard-interior-chart {
+      width: 36px; } }
 @media (min-width: 960px) and (max-width: 1199px) {
   div.resizecontainer {
     width: 948px; }
@@ -2136,12 +2169,23 @@ div.resizecontainer {
 
   .dashboard-large-chart {
     width: 632px; }
+    .dashboard-large-chart .dashboard-interior-chart {
+      width: 432px; }
 
   .dashboard-medium-chart {
     width: 474px; }
+    .dashboard-medium-chart .dashboard-interior-chart {
+      width: 274px; }
 
   .dashboard-small-chart {
-    width: 316px; } }
+    width: 316px; }
+    .dashboard-small-chart .dashboard-interior-chart {
+      width: 116px; }
+
+  .dashboard-tendency-chart {
+    width: 316px; }
+    .dashboard-tendency-chart .dashboard-interior-chart {
+      width: 116px; } }
 @media (min-width: 1200px) and (max-width: 1439px) {
   div.resizecontainer {
     width: 1188px; }
@@ -2153,12 +2197,23 @@ div.resizecontainer {
 
   .dashboard-large-chart {
     width: 792px; }
+    .dashboard-large-chart .dashboard-interior-chart {
+      width: 592px; }
 
   .dashboard-medium-chart {
     width: 594px; }
+    .dashboard-medium-chart .dashboard-interior-chart {
+      width: 394px; }
 
   .dashboard-small-chart {
-    width: 396px; } }
+    width: 396px; }
+    .dashboard-small-chart .dashboard-interior-chart {
+      width: 196px; }
+
+  .dashboard-tendency-chart {
+    width: 396px; }
+    .dashboard-tendency-chart .dashboard-interior-chart {
+      width: 196px; } }
 @media (min-width: 1440px) and (max-width: 1679px) {
   div.resizecontainer {
     width: 1428px; }
@@ -2170,12 +2225,23 @@ div.resizecontainer {
 
   .dashboard-large-chart {
     width: 952px; }
+    .dashboard-large-chart .dashboard-interior-chart {
+      width: 752px; }
 
   .dashboard-medium-chart {
     width: 714px; }
+    .dashboard-medium-chart .dashboard-interior-chart {
+      width: 514px; }
 
   .dashboard-small-chart {
-    width: 476px; } }
+    width: 476px; }
+    .dashboard-small-chart .dashboard-interior-chart {
+      width: 276px; }
+
+  .dashboard-tendency-chart {
+    width: 476px; }
+    .dashboard-tendency-chart .dashboard-interior-chart {
+      width: 276px; } }
 @media (min-width: 1680px) and (max-width: 1919px) {
   div.resizecontainer {
     width: 1668px; }
@@ -2187,12 +2253,23 @@ div.resizecontainer {
 
   .dashboard-large-chart {
     width: 1112px; }
+    .dashboard-large-chart .dashboard-interior-chart {
+      width: 912px; }
 
   .dashboard-medium-chart {
     width: 834px; }
+    .dashboard-medium-chart .dashboard-interior-chart {
+      width: 634px; }
 
   .dashboard-small-chart {
-    width: 556px; } }
+    width: 556px; }
+    .dashboard-small-chart .dashboard-interior-chart {
+      width: 356px; }
+
+  .dashboard-tendency-chart {
+    width: 556px; }
+    .dashboard-tendency-chart .dashboard-interior-chart {
+      width: 356px; } }
 @media (min-width: 1920px) and (max-width: 2159px) {
   div.resizecontainer {
     width: 1908px; }
@@ -2204,12 +2281,23 @@ div.resizecontainer {
 
   .dashboard-large-chart {
     width: 1272px; }
+    .dashboard-large-chart .dashboard-interior-chart {
+      width: 1072px; }
 
   .dashboard-medium-chart {
     width: 954px; }
+    .dashboard-medium-chart .dashboard-interior-chart {
+      width: 754px; }
 
   .dashboard-small-chart {
-    width: 636px; } }
+    width: 636px; }
+    .dashboard-small-chart .dashboard-interior-chart {
+      width: 436px; }
+
+  .dashboard-tendency-chart {
+    width: 636px; }
+    .dashboard-tendency-chart .dashboard-interior-chart {
+      width: 436px; } }
 @media (min-width: 2160px) and (max-width: 2399px) {
   div.resizecontainer {
     width: 2148px; }
@@ -2221,12 +2309,23 @@ div.resizecontainer {
 
   .dashboard-large-chart {
     width: 1432px; }
+    .dashboard-large-chart .dashboard-interior-chart {
+      width: 1232px; }
 
   .dashboard-medium-chart {
     width: 1074px; }
+    .dashboard-medium-chart .dashboard-interior-chart {
+      width: 874px; }
 
   .dashboard-small-chart {
-    width: 716px; } }
+    width: 716px; }
+    .dashboard-small-chart .dashboard-interior-chart {
+      width: 516px; }
+
+  .dashboard-tendency-chart {
+    width: 716px; }
+    .dashboard-tendency-chart .dashboard-interior-chart {
+      width: 516px; } }
 @media (min-width: 2400px) and (max-width: 2639px) {
   div.resizecontainer {
     width: 2388px; }
@@ -2238,12 +2337,23 @@ div.resizecontainer {
 
   .dashboard-large-chart {
     width: 1592px; }
+    .dashboard-large-chart .dashboard-interior-chart {
+      width: 1392px; }
 
   .dashboard-medium-chart {
     width: 1194px; }
+    .dashboard-medium-chart .dashboard-interior-chart {
+      width: 994px; }
 
   .dashboard-small-chart {
-    width: 796px; } }
+    width: 796px; }
+    .dashboard-small-chart .dashboard-interior-chart {
+      width: 596px; }
+
+  .dashboard-tendency-chart {
+    width: 796px; }
+    .dashboard-tendency-chart .dashboard-interior-chart {
+      width: 596px; } }
 @media (min-width: 2640px) and (max-width: 2879px) {
   div.resizecontainer {
     width: 2628px; }
@@ -2255,12 +2365,23 @@ div.resizecontainer {
 
   .dashboard-large-chart {
     width: 1752px; }
+    .dashboard-large-chart .dashboard-interior-chart {
+      width: 1552px; }
 
   .dashboard-medium-chart {
     width: 1314px; }
+    .dashboard-medium-chart .dashboard-interior-chart {
+      width: 1114px; }
 
   .dashboard-small-chart {
-    width: 876px; } }
+    width: 876px; }
+    .dashboard-small-chart .dashboard-interior-chart {
+      width: 676px; }
+
+  .dashboard-tendency-chart {
+    width: 876px; }
+    .dashboard-tendency-chart .dashboard-interior-chart {
+      width: 676px; } }
 div.centralRow {
   margin-top: 65px;
   margin-bottom: 65px; }
@@ -2612,7 +2733,7 @@ div.breadcrumb a.disabledBread {
   opacity: .4; }
 
 .modalChartDetail {
-  height: 70%;
+  height: 570px;
   margin-left: 0;
   width: 70%; }
 
@@ -2883,31 +3004,44 @@ pre.gv-object-view {
   text-overflow: ellipsis;
   white-space: nowrap; }
 
-.dashboard-large-chart, .dashboard-medium-chart, .dashboard-small-chart, .dashboard-subtitle-bar, .dashboard-tendency {
+.dashboard-large-chart, .dashboard-medium-chart, .dashboard-small-chart, .dashboard-tendency-chart, .dashboard-subtitle-bar, .dashboard-tendency {
   border-left: 1px solid black;
   margin-left: -1px; }
-  .dashboard-large-chart:first-child, .dashboard-medium-chart:first-child, .dashboard-small-chart:first-child, .dashboard-subtitle-bar:first-child, .dashboard-tendency:first-child {
+  .dashboard-large-chart:first-child, .dashboard-medium-chart:first-child, .dashboard-small-chart:first-child, .dashboard-tendency-chart:first-child, .dashboard-subtitle-bar:first-child, .dashboard-tendency:first-child {
     border-left: 0;
     margin-left: 0; }
 
+.dashboard-interior-chart {
+  height: 222px; }
+
 .dashboard-large-chart {
-  height: 250px; }
+  height: 250px;
+  padding-top: 28px; }
 
 .dashboard-medium-chart {
-  height: 250px; }
+  height: 250px;
+  padding-top: 28px; }
 
 .dashboard-small-chart {
-  height: 250px; }
+  height: 250px;
+  padding-top: 28px; }
+
+.dashboard-tendency-chart {
+  height: 278px; }
 
 .dashboard-legend {
-  display: block; }
+  height: 250px;
+  width: 200px; }
+  .dashboard-legend .dashboard-legend-inner {
+    padding-top: 20px; }
 
 .dashboard-half-height-chart {
-  height: 125px; }
+  height: 139px; }
 
 .dashboard-title-bar {
   background-color: #686766;
-  border-bottom: 0;
+  border-bottom: 1px;
+  border-bottom-color: black;
   border-left: 1px;
   border-left-color: black;
   border-right: 1px;
@@ -2922,10 +3056,16 @@ pre.gv-object-view {
   margin-left: -1px;
   margin-right: -1px;
   text-align: center; }
+  .dashboard-title-bar .dashboard-half-title-bar {
+    border-left: 1px solid black;
+    margin-left: -1px;
+    width: 50%; }
+    .dashboard-title-bar .dashboard-half-title-bar:first-child {
+      border-left: 0;
+      margin-left: 0; }
 
 .dashboard-subtitle-bar {
   border-bottom: 1px solid black;
-  border-top: 1px solid black;
   font-size: 16px;
   height: 36px;
   line-height: 36px;
@@ -2933,7 +3073,7 @@ pre.gv-object-view {
   width: 50%; }
 
 .dashboard-tendency {
-  height: 53px;
+  height: 65px;
   width: 50%; }
 
 .dashboard-row {

js/apps/system/aardvark/manifest.json

@@ -57,6 +57,7 @@
         "frontend/js/arango/templateEngine.js",
         "frontend/js/shell/browser.js",
         "frontend/js/config/dygraphConfig.js",
+        "frontend/js/config/newDygraphConfig.js",
         "frontend/js/modules/org/arangodb/**",
         "frontend/js/modules/org/arangodb-common.js",
         "frontend/js/modules/org/arangodb.js",

js/apps/system/aardvark/test/specs/arango/arangoSpec.js

@@ -1,5 +1,5 @@
 /*jslint indent: 2, nomen: true, maxlen: 100, white: true  plusplus: true */
-/*global describe, it, expect, jasmine, spyOn*/
+/*global describe, it, expect, jasmine, spyOn, beforeEach*/
 /*global $, d3, arangoHelper*/
 
 
@@ -8,6 +8,17 @@ describe("Arango Helper", function() {
 
   describe("Checking collection types converter", function() {
 
+    var ajaxCB;
+
+    beforeEach(function() {
+      ajaxCB = function() {
+
+      };
+      spyOn($, "ajax").andCallFake(function(opts) {
+        ajaxCB(opts);
+      });
+    });
+
     it("if blank collection name", function() {
       var myObject = {},
         dummy;

js/apps/system/aardvark/test/specs/collections/arangoCollectionsSpec.js

@@ -1,6 +1,6 @@
 /*jslint indent: 2, nomen: true, maxlen: 100, white: true  plusplus: true, browser: true*/
 /*global describe, arangoHelper, beforeEach, afterEach, it, spyOn, expect*/
-/*global $*/
+/*global $, jasmine*/
 
 (function () {
     "use strict";
@@ -39,11 +39,25 @@
             var response = {collections: [
                 {name: "_aSystemCollection", type: 2, status: 2}
             ]};
+            spyOn($, "ajax").andCallFake(function(opts) {
+              opts.success({
+                isSystem: true
+              });
+            });
             col.parse(response);
             expect(response.collections[0].isSystem).toEqual(true);
             expect(response.collections[0].type).toEqual("document (system)");
             expect(response.collections[0].status).toEqual("unloaded");
             expect(response.collections[0].picture).toEqual("img/icon_arango.png");
+            expect($.ajax).toHaveBeenCalledWith({
+              type: 'GET',
+              url: '/_api/collection/_aSystemCollection/properties',
+              contentType: 'application/json',
+              processData: false,
+              async: false,
+              success: jasmine.any(Function),
+              error: jasmine.any(Function)
+            });
         });
 
         it("should getPosition for loaded documents sorted by type", function () {

js/apps/system/aardvark/test/specs/views/newLogsViewSpec.js

@@ -44,6 +44,35 @@
       document.body.removeChild(div);
     });
 
+    it("assert basics", function () {
+      expect(view.currentLoglevel).toEqual("logall");
+      expect(view.id).toEqual("#logContent");
+    });
+
+    it("check set not same active log level function", function () {
+      var button = {
+        currentTarget: {
+          id: "logdebug"
+        }
+      }
+      spyOn(view, "convertModelToJSON");
+      view.setActiveLoglevel(button);
+      expect(view.convertModelToJSON).toHaveBeenCalled();
+      expect(view.currentLoglevel).toBe(button.currentTarget.id);
+    });
+
+    it("check set same active log level function", function () {
+      var button = {
+        currentTarget: {
+          id: "logall"
+        }
+      }
+      spyOn(view, "convertModelToJSON");
+      view.setActiveLoglevel(button);
+      expect(view.convertModelToJSON).not.toHaveBeenCalled();
+      expect(view.currentLoglevel).toBe(button.currentTarget.id);
+    });
+
     it("set active log level to loginfo", function () {
       allLogs.fetch.reset();
       spyOn(infoLogs, "fetch");