Merge pull request #15 from crosbymichael/next

Update to api version 1.8 and add container names

.gitignore

@@ -1 +1,2 @@
 dockerui
+*.esproj*

js/app.js

@@ -14,5 +14,5 @@ angular.module('dockerui', ['dockerui.services', 'dockerui.filters'])
     // 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', 'v0.3')
-    .constant('DOCKER_API_VERSION', 'v1.4');
+    .constant('UI_VERSION', 'v0.4')
+    .constant('DOCKER_API_VERSION', 'v1.8');

js/filters.js

@@ -62,6 +62,22 @@ angular.module('dockerui.filters', [])
             var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
             return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[[i]]; 
         };
+    })
+    .filter('containername', function() {
+        return function(container) {
+			var name = container.Names[0];
+			return name.substring(1, name.length);
+        };
+    })
+    .filter('repotag', function() {
+        return function(image) {
+        	if (image.RepoTags && image.RepoTags.length > 0) {
+	        	var tag = image.RepoTags[0];
+	        	if (tag == '<none>:<none>') { tag = ''; }
+	        	return tag;
+        	}
+    		return '';		
+        };
     })
     .filter('getdate', function() {
         return function(data) {

js/viewmodel.js

@@ -5,6 +5,7 @@ function ImageViewModel(data) {
     this.Repository = data.Repository;
     this.Created = data.Created;
     this.Checked = false;
+    this.RepoTags = data.RepoTags;
 }
 
 function ContainerViewModel(data) {
@@ -15,4 +16,5 @@ function ContainerViewModel(data) {
    this.SizeRw = data.SizeRw;
    this.Status = data.Status;
    this.Checked = false;
+   this.Names = data.Names;
 }

partials/container.html

@@ -1,6 +1,6 @@
 <div class="detail">
     
-    <h4>Container: {{ container.Id }}</h4>
+    <h4>Container: {{ container.Name }}</h4>
 
     <div class="btn-group detail">
       <button class="btn btn-success" ng-click="start()">Start</button>

partials/containers.html

@@ -22,22 +22,20 @@
     <thead>
         <tr>
             <th><input type="checkbox" ng-model="toggle" ng-click="toggleSelectAll()" /> Action</th>
-            <th>Id</th>
+            <th>Name</th>
             <th>Image</th>
             <th>Command</th>
             <th>Created</th>
-            <th>Size</th>
             <th>Status</th>
         </tr>
     </thead>
     <tbody>
         <tr ng-repeat="container in containers|orderBy:predicate">
             <td><input type="checkbox" ng-model="container.Checked" /></td>
-            <td><a href="/#/containers/{{ container.Id }}/">{{ container.Id|truncate:10}}</a></td>
+            <td><a href="/#/containers/{{ container|containername }}/">{{ container|containername}}</a></td>
             <td><a href="/#/images/{{ container.Image }}/">{{ container.Image }}</a></td>
             <td>{{ container.Command|truncate:40 }}</td>
             <td>{{ container.Created|getdate }}</td>
-            <td>{{ container.SizeRw|humansize }}</td>
             <td><span class="label label-{{ container.Status|statusbadge }}">{{ container.Status }}</span></td>
         </tr>
     </tbody>

partials/dashboard.html

@@ -24,25 +24,21 @@
         <div class="span6 pull-right">
             <h3 style="float:right">Status</h3>
             <canvas id="containers-chart" style="float:right;">
-                Get a better broswer... Your holding everyone back.
+                Get a better browser... Your holding everyone back.
             </canvas>
             <div id="chart-legend" style="float:right;"></div>
         </div>
     </div>
 
 
-    <div class="span12" id="stats">
-        <hr />
+    <div class="span10" id="stats">
         <h4>Containers created</h4>
        <canvas id="containers-started-chart" width="700" style="float:left">
-            Get a better broswer... Your holding everyone back.
+            Get a better browser... Your holding everyone back.
        </canvas>
-        <h1 style="float:right">{{ totalContainers }}</h1>
-        <hr />
         <h4>Images created</h4>
        <canvas id="images-created-chart" width="700" style="float:left">
-            Get a better broswer... Your holding everyone back.
+            Get a better browser... Your holding everyone back.
        </canvas>
-        <h1 style="float:right">{{ totalImages }}</h1>
     </div>
 </div>

partials/images.html

@@ -23,8 +23,8 @@
     <tbody>
         <tr ng-repeat="image in images | orderBy:predicate">
             <td><input type="checkbox" ng-model="image.Checked" /></td>
-            <td><a href="/#/images/{{ image.Id }}/?tag={{ image.Repository }}:{{ image.Tag }}">{{ image.Id|truncate:20}}</a></td>
-            <td>{{ image.Repository }}:{{ image.Tag }}</td>
+            <td><a href="/#/images/{{ image.Id }}/?tag={{ image|repotag }}">{{ image.Id|truncate:20}}</a></td>
+            <td>{{ image|repotag }}</td>
             <td>{{ image.Created|getdate }}</td>
         </tr>
     </tbody>