queen-monitor-plugin
Version:
A monitoring endpoint for queen
131 lines (116 loc) • 3.99 kB
HTML
<html lang="en" ng-app="monitor">
<head>
<meta charset="utf-8">
<title>Queen Monitor</title>
<link rel="shortcut icon" href="favicon.png" />
<link rel="stylesheet" href="queen-monitor.css" type="text/css">
</head>
<body>
<h1 ng-controller="status">
<img id="logo" src="favicon.png" /> Monitoring {{status}}
</h1>
<div ng-controller="hosts">
<div class="host-wrapper" ng-repeat="host in hosts">
<div ng-class="host.hostClass">
<div class="name" title="{{host.name}}">{{host.family}} {{host.majorVersion}}</div>
<div class="platform">{{host.platform}}</div>
<div class="details">
<div class="icon">
<img ng-src="image/{{host.iconName}}.png" />
</div>
<div class="workerCount">{{host.workerCount}}</div>
</div>
</div>
</div>
</div>
<script src="queen-monitor.js"></script>
<script>
var config = {};
if(typeof console !== "undefined"){
config.logger = function(message){
console.log(message);
};
}
var monitor = QueenMonitor("//" + window.location.host + "/monitor", config);
var browserIconNames = {
"Chrome": "chrome",
"Opera": "opera",
"Firefox": "firefox",
"Safari": "safari",
"IE": {
"6": "ie6",
"7": "ie6",
"8": "ie8-700",
"9": "ie-256",
"default": "ie-256"
},
"iPad": "ipad",
"iPhone": "iphone",
"Android": "android",
"default": "opera"
};
function getIconName(browserAttributes){
var versionedIconName,
iconName = browserIconNames[browserAttributes.family];
if(!iconName) return browserIconNames["default"];
if(typeof iconName === "string") return iconName;
versionedIconName = iconName[browserAttributes.version.major];
if(!versionedIconName){
if(browserAttributes.platform === "Android"){
return iconName["Android"];
}
return iconName["default"];
}
return versionedIconName;
}
var module = angular.module('monitor', []);
module.controller('hosts', function($scope){
monitor.on('disconnect', function(){
$scope.$apply(function(){
$scope.hosts = [];
});
});
monitor.on('update', function(){
$scope.$apply(function(){
var hosts = [],
providers = monitor.workerProviders,
provider, providerId, hostClass;
for(providerId in providers){
if(providers.hasOwnProperty(providerId)){
provider = providers[providerId];
hostClass = "host";
if(!provider.isResponsive) hostClass = "host host-unresponsive";
else if(!provider.isAvailable) hostClass = "host host-unavailable";
hosts.push({
name: provider.attributes.name || "Unknown",
platform: provider.attributes.os || "",
family: provider.attributes.family || "",
majorVersion: provider.attributes.version.major || 0,
workerCount: provider.workerCount,
iconName: getIconName(provider.attributes),
hostClass: hostClass
});
}
}
document.title = "(" + hosts.length + ") Queen Monitor";
$scope.hosts = hosts;
});
});
});
module.controller('status', function($scope){
$scope.status = "disconnected";
monitor.on('connect', function(){
$scope.$apply(function(){
$scope.status = window.location.host;
});
});
monitor.on('disconnect', function(){
$scope.$apply(function(){
$scope.status = "disconnected";
});
});
});
</script>
</body>
</html>