From 1011fde9def4fb3e15a4369a68c4236226977275 Mon Sep 17 00:00:00 2001
From: Anthony Lapenna <lapenna.anthony@gmail.com>
Date: Thu, 14 Jul 2016 12:01:57 +1200
Subject: [PATCH] feat(ui): replace repository field with tags field in image
 view

---
 app/components/images/images.html | 6 ++++--
 app/shared/filters.js             | 8 ++++----
 app/shared/viewmodel.js           | 1 +
 assets/css/app.css                | 8 ++++++++
 4 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/app/components/images/images.html b/app/components/images/images.html
index bca8dc09e..c44f1a431 100644
--- a/app/components/images/images.html
+++ b/app/components/images/images.html
@@ -76,7 +76,7 @@
                 </th>
                 <th>
                   <a ui-sref="images" ng-click="order('RepoTags')">
-                    Repository
+                    Tags
                     <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>
@@ -101,7 +101,9 @@
               <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 ui-sref="image({id: image.Id})">{{ image.Id|truncate:20}}</a></td>
-                <td>{{ image|repotag }}</td>
+                <td>
+                  <span class="label label-primary image-tag" ng-repeat="tag in (image|repotags)">{{ tag }}</span>
+                </td>
                 <td>{{ image.VirtualSize|humansize }}</td>
                 <td>{{ image.Created|getdate }}</td>
               </tr>
diff --git a/app/shared/filters.js b/app/shared/filters.js
index f1e69027c..10fe596ff 100644
--- a/app/shared/filters.js
+++ b/app/shared/filters.js
@@ -142,17 +142,17 @@ angular.module('dockerui.filters', [])
     return _.split(container.Names[0], '/')[1];
   };
 })
-.filter('repotag', function () {
+.filter('repotags', function () {
   'use strict';
   return function (image) {
     if (image.RepoTags && image.RepoTags.length > 0) {
       var tag = image.RepoTags[0];
       if (tag === '<none>:<none>') {
-        tag = '';
+        return [];
       }
-      return tag;
+      return image.RepoTags;
     }
-    return '';
+    return [];
   };
 })
 .filter('getdate', function () {
diff --git a/app/shared/viewmodel.js b/app/shared/viewmodel.js
index 1b222692e..4b4e65cd8 100644
--- a/app/shared/viewmodel.js
+++ b/app/shared/viewmodel.js
@@ -1,4 +1,5 @@
 function ImageViewModel(data) {
+  console.log(JSON.stringify(data, null, 4));
     this.Id = data.Id;
     this.Tag = data.Tag;
     this.Repository = data.Repository;
diff --git a/assets/css/app.css b/assets/css/app.css
index 300c7a496..3921400ff 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -177,3 +177,11 @@ input[type="radio"] {
 .red-icon {
   color: #ae2323;
 }
+
+.image-tag {
+  margin-right: 5px;
+}
+
+.widget .widget-body table tbody .image-tag {
+  font-size: 90% !important;    
+}