public/index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>site-manager</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
<script async defer src="bower_components/requirejs/require.js" data-main="js/main"></script>
</head>
<body>
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#/">site-manager</a>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3" ng-controller="SiteNavCtrl">
<h3>Navigation</h3>
<ul>
<li>
<a href="#/sites">sites</a>
<ul>
<li ng-repeat="site in sites" class="site {{$isBusy ? busy : ''}}"
ng-title="$isBusy ? 'busy' : 'idle'">
<a href="#/sites/{{site.name}}">{{site.name}}</a>
<ul>
<li><a href="#/sites/{{site.name}}/tasks">tasks</a></li>
<li><a href="#/sites/{{site.name}}/backups">backups</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#/tasks">global tasks</a></li>
</ul>
</div>
<div class="col-md-9">
<div ng-controller="TaskAlertsCtrl">
<div ng-repeat="task in tasks | filter:isVisible | limitTo:4000" ng-class="'alert alert-'+(task.status == 'done' ? 'success' : task.status == 'failed' ? 'danger' : 'info')">
<button type="button" class="close" title="Hide" ng-click="hide(task)">×</button>
<span ng-class="'glyphicon glyphicon-' + (task.status == 'done' ? 'ok' : task.status == 'failed' ? 'exclamation-sign' : task.status == 'running' ? 'play' : 'time')"></span>
<strong>
<a ng-if="task.site" href="#/sites/{{task.site}}">{{task.site}}</a><span ng-if="!task.site">global</span>:
</strong>
<a href="#/{{task.site ? 'sites/' + task.site + '/' : ''}}tasks/{{task.id}}">{{task.name}} ({{task.status}})</a>
</div>
</div>
<div ng-view class="view-frame">
</div>
</div>
</div>
</div>
</html>