x/compass-web
Code Issues Proposed changes

connect the multi-select to the graph

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
v2/assets/css/shelf.css
View File

@ -240,3 +240,10 @@ address, caption, cite, code, dfn, em, strong, th, var {
height: 205px; height: 205px;
} }
} }
.chosen-container-multi .chosen-choices{
border-radius: 5px;
}
.chosen-container-active .chosen-choices{
border: 1px solid orange;
border-radius: 5px;
}

378
v2/src/app/appDev.js
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) { $httpBackend.whenGET(/\.*\/monit.*clusters\/([0-9]|[1-9][0-9])\/metrics\/.*/).respond(function(method, url, data) {
console.log(method, url, data); console.log(method, url, data);
var metricData = [{ var name = url.split("metrics")[1].substr(1);
"key": "Series 1", var metricData;
"values": [ if (name == "cpu.0.cpu.idle.value") {
[1136005200000, 1271000.0],
[1138683600000, 1271000.0], metricData = {
[1141102800000, 1271000.0], "key": "cpu.0.cpu.idle.value",
[1159588800000, 3899486.0], "values": [
[1162270800000, 3899486.0], [1136005200000, 1271000.0],
[1164862800000, 3899486.0], [1138683600000, 1271000.0],
[1167541200000, 3564700.0], [1141102800000, 1271000.0],
[1170219600000, 3564700.0], [1159588800000, 3899486.0],
[1172638800000, 3564700.0], [1162270800000, 3899486.0],
[1191124800000, 2906501.0], [1164862800000, 3899486.0],
[1193803200000, 2906501.0], [1167541200000, 3564700.0],
[1196398800000, 2906501.0], [1170219600000, 3564700.0],
[1199077200000, 2206761.0], [1172638800000, 3564700.0],
[1201755600000, 2206761.0], [1191124800000, 2906501.0],
[1204261200000, 2206761.0], [1193803200000, 2906501.0],
[1206936000000, 2287726.0], [1196398800000, 2906501.0],
[1209528000000, 2287726.0], [1199077200000, 2206761.0],
[1212206400000, 2287726.0], [1201755600000, 2206761.0],
[1214798400000, 2732646.0], [1204261200000, 2206761.0],
[1217476800000, 2732646.0], [1206936000000, 2287726.0],
[1225425600000, 2599196.0], [1209528000000, 2287726.0],
[1228021200000, 2599196.0], [1212206400000, 2287726.0],
[1230699600000, 1924387.0], [1214798400000, 2732646.0],
[1233378000000, 1924387.0], [1217476800000, 2732646.0],
[1235797200000, 1924387.0], [1225425600000, 2599196.0],
[1249012800000, 1743470.0], [1228021200000, 2599196.0],
[1251691200000, 1743470.0], [1230699600000, 1924387.0],
[1254283200000, 1519010.0], [1233378000000, 1924387.0],
[1256961600000, 1087726.0], [1235797200000, 1924387.0],
[1264914000000, 2087726.0], [1249012800000, 1743470.0],
[1267333200000, 2287726.0], [1251691200000, 1743470.0],
[1270008000000, 2287726.0], [1254283200000, 1519010.0],
[1272600000000, 2287726.0], [1256961600000, 1087726.0],
[1275278400000, 2287726.0], [1264914000000, 2087726.0],
[1277870400000, 1309915.0], [1267333200000, 2287726.0],
[1280548800000, 1309915.0], [1270008000000, 2287726.0],
[1283227200000, 1309915.0], [1272600000000, 2287726.0],
[1285819200000, 1331875.0], [1275278400000, 2287726.0],
[1288497600000, 1331875.0], [1277870400000, 1309915.0],
[1291093200000, 1331875.0], [1280548800000, 1309915.0],
[1293771600000, 1331875.0], [1283227200000, 1309915.0],
[1314763200000, 1244525.0], [1285819200000, 1331875.0],
[1317355200000, 475000.0], [1288497600000, 1331875.0],
[1320033600000, 475000.0], [1291093200000, 1331875.0],
[1322629200000, 475000.0], [1293771600000, 1331875.0],
[1325307600000, 690033.0], [1314763200000, 1244525.0],
[1327986000000, 690033.0], [1317355200000, 475000.0],
[1330491600000, 690033.0], [1320033600000, 475000.0],
[1333166400000, 514733.0], [1322629200000, 475000.0],
[1335758400000, 514733.0] [1325307600000, 690033.0],
] [1327986000000, 690033.0],
}, { [1330491600000, 690033.0],
"key": "Series 2", [1333166400000, 514733.0],
"values": [ [1335758400000, 514733.0]
[1136005200000, 1271000.0], ]
[1138683600000, 1271000.0], };
[1141102800000, 1271000.0], } else if (name == "cpu.0.cpu.interrupt.value") {
[1159588800000, 3899486.0], metricData = {
[1162270800000, 3899486.0], "key": "cpu.0.cpu.interrupt.value",
[1164862800000, 3899486.0], "values": [
[1167541200000, 2287726.0], [1136005200000, 1271000.0],
[1170219600000, 2287726.0], [1138683600000, 1271000.0],
[1172638800000, 3564700.0], [1141102800000, 1271000.0],
[1175313600000, 2648493.0], [1159588800000, 3899486.0],
[1177905600000, 2648493.0], [1162270800000, 3899486.0],
[1180584000000, 2648493.0], [1164862800000, 3899486.0],
[1183176000000, 2522993.0], [1167541200000, 2287726.0],
[1185854400000, 2522993.0], [1170219600000, 2287726.0],
[1188532800000, 2522993.0], [1172638800000, 3564700.0],
[1191124800000, 2906501.0], [1175313600000, 2648493.0],
[1193803200000, 2906501.0], [1177905600000, 2648493.0],
[1196398800000, 2906501.0], [1180584000000, 2648493.0],
[1199077200000, 2206761.0], [1183176000000, 2522993.0],
[1201755600000, 2206761.0], [1185854400000, 2522993.0],
[1204261200000, 2206761.0], [1188532800000, 2522993.0],
[1206936000000, 2287726.0], [1191124800000, 2906501.0],
[1209528000000, 2287726.0], [1193803200000, 2906501.0],
[1212206400000, 2287726.0], [1196398800000, 2906501.0],
[1214798400000, 2732646.0], [1199077200000, 2206761.0],
[1217476800000, 2732646.0], [1201755600000, 2206761.0],
[1220155200000, 2732646.0], [1204261200000, 2206761.0],
[1222747200000, 2599196.0], [1206936000000, 2287726.0],
[1225425600000, 2599196.0], [1209528000000, 2287726.0],
[1228021200000, 2599196.0], [1212206400000, 2287726.0],
[1230699600000, 1924387.0], [1214798400000, 2732646.0],
[1233378000000, 1924387.0], [1217476800000, 2732646.0],
[1235797200000, 1924387.0], [1220155200000, 2732646.0],
[1238472000000, 1756311.0], [1222747200000, 2599196.0],
[1241064000000, 1756311.0], [1225425600000, 2599196.0],
] [1228021200000, 2599196.0],
}, { [1230699600000, 1924387.0],
"key": "Series 3", [1233378000000, 1924387.0],
"values": [ [1235797200000, 1924387.0],
[1136005200000, 1271000.0], [1238472000000, 1756311.0],
[1138683600000, 1271000.0], [1241064000000, 1756311.0],
[1141102800000, 1271000.0], ]
[1159588800000, 3899486.0], };
[1177905600000, 2648493.0], } else if (name == "cpu.0.cpu.nice.value") {
[1180584000000, 2648493.0], metricData = {
[1183176000000, 2522993.0],
[1185854400000, 2522993.0], "key": "cpu.0.cpu.nice.value",
[1188532800000, 2522993.0], "values": [
[1191124800000, 2906501.0], [1136005200000, 1271000.0],
[1193803200000, 2906501.0], [1138683600000, 1271000.0],
[1196398800000, 2906501.0], [1141102800000, 1271000.0],
[1199077200000, 2206761.0], [1159588800000, 3899486.0],
[1201755600000, 2206761.0], [1177905600000, 2648493.0],
[1204261200000, 2206761.0], [1180584000000, 2648493.0],
[1206936000000, 2287726.0], [1183176000000, 2522993.0],
[1209528000000, 2287726.0], [1185854400000, 2522993.0],
[1212206400000, 2287726.0], [1188532800000, 2522993.0],
[1214798400000, 2732646.0], [1191124800000, 2906501.0],
[1217476800000, 2732646.0], [1193803200000, 2906501.0],
[1220155200000, 2732646.0], [1196398800000, 2906501.0],
[1222747200000, 2599196.0], [1199077200000, 2206761.0],
[1225425600000, 2599196.0], [1201755600000, 2206761.0],
[1228021200000, 2599196.0], [1204261200000, 2206761.0],
[1230699600000, 1924387.0], [1206936000000, 2287726.0],
[1233378000000, 1924387.0], [1209528000000, 2287726.0],
[1235797200000, 1924387.0], [1212206400000, 2287726.0],
[1238472000000, 1756311.0], [1214798400000, 2732646.0],
[1241064000000, 2287726.0], [1217476800000, 2732646.0],
[1280548800000, 1309915.0], [1220155200000, 2732646.0],
[1283227200000, 1309915.0], [1222747200000, 2599196.0],
[1285819200000, 1331875.0], [1225425600000, 2599196.0],
[1288497600000, 1331875.0], [1228021200000, 2599196.0],
[1291093200000, 1331875.0], [1230699600000, 1924387.0],
[1293771600000, 1331875.0], [1233378000000, 1924387.0],
[1296450000000, 1154695.0], [1235797200000, 1924387.0],
[1298869200000, 2287726.0], [1238472000000, 1756311.0],
[1301544000000, 1194025.0], [1241064000000, 2287726.0],
[1304136000000, 1194025.0], [1280548800000, 1309915.0],
[1306814400000, 1194025.0], [1283227200000, 1309915.0],
[1309406400000, 1194025.0], [1285819200000, 1331875.0],
[1312084800000, 1194025.0], [1288497600000, 1331875.0],
[1314763200000, 1244525.0] [1291093200000, 1331875.0],
] [1293771600000, 1331875.0],
}, { [1296450000000, 1154695.0],
"key": "Series 4", [1298869200000, 2287726.0],
"values": [ [1301544000000, 1194025.0],
[1136005200000, 1271000.0], [1304136000000, 1194025.0],
[1138683600000, 1271000.0], [1306814400000, 1194025.0],
[1141102800000, 1271000.0], [1309406400000, 1194025.0],
[1170219600000, 3564700.0], [1312084800000, 1194025.0],
[1172638800000, 3564700.0], [1314763200000, 1244525.0]
[1175313600000, 2648493.0], ]
[1177905600000, 2648493.0], };
[1180584000000, 2648493.0], } else {
[1183176000000, 2522993.0], metricData = {
[1185854400000, 2522993.0], "key": "else",
[1188532800000, 2522993.0], "values": [
[1220155200000, 2732646.0], [1136005200000, 1271000.0],
[1222747200000, 2599196.0], [1138683600000, 1271000.0],
[1225425600000, 2599196.0], [1141102800000, 1271000.0],
[1228021200000, 2599196.0], [1170219600000, 3564700.0],
[1230699600000, 1271000.0], [1172638800000, 3564700.0],
[1233378000000, 1924387.0], [1175313600000, 2648493.0],
[1235797200000, 1924387.0], [1177905600000, 2648493.0],
[1251691200000, 1743470.0], [1180584000000, 2648493.0],
[1254283200000, 1519010.0], [1183176000000, 2522993.0],
[1275278400000, 1543784.0], [1185854400000, 2522993.0],
[1277870400000, 1271000.0], [1188532800000, 2522993.0],
[1280548800000, 1309915.0], [1220155200000, 2732646.0],
[1283227200000, 1309915.0], [1222747200000, 2599196.0],
[1285819200000, 1331875.0], [1225425600000, 2599196.0],
[1288497600000, 1331875.0], [1228021200000, 2599196.0],
[1291093200000, 1331875.0], [1230699600000, 1271000.0],
[1293771600000, 1331875.0], [1233378000000, 1924387.0],
[1296450000000, 1154695.0], [1235797200000, 1924387.0],
[1298869200000, 1154695.0], [1251691200000, 1743470.0],
[1301544000000, 1194025.0], [1254283200000, 1519010.0],
[1304136000000, 1194025.0], [1275278400000, 1543784.0],
[1322629200000, 475000.0], [1277870400000, 1271000.0],
[1325307600000, 690033.0], [1280548800000, 1309915.0],
[1327986000000, 690033.0], [1283227200000, 1309915.0],
[1330491600000, 690033.0], [1285819200000, 1331875.0],
[1333166400000, 514733.0], [1288497600000, 1331875.0],
[1335758400000, 514733.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, {}]; return [200, metricData, {}];
}); });
}); });

11
v2/src/app/monitoring/metrics.tpl.html
View File

@ -23,13 +23,14 @@
<h3> <h3>
Metrics Browser 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> </h3>
<div multi-select allnames="metricsName"></div> <div multi-select metricsdata="metricsData" allnames="metricsName"></div>
<hr> <hr>
<!-- Nested node template --> <!-- 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"> <script type="text/ng-template" id="nodes_renderer.html">
<div ui-tree-handle class="tree-node tree-node-content"> <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}"> <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> </div>
<div class="col-md-8 col-sm-6"> <div class="col-md-8 col-sm-6">
<h3>Metrics Chart</h3> <h3>Metrics Chart</h3>
<div class="row" style="height: 400px"> <div class="row" style="height: 400px">
@ -71,6 +71,7 @@
margin="{left:50,top:50,bottom:50,right:50}" margin="{left:50,top:50,bottom:50,right:50}"
forceY="[0]" forceY="[0]"
showLegend="true" showLegend="true"
objectEquality="true"
legendWidth="200" legendWidth="200"
legendHeight="100"> legendHeight="100">
<svg></svg> <svg></svg>

36
v2/src/app/monitoring/monitoring.js
View File

@ -109,7 +109,7 @@ define(['angularAnimate', 'angularUiTree', 'nvd3Directive'], function() {
monitoringModule.controller('metricsCtrl', function($scope, dataService, $stateParams) { monitoringModule.controller('metricsCtrl', function($scope, dataService, $stateParams) {
var clusterId = $stateParams.id; var clusterId = $stateParams.id;
$scope.clickedHashTable ={}; $scope.clickedHashTable = {};
$scope.metricsTree = []; $scope.metricsTree = [];
dataService.monitorMetricsTree().success(function(data) { dataService.monitorMetricsTree().success(function(data) {
$scope.metricsTree = data; $scope.metricsTree = data;
@ -132,6 +132,7 @@ define(['angularAnimate', 'angularUiTree', 'nvd3Directive'], function() {
}); });
$scope.metricsData = []; $scope.metricsData = [];
$scope.generate = function(node) { $scope.generate = function(node) {
console.log(node); console.log(node);
@ -184,6 +185,7 @@ define(['angularAnimate', 'angularUiTree', 'nvd3Directive'], function() {
'<p>' + y + ' at ' + x + '</p>' '<p>' + y + ' at ' + x + '</p>'
} }
}; };
/* /*
// customize stack/line chart colors // customize stack/line chart colors
$scope.colorFunction = function() { $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 { return {
templateUrl: "src/app/monitoring/multiSelect.tpl.html", templateUrl: "src/app/monitoring/multiSelect.tpl.html",
scope: { scope: {
metricsData: "=metricsdata",
names: "=allnames" names: "=allnames"
}, },
link: function(scope, elem, attrs) { link: function(scope, elem, attrs) {
// set focus on input text area
$(".chosen-choices").click(function(event) { $(".chosen-choices").click(function(event) {
event.stopPropagation(); event.stopPropagation();
$(".search-field > input").focus(); $(".search-field > input").focus();
$(".chosen-container").addClass("chosen-with-drop chosen-container-active"); $(".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() { $(".chosen-results").on("click", "li.active-result", function() {
$(this).attr("class", "result-selected"); var clusterId = $stateParams.id;
var selected = $(this).text(); 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"); $(insertContent).insertBefore(".search-field");
scope.searchText = ""; scope.searchText = "";
scope.$apply(); scope.$apply();
}); });
//hight light
$(".chosen-results").on('mouseenter', 'li.active-result', function() { $(".chosen-results").on('mouseenter', 'li.active-result', function() {
$(this).addClass("highlighted"); $(this).addClass("highlighted");
}).on('mouseleave', 'li', function() { }).on('mouseleave', 'li', function() {
$(this).removeClass("highlighted"); $(this).removeClass("highlighted");
}); });
// remove the selected one
$(".chosen-choices").on("click", "li > .search-choice-close", function() { $(".chosen-choices").on("click", "li > .search-choice-close", function() {
var unselected = $(this).attr("data-option-array-index").trim(); var unselected = $(this).attr("data-option-array-index").trim();
$(this).closest('li').remove(); $(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) { $(document).click(function(e) {
$(".chosen-container").removeClass("chosen-with-drop chosen-container-active"); $(".chosen-container").removeClass("chosen-with-drop chosen-container-active");
}) })

6
v2/src/app/monitoring/multiSelect.tpl.html
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"> <ul class="chosen-choices">
<li class="search-field"> <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> </li>
</ul> </ul>
<div class="chosen-drop"> <div class="chosen-drop">
<ul class="chosen-results"> <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 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> <li ng-if="filtered.length <= 1000" class="result-selected" style="background-color:blue;">Showing {{filtered.length}} records</li>
</ul> </ul>