From 01ae47e942b06a39b385b948fb2e591d0edc1aae Mon Sep 17 00:00:00 2001 From: Lawrence Davison Date: Thu, 28 Aug 2014 22:17:07 -0700 Subject: [PATCH] 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 --- v2/assets/css/shelf.css | 242 ++++++++++++++++++++++++ v2/data/monitoring_nav.json | 20 +- v2/index.html | 2 + v2/src/app/monitoring/alerts.tpl.html | 30 +++ v2/src/app/monitoring/charts.tpl.html | 8 +- v2/src/app/monitoring/metrics.tpl.html | 33 ++++ v2/src/app/monitoring/monitoring.js | 186 ++++++++++++++++++ v2/src/app/monitoring/nagios.tpl.html | 1 + v2/src/app/monitoring/overview.tpl.html | 130 +++++++++---- v2/src/app/monitoring/topology.tpl.html | 18 ++ 10 files changed, 618 insertions(+), 52 deletions(-) create mode 100644 v2/assets/css/shelf.css create mode 100644 v2/src/app/monitoring/alerts.tpl.html create mode 100644 v2/src/app/monitoring/metrics.tpl.html create mode 100644 v2/src/app/monitoring/nagios.tpl.html create mode 100644 v2/src/app/monitoring/topology.tpl.html diff --git a/v2/assets/css/shelf.css b/v2/assets/css/shelf.css new file mode 100644 index 0000000..0328adf --- /dev/null +++ b/v2/assets/css/shelf.css @@ -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; + } +} diff --git a/v2/data/monitoring_nav.json b/v2/data/monitoring_nav.json index b5b4d7b..a5ec16e 100644 --- a/v2/data/monitoring_nav.json +++ b/v2/data/monitoring_nav.json @@ -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": "" }] diff --git a/v2/index.html b/v2/index.html index 3ec6ecf..de1452c 100644 --- a/v2/index.html +++ b/v2/index.html @@ -16,6 +16,8 @@ + + diff --git a/v2/src/app/monitoring/alerts.tpl.html b/v2/src/app/monitoring/alerts.tpl.html new file mode 100644 index 0000000..06243e9 --- /dev/null +++ b/v2/src/app/monitoring/alerts.tpl.html @@ -0,0 +1,30 @@ +
+

+ Alarming, Alerting, Event Log +

+
+ +
+ + Alerts +
+ + + +
+
+ + + + Alarms! + + Alarms - TBD + + Event Viewer - TBD + + +
diff --git a/v2/src/app/monitoring/charts.tpl.html b/v2/src/app/monitoring/charts.tpl.html index 9bd44a5..1a6cfc0 100644 --- a/v2/src/app/monitoring/charts.tpl.html +++ b/v2/src/app/monitoring/charts.tpl.html @@ -1,7 +1 @@ -
-

- Charts -

-
-
-
+ diff --git a/v2/src/app/monitoring/metrics.tpl.html b/v2/src/app/monitoring/metrics.tpl.html new file mode 100644 index 0000000..d854429 --- /dev/null +++ b/v2/src/app/monitoring/metrics.tpl.html @@ -0,0 +1,33 @@ +
+

+ Metrics +

+
+ + + + + + +
+ + Metrics +
+ + + +
+
+ + + + + +
+ + + diff --git a/v2/src/app/monitoring/monitoring.js b/v2/src/app/monitoring/monitoring.js index dd139da..0f53741 100644 --- a/v2/src/app/monitoring/monitoring.js +++ b/v2/src/app/monitoring/monitoring.js @@ -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": [ diff --git a/v2/src/app/monitoring/nagios.tpl.html b/v2/src/app/monitoring/nagios.tpl.html new file mode 100644 index 0000000..9b0b900 --- /dev/null +++ b/v2/src/app/monitoring/nagios.tpl.html @@ -0,0 +1 @@ +hosts \ No newline at end of file diff --git a/v2/src/app/monitoring/overview.tpl.html b/v2/src/app/monitoring/overview.tpl.html index d632c94..6022d49 100644 --- a/v2/src/app/monitoring/overview.tpl.html +++ b/v2/src/app/monitoring/overview.tpl.html @@ -1,14 +1,106 @@

- Monitoring Overview + Cluster Overview

+ +
+ +
+
{{role.name}} - {{role.children.length}} - {{role.state}} + {{role.children.length}}
+ {{role.state}}
@@ -27,36 +119,4 @@
-
-
-
- -
-
- - - - -
-
- -
-
- - -
- diff --git a/v2/src/app/monitoring/topology.tpl.html b/v2/src/app/monitoring/topology.tpl.html new file mode 100644 index 0000000..0d93a0f --- /dev/null +++ b/v2/src/app/monitoring/topology.tpl.html @@ -0,0 +1,18 @@ +
+

+ Topology +

+
+ +
+ + Layer 2/3 Topology + + + + Service Diagram + + + + +