Phase II Monit UI
This put the basic UI scaffolding into the Compass UI structure. Also limited .css files after basic unit test. Change-Id: I3b347446587fef33ff75a14b442f4a0159f9612b
This commit is contained in:
Lawrence Davison
parent
8f7b861f67
commit
01ae47e942
242
v2/assets/css/shelf.css
Normal file
242
v2/assets/css/shelf.css
Normal file
@ -0,0 +1,242 @@
|
||||
footer.copyright {
|
||||
color: #777777;
|
||||
float: left;
|
||||
font-family: Open Sans, Helvetica,sans-serif;
|
||||
font-size: 80%;
|
||||
font-style: italic;
|
||||
margin: 1em;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
div .description {
|
||||
color: #777777;
|
||||
float: left;
|
||||
font-family: Open Sans, Helvetica,sans-serif;
|
||||
font-size: 80%;
|
||||
line-height: 1.3;
|
||||
margin: 1em;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
div.logo-nav .compass_logo {
|
||||
background: url("compass-logo.png") no-repeat scroll left bottom / contain rgba(0, 0, 0, 0);
|
||||
float: left;
|
||||
height: 3em;
|
||||
width: 12em;
|
||||
}
|
||||
div.container {
|
||||
margin: 2em auto;
|
||||
overflow: hidden;
|
||||
width: 880px;
|
||||
}
|
||||
div.logo-nav {
|
||||
margin: 0 10px;
|
||||
}
|
||||
div.logo-nav h1 {
|
||||
color: #777;
|
||||
font-family: Open Sans, verdana;
|
||||
font-size: 250%;
|
||||
font-weight: normal;
|
||||
}
|
||||
div.toc {
|
||||
float: left;
|
||||
}
|
||||
div.toc ul li {
|
||||
display: block;
|
||||
float: left;
|
||||
padding: 5px;
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
width: 860px;
|
||||
}
|
||||
div.toc ul li a {
|
||||
background-color: rgb(18, 191, 119);
|
||||
background-position: 50% 60%;
|
||||
background-repeat: no-repeat;
|
||||
color: white;
|
||||
display: block;
|
||||
padding: 5px;
|
||||
float: left;
|
||||
font-family: Open Sans, Helvetica,sans-serif;
|
||||
font-size: 120%;
|
||||
font-weight: bold;
|
||||
height: 100%;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
}
|
||||
div.toc ul li a em {
|
||||
font-size: 500%;
|
||||
}
|
||||
div.toc ul li:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
address, caption, cite, code, dfn, em, strong, th, var {
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
letter-spacing: -0.1em;
|
||||
opacity: 0.5;
|
||||
padding-right: 0.2em;
|
||||
}
|
||||
.toc .tiles li:nth-child(1) {
|
||||
width: 600px;
|
||||
}
|
||||
.toc .tiles li:nth-child(1) a {
|
||||
background-color: rgb(81, 107, 238);
|
||||
}
|
||||
.toc .tiles li:nth-child(2) {
|
||||
width: 200px;
|
||||
}
|
||||
.toc .tiles li:nth-child(2) a {
|
||||
background-color: rgb(36, 16, 51);
|
||||
}
|
||||
.toc .tiles li:nth-child(3) {
|
||||
height: 400px;
|
||||
width: 200px;
|
||||
}
|
||||
.toc .tiles li:nth-child(3) a {
|
||||
background-color: rgb(46, 147, 45);
|
||||
}
|
||||
.toc .tiles li:nth-child(4), .toc .tiles li:nth-child(5) {
|
||||
width: 300px;
|
||||
}
|
||||
.toc .tiles li:nth-child(4) a, .toc .tiles li:nth-child(5) a {
|
||||
background-color: rgb(106, 106, 106);
|
||||
}
|
||||
.toc .tiles li:nth-child(6), .toc .tiles li:nth-child(7), .toc .tiles li:nth-child(8) {
|
||||
width: 200px;
|
||||
}
|
||||
.toc .tiles li:nth-child(6) a, .toc .tiles li:nth-child(7) a, .toc .tiles li:nth-child(8) a {
|
||||
background-color: rgb(104, 52, 160);
|
||||
}
|
||||
.toc .tiles li:nth-child(9), .toc .tiles li:nth-child(10), .toc .tiles li:nth-child(11), .toc .tiles li:nth-child(12) {
|
||||
width: 200px;
|
||||
}
|
||||
.toc .tiles li:nth-child(9) a, .toc .tiles li:nth-child(10) a, .toc .tiles li:nth-child(11) a, .toc .tiles li:nth-child(12) a {
|
||||
background-color: rgb(11, 151, 202);
|
||||
}
|
||||
@media (max-width: 915px) {
|
||||
div.container {
|
||||
max-width: 720px;
|
||||
}
|
||||
div.logo-nav {
|
||||
margin: 0 5px;
|
||||
}
|
||||
div.logo-nav h1 {
|
||||
font-size: 180%;
|
||||
}
|
||||
div.logo-nav .compass_logo {
|
||||
height: 2.2em;
|
||||
width: 9em;
|
||||
}
|
||||
div.toc {
|
||||
float: left;
|
||||
max-width: 720px;
|
||||
}
|
||||
div.toc ul li {
|
||||
height: 160px;
|
||||
overflow: hidden;
|
||||
padding: 8px;
|
||||
width: 704px;
|
||||
}
|
||||
div.toc ul li a {
|
||||
font-size: 110%;
|
||||
padding: 10px 8px;
|
||||
}
|
||||
.toc .tiles li:nth-child(1) {
|
||||
width: 704px;
|
||||
}
|
||||
.toc .tiles li:nth-child(2) {
|
||||
float: right;
|
||||
width: 464px;
|
||||
}
|
||||
.toc .tiles li:nth-child(3), .toc .tiles li:nth-child(4), .toc .tiles li:nth-child(5), .toc .tiles li:nth-child(6), .toc .tiles li:nth-child(7), .toc .tiles li:nth-child(8) {
|
||||
width: 224px;
|
||||
}
|
||||
.toc .tiles li:nth-child(9), .toc .tiles li:nth-child(10), .toc .tiles li:nth-child(11), .toc .tiles li:nth-child(12) {
|
||||
width: 164px;
|
||||
}
|
||||
.toc .tiles li:nth-child(3) {
|
||||
height: 335px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 755px) {
|
||||
div.container {
|
||||
max-width: 600px;
|
||||
}
|
||||
div.logo-nav h1 {
|
||||
font-size: 150%;
|
||||
}
|
||||
div.logo-nav .compass_logo {
|
||||
height: 2em;
|
||||
width: 8em;
|
||||
}
|
||||
div.toc ul li {
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
padding: 7px;
|
||||
width: 586px;
|
||||
}
|
||||
div.toc ul li a {
|
||||
font-size: 100%;
|
||||
padding: 7px 6px;
|
||||
}
|
||||
div.toc ul li a em {
|
||||
font-size: 300%;
|
||||
}
|
||||
.toc .tiles li:nth-child(1) {
|
||||
width: 586px;
|
||||
}
|
||||
.toc .tiles li:nth-child(2) {
|
||||
width: 586px;
|
||||
}
|
||||
.toc .tiles li:nth-child(3), .toc .tiles li:nth-child(4), .toc .tiles li:nth-child(5) {
|
||||
width: 286px;
|
||||
}
|
||||
.toc .tiles li:nth-child(6), .toc .tiles li:nth-child(7), .toc .tiles li:nth-child(8) {
|
||||
width: 186px;
|
||||
}
|
||||
.toc .tiles li:nth-child(9), .toc .tiles li:nth-child(10), .toc .tiles li:nth-child(11), .toc .tiles li:nth-child(12) {
|
||||
width: 286px;
|
||||
}
|
||||
.toc .tiles li:nth-child(3) {
|
||||
height: 213px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 635px) {
|
||||
div.container {
|
||||
margin: 2em auto;
|
||||
max-width: 314px;
|
||||
}
|
||||
div.logo-nav .compass_logo {
|
||||
height: 2em;
|
||||
width: 15em;
|
||||
}
|
||||
div.toc ul li {
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
padding: 3px;
|
||||
width: 308px;
|
||||
}
|
||||
div.toc ul li a {
|
||||
font-size: 80%;
|
||||
padding: 3px;
|
||||
}
|
||||
.toc .tiles li:nth-child(1) {
|
||||
width: 308px;
|
||||
}
|
||||
.toc .tiles li:nth-child(2) {
|
||||
width: 308px;
|
||||
}
|
||||
.toc .tiles li:nth-child(3), .toc .tiles li:nth-child(4), .toc .tiles li:nth-child(5) {
|
||||
width: 151px;
|
||||
}
|
||||
.toc .tiles li:nth-child(6), .toc .tiles li:nth-child(7), .toc .tiles li:nth-child(8) {
|
||||
width: 98.33px;
|
||||
}
|
||||
.toc .tiles li:nth-child(9), .toc .tiles li:nth-child(10), .toc .tiles li:nth-child(11), .toc .tiles li:nth-child(12) {
|
||||
width: 151px;
|
||||
}
|
||||
.toc .tiles li:nth-child(3) {
|
||||
height: 205px;
|
||||
}
|
||||
}
|
||||
@ -5,27 +5,27 @@
|
||||
"controller": "",
|
||||
"templateUrl": ""
|
||||
}, {
|
||||
"name": "cluster.monitoring.hostgroups",
|
||||
"url": "/hostgroups",
|
||||
"display": "Host Groups",
|
||||
"name": "cluster.monitoring.topology",
|
||||
"url": "/topology",
|
||||
"display": "Topologies",
|
||||
"controller": "",
|
||||
"templateUrl": ""
|
||||
}, {
|
||||
"name": "cluster.monitoring.servicegroups",
|
||||
"url": "/servicegroups",
|
||||
"display": "Service Groups",
|
||||
"name": "cluster.monitoring.alerts",
|
||||
"url": "/alerts",
|
||||
"display": "Alerts",
|
||||
"controller": "",
|
||||
"templateUrl": ""
|
||||
}, {
|
||||
"name": "cluster.monitoring.novamanage",
|
||||
"url": "/novamanage",
|
||||
"display": "Nova Manage",
|
||||
"name": "cluster.monitoring.metrics",
|
||||
"url": "/metrics",
|
||||
"display": "Metrics",
|
||||
"controller": "",
|
||||
"templateUrl": ""
|
||||
}, {
|
||||
"name": "cluster.monitoring.charts",
|
||||
"url": "/charts",
|
||||
"display": "Charts",
|
||||
"display": "Chart Grid",
|
||||
"controller": "",
|
||||
"templateUrl": ""
|
||||
}]
|
||||
|
||||
@ -16,6 +16,8 @@
|
||||
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
|
||||
<link rel="stylesheet" type="text/css" href="assets/css/chart.css">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="assets/css/shelf.css">
|
||||
|
||||
<script type="text/javascript" src="vendor/jquery/jquery-1.11.1.min.js"></script>
|
||||
<script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script>
|
||||
|
||||
|
||||
30
v2/src/app/monitoring/alerts.tpl.html
Normal file
30
v2/src/app/monitoring/alerts.tpl.html
Normal file
@ -0,0 +1,30 @@
|
||||
<div class="page-header">
|
||||
<h1>
|
||||
Alarming, Alerting, Event Log
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-10" ng-controller="alertsCtrl" style="width: 100%;">
|
||||
<tabset class="ng-isolate-scope" style="width: 100%;">
|
||||
<tab heading="Alerts"> Alerts
|
||||
<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 Alarm Report</button>
|
||||
</form>
|
||||
<div class="panel-body" id="alarmsGraphContainer"> </div>
|
||||
</tab>
|
||||
<tab heading="Alarms">
|
||||
<tab-heading>
|
||||
<i class="glyphicon glyphicon-bell"></i> Alarms!
|
||||
</tab-heading>
|
||||
Alarms - TBD
|
||||
</tab>
|
||||
<tab heading="Event Viewer"> Event Viewer - TBD
|
||||
</tab>
|
||||
</tabset>
|
||||
</div>
|
||||
@ -1,7 +1 @@
|
||||
<div class="page-header">
|
||||
<h1>
|
||||
Charts
|
||||
</h1>
|
||||
</div>
|
||||
<div class="row side-padding-10 padding-top-30">
|
||||
</div>
|
||||
<iframe src="http://play.grafana.org/#/dashboard/file/white-theme.json" height="1500px" width="99%" scrolling="auto" frameborder="0"><font face="Arial, Helvetica, sans-serif" size="1">Sorry your browser does not support IFRAMES.</font></iframe>
|
||||
|
||||
33
v2/src/app/monitoring/metrics.tpl.html
Normal file
33
v2/src/app/monitoring/metrics.tpl.html
Normal file
@ -0,0 +1,33 @@
|
||||
<div class="page-header">
|
||||
<h1>
|
||||
Metrics
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-lg-10" style="width: 100%;">
|
||||
<tabset class="ng-isolate-scope" style="width: 100%;">
|
||||
<tab heading="Metrics"> 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>
|
||||
</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>
|
||||
|
||||
|
||||
|
||||
@ -16,6 +16,190 @@ angular.module('compass.monitoring', [
|
||||
})
|
||||
})
|
||||
|
||||
.controller('alertsCtrl', ['$scope',
|
||||
function($scope) {
|
||||
$scope.options = {
|
||||
renderer: 'area'
|
||||
};
|
||||
|
||||
$scope.alertsData = {"id":"server-1.huawei.com","name":"server-1.huawei.com","resource":"hosts","state":"running","type":"server", "metrics":[], "alarms":[
|
||||
{"id":"critical","name":"critical","data":[
|
||||
{"start":1406831282409,"end":1406870037149},
|
||||
{"start":1406745382748,"end":1406761927670}
|
||||
]},
|
||||
{"id":"minor","name":"minor","data":[
|
||||
{"start":1406873957790,"end":1406886655198},
|
||||
{"start":1406774590378,"end":1406850781190}
|
||||
]},
|
||||
{"id":"positive","name":"positive","data":[
|
||||
{"start":1406873957790,"end":1406886655198},
|
||||
{"start":1406774590378,"end":1406850781190}
|
||||
]},
|
||||
{"id":"info","name":"info","data":[
|
||||
{"start":1406873957790,"end":1406886655198},
|
||||
{"start":1406774590378,"end":1406850781190}
|
||||
]}
|
||||
]};
|
||||
}
|
||||
])
|
||||
|
||||
|
||||
/*
|
||||
.value("graphConfigurations", {
|
||||
apis: {
|
||||
'simulation': {
|
||||
uri: { v : "/monit/api/1.0.0/", displayName: 'Testing Cluster'},
|
||||
metrics: true, alarms: true, topos: true,
|
||||
},
|
||||
'simulation.alarms': {
|
||||
uri: "/monit/api/1.0.0/hosts/uc-server-2.huawei.com/alarms"
|
||||
},
|
||||
'192.168.255.85.hostgroup': {
|
||||
uri: { v : '/monit/api/hostgroup/host1/metric/cpu.0.cpu.system.value',
|
||||
displayName: 'Cluster 1'},
|
||||
metrics: true, alarms: true
|
||||
},
|
||||
'192.168.255.85.topology': {
|
||||
uri: { v: '/monit/api/topologies/1', displayName: 'Cluster 1'}, topos:true
|
||||
}
|
||||
},
|
||||
renderers:{
|
||||
line: {
|
||||
name: "line",
|
||||
metrics: true,
|
||||
view: com.huawei.compass.LineGraph,
|
||||
model: com.huawei.compass.LineGraphModel
|
||||
},
|
||||
area: {
|
||||
name: "area",
|
||||
metrics: true,
|
||||
view: com.huawei.compass.AreaGraph,
|
||||
model: com.huawei.compass.AreaGraphModel
|
||||
},
|
||||
sparkline: {
|
||||
name: "sparkline",
|
||||
metrics: true,
|
||||
view: com.huawei.compass.SparkGraph,
|
||||
model: com.huawei.compass.SparkGraphModel
|
||||
},
|
||||
all: {
|
||||
name: "all",
|
||||
alarms: true,
|
||||
view: com.huawei.compass.BlockGraph,
|
||||
model: com.huawei.compass.BlockGraphModel,
|
||||
value:""
|
||||
},
|
||||
|
||||
critical: {
|
||||
name: "critical",
|
||||
alarms: true,
|
||||
view: com.huawei.compass.BlockGraph,
|
||||
model: com.huawei.compass.BlockGraphModel,
|
||||
value:"critical"
|
||||
},
|
||||
warning: {
|
||||
name: "warning",
|
||||
alarms: true,
|
||||
view: com.huawei.compass.BlockGraph,
|
||||
model: com.huawei.compass.BlockGraphModel,
|
||||
value:"minor"
|
||||
},
|
||||
success: {
|
||||
name: "success",
|
||||
alarms: true,
|
||||
view: com.huawei.compass.BlockGraph,
|
||||
model: com.huawei.compass.BlockGraphModel,
|
||||
value:"positive"
|
||||
},
|
||||
unknown: {
|
||||
name: "unknown",
|
||||
alarms: true,
|
||||
view: com.huawei.compass.BlockGraph,
|
||||
model: com.huawei.compass.BlockGraphModel,
|
||||
value:"info"
|
||||
},
|
||||
tree: {
|
||||
name: "tree",
|
||||
topos: true,
|
||||
view: com.huawei.compass.TreeGraph,
|
||||
model: com.huawei.compass.TreeGraphModel,
|
||||
value:"info"
|
||||
}
|
||||
},
|
||||
styles:{
|
||||
"switch":"/assets/images/switch.png",
|
||||
"server":"/assets/images/server.png",
|
||||
"service":"/assets/images/switch.png",
|
||||
"running":"#669900",
|
||||
"error" : "#CC0000",
|
||||
"warning" : "#ffff33",
|
||||
"unknown" : "#33b5e5"
|
||||
}
|
||||
})
|
||||
*/
|
||||
|
||||
.controller('alarmsCtrl', ['$scope', '$http', 'graphConfigurations', 'graphService',
|
||||
function($scope, $http, graphConfigurations, graphService) {
|
||||
$scope.uris = graphService.getUris(graphConfigurations,"alarms");
|
||||
$scope.renderers = graphService.getRenderers(graphConfigurations,"alarms");
|
||||
$scope.rendererChanged = graphService.getRendererListener($scope);
|
||||
$scope.uriChanged = graphService.getUriListener($scope);
|
||||
$scope.alertsData = {"id":"server-1.huawei.com","name":"server-1.huawei.com","resource":"hosts","state":"running","type":"server", "metrics":[], "alarms":[
|
||||
{"id":"critical","name":"critical","data":[
|
||||
{"start":1406831282409,"end":1406870037149},
|
||||
{"start":1406745382748,"end":1406761927670}
|
||||
]},
|
||||
{"id":"minor","name":"minor","data":[
|
||||
{"start":1406873957790,"end":1406886655198},
|
||||
{"start":1406774590378,"end":1406850781190}
|
||||
]},
|
||||
{"id":"positive","name":"positive","data":[
|
||||
{"start":1406873957790,"end":1406886655198},
|
||||
{"start":1406774590378,"end":1406850781190}
|
||||
]},
|
||||
{"id":"info","name":"info","data":[
|
||||
{"start":1406873957790,"end":1406886655198},
|
||||
{"start":1406774590378,"end":1406850781190}
|
||||
]}
|
||||
]};
|
||||
$scope.changeSeriesData = graphService.getDataListener($scope, function(data) {
|
||||
var uri = $scope.uri;
|
||||
console.log("URI is .....", uri);
|
||||
var renderer = $scope.renderer;
|
||||
var isValidApi = (uri == graphConfigurations.apis["192.168.255.85.hostgroup"].uri.v);
|
||||
if (isValidApi) for (var i = 0; i < data.length; i++) data[i].name = data[i].id;
|
||||
var gFormatter = com.huawei.compass.formatter.hourminute;
|
||||
var gName = "Alarms";
|
||||
var gData = isValidApi ? data : data.groups[0].hosts;
|
||||
// TODO(jiahua): graphConfigurations.renderers[renderer] is undefined
|
||||
var gProperty = graphConfigurations.renderers[renderer].value;
|
||||
var view = new graphConfigurations.renderers[renderer].view({
|
||||
name: gName,
|
||||
model: new graphConfigurations.renderers[renderer].model({data:gData, propertyKey:"alarms", propertyName:gProperty}).model,
|
||||
formatter: gFormatter,
|
||||
yFormatter: d3.format('.3e'),
|
||||
css: "chart-title",
|
||||
width: 500,
|
||||
height: 500,
|
||||
css: {
|
||||
"header":"chart-title",
|
||||
"critical" : "alarm-critical",
|
||||
"major" : "alarm-major",
|
||||
"minor" : "alarm-minor",
|
||||
"info" : "alarm-info",
|
||||
"positive" : "alarm-positive"
|
||||
},
|
||||
listener: function(d) {
|
||||
alert("Alarm Selected (" + d.startDate + ", " + d.endDate + ")");
|
||||
}
|
||||
});
|
||||
$.graphs.get("alarmsGraphContainer").innerHTML = "";
|
||||
$.graphs.get("alarmsGraphContainer").appendChild(view);
|
||||
});
|
||||
}
|
||||
])
|
||||
|
||||
|
||||
.controller('monitoringCtrl', ['$scope',
|
||||
function($scope) {
|
||||
$scope.options = {
|
||||
@ -294,6 +478,8 @@ angular.module('compass.monitoring', [
|
||||
};
|
||||
$scope.serverCount = 9;
|
||||
|
||||
//$scope.topoDropDown = 'service';
|
||||
|
||||
$scope.exampleData = [{
|
||||
"key": "Series 1",
|
||||
"values": [
|
||||
|
||||
1
v2/src/app/monitoring/nagios.tpl.html
Normal file
1
v2/src/app/monitoring/nagios.tpl.html
Normal file
@ -0,0 +1 @@
|
||||
hosts
|
||||
@ -1,14 +1,106 @@
|
||||
<div class="page-header">
|
||||
<h1>
|
||||
Monitoring Overview
|
||||
Cluster Overview
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="container row side-padding-0 top-padding-0">
|
||||
<div class="toc" id="toc">
|
||||
<ul class="tiles">
|
||||
<li>
|
||||
<a href="javascript::getSummary(01_intro);">
|
||||
<em> 1</em>
|
||||
<br>
|
||||
Cluster Summary
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript::getSummary(02_quickstart);">
|
||||
<em> 2</em>
|
||||
<br>
|
||||
Controller
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript::getSummary(01_intro);">
|
||||
<em> 3</em>
|
||||
<br>
|
||||
Alerts
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript::getSummary(01_intro);">
|
||||
<em> 4</em>
|
||||
<br>
|
||||
Compute
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript::getSummary(01_intro);">
|
||||
<em> 5</em>
|
||||
<br>
|
||||
Security
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript::getSummary(01_intro);">
|
||||
<em> 6</em>
|
||||
<br>
|
||||
Database
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript::getSummary(01_intro);">
|
||||
<em> 7</em>
|
||||
<br>
|
||||
Image
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript::getSummary(01_intro);">
|
||||
<em> 8</em>
|
||||
<br>
|
||||
Store
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript::getSummary(01_intro);">
|
||||
<em> 9</em>
|
||||
<br>
|
||||
Message Bus
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript::getSummary(01_intro);">
|
||||
<em> 10</em>
|
||||
<br>
|
||||
Processes
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript::getSummary(01_intro);">
|
||||
<em> 11</em>
|
||||
<br>
|
||||
Monitoring
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript::getSummary(01_intro);">
|
||||
<em> 12</em>
|
||||
<br>
|
||||
Users
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row side-padding-10 top-padding-10" ng-controller="moniOverviewCtrl">
|
||||
<div class="col-xs-12">
|
||||
<div ng-repeat="role in logicalTopoData.children" class="well pull-left">
|
||||
<span>{{role.name}}</span>
|
||||
<span>{{role.children.length}}</span>
|
||||
<span>{{role.state}}</span>
|
||||
<span>{{role.children.length}}</span> <br/>
|
||||
{{role.state}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -27,36 +119,4 @@
|
||||
</nvd3-stacked-area-chart>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 top-padding-10">
|
||||
<div class="row">
|
||||
<div class="col-lg-7">
|
||||
<circlepacking data="logicalTopoData"></circlepacking>
|
||||
</div>
|
||||
<div class="col-lg-5">
|
||||
<nvd3-line-chart
|
||||
data="exampleData"
|
||||
id="exampleId2"
|
||||
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>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-xs-12 top-padding-10">
|
||||
<treechart id="physicalTopo" data="physicalTopoData" count="serverCount" style="width: 1280px">
|
||||
</treechart>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
18
v2/src/app/monitoring/topology.tpl.html
Normal file
18
v2/src/app/monitoring/topology.tpl.html
Normal file
@ -0,0 +1,18 @@
|
||||
<div class="page-header">
|
||||
<h1>
|
||||
Topology
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-10" ng-controller="moniOverviewCtrl" style="width: 100%;">
|
||||
<tabset class="ng-isolate-scope" style="width: 100%;">
|
||||
<tab heading="Physical View" > Layer 2/3 Topology
|
||||
<treechart id="physicalTopo" data="physicalTopoData" count="serverCount" style="width: 100%; height: 1280px; transition: 0.4s all ease-out;"> </treechart>
|
||||
</tab>
|
||||
|
||||
<tab heading="Service View" > Service Diagram
|
||||
<circlepacking id="logicalTopo" data="logicalTopoData" style="display: block; margin-left: auto; margin-right: auto; width: 100%; height: 1280px; transition: 0.4s all ease-out;"></circlepacking>
|
||||
</tab>
|
||||
</tabset>
|
||||
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user