Merge pull request #2243 from rhamilto/issue-479

Automatic merge from submit-queue. Adding vendor (publisher) to info screens, adds docUrl and supportUrl to info screens that lacked it Fixes openshift/origin-web-catalog#479 And fixes #2242 Requires openshift/origin-web-catalog#485 <img width="915" alt="screen shot 2017-10-10 at 2 32 50 pm" src="https://user-images.githubusercontent.com/895728/31404030-dde2fe2c-adc8-11e7-9a73-68bd4e1ed138.PNG"> <img width="925" alt="screen shot 2017-10-10 at 2 32 56 pm" src="https://user-images.githubusercontent.com/895728/31404031-ddf83dd2-adc8-11e7-8ec8-13aca55d70f3.PNG"> <img width="909" alt="screen shot 2017-10-10 at 2 33 06 pm" src="https://user-images.githubusercontent.com/895728/31404032-de091102-adc8-11e7-9253-9211cc3064f1.PNG"> <img width="926" alt="screen shot 2017-10-10 at 2 33 12 pm" src="https://user-images.githubusercontent.com/895728/31404035-de237bf0-adc8-11e7-9eb8-060ffc45435f.PNG">
openshift · Oct 13, 2017 · 3107f25 · 3107f25
2 parents ce05a60 + bd0f1df
commit 3107f25
Show file tree

Hide file tree

Showing 9 changed files with 81 additions and 30 deletions.
diff --git a/app/scripts/directives/fromFileDialog.js b/app/scripts/directives/fromFileDialog.js
@@ -21,6 +21,8 @@
 
   function FromFileDialog($scope, $timeout, $routeParams, $filter, DataService) {
     var ctrl = this;
+    var annotation = $filter('annotation');
+    var imageForIconClass = $filter('imageForIconClass');
 
     ctrl.$onInit = function() {
       ctrl.alerts = {};
@@ -36,6 +38,11 @@
       return (icon.indexOf('icon-') !== -1) ? 'font-icon ' + icon : icon;
     }
 
+    function getImage() {
+      var iconClass = _.get(ctrl, 'template.metadata.annotations.iconClass', 'fa fa-clone');
+      return imageForIconClass(iconClass);
+    }
+
     ctrl.importFile = function() {
       $scope.$broadcast('importFileFromYAMLOrJSON');
     };
@@ -48,6 +55,10 @@
       ctrl.selectedProject = message.project;
       ctrl.template = message.template;
       ctrl.iconClass = getIconClass();
+      ctrl.image = getImage();
+      ctrl.vendor = annotation(message.template, "template.openshift.io/provider-display-name");
+      ctrl.docUrl = annotation(ctrl.template, "template.openshift.io/documentation-url");
+      ctrl.supportUrl = annotation(ctrl.template, "template.openshift.io/support-url");
       ctrl.name = "YAML / JSON";
       // Need to let the current digest loop finish so the template config step becomes visible or the wizard will throw an error
       // from the change to currentStep

diff --git a/app/scripts/directives/processTemplateDialog.js b/app/scripts/directives/processTemplateDialog.js
@@ -130,6 +130,7 @@
           ctrl.image = getImage();
           ctrl.docUrl = annotation(ctrl.template, "template.openshift.io/documentation-url");
           ctrl.supportUrl = annotation(ctrl.template, "template.openshift.io/support-url");
+          ctrl.vendor = annotation(ctrl.template, "template.openshift.io/provider-display-name");
         }
       }
       if (changes.useProjectTemplate) {
@@ -179,6 +180,9 @@
       ctrl.selectStep.valid = !!template;
       ctrl.iconClass = getIconClass();
       ctrl.image = getImage();
+      ctrl.docUrl = annotation(ctrl.template, "template.openshift.io/documentation-url");
+      ctrl.supportUrl = annotation(ctrl.template, "template.openshift.io/support-url");
+      ctrl.vendor = annotation(ctrl.template, "template.openshift.io/provider-display-name");
     };
 
     ctrl.templateProjectChange = function () {

diff --git a/app/views/directives/from-file-dialog.html b/app/views/directives/from-file-dialog.html
@@ -38,19 +38,31 @@
        next-enabled="!$ctrl.templateForm.$invalid">
     <div class="wizard-pf-main-inner-shadow-covers" ng-if="$ctrl.template">
       <div class="order-service-details">
-        <div class="order-service-details-top">
+        <div class="order-service-details-top" ng-class="{'order-service-details-top-icon-top': ($ctrl.vendor || ($ctrl.docUrl || $ctrl.supportUrl))}">
           <div class="service-icon">
-            <span class="icon {{$ctrl.iconClass}}"></span>
+            <span ng-if="$ctrl.image" class="image"><img ng-src="{{$ctrl.image}}" alt=""></span>
+            <span ng-if="!$ctrl.image" class="icon {{$ctrl.iconClass}}" aria-hidden="true"></span>
           </div>
           <div class="service-title-area">
             <div class="service-title">
               {{$ctrl.template | displayName}}
             </div>
+            <div ng-if="$ctrl.vendor" class="service-vendor">
+              {{$ctrl.vendor}}
+            </div>
             <div class="order-service-tags">
               <span ng-repeat="tag in $ctrl.template.metadata.annotations.tags.split(',')" class="tag">
                 {{tag}}
               </span>
             </div>
+            <ul ng-if="$ctrl.docUrl || $ctrl.supportUrl" class="list-inline order-service-documentation-url">
+              <li ng-if="$ctrl.docUrl" >
+                <a ng-href="{{$ctrl.docUrl}}" target="_blank" class="learn-more-link">View Documentation <i class="fa fa-external-link" aria-hidden="true"></i></a>
+              </li>
+              <li ng-if="$ctrl.supportUrl" >
+                <a ng-href="{{$ctrl.supportUrl}}" target="_blank" class="learn-more-link">Get Support <i class="fa fa-external-link" aria-hidden="true"></i></a>
+              </li>
+            </ul>
           </div>
         </div>
         <div class="order-service-description-block">

diff --git a/app/views/directives/process-template-dialog/process-template-info.html b/app/views/directives/process-template-dialog/process-template-info.html
@@ -1,5 +1,5 @@
 <div class="order-service-details">
-  <div class="order-service-details-top">
+  <div class="order-service-details-top" ng-class="{'order-service-details-top-icon-top': ($ctrl.serviceClass.vendor || ($ctrl.docUrl || $ctrl.supportUrl))}">
     <div class="service-icon">
       <span ng-if="$ctrl.image" class="image"><img ng-src="{{$ctrl.image}}" alt=""></span>
       <span ng-if="!$ctrl.image" class="icon {{$ctrl.iconClass}}" aria-hidden="true"></span>
@@ -8,6 +8,9 @@
       <div class="service-title">
         {{$ctrl.template | displayName}}
       </div>
+      <div ng-if="$ctrl.vendor" class="service-vendor">
+        {{$ctrl.vendor}}
+      </div>
       <div class="order-service-tags">
         <span ng-repeat="tag in $ctrl.template.metadata.annotations.tags.split(',')" class="tag">
           {{tag}}

diff --git a/bower.json b/bower.json
@@ -47,7 +47,7 @@
     "angular-utf8-base64": "0.0.5",
     "file-saver": "1.3.3",
     "origin-web-common": "0.0.66",
-    "origin-web-catalog": "0.0.54"
+    "origin-web-catalog": "0.0.55"
   },
   "devDependencies": {
     "angular-mocks": "1.5.11",

diff --git a/dist/scripts/scripts.js b/dist/scripts/scripts.js
@@ -13174,7 +13174,7 @@ appliedFilters: [],
 onFilterChange: g
 }, n.project || (b.showProjectName = !0);
 }, b.$onChanges = function(e) {
-e.template && b.template && (d(), b.iconClass = l(), b.image = u(), b.docUrl = S(b.template, "template.openshift.io/documentation-url"), b.supportUrl = S(b.template, "template.openshift.io/support-url")), e.useProjectTemplate && d();
+e.template && b.template && (d(), b.iconClass = l(), b.image = u(), b.docUrl = S(b.template, "template.openshift.io/documentation-url"), b.supportUrl = S(b.template, "template.openshift.io/support-url"), b.vendor = S(b.template, "template.openshift.io/provider-display-name")), e.useProjectTemplate && d();
 }, e.$on("templateInstantiated", function(e, t) {
 b.selectedProject = t.project, b.currentStep = b.resultsStep.label;
 }), b.$onDestroy = function() {
@@ -13187,7 +13187,7 @@ _.isFunction(e) && e();
 }, b.onProjectSelected = function(t) {
 b.selectedProject = t, b.configStep.valid = e.$ctrl.form.$valid && b.selectedProject;
 }, b.templateSelected = function(e) {
-b.selectedTemplate = e, b.template = _.get(e, "resource"), b.selectStep.valid = !!e, b.iconClass = l(), b.image = u();
+b.selectedTemplate = e, b.template = _.get(e, "resource"), b.selectStep.valid = !!e, b.iconClass = l(), b.image = u(), b.docUrl = S(b.template, "template.openshift.io/documentation-url"), b.supportUrl = S(b.template, "template.openshift.io/support-url"), b.vendor = S(b.template, "template.openshift.io/provider-display-name");
 }, b.templateProjectChange = function() {
 b.templateProjectName = _.get(b.templateProject, "metadata.name"), b.catalogItems = {}, b.templateSelected(), a.getProjectCatalogItems(b.templateProjectName, !1, !0).then(_.spread(function(e, t) {
 b.catalogItems = e, b.totalCount = b.catalogItems.length, g(), t && i.addNotification({
@@ -13241,30 +13241,34 @@ templateUrl: "views/directives/deploy-image-dialog.html"
 angular.module("openshiftConsole").component("fromFileDialog", {
 controller: [ "$scope", "$timeout", "$routeParams", "$filter", "DataService", function(e, t, n, a, r) {
 function o() {
-var e = _.get(i, "template.metadata.annotations.iconClass", "fa fa-clone");
+var e = _.get(s, "template.metadata.annotations.iconClass", "fa fa-clone");
 return -1 !== e.indexOf("icon-") ? "font-icon " + e : e;
 }
-var i = this;
-i.$onInit = function() {
-i.alerts = {}, i.loginBaseUrl = r.openshiftAPIBaseUrl(), n.project || (i.showProjectName = !0);
-}, i.importFile = function() {
+function i() {
+var e = _.get(s, "template.metadata.annotations.iconClass", "fa fa-clone");
+return l(e);
+}
+var s = this, c = a("annotation"), l = a("imageForIconClass");
+s.$onInit = function() {
+s.alerts = {}, s.loginBaseUrl = r.openshiftAPIBaseUrl(), n.project || (s.showProjectName = !0);
+}, s.importFile = function() {
 e.$broadcast("importFileFromYAMLOrJSON");
-}, i.instantiateTemplate = function() {
+}, s.instantiateTemplate = function() {
 e.$broadcast("instantiateTemplate");
 }, e.$on("fileImportedFromYAMLOrJSON", function(e, n) {
-i.selectedProject = n.project, i.template = n.template, i.iconClass = o(), i.name = "YAML / JSON", t(function() {
-i.currentStep = i.template ? "Template Configuration" : "Results";
+s.selectedProject = n.project, s.template = n.template, s.iconClass = o(), s.image = i(), s.vendor = c(n.template, "template.openshift.io/provider-display-name"), s.docUrl = c(s.template, "template.openshift.io/documentation-url"), s.supportUrl = c(s.template, "template.openshift.io/support-url"), s.name = "YAML / JSON", t(function() {
+s.currentStep = s.template ? "Template Configuration" : "Results";
 }, 0);
 }), e.$on("templateInstantiated", function(e, t) {
-i.selectedProject = t.project, i.name = a("displayName")(i.template), i.currentStep = "Results";
-}), i.close = function() {
-i.template = null;
-var e = i.onDialogClosed();
-return _.isFunction(e) && e(), i.wizardDone = !1, !0;
-}, i.stepChanged = function(e) {
-"results" === e.stepId ? (i.nextButtonTitle = "Close", i.wizardDone = !0) : i.nextButtonTitle = "Create";
-}, i.currentStep = "YAML / JSON", i.nextCallback = function(e) {
-return "file" === e.stepId ? (i.importFile(), !1) : "template" === e.stepId ? (i.instantiateTemplate(), !1) : "results" !== e.stepId || (i.close(), !1);
+s.selectedProject = t.project, s.name = a("displayName")(s.template), s.currentStep = "Results";
+}), s.close = function() {
+s.template = null;
+var e = s.onDialogClosed();
+return _.isFunction(e) && e(), s.wizardDone = !1, !0;
+}, s.stepChanged = function(e) {
+"results" === e.stepId ? (s.nextButtonTitle = "Close", s.wizardDone = !0) : s.nextButtonTitle = "Create";
+}, s.currentStep = "YAML / JSON", s.nextCallback = function(e) {
+return "file" === e.stepId ? (s.importFile(), !1) : "template" === e.stepId ? (s.instantiateTemplate(), !1) : "results" !== e.stepId || (s.close(), !1);
 };
 } ],
 controllerAs: "$ctrl",

diff --git a/dist/scripts/templates.js b/dist/scripts/templates.js
@@ -7029,19 +7029,31 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<pf-wizard-step wz-disabled=\"{{!$ctrl.template}}\" step-title=\"Template Configuration\" step-id=\"template\" step-priority=\"2\" substeps=\"false\" ok-to-nav-away=\"true\" allow-click-nav=\"false\" next-enabled=\"!$ctrl.templateForm.$invalid\">\n" +
     "<div class=\"wizard-pf-main-inner-shadow-covers\" ng-if=\"$ctrl.template\">\n" +
     "<div class=\"order-service-details\">\n" +
-    "<div class=\"order-service-details-top\">\n" +
+    "<div class=\"order-service-details-top\" ng-class=\"{'order-service-details-top-icon-top': ($ctrl.vendor || ($ctrl.docUrl || $ctrl.supportUrl))}\">\n" +
     "<div class=\"service-icon\">\n" +
-    "<span class=\"icon {{$ctrl.iconClass}}\"></span>\n" +
+    "<span ng-if=\"$ctrl.image\" class=\"image\"><img ng-src=\"{{$ctrl.image}}\" alt=\"\"></span>\n" +
+    "<span ng-if=\"!$ctrl.image\" class=\"icon {{$ctrl.iconClass}}\" aria-hidden=\"true\"></span>\n" +
     "</div>\n" +
     "<div class=\"service-title-area\">\n" +
     "<div class=\"service-title\">\n" +
     "{{$ctrl.template | displayName}}\n" +
     "</div>\n" +
+    "<div ng-if=\"$ctrl.vendor\" class=\"service-vendor\">\n" +
+    "{{$ctrl.vendor}}\n" +
+    "</div>\n" +
     "<div class=\"order-service-tags\">\n" +
     "<span ng-repeat=\"tag in $ctrl.template.metadata.annotations.tags.split(',')\" class=\"tag\">\n" +
     "{{tag}}\n" +
     "</span>\n" +
     "</div>\n" +
+    "<ul ng-if=\"$ctrl.docUrl || $ctrl.supportUrl\" class=\"list-inline order-service-documentation-url\">\n" +
+    "<li ng-if=\"$ctrl.docUrl\">\n" +
+    "<a ng-href=\"{{$ctrl.docUrl}}\" target=\"_blank\" class=\"learn-more-link\">View Documentation <i class=\"fa fa-external-link\" aria-hidden=\"true\"></i></a>\n" +
+    "</li>\n" +
+    "<li ng-if=\"$ctrl.supportUrl\">\n" +
+    "<a ng-href=\"{{$ctrl.supportUrl}}\" target=\"_blank\" class=\"learn-more-link\">Get Support <i class=\"fa fa-external-link\" aria-hidden=\"true\"></i></a>\n" +
+    "</li>\n" +
+    "</ul>\n" +
     "</div>\n" +
     "</div>\n" +
     "<div class=\"order-service-description-block\">\n" +
@@ -8857,7 +8869,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
 
   $templateCache.put('views/directives/process-template-dialog/process-template-info.html',
     "<div class=\"order-service-details\">\n" +
-    "<div class=\"order-service-details-top\">\n" +
+    "<div class=\"order-service-details-top\" ng-class=\"{'order-service-details-top-icon-top': ($ctrl.serviceClass.vendor || ($ctrl.docUrl || $ctrl.supportUrl))}\">\n" +
     "<div class=\"service-icon\">\n" +
     "<span ng-if=\"$ctrl.image\" class=\"image\"><img ng-src=\"{{$ctrl.image}}\" alt=\"\"></span>\n" +
     "<span ng-if=\"!$ctrl.image\" class=\"icon {{$ctrl.iconClass}}\" aria-hidden=\"true\"></span>\n" +
@@ -8866,6 +8878,9 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<div class=\"service-title\">\n" +
     "{{$ctrl.template | displayName}}\n" +
     "</div>\n" +
+    "<div ng-if=\"$ctrl.vendor\" class=\"service-vendor\">\n" +
+    "{{$ctrl.vendor}}\n" +
+    "</div>\n" +
     "<div class=\"order-service-tags\">\n" +
     "<span ng-repeat=\"tag in $ctrl.template.metadata.annotations.tags.split(',')\" class=\"tag\">\n" +
     "{{tag}}\n" +