make connection between multi-selection and ui-tree
Change-Id: I4032eb9e072e88c8dfcdeb0280a83e91c397e16f
This commit is contained in:
chi zhang
parent
eeb7b83972
commit
aceb12d726
|
|
@ -1103,3 +1103,12 @@ h4.widget-title:hover {
|
|||
color: #2a6496;
|
||||
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;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -5,103 +5,83 @@
|
|||
</div>
|
||||
|
||||
<div class="col-lg-10" style="width: 100%;">
|
||||
<tabset class="ng-isolate-scope" style="width: 100%;">
|
||||
<tab heading="Metrics">
|
||||
<!--form class="form-inline ng-valid">
|
||||
<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>
|
||||
Metrics Browser
|
||||
</h3>
|
||||
<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}">
|
||||
<span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span>
|
||||
</a>
|
||||
<input type="checkbox" ng-if="node.nodes.length == 0 || !node.nodes" ng-click="generate(node)"></input>
|
||||
{{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">
|
||||
<span class="glyphicon glyphicon-chevron-right"></span>
|
||||
</a-->
|
||||
</div>
|
||||
<ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}" ng-if="clickedHashTable[node.title]">
|
||||
<li ng-repeat="node in node.nodes" ui-tree-node data-collapsed="true" ng-include="'nodes_renderer.html'">
|
||||
</li>
|
||||
</ol>
|
||||
</script>
|
||||
<div ui-tree id="tree-root" data-drag-enabled="false">
|
||||
<ol ui-tree-nodes="" ng-model="metricsTree">
|
||||
<li ng-repeat="node in metricsTree" ui-tree-node data-collapsed="true" ng-include="'nodes_renderer.html'"></li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<span us-spinner="{radius:30, width:8, length: 16}" style="margin: 50% auto 0 auto" ng-if="loading < 2"></span>
|
||||
<div class="row" ng-class="{'loadingMask': loading < 2}">
|
||||
<div class="col-md-4 col-sm-6" ng-class="{'mask':loading < 2}">
|
||||
<h3>
|
||||
Metrics Browser
|
||||
</h3>
|
||||
<div multi-select metricsdata="metricsData" metricsdatakey="metricsDataKey" 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>
|
||||
<div class="col-md-8 col-sm-6">
|
||||
<h3>Metrics Chart</h3>
|
||||
<div class="row" style="height: 400px">
|
||||
<nvd3-line-chart
|
||||
id="metrics-chart"
|
||||
data="metricsData"
|
||||
height="350"
|
||||
showXAxis="true"
|
||||
showYAxis="true"
|
||||
tooltips="true"
|
||||
interactive="true"
|
||||
useInteractiveGuideline="true"
|
||||
toolTipContent="toolTipContentFunction()"
|
||||
xAxisTickFormat="xAxisTickFormatFunction()"
|
||||
yAxisTickFormat="yAxisTickFormatFunction()"
|
||||
margin="{left:50,top:50,bottom:50,right:50}"
|
||||
forceY="[0]"
|
||||
showLegend="true"
|
||||
objectEquality="true"
|
||||
legendWidth="200"
|
||||
legendHeight="100"
|
||||
noData="No Data Available">
|
||||
<svg></svg>
|
||||
</nvd3-line-chart>
|
||||
|
||||
<!--nvd3-stacked-area-chart
|
||||
id="metrics-chart2"
|
||||
data="exampleData"
|
||||
showXAxis="true"
|
||||
showYAxis="true"
|
||||
tooltips="true"
|
||||
interactive="true"
|
||||
useInteractiveGuideline="true"
|
||||
toolTipContent="toolTipContentFunction()"
|
||||
forceY="[0]">
|
||||
<svg></svg>
|
||||
</nvd3-stacked-area-chart-->
|
||||
<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}">
|
||||
<span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span>
|
||||
</a>
|
||||
<input type="checkbox" ng-if="node.nodes.length == 0 || !node.nodes" ng-checked="isChecked(node)" ng-click="generate(node)"></input>
|
||||
{{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">
|
||||
<span class="glyphicon glyphicon-chevron-right"></span>
|
||||
</a-->
|
||||
</div>
|
||||
|
||||
<ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}" ng-if="clickedHashTable[node.title]">
|
||||
<li ng-repeat="node in node.nodes" ui-tree-node data-collapsed="true" ng-include="'nodes_renderer.html'">
|
||||
</li>
|
||||
</ol>
|
||||
</script>
|
||||
<div ui-tree id="tree-root" data-drag-enabled="false">
|
||||
<ol ui-tree-nodes="" ng-model="metricsTree">
|
||||
<li ng-repeat="node in metricsTree" ui-tree-node data-collapsed="true" ng-include="'nodes_renderer.html'"></li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-md-8 col-sm-6" ng-class="{'mask':loading < 2}">
|
||||
<h3>Metrics Chart</h3>
|
||||
<div class="row" style="height: 400px">
|
||||
<nvd3-line-chart
|
||||
id="metrics-chart"
|
||||
data="metricsData"
|
||||
height="350"
|
||||
showXAxis="true"
|
||||
showYAxis="true"
|
||||
tooltips="true"
|
||||
interactive="true"
|
||||
useInteractiveGuideline="true"
|
||||
toolTipContent="toolTipContentFunction()"
|
||||
xAxisTickFormat="xAxisTickFormatFunction()"
|
||||
yAxisTickFormat="yAxisTickFormatFunction()"
|
||||
margin="{left:50,top:50,bottom:50,right:50}"
|
||||
forceY="[0]"
|
||||
showLegend="true"
|
||||
objectEquality="true"
|
||||
legendWidth="200"
|
||||
legendHeight="100"
|
||||
noData="No Data Available">
|
||||
<svg></svg>
|
||||
</nvd3-line-chart>
|
||||
|
||||
<!--nvd3-stacked-area-chart
|
||||
id="metrics-chart2"
|
||||
data="exampleData"
|
||||
showXAxis="true"
|
||||
showYAxis="true"
|
||||
tooltips="true"
|
||||
interactive="true"
|
||||
useInteractiveGuideline="true"
|
||||
toolTipContent="toolTipContentFunction()"
|
||||
forceY="[0]">
|
||||
<svg></svg>
|
||||
</nvd3-stacked-area-chart-->
|
||||
</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>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
define(['angularAnimate', 'angularUiTree', 'nvd3Directive'], function() {
|
||||
define(['angularAnimate', 'angularUiTree', 'nvd3Directive','ngSpinner'], function() {
|
||||
|
||||
var monitoringModule = angular.module('compass.monitoring', [
|
||||
'ui.router',
|
||||
|
|
@ -6,7 +6,8 @@ define(['angularAnimate', 'angularUiTree', 'nvd3Directive'], function() {
|
|||
'compass.charts',
|
||||
'ngAnimate',
|
||||
'nvd3ChartDirectives',
|
||||
'ui.tree'
|
||||
'ui.tree',
|
||||
'angularSpinner'
|
||||
]);
|
||||
|
||||
monitoringModule.config(function($stateProvider, $urlRouterProvider) {
|
||||
|
|
@ -111,40 +112,50 @@ define(['angularAnimate', 'angularUiTree', 'nvd3Directive'], function() {
|
|||
var clusterId = $stateParams.id;
|
||||
$scope.clickedHashTable = {};
|
||||
$scope.metricsTree = [];
|
||||
$scope.loading = 0;
|
||||
dataService.monitorMetricsTree().success(function(data) {
|
||||
$scope.metricsTree = data;
|
||||
$scope.loading++;
|
||||
}).error(function(response) {
|
||||
// TODO
|
||||
});
|
||||
|
||||
/*$scope.metrics = [];
|
||||
dataService.monitorMetrics().success(function(data) {
|
||||
$scope.metrics = data;
|
||||
}).error(function(response) {
|
||||
// TODO
|
||||
});*/
|
||||
|
||||
$scope.metricsName = [];
|
||||
dataService.monitorMetricsName().success(function(data) {
|
||||
$scope.metricsName = data;
|
||||
$scope.loading++;
|
||||
}).error(function(response) {
|
||||
// TODO
|
||||
});
|
||||
|
||||
$scope.metricsData = [];
|
||||
|
||||
$scope.metricsDataKey = [];
|
||||
$scope.generate = function(node) {
|
||||
console.log(node);
|
||||
|
||||
dataService.monitorClusterMetric(clusterId, node.title).success(function(data) {
|
||||
$scope.metricsData = data;
|
||||
|
||||
}).error(function(response) {
|
||||
// TODO
|
||||
});
|
||||
var checked = $scope.metricsDataKey.indexOf(node.id) > -1? false: true;
|
||||
if (checked) {
|
||||
dataService.monitorClusterMetric(clusterId, node.id).success(function(data) {
|
||||
$scope.metricsData.push(data);
|
||||
$scope.metricsDataKey.push(data.key);
|
||||
|
||||
}).error(function(response) {
|
||||
// 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
|
||||
// $scope.toggle = function(scope) {
|
||||
// scope.toggle();
|
||||
|
|
@ -207,7 +218,8 @@ define(['angularAnimate', 'angularUiTree', 'nvd3Directive'], function() {
|
|||
templateUrl: "src/app/monitoring/multiSelect.tpl.html",
|
||||
scope: {
|
||||
metricsData: "=metricsdata",
|
||||
names: "=allnames"
|
||||
names: "=allnames",
|
||||
metricsDataKey: "=metricsdatakey"
|
||||
|
||||
},
|
||||
|
||||
|
|
@ -217,23 +229,21 @@ define(['angularAnimate', 'angularUiTree', 'nvd3Directive'], function() {
|
|||
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) {
|
||||
console.log(data);
|
||||
scope.metricsData.push(data);
|
||||
scope.metricsDataKey.push(data.key);
|
||||
}).error(function(response) {
|
||||
// TODO
|
||||
});
|
||||
|
||||
$(insertContent).insertBefore(".search-field");
|
||||
//$(insertContent).insertBefore(".search-field");
|
||||
scope.searchText = "";
|
||||
scope.$apply();
|
||||
});
|
||||
|
|
@ -244,18 +254,15 @@ define(['angularAnimate', 'angularUiTree', 'nvd3Directive'], 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();
|
||||
var index = scope.objectKeys.indexOf(unselected);
|
||||
scope.removeSelected = function(target){
|
||||
var index = scope.metricsDataKey.indexOf(target.data);
|
||||
scope.metricsData.splice(index, 1);
|
||||
scope.$apply();
|
||||
|
||||
});
|
||||
scope.metricsDataKey.splice(index,1);
|
||||
};
|
||||
//hide options when a user clicks other places
|
||||
$(document).click(function(e) {
|
||||
$(".chosen-container").removeClass("chosen-with-drop chosen-container-active");
|
||||
})
|
||||
});
|
||||
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<li class="search-field">
|
||||
<input type="text" ng-model="searchText" autocomplete="off" style="min-width: 25px; height: 30px;">
|
||||
<li class="btn btn-info search-choice" ng-repeat=" data in metricsDataKey" ng-click="removeSelected(this)">
|
||||
<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>
|
||||
</ul>
|
||||
<div class="chosen-drop">
|
||||
<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 {{filtered.length}} records</li>
|
||||
</ul>
|
||||
|
|
|
|||
Loading…
Reference in New Issue