Update console for v2 image IDs

v2 images have the format <repo>@<digest>:<algorithm>.

Rename the 'imageName' filter to 'imageStreamName' and add code to
handle v2 pull by ID image names.

Make sure image names in the image streams page don't show the
algorithm.

Remove display of image short name in pod template, as it's not
informative at 10 characters and there's not room to display more.

assets/app/scripts/directives/util.js

@@ -84,4 +84,4 @@ angular.module('openshiftConsole')
       },
       templateUrl: 'views/directives/_custom-icon.html'
     }
-  });
+  });

assets/app/scripts/filters/resources.js

@@ -76,12 +76,31 @@ angular.module('openshiftConsole')
     };
   })
   .filter('imageName', function() {
+    // takes an image name and strips off the leading <algorithm>: from it,
+    // if it exists.
+    return function(image) {
+      if (!image) {
+        return "";
+      }
+
+      if (!image.contains(":")) {
+        return image;
+      }
+
+      return image.split(":")[1];
+    }
+  })
+  .filter('imageStreamName', function() {
     return function(image) {
       if (!image) {
         return "";
       }
       // TODO move this parsing method into a utility method
-      var slashSplit = image.split("/");
+
+      // remove @sha256:....
+      var imageWithoutID = image.split("@")[0]
+
+      var slashSplit = imageWithoutID.split("/");
       var semiColonSplit;
       if (slashSplit.length === 3) {
         semiColonSplit = slashSplit[2].split(":");
@@ -90,10 +109,10 @@ angular.module('openshiftConsole')
       else if (slashSplit.length === 2) {
         // TODO umm tough... this could be registry/imageName or imageRepo/imageName
         // have to check if the first bit matches a registry pattern, will handle this later...
-        return image;
+        return imageWithoutID;
       }
       else if (slashSplit.length === 1) {
-        semiColonSplit = image.split(":");
+        semiColonSplit = imageWithoutID.split(":");
         return semiColonSplit[0];
       }
     };

assets/app/views/_pod-template.html

@@ -13,9 +13,7 @@
               <h4>{{container.name}}</h4>
               <div>
                 <span class="fa fa-cube" aria-hidden="true"></span>
-                <span>Image: {{container.image | imageName}}
-                  <span ng-if="imagesByDockerReference[container.image]"> (<span class="small" title="{{imagesByDockerReference[container.image].metadata.name}}">{{imagesByDockerReference[container.image].metadata.name.substr(0, 10)}}</span>)</span>
-                </span>
+                <span>Image: {{container.image | imageStreamName}} </span>
               </div>
               <div ng-if="imagesByDockerReference && (image = imagesByDockerReference[container.image])">
                 <div ng-if="build = (image | buildForImage : builds)">
@@ -77,4 +75,4 @@ <h4>{{container.name}}</h4>
       </tbody>
     </table>
   </div>
-</div>
+</div>

assets/app/views/images.html

@@ -2,22 +2,22 @@
   <project-page>
     <div ng-controller="ImagesController">
       <h1>Image Streams</h1>
-      <alerts alerts="alerts"></alerts>      
+      <alerts alerts="alerts"></alerts>
       <div ng-if="(imageStreams | hashSize) == 0">
         <div>
           <em>{{emptyMessage}}</em>
         </div>
-      </div>      
+      </div>
       <div ng-repeat="imageStream in imageStreams">
         <div class="tile" ng-repeat="tag in imageStream.status.tags">
           <div>
             <span>{{imageStream.metadata.name}}:{{tag.tag}}</span>
             <span ng-if="!tag.items.length"> &mdash; <em>No images for this tag</em></span>
             <span ng-if="tag.items.length && tag.items[0].image">
               <span> &mdash; </span>
-              <short-id id="{{tag.items[0].image}}"></short-id>
+              <short-id id="{{tag.items[0].image | imageName}}"></short-id>
               <span> created </span>
-              <relative-timestamp timestamp="tag.items[0].created"></relative-timestamp>        
+              <relative-timestamp timestamp="tag.items[0].created"></relative-timestamp>
             </span>
           </div>
           <div class="muted small">
@@ -32,15 +32,15 @@ <h1>Image Streams</h1>
           <div ng-if="tag.items.length > 1">
             <div click-to-reveal link-text="Show older images...">
               <div ng-repeat="image in tag.items" ng-if="$index != 0">
-                <short-id ng-if="image.image" id="{{image.image}}"></short-id>
+                <short-id ng-if="image.image" id="{{image.image | imageName}}"></short-id>
                 <span ng-if="!image.image">{{image.dockerImageReference}}</span>
                 <span> created </span>
                 <relative-timestamp timestamp="image.created"></relative-timestamp>
               </div>
             </div>
           </div>
         </div>
-      </div>      
+      </div>
     </div>
   </project-page>
 </div>

assets/app/views/project.html

@@ -65,7 +65,7 @@ <h2 class="service" ng-init="numPorts = service.spec.ports.length">{{serviceId}}
                         <span>, triggered by 
                           <span class="deployment-trigger" ng-repeat="cause in deployment.details.causes">
                             <span ng-switch="cause.type">
-                              <span ng-switch-when="ImageChange">new image for {{cause.imageTrigger.repositoryName | imageName}}:{{cause.imageTrigger.tag}}</span>
+                              <span ng-switch-when="ImageChange">new image for {{cause.imageTrigger.repositoryName | imageStreamName}}:{{cause.imageTrigger.tag}}</span>
                               <span ng-switch-when="ConfigChange">deployment configuration change</span>
                             </span>
                           </span>
@@ -134,7 +134,7 @@ <h2 class="service">
                       <span>, triggered by 
                         <span ng-repeat="cause in deployment.details.causes">
                           <span ng-switch="cause.type">
-                            <span ng-switch-when="ImageChange">new image for {{cause.imageTrigger.repositoryName | imageName}}:{{cause.imageTrigger.tag}}</span>
+                            <span ng-switch-when="ImageChange">new image for {{cause.imageTrigger.repositoryName | imageStreamName}}:{{cause.imageTrigger.tag}}</span>
                             <span ng-switch-when="ConfigChange">deployment configuration change</span>
                           </span>
                         </span>

pkg/assets/bindata.go

@@ -16736,9 +16736,13 @@ return e ? e :"template" === c ? "fa fa-bolt" :"image" === c ? "fa fa-cube" :"";
 };
 } ]).filter("imageName", function() {
 return function(a) {
+return a ? a.contains(":") ? a.split(":")[1] :a :"";
+};
+}).filter("imageStreamName", function() {
+return function(a) {
 if (!a) return "";
-var b, c = a.split("/");
-return 3 === c.length ? (b = c[2].split(":"), c[1] + "/" + b[0]) :2 === c.length ? a :1 === c.length ? (b = a.split(":"), b[0]) :void 0;
+var b, c = a.split("@")[0], d = c.split("/");
+return 3 === d.length ? (b = d[2].split(":"), d[1] + "/" + b[0]) :2 === d.length ? c :1 === d.length ? (b = c.split(":"), b[0]) :void 0;
 };
 }).filter("imageEnv", function() {
 return function(a, b) {
@@ -62440,9 +62444,7 @@ var _views_pod_template_html = []byte(` <div class="pod-template">
 <h4>{{container.name}}</h4>
 <div>
 <span class="fa fa-cube" aria-hidden="true"></span>
-<span>Image: {{container.image | imageName}}
-<span ng-if="imagesByDockerReference[container.image]"> (<span class="small" title="{{imagesByDockerReference[container.image].metadata.name}}">{{imagesByDockerReference[container.image].metadata.name.substr(0, 10)}}</span>)</span>
-</span>
+<span>Image: {{container.image | imageStreamName}} </span>
 </div>
 <div ng-if="imagesByDockerReference && (image = imagesByDockerReference[container.image])">
 <div ng-if="build = (image | buildForImage : builds)">
@@ -63649,7 +63651,7 @@ var _views_images_html = []byte(`<div ng-controller="ProjectController" class="c
 <span ng-if="!tag.items.length"> &mdash; <em>No images for this tag</em></span>
 <span ng-if="tag.items.length && tag.items[0].image">
 <span> &mdash; </span>
-<short-id id="{{tag.items[0].image}}"></short-id>
+<short-id id="{{tag.items[0].image | imageName}}"></short-id>
 <span> created </span>
 <relative-timestamp timestamp="tag.items[0].created"></relative-timestamp>
 </span>
@@ -63666,7 +63668,7 @@ var _views_images_html = []byte(`<div ng-controller="ProjectController" class="c
 <div ng-if="tag.items.length > 1">
 <div click-to-reveal link-text="Show older images...">
 <div ng-repeat="image in tag.items" ng-if="$index != 0">
-<short-id ng-if="image.image" id="{{image.image}}"></short-id>
+<short-id ng-if="image.image" id="{{image.image | imageName}}"></short-id>
 <span ng-if="!image.image">{{image.dockerImageReference}}</span>
 <span> created </span>
 <relative-timestamp timestamp="image.created"></relative-timestamp>
@@ -63851,7 +63853,7 @@ and {{numRemaining}} {{numRemaining == 1 ? "other" : "others"}}
 <span>, triggered by
 <span class="deployment-trigger" ng-repeat="cause in deployment.details.causes">
 <span ng-switch="cause.type">
-<span ng-switch-when="ImageChange">new image for {{cause.imageTrigger.repositoryName | imageName}}:{{cause.imageTrigger.tag}}</span>
+<span ng-switch-when="ImageChange">new image for {{cause.imageTrigger.repositoryName | imageStreamName}}:{{cause.imageTrigger.tag}}</span>
 <span ng-switch-when="ConfigChange">deployment configuration change</span>
 </span>
 </span>
@@ -63910,7 +63912,7 @@ and {{numRemaining}} {{numRemaining == 1 ? "other" : "others"}}
 <span>, triggered by
 <span ng-repeat="cause in deployment.details.causes">
 <span ng-switch="cause.type">
-<span ng-switch-when="ImageChange">new image for {{cause.imageTrigger.repositoryName | imageName}}:{{cause.imageTrigger.tag}}</span>
+<span ng-switch-when="ImageChange">new image for {{cause.imageTrigger.repositoryName | imageStreamName}}:{{cause.imageTrigger.tag}}</span>
 <span ng-switch-when="ConfigChange">deployment configuration change</span>
 </span>
 </span>