Merge pull request #1193 from spadgett/catalog-item-no-subcategory

Merged by openshift-bot

Author: OpenShift Bot

app/scripts/controllers/create/browseCategory.js

@@ -15,7 +15,6 @@ angular.module('openshiftConsole')
                                                     $routeParams,
                                                     $uibModal,
                                                     AlertMessageService,
-                                                    CatalogService,
                                                     Constants,
                                                     DataService,
                                                     LabelFilter,

app/scripts/directives/catalog.js

@@ -48,6 +48,7 @@ angular.module('openshiftConsole')
             var categoryKeywords = _.reject(keywords, matchesCategoryLabel);
             $scope.filteredBuildersByCategory[id] = CatalogService.filterImageStreams(builders, categoryKeywords);
           });
+          $scope.filteredBuildersNoSubcategory = CatalogService.filterImageStreams($scope.buildersNoSubcategory, keywords);
 
           $scope.filteredTemplatesByCategory = {};
           _.each($scope.templatesByCategory, function(templates, id) {
@@ -59,6 +60,7 @@ angular.module('openshiftConsole')
             var categoryKeywords = _.reject(keywords, matchesCategoryLabel);
             $scope.filteredTemplatesByCategory[id] = CatalogService.filterTemplates(templates, categoryKeywords);
           });
+          $scope.filteredTemplatesNoSubcategory = CatalogService.filterTemplates($scope.templatesNoSubcategory, keywords);
         }
 
         // Filter the catalog when the keyword or tag changes.
@@ -69,14 +71,41 @@ angular.module('openshiftConsole')
           });
         }, 200, { maxWait: 1000, trailing: true }));
 
+        function findItemsWithNoSubcategory(itemsByCategory) {
+          var subcategories = _.get($scope, 'parentCategory.subcategories', []);
+          if (_.isEmpty(subcategories)) {
+            return [];
+          }
+
+          // Set of items in a subcategory indexed by UID.
+          var uidInSubcategory = {};
+          _.each(subcategories, function(subcategory) {
+            _.each(subcategory.items, function(subcategoryItem) {
+              _.each(itemsByCategory[subcategoryItem.id], function(item) {
+                var uid = _.get(item, 'metadata.uid');
+                uidInSubcategory[uid] = true;
+              });
+            });
+          });
+
+          var isInSubcategory = function(item) {
+            var uid = _.get(item, 'metadata.uid');
+            return !!uidInSubcategory[uid];
+          };
+
+          var parentID = $scope.parentCategory.id;
+          return _.reject(itemsByCategory[parentID], isInSubcategory);
+        }
+
         function updateImageStreams() {
           if (!$scope.projectImageStreams || !$scope.openshiftImageStreams) {
             return;
           }
 
           var imageStreams = _.toArray($scope.projectImageStreams).concat(_.toArray($scope.openshiftImageStreams));
           $scope.buildersByCategory = CatalogService.categorizeImageStreams(imageStreams);
-          $scope.emptyCatalog = $scope.emptyCatalog && _.every($scope.buildersByCategory, _.isEmpty);
+          $scope.buildersNoSubcategory = findItemsWithNoSubcategory($scope.buildersByCategory);
+          $scope.emptyCatalog = $scope.emptyCatalog && _.every($scope.buildersByCategory, _.isEmpty) && _.isEmpty($scope.buildersNoSubcategory);
           updateState();
         }
 
@@ -87,7 +116,8 @@ angular.module('openshiftConsole')
 
           var templates = _.toArray($scope.projectTemplates).concat(_.toArray($scope.openshiftTemplates));
           $scope.templatesByCategory = CatalogService.categorizeTemplates(templates);
-          $scope.emptyCatalog = $scope.emptyCatalog && _.every($scope.templatesByCategory, _.isEmpty);
+          $scope.templatesNoSubcategory = findItemsWithNoSubcategory($scope.templatesByCategory);
+          $scope.emptyCatalog = $scope.emptyCatalog && _.every($scope.templatesByCategory, _.isEmpty) && _.isEmpty($scope.templatesNoSubcategory);
           updateState();
         }
 
@@ -120,6 +150,24 @@ angular.module('openshiftConsole')
             }
           });
           $scope.countByCategory = countByCategory;
