Merge pull request #520 from spadgett/image-dependencies

Show image dependencies for APBs
openshift · Oct 23, 2017 · b16bb16 · b16bb16
2 parents f2b24b8 + cc0ea94
commit b16bb16
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 6 deletions.
diff --git a/dist/less/order-service.less b/dist/less/order-service.less
@@ -60,6 +60,21 @@
       font-size: @font-size-small;
       white-space: nowrap;
     }
+    .order-service-dependent-image {
+      margin-bottom: 5px;
+      .word-break();
+      .pficon {
+        margin-right: 5px;
+        vertical-align: -1px;
+      }
+    }
+    .order-service-subheading {
+      // Prevent top margin from collapsing.
+      display: inline-block;
+      font-size: @font-size-base + 1;
+      margin-bottom: 7px;
+      margin-top: 10px;
+    }
   }
   .order-service-documentation-url {
     margin-top: 4px;

diff --git a/dist/origin-web-catalogs.css b/dist/origin-web-catalogs.css
diff --git a/dist/origin-web-catalogs.js b/dist/origin-web-catalogs.js
@@ -21,7 +21,7 @@ webpackJsonp([ 0, 1 ], [ function(e, t) {
 }, function(e, t) {
     e.exports = '<div class="order-service-config">\n  <div class="config-top">\n    <form name="$ctrl.forms.orderConfigureForm" class="config-form">\n      <select-project selected-project="$ctrl.selectedProject" name-taken="$ctrl.nameTaken" show-divider="$ctrl.parameterSchema.properties.length > 0"></select-project>\n      <catalog-parameters\n        ng-if="$ctrl.parameterSchema.properties && !$ctrl.noProjectsCantCreate"\n        model="$ctrl.parameterData"\n        parameter-schema="$ctrl.parameterSchema"\n        parameter-form-definition="$ctrl.parameterFormDefinition">\n      </catalog-parameters>\n    </form>\n    <div ng-if="$ctrl.error" class="has-error">\n      <span class="help-block">{{$ctrl.error}}</span>\n    </div>\n  </div>\n</div>\n';
 }, function(e, t) {
-    e.exports = '<div class="order-service-details">\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.imageUrl" class="icon {{$ctrl.iconClass}}" aria-hidden="true"></span>\n      <span ng-if="$ctrl.imageUrl" class="image"><img ng-src="{{$ctrl.imageUrl}}" alt=""></span>\n    </div>\n    <div class="service-title-area">\n      <div class="service-title">\n        {{$ctrl.serviceName}}\n      </div>\n      <div ng-if="$ctrl.serviceClass.vendor" class="service-vendor">\n        {{$ctrl.serviceClass.vendor}}\n      </div>\n      <div ng-if="$ctrl.serviceClass.tags" class="order-service-tags">\n        <span ng-repeat="tag in $ctrl.serviceClass.tags" 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    <p ng-if="!$ctrl.multipleServicePlans && ($ctrl.selectedPlan.spec.externalMetadata.displayName || $ctrl.selectedPlan.spec.description)">\n      <span ng-if="$ctrl.selectedPlan.spec.externalMetadata.displayName">\n        Plan {{$ctrl.selectedPlan.spec.externalMetadata.displayName}}\n        <span ng-if="$ctrl.selectedPlan.spec.description">&ndash;</span>\n      </span>\n      <span ng-if="$ctrl.selectedPlan.spec.description">{{$ctrl.selectedPlan.spec.description}}</span>\n    </p>\n    <p ng-if="!$ctrl.description && !$ctrl.longDescription" class="description">No description provided.</p>\n    <p ng-if="$ctrl.description" ng-bind-html="($ctrl.description | linky : \'_blank\')" class="description"></p>\n    <p ng-if="$ctrl.longDescription" ng-bind-html="$ctrl.longDescription | linky : \'_blank\'" class="description"></p>\n  </div>\n</div>\n';
+    e.exports = '<div class="order-service-details">\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.imageUrl" class="icon {{$ctrl.iconClass}}" aria-hidden="true"></span>\n      <span ng-if="$ctrl.imageUrl" class="image"><img ng-src="{{$ctrl.imageUrl}}" alt=""></span>\n    </div>\n    <div class="service-title-area">\n      <div class="service-title">\n        {{$ctrl.serviceName}}\n      </div>\n      <div ng-if="$ctrl.serviceClass.vendor" class="service-vendor">\n        {{$ctrl.serviceClass.vendor}}\n      </div>\n      <div ng-if="$ctrl.serviceClass.tags" class="order-service-tags">\n        <span ng-repeat="tag in $ctrl.serviceClass.tags" 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    <p ng-if="!$ctrl.multipleServicePlans && ($ctrl.selectedPlan.spec.externalMetadata.displayName || $ctrl.selectedPlan.spec.description)">\n      <span ng-if="$ctrl.selectedPlan.spec.externalMetadata.displayName">\n        Plan {{$ctrl.selectedPlan.spec.externalMetadata.displayName}}\n        <span ng-if="$ctrl.selectedPlan.spec.description">&ndash;</span>\n      </span>\n      <span ng-if="$ctrl.selectedPlan.spec.description">{{$ctrl.selectedPlan.spec.description}}</span>\n    </p>\n    <p ng-if="!$ctrl.description && !$ctrl.longDescription" class="description">No description provided.</p>\n    <p ng-if="$ctrl.description" ng-bind-html="($ctrl.description | linky : \'_blank\')" class="description"></p>\n    <p ng-if="$ctrl.longDescription" ng-bind-html="$ctrl.longDescription | linky : \'_blank\'" class="description"></p>\n    <div ng-if="$ctrl.imageDependencies.length">\n      <div class="order-service-subheading">Image Dependencies</div>\n      <div ng-repeat="imageName in $ctrl.imageDependencies" class="order-service-dependent-image">\n        <span class="pficon pficon-image" aria-hidden="true"></span>\n        <span class="sr-only">Image</span>\n        {{imageName}}\n      </div>\n    </div>\n  </div>\n</div>\n';
 }, function(e, t) {
     e.exports = '<div class="order-service-config">\n  <div class="config-top">\n    <select-plan available-plans="$ctrl.orderedPlans" selected-plan="$ctrl.selectedPlan" on-plan-select="$ctrl.selectPlan"></select-plan>\n  </div>\n</div>\n';
 }, function(e, t) {
@@ -1529,11 +1529,12 @@ webpackJsonp([ 0, 1 ], [ function(e, t) {
             this.ctrl.iconClass = this.ctrl.serviceClass.iconClass || "fa fa-clone", this.ctrl.imageUrl = this.ctrl.serviceClass.imageUrl, 
             this.ctrl.serviceName = this.ctrl.serviceClass.name, this.ctrl.description = this.ctrl.serviceClass.description, 
             this.ctrl.longDescription = this.ctrl.serviceClass.longDescription, this.ctrl.docUrl = i.get(this.ctrl.serviceClass, "resource.spec.externalMetadata.documentationUrl"), 
-            this.ctrl.supportUrl = i.get(this.ctrl.serviceClass, "resource.spec.externalMetadata.supportUrl"), 
-            this.ctrl.noProjectsCantCreate = !1, this.ctrl.applications = [], this.ctrl.parameterData = {}, 
-            this.ctrl.bindParameterData = {}, this.ctrl.forms = {}, this.ctrl.appToBind = null, 
-            this.ctrl.configStepValid = !0, this.ctrl.multipleServicePlans = i.size(this.ctrl.servicePlans) > 1, 
-            this.infoStep = {
+            this.ctrl.supportUrl = i.get(this.ctrl.serviceClass, "resource.spec.externalMetadata.supportUrl");
+            var t = i.get(this.ctrl.serviceClass, "resource.spec.externalMetadata.dependencies");
+            i.isArray(t) && (this.ctrl.imageDependencies = i.filter(t, i.isString)), this.ctrl.noProjectsCantCreate = !1, 
+            this.ctrl.applications = [], this.ctrl.parameterData = {}, this.ctrl.bindParameterData = {}, 
+            this.ctrl.forms = {}, this.ctrl.appToBind = null, this.ctrl.configStepValid = !0, 
+            this.ctrl.multipleServicePlans = i.size(this.ctrl.servicePlans) > 1, this.infoStep = {
                 id: "info",
                 label: "Information",
                 view: "order-service/order-service-info.html",

diff --git a/src/components/order-service/order-service-info.html b/src/components/order-service/order-service-info.html
@@ -37,5 +37,13 @@
     <p ng-if="!$ctrl.description && !$ctrl.longDescription" class="description">No description provided.</p>
     <p ng-if="$ctrl.description" ng-bind-html="($ctrl.description | linky : '_blank')" class="description"></p>
     <p ng-if="$ctrl.longDescription" ng-bind-html="$ctrl.longDescription | linky : '_blank'" class="description"></p>
+    <div ng-if="$ctrl.imageDependencies.length">
+      <div class="order-service-subheading">Image Dependencies</div>
+      <div ng-repeat="imageName in $ctrl.imageDependencies" class="order-service-dependent-image">
+        <span class="pficon pficon-image" aria-hidden="true"></span>
+        <span class="sr-only">Image</span>
+        {{imageName}}
+      </div>
+    </div>
   </div>
 </div>
diff --git a/src/components/order-service/order-service.controller.ts b/src/components/order-service/order-service.controller.ts
@@ -65,6 +65,14 @@ export class OrderServiceController implements angular.IController {
     this.ctrl.longDescription = this.ctrl.serviceClass.longDescription;
     this.ctrl.docUrl = _.get(this.ctrl.serviceClass, 'resource.spec.externalMetadata.documentationUrl');
     this.ctrl.supportUrl = _.get(this.ctrl.serviceClass, 'resource.spec.externalMetadata.supportUrl');
+
+    // Ansible Service Broker adds a `dependencies` field to external metadata
+    // that is an array of images names.
+    let dependencies = _.get(this.ctrl.serviceClass, 'resource.spec.externalMetadata.dependencies');
+    if (_.isArray(dependencies)) {
+      this.ctrl.imageDependencies = _.filter(dependencies, _.isString);
+    }
+
     this.ctrl.noProjectsCantCreate = false;
     this.ctrl.applications = [];
     this.ctrl.parameterData = {};

diff --git a/src/styles/order-service.less b/src/styles/order-service.less
@@ -60,6 +60,21 @@
       font-size: @font-size-small;
       white-space: nowrap;
     }
+    .order-service-dependent-image {
+      margin-bottom: 5px;
+      .word-break();
+      .pficon {
+        margin-right: 5px;
+        vertical-align: -1px;
+      }
+    }
+    .order-service-subheading {
+      // Prevent top margin from collapsing.
+      display: inline-block;
+      font-size: @font-size-base + 1;
+      margin-bottom: 7px;
+      margin-top: 10px;
+    }
   }
   .order-service-documentation-url {
     margin-top: 4px;