connect the multi-select to the graph
Change-Id: If5cd97400530eb45d67c65df1cba3a884d9c6ec4
This commit is contained in:
chi zhang
parent
6cbbea1b75
commit
c239757866
@ -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;
|
||||
}
|
||||
|
||||
@ -1578,8 +1578,12 @@ 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",
|
||||
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],
|
||||
@ -1632,8 +1636,10 @@ compassAppDev.run(function($httpBackend, settings, $http) {
|
||||
[1333166400000, 514733.0],
|
||||
[1335758400000, 514733.0]
|
||||
]
|
||||
}, {
|
||||
"key": "Series 2",
|
||||
};
|
||||
} else if (name == "cpu.0.cpu.interrupt.value") {
|
||||
metricData = {
|
||||
"key": "cpu.0.cpu.interrupt.value",
|
||||
"values": [
|
||||
[1136005200000, 1271000.0],
|
||||
[1138683600000, 1271000.0],
|
||||
@ -1671,8 +1677,11 @@ compassAppDev.run(function($httpBackend, settings, $http) {
|
||||
[1238472000000, 1756311.0],
|
||||
[1241064000000, 1756311.0],
|
||||
]
|
||||
}, {
|
||||
"key": "Series 3",
|
||||
};
|
||||
} else if (name == "cpu.0.cpu.nice.value") {
|
||||
metricData = {
|
||||
|
||||
"key": "cpu.0.cpu.nice.value",
|
||||
"values": [
|
||||
[1136005200000, 1271000.0],
|
||||
[1138683600000, 1271000.0],
|
||||
@ -1718,8 +1727,10 @@ compassAppDev.run(function($httpBackend, settings, $http) {
|
||||
[1312084800000, 1194025.0],
|
||||
[1314763200000, 1244525.0]
|
||||
]
|
||||
}, {
|
||||
"key": "Series 4",
|
||||
};
|
||||
} else {
|
||||
metricData = {
|
||||
"key": "else",
|
||||
"values": [
|
||||
[1136005200000, 1271000.0],
|
||||
[1138683600000, 1271000.0],
|
||||
@ -1760,7 +1771,8 @@ compassAppDev.run(function($httpBackend, settings, $http) {
|
||||
[1333166400000, 514733.0],
|
||||
[1335758400000, 514733.0]
|
||||
]
|
||||
}];
|
||||
};
|
||||
}
|
||||
return [200, metricData, {}];
|
||||
});
|
||||
});
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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() {
|
||||
var clusterId = $stateParams.id;
|
||||
var selected = $(this).text();
|
||||
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
|
||||
});
|
||||
|
||||
$(".chosen-results").on("click", "li.active-result", function() {
|
||||
$(this).attr("class", "result-selected");
|
||||
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>';
|
||||
$(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");
|
||||
})
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user