+
+          $scope.hasItemsNoSubcategory = !_.isEmpty($scope.buildersNoSubcategory) || !_.isEmpty($scope.templatesNoSubcategory);
+          $scope.countFilteredNoSubcategory = _.size($scope.filteredBuildersNoSubcategory) + _.size($scope.filteredTemplatesNoSubcategory);
+          if ($scope.countFilteredNoSubcategory) {
+            $scope.allContentHidden = false;
+          }
+        }
+
+        function hasSingleCategory() {
+          if (!$scope.parentCategory) {
+            return false;
+          }
+
+          if (nonEmptyCategories.length !== 1) {
+            return false;
+          }
+
+          return !$scope.hasItemsNoSubcategory;
         }
 
         function updateState() {
@@ -136,8 +184,8 @@ angular.module('openshiftConsole')
           updateCategoryCounts();
 
           if ($scope.loaded) {
-            if ($scope.parentCategory && nonEmptyCategories.length === 1) {
-              // If there is only one subcategory with items, just show the items.
+            // If there is only one subcategory with items, just show the items.
+            if (hasSingleCategory()) {
               $scope.singleCategory = _.head(nonEmptyCategories);
             }
 

app/views/catalog/catalog.html

@@ -57,7 +57,7 @@ <h2 class="text-center">No images or templates.</h2>
     <div ng-repeat="category in categories" ng-if="hasContent[category.id]">
       <h2 class="h3" ng-if="category.label">{{category.label}}</h2>
       <div class="row tile-row" ng-class="{ 'mar-top-xl': !category.label || category.items.length < 2 }">
-        <div ng-repeat="item in category.items" ng-if="countByCategory[item.id]" class="col-xxs-12 col-xs-6 col-sm-4 col-md-4 col-lg-3">
+        <div ng-repeat="item in category.items" ng-if="countByCategory[item.id]" class="col-xxs-12 col-xs-6 col-sm-6 col-md-4">
           <div class="tile tile-click" ng-class="{ 'tile-sans-icon' : !item.iconClass, 'tile-sans-description' : !item.description }">
             <div class="tile-title">
               <div ng-if="item.iconClass || category.iconClassDefault" class="image-icon">
@@ -80,6 +80,21 @@ <h3>
         </div>
       </div>
     </div>
+    <div ng-if="hasItemsNoSubcategory">
+      <div class="row row-cards-pf row-cards-pf-flex">
+        <catalog-image
+          image-stream="builder"
+          project="{{projectName}}"
+          is-builder="true"
+          ng-repeat="builder in buildersNoSubcategory track by (builder | uid)">
+        </catalog-image>
+        <catalog-template
+          template="template"
+          project="{{projectName}}"
+          ng-repeat="template in templatesNoSubcategory | orderBy : ['metadata.name', 'metadata.namespace'] track by (template | uid)">
+        </catalog-template>
+      </div>
+    </div>
   </div>
 
   <div ng-if="filterActive">
@@ -106,6 +121,27 @@ <h2 class="h3">
         </div><!-- /row-cards-pf -->
       </div>
     </div>
+    <div ng-if="countFilteredNoSubcategory">
+      <h2 class="h3">
+        Other {{parentCategory.label}}
+        <span class="tile-item-count badge">{{countFilteredNoSubcategory}}</span>
+      </h2>
+      <div class="row row-cards-pf row-cards-pf-flex mar-top-xl">
+        <catalog-image
+          image-stream="builder"
+          project="{{projectName}}"
+          is-builder="true"
+          keywords="keywords"
+          ng-repeat="builder in filteredBuildersNoSubcategory track by (builder | uid)">
+        </catalog-image>
+        <catalog-template
+          template="template"
+          project="{{projectName}}"
+          keywords="keywords"
+          ng-repeat="template in filteredTemplatesNoSubcategory | orderBy : ['metadata.name', 'metadata.namespace'] track by (template | uid)">
+        </catalog-template>
+      </div>
+    </div>
   </div>
 </div>
 

dist/scripts/scripts.js

@@ -8009,9 +8009,9 @@ k.toErrorPage("Could not load " + m(d.kind) + " '" + d.name + "'. " + b("getErro
 j.unwatchAll(p);
 })) :void k.toErrorPage("You do not have authority to update " + m(d.kind) + " " + d.name + ".", "access_denied");
 }));
