Service Status
Show the status of services running in your organisation.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato:300,400,700" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" />
<title>Service Status</title>
</head>
<body ng-app="status" ng-controller="statusCtrl">
<div class="container">
<div class="row">
<section class="col-md-7">
<header>
<h1>Service Status</h1>
</header>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default" ng-repeat="service in status.services">
<div class="panel-heading" role="tab" id="heading{{$index}}">
<h4 class="panel-title">
<span class="service-status service-{{service.status}}" ng-repeat="message in status.messages" ng-show="message.status=='{{service.status}}'" title="{{message.message}}"></span><a data-toggle="collapse" data-parent="#accordion" href="#collapse{{$index}}" aria-expanded="false" aria-controls="collapse{{$index}}" ng-class="getClass($index)" ng-click="toggleSelect($index)"><i class="fa fa-{{getIcon($index)}}-circle"></i>{{service.name}}</a>
</h4>
</div><!-- / .panel-heading -->
<div id="collapse{{$index}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{{$index}}">
<div class="panel-body">
<h4>Service Status <span class="label label-default service-status-label service-{{service.status}}">{{service.status}}</span></h4>
<p class="service-statusinfo" ng-repeat="message in status.messages" ng-show="message.status=='{{service.status}}'">{{message.message}}</p>
<hr/>
<a href="#" class="btn btn-default service-btn"><i class="fa fa-send-o"></i> Report an Issue</a> <a href="#" class="btn btn-default service-btn"><i class="fa fa-support"></i> Support with {{service.name}}</a>
<a href="#" class="btn btn-default service-btn"><i class="fa fa-sign-in"></i> {{service.name}} Sign-In</a>
<hr/>
<h4><i class="fa fa-twitter"></i> Recent Updates for {{service.name}}</h4>
<dl>
<dt>Donec semper risus <span class="text-muted">23 Dec 14</span></dt>
<dd><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper risus id gravida vestibulum.</p></dd>
<dt>Consectetur adipiscing <span class="text-muted">22 Dec 14</span></dt>
<dd><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></dd>
</dl>
<hr/>
<h4>Service Summary</h4>
<table class="table table-striped service-status-table">
<tr>
<td>{{service.name}} <span class="text-muted">({{service.fullname}})</span></td>
</tr>
<tr>
<td ng-bind-html="service.description | toTrusted"></td>
</tr>
<tr>
<td><a href="#">More information on {{service.name}} <i class="fa fa-external-link-square"></i></a></td>
</tr>
</table>
<hr/>
</div><!-- / .panel-body -->
</div><!-- / .panel-collapse -->
</div><!-- / .panel -->
</div><!-- / .panel-group -->
</section>
</div><!-- / .row -->
</div><!-- / .container -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-sanitize.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
// Import /////////////////////////////////////////////////////////////////////
// Import /////////////////////////////////////////////////////////////////////
'https://raw.githubusercontent.com/twbs/bootstrap/master/less/bootstrap.less';
// Mixins /////////////////////////////////////////////////////////////////////
.transition( : all .2s linear){
-moz-transition: ;
-ms-transition: ;
-o-transition: ;
-webkit-transition: ;
transition: ;
}
// Type ///////////////////////////////////////////////////////////////////////
body{
font-family: 'Lato' sans-serif;
}
h1{
margin-bottom: 35px;
}
a{
color: #0A51A1;
}
// Panels /////////////////////////////////////////////////////////////////////
.panel-title .fa-plus-circle, .panel-title .fa-minus-circle{
color: #ccc;
margin: 0 5px 0 -5px;
}
.panel-group .panel{
border-radius: 0;
}
.panel-title{
position: relative;
a:hover, a:focus{
text-decoration: none;
}
}
.panel-body{
position: relative;
p{
margin-bottom: 10px;
}
h4{
position: relative;
}
}
.panel-body{
h4{
margin-bottom: 15px;
position: relative;
}
}
// Service Status /////////////////////////////////////////////////////////////
.service{
position: relative;
}
.service-status{
background: #ccc;
border-radius: 50%;
color: #fff;
height: 15px;
margin: 1px -3px 0 0;
padding: 0;
position: absolute;
right: 0;
top: 0;
width: 15px;
}
.service-status-label{
font-size: 0.6em;
margin: 3px 0 0 10px;
position: absolute;
text-transform: uppercase;
}
// Status colours ///////////////////////////////
.service-normal{
background: #0E7F11; // green
}
.service-issues{
background: #FAC430; // yellow
}
.service-down{
background: #ED423C; // red
}
// Service info /////////////////////////////////
.service-statusinfo{
font-size: 1.2em;
}
.service-status-table{
margin: 20px 0 30px 0;
}
.service-status-table td a .fa{
color: #ccc;
margin-left: 3px;
}
// Muted text ///////////////////////////////////
.service-status span.text-muted{
font-weight: normal;
}
dt span.text-muted{
margin-left: 5px;
}
// Buttons //////////////////////////////////////
.service-btn{
.transition();
border-radius: 0;
margin-bottom: 0;
.fa{
color: #333 !important;
margin-right: 3px;
}
}
(function(){
(function(){
'use strict';
var model = {
'messages': [
{
status: 'normal',
message: 'Everything is running as normal.'
},
{
status: 'issues',
message: 'We are currently experiencing issues and are working to resolve them.'
},
{
status: 'down',
message: 'This service is currently down. We are working on the issues.'
}
],
'services': [
{
name: 'Email',
fullname: 'University Email',
status: 'normal',
status_type: 'email',
scheduled_change: 'false',
service_call_no: '',
status_audience: 'All Staff & Students',
url: '//www.uni.ac.uk/it/services/email/',
description: 'The University email service is Office365 supported by IT. Current Students, Applicants and Staff have access available via <a href=\"http://webmail.uni.ac.uk\">http://webmail.uni.ac.uk<\/a>'
},
{
name: 'CMS',
fullname: 'Content Management System',
status: 'issues',
status_type: 'website',
scheduled_change: 'false',
service_call_no: '67890',
status_audience: 'Staff',
url: '//www.uni.ac.uk/',
description: 'The CMS publishes the University websites. Issues relating to the CMS can be unrelated to University websites. Website users should not be impacted by any disruption to this service.'
},
{
name: 'VLE',
fullname: 'Student Portal',
status: 'down',
status_type: 'application',
scheduled_change: 'false',
call_no: '67890',
status_audience: 'Staff',
url: '//www.uni.ac.uk/vle/',
description: 'The VLE is the University\'s web-based student portal, giving our students access to learning materials, student clubs and societies, and many other resources. It also provides access to webmail.'
}
]};
var app = angular.module('status', [ 'ngSanitize']);
app.filter('toTrusted', ['$sce', function($sce){
return function(text) {
return $sce.trustAsHtml(text);
};
}]);
app.controller('statusCtrl', function($scope){
$scope.status = model;
$scope.selectedIndex = -1;
// Toggle icons
$scope.toggleSelect = function(ind){
if(ind === $scope.selectedIndex){
$scope.selectedIndex = -1;
}else{
$scope.selectedIndex = ind;
}
}
$scope.getClass = function(ind){
if(ind === $scope.selectedIndex){
return 'selected';
}else{
return '';
}
}
$scope.getIcon = function(ind){
if(ind === $scope.selectedIndex){
return 'minus';
}else{
return 'plus';
}
}
});
})();