wip

app/modules/dashboard/health/index.js

@@ -2,6 +2,7 @@ import angular from 'angular'
 import Bluebird from 'bluebird'
 import uiRouter from 'angular-ui-router'
 import filter from 'lodash.filter'
+import find from 'lodash.find'
 import forEach from 'lodash.foreach'
 import sortBy from 'lodash.sortby'
 
@@ -258,48 +259,49 @@ export default angular.module('dashboard.health', [
     }
   })
   .controller('HealthCubism', function ($scope, xoApi, xoAggregate, xo, $timeout) {
-    let ctrl
+    let ctrl, stats
     ctrl = this
     $scope.metrics = {}
     $scope.extents = {
-      load: [0, 1],
-      cpus: [0, 1]
     }
 
-    this.objects = filter(xoApi.all, function (o) {
-      return o.type && o.type === 'host'
-    })
-    this.choosen = []
+    ctrl.objects = xoApi.all
+    ctrl.choosen = []
     this.prepareTypeFilter = function (selection) {
       const object = selection[0]
-      this.typeFilter = object && object.type || undefined
+      ctrl.typeFilter = object && object.type || undefined
     }
 
     this.selectAll = function (type) {
-      this.selected = filter(this.objects, object => object.type === type)
-      this.typeFilter = type
+      ctrl.selected = filter(ctrl.objects, object => object.type === type)
+      ctrl.typeFilter = type
     }
 
     this.prepareMetrics = function (objects) {
-      this.choosen = objects
-      refreshStats()
-        .then(function () {
-
-        })
-    }
-    function refreshStats () {
+      ctrl.choosen = objects
       ctrl.loadingMetrics = true
-      return xoAggregate
+      xoAggregate
         .refreshStats(ctrl.choosen)
-        .then(function (metrics) {
-          $scope.metrics = {
-            cpus: metrics.cpus_average_average,
-            load: metrics.load_average,
-            memoryFree: metrics.memoryFree_sum
-          }
-          $timeout(refreshStats, 1000)
+        .then(function (result) {
+          stats = result
+          ctrl.metrics = stats.keys
+          ctrl.stats = {}
+          // $timeout(refreshStats, 1000)
           ctrl.loadingMetrics = false
         })
+        .catch(function (e) {
+          console.log(' ERROR ', e)
+        })
+    }
+
+    this.prepareStat = function () {
+      console.log('preparestat')
+      ctrl.stats = {}
+      forEach(stats.details, function (stat, object_id) {
+        const label = find(ctrl.choosen, {id: object_id})
+        console.log(label)
+        ctrl.stats[ctrl.selectedMetric + ' ' + label.name_label] = stat[ctrl.selectedMetric]
+      })
     }
   })
   .name

app/modules/dashboard/health/view.jade

@@ -76,7 +76,7 @@
                     ui-select-match(placeholder = 'Choose an object')
                       i(class = 'xo-icon-{{ $item.type | lowercase }}')
                       |  {{ $item.name_label }}
-                    ui-select-choices(repeat = 'object in cubism.objects |  type:cubism.typeFilter | filter:$select.search | orderBy:["type", "name_label"] track by object.id')
+                    ui-select-choices(repeat = 'object in cubism.objects | underStat |  type:cubism.typeFilter | filter:$select.search | orderBy:["type", "name_label"] track by object.id')
                       div
                         i(class = 'xo-icon-{{ object.type | lowercase }}')
                         |  {{ object.name_label }}
@@ -99,9 +99,9 @@
                   | Loading metrics ... 
                   i.fa.fa-circle-o-notch.fa-spin
                 .form-group(ng-if = 'cubism.metrics')
-                  ui-select(ng-model = 'cubism.selectedMetric')
-                    ui-select-match(placeholder = 'Choose a metric') {{ $select.selected.key }}
-                    ui-select-choices(repeat = 'metric in cubism.metrics | filter:$select.search | orderBy:["key"]') {{ metric.key }}
+                  ui-select(ng-model = 'cubism.selectedMetric',ng-change='cubism.prepareStat()')
+                    ui-select-match(placeholder = 'Choose a metric') {{ $select.selected }}
+                    ui-select-choices(repeat = 'metric in cubism.metrics | filter:$select.search | orderBy:["key"]') {{ metric }}
         br
         p.text-center(ng-if = 'cubism.chosen.length')
           span(ng-repeat = 'object in cubism.chosen', ng-class = '{"text-danger": object._ignored}')
@@ -111,8 +111,10 @@
             del(ng-if = 'object._ignored') {{ object.name_label }}
             |   
         cubism(
-          ng-if = 'metrics'
-          chart-data="metrics"
-          extents="extents"
+          ng-if='!cubism.loadingMetrics && cubism.selectedMetric'
+          chart-data='cubism.stats'
+          extents='extents'
+          step='1000*5'
+          size='168'
           )
           

app/node_modules/xo-cubism/index.js

@@ -32,8 +32,11 @@ export default angular.module('xoCubism', [])
            .clientDelay(60 * 1000)
           .step(step)
           .size(size)
+        const container = d3.select(element[0])
 
         scope.$watch(() => scope.chartData, function (newvalue) {
+          console.log('change')
+
           let hasone = false
           foreach(newvalue, function (data, key) {
             let metric
@@ -44,6 +47,7 @@ export default angular.module('xoCubism', [])
             */
             sources[key] = clone(data)
             if (!metric) {
+              console.log(key, 'this metric does not exists')
               metric = context.metric(
                 function (start, stop, step, callback) {
                   let values, item, date
@@ -71,11 +75,22 @@ export default angular.module('xoCubism', [])
               metrics.push(metric)
             }
           })
+          foreach(sources, function (val, key) {
+            console.log(' check ',key)
+            if (!newvalue[key]) {
+              console.log(' new value does not have ', key)
+              container
+                .select('.horizon')
+                .remove()
+              delete sources[key]
+              delete metrics[key]
+            }
+          })
 
           if (!hasone) {
+            console.log(' has none')
             return
           }
-          const container = d3.select(element[0])
 
           if (container.select('.axis').empty()) {
             container

app/node_modules/xo-services/index.js

@@ -1,6 +1,6 @@
 import angular from 'angular'
 import Bluebird from 'bluebird'
-import filter from 'lodash.filter'
+// import filter from 'lodash.filter'
 import foreach from 'lodash.foreach'
 import keys from 'lodash.keys'
 import union from 'lodash.union'
@@ -65,7 +65,7 @@ export default angular.module('xoWebApp.services', [
 
             const {object, rawStats} = statePromiseInspection.value()
             const nb = rawStats.date.length
-            let metrics
+            let metrics, metricName
             metrics = {}
             foreach(rawStats, function (stat, statKey) {
               let statCounter, dateCounter, sum
@@ -74,18 +74,21 @@ export default angular.module('xoWebApp.services', [
               }
               if (stat[0] instanceof Array) {
                 // init arrays
+                console.log(statKey)
                 metrics[statKey + '_average'] = []
                 metrics[statKey + '_sum'] = []
                 for (statCounter = 0; statCounter < stat.length; statCounter++) {
-                  metrics[statKey + statCounter] = []
+                  metricName = computeMetricFullname(statKey, statCounter)
+                  metrics[metricName] = []
                 }
                 for (dateCounter = 0; dateCounter < nb; dateCounter++) {
                   const d = new Date(rawStats.date[dateCounter] * 1000)
                   sum = 0
                   for (statCounter = 0; statCounter < stat.length; statCounter++) {
                     const v = parseFloat(stat[statCounter][dateCounter], 10)
+                    metricName = computeMetricFullname(statKey, statCounter)
                     sum += v
-                    metrics[statKey + statCounter].push({
+                    metrics[metricName].push({
                       date: d,
                       value: v
                     })
@@ -100,11 +103,12 @@ export default angular.module('xoWebApp.services', [
                   })
                 }
               } else {
-                metrics[statKey] = []
+                metricName = computeMetricFullname(statKey, '')
+                metrics[metricName] = []
                 for (dateCounter = 0; dateCounter < nb; dateCounter++) {
                   const d = new Date(rawStats.date[dateCounter] * 1000)
                   const v = parseFloat(stat[dateCounter], 10)
-                  metrics[statKey].push({
+                  metrics[metricName].push({
                     date: d,
                     value: v
                   })
@@ -115,6 +119,8 @@ export default angular.module('xoWebApp.services', [
             agglomeratedStats.details[object.id] = metrics
           })
           // agglomerate objects stats
+          agglomeratedStats.keys = statKeys
+          /*
           foreach(statKeys, function (statKey) {
             let dateCounter, sum, d
             const objectWithstats = filter(agglomeratedStats.details, statKey)
@@ -136,9 +142,33 @@ export default angular.module('xoWebApp.services', [
                 value: sum
               })
             }
-          })
+          })*/
           return agglomeratedStats
         })
+
+      function computeMetricFullname (statKey, index) {
+        let metricName
+        switch (statKey) {
+          case 'vifs':
+            metricName = 'Network ' + Math.floor(index / 2) + ' ' + (index % 2 ? 'out' : 'in')
+            break
+          case 'pifs' :
+            metricName = 'NIC ' + Math.floor(index / 2) + ' ' + (index % 2 ? 'out' : 'in')
+            break
+          case 'xvds' :
+            metricName = 'Disk ' + String.fromCharCode(Math.floor(index / 2) + 65) + ' ' + (index % 2 ? 'write' : 'read')
+            break
+          case 'memoryUsed' :
+            metricName = 'RAM Used'
+            break
+          case 'load' :
+            metricName = 'Load average'
+            break
+          default :
+            metricName = statKey + index
+        }
+        return metricName
+      }
     }
 
     return {