Merge pull request openshift#1672 from jwforres/image_streams

Merged by openshift-bot

assets/app/scripts/app.js

@@ -70,7 +70,7 @@ angular
       .href(projectHref("browse"))
       .subPath("Builds", "builds", builder.join(templatePath, 'builds.html'))
       .subPath("Deployments", "deployments", builder.join(templatePath, 'deployments.html'))
-      .subPath("Images", "images", builder.join(templatePath, 'images.html'))
+      .subPath("Image Streams", "images", builder.join(templatePath, 'images.html'))
       .subPath("Pods", "pods", builder.join(templatePath, 'pods.html'))
       .subPath("Services", "services", builder.join(templatePath, 'services.html'))
       .build();

assets/app/scripts/controllers/images.js

@@ -9,46 +9,40 @@
  */
 angular.module('openshiftConsole')
   .controller('ImagesController', function ($scope, DataService, $filter, LabelFilter, Logger) {
-    $scope.images = {};
-    $scope.unfilteredImages = {};
+    $scope.imageStreams = {};
+    $scope.unfilteredImageStreams = {};
     $scope.builds = {};
     $scope.labelSuggestions = {};
     $scope.alerts = $scope.alerts || {};    
     $scope.emptyMessage = "Loading...";
     var watches = [];
 
-    watches.push(DataService.watch("images", $scope, function(images) {
-      $scope.unfilteredImages = images.by("metadata.name");
-      LabelFilter.addLabelSuggestionsFromResources($scope.unfilteredImages, $scope.labelSuggestions);
+    watches.push(DataService.watch("imageStreams", $scope, function(imageStreams) {
+      $scope.unfilteredImageStreams = imageStreams.by("metadata.name");
+      LabelFilter.addLabelSuggestionsFromResources($scope.unfilteredImageStreams, $scope.labelSuggestions);
       LabelFilter.setLabelSuggestions($scope.labelSuggestions);
-      $scope.images = LabelFilter.getLabelSelector().select($scope.unfilteredImages);
-      $scope.emptyMessage = "No images to show";
+      $scope.imageStreams = LabelFilter.getLabelSelector().select($scope.unfilteredImageStreams);
+      $scope.emptyMessage = "No image streams to show";
       updateFilterWarning();
-      Logger.log("images (subscribe)", $scope.images);
-    }));    
-
-    // Also load builds so we can link out to builds associated with images
-    watches.push(DataService.watch("builds", $scope, function(builds) {
-      $scope.builds = builds.by("metadata.name");
-      Logger.log("builds (subscribe)", $scope.builds);
-    }));     
+      Logger.log("image streams (subscribe)", $scope.imageStreams);
+    })); 
 
     var updateFilterWarning = function() {
-      if (!LabelFilter.getLabelSelector().isEmpty() && $.isEmptyObject($scope.images) && !$.isEmptyObject($scope.unfilteredImages)) {
-        $scope.alerts["images"] = {
+      if (!LabelFilter.getLabelSelector().isEmpty() && $.isEmptyObject($scope.imageStreams) && !$.isEmptyObject($scope.unfilteredImageStreams)) {
+        $scope.alerts["imageStreams"] = {
           type: "warning",
-          details: "The active filters are hiding all images."
+          details: "The active filters are hiding all image streams."
         };
       }
       else {
-        delete $scope.alerts["images"];
+        delete $scope.alerts["imageStreams"];
       }       
     };
 
     LabelFilter.onActiveFiltersChanged(function(labelSelector) {
       // trigger a digest loop
       $scope.$apply(function() {
-        $scope.images = labelSelector.select($scope.unfilteredImages);
+        $scope.imageStreams = labelSelector.select($scope.unfilteredImageStreams);
         updateFilterWarning();
       });
     });  

assets/app/scripts/directives/util.js

@@ -56,4 +56,13 @@ angular.module('openshiftConsole')
         }
       }
     }
+  })
+  .directive('shortId', function() {
+    return {
+      restrict:'E',
+      scope: {
+        id: '@'
+      },
+      template: '<code class="short-id" title="{{id}}">{{id.substring(0, 6)}}</code>'
+    }
   });

assets/app/scripts/services/data.js

@@ -228,8 +228,14 @@ angular.module('openshiftConsole')
 
     var deferred = $q.defer();
 
-    if (!force && this._watchInFlight(type, context) && this._resourceVersion(type, context)) {
-      var obj = this._data(type, context).by('metadata.name')[name];
+    var existingData = this._data(type, context);
+
+    // If this is a cached type (immutable types only), ignore the force parameter
+    if (this._isTypeCached(type) && existingData && existingData.by('metadata.name')[name]) {
+      return existingData.by('metadata.name')[name];
+    }
+    else if (!force && this._watchInFlight(type, context) && this._resourceVersion(type, context)) {
+      var obj = existingData.by('metadata.name')[name];
       if (obj) {
         $rootScope.$apply(function(){
           deferred.resolve(obj);
@@ -255,6 +261,14 @@ angular.module('openshiftConsole')
           url: self._urlForType(type, name, context, false, ns)
         }, opts.http || {}))
         .success(function(data, status, headerFunc, config, statusText) {
+          if (self._isTypeCached(type)) {
+            if (!existingData) {
+              self._data(type, context, [data]);
+            }
+            else {
+              existingData.update(data, "ADDED");
+            }
+          }
           deferred.resolve(data);
         })
         .error(function(data, status, headers, config) {
@@ -654,8 +668,10 @@ angular.module('openshiftConsole')
     buildConfigHooks:          API_CFG.openshift,
     deploymentConfigs:         API_CFG.openshift,
     images:                    API_CFG.openshift,
-    imageRepositories:         API_CFG.openshift,
+    imageRepositories:         API_CFG.openshift, // DEPRECATED, leave here until removed from API
     imageStreams:              API_CFG.openshift,
+    imageStreamImages:         API_CFG.openshift,
+    imageStreamTags:           API_CFG.openshift,    
     oAuthAccessTokens:         API_CFG.openshift,
     oAuthAuthorizeTokens:      API_CFG.openshift,
     oAuthClients:              API_CFG.openshift,
@@ -748,7 +764,7 @@ angular.module('openshiftConsole')
     BuildConfig:              "buildConfigs",
     DeploymentConfig:         "deploymentConfigs",
     Image:                    "images",
-    ImageRepository:          "imageRepositories",
+    ImageRepository:          "imageRepositories", // DEPRECATED, leave here until removed from API
     ImageStream:              "imageStreams",
     OAuthAccessToken:         "oAuthAccessTokens",
     OAuthAuthorizeToken:      "oAuthAuthorizeTokens",
@@ -773,6 +789,14 @@ angular.module('openshiftConsole')
     return OBJECT_KIND_MAP[kind];
   };
 
+  var CACHED_TYPE = {
+    imageStreamImages: true
+  };
+
+  DataService.prototype._isTypeCached = function(type) {
+    return !!CACHED_TYPE[type];
+  };
+
   DataService.prototype._getNamespace = function(type, context, opts) {
     var deferred = $q.defer();
     if (opts.namespace) {

assets/app/styles/_core.less

@@ -320,4 +320,7 @@ select:invalid {
   font-weight: normal;
 }
 
-
+.short-id {
+  background-color: #f1f1f1;
+  color: #666;
+}

assets/app/views/_pod-template.html

@@ -14,14 +14,14 @@ <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]"> (<a href="#" class="small" title="{{imagesByDockerReference[container.image].metadata.name}}">{{imagesByDockerReference[container.image].metadata.name.substr(0, 10)}}</a>)</span>
+                  <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>
               </div>
               <div ng-if="imagesByDockerReference && (image = imagesByDockerReference[container.image])">
                 <div ng-if="build = (image | buildForImage : builds)">
                   <div>
                     <span class="fa fa-refresh" aria-hidden="true"></span>
-                    <span>Build: {{build.metadata.labels.buildconfig}} (<a href="#" class="small" title="{{build.metadata.name}}">{{build.metadata.name.substr(0, 10)}}</a>)</span>
+                    <span>Build: {{build.metadata.labels.buildconfig}} (<span class="small" title="{{build.metadata.name}}">{{build.metadata.name}}</span>)</span>
                   </div>
                   <div ng-if="build.parameters.source">
                     <span class="fa fa-code" aria-hidden="true"></span>
@@ -31,7 +31,7 @@ <h4>{{container.name}}</h4>
                           <span ng-if="build.parameters.revision">
                             {{build.parameters.revision.git.message}}
                             <span ng-if="build.parameters.revision.git.commit">
-                              (<a href="#" title="{{build.parameters.revision.git.commit}}" class="small">{{build.parameters.revision.git.commit.substr(0, 10)}}</a>)
+                              (<span title="{{build.parameters.revision.git.commit}}" class="small">{{build.parameters.revision.git.commit.substr(0, 10)}}</span>)
                             </span>
                             <span ng-if="build.parameters.revision.git.author">
                               authored by {{build.parameters.revision.git.author.name}}

assets/app/views/images.html

@@ -1,17 +1,45 @@
 <div ng-controller="ProjectController" class="content">
   <project-page>
     <div ng-controller="ImagesController">
-      <h1>Images</h1>
+      <h1>Image Streams</h1>
       <alerts alerts="alerts"></alerts>      
-      <div ng-if="(images | hashSize) == 0">
+      <div ng-if="(imageStreams | hashSize) == 0">
         <div>
           <em>{{emptyMessage}}</em>
         </div>
       </div>      
-      <div style="margin-bottom: 10px;" ng-repeat="image in images">
-        <h3>{{image.dockerImageReference | imageName}} <span class="small">({{image.metadata.name}})</span></h3>
-        <div>Created: <relative-timestamp timestamp="image.metadata.creationTimestamp"></relative-timestamp></div>
-        <div ng-if="build = (image | buildForImage : builds)">Created from: Build {{build.metadata.labels.buildconfig}} (<a href="project/{{projectName}}/browse/builds" class="small" title="{{build.metadata.name}}">{{build.metadata.name.substr(0, 10)}}</a>)
+      <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>
+              <span> created </span>
+              <relative-timestamp timestamp="tag.items[0].created"></relative-timestamp>        
+            </span>
+          </div>
+          <div class="muted small">
+            <div ng-if="imageStream.spec.dockerImageRepository">From Docker repository: {{imageStream.spec.dockerImageRepository}}:{{tag.tag}}</div>
+            <div ng-if="imageStream.spec.tags">
+              <div ng-repeat="specTag in imageStream.spec.tags" ng-if="specTag.name == tag.tag">
+                <div ng-if="specTag.dockerImageReference">From Docker repository: {{specTag.dockerImageReference}}</div>
+                <div ng-if="specTag.from">From image stream: {{specTag.from.namespace}}/{{specTag.from.name}}</div>
+              </div>
+            </div>
+          </div>
+          <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>
+                <span ng-if="!image.image">{{image.dockerImageReference}}</span>
+                <span> created </span>
+                <relative-timestamp timestamp="image.created"></relative-timestamp>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>      
     </div>
   </project-page>