Skip to content

Instantly share code, notes, and snippets.

@jamescookie

jamescookie/index.html

Last active October 20, 2015 22:54
Show Gist options
  • Save jamescookie/ba47f44cfab6d47706f7 to your computer and use it in GitHub Desktop.
Save jamescookie/ba47f44cfab6d47706f7 to your computer and use it in GitHub Desktop.
Download ZIP
Docker monitor web ui
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Docker Monitor</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.2/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css"/>
<script type="text/javascript">
angular.module("docker", ['ui.bootstrap'])
.service('dockerService', function($http) {
this.containers = function(server) {
return $http({
method: 'GET',
url: 'http://'+server+'/containers/json',
params: {'all': 1},
headers: {'Accept': 'application/json'}
});
};
this.stop = function(server, id) {
return $http.post('http://'+server+'/containers/'+id+'/stop', {});
};
this.start = function(server, id) {
return $http.post('http://'+server+'/containers/'+id+'/start', {});
};
this.remove = function(server, id) {
return $http({
method: 'DELETE',
url: 'http://'+server+'/containers/'+id,
params: {'v': 1}
});
};
})
.directive('sortableTableHeading', function() {
return {
restrict: 'E',
scope: {
heading: "@heading",
reverseSort: "=reverseSort",
orderByField: "=orderByField"
},
replace: true,
templateUrl: 'sortableTableHeading.html'
};
})
.filter('capitalize', function() {
return function(input, scope) {
if (input!=null) input = input.toLowerCase();
return input.substring(0,1).toUpperCase()+input.substring(1);
};
})
.controller('hosts', function ($scope) {
$scope.hosts = ['localhost:8081', 'localhost:8082', 'localhost:8083'];
})
.controller('host', function($scope, dockerService) {
var dockerFunction = function(what) {
return function(id) {
dockerService[what]($scope.host, id).then(function() {
$scope.alerts.push({type: 'success', msg: id + ' successfully '+ what});
//todo refresh
}, function(response) {
$scope.alerts.push({type: 'danger', msg: 'Unable to '+what+' container ('+id+'): '+(response.data || 'Request failed')+' ('+response.status+')'});
});
}
};
$scope.containers = null;
$scope.alerts = [];
$scope.orderByField = 'Status';
$scope.reverseSort = true;
$scope.closeAlert = function(index) { $scope.alerts.splice(index, 1); };
$scope.stop = dockerFunction('stop');
$scope.start = dockerFunction('start');
$scope.remove = dockerFunction('remove');
dockerService.containers($scope.host).then(function(response) {
$scope.containers = response.data;
}, function(response) {
$scope.alerts.push({type: 'danger', msg: 'Unable to get container information: '+(response.data || 'Request failed')+' ('+response.status+')'});
});
})
.controller('container', function($scope, dockerService) {
var image = $scope.container.Image.split('/')[1].split(':');
$scope.container.image = image[0];
$scope.container.version = image.length > 1 ? image[1] : '';
$scope.container.up = $scope.container.Status.startsWith('Up');
});
</script>
</head>
<body>
<div data-ng-app="docker" data-ng-controller="hosts" class="container">
<script type="text/ng-template" id="sortableTableHeading.html">
<div><a href="#" data-ng-click="orderByField=heading; reverseSort = !reverseSort">{{heading|capitalize}}</a>&nbsp;<span data-ng-show="orderByField == heading"><span data-ng-hide="reverseSort"><sup>^<sup></span><span data-ng-show="reverseSort"><sub>v</sub></span></span></div>
</script>
<h1>Docker Monitor</h1>
<uib-tabset>
<uib-tab data-ng-repeat="host in hosts" heading="{{host}}">
<div data-ng-controller="host">
<table class="table table-striped" data-ng-show="containers">
<thead>
<tr>
<th width="20%">ID</th>
<th width="20%"><sortable-table-heading heading="image" order-by-field="orderByField" reverse-sort="reverseSort"></th>
<th width="20%"><sortable-table-heading heading="version" order-by-field="orderByField" reverse-sort="reverseSort"></th>
<th width="20%"><sortable-table-heading heading="Status" order-by-field="orderByField" reverse-sort="reverseSort"></th>
<th width="20%">Operation</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="container in containers|orderBy:orderByField:reverseSort" data-ng-controller="container">
<td>{{container.Id}}</td>
<td>{{container.image}}</td>
<td>{{container.version}}</td>
<td>{{container.Status}}</td>
<td>
<button type="button" class="btn btn-warning" data-ng-show="{{container.up}}" data-ng-click="stop(container.Id)">Stop</button>
<button type="button" class="btn btn-success" data-ng-hide="{{container.up}}" data-ng-click="start(container.Id)">Start</button>
<button type="button" class="btn btn-danger" data-ng-hide="{{container.up}}" data-ng-click="remove(container.Id)">Remove</button>
</td>
</tr>
</tbody>
</table>
<uib-alert data-ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</uib-alert>
</div>
</uib-tab>
</uib-tabset>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment