x/compass-web
Code Issues Proposed changes

make connection between multi-selection and ui-tree

Browse Source 
Change-Id: I4032eb9e072e88c8dfcdeb0280a83e91c397e16f
This commit is contained in:
chi zhang
2014-10-14 18:17:56 -07:00
parent eeb7b83972
commit aceb12d726
5 changed files with 123 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
v2/assets/css/style.css
View File

@@ -1103,3 +1103,12 @@ h4.widget-title:hover {
color: #2a6496; color: #2a6496;
text-decoration: underline; text-decoration: underline;
} }
.loadingMask{
z-index:1;
width:100%;
background-color: rgba(0,0,0,0.15);
pointer-events: none;
}
.loadingMask .mask{
opacity: 0.5;
}

2
v2/src/app/appDev.js
View File

File diff suppressed because one or more lines are too long

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

@@ -5,38 +5,25 @@
</div> </div>
<div class="col-lg-10" style="width: 100%;"> <div class="col-lg-10" style="width: 100%;">
<tabset class="ng-isolate-scope" style="width: 100%;"> <span us-spinner="{radius:30, width:8, length: 16}" style="margin: 50% auto 0 auto" ng-if="loading < 2"></span>
<tab heading="Metrics"> <div class="row" ng-class="{'loadingMask': loading < 2}">
<!--form class="form-inline ng-valid"> <div class="col-md-4 col-sm-6" ng-class="{'mask':loading < 2}">
<select class="form-control ng-pristine ng-valid" ng-model="renderer" ng-change="rendererChanged(renderer)" >
<option ng-repeat="render in renderers" value="{{render}}"> {{render}} </option>
</select>
<select class="form-control ng-valid" ng-model="uri" ng-change="uriChanged(uri)">
<option ng-repeat="uri in uris" value="{{uri.v}}"> {{uri.displayName}} </option>
</select>
<button class="btn btn-primary" ng-click="changeSeriesData(0)">Generate Metrics Report</button>
</form-->
<!--div class="panel-body" id="metricsGraphContainer"> </div-->
<div class="row">
<div class="col-md-4 col-sm-6">
<h3> <h3>
Metrics Browser Metrics Browser
</h3> </h3>
<div multi-select metricsdata="metricsData" allnames="metricsName"></div> <div multi-select metricsdata="metricsData" metricsdatakey="metricsDataKey" allnames="metricsName"></div>
<hr> <hr>
<!-- Nested node template --> <!-- Nested node template -->
<div> <div>
<a href="" class="btn btn-default btn-xs" ng-click="collapseAll()">Collapse all</a> <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> <!-- <a href="" class="btn btn-default btn-xs margin-right-5" ng-click="expandAll()">Expand all</a> -->
</div> </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}">
<span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span> <span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span>
</a> </a>
<input type="checkbox" ng-if="node.nodes.length == 0 || !node.nodes" ng-click="generate(node)"></input> <input type="checkbox" ng-if="node.nodes.length == 0 || !node.nodes" ng-checked="isChecked(node)" ng-click="generate(node)"></input>
{{node.title}} {{node.title}}
<!--a style="margin-right: 8px;" ng-click="generate(node)" data-nodrag="" class="pull-right btn btn-primary btn-xs no-border" ng-hide="node.nodes.length != 0"> <!--a style="margin-right: 8px;" ng-click="generate(node)" data-nodrag="" class="pull-right btn btn-primary btn-xs no-border" ng-hide="node.nodes.length != 0">
<span class="glyphicon glyphicon-chevron-right"></span> <span class="glyphicon glyphicon-chevron-right"></span>
@@ -54,7 +41,7 @@
</div> </div>
</div> </div>
<div class="col-md-8 col-sm-6"> <div class="col-md-8 col-sm-6" ng-class="{'mask':loading < 2}">
<h3>Metrics Chart</h3> <h3>Metrics Chart</h3>
<div class="row" style="height: 400px"> <div class="row" style="height: 400px">
<nvd3-line-chart <nvd3-line-chart
@@ -95,13 +82,6 @@
</div> </div>
</div> </div>
</tab>
<tab heading="Metrics Database">
<iframe src="http://10.145.81.205:8080/designer.html" border="0px" height="900px" width="99%" scrolling="auto" frameborder="0"><font face="Arial, Helvetica, sans-serif" size="1">Sorry your browser does not support IFRAMES.</font></iframe>
</tab>
</tabset>
</div> </div>

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

@@ -1,4 +1,4 @@
define(['angularAnimate', 'angularUiTree', 'nvd3Directive'], function() { define(['angularAnimate', 'angularUiTree', 'nvd3Directive','ngSpinner'], function() {
var monitoringModule = angular.module('compass.monitoring', [ var monitoringModule = angular.module('compass.monitoring', [
'ui.router', 'ui.router',
@@ -6,7 +6,8 @@ define(['angularAnimate', 'angularUiTree', 'nvd3Directive'], function() {
'compass.charts', 'compass.charts',
'ngAnimate', 'ngAnimate',
'nvd3ChartDirectives', 'nvd3ChartDirectives',
'ui.tree' 'ui.tree',
'angularSpinner'
]); ]);
monitoringModule.config(function($stateProvider, $urlRouterProvider) { monitoringModule.config(function($stateProvider, $urlRouterProvider) {
@@ -111,40 +112,50 @@ define(['angularAnimate', 'angularUiTree', 'nvd3Directive'], function() {
var clusterId = $stateParams.id; var clusterId = $stateParams.id;
$scope.clickedHashTable = {}; $scope.clickedHashTable = {};
$scope.metricsTree = []; $scope.metricsTree = [];
$scope.loading = 0;
dataService.monitorMetricsTree().success(function(data) { dataService.monitorMetricsTree().success(function(data) {
$scope.metricsTree = data; $scope.metricsTree = data;
$scope.loading++;
}).error(function(response) { }).error(function(response) {
// TODO // TODO
}); });
/*$scope.metrics = []; /*$scope.metrics = [];
dataService.monitorMetrics().success(function(data) { dataService.monitorMetrics().success(function(data) {
$scope.metrics = data; $scope.metrics = data;
}).error(function(response) { }).error(function(response) {
// TODO // TODO
});*/ });*/
$scope.metricsName = []; $scope.metricsName = [];
dataService.monitorMetricsName().success(function(data) { dataService.monitorMetricsName().success(function(data) {
$scope.metricsName = data; $scope.metricsName = data;
$scope.loading++;
}).error(function(response) { }).error(function(response) {
// TODO // TODO
}); });
$scope.metricsData = []; $scope.metricsData = [];
$scope.metricsDataKey = [];
$scope.generate = function(node) { $scope.generate = function(node) {
console.log(node); var checked = $scope.metricsDataKey.indexOf(node.id) > -1? false: true;
if (checked) {
dataService.monitorClusterMetric(clusterId, node.title).success(function(data) { dataService.monitorClusterMetric(clusterId, node.id).success(function(data) {
$scope.metricsData = data; $scope.metricsData.push(data);
$scope.metricsDataKey.push(data.key);
}).error(function(response) { }).error(function(response) {
// TODO // TODO
}); });
} else{
var index = $scope.metricsDataKey.indexOf(node);
$scope.metricsData.splice(index, 1);
$scope.metricsDataKey.splice(index, 1);
}
}; };
$scope.isChecked = function(node){
return $scope.metricsDataKey.indexOf(node.id) > -1? true: false;
}
// For Angular UI Tree // For Angular UI Tree
// $scope.toggle = function(scope) { // $scope.toggle = function(scope) {
// scope.toggle(); // scope.toggle();
@@ -207,7 +218,8 @@ define(['angularAnimate', 'angularUiTree', 'nvd3Directive'], function() {
templateUrl: "src/app/monitoring/multiSelect.tpl.html", templateUrl: "src/app/monitoring/multiSelect.tpl.html",
scope: { scope: {
metricsData: "=metricsdata", metricsData: "=metricsdata",
names: "=allnames" names: "=allnames",
metricsDataKey: "=metricsdatakey"
}, },
@@ -217,23 +229,21 @@ define(['angularAnimate', 'angularUiTree', 'nvd3Directive'], function() {
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(); scope.$apply();
}); });
// select one and put it in input area // select one and put it in input area
$(".chosen-results").on("click", "li.active-result", function() { $(".chosen-results").on("click", "li.active-result", function() {
var clusterId = $stateParams.id; var clusterId = $stateParams.id;
var selected = $(this).text(); 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) { dataService.monitorClusterMetric(clusterId, selected).success(function(data) {
console.log(data);
scope.metricsData.push(data); scope.metricsData.push(data);
scope.metricsDataKey.push(data.key);
}).error(function(response) { }).error(function(response) {
// TODO // TODO
}); });
$(insertContent).insertBefore(".search-field"); //$(insertContent).insertBefore(".search-field");
scope.searchText = ""; scope.searchText = "";
scope.$apply(); scope.$apply();
}); });
@@ -244,18 +254,15 @@ define(['angularAnimate', 'angularUiTree', 'nvd3Directive'], function() {
$(this).removeClass("highlighted"); $(this).removeClass("highlighted");
}); });
// remove the selected one // remove the selected one
$(".chosen-choices").on("click", "li > .search-choice-close", function() { scope.removeSelected = function(target){
var unselected = $(this).attr("data-option-array-index").trim(); var index = scope.metricsDataKey.indexOf(target.data);
$(this).closest('li').remove();
var index = scope.objectKeys.indexOf(unselected);
scope.metricsData.splice(index, 1); scope.metricsData.splice(index, 1);
scope.$apply(); scope.metricsDataKey.splice(index,1);
};
});
//hide options when a user clicks other places //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");
}) });
}   }  
}; };

12
v2/src/app/monitoring/multiSelect.tpl.html
View File

@@ -1,12 +1,16 @@
<div class="chosen-container chosen-container-multi" style="min-width: 100px;" title=""> <div class="chosen-container chosen-container-multi" style="width: 100%;" title="">
<ul class="chosen-choices"> <ul class="chosen-choices">
<li class="search-field"> <li class="btn btn-info search-choice" ng-repeat=" data in metricsDataKey" ng-click="removeSelected(this)">
<input type="text" ng-model="searchText" autocomplete="off" style="min-width: 25px; height: 30px;"> <span>{{data}}</span>
<a class="search-choice-close" data-option-array-index="{{data}}"></a>
</li>
<li class="search-field" style="width:100%;">
<input type="text" ng-model="searchText" autocomplete="off" style="width: 100%; height: 30px;"></input>
</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" ng-class="{ 'active-result':objectKeys.indexOf(name) < 0,'result-selected': objectKeys.indexOf(name) >= 0}" data-option-array-index="{{name}}">{{name}}</li> <li ng-repeat = "name in filtered = (names |filter: searchText)|limitTo: 1000" ng-class="{ 'active-result':metricsDataKey.indexOf(name) < 0,'result-selected': metricsDataKey.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>