Add images views and controllers

js/controllers.js

@@ -90,3 +90,42 @@ function ContainersController($scope, Container) {
         $scope.containers = d;        
    }); 
 }
+
+function ImagesController($scope, Image) {
+   
+    $scope.predicate = '-Created';
+    Image.query({}, function(d) {
+        $scope.images = d;
+    });    
+}
+
+function ImageController($scope, $routeParams, Image) {
+    $scope.history = [];
+    $scope.tag = {tag: '', repo: '', force: false};
+    $scope.remove = function() {
+        if (confirm("Are you sure you want to delete this image?")) {
+            Image.remove({id: $routeParams.id}, function(d) {
+                $scope.response = d;
+            }); 
+        }
+    };
+
+    $scope.getHistory = function() {
+        Image.history({id: $routeParams.id}, function(d) {
+            $scope.history = d;    
+        });    
+    };
+
+    $scope.updateTag = function() {
+        var tag = $scope.tag;
+        Image.tag({id: $routeParams.id, tag: tag.tag, repo: tag.repo, force: tag.force ? 1 : 0}, function(d) {
+            $scope.response = d;    
+        });
+    };
+    
+    Image.get({id: $routeParams.id}, function(d) {
+        $scope.image = d;
+    });
+
+    $scope.getHistory();
+}

js/filters.js

@@ -24,4 +24,11 @@ angular.module('dockerui.filters', [])
             }
             return 'success';
         };
+    })
+    .filter('getdate', function() {
+        return function(data) {
+            //Multiply by 1000 for the unix format
+            var date = new Date(data * 1000);
+            return date.toDateString();
+        };    
     });

js/services.js

@@ -19,11 +19,11 @@ angular.module('dockerui.services', ['ngResource'])
     .factory('Image', function($resource, DOCKER_ENDPOINT) {
         // Resource for docker images
         // http://docs.docker.io/en/latest/api/docker_remote_api.html#images
-        return $resource(DOCKER_ENDPOINT + '/images/:name/:action', {}, {
+        return $resource(DOCKER_ENDPOINT + '/images/:id/:action', {}, {
             query: {method: 'GET', params:{ all: 0, action: 'json'}, isArray: true},
             get :{method: 'GET', params: { action:'json'}},
             search :{method: 'GET', params: { action:'search'}},
-            history :{method: 'GET', params: { action:'history'}},
+            history :{method: 'GET', params: { action:'history'}, isArray: true},
             create :{method: 'POST', params: {action:'create'}},
             insert :{method: 'POST', params: {action:'insert'}},
             push :{method: 'POST', params: {action:'push'}},

partials/container.html

@@ -1,4 +1,3 @@
-
 <div class="detail">
     <h4>Container: {{ container.Id }}</h4>
 

partials/image.html

@@ -0,0 +1,81 @@
+<div class="detail">
+    <h4>Image: {{ image.id }}</h4>
+
+    <table class="table table-striped">
+         <tbody>
+            <tr>
+                <td>Created:</td>
+                <td>{{ image.created }}</td>
+            </tr>
+            <tr>
+                <td>Parent:</td>
+                <td>{{ image.parent }}</td>
+            </tr>
+            <tr>
+                <td>Container:</td>
+                <td>{{ image.container }}</td>
+            </tr>
+            <tr>
+                <td>Hostname:</td>
+                <td>{{ image.container_config.Hostname }}</td>
+            </tr>
+            <tr>
+                <td>User:</td>
+                <td>{{ image.container_config.User }}</td>
+            </tr>
+            <tr>
+                <td>Cmd:</td>
+                <td>{{ image.container_config.Cmd }}</td>
+            </tr>
+            <tr>
+                <td>Volumes:</td>
+                <td>{{ image.container_config.Volumes }}</td>
+            </tr>
+            <tr>
+                <td>Volumes from:</td>
+                <td>{{ image.container_config.VolumesFrom }}</td>
+            </tr>
+
+        </tbody>
+    </table>
+    
+    <div class="row-fluid">
+        <div class="span1">
+            History:
+        </div>
+        <div class="span5">
+            <i class="icon-refresh" style="width:32px;height:32px;" ng-click="getHistory()"></i>
+        </div>
+    </div> 
+
+    <div class="well well-large">
+        <ul>
+            <li ng-repeat="change in history">
+                <strong>{{ change.Id }}</strong>: Created: {{ change.Created|getdate }} Created by: {{ change.CreatedBy }}
+            </li>
+        </ul>
+    </div>
+
+    <hr />
+
+    <div class="row-fluid">
+        <form>
+            <fieldset>
+                <legend>Add Tag</legend> 
+                <label>Tag:</label>
+                <input type="text" placeholder="Tag..." ng-model="tag.tag" />
+                <label>Repo:</label>
+                <input type="text" placeholder="Repo..." ng-model="tag.repo" />
+                <label class="checkbox">
+                      <input type="checkbox" ng-model="tag.force"/> Force?
+                 </label>
+                 <input type="button" ng-click="updateTag()" value="Update" />
+            </fieldset>
+        </form>
+    </div>
+    <hr />
+
+    <div class="btn-remove">
+        <button class="btn btn-large btn-block btn-primary btn-danger" ng-click="remove()">Remove Image</button>
+    </div>
+</div>

partials/images.html

@@ -0,0 +1,21 @@
+
+<h2>Images:</h2>
+
+<table class="table table-striped">
+    <thead>
+        <tr>
+            <th>Id</th>
+            <th>Tag</th>
+            <th>Repository</th>
+            <th>Created</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr ng-repeat="image in images | orderBy:predicate">
+            <td><a href="/#/images/{{ image.Id }}/">{{ image.Id|truncate:10}}</a></td>
+            <td>{{ image.Tag }}</td>
+            <td>{{ image.Repository }}</td>
+            <td>{{ image.Created|getdate }}</td>
+        </tr>
+    </tbody>
+</table>