connect the multi-select to the graph

Change-Id: If5cd97400530eb45d67c65df1cba3a884d9c6ec4
This commit is contained in:
chi zhang 2014-10-08 15:45:00 -07:00
parent 6cbbea1b75
commit c239757866
5 changed files with 237 additions and 201 deletions

View File

@ -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;
}

View File

@ -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, {}];
});
});

View File

@ -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>

View File

@ -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");
})

View File

@ -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>