Add metrics tree browser
Change-Id: Idf7b7add141767d9547f343f640409b2cea26341
This commit is contained in:
jiahuay
parent
9c1baab24f
commit
6788c04916
@ -941,4 +941,32 @@ circle[depth='4'] {
|
||||
.iframe-fail {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.angular-ui-tree-handle {
|
||||
background: #f8faff;
|
||||
border: 1px solid #dae2ea;
|
||||
color: #7c9eb2;
|
||||
padding: 10px 10px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.angular-ui-tree-handle:hover {
|
||||
color: #438eb9;
|
||||
background: #f4f6f7;
|
||||
border-color: #dce2e8;
|
||||
}
|
||||
|
||||
.angular-ui-tree-placeholder {
|
||||
background: #f0f9ff;
|
||||
border: 2px dashed #bed2db;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.group-title {
|
||||
background-color: #687074 !important;
|
||||
color: #FFF !important;
|
||||
}
|
||||
1
v2/data/metrics_tree.json
Normal file
1
v2/data/metrics_tree.json
Normal file
File diff suppressed because one or more lines are too long
@ -9,6 +9,7 @@
|
||||
<link rel="stylesheet" type="text/css" href="vendor/font-awesome/css/font-awesome.min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="vendor/rickshaw/rickshaw.min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="vendor/nvd3/nv.d3.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="vendor/angular-ui-tree/angular-ui-tree.min.css">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="assets/css/ace.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="assets/css/ace-skins.min.css">
|
||||
@ -35,6 +36,7 @@
|
||||
<script type="text/javascript" src="vendor/d3/d3.min.js"></script>
|
||||
<script type="text/javascript" src="vendor/nvd3/nv.d3.min.js"></script>
|
||||
<script type="text/javascript" src="vendor/angular-nvd3/angularjs-nvd3-directives.min.js"></script>
|
||||
<script type="text/javascript" src="vendor/angular-ui-tree/angular-ui-tree.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="vendor/rickshaw/rickshaw.min.js"></script>
|
||||
<script type="text/javascript" src="vendor/angular-rickshaw/rickshaw.min.js"></script>
|
||||
|
||||
@ -11,7 +11,7 @@ var app = angular.module('compass', [
|
||||
'compass.userProfile',
|
||||
'ui.router',
|
||||
'ui.bootstrap',
|
||||
'compassAppDev',
|
||||
//'compassAppDev',
|
||||
'ngAnimate'
|
||||
]);
|
||||
|
||||
|
||||
@ -4,15 +4,10 @@
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-lg-10" style="width: 100%;">
|
||||
<div class="col-lg-10" style="width: 100%;" ng-controller="metricsCtrl">
|
||||
<tabset class="ng-isolate-scope" style="width: 100%;">
|
||||
<tab heading="Metrics"> Metrics
|
||||
<form class="form-inline ng-valid">
|
||||
<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>
|
||||
@ -20,8 +15,78 @@
|
||||
<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>
|
||||
</form-->
|
||||
<!--div class="panel-body" id="metricsGraphContainer"> </div-->
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-sm-6">
|
||||
<h3>
|
||||
Metrics Browser
|
||||
<a href="" class="btn btn-default pull-right" ng-click="collapseAll()">Collapse all</a>
|
||||
<a href="" class="btn btn-default pull-right margin-right-5" ng-click="expandAll()">Expand all</a>
|
||||
</h3>
|
||||
|
||||
<!-- Nested node template -->
|
||||
<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="toggle(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>
|
||||
{{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}">
|
||||
<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">
|
||||
<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()"
|
||||
margin="{left:50,top:50,bottom:50,right:50}"
|
||||
forceY="[0]"
|
||||
showLegend="true"
|
||||
legendWidth="200"
|
||||
legendHeight="100">
|
||||
<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>
|
||||
|
||||
</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>
|
||||
|
||||
@ -4,7 +4,8 @@ angular.module('compass.monitoring', [
|
||||
'compass.charts',
|
||||
'ngAnimate',
|
||||
'angular-rickshaw',
|
||||
'nvd3ChartDirectives'
|
||||
'nvd3ChartDirectives',
|
||||
'ui.tree'
|
||||
])
|
||||
|
||||
.config(function($stateProvider, $urlRouterProvider) {
|
||||
@ -397,6 +398,103 @@ angular.module('compass.monitoring', [
|
||||
])
|
||||
|
||||
|
||||
.controller('metricsCtrl', function($scope, dataService) {
|
||||
|
||||
$scope.toggle = function(scope) {
|
||||
scope.toggle();
|
||||
};
|
||||
|
||||
var getRootNodesScope = function() {
|
||||
return angular.element(document.getElementById("tree-root")).scope();
|
||||
};
|
||||
|
||||
$scope.collapseAll = function() {
|
||||
var scope = getRootNodesScope();
|
||||
scope.collapseAll();
|
||||
};
|
||||
|
||||
$scope.expandAll = function() {
|
||||
var scope = getRootNodesScope();
|
||||
scope.expandAll();
|
||||
};
|
||||
|
||||
$scope.metricsTree = [];
|
||||
|
||||
dataService.getMetricsTreeNodes().success(function(data) {
|
||||
$scope.metricsTree = data;
|
||||
}).error(function(response) {
|
||||
$scope.metricsTree = [];
|
||||
});
|
||||
|
||||
$scope.generate = function(node) {
|
||||
console.log(node);
|
||||
// call metric api here to get data for chart
|
||||
};
|
||||
|
||||
$scope.metricsData = [{
|
||||
"key": "Series 1",
|
||||
"values": [
|
||||
[1, 0],
|
||||
[2, 6],
|
||||
[3, 5],
|
||||
[4, 11],
|
||||
[5, 5]
|
||||
]
|
||||
}, {
|
||||
"key": "Series 2",
|
||||
"values": [
|
||||
[1, 0],
|
||||
[2, 10],
|
||||
[3, 5],
|
||||
[4, 5],
|
||||
[5, 0]
|
||||
]
|
||||
}, {
|
||||
"key": "Series 3",
|
||||
"values": [
|
||||
[1, 0],
|
||||
[2, 6],
|
||||
[3, 5],
|
||||
[4, 11],
|
||||
[5, 5]
|
||||
]
|
||||
}, {
|
||||
"key": "Series 4",
|
||||
"values": [
|
||||
[1, 7],
|
||||
[2, 14],
|
||||
[3, 14],
|
||||
[4, 23],
|
||||
[5, 16]
|
||||
]
|
||||
}];
|
||||
|
||||
$scope.xAxisTickFormat = function() {
|
||||
return function(d) {
|
||||
return d3.time.format('%x')(new Date(d));
|
||||
}
|
||||
};
|
||||
|
||||
$scope.toolTipContentFunction = function() {
|
||||
return function(key, x, y, e, graph) {
|
||||
console.log('tooltip content');
|
||||
return 'Super New Tooltip' +
|
||||
'<h1>' + key + '</h1>' +
|
||||
'<p>' + y + ' at ' + x + '</p>'
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
// customize stack/line chart colors
|
||||
$scope.colorFunction = function() {
|
||||
var colors = ["#68bc31", "#2091cf", "#6fb3e0", "#fee074", "#f89406", "#af4e96"];
|
||||
return function(d, i) {
|
||||
return colors[i%6];
|
||||
};
|
||||
}
|
||||
*/
|
||||
|
||||
})
|
||||
|
||||
.controller('moniOverviewCtrl', function($scope) {
|
||||
|
||||
@ -728,53 +826,6 @@ angular.module('compass.monitoring', [
|
||||
}]
|
||||
}]
|
||||
};
|
||||
/*
|
||||
$scope.physicalTopoData = {
|
||||
"name": "compass-dc1",
|
||||
"children": [{
|
||||
"name": "switch1",
|
||||
"state": "error",
|
||||
"children": [{
|
||||
"name": "server1",
|
||||
"state": "error"
|
||||
}, {
|
||||
"name": "server2",
|
||||
"state": "ok"
|
||||
}]
|
||||
}, {
|
||||
"name": "switch2",
|
||||
"state": "ok",
|
||||
"children": [{
|
||||
"name": "server3",
|
||||
"state": "ok"
|
||||
}, {
|
||||
"name": "server4",
|
||||
"state": "ok"
|
||||
}]
|
||||
}, {
|
||||
"name": "switch3",
|
||||
"state": "warning",
|
||||
"children": [{
|
||||
"name": "server4",
|
||||
"state": "ok"
|
||||
}, {
|
||||
"name": "server5",
|
||||
"state": "ok"
|
||||
}, {
|
||||
"name": "server6",
|
||||
"state": "warning"
|
||||
}, {
|
||||
"name": "server7",
|
||||
"state": "ok"
|
||||
}, {
|
||||
"name": "server8"
|
||||
}, {
|
||||
"name": "server9",
|
||||
"state": "warning"
|
||||
}]
|
||||
}]
|
||||
};
|
||||
*/
|
||||
$scope.physicalTopoData = {
|
||||
"name": "compass-dc1",
|
||||
"children": [{
|
||||
@ -811,66 +862,6 @@ angular.module('compass.monitoring', [
|
||||
|
||||
//$scope.topoDropDown = 'service';
|
||||
|
||||
$scope.exampleData = [{
|
||||
"key": "Series 1",
|
||||
"values": [
|
||||
[1, 0],
|
||||
[2, 6],
|
||||
[3, 5],
|
||||
[4, 11],
|
||||
[5, 5]
|
||||
]
|
||||
}, {
|
||||
"key": "Series 2",
|
||||
"values": [
|
||||
[1, 0],
|
||||
[2, 10],
|
||||
[3, 5],
|
||||
[4, 5],
|
||||
[5, 0]
|
||||
]
|
||||
}, {
|
||||
"key": "Series 3",
|
||||
"values": [
|
||||
[1, 0],
|
||||
[2, 6],
|
||||
[3, 5],
|
||||
[4, 11],
|
||||
[5, 5]
|
||||
]
|
||||
}, {
|
||||
"key": "Series 4",
|
||||
"values": [
|
||||
[1, 7],
|
||||
[2, 14],
|
||||
[3, 14],
|
||||
[4, 23],
|
||||
[5, 16]
|
||||
]
|
||||
}];
|
||||
|
||||
$scope.xAxisTickFormat = function() {
|
||||
return function(d) {
|
||||
return d3.time.format('%x')(new Date(d));
|
||||
}
|
||||
};
|
||||
|
||||
$scope.toolTipContentFunction = function() {
|
||||
return function(key, x, y, e, graph) {
|
||||
console.log('tooltip content');
|
||||
return 'Super New Tooltip' +
|
||||
'<h1>' + key + '</h1>' +
|
||||
'<p>' + y + ' at ' + x + '</p>'
|
||||
}
|
||||
};
|
||||
|
||||
/* // customize stack/line chart colors
|
||||
$scope.colorFunction = function() {
|
||||
var colors = ["#68bc31", "#2091cf", "#6fb3e0", "#fee074", "#f89406", "#af4e96"];
|
||||
return function(d, i) {
|
||||
return colors[i%6];
|
||||
};
|
||||
}
|
||||
*/
|
||||
|
||||
})
|
||||
|
||||
@ -207,6 +207,10 @@ angular.module('compass.services', [])
|
||||
this.monitoredHost = function(id) {
|
||||
//return $http.jsonp(settings.monitoringUrlBase: + '/hosts/' + id);
|
||||
};
|
||||
|
||||
this.getMetricsTreeNodes = function() {
|
||||
return $http.get(settings.metadataUrlBase + '/metrics_tree.json');
|
||||
};
|
||||
}
|
||||
])
|
||||
|
||||
|
||||
2
v2/vendor/angular-ui-tree/angular-ui-tree.min.css
vendored
Executable file
2
v2/vendor/angular-ui-tree/angular-ui-tree.min.css
vendored
Executable file
@ -0,0 +1,2 @@
|
||||
/* angular-ui-tree css file */
|
||||
.angular-ui-tree-empty{border:1px dashed #bbb;min-height:100px;background-color:#e5e5e5;background-image:-webkit-linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%,#fff),-webkit-linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%,#fff);background-image:-moz-linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%,#fff),-moz-linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%,#fff);background-image:linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%,#fff),linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%,#fff);background-size:60px 60px;background-position:0 0,30px 30px}.angular-ui-tree-nodes{display:block;position:relative;margin:0;padding:0;list-style:none}.angular-ui-tree-nodes .angular-ui-tree-nodes{padding-left:20px}.angular-ui-tree-node,.angular-ui-tree-placeholder{display:block;position:relative;margin:0;padding:0;min-height:20px;line-height:20px}.angular-ui-tree-hidden{display:none}.angular-ui-tree-placeholder{margin:5px 0;padding:0;min-height:30px}.angular-ui-tree-handle{cursor:move;text-decoration:none;font-weight:700;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;min-height:20px;line-height:20px}.angular-ui-tree-drag{position:absolute;pointer-events:none;z-index:999;opacity:.8}
|
||||
6
v2/vendor/angular-ui-tree/angular-ui-tree.min.js
vendored
Executable file
6
v2/vendor/angular-ui-tree/angular-ui-tree.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user