Karnan t c has uploaded a new change for review.
Change subject: [WIP]: gluster-nagios-monitoring dashboard
......................................................................
[WIP]: gluster-nagios-monitoring dashboard
Change-Id: Id3cb62add90cda70318e155c06ec80ceecb91e78
Signed-off-by: Karnan TC <kchid...@redhat.com>
---
M gluster-nagios-monitoring/gluster-nagios-monitoring.json
A gluster-nagios-monitoring/src/css/mystyle.css
M gluster-nagios-monitoring/src/dashboard.html
A gluster-nagios-monitoring/src/images/bricks.png
A gluster-nagios-monitoring/src/images/cluster.png
A gluster-nagios-monitoring/src/images/hosts.png
A gluster-nagios-monitoring/src/images/volumes.png
M gluster-nagios-monitoring/src/js/services.js
8 files changed, 113 insertions(+), 37 deletions(-)
git pull ssh://gerrit.ovirt.org:29418/samples-uiplugins
refs/changes/80/29280/1
diff --git a/gluster-nagios-monitoring/gluster-nagios-monitoring.json
b/gluster-nagios-monitoring/gluster-nagios-monitoring.json
index c05e553..a94c601 100644
--- a/gluster-nagios-monitoring/gluster-nagios-monitoring.json
+++ b/gluster-nagios-monitoring/gluster-nagios-monitoring.json
@@ -1,5 +1,11 @@
{
"name": "GlusterNagiosMonitoring",
"url": "plugin/GlusterNagiosMonitoring/start.html",
- "resourcePath": "gluster-nagios-monitoring"
+ "resourcePath": "gluster-nagios-monitoring",
+ "config": {
+ "showDashboard": "true",
+ "messageOrigins":["http://localhost.localdomain:8080";],
+ "pnp4nagiosUrl" : "http://10.70.43.162";
+ }
+ }
}
diff --git a/gluster-nagios-monitoring/src/css/mystyle.css
b/gluster-nagios-monitoring/src/css/mystyle.css
new file mode 100644
index 0000000..15fad6a
--- /dev/null
+++ b/gluster-nagios-monitoring/src/css/mystyle.css
@@ -0,0 +1,34 @@
+.dash-obj{
+ margin:25px 0px;
+ border:solid 1px #e1e1e8;
+ border-radius: 3px;
+ position:relative;
+ float:left;
+ width:100%
+}
+.big-number{
+ font-size:80px;
+ font-weight:lighter;
+ font-family:sans-serif;
+ text-align:center;
+ width:100%;
+ float:left;
+ height:100px;
+ position:relative;
+ color:#5cb85c;
+}
+.state-normal{
+ background-color:rgba(92, 184, 92,0.2);
+ color:#5cb85c;
+}
+.clear{
+ clear:both;
+}
+.item-name{
+ border-top:solid 1px #e1e1e8;
+ overflow:auto;
+}
+.alert{
+ margin-bottom: 5px;
+ padding: 1px 5px;
+}
diff --git a/gluster-nagios-monitoring/src/dashboard.html
b/gluster-nagios-monitoring/src/dashboard.html
index 7f60f20..0a58d46 100644
--- a/gluster-nagios-monitoring/src/dashboard.html
+++ b/gluster-nagios-monitoring/src/dashboard.html
@@ -5,7 +5,8 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
- <link href="css/dashboard.css" rel="stylesheet"/>
+ <link href="css/dashboard.css" rel="stylesheet"/>
+ <link href="css/mystyle.css" rel="stylesheet"/>
<script src="lib/angular/js/angular.min.js"></script>
<script src="lib/ui-bootstrap/js/ui-bootstrap-tpls.min.js"></script>
@@ -13,37 +14,61 @@
<script src="js/dashboard.js"></script>
</head>
<body ng-app="dashboardApp">
- <div class="dashboard-panel">
+ <div class="dashboard-panel">
<div ng-controller="SummaryCtrl">
- <table class="table table-striped">
- <thead>
- <tr>
- <th> Clusters </th>
- <th> Hosts </th>
- <th> Volumes </th>
- <th> Bricks </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> {{summary.no_of_clusters}} </td>
- <td>
- {{summary.hosts_up}} <img
src="images/up.png"/>
- {{summary.hosts_down}} <img
src="images/down.png"/>
- </td>
- <td>
- {{summary.volumes_up}} <img
src="images/up.png"/>
- {{summary.volumes_down}} <img
src="images/down.png"/>
- </td>
- <td>
- {{summary.bricks_up}} <img
src="images/up.png"/>
- {{summary.bricks_down}} <img
src="images/down.png"/>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
+ <div class="container-fluid">
+ <div class="row">
+ <div class="col-md-3">
+ <div class="dash-obj">
+ <div class="progress"
style="margin:0;">
+ <div
class="progress-bar progress-bar-success" style="width:
100%">{{summary.no_of_clusters}}</div>
+ </div>
+ <div class="big-number
state-normal">{{summary.no_of_clusters}}</div>
+ <div class="clear
item-name"><img src="./images/cluster.png">Clusters</div>
+ </div>
+ </div>
+ <div class="col-md-3">
+ <div class="dash-obj">
+ <div class="progress"
style="margin:0;">
+ <div
class="progress-bar progress-bar-success"
+ style="width:
{{summary.hosts_up/(summary.hosts_up+summary.hosts_down)*100}}%">{{summary.hosts_up}}</div>
+ <div
class="progress-bar progress-bar-danger"
+style="width:
{{summary.hosts_down/(summary.hosts_up+summary.hosts_down)*100}}%">{{summary.hosts_down}}</div>
+ </div>
+ <div class="big-number
state-normal">{{summary.hosts_up+summary.hosts_down}}</div>
+ <div class="clear
item-name"><img src="./images/hosts.png">Hosts</div>
+ </div>
+ </div>
+
+ <div class="col-md-3">
+ <div class="dash-obj">
+ <div class="progress"
style="margin:0;">
+ <div
class="progress-bar progress-bar-success"
+ style="width:
{{summary.volumes_up/(summary.volumes_up+summary.volumes_down)*100}}%">{{summary.volumes_up}}</div>
+ <div
class="progress-bar progress-bar-danger"
+style="width:
{{summary.volumes_down/(summary.volumes_up+summary.volumes_down)*100}}%">{{summary.volumes_down}}</div>
+ </div>
+ <div class="big-number
state-normal">{{summary.volumes_up+summary.volumes_down}}</div>
+ <div class="clear
item-name"><img src="./images/volumes.png">Volumes</div>
+ </div>
+ </div>
+
+ <div class="col-md-3">
+ <div class="dash-obj">
+ <div class="progress"
style="margin:0;">
+ <div
class="progress-bar progress-bar-success"
+ style="width:
{{summary.bricks_up/(summary.bricks_up+summary.bricks_down)*100}}%">{{summary.bricks_up}}</div>
+ <div
class="progress-bar progress-bar-danger"
+style="width:
{{summary.bricks_down/(summary.bricks_up+summary.bricks_down)*100}}%">{{summary.bricks_down}}</div>
+ </div>
+ <div class="big-number
state-normal">{{summary.bricks_up+summary.bricks_down}}</div>
+ <div class="clear
item-name"><img src="./images/bricks.png">Bricks</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
<div class="panel panel-danger" ng-controller="AlertsCtrl">
<div class="panel-heading">
<h3 class="panel-title">
@@ -55,8 +80,8 @@
<div class="panel-body" ng-if="alerts.length==0">
No Alerts present
</div>
- <div ng-if="alerts.length>0">
- <table class="table table-striped table-condensed
table-bordered">
+ <div class="panel-body"
style="overflow-x=auto;overflow-y:scroll;height:250px;" ng-if="alerts.length>0">
+ <!-- <table class="table table-striped table-condensed
table-bordered">
<thead>
<tr>
<th style="width:40%"> Description</th>
@@ -74,9 +99,20 @@
</tr>
</tbody>
</table>
+ -->
+ <div ng-repeat="alert in alerts" class="alert
alert-danger alert-dismissable" style="background-color:#fff;border:solid 1px
#e1e1e8;
+ color:#666;">
+
+ <button type="button" class="close"
data-dismiss="alert" aria-hidden="true">×</button>
+
+ <strong style="color:#D9534F"><span
class="glyphicon glyphicon-warning-sign"></span>
+ Alert</strong><div
style="color:gray;float:right;">{{alert.time | date:'medium'}}</div><br/>
+ {{alert.description}}
+ </div>
</div>
</div>
-
+ </div>
+ <!--
<div ng-controller="ClustersCtrl">
<accordion close-others="false">
<accordion-group is-open="isopen" ng-repeat="cluster in
clusters">
@@ -90,6 +126,6 @@
</accordion-group>
</accordion>
</div>
- </div>
+ -->
</body>
</html>
diff --git a/gluster-nagios-monitoring/src/images/bricks.png
b/gluster-nagios-monitoring/src/images/bricks.png
new file mode 100644
index 0000000..61f90c1
--- /dev/null
+++ b/gluster-nagios-monitoring/src/images/bricks.png
Binary files differ
diff --git a/gluster-nagios-monitoring/src/images/cluster.png
b/gluster-nagios-monitoring/src/images/cluster.png
new file mode 100644
index 0000000..5131237
--- /dev/null
+++ b/gluster-nagios-monitoring/src/images/cluster.png
Binary files differ
diff --git a/gluster-nagios-monitoring/src/images/hosts.png
b/gluster-nagios-monitoring/src/images/hosts.png
new file mode 100644
index 0000000..7579ede
--- /dev/null
+++ b/gluster-nagios-monitoring/src/images/hosts.png
Binary files differ
diff --git a/gluster-nagios-monitoring/src/images/volumes.png
b/gluster-nagios-monitoring/src/images/volumes.png
new file mode 100644
index 0000000..b818c13
--- /dev/null
+++ b/gluster-nagios-monitoring/src/images/volumes.png
Binary files differ
diff --git a/gluster-nagios-monitoring/src/js/services.js
b/gluster-nagios-monitoring/src/js/services.js
index ba0c39e..714de64 100644
--- a/gluster-nagios-monitoring/src/js/services.js
+++ b/gluster-nagios-monitoring/src/js/services.js
@@ -5,7 +5,7 @@
var alertService = function ($http) {
return {
getAlerts: function() {
- return $http({method: 'GET', url:
'/api/events?search=severity%3Dalert', headers: {Accept: 'application/json'}}).
+ return $http({method: 'GET', url:
'/api/events', headers: {Accept: 'application/json'}}).
then(function (response) {
if(typeof response.data.event
!== 'undefined') {
return
response.data.event;
@@ -85,4 +85,4 @@
}(
angular.module('plugin.dashboard.services', [])
-));
\ No newline at end of file
+));
--
To view, visit http://gerrit.ovirt.org/29280
To unsubscribe, visit http://gerrit.ovirt.org/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Id3cb62add90cda70318e155c06ec80ceecb91e78
Gerrit-PatchSet: 1
Gerrit-Project: samples-uiplugins
Gerrit-Branch: master
Gerrit-Owner: Karnan t c <kchid...@redhat.com>
_______________________________________________
Engine-patches mailing list
Engine-patches@ovirt.org
http://lists.ovirt.org/mailman/listinfo/engine-patches
