Add settings page and badge filters

js/controllers.js

@@ -38,12 +38,56 @@ function HomeController() {
     
 }
 
-function SettingsController($scope, Settings) {
+function SettingsController($scope, Auth, System, Docker, Settings) {
+    $scope.auth = {};
+    $scope.info = {};
+    $scope.docker = {};
 
+    $('#response').hide();
+    $scope.alertClass = 'block';
+
+    var showAndHide = function(hide) {
+        $('#response').show();
+        if (hide) {
+            setTimeout(function() { $('#response').hide();}, 5000);
+        }
+    };
+
+    $scope.updateAuthInfo = function() {
+        if ($scope.auth.password != $scope.auth.cpassword) {
+            $scope.response = 'Your passwords do not match.';
+            showAndHide(true);
+            return;
+        }
+        Auth.update(
+            {username: $scope.auth.username, email: $scope.auth.email, password: $scope.auth.password}, function(d) {
+                console.log(d);
+                $scope.alertClass = 'success';
+                $scope.response = 'Auth information updated.';
+                showAndHide(true);
+            }, function(e) {
+               console.log(e);
+               $scope.alertClass = 'error';
+               $scope.response = e.data;
+               showAndHide(false);
+            });    
+    }; 
+
+    Auth.get({}, function(d) {
+        $scope.auth = d;     
+    });
+
+    Docker.get({}, function(d) {
+        $scope.docker = d;
+    });
+
+    System.get({}, function(d) {
+        $scope.info = d;
+    });
 }
 
 // Controls the page that displays a single container and actions on that container.
-function ContainerController($scope, $routeParams, Container) {
+function ContainerController($scope, $routeParams, $location, Container) {
     $('#response').hide();
     $scope.alertClass = 'block';
 
@@ -82,6 +126,20 @@ function ContainerController($scope, $routeParams, Container) {
         });
     };
 
+    $scope.kill = function() {
+        Container.kill({id: $routeParams.id}, function(d) {
+            console.log(d);
+            $scope.alertClass = 'success';
+            $scope.response = 'Container killed.';
+            showAndHide(true);
+        }, function(e) {
+            console.log(e);
+            $scope.alertClass = 'error';
+            $scope.response = e.data;
+            showAndHide(false);
+        });
+    };
+
     $scope.remove = function() {
         if (confirm("Are you sure you want to remove the container?")) {
             Container.remove({id: $routeParams.id}, function(d) {
@@ -108,6 +166,9 @@ function ContainerController($scope, $routeParams, Container) {
 
     Container.get({id: $routeParams.id}, function(d) {
         $scope.container = d;        
+   }, function(e) {
+        console.log(e);
+        $location.path('/containers/');
    }); 
 
    $scope.getChanges();
@@ -148,7 +209,7 @@ function ImagesController($scope, Image) {
 }
 
 // Controller for a single image and actions on that image
-function ImageController($scope, $routeParams, Image) {
+function ImageController($scope, $routeParams, $location, Image) {
     $scope.history = [];
     $scope.tag = {repo: '', force: false};
 
@@ -201,6 +262,9 @@ function ImageController($scope, $routeParams, Image) {
     
     Image.get({id: $routeParams.id}, function(d) {
         $scope.image = d;
+    }, function(e) {
+        console.log(e);
+        $location.path('/images/');
     });
 
     $scope.getHistory();

js/filters.js

@@ -27,6 +27,32 @@ angular.module('dockerui.filters', [])
             return 'success';
         };
     })
+    .filter('getstatetext', function() {
+        return function(state) {
+            if (state == undefined) return '';
+
+            if (state.Ghost && state.Running) {
+                return 'Ghost';
+            }
+            if (state.Running) {
+                return 'Running';
+            }
+            return 'Stopped';
+        };
+    })
+    .filter('getstatelabel', function() {
+        return function(state) {
+            if (state == undefined) return '';
+
+            if (state.Ghost && state.Running) {
+                return 'label-important';
+            }
+            if (state.Running) {
+                return 'label-success';
+            }
+            return '';
+        };
+    })
     .filter('getdate', function() {
         return function(data) {
             //Multiply by 1000 for the unix format

js/services.js

@@ -31,6 +31,28 @@ angular.module('dockerui.services', ['ngResource'])
             delete :{id: '@id', method: 'DELETE'}
         });
     })
+    .factory('Docker', function($resource, DOCKER_ENDPOINT) {
+        // Information for docker
+        // http://docs.docker.io/en/latest/api/docker_remote_api.html#display-system-wide-information
+        return $resource(DOCKER_ENDPOINT + '/version', {}, {
+            get: {method: 'GET'}
+        });
+    })
+    .factory('Auth', function($resource, DOCKER_ENDPOINT) {
+        // Auto Information for docker
+        // http://docs.docker.io/en/latest/api/docker_remote_api.html#set-auth-configuration
+        return $resource(DOCKER_ENDPOINT + '/auth', {}, {
+            get: {method: 'GET'},
+            update: {method: 'POST'}
+        });
+    })
+    .factory('System', function($resource, DOCKER_ENDPOINT) {
+        // System for docker
+        // http://docs.docker.io/en/latest/api/docker_remote_api.html#display-system-wide-information
+        return $resource(DOCKER_ENDPOINT + '/info', {}, {
+            get: {method: 'GET'}
+        });
+    })
     .factory('Settings', function() {
         return {
             displayAll: false    

partials/container.html

@@ -8,6 +8,7 @@
     <div class="btn-group detail">
       <button class="btn btn-success" ng-click="start()">Start</button>
       <button class="btn btn-warning" ng-click="stop()">Stop</button>
+      <button class="btn btn-danger" ng-click="kill()">Kill</button>
     </div>
 
     <table class="table table-striped">
@@ -33,8 +34,8 @@
                 <td><a href="/#/images/{{ container.Image }}/">{{ container.Image }}</a></td>
             </tr>
             <tr>
-                <td>Running:</td>
+                <td>State:</td>
-                <td>{{ container.State.Running }}</td>
+                <td><span class="label {{ container.State|getstatelabel }}">{{ container.State|getstatetext }}</span></td>
             </tr>
         </tbody>
     </table>

partials/image.html

@@ -14,11 +14,11 @@
             </tr>
             <tr>
                 <td>Parent:</td>
-                <td>{{ image.parent }}</td>
+                <td><a href="/#/images/{{ image.parent }}/">{{ image.parent }}</a></td>
             </tr>
             <tr>
                 <td>Container:</td>
-                <td>{{ image.container }}</td>
+                <td><a href="/#/containers/{{ image.container }}/">{{ image.container }}</a></td>
             </tr>
             <tr>
                 <td>Hostname:</td>

partials/settings.html

@@ -0,0 +1,67 @@
+<div class="detail">
+    <div id="response" class="alert alert-{{ alertClass }}">
+        {{ response }}        
+    </div>
+
+    <h3>Docker Information</h3>
+    <div>
+        <p class="lead">
+            <strong>Version</strong>{{ docker.Version }}<br />
+            <strong>GitCommit</strong>{{ docker.GitCommit }}<br />
+            <strong>GoVersion</strong>{{ docker.GoVersion }}<br />
+        </p>
+    </div>
+
+    <table class="table table-striped">
+         <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>NFd:</td>
+                <td>{{ info.NFd }}</td>
+            </tr>
+            <tr>
+                <td>NGoroutines:</td>
+                <td>{{ info.NGoroutines }}</td>
+            </tr>
+            <tr>
+                <td>MemoryLimit:</td>
+                <td>{{ info.MemoryLimit }}</td>
+            </tr>
+            <tr>
+                <td>SwapLimit:</td>
+                <td>{{ info.SwapLimit }}</td>
+            </tr>
+            <tr>
+                <td>NFd:</td>
+                <td>{{ info.NFd }}</td>
+            </tr>
+        </tbody>
+    </table>
+
+    <form>
+        <fieldset>
+            <legend>Auth Information</legend>
+            <label>Username:</label>
+            <input type="text" ng-model="auth.username" required>
+            <label>Email:</label>
+            <input type="text" ng-model="auth.email" required>
+            <label>Password:</label>
+            <input type="password" ng-model="auth.password" required>
+            <label>Confirm Password:</label>
+            <input type="password" ng-model="auth.cpassword" required>
+            <br />
+            <input type="button" ng-click="updateAuthInfo()" value="Update"/>
+        </fieldset>
+    </form>
+</div>