-} ]), angular.module("openshiftConsole").controller("BrowseCategoryController", [ "$scope", "$filter", "$location", "$q", "$routeParams", "$uibModal", "AlertMessageService", "CatalogService", "Constants", "DataService", "LabelFilter", "Navigate", "ProjectsService", function(a, b, c, d, e, f, g, h, i, j, k, l, m) {
+} ]), angular.module("openshiftConsole").controller("BrowseCategoryController", [ "$scope", "$filter", "$location", "$q", "$routeParams", "$uibModal", "AlertMessageService", "Constants", "DataService", "LabelFilter", "Navigate", "ProjectsService", function(a, b, c, d, e, f, g, h, i, j, k, l) {
 a.projectName = e.project;
-var n = function(b, c) {
+var m = function(b, c) {
 var d;
 return _.some(b, function(b) {
 if (d = _.find(b.items, {
@@ -8026,10 +8026,10 @@ label:""
 }
 return !1;
 }), d;
-}, o = i.CATALOG_CATEGORIES, p = "none" === e.category ? "" :e.category;
-if (a.category = n(o, p), !a.category) return void l.toErrorPage("Catalog category " + e.category + " not found.");
-var q, r;
-return e.subcategory && (q = a.category, p = "none" === e.subcategory ? "" :e.subcategory, r = _.get(a.category, "subcategories", []), a.category = n(r, p), !a.category) ? void l.toErrorPage("Catalog category " + e.category + "/" + e.subcategory + " not found.") :(a.alerts = a.alerts || {}, g.getAlerts().forEach(function(b) {
+}, n = h.CATALOG_CATEGORIES, o = "none" === e.category ? "" :e.category;
+if (a.category = m(n, o), !a.category) return void k.toErrorPage("Catalog category " + e.category + " not found.");
+var p, q;
+return e.subcategory && (p = a.category, o = "none" === e.subcategory ? "" :e.subcategory, q = _.get(a.category, "subcategories", []), a.category = m(q, o), !a.category) ? void k.toErrorPage("Catalog category " + e.category + "/" + e.subcategory + " not found.") :(a.alerts = a.alerts || {}, g.getAlerts().forEach(function(b) {
 a.alerts[b.name] = b.data;
 }), g.clearAlerts(), a.breadcrumbs = [ {
 title:a.projectName,
@@ -8040,23 +8040,23 @@ link:"project/" + a.projectName + "/create"
 }, {
 title:"Catalog",
 link:"project/" + a.projectName + "/create?tab=fromCatalog"
-} ], q && a.breadcrumbs.push({
-title:q.label,
-link:"project/" + a.projectName + "/create/category/" + q.id
+} ], p && a.breadcrumbs.push({
+title:p.label,
+link:"project/" + a.projectName + "/create/category/" + p.id
 }), a.breadcrumbs.push({
 title:a.category.label
-}), void m.get(e.project).then(_.spread(function(c, d) {
-a.project = c, a.context = d, a.breadcrumbs[0].title = b("displayName")(c), j.list("imagestreams", {
+}), void l.get(e.project).then(_.spread(function(c, d) {
+a.project = c, a.context = d, a.breadcrumbs[0].title = b("displayName")(c), i.list("imagestreams", {
 namespace:"openshift"
 }, function(b) {
 a.openshiftImageStreams = b.by("metadata.name");
-}), j.list("templates", {
+}), i.list("templates", {
 namespace:"openshift"
 }, function(b) {
 a.openshiftTemplates = b.by("metadata.name");
-}), "openshift" === e.project ? (a.projectImageStreams = [], a.projectTemplates = []) :(j.list("imagestreams", d, function(b) {
+}), "openshift" === e.project ? (a.projectImageStreams = [], a.projectTemplates = []) :(i.list("imagestreams", d, function(b) {
 a.projectImageStreams = b.by("metadata.name");
-}), j.list("templates", d, function(b) {
+}), i.list("templates", d, function(b) {
 a.projectTemplates = b.by("metadata.name");
 }));
 })));
@@ -11358,27 +11358,45 @@ var f = a.getCategoryItem(d), g = function(a) {
 return a.test(f.label);
 }, h = _.reject(b, g);
 e.filteredBuildersByCategory[d] = a.filterImageStreams(c, h);
-}), e.filteredTemplatesByCategory = {}, void _.each(e.templatesByCategory, function(c, d) {
+}), e.filteredBuildersNoSubcategory = a.filterImageStreams(e.buildersNoSubcategory, b), e.filteredTemplatesByCategory = {}, _.each(e.templatesByCategory, function(c, d) {
 var f = a.getCategoryItem(d), g = function(a) {
 return a.test(f.label);
 }, h = _.reject(b, g);
 e.filteredTemplatesByCategory[d] = a.filterTemplates(c, h);
-}));
+}), void (e.filteredTemplatesNoSubcategory = a.filterTemplates(e.templatesNoSubcategory, b)));
 }
-function g() {
+function g(a) {
+var b = _.get(e, "parentCategory.subcategories", []);
+if (_.isEmpty(b)) return [];
+var c = {};
+_.each(b, function(b) {
+_.each(b.items, function(b) {
+_.each(a[b.id], function(a) {
+var b = _.get(a, "metadata.uid");
+c[b] = !0;
+});
+});
+});
+var d = function(a) {
+var b = _.get(a, "metadata.uid");
+return !!c[b];
+}, f = e.parentCategory.id;
+return _.reject(a[f], d);
+}
+function h() {
 if (e.projectImageStreams && e.openshiftImageStreams) {
 var b = _.toArray(e.projectImageStreams).concat(_.toArray(e.openshiftImageStreams));
-e.buildersByCategory = a.categorizeImageStreams(b), e.emptyCatalog = e.emptyCatalog && _.every(e.buildersByCategory, _.isEmpty), j();
+e.buildersByCategory = a.categorizeImageStreams(b), e.buildersNoSubcategory = g(e.buildersByCategory), e.emptyCatalog = e.emptyCatalog && _.every(e.buildersByCategory, _.isEmpty) && _.isEmpty(e.buildersNoSubcategory), l();
 }
 }
-function h() {
+function i() {
 if (e.projectTemplates && e.openshiftTemplates) {
 var b = _.toArray(e.projectTemplates).concat(_.toArray(e.openshiftTemplates));
-e.templatesByCategory = a.categorizeTemplates(b), e.emptyCatalog = e.emptyCatalog && _.every(e.templatesByCategory, _.isEmpty), j();
+e.templatesByCategory = a.categorizeTemplates(b), e.templatesNoSubcategory = g(e.templatesByCategory), e.emptyCatalog = e.emptyCatalog && _.every(e.templatesByCategory, _.isEmpty) && _.isEmpty(e.templatesNoSubcategory), l();
 }
 }
-function i() {
-e.noFilterMatches = !0, k = [];
+function j() {
+e.noFilterMatches = !0, m = [];
 var a = {};
 _.each(e.filteredBuildersByCategory, function(b, c) {
 a[c] = _.size(b);
@@ -11387,25 +11405,28 @@ a[c] = (a[c] || 0) + _.size(b);
 }), e.allContentHidden = !0, _.each(e.categories, function(b) {
 var c = !1;
 _.each(b.items, function(b) {
-a[b.id] && (k.push(b), c = !0);
+a[b.id] && (m.push(b), c = !0);
 }), _.set(e, [ "hasContent", b.id ], c), c && (e.allContentHidden = !1);
-}), e.countByCategory = a;
+}), e.countByCategory = a, e.hasItemsNoSubcategory = !_.isEmpty(e.buildersNoSubcategory) || !_.isEmpty(e.templatesNoSubcategory), e.countFilteredNoSubcategory = _.size(e.filteredBuildersNoSubcategory) + _.size(e.filteredTemplatesNoSubcategory), e.countFilteredNoSubcategory && (e.allContentHidden = !1);
 }
-function j() {
-e.loaded = e.projectTemplates && e.openshiftTemplates && e.projectImageStreams && e.openshiftImageStreams, f(), i(), e.loaded && (e.parentCategory && 1 === k.length && (e.singleCategory = _.head(k)), d.log("templates by category", e.templatesByCategory), d.log("builder images", e.buildersByCategory));
+function k() {
+return !!e.parentCategory && (1 === m.length && !e.hasItemsNoSubcategory);
+}
+function l() {
+e.loaded = e.projectTemplates && e.openshiftTemplates && e.projectImageStreams && e.openshiftImageStreams, f(), j(), e.loaded && (k() && (e.singleCategory = _.head(m)), d.log("templates by category", e.templatesByCategory), d.log("builder images", e.buildersByCategory));
 }
 e.categories = _.get(e, "parentCategory.subcategories", b.CATALOG_CATEGORIES), e.loaded = !1, e.emptyCatalog = !0, e.filter = {
 keyword:""
 }, e.$watch("filter.keyword", _.debounce(function() {
 e.$apply(function() {
-f(), i();
+f(), j();
 });
 }, 200, {
 maxWait:1e3,
 trailing:!0
 }));
-var k;
-e.$watchGroup([ "openshiftImageStreams", "projectImageStreams" ], g), e.$watchGroup([ "openshiftTemplates", "projectTemplates" ], h);
+var m;
+e.$watchGroup([ "openshiftImageStreams", "projectImageStreams" ], h), e.$watchGroup([ "openshiftTemplates", "projectTemplates" ], i);
 }
 };
 } ]), angular.module("openshiftConsole").directive("categoryContent", [ "CatalogService", "Constants", "KeywordService", "Logger", function(a, b, c, d) {

dist/scripts/templates.js

@@ -4522,7 +4522,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<div ng-repeat=\"category in categories\" ng-if=\"hasContent[category.id]\">\n" +
     "<h2 class=\"h3\" ng-if=\"category.label\">{{category.label}}</h2>\n" +
     "<div class=\"row tile-row\" ng-class=\"{ 'mar-top-xl': !category.label || category.items.length < 2 }\">\n" +
-    "<div ng-repeat=\"item in category.items\" ng-if=\"countByCategory[item.id]\" class=\"col-xxs-12 col-xs-6 col-sm-4 col-md-4 col-lg-3\">\n" +
+    "<div ng-repeat=\"item in category.items\" ng-if=\"countByCategory[item.id]\" class=\"col-xxs-12 col-xs-6 col-sm-6 col-md-4\">\n" +
     "<div class=\"tile tile-click\" ng-class=\"{ 'tile-sans-icon' : !item.iconClass, 'tile-sans-description' : !item.description }\">\n" +
     "<div class=\"tile-title\">\n" +
     "<div ng-if=\"item.iconClass || category.iconClassDefault\" class=\"image-icon\">\n" +
@@ -4545,6 +4545,14 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</div>\n" +
     "</div>\n" +
     "</div>\n" +
+    "<div ng-if=\"hasItemsNoSubcategory\">\n" +
+    "<div class=\"row row-cards-pf row-cards-pf-flex\">\n" +
+    "<catalog-image image-stream=\"builder\" project=\"{{projectName}}\" is-builder=\"true\" ng-repeat=\"builder in buildersNoSubcategory track by (builder | uid)\">\n" +
+    "</catalog-image>\n" +
+    "<catalog-template template=\"template\" project=\"{{projectName}}\" ng-repeat=\"template in templatesNoSubcategory | orderBy : ['metadata.name', 'metadata.namespace'] track by (template | uid)\">\n" +
+    "</catalog-template>\n" +
+    "</div>\n" +
+    "</div>\n" +
     "</div>\n" +
     "<div ng-if=\"filterActive\">\n" +
     "<div ng-repeat=\"category in categories\" ng-if=\"hasContent[category.id]\">\n" +
@@ -4561,6 +4569,18 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</div>\n" +
     "</div>\n" +
     "</div>\n" +
+    "<div ng-if=\"countFilteredNoSubcategory\">\n" +
+    "<h2 class=\"h3\">\n" +
+    "Other {{parentCategory.label}}\n" +
+    "<span class=\"tile-item-count badge\">{{countFilteredNoSubcategory}}</span>\n" +
+    "</h2>\n" +
+    "<div class=\"row row-cards-pf row-cards-pf-flex mar-top-xl\">\n" +
+    "<catalog-image image-stream=\"builder\" project=\"{{projectName}}\" is-builder=\"true\" keywords=\"keywords\" ng-repeat=\"builder in filteredBuildersNoSubcategory track by (builder | uid)\">\n" +
+    "</catalog-image>\n" +
+    "<catalog-template template=\"template\" project=\"{{projectName}}\" keywords=\"keywords\" ng-repeat=\"template in filteredTemplatesNoSubcategory | orderBy : ['metadata.name', 'metadata.namespace'] track by (template | uid)\">\n" +
+    "</catalog-template>\n" +
+    "</div>\n" +
+    "</div>\n" +
     "</div>\n" +
     "</div>\n" +
     "\n" +