[icinga-checkins] icinga.org: icinga-web/master: * recoded status-summary charts to use html elements

git at icinga.org git at icinga.org
Tue Oct 13 15:44:56 CEST 2009


Module: icinga-web
Branch: master
Commit: 3f362df57d2c5d9ab2f39038bd6cae4345d4e22c
URL:    https://git.icinga.org/?p=icinga-web.git;a=commit;h=3f362df57d2c5d9ab2f39038bd6cae4345d4e22c

Author: Christian Doebler <christian.doebler at netways.de>
Date:   Thu Oct  8 16:11:31 2009 +0200

* recoded status-summary charts to use html elements

---

 .../models/System/StatusSummaryModel.class.php     |   10 +-
 .../templates/System/StatusSummarySuccess.php      |  174 ++++++++++----------
 pub/styles/Icinga.css                              |   30 +++-
 3 files changed, 120 insertions(+), 94 deletions(-)

diff --git a/app/modules/Cronks/models/System/StatusSummaryModel.class.php b/app/modules/Cronks/models/System/StatusSummaryModel.class.php
index e9852c7..0bad4d9 100644
--- a/app/modules/Cronks/models/System/StatusSummaryModel.class.php
+++ b/app/modules/Cronks/models/System/StatusSummaryModel.class.php
@@ -19,6 +19,7 @@ class Cronks_System_StatusSummaryModel extends ICINGACronksBaseModel
 			0	=> 'UP',
 			1	=> 'DOWN',
 			2	=> 'UNREACHABLE',
+			20	=> 'All',
 		),
 		'service'	=> array (
 			0	=> 'OK',
@@ -33,6 +34,7 @@ class Cronks_System_StatusSummaryModel extends ICINGACronksBaseModel
 			1	=> 'WARNING',
 			2	=> 'CRITICAL',
 			3	=> 'UNKNOWN',
+			20	=> 'All',
 		),
 	);
 
@@ -123,11 +125,11 @@ class Cronks_System_StatusSummaryModel extends ICINGACronksBaseModel
 							break;
 					}
 					$data = $this->getStatusDataCollection($this->type, $stateId, $stateCount);
-					if ($this->type == 'host' || $this->type == 'service') {
+//					if ($this->type == 'host' || $this->type == 'service') {
 						array_push($this->data, $data);
-					} else {
-						$this->data[$data['state_name']] = $data['count'];
-					}
+//					} else {
+//						$this->data[$data['state_name']] = $data['count'];
+//					}
 				}
 				if ($this->type != 'host' && $this->type != 'service') {
 					$this->data['type'] = $this->dataSources[$this->type]['title'];
diff --git a/app/modules/Cronks/templates/System/StatusSummarySuccess.php b/app/modules/Cronks/templates/System/StatusSummarySuccess.php
index f3f12e3..bee7545 100644
--- a/app/modules/Cronks/templates/System/StatusSummarySuccess.php
+++ b/app/modules/Cronks/templates/System/StatusSummarySuccess.php
@@ -11,6 +11,8 @@ var dummyCronkDisplayStateSummary = function () {
 	
 		cmp : Ext.getCmp("<?php echo $parentid; ?>"),
 		url : "<?php echo $ro->gen('icinga.cronks.statusSummary.json'); ?>?dtype=",
+
+		objectType : false,
 	
 		panelDefs : {
 			host : {
@@ -35,7 +37,7 @@ var dummyCronkDisplayStateSummary = function () {
 	
 		loaded : false,
 		storeCollection : new Array(),
-	
+
 		init : function (outputType) {
 			this.outputType = outputType;
 			this.createPanel();
@@ -219,93 +221,99 @@ var dummyCronkDisplayStateSummary = function () {
 			this.storeCollection.push(this.store);
 	
 		},
-	
+
 		showChart : function (type) {
-	
-			this.store = new Ext.data.JsonStore({
-				url: this.url + type + "chart",
-				root: "status_data.data",
-				autoLoad: false,
-				fields: ["type", "UP", "DOWN", "UNREACHABLE", "OK", "WARNING", "CRITICAL", "UNKNOWN"]
+			this.objectType = type;
+
+			var ajax = Ext.Ajax.request({
+				url : this.url + type + "chart",
+				params : false,
+				method : "GET",
+				success : this.showChartAjaxSuccess,
+				failure : this.showChartAjaxFail,
+				callback : this.showChartAjaxDefault,
+				scope: this,
+				timeout : 50000,
+				disableCaching : true,
 			});
-			this.store.load();
-	
-			var chart = new Ext.chart.StackedBarChart({
-				width: 150,
-				height: 80,
-				store: this.store,
-				yField: "type",
-				xAxis: new Ext.chart.NumericAxis({
-					stackingEnabled: true
-				}),
-				chartStyle: {
-					xAxis: {
-						majorGridLines: {size: 0},
-						showLabels: false,
-						margin: 0,
-						padding: 0
-					},
-					yAxis: {
-						showLabels: false,
-						margin: 0,
-						padding: 0
-					},
-					margin: 0,
-					padding: 0
-				},
-				series: [
-					{
-						xField: "UP",
-						displayName: "UP",
-						style: {
-							color: 0x00ff00
-						}
-					},{
-						xField: "DOWN",
-						displayName: "DOWN",
-						style: {
-							color: 0xff0000
-						}
-					},{
-						xField: "UNREACHABLE",
-						displayName: "UNREACHABLE",
-						style: {
-							color: 0xff8040
-						}
-					},{
-						xField: "OK",
-						displayName: "OK",
-						style: {
-							color: 0x00ff00
-						}
-					},{
-						xField: "WARNING",
-						displayName: "WARNING",
-						style: {
-							color: 0xffff00
-						}
-					},{
-						xField: "CRITICAL",
-						displayName: "CRITICAL",
-						style: {
-							color: 0xff0000
-						}
-					},{
-						xField: "UNKNOWN",
-						displayName: "UNKNOWN",
-						style: {
-							color: 0xff8040
-						}
+		},
+
+		showChartAjaxSuccess : function (response, o) {
+			var json = Ext.util.JSON.decode(response.responseText);
+			if (json.status_data.data.length) {
+				this.drawChart(json.status_data.data);
+			}
+		},
+
+		showChartAjaxFail : function (response, o) {
+			
+		},
+
+		showChartAjaxDefault : function (options, success, request) {
+			
+		},
+
+		drawChart : function (data) {
+			var numObjects = 0;
+			var graphElements = [];
+			var dataType = false;
+
+			for (var key in data) {
+				for (var statusDataKey in data[key]) {
+					if (statusDataKey != 0 && statusDataKey != 1 && statusDataKey != 2 && statusDataKey != 3 && statusDataKey != 4) {
+						break;
+					}
+					var statusData = data[key][statusDataKey];
+					if (dataType == false) {
+						dataType = statusData.type;
 					}
-				]
+					if (statusData.state_id == 20) {
+						numObjects = statusData.count;
+						continue;
+					}
+					if (statusData.count) {
+						var currentElement = {
+							status_id: statusData.state_id,
+							status_name: statusData.state_name,
+							status_count: statusData.count
+						};
+						graphElements.push(currentElement);
+					}
+				}
+			}
+
+			var containerWidth = (this.panel.getComponent(this.panelDefs.chart.itemId).body.dom.clientWidth / 2) - 60;
+			var numElements = graphElements.length;
+			var containerItems = [];
+
+			for (var x = 0; x < numElements; x++) {
+				var currentItem = {
+					cls: dataType + "-" + graphElements[x].status_id,
+					style: "width:" + parseInt((graphElements[x].status_count / numObjects) * containerWidth) + "px;"
+				};
+				containerItems.push(currentItem);
+			}
+
+			var container = new Ext.Container({
+				cls: "status-summary-" + dataType,
+				autoEl: 'div', 
+				layout: 'column',
+				defaults: {
+					xtype: 'container',
+					autoEl: 'div',
+					layout: 'auto',
+					style: {
+						border: "none"
+					}
+				},
+				items : containerItems
 			});
-	
-			this.panel.getComponent(this.panelDefs.chart.itemId).add(chart);
-	
-			this.storeCollection.push(this.store);
-	
+
+			var parentCmp = this.panel.getComponent(this.panelDefs.chart.itemId);
+			parentCmp.add(container);
+			parentCmp.doLayout();
 		}
-	
+
 	}
 	
 	CronkDisplayStateSummary.init("<?php echo $rd->getParameter('otype'); ?>");
diff --git a/pub/styles/Icinga.css b/pub/styles/Icinga.css
index d7c6261..3ce92d1 100644
--- a/pub/styles/Icinga.css
+++ b/pub/styles/Icinga.css
@@ -89,24 +89,24 @@ div.icinga-status span {
 	font-size: 8pt;
 }
 
-div.icinga-status-ok {
+div.icinga-status-ok, div.servicechart-0 {
 	background-color: #00cc00;
 }
 
-div.icinga-status-warning {
+div.icinga-status-warning, div.servicechart-1 {
 	background-color: #ffff00;
 }
 
-div.icinga-status-critical {
+div.icinga-status-critical, div.servicechart-2 {
 	background-color: #ff0000;
 	color: #fff;
 }
 
-div.icinga-status-up {
+div.icinga-status-up, div.hostchart-0 {
 	background-color: #00cc00;
 }
 
-div.icinga-status-down {
+div.icinga-status-down, div.hostchart-1 {
 	background-color: #cc0000;
 }
 
@@ -114,14 +114,30 @@ div.icinga-status-down span {
 	color: #fff;	
 }
 
-div.icinga-status-unreachable {
+div.icinga-status-unreachable, div.hostchart-2 {
 	background-color: #ff8000;
 }
 
-div.icinga-status-unknown {
+div.icinga-status-unknown, div.servicechart-3 {
 	background-color: #ff8000;
 }
 
+div.hostchart-0, div.hostchart-1, div.hostchart-2,
+div.servicechart-0, div.servicechart-1, div.servicechart-2, div.servicechart-3 {
+	height: 15px;
+}
+
+div.status-summary-hostchart {
+	float: left;
+	margin-top: 15px;
+}
+
+div.status-summary-servicechart {
+	float: right;
+	margin-top: 15px;
+	margin-right: 50px;
+}
+
 /** tables **/
 
 table.icinga-data-table {





More information about the icinga-checkins mailing list