Display Cube, Redis and Mongo server status

wa0x6e · May 30, 2013 · 9c4407e · 9c4407e
1 parent a2dd42e
commit 9c4407e
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 1 deletion.
diff --git a/src/ResqueBoard/View/header.ctp b/src/ResqueBoard/View/header.ctp
@@ -30,5 +30,41 @@
 	</head>
 	<body>
 		<div class="container">
+			<?php
+
+				$serviceStatus = array(
+					'Redis' => false,
+					'Mongo' => false,
+					'Cube' => false
+				);
+
+				try {
+					\ResqueBoard\Lib\Service\Service::Redis();
+					$serviceStatus['Redis'] = true;
+				} catch (\Exception $e) {
+					$serviceStatus['Redis'] = $e->getMessage();
+				}
+
+				try {
+					\ResqueBoard\Lib\Service\Service::Mongo();
+					$serviceStatus['Mongo'] = true;
+				} catch (\MongoConnectionException $e) {
+					$serviceStatus['Mongo'] = $e->getMessage();
+				}
+			?>
+			<ul id="server-status" class="unstyled">
+				<li class="title">server status</li>
+				<?php foreach ($serviceStatus as $name => $status) {
+					echo '<li data-server="'. strtolower($name) . '" data-placement="bottom" data-trigger="hover" data-event="popover" title="' . $name . ' server" class="status ';
+					if ($status === true) {
+						echo 'status-ok" data-content="The ' . $name . ' server is online">';
+					} elseif ($status !== false) {
+						echo 'status-error" data-content="Unable to connect to the ' . $name . ' server">';
+					} else {
+						echo 'status-unknown" data-content="<i class=\'icon-spinner icon-spin\'></i> Fetching the ' . $name . ' server status">';
+					}
+					echo '</li>';
+				} ?>
+			</ul>
 			<a class="brand" href="<?php echo URL_ROOT ?>"><em><?php echo APPLICATION_NAME ?></em>Analytics for Resque PHP</a>
 		</div>
diff --git a/src/ResqueBoard/webroot/css/less/main.less b/src/ResqueBoard/webroot/css/less/main.less
@@ -274,6 +274,7 @@ h3{
 		i[class^="icon-"], i[class*=" icon-"] {
 			font-weight: normal;
 			font-size: 2em;
+			display: block;
 		}
 
 		i.caret {
@@ -2148,3 +2149,42 @@ i[class^="icon-"], i[class*=" icon-"] {
 {
     display: none;
 }
+
+// Service status
+#server-status {
+	float: right;
+	margin-top: 1em;
+
+	@size: 11px;
+
+	.title {
+		text-transform: uppercase;
+		font-size: 10px;
+		font-weight: bold;
+		float: left;
+		margin-right: 7px;
+	}
+
+	.status {
+		width: @size;
+		height: @size;
+		display: block;
+		background-color: @colorShadeMinusTwo;
+		float: left;
+		margin-right: 3px;
+		border-radius: @size;
+		border: 4px solid darken(#33414c, 10);
+
+		&:hover {
+			border-color: darken(#33414c, 20);
+		}
+	}
+
+	.status-ok {
+		background-color: @green;
+	}
+
+	.status-error {
+		background-color: lighten(@red, 15);
+	}
+}
diff --git a/src/ResqueBoard/webroot/css/main.css b/src/ResqueBoard/webroot/css/main.css
diff --git a/src/ResqueBoard/webroot/js/app.js b/src/ResqueBoard/webroot/js/app.js
@@ -4,6 +4,7 @@ angular.module('app', ['ngResource', 'ui.bootstrap']);
 hljs.initHighlightingOnLoad();
 
 $("[data-event~=tooltip]").tooltip({html: true, container: "body"});
+$("[data-event~=popover]").popover({html: true});
 $("[data-event~=collapse-all]").on("click", function(e){ e.preventDefault(); $(".collapse.in").collapse("hide"); });
 $("[data-event~=expand-all]").on("click", function(e){ e.preventDefault(); $(".collapse").not(".in").collapse("show"); });
 
@@ -39,4 +40,35 @@ $(".infinite-scroll").infinitescroll({
         img: "http://www.infinite-scroll.com/loading.gif"
     },
     bufferPx: 5000
+});
+
+// Setting the server status icon
+var setStatus = function(status) {
+    var prop = {
+        message : "The Cube server is online",
+        iconClass : "icon-circle",
+        class : "status-ok"
+    };
+
+    if (status === false) {
+        prop.message = "Unable to connect to the Cube server";
+        prop.iconClass = "icon-info-sign";
+        prop.class = "status-error";
+    }
+
+    var dom = $("#server-status li[data-server=cube]");
+    dom.removeClass("status-unknown").addClass(prop.class);
+    dom.popover("destroy");
+    dom.popover({content: prop.message});
+};
+
+// Check Cube server status
+$.ajax({
+    type: "GET",
+    url: "//" + CUBE_URL + "/1.0/types/get?",
+    dataType: "json",
+    statusCode: {
+        200: function() {setStatus(true);},
+        404: function() {setStatus(false);}
+    }
 });