Compare commits
10 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
b940c7bfbd | ||
|
|
1460d69cd1 | ||
|
|
a7619b06ba | ||
|
|
f3a5251fd4 | ||
|
|
2ec247827d | ||
|
|
e7a836a6b2 | ||
|
|
6d163ee1ef | ||
|
|
a12c1916ec | ||
|
|
4e1a7077d7 | ||
|
|
da453a6b7c |
10
app/app.js
10
app/app.js
@@ -4,13 +4,13 @@ angular.module('uifordocker', [
|
||||
'ui.router',
|
||||
'ui.select',
|
||||
'ngCookies',
|
||||
'ngRoute',
|
||||
'ngSanitize',
|
||||
'dockerui.services',
|
||||
'dockerui.filters',
|
||||
'dashboard',
|
||||
'container',
|
||||
'containers',
|
||||
'docker',
|
||||
'images',
|
||||
'image',
|
||||
'pullImage',
|
||||
@@ -57,6 +57,11 @@ angular.module('uifordocker', [
|
||||
templateUrl: 'app/components/containerLogs/containerlogs.html',
|
||||
controller: 'ContainerLogsController'
|
||||
})
|
||||
.state('docker', {
|
||||
url: '/docker/',
|
||||
templateUrl: 'app/components/docker/docker.html',
|
||||
controller: 'DockerController'
|
||||
})
|
||||
.state('images', {
|
||||
url: '/images/',
|
||||
templateUrl: 'app/components/images/images.html',
|
||||
@@ -114,4 +119,5 @@ angular.module('uifordocker', [
|
||||
// You need to set this to the api endpoint without the port i.e. http://192.168.1.9
|
||||
.constant('DOCKER_ENDPOINT', 'dockerapi')
|
||||
.constant('DOCKER_PORT', '') // Docker port, leave as an empty string if no port is requred. If you have a port, prefix it with a ':' i.e. :4243
|
||||
.constant('UI_VERSION', 'v1.0.1');
|
||||
.constant('CONFIG_ENDPOINT', '/config')
|
||||
.constant('UI_VERSION', 'v1.0.3');
|
||||
|
||||
@@ -61,8 +61,8 @@
|
||||
<button class="btn btn-danger" ng-click="remove()" ng-disabled="container.State.Running">Remove</button>
|
||||
</div>
|
||||
<div class="btn-group" role="group" aria-label="...">
|
||||
<a class="btn btn-default" type="button" href="#/containers/{{ container.Id }}/stats">Stats</a>
|
||||
<a class="btn btn-default" type="button" href="#/containers/{{ container.Id }}/logs">Logs</a>
|
||||
<a class="btn btn-default" type="button" ui-sref="stats({id: container.Id})">Stats</a>
|
||||
<a class="btn btn-default" type="button" ui-sref="logs({id: container.Id})">Logs</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment">
|
||||
@@ -169,7 +169,7 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Image</td>
|
||||
<td><a href="#/images/{{ container.Image }}/">{{ container.Image }}</a></td>
|
||||
<td><a ui-sref="image({id: container.Image})">{{ container.Image }}</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
<div ng-include="template" ng-controller="StartContainerController"></div>
|
||||
|
||||
<rd-header>
|
||||
<rd-header-title title="Container list"></rd-header-title>
|
||||
<rd-header-title title="Container list">
|
||||
<a data-toggle="tooltip" title="Refresh" ui-sref="containers" ui-sref-opts="{reload: true}">
|
||||
<i class="fa fa-refresh" aria-hidden="true"></i>
|
||||
</a>
|
||||
</rd-header-title>
|
||||
<rd-header-content>Containers</rd-header-content>
|
||||
</rd-header>
|
||||
|
||||
@@ -34,35 +38,35 @@
|
||||
<tr>
|
||||
<th><label><input type="checkbox" ng-model="state.toggle" ng-change="toggleSelectAll()" /> Select</label></th>
|
||||
<th>
|
||||
<a href="#/containers/" ng-click="order('Names')">
|
||||
<a ui-sref="containers" ng-click="order('Names')">
|
||||
Name
|
||||
<span ng-show="sortType == 'Names' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
|
||||
<span ng-show="sortType == 'Names' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
|
||||
</a>
|
||||
</th>
|
||||
<th>
|
||||
<a href="#/containers/" ng-click="order('Image')">
|
||||
<a ui-sref="containers" ng-click="order('Image')">
|
||||
Image
|
||||
<span ng-show="sortType == 'Image' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
|
||||
<span ng-show="sortType == 'Image' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
|
||||
</a>
|
||||
</th>
|
||||
<th>
|
||||
<a href="#/containers/" ng-click="order('Command')">
|
||||
<a ui-sref="containers" ng-click="order('Command')">
|
||||
Command
|
||||
<span ng-show="sortType == 'Command' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
|
||||
<span ng-show="sortType == 'Command' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
|
||||
</a>
|
||||
</th>
|
||||
<th>
|
||||
<a href="#/containers/" ng-click="order('Created')">
|
||||
<a ui-sref="containers" ng-click="order('Created')">
|
||||
Created
|
||||
<span ng-show="sortType == 'Created' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
|
||||
<span ng-show="sortType == 'Created' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
|
||||
</a>
|
||||
</th>
|
||||
<th>
|
||||
<a href="#/containers/" ng-click="order('Status')">
|
||||
<a ui-sref="containers" ng-click="order('Status')">
|
||||
Status
|
||||
<span ng-show="sortType == 'Status' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
|
||||
<span ng-show="sortType == 'Status' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
|
||||
@@ -73,8 +77,8 @@
|
||||
<tbody>
|
||||
<tr ng-repeat="container in (state.filteredContainers = ( containers | filter:state.filter | orderBy:sortType:sortReverse))">
|
||||
<td><input type="checkbox" ng-model="container.Checked" ng-change="selectItem(container)"/></td>
|
||||
<td><a href="#/containers/{{ container.Id }}">{{ container|containername}}</a></td>
|
||||
<td><a href="#/images/{{ container.Image }}/">{{ container.Image }}</a></td>
|
||||
<td><a ui-sref="container({id: container.Id})">{{ container|containername}}</a></td>
|
||||
<td><a ui-sref="image({id: container.Image})">{{ container.Image }}</a></td>
|
||||
<td>{{ container.Command|truncate:40 }}</td>
|
||||
<td>{{ container.Created|getdate }}</td>
|
||||
<td><span class="label label-{{ container.Status|statusbadge }}">{{ container.Status }}</span></td>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
angular.module('dashboard')
|
||||
.controller('MasterCtrl', ['$scope', '$cookieStore', 'Settings', function ($scope, $cookieStore, Settings) {
|
||||
.controller('MasterCtrl', ['$scope', '$cookieStore', 'Settings', 'Config', function ($scope, $cookieStore, Settings, Config) {
|
||||
/**
|
||||
* Sidebar Toggle & Cookie Control
|
||||
*/
|
||||
@@ -9,6 +9,8 @@ angular.module('dashboard')
|
||||
return window.innerWidth;
|
||||
};
|
||||
|
||||
$scope.config = Config.get();
|
||||
|
||||
$scope.$watch($scope.getWidth, function(newValue, oldValue) {
|
||||
if (newValue >= mobileView) {
|
||||
if (angular.isDefined($cookieStore.get('toggle'))) {
|
||||
|
||||
145
app/components/docker/docker.html
Normal file
145
app/components/docker/docker.html
Normal file
@@ -0,0 +1,145 @@
|
||||
<rd-header>
|
||||
<rd-header-title title="Engine overview">
|
||||
<a data-toggle="tooltip" title="Refresh" ui-sref="docker" ui-sref-opts="{reload: true}">
|
||||
<i class="fa fa-refresh" aria-hidden="true"></i>
|
||||
</a>
|
||||
</rd-header-title>
|
||||
<rd-header-content>Docker</rd-header-content>
|
||||
</rd-header>
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-6 col-xs-12">
|
||||
<rd-widget>
|
||||
<rd-widget-body>
|
||||
<div class="widget-icon pull-left">
|
||||
<i class="fa fa-code"></i>
|
||||
</div>
|
||||
<div class="title">{{ docker.Version }}</div>
|
||||
<div class="comment">Docker version</div>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 col-xs-12">
|
||||
<rd-widget>
|
||||
<rd-widget-body>
|
||||
<div class="widget-icon pull-left">
|
||||
<i class="fa fa-code"></i>
|
||||
</div>
|
||||
<div class="title">{{ docker.ApiVersion }}</div>
|
||||
<div class="comment">API version</div>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 col-xs-12">
|
||||
<rd-widget>
|
||||
<rd-widget-body>
|
||||
<div class="widget-icon pull-left">
|
||||
<i class="fa fa-code"></i>
|
||||
</div>
|
||||
<div class="title">{{ docker.GoVersion }}</div>
|
||||
<div class="comment">Go version</div>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<rd-widget>
|
||||
<rd-widget-header icon="fa-object-group" title="Cluster status"></rd-widget-header>
|
||||
<rd-widget-body classes="no-padding">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Containers</td>
|
||||
<td>{{ info.Containers }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Images</td>
|
||||
<td>{{ info.Images }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Debug</td>
|
||||
<td>{{ info.Debug }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>CPUs</td>
|
||||
<td>{{ info.NCPU }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Total Memory</td>
|
||||
<td>{{ info.MemTotal|humansize }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Operating System</td>
|
||||
<td>{{ info.OperatingSystem }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Kernel Version</td>
|
||||
<td>{{ info.KernelVersion }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ID</td>
|
||||
<td>{{ info.ID }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Labels</td>
|
||||
<td>{{ info.Labels }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>File Descriptors</td>
|
||||
<td>{{ info.NFd }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Goroutines</td>
|
||||
<td>{{ info.NGoroutines }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Storage Driver</td>
|
||||
<td>{{ info.Driver }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Storage Driver Status</td>
|
||||
<td>
|
||||
<p ng-repeat="val in info.DriverStatus">
|
||||
{{ val[0] }}: {{ val[1] }}
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Execution Driver</td>
|
||||
<td>{{ info.ExecutionDriver }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>IPv4 Forwarding</td>
|
||||
<td>{{ info.IPv4Forwarding }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Index Server Address</td>
|
||||
<td>{{ info.IndexServerAddress }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Init Path</td>
|
||||
<td>{{ info.InitPath }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Docker Root Directory</td>
|
||||
<td>{{ info.DockerRootDir }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Init SHA1</td>
|
||||
<td>{{ info.InitSha1 }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Memory Limit</td>
|
||||
<td>{{ info.MemoryLimit }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Swap Limit</td>
|
||||
<td>{{ info.SwapLimit }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
</div>
|
||||
</div>
|
||||
19
app/components/docker/dockerController.js
Normal file
19
app/components/docker/dockerController.js
Normal file
@@ -0,0 +1,19 @@
|
||||
angular.module('docker', [])
|
||||
.controller('DockerController', ['$scope', 'Info', 'Version', 'Settings',
|
||||
function ($scope, Info, Version, Settings) {
|
||||
|
||||
$scope.info = {};
|
||||
$scope.docker = {};
|
||||
|
||||
$scope.order = function(sortType) {
|
||||
$scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
|
||||
$scope.sortType = sortType;
|
||||
};
|
||||
|
||||
Version.get({}, function (d) {
|
||||
$scope.docker = d;
|
||||
});
|
||||
Info.get({}, function (d) {
|
||||
$scope.info = d;
|
||||
});
|
||||
}]);
|
||||
@@ -61,7 +61,7 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Parent</td>
|
||||
<td><a href="#/images/{{ image.Parent }}/">{{ image.Parent }}</a></td>
|
||||
<td><a ui-sref="image({id: image.Parent})">{{ image.Parent }}</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Size (Virtual Size)</td>
|
||||
|
||||
@@ -1,7 +1,12 @@
|
||||
<div ng-include="template" ng-controller="PullImageController"></div>
|
||||
|
||||
<rd-header>
|
||||
<rd-header-title title="Image list"></rd-header-title>
|
||||
<rd-header-title title="Image list">
|
||||
<a data-toggle="tooltip" title="Refresh" ui-sref="images" ui-sref-opts="{reload: true}">
|
||||
<i class="fa fa-refresh" aria-hidden="true"></i>
|
||||
</a>
|
||||
</rd-header-title>
|
||||
|
||||
<rd-header-content>Images</rd-header-content>
|
||||
</rd-header>
|
||||
|
||||
@@ -27,28 +32,28 @@
|
||||
<tr>
|
||||
<th><label><input type="checkbox" ng-model="state.toggle" ng-change="toggleSelectAll()" /> Select</label></th>
|
||||
<th>
|
||||
<a href="#/images/" ng-click="order('Id')">
|
||||
<a ui-sref="images" ng-click="order('Id')">
|
||||
Id
|
||||
<span ng-show="sortType == 'Id' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
|
||||
<span ng-show="sortType == 'Id' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
|
||||
</a>
|
||||
</th>
|
||||
<th>
|
||||
<a href="#/images/" ng-click="order('RepoTags')">
|
||||
<a ui-sref="images" ng-click="order('RepoTags')">
|
||||
Repository
|
||||
<span ng-show="sortType == 'RepoTags' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
|
||||
<span ng-show="sortType == 'RepoTags' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
|
||||
</a>
|
||||
</th>
|
||||
<th>
|
||||
<a href="#/images/" ng-click="order('VirtualSize')">
|
||||
<a ui-sref="images" ng-click="order('VirtualSize')">
|
||||
VirtualSize
|
||||
<span ng-show="sortType == 'VirtualSize' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
|
||||
<span ng-show="sortType == 'VirtualSize' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
|
||||
</a>
|
||||
</th>
|
||||
<th>
|
||||
<a href="#/images/" ng-click="order('Created')">
|
||||
<a ui-sref="images" ng-click="order('Created')">
|
||||
Created
|
||||
<span ng-show="sortType == 'Created' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
|
||||
<span ng-show="sortType == 'Created' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
|
||||
@@ -59,7 +64,7 @@
|
||||
<tbody>
|
||||
<tr ng-repeat="image in (state.filteredImages = (images | filter:state.filter | orderBy:sortType:sortReverse))">
|
||||
<td><input type="checkbox" ng-model="image.Checked" ng-change="selectItem(image)" /></td>
|
||||
<td><a href="#/images/{{ image.Id }}/?tag={{ image|repotag }}">{{ image.Id|truncate:20}}</a></td>
|
||||
<td><a ui-sref="image({id: image.Id})">{{ image.Id|truncate:20}}</a></td>
|
||||
<td>{{ image|repotag }}</td>
|
||||
<td>{{ image.VirtualSize|humansize }}</td>
|
||||
<td>{{ image.Created|getdate }}</td>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<table class="table table-striped" ng-repeat="(Id, container) in network.Containers">
|
||||
<tr>
|
||||
<td>Id</td>
|
||||
<td><a href="#/containers/{{ Id }}">{{ Id }}</a></td>
|
||||
<td><a ui-sref="container({id: Id})">{{ Id }}</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>EndpointID</td>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
angular.module('network', []).config(['$routeProvider', function ($routeProvider) {
|
||||
}]).controller('NetworkController', ['$scope', 'Network', 'ViewSpinner', 'Messages', '$state', '$stateParams', 'errorMsgFilter',
|
||||
angular.module('network', [])
|
||||
.controller('NetworkController', ['$scope', 'Network', 'ViewSpinner', 'Messages', '$state', '$stateParams', 'errorMsgFilter',
|
||||
function ($scope, Network, ViewSpinner, Messages, $state, $stateParams, errorMsgFilter) {
|
||||
|
||||
$scope.disconnect = function disconnect(networkId, containerId) {
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
<div ng-include="template" ng-controller="CreateNetworkController"></div>
|
||||
|
||||
<rd-header>
|
||||
<rd-header-title title="Network list"></rd-header-title>
|
||||
<rd-header-title title="Network list">
|
||||
<a data-toggle="tooltip" title="Refresh" ui-sref="networks" ui-sref-opts="{reload: true}">
|
||||
<i class="fa fa-refresh" aria-hidden="true"></i>
|
||||
</a>
|
||||
</rd-header-title>
|
||||
<rd-header-content>Networks</rd-header-content>
|
||||
</rd-header>
|
||||
|
||||
@@ -28,49 +32,49 @@
|
||||
<tr>
|
||||
<th><label><input type="checkbox" ng-model="state.toggle" ng-change="toggleSelectAll()"/> Select</label></th>
|
||||
<th>
|
||||
<a href="#/networks/" ng-click="order('Name')">
|
||||
<a ui-sref="networks" ng-click="order('Name')">
|
||||
Name
|
||||
<span ng-show="sortType == 'Name' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
|
||||
<span ng-show="sortType == 'Name' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
|
||||
</a>
|
||||
</th>
|
||||
<th>
|
||||
<a href="#/networks/" ng-click="order('Id')">
|
||||
<a ui-sref="networks" ng-click="order('Id')">
|
||||
Id
|
||||
<span ng-show="sortType == 'Id' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
|
||||
<span ng-show="sortType == 'Id' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
|
||||
</a>
|
||||
</th>
|
||||
<th>
|
||||
<a href="#/networks/" ng-click="order('Scope')">
|
||||
<a ui-sref="networks" ng-click="order('Scope')">
|
||||
Scope
|
||||
<span ng-show="sortType == 'Scope' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
|
||||
<span ng-show="sortType == 'Scope' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
|
||||
</a>
|
||||
</th>
|
||||
<th>
|
||||
<a href="#/networks/" ng-click="order('Driver')">
|
||||
<a ui-sref="networks" ng-click="order('Driver')">
|
||||
Driver
|
||||
<span ng-show="sortType == 'Driver' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
|
||||
<span ng-show="sortType == 'Driver' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
|
||||
</a>
|
||||
</th>
|
||||
<th>
|
||||
<a href="#/networks/" ng-click="order('IPAM.Driver')">
|
||||
<a ui-sref="networks" ng-click="order('IPAM.Driver')">
|
||||
IPAM Driver
|
||||
<span ng-show="sortType == 'IPAM.Driver' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
|
||||
<span ng-show="sortType == 'IPAM.Driver' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
|
||||
</a>
|
||||
</th>
|
||||
<th>
|
||||
<a href="#/networks/" ng-click="order('IPAM.Config[0].Subnet')">
|
||||
<a ui-sref="networks" ng-click="order('IPAM.Config[0].Subnet')">
|
||||
IPAM Subnet
|
||||
<span ng-show="sortType == 'IPAM.Config[0].Subnet' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
|
||||
<span ng-show="sortType == 'IPAM.Config[0].Subnet' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
|
||||
</a>
|
||||
</th>
|
||||
<th>
|
||||
<a href="#/networks/" ng-click="order('IPAM.Config[0].Gateway')">
|
||||
<a ui-sref="networks" ng-click="order('IPAM.Config[0].Gateway')">
|
||||
IPAM Gateway
|
||||
<span ng-show="sortType == 'IPAM.Config[0].Gateway' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
|
||||
<span ng-show="sortType == 'IPAM.Config[0].Gateway' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
|
||||
@@ -81,7 +85,7 @@
|
||||
<tbody>
|
||||
<tr ng-repeat="network in ( state.filteredNetworks = (networks | filter:state.filter | orderBy:sortType:sortReverse))">
|
||||
<td><input type="checkbox" ng-model="network.Checked" ng-change="selectItem(network)"/></td>
|
||||
<td><a href="#/networks/{{ network.Id }}/">{{ network.Name|truncate:20}}</a></td>
|
||||
<td><a ui-sref="network({id: network.Id})">{{ network.Name|truncate:20}}</a></td>
|
||||
<td>{{ network.Id }}</td>
|
||||
<td>{{ network.Scope }}</td>
|
||||
<td>{{ network.Driver }}</td>
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
<rd-header>
|
||||
<rd-header-title title="Cluster overview"></rd-header-title>
|
||||
<rd-header-title title="Cluster overview">
|
||||
<a data-toggle="tooltip" title="Refresh" ui-sref="swarm" ui-sref-opts="{reload: true}">
|
||||
<i class="fa fa-refresh" aria-hidden="true"></i>
|
||||
</a>
|
||||
</rd-header-title>
|
||||
<rd-header-content>Swarm</rd-header-content>
|
||||
</rd-header>
|
||||
|
||||
@@ -91,28 +95,28 @@
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<a href="#/swarm/" ng-click="order('Name')">
|
||||
<a ui-sref="swarm" ng-click="order('Name')">
|
||||
Name
|
||||
<span ng-show="sortType == 'Name' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
|
||||
<span ng-show="sortType == 'Name' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
|
||||
</a>
|
||||
</th>
|
||||
<th>
|
||||
<a href="#/swarm/" ng-click="order('IP')">
|
||||
<a ui-sref="swarm" ng-click="order('IP')">
|
||||
IP
|
||||
<span ng-show="sortType == 'IP' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
|
||||
<span ng-show="sortType == 'IP' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
|
||||
</a>
|
||||
</th>
|
||||
<th>
|
||||
<a href="#/swarm/" ng-click="order('Containers')">
|
||||
<a ui-sref="swarm" ng-click="order('Containers')">
|
||||
Containers
|
||||
<span ng-show="sortType == 'Containers' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
|
||||
<span ng-show="sortType == 'Containers' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
|
||||
</a>
|
||||
</th>
|
||||
<th>
|
||||
<a href="#/swarm/" ng-click="order('Status')">
|
||||
<a ui-sref="swarm" ng-click="order('Status')">
|
||||
Status
|
||||
<span ng-show="sortType == 'Status' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
|
||||
<span ng-show="sortType == 'Status' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
<div ng-include="template" ng-controller="CreateVolumeController"></div>
|
||||
|
||||
<rd-header>
|
||||
<rd-header-title title="Volume list"></rd-header-title>
|
||||
<rd-header-title title="Volume list">
|
||||
<a data-toggle="tooltip" title="Refresh" ui-sref="volumes" ui-sref-opts="{reload: true}">
|
||||
<i class="fa fa-refresh" aria-hidden="true"></i>
|
||||
</a>
|
||||
</rd-header-title>
|
||||
<rd-header-content>Volumes</rd-header-content>
|
||||
</rd-header>
|
||||
|
||||
@@ -27,21 +31,21 @@
|
||||
<tr>
|
||||
<th><label><input type="checkbox" ng-model="state.toggle" ng-change="toggleSelectAll()"/> Select</label></th>
|
||||
<th>
|
||||
<a href="#/volumes/" ng-click="order('Name')">
|
||||
<a ui-sref="volumes" ng-click="order('Name')">
|
||||
Name
|
||||
<span ng-show="sortType == 'Name' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
|
||||
<span ng-show="sortType == 'Name' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
|
||||
</a>
|
||||
</th>
|
||||
<th>
|
||||
<a href="#/volumes/" ng-click="order('Driver')">
|
||||
<a ui-sref="volumes" ng-click="order('Driver')">
|
||||
Driver
|
||||
<span ng-show="sortType == 'Driver' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
|
||||
<span ng-show="sortType == 'Driver' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
|
||||
</a>
|
||||
</th>
|
||||
<th>
|
||||
<a href="#/volumes/" ng-click="order('Mountpoint')">
|
||||
<a ui-sref="volumes" ng-click="order('Mountpoint')">
|
||||
Mountpoint
|
||||
<span ng-show="sortType == 'Mountpoint' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
|
||||
<span ng-show="sortType == 'Mountpoint' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
angular.module('volumes', [])
|
||||
.controller('VolumesController', ['$scope', 'Volume', 'ViewSpinner', 'Messages', '$route', 'errorMsgFilter',
|
||||
function ($scope, Volume, ViewSpinner, Messages, $route, errorMsgFilter) {
|
||||
.controller('VolumesController', ['$scope', 'Volume', 'ViewSpinner', 'Messages', 'errorMsgFilter',
|
||||
function ($scope, Volume, ViewSpinner, Messages, errorMsgFilter) {
|
||||
$scope.state = {};
|
||||
$scope.state.toggle = false;
|
||||
$scope.state.selectedItemCount = 0;
|
||||
|
||||
@@ -4,10 +4,10 @@ angular
|
||||
var directive = {
|
||||
requires: '^rdHeader',
|
||||
scope: {
|
||||
title: '@',
|
||||
title: '@'
|
||||
},
|
||||
transclude: true,
|
||||
template: '<div class="page">{{title}}</div>',
|
||||
template: '<div class="page">{{title}}<span class="header_title_content" ng-transclude><span></div>',
|
||||
restrict: 'E'
|
||||
};
|
||||
return directive;
|
||||
|
||||
@@ -142,6 +142,9 @@ angular.module('dockerui.services', ['ngResource', 'ngSanitize'])
|
||||
remove: {method: 'DELETE'}
|
||||
});
|
||||
}])
|
||||
.factory('Config', ['$resource', 'CONFIG_ENDPOINT', function($resource, CONFIG_ENDPOINT) {
|
||||
return $resource(CONFIG_ENDPOINT);
|
||||
}])
|
||||
.factory('Settings', ['DOCKER_ENDPOINT', 'DOCKER_PORT', 'UI_VERSION', function SettingsFactory(DOCKER_ENDPOINT, DOCKER_PORT, UI_VERSION) {
|
||||
'use strict';
|
||||
var url = DOCKER_ENDPOINT;
|
||||
@@ -150,11 +153,11 @@ angular.module('dockerui.services', ['ngResource', 'ngSanitize'])
|
||||
}
|
||||
var firstLoad = (localStorage.getItem('firstLoad') || 'true') === 'true';
|
||||
return {
|
||||
displayAll: false,
|
||||
endpoint: DOCKER_ENDPOINT,
|
||||
uiVersion: UI_VERSION,
|
||||
url: url,
|
||||
firstLoad: firstLoad
|
||||
displayAll: false,
|
||||
endpoint: DOCKER_ENDPOINT,
|
||||
uiVersion: UI_VERSION,
|
||||
url: url,
|
||||
firstLoad: firstLoad
|
||||
};
|
||||
}])
|
||||
.factory('ViewSpinner', function ViewSpinnerFactory() {
|
||||
|
||||
@@ -139,3 +139,7 @@
|
||||
display: inline;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.header_title_content {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "uifordocker",
|
||||
"version": "1.0.1",
|
||||
"version": "1.0.3",
|
||||
"homepage": "https://github.com/kevana/ui-for-docker",
|
||||
"authors": [
|
||||
"Michael Crosby <crosbymichael@gmail.com>",
|
||||
@@ -32,7 +32,6 @@
|
||||
"angular-mocks": "~1.5.0",
|
||||
"angular-oboe": "*",
|
||||
"angular-resource": "~1.5.0",
|
||||
"angular-route": "~1.5.0",
|
||||
"angular-ui-select": "~0.17.1",
|
||||
"bootstrap": "~3.3.6",
|
||||
"font-awesome": "~4.5.0",
|
||||
|
||||
23
dockerui.go
23
dockerui.go
@@ -1,4 +1,4 @@
|
||||
package main // import "github.com/cloudinovasi/cloudinovasi-ui"
|
||||
package main // import "github.com/cloudinovasi/ui-for-docker"
|
||||
|
||||
import (
|
||||
"flag"
|
||||
@@ -8,6 +8,7 @@ import (
|
||||
"net/http"
|
||||
"net/http/httputil"
|
||||
"net/url"
|
||||
"encoding/json"
|
||||
"os"
|
||||
"strings"
|
||||
"github.com/gorilla/csrf"
|
||||
@@ -20,6 +21,7 @@ var (
|
||||
endpoint = flag.String("e", "/var/run/docker.sock", "Dockerd endpoint")
|
||||
addr = flag.String("p", ":9000", "Address and port to serve UI For Docker")
|
||||
assets = flag.String("a", ".", "Path to the assets")
|
||||
swarm = flag.Bool("s", false, "Swarm mode")
|
||||
authKey []byte
|
||||
authKeyFile = "authKey.dat"
|
||||
)
|
||||
@@ -28,6 +30,10 @@ type UnixHandler struct {
|
||||
path string
|
||||
}
|
||||
|
||||
type Config struct {
|
||||
Swarm bool `json:"swarm"`
|
||||
}
|
||||
|
||||
func (h *UnixHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
|
||||
conn, err := net.Dial("unix", h.path)
|
||||
if err != nil {
|
||||
@@ -60,6 +66,10 @@ func copyHeader(dst, src http.Header) {
|
||||
}
|
||||
}
|
||||
|
||||
func configurationHandler(w http.ResponseWriter, r *http.Request, c Config) {
|
||||
json.NewEncoder(w).Encode(c)
|
||||
}
|
||||
|
||||
func createTcpHandler(e string) http.Handler {
|
||||
u, err := url.Parse(e)
|
||||
if err != nil {
|
||||
@@ -72,7 +82,7 @@ func createUnixHandler(e string) http.Handler {
|
||||
return &UnixHandler{e}
|
||||
}
|
||||
|
||||
func createHandler(dir string, e string) http.Handler {
|
||||
func createHandler(dir string, e string, s bool) http.Handler {
|
||||
var (
|
||||
mux = http.NewServeMux()
|
||||
fileHandler = http.FileServer(http.Dir(dir))
|
||||
@@ -110,8 +120,15 @@ func createHandler(dir string, e string) http.Handler {
|
||||
csrf.Secure(false),
|
||||
)
|
||||
|
||||
configuration := Config{
|
||||
Swarm: s,
|
||||
}
|
||||
|
||||
mux.Handle("/dockerapi/", http.StripPrefix("/dockerapi", h))
|
||||
mux.Handle("/", fileHandler)
|
||||
mux.HandleFunc("/config", func(w http.ResponseWriter, r *http.Request) {
|
||||
configurationHandler(w, r, configuration)
|
||||
})
|
||||
return CSRF(csrfWrapper(mux))
|
||||
}
|
||||
|
||||
@@ -125,7 +142,7 @@ func csrfWrapper(h http.Handler) http.Handler {
|
||||
func main() {
|
||||
flag.Parse()
|
||||
|
||||
handler := createHandler(*assets, *endpoint)
|
||||
handler := createHandler(*assets, *endpoint, *swarm)
|
||||
if err := http.ListenAndServe(*addr, handler); err != nil {
|
||||
log.Fatal(err)
|
||||
}
|
||||
|
||||
@@ -37,7 +37,7 @@ module.exports = function (grunt) {
|
||||
]);
|
||||
grunt.registerTask('test-watch', ['karma:watch']);
|
||||
grunt.registerTask('run', ['if:binaryNotExist', 'build', 'shell:buildImage', 'shell:run']);
|
||||
grunt.registerTask('runSwarm', ['if:binaryNotExist', 'build', 'shell:buildImage', 'shell:runSwarm', 'watch:buildSwarm']);
|
||||
grunt.registerTask('run-swarm', ['if:binaryNotExist', 'build', 'shell:buildImage', 'shell:runSwarm', 'watch:buildSwarm']);
|
||||
grunt.registerTask('run-dev', ['if:binaryNotExist', 'shell:buildImage', 'shell:run', 'watch:build']);
|
||||
grunt.registerTask('clear', ['clean:app']);
|
||||
|
||||
@@ -152,7 +152,6 @@ module.exports = function (grunt) {
|
||||
src: ['bower_components/angular/angular.min.js',
|
||||
'bower_components/angular-sanitize/angular-sanitize.min.js',
|
||||
'bower_components/angular-cookies/angular-cookies.min.js',
|
||||
'bower_components/angular-route/angular-route.min.js',
|
||||
'bower_components/angular-ui-router/release/angular-ui-router.min.js',
|
||||
'bower_components/angular-resource/angular-resource.min.js',
|
||||
'bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js',
|
||||
@@ -268,7 +267,7 @@ module.exports = function (grunt) {
|
||||
command: [
|
||||
'docker stop ui-for-docker',
|
||||
'docker rm ui-for-docker',
|
||||
'docker run --net=host -d --name ui-for-docker ui-for-docker -e http://10.0.7.11:4000'
|
||||
'docker run --privileged -d -p 9000:9000 -v /var/run/docker.sock:/var/run/docker.sock --name ui-for-docker ui-for-docker -s'
|
||||
].join(';')
|
||||
},
|
||||
cleanImages: {
|
||||
|
||||
17
index.html
17
index.html
@@ -38,22 +38,25 @@
|
||||
</li>
|
||||
<li class="sidebar-title"><span>NAVIGATION</span></li>
|
||||
<li class="sidebar-list">
|
||||
<a href="#">Dashboard <span class="menu-icon fa fa-tachometer"></span></a>
|
||||
<a ui-sref="index">Dashboard <span class="menu-icon fa fa-tachometer"></span></a>
|
||||
</li>
|
||||
<li class="sidebar-list">
|
||||
<a href="#/containers/">Containers <span class="menu-icon fa fa-server"></span></a>
|
||||
<a ui-sref="containers">Containers <span class="menu-icon fa fa-server"></span></a>
|
||||
</li>
|
||||
<li class="sidebar-list">
|
||||
<a href="#/images/">Images <span class="menu-icon fa fa-clone"></span></a>
|
||||
<a ui-sref="images">Images <span class="menu-icon fa fa-clone"></span></a>
|
||||
</li>
|
||||
<li class="sidebar-list">
|
||||
<a href="#/networks/">Networks <span class="menu-icon fa fa-sitemap"></span></a>
|
||||
<a ui-sref="networks">Networks <span class="menu-icon fa fa-sitemap"></span></a>
|
||||
</li>
|
||||
<li class="sidebar-list">
|
||||
<a href="#/volumes/">Volumes <span class="menu-icon fa fa-cubes"></span></a>
|
||||
<a ui-sref="volumes">Volumes <span class="menu-icon fa fa-cubes"></span></a>
|
||||
</li>
|
||||
<li class="sidebar-list">
|
||||
<a href="#/swarm/">Swarm <span class="menu-icon fa fa-object-group"></span></a>
|
||||
<li class="sidebar-list" ng-if="config.swarm">
|
||||
<a ui-sref="swarm">Swarm <span class="menu-icon fa fa-object-group"></span></a>
|
||||
</li>
|
||||
<li class="sidebar-list" ng-if="!config.swarm">
|
||||
<a ui-sref="docker">Docker <span class="menu-icon fa fa-cogs"></span></a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="sidebar-footer">
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
"author": "Michael Crosby & Kevan Ahlquist",
|
||||
"name": "uifordocker",
|
||||
"homepage": "https://github.com/kevana/ui-for-docker",
|
||||
"version": "1.0.1",
|
||||
"version": "1.0.3",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git@github.com:kevana/ui-for-docker.git"
|
||||
|
||||
Reference in New Issue
Block a user