From c239757866c940fb050d2554624e251eb5aa024d Mon Sep 17 00:00:00 2001
From: chi zhang <Chi.Zhang1@huawei.com>
Date: Wed, 8 Oct 2014 15:45:00 -0700
Subject: [PATCH] connect the multi-select to the graph

Change-Id: If5cd97400530eb45d67c65df1cba3a884d9c6ec4
---
 v2/assets/css/shelf.css                    |   7 +
 v2/src/app/appDev.js                       | 378 +++++++++++----------
 v2/src/app/monitoring/metrics.tpl.html     |  11 +-
 v2/src/app/monitoring/monitoring.js        |  36 +-
 v2/src/app/monitoring/multiSelect.tpl.html |   6 +-
 5 files changed, 237 insertions(+), 201 deletions(-)

diff --git a/v2/assets/css/shelf.css b/v2/assets/css/shelf.css
index 5c8dcd3..c519149 100644
--- a/v2/assets/css/shelf.css
+++ b/v2/assets/css/shelf.css
@@ -240,3 +240,10 @@ address, caption, cite, code, dfn, em, strong, th, var {
         height: 205px;
     }
 }
+.chosen-container-multi .chosen-choices{
+    border-radius: 5px;
+}
+.chosen-container-active .chosen-choices{
+    border: 1px solid orange;
+    border-radius: 5px;
+}
diff --git a/v2/src/app/appDev.js b/v2/src/app/appDev.js
index eb31680..3cc1655 100644
--- a/v2/src/app/appDev.js
+++ b/v2/src/app/appDev.js
@@ -1578,189 +1578,201 @@ compassAppDev.run(function($httpBackend, settings, $http) {
 
     $httpBackend.whenGET(/\.*\/monit.*clusters\/([0-9]|[1-9][0-9])\/metrics\/.*/).respond(function(method, url, data) {
         console.log(method, url, data);
-        var metricData = [{
-            "key": "Series 1",
-            "values": [
-                [1136005200000, 1271000.0],
-                [1138683600000, 1271000.0],
-                [1141102800000, 1271000.0],
-                [1159588800000, 3899486.0],
-                [1162270800000, 3899486.0],
-                [1164862800000, 3899486.0],
-                [1167541200000, 3564700.0],
-                [1170219600000, 3564700.0],
-                [1172638800000, 3564700.0],
-                [1191124800000, 2906501.0],
-                [1193803200000, 2906501.0],
-                [1196398800000, 2906501.0],
-                [1199077200000, 2206761.0],
-                [1201755600000, 2206761.0],
-                [1204261200000, 2206761.0],
-                [1206936000000, 2287726.0],
-                [1209528000000, 2287726.0],
-                [1212206400000, 2287726.0],
-                [1214798400000, 2732646.0],
-                [1217476800000, 2732646.0],
-                [1225425600000, 2599196.0],
-                [1228021200000, 2599196.0],
-                [1230699600000, 1924387.0],
-                [1233378000000, 1924387.0],
-                [1235797200000, 1924387.0],
-                [1249012800000, 1743470.0],
-                [1251691200000, 1743470.0],
-                [1254283200000, 1519010.0],
-                [1256961600000, 1087726.0],
-                [1264914000000, 2087726.0],
-                [1267333200000, 2287726.0],
-                [1270008000000, 2287726.0],
-                [1272600000000, 2287726.0],
-                [1275278400000, 2287726.0],
-                [1277870400000, 1309915.0],
-                [1280548800000, 1309915.0],
-                [1283227200000, 1309915.0],
-                [1285819200000, 1331875.0],
-                [1288497600000, 1331875.0],
-                [1291093200000, 1331875.0],
-                [1293771600000, 1331875.0],
-                [1314763200000, 1244525.0],
-                [1317355200000, 475000.0],
-                [1320033600000, 475000.0],
-                [1322629200000, 475000.0],
-                [1325307600000, 690033.0],
-                [1327986000000, 690033.0],
-                [1330491600000, 690033.0],
-                [1333166400000, 514733.0],
-                [1335758400000, 514733.0]
-            ]
-        }, {
-            "key": "Series 2",
-            "values": [
-                [1136005200000, 1271000.0],
-                [1138683600000, 1271000.0],
-                [1141102800000, 1271000.0],
-                [1159588800000, 3899486.0],
-                [1162270800000, 3899486.0],
-                [1164862800000, 3899486.0],
-                [1167541200000, 2287726.0],
-                [1170219600000, 2287726.0],
-                [1172638800000, 3564700.0],
-                [1175313600000, 2648493.0],
-                [1177905600000, 2648493.0],
-                [1180584000000, 2648493.0],
-                [1183176000000, 2522993.0],
-                [1185854400000, 2522993.0],
-                [1188532800000, 2522993.0],
-                [1191124800000, 2906501.0],
-                [1193803200000, 2906501.0],
-                [1196398800000, 2906501.0],
-                [1199077200000, 2206761.0],
-                [1201755600000, 2206761.0],
-                [1204261200000, 2206761.0],
-                [1206936000000, 2287726.0],
-                [1209528000000, 2287726.0],
-                [1212206400000, 2287726.0],
-                [1214798400000, 2732646.0],
-                [1217476800000, 2732646.0],
-                [1220155200000, 2732646.0],
-                [1222747200000, 2599196.0],
-                [1225425600000, 2599196.0],
-                [1228021200000, 2599196.0],
-                [1230699600000, 1924387.0],
-                [1233378000000, 1924387.0],
-                [1235797200000, 1924387.0],
-                [1238472000000, 1756311.0],
-                [1241064000000, 1756311.0],
-            ]
-        }, {
-            "key": "Series 3",
-            "values": [
-                [1136005200000, 1271000.0],
-                [1138683600000, 1271000.0],
-                [1141102800000, 1271000.0],
-                [1159588800000, 3899486.0],
-                [1177905600000, 2648493.0],
-                [1180584000000, 2648493.0],
-                [1183176000000, 2522993.0],
-                [1185854400000, 2522993.0],
-                [1188532800000, 2522993.0],
-                [1191124800000, 2906501.0],
-                [1193803200000, 2906501.0],
-                [1196398800000, 2906501.0],
-                [1199077200000, 2206761.0],
-                [1201755600000, 2206761.0],
-                [1204261200000, 2206761.0],
-                [1206936000000, 2287726.0],
-                [1209528000000, 2287726.0],
-                [1212206400000, 2287726.0],
-                [1214798400000, 2732646.0],
-                [1217476800000, 2732646.0],
-                [1220155200000, 2732646.0],
-                [1222747200000, 2599196.0],
-                [1225425600000, 2599196.0],
-                [1228021200000, 2599196.0],
-                [1230699600000, 1924387.0],
-                [1233378000000, 1924387.0],
-                [1235797200000, 1924387.0],
-                [1238472000000, 1756311.0],
-                [1241064000000, 2287726.0],
-                [1280548800000, 1309915.0],
-                [1283227200000, 1309915.0],
-                [1285819200000, 1331875.0],
-                [1288497600000, 1331875.0],
-                [1291093200000, 1331875.0],
-                [1293771600000, 1331875.0],
-                [1296450000000, 1154695.0],
-                [1298869200000, 2287726.0],
-                [1301544000000, 1194025.0],
-                [1304136000000, 1194025.0],
-                [1306814400000, 1194025.0],
-                [1309406400000, 1194025.0],
-                [1312084800000, 1194025.0],
-                [1314763200000, 1244525.0]
-            ]
-        }, {
-            "key": "Series 4",
-            "values": [
-                [1136005200000, 1271000.0],
-                [1138683600000, 1271000.0],
-                [1141102800000, 1271000.0],
-                [1170219600000, 3564700.0],
-                [1172638800000, 3564700.0],
-                [1175313600000, 2648493.0],
-                [1177905600000, 2648493.0],
-                [1180584000000, 2648493.0],
-                [1183176000000, 2522993.0],
-                [1185854400000, 2522993.0],
-                [1188532800000, 2522993.0],
-                [1220155200000, 2732646.0],
-                [1222747200000, 2599196.0],
-                [1225425600000, 2599196.0],
-                [1228021200000, 2599196.0],
-                [1230699600000, 1271000.0],
-                [1233378000000, 1924387.0],
-                [1235797200000, 1924387.0],
-                [1251691200000, 1743470.0],
-                [1254283200000, 1519010.0],
-                [1275278400000, 1543784.0],
-                [1277870400000, 1271000.0],
-                [1280548800000, 1309915.0],
-                [1283227200000, 1309915.0],
-                [1285819200000, 1331875.0],
-                [1288497600000, 1331875.0],
-                [1291093200000, 1331875.0],
-                [1293771600000, 1331875.0],
-                [1296450000000, 1154695.0],
-                [1298869200000, 1154695.0],
-                [1301544000000, 1194025.0],
-                [1304136000000, 1194025.0],
-                [1322629200000, 475000.0],
-                [1325307600000, 690033.0],
-                [1327986000000, 690033.0],
-                [1330491600000, 690033.0],
-                [1333166400000, 514733.0],
-                [1335758400000, 514733.0]
-            ]
-        }];
+        var name = url.split("metrics")[1].substr(1);
+        var metricData;
+        if (name == "cpu.0.cpu.idle.value") {
+
+            metricData = {
+                "key": "cpu.0.cpu.idle.value",
+                "values": [
+                    [1136005200000, 1271000.0],
+                    [1138683600000, 1271000.0],
+                    [1141102800000, 1271000.0],
+                    [1159588800000, 3899486.0],
+                    [1162270800000, 3899486.0],
+                    [1164862800000, 3899486.0],
+                    [1167541200000, 3564700.0],
+                    [1170219600000, 3564700.0],
+                    [1172638800000, 3564700.0],
+                    [1191124800000, 2906501.0],
+                    [1193803200000, 2906501.0],
+                    [1196398800000, 2906501.0],
+                    [1199077200000, 2206761.0],
+                    [1201755600000, 2206761.0],
+                    [1204261200000, 2206761.0],
+                    [1206936000000, 2287726.0],
+                    [1209528000000, 2287726.0],
+                    [1212206400000, 2287726.0],
+                    [1214798400000, 2732646.0],
+                    [1217476800000, 2732646.0],
+                    [1225425600000, 2599196.0],
+                    [1228021200000, 2599196.0],
+                    [1230699600000, 1924387.0],
+                    [1233378000000, 1924387.0],
+                    [1235797200000, 1924387.0],
+                    [1249012800000, 1743470.0],
+                    [1251691200000, 1743470.0],
+                    [1254283200000, 1519010.0],
+                    [1256961600000, 1087726.0],
+                    [1264914000000, 2087726.0],
+                    [1267333200000, 2287726.0],
+                    [1270008000000, 2287726.0],
+                    [1272600000000, 2287726.0],
+                    [1275278400000, 2287726.0],
+                    [1277870400000, 1309915.0],
+                    [1280548800000, 1309915.0],
+                    [1283227200000, 1309915.0],
+                    [1285819200000, 1331875.0],
+                    [1288497600000, 1331875.0],
+                    [1291093200000, 1331875.0],
+                    [1293771600000, 1331875.0],
+                    [1314763200000, 1244525.0],
+                    [1317355200000, 475000.0],
+                    [1320033600000, 475000.0],
+                    [1322629200000, 475000.0],
+                    [1325307600000, 690033.0],
+                    [1327986000000, 690033.0],
+                    [1330491600000, 690033.0],
+                    [1333166400000, 514733.0],
+                    [1335758400000, 514733.0]
+                ]
+            };
+        } else if (name == "cpu.0.cpu.interrupt.value") {
+            metricData = {
+                "key": "cpu.0.cpu.interrupt.value",
+                "values": [
+                    [1136005200000, 1271000.0],
+                    [1138683600000, 1271000.0],
+                    [1141102800000, 1271000.0],
+                    [1159588800000, 3899486.0],
+                    [1162270800000, 3899486.0],
+                    [1164862800000, 3899486.0],
+                    [1167541200000, 2287726.0],
+                    [1170219600000, 2287726.0],
+                    [1172638800000, 3564700.0],
+                    [1175313600000, 2648493.0],
+                    [1177905600000, 2648493.0],
+                    [1180584000000, 2648493.0],
+                    [1183176000000, 2522993.0],
+                    [1185854400000, 2522993.0],
+                    [1188532800000, 2522993.0],
+                    [1191124800000, 2906501.0],
+                    [1193803200000, 2906501.0],
+                    [1196398800000, 2906501.0],
+                    [1199077200000, 2206761.0],
+                    [1201755600000, 2206761.0],
+                    [1204261200000, 2206761.0],
+                    [1206936000000, 2287726.0],
+                    [1209528000000, 2287726.0],
+                    [1212206400000, 2287726.0],
+                    [1214798400000, 2732646.0],
+                    [1217476800000, 2732646.0],
+                    [1220155200000, 2732646.0],
+                    [1222747200000, 2599196.0],
+                    [1225425600000, 2599196.0],
+                    [1228021200000, 2599196.0],
+                    [1230699600000, 1924387.0],
+                    [1233378000000, 1924387.0],
+                    [1235797200000, 1924387.0],
+                    [1238472000000, 1756311.0],
+                    [1241064000000, 1756311.0],
+                ]
+            };
+        } else if (name == "cpu.0.cpu.nice.value") {
+            metricData = {
+
+                "key": "cpu.0.cpu.nice.value",
+                "values": [
+                    [1136005200000, 1271000.0],
+                    [1138683600000, 1271000.0],
+                    [1141102800000, 1271000.0],
+                    [1159588800000, 3899486.0],
+                    [1177905600000, 2648493.0],
+                    [1180584000000, 2648493.0],
+                    [1183176000000, 2522993.0],
+                    [1185854400000, 2522993.0],
+                    [1188532800000, 2522993.0],
+                    [1191124800000, 2906501.0],
+                    [1193803200000, 2906501.0],
+                    [1196398800000, 2906501.0],
+                    [1199077200000, 2206761.0],
+                    [1201755600000, 2206761.0],
+                    [1204261200000, 2206761.0],
+                    [1206936000000, 2287726.0],
+                    [1209528000000, 2287726.0],
+                    [1212206400000, 2287726.0],
+                    [1214798400000, 2732646.0],
+                    [1217476800000, 2732646.0],
+                    [1220155200000, 2732646.0],
+                    [1222747200000, 2599196.0],
+                    [1225425600000, 2599196.0],
+                    [1228021200000, 2599196.0],
+                    [1230699600000, 1924387.0],
+                    [1233378000000, 1924387.0],
+                    [1235797200000, 1924387.0],
+                    [1238472000000, 1756311.0],
+                    [1241064000000, 2287726.0],
+                    [1280548800000, 1309915.0],
+                    [1283227200000, 1309915.0],
+                    [1285819200000, 1331875.0],
+                    [1288497600000, 1331875.0],
+                    [1291093200000, 1331875.0],
+                    [1293771600000, 1331875.0],
+                    [1296450000000, 1154695.0],
+                    [1298869200000, 2287726.0],
+                    [1301544000000, 1194025.0],
+                    [1304136000000, 1194025.0],
+                    [1306814400000, 1194025.0],
+                    [1309406400000, 1194025.0],
+                    [1312084800000, 1194025.0],
+                    [1314763200000, 1244525.0]
+                ]
+            };
+        } else {
+            metricData = {
+                "key": "else",
+                "values": [
+                    [1136005200000, 1271000.0],
+                    [1138683600000, 1271000.0],
+                    [1141102800000, 1271000.0],
+                    [1170219600000, 3564700.0],
+                    [1172638800000, 3564700.0],
+                    [1175313600000, 2648493.0],
+                    [1177905600000, 2648493.0],
+                    [1180584000000, 2648493.0],
+                    [1183176000000, 2522993.0],
+                    [1185854400000, 2522993.0],
+                    [1188532800000, 2522993.0],
+                    [1220155200000, 2732646.0],
+                    [1222747200000, 2599196.0],
+                    [1225425600000, 2599196.0],
+                    [1228021200000, 2599196.0],
+                    [1230699600000, 1271000.0],
+                    [1233378000000, 1924387.0],
+                    [1235797200000, 1924387.0],
+                    [1251691200000, 1743470.0],
+                    [1254283200000, 1519010.0],
+                    [1275278400000, 1543784.0],
+                    [1277870400000, 1271000.0],
+                    [1280548800000, 1309915.0],
+                    [1283227200000, 1309915.0],
+                    [1285819200000, 1331875.0],
+                    [1288497600000, 1331875.0],
+                    [1291093200000, 1331875.0],
+                    [1293771600000, 1331875.0],
+                    [1296450000000, 1154695.0],
+                    [1298869200000, 1154695.0],
+                    [1301544000000, 1194025.0],
+                    [1304136000000, 1194025.0],
+                    [1322629200000, 475000.0],
+                    [1325307600000, 690033.0],
+                    [1327986000000, 690033.0],
+                    [1330491600000, 690033.0],
+                    [1333166400000, 514733.0],
+                    [1335758400000, 514733.0]
+                ]
+            };
+        }
         return [200, metricData, {}];
     });
 });
diff --git a/v2/src/app/monitoring/metrics.tpl.html b/v2/src/app/monitoring/metrics.tpl.html
index 6de9929..abd7896 100644
--- a/v2/src/app/monitoring/metrics.tpl.html
+++ b/v2/src/app/monitoring/metrics.tpl.html
@@ -23,13 +23,14 @@
 
                 <h3>
                     Metrics Browser
-                    <a href="" class="btn btn-default btn-xs pull-right" ng-click="collapseAll()">Collapse all</a>
-                    <a href="" class="btn btn-default btn-xs pull-right margin-right-5" ng-click="expandAll()">Expand all</a>
                 </h3>
-                <div multi-select allnames="metricsName"></div>
+                <div multi-select metricsdata="metricsData" allnames="metricsName"></div>
                 <hr>
-
                 <!-- Nested node template -->
+                <div>
+                    <a href="" class="btn btn-default btn-xs" ng-click="collapseAll()">Collapse all</a>
+                    <a href="" class="btn btn-default btn-xs margin-right-5" ng-click="expandAll()">Expand all</a>
+                </div>
                 <script type="text/ng-template" id="nodes_renderer.html">
                     <div ui-tree-handle class="tree-node tree-node-content">
                         <a class="btn btn-success btn-xs" data-nodrag ng-click="toggleTab(this)" ng-class="{'opacity-zero': node.nodes.length == 0 || !node.nodes}">
@@ -53,7 +54,6 @@
                 </div>
 
             </div>
-
             <div class="col-md-8 col-sm-6">
                 <h3>Metrics Chart</h3>
                 <div class="row" style="height: 400px">
@@ -71,6 +71,7 @@
                         margin="{left:50,top:50,bottom:50,right:50}"
                         forceY="[0]"
                         showLegend="true"
+                        objectEquality="true"
                         legendWidth="200"
                         legendHeight="100">
                         <svg></svg>
diff --git a/v2/src/app/monitoring/monitoring.js b/v2/src/app/monitoring/monitoring.js
index 28a97ab..cf9e393 100644
--- a/v2/src/app/monitoring/monitoring.js
+++ b/v2/src/app/monitoring/monitoring.js
@@ -109,7 +109,7 @@ define(['angularAnimate', 'angularUiTree', 'nvd3Directive'], function() {
 
     monitoringModule.controller('metricsCtrl', function($scope, dataService, $stateParams) {
         var clusterId = $stateParams.id;
-        $scope.clickedHashTable ={};
+        $scope.clickedHashTable = {};
         $scope.metricsTree = [];
         dataService.monitorMetricsTree().success(function(data) {
             $scope.metricsTree = data;
@@ -132,6 +132,7 @@ define(['angularAnimate', 'angularUiTree', 'nvd3Directive'], function() {
         });
 
         $scope.metricsData = [];
+
         $scope.generate = function(node) {
             console.log(node);
 
@@ -184,6 +185,7 @@ define(['angularAnimate', 'angularUiTree', 'nvd3Directive'], function() {
                     '<p>' + y + ' at ' + x + '</p>'
             }
         };
+
         /*
     // customize stack/line chart colors
     $scope.colorFunction = function() {
@@ -193,44 +195,58 @@ define(['angularAnimate', 'angularUiTree', 'nvd3Directive'], function() {
         };
     }
     */
-
     });
-    monitoringModule.directive('multiSelect', function($filter) {  
+    monitoringModule.directive('multiSelect', function($filter, dataService, $stateParams) {  
         return {
             templateUrl: "src/app/monitoring/multiSelect.tpl.html",
             scope: {
+                metricsData: "=metricsdata",
                 names: "=allnames"
+
             },
 
             link: function(scope, elem, attrs) {
+                // set focus on input text area
                 $(".chosen-choices").click(function(event) {
                     event.stopPropagation();
                     $(".search-field > input").focus();
                     $(".chosen-container").addClass("chosen-with-drop chosen-container-active");
+                    scope.objectKeys = scope.metricsData.map(function(obj) {
+                        return obj.key
+                    });
+                    scope.$apply();
                 });
-
+                // select one and put it in input area
                 $(".chosen-results").on("click", "li.active-result", function() {
-                    $(this).attr("class", "result-selected");
+                    var clusterId = $stateParams.id;
                     var selected = $(this).text();
-                    var insertContent = '<li class="search-choice"><span>' + selected + '</span><a class="search-choice-close" data-option-array-index="' + selected + '"></a></li>';
+                    var insertContent = '<li class="btn btn-info search-choice"><span>' + selected + '</span><a class="search-choice-close" data-option-array-index="' + selected + '"></a></li>';
+                    dataService.monitorClusterMetric(clusterId, selected).success(function(data) {
+                        scope.metricsData.push(data);
+                    }).error(function(response) {
+                        // TODO
+                    });
+
                     $(insertContent).insertBefore(".search-field");
                     scope.searchText = "";
                     scope.$apply();
                 });
-
+                //hight light
                 $(".chosen-results").on('mouseenter', 'li.active-result', function() {
                     $(this).addClass("highlighted");
                 }).on('mouseleave', 'li', function() {
                     $(this).removeClass("highlighted");
                 });
-
+                // remove the selected one
                 $(".chosen-choices").on("click", "li > .search-choice-close", function() {
                     var unselected = $(this).attr("data-option-array-index").trim();
                     $(this).closest('li').remove();
-                    $(".chosen-results > li[data-option-array-index='" + unselected + "']").attr("class", "active-result");
+                    var index = scope.objectKeys.indexOf(unselected);
+                    scope.metricsData.splice(index, 1);
+                    scope.$apply();
 
                 });
-
+                //hide options when a user clicks other places
                 $(document).click(function(e) {
                     $(".chosen-container").removeClass("chosen-with-drop chosen-container-active");
                 })
diff --git a/v2/src/app/monitoring/multiSelect.tpl.html b/v2/src/app/monitoring/multiSelect.tpl.html
index 8f91394..f789238 100644
--- a/v2/src/app/monitoring/multiSelect.tpl.html
+++ b/v2/src/app/monitoring/multiSelect.tpl.html
@@ -1,12 +1,12 @@
-<div class="chosen-container chosen-container-multi" style="width: 375px;" title="">
+<div class="chosen-container chosen-container-multi" style="min-width: 100px;" title="">
     <ul class="chosen-choices">
         <li class="search-field">
-            <input type="text" ng-model="searchText" autocomplete="off" style="min-width: 25px;">
+            <input type="text" ng-model="searchText" autocomplete="off" style="min-width: 25px; height: 30px;">
         </li>
     </ul>
     <div class="chosen-drop">
         <ul class="chosen-results">
-            <li ng-repeat = "name in filtered = (names |filter: searchText)|limitTo: 1000" class="active-result" data-option-array-index="{{name}}">{{name}}</li>
+            <li ng-repeat = "name in filtered = (names |filter: searchText)|limitTo: 1000" ng-class="{ 'active-result':objectKeys.indexOf(name) < 0,'result-selected': objectKeys.indexOf(name) >= 0}" data-option-array-index="{{name}}">{{name}}</li>
             <li ng-if="filtered.length > 1000" class="result-selected" style="background-color:blue;">Showing the first 1000/{{filtered.length}} records</li>
             <li ng-if="filtered.length <= 1000" class="result-selected" style="background-color:blue;">Showing {{filtered.length}} records</li>
         </ul>