Add container naming to container display

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('UI_VERSION', 'v0.4')
     .constant('DOCKER_API_VERSION', 'v1.4');

js/filters.js

@@ -63,6 +63,12 @@ angular.module('dockerui.filters', [])
             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('getdate', function() {
         return function(data) {
             //Multiply by 1000 for the unix format

js/viewmodel.js

@@ -15,4 +15,5 @@ function ContainerViewModel(data) {
    this.SizeRw = data.SizeRw;
    this.Status = data.Status;
    this.Checked = false;
+   this.Names = data.Names;
 }

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>