Fix issues with bindings widget for service instances

app/index.html

@@ -323,6 +323,7 @@ <h1>JavaScript Required</h1>
         <script src="scripts/directives/replicas.js"></script>
         <script src="scripts/directives/resources.js"></script>
         <script src="scripts/directives/resourceServiceBindings.js"></script>
+        <script src="scripts/directives/serviceInstanceBindings.js"></script>
         <script src="scripts/directives/nav.js"></script>
         <script src="scripts/directives/alerts.js"></script>
         <script src="scripts/directives/parseError.js"></script>

app/scripts/controllers/serviceInstance.js

@@ -5,6 +5,7 @@ angular.module('openshiftConsole')
                                                      $filter,
                                                      $routeParams,
                                                      APIService,
+                                                     BindingService,
                                                      DataService,
                                                      ProjectsService,
                                                      ServiceInstancesService) {
@@ -24,14 +25,15 @@ angular.module('openshiftConsole')
       if ($scope.serviceInstance.metadata.deletionTimestamp) {
         return;
       }
-      ServiceInstancesService.deprovision($scope.serviceInstance);
+      ServiceInstancesService.deprovision($scope.serviceInstance, $scope.bindings);
     };
 
     var watches = [];
 
     var serviceInstanceDisplayName = $filter('serviceInstanceDisplayName');
 
     // API Versions
+    var serviceBindingsVersion = APIService.getPreferredVersion('servicebindings');
     $scope.serviceInstancesVersion = APIService.getPreferredVersion('serviceinstances');
 
     var updateBreadcrumbs = function() {
@@ -91,6 +93,11 @@ angular.module('openshiftConsole')
           .then(function(serviceInstance) {
             serviceResolved(serviceInstance);
             watches.push(DataService.watchObject($scope.serviceInstancesVersion, $routeParams.instance, context, serviceResolved));
+
+            watches.push(DataService.watch(serviceBindingsVersion, context, function(bindingsData) {
+              var allBindings = bindingsData.by('metadata.name');
+              $scope.bindings = BindingService.getBindingsForResource(allBindings, serviceInstance);
+            }));
           }, function(error) {
             $scope.loaded = true;
             $scope.alerts["load"] = {

app/scripts/directives/resourceServiceBindings.js

@@ -33,7 +33,7 @@ function ResourceServiceBindings($filter,
   ctrl.bindableServiceInstances = [];
   ctrl.serviceClasses = [];
   ctrl.serviceInstances = [];
-  ctrl.showBindings = CatalogService.SERVICE_CATALOG_ENABLED && (_.get(ctrl, 'apiObject.kind') === 'ServiceInstance' || enableTechPreviewFeature('pod_presets'));
+  ctrl.showBindings = CatalogService.SERVICE_CATALOG_ENABLED && enableTechPreviewFeature('pod_presets');
 
   var limitWatches = $filter('isIE')() || $filter('isEdge')();
   var DEFAULT_POLL_INTERVAL = 60 * 1000; // milliseconds

app/scripts/directives/serviceInstanceBindings.js

@@ -0,0 +1,48 @@
+'use strict';
+
+angular.module('openshiftConsole').component('serviceInstanceBindings', {
+  controller: [
+    '$filter',
+    'APIService',
+    'BindingService',
+    ServiceInstanceBindings
+  ],
+  controllerAs: '$ctrl',
+  bindings: {
+    showHeader: '<?',
+    project: '<',
+    bindings: '<',
+    serviceInstance: '<',
+    serviceClass: '<',
+    servicePlan: '<'
+  },
+  templateUrl: 'views/directives/service-instance-bindings.html'
+});
+
+
+function ServiceInstanceBindings($filter,
+                                 APIService,
+                                 BindingService) {
+  var ctrl = this;
+  var canI = $filter('canI');
+  var serviceBindingsVersion = ctrl.serviceBindingsVersion = APIService.getPreferredVersion('servicebindings');
+
+  var checkBindable = function() {
+    ctrl.bindable = canI(serviceBindingsVersion, 'create') &&
+                    BindingService.isServiceBindable(ctrl.serviceInstance,
+                                                     ctrl.serviceClass,
+                                                     ctrl.servicePlan);
+  };
+
+  ctrl.createBinding = function() {
+    ctrl.overlayPanelVisible = true;
+  };
+
+  ctrl.closeOverlayPanel = function() {
+    ctrl.overlayPanelVisible = false;
+  };
+
+  ctrl.$onChanges = function() {
+    checkBindable();
+  };
+}

app/views/browse/service-instance.html

@@ -86,12 +86,15 @@ <h1 class="contains-actions">
                           </dd>
                         </dl>
                       </div>
-                      <div class="col-lg-6">
-                        <resource-service-bindings
+                      <div class="col-lg-6 mar-bottom-xl">
+                        <service-instance-bindings
+                          show-header="true"
                           project="project"
-                          project-context="projectContext"
-                          api-object="serviceInstance">
-                        </resource-service-bindings>
+                          bindings="bindings"
+                          service-instance="serviceInstance"
+                          service-class="serviceClass"
+                          service-plan="plan">
+                        </service-instance-bindings>
                       </div>
                     </div>
                     <annotations annotations="serviceInstance.metadata.annotations"></annotations>

app/views/directives/resource-service-bindings.html

@@ -8,21 +8,21 @@ <h3>Bindings</h3>
     service-classes="$ctrl.serviceClasses"
     service-instances="$ctrl.serviceInstances">
   </service-binding>
-  <div ng-if="(($ctrl.apiObject.kind === 'ServiceInstance') || ($ctrl.bindableServiceInstances | size)) &&
+  <div ng-if="($ctrl.bindableServiceInstances | size) &&
               ($ctrl.serviceBindingsVersion | canI : 'create') &&
               !$ctrl.apiObject.metadata.deletionTimestamp">
     <a href="" ng-click="$ctrl.createBinding()" role="button">
       <span class="pficon pficon-add-circle-o" aria-hidden="true"></span>
       Create Binding
     </a>
   </div>
-  <div ng-if="!$ctrl.apiObject.metadata.deletionTimestamp && ($ctrl.apiObject.kind !== 'ServiceInstance') && !($ctrl.bindableServiceInstances | size)">
+  <div ng-if="!$ctrl.apiObject.metadata.deletionTimestamp && !($ctrl.bindableServiceInstances | size)">
     <span>You must have a bindable service in your namespace in order to create bindings.</span>
     <div>
       <a href="./">Browse Catalog</a>
     </div>
   </div>
-  <div ng-if="($ctrl.apiObject.kind !== 'ServiceInstance') && !($ctrl.bindings | size) && ($ctrl.bindableServiceInstances | size) && !($ctrl.serviceBindingsVersion | canI : 'create')">
+  <div ng-if="!($ctrl.bindings | size) && ($ctrl.bindableServiceInstances | size) && !($ctrl.serviceBindingsVersion | canI : 'create')">
     <span>There are no service bindings.</span>
   </div>
 </div>

app/views/directives/service-instance-bindings.html

@@ -0,0 +1,23 @@
+<div ng-if="$ctrl.bindable || ($ctrl.bindings | size)">
+  <h3 ng-if="$ctrl.showHeader">Bindings</h3>
+  <service-binding
+    ng-repeat="binding in $ctrl.bindings track by (binding | uid)"
+    namespace="binding.metadata.namespace"
+    binding="binding"
+    ref-api-object="$ctrl.serviceInstance">
+  </service-binding>
+  <div ng-if="$ctrl.bindable">
+    <a href="" ng-click="$ctrl.createBinding()" role="button">
+      <span class="pficon pficon-add-circle-o" aria-hidden="true"></span>
+      Create Binding
+    </a>
+  </div>
+  <div ng-if="!$ctrl.bindable && !($ctrl.bindings | size)">
+    <span>There are no service bindings.</span>
+  </div>
+</div>
+<overlay-panel show-panel="$ctrl.overlayPanelVisible" handle-close="$ctrl.closeOverlayPanel">
+  <bind-service target="$ctrl.serviceInstance"
+                project="$ctrl.project"
+                on-close="$ctrl.closeOverlayPanel"></bind-service>
+</overlay-panel>

app/views/overview/_service-bindings.html

@@ -10,7 +10,7 @@
     service-instances="$ctrl.serviceInstances"
     secrets="$ctrl.secrets">
   </service-binding>
-  <div ng-if="!$ctrl.refApiObject.metadata.deletionTimestamp && (($ctrl.refApiObject.kind === 'ServiceInstance') || ($ctrl.bindableServiceInstances | size)) && ({resource: 'servicebindings', group: 'servicecatalog.k8s.io'} | canI : 'create')">
+  <div ng-if="!$ctrl.refApiObject.metadata.deletionTimestamp && ($ctrl.bindableServiceInstances | size) && ({resource: 'servicebindings', group: 'servicecatalog.k8s.io'} | canI : 'create')">
     <a href="" ng-click="$ctrl.createBinding()" role="button">
       <span class="pficon pficon-add-circle-o" aria-hidden="true"></span>
       Create Binding

app/views/overview/_service-instance-row.html

@@ -149,16 +149,16 @@ <h3>
               </div>
             </div>
           </div>
-          <overview-service-bindings
-            ng-if="row.isBindable || row.bindings"
-            section-title="Bindings"
-            ref-api-object="row.apiObject"
-            namespace="row.apiObject.metadata.namespace"
-            bindings="row.bindings"
-            bindable-service-instances="row.state.bindableServiceInstances"
-            service-classes="row.state.serviceClasses"
-            create-binding="row.showOverlayPanel('bindService', {target: row.apiObject})">
-          </overview-service-bindings>
+          <div ng-if="row.isBindable || (row.bindings | size)">
+            <div class="section-title">Bindings</div>
+            <service-instance-bindings
+              project="row.state.project"
+              bindings="row.bindings"
+              service-instance="row.apiObject"
+              service-class="row.serviceClass"
+              service-plan="row.servicePlan">
+            </service-instance-bindings>
+          </div>
         </div>
       </div>
     </div>

dist/scripts/scripts.js

@@ -492,7 +492,7 @@ u.unwatchAll(at), $(window).off(".overview");
 
 function ResourceServiceBindings(e, t, n, a, r) {
 var o, i = this, s = e("enableTechPreviewFeature");
-i.bindings = [], i.bindableServiceInstances = [], i.serviceClasses = [], i.serviceInstances = [], i.showBindings = a.SERVICE_CATALOG_ENABLED && ("ServiceInstance" === _.get(i, "apiObject.kind") || s("pod_presets"));
+i.bindings = [], i.bindableServiceInstances = [], i.serviceClasses = [], i.serviceInstances = [], i.showBindings = a.SERVICE_CATALOG_ENABLED && s("pod_presets");
 var c = e("isIE")() || e("isEdge")(), l = [], u = e("canI"), d = i.serviceBindingsVersion = t.getPreferredVersion("servicebindings"), m = t.getPreferredVersion("clusterserviceclasses"), p = t.getPreferredVersion("serviceinstances"), f = t.getPreferredVersion("clusterserviceplans"), g = function() {
 i.apiObject && i.bindings && (i.bindings = n.getBindingsForResource(i.bindings, i.apiObject));
 }, v = function() {
@@ -527,6 +527,19 @@ r.unwatchAll(l);
 };
 }
 
+function ServiceInstanceBindings(e, t, n) {
+var a = this, r = e("canI"), o = a.serviceBindingsVersion = t.getPreferredVersion("servicebindings"), i = function() {
+a.bindable = r(o, "create") && n.isServiceBindable(a.serviceInstance, a.serviceClass, a.servicePlan);
+};
+a.createBinding = function() {
+a.overlayPanelVisible = !0;
+}, a.closeOverlayPanel = function() {
+a.overlayPanelVisible = !1;
+}, a.$onChanges = function() {
+i();
+};
+}
+
 angular.isUndefined(window.OPENSHIFT_CONSTANTS) && (window.OPENSHIFT_CONSTANTS = {}), angular.extend(window.OPENSHIFT_CONSTANTS, {
 HELP_BASE_URL: "https://docs.openshift.org/latest/",
 HELP: {
@@ -6306,46 +6319,49 @@ e.serviceInstances = t.select(e.unfilteredServiceInstances), r();
 i.unwatchAll(u);
 });
 }));
-} ]), angular.module("openshiftConsole").controller("ServiceInstanceController", [ "$scope", "$filter", "$routeParams", "APIService", "DataService", "ProjectsService", "ServiceInstancesService", function(e, t, n, a, r, o, i) {
+} ]), angular.module("openshiftConsole").controller("ServiceInstanceController", [ "$scope", "$filter", "$routeParams", "APIService", "BindingService", "DataService", "ProjectsService", "ServiceInstancesService", function(e, t, n, a, r, o, i, s) {
 e.alerts = {}, e.projectName = n.project, e.serviceInstance = null, e.serviceClass = null, e.breadcrumbs = [ {
 title: "Provisioned Services",
 link: "project/" + n.project + "/browse/service-instances"
 } ], e.deprovision = function() {
-e.serviceInstance.metadata.deletionTimestamp || i.deprovision(e.serviceInstance);
+e.serviceInstance.metadata.deletionTimestamp || s.deprovision(e.serviceInstance, e.bindings);
 };
-var s = [], c = t("serviceInstanceDisplayName");
+var c = [], l = t("serviceInstanceDisplayName"), u = a.getPreferredVersion("servicebindings");
 e.serviceInstancesVersion = a.getPreferredVersion("serviceinstances");
-var l, u = function() {
+var d, m = function() {
 e.breadcrumbs.push({
 title: e.displayName
 });
-}, d = function() {
-e.serviceClass || l || (l = i.fetchServiceClassForInstance(e.serviceInstance).then(function(t) {
-e.serviceClass = t, e.displayName = c(e.serviceInstance, t), u(), l = null;
+}, p = function() {
+e.serviceClass || d || (d = s.fetchServiceClassForInstance(e.serviceInstance).then(function(t) {
+e.serviceClass = t, e.displayName = l(e.serviceInstance, t), m(), d = null;
 }));
-}, m = function() {
-i.isCurrentPlan(e.serviceInstance, e.plan) || i.fetchServicePlanForInstance(e.serviceInstance).then(function(t) {
+}, f = function() {
+s.isCurrentPlan(e.serviceInstance, e.plan) || s.fetchServicePlanForInstance(e.serviceInstance).then(function(t) {
 e.plan = t;
 });
-}, p = function(t, n) {
+}, g = function(t, n) {
 e.loaded = !0, e.serviceInstance = t, "DELETED" === n && (e.alerts.deleted = {
 type: "warning",
 message: "This provisioned service has been deleted."
-}), d(), m();
+}), p(), f();
 };
-o.get(n.project).then(_.spread(function(a, o) {
-e.project = a, e.projectContext = o, r.get(e.serviceInstancesVersion, n.instance, o, {
+i.get(n.project).then(_.spread(function(a, i) {
+e.project = a, e.projectContext = i, o.get(e.serviceInstancesVersion, n.instance, i, {
 errorNotification: !1
 }).then(function(t) {
-p(t), s.push(r.watchObject(e.serviceInstancesVersion, n.instance, o, p));
+g(t), c.push(o.watchObject(e.serviceInstancesVersion, n.instance, i, g)), c.push(o.watch(u, i, function(n) {
+var a = n.by("metadata.name");
+e.bindings = r.getBindingsForResource(a, t);
+}));
 }, function(n) {
 e.loaded = !0, e.alerts.load = {
 type: "error",
 message: "The provisioned service details could not be loaded.",
 details: t("getErrorDetails")(n)
 };
 }), e.$on("$destroy", function() {
-r.unwatchAll(s);
+o.unwatchAll(c);
 });
 }));
 } ]), angular.module("openshiftConsole").controller("SecretsController", [ "$routeParams", "$scope", "DataService", "ProjectsService", function(e, t, n, a) {
@@ -10377,6 +10393,18 @@ apiObject: "<",
 createBinding: "&"
 },
 templateUrl: "views/directives/resource-service-bindings.html"
+}), angular.module("openshiftConsole").component("serviceInstanceBindings", {
+controller: [ "$filter", "APIService", "BindingService", ServiceInstanceBindings ],
+controllerAs: "$ctrl",
+bindings: {
+showHeader: "<?",
+project: "<",
+bindings: "<",
+serviceInstance: "<",
+serviceClass: "<",
+servicePlan: "<"
+},
+templateUrl: "views/directives/service-instance-bindings.html"
 }), angular.module("openshiftConsole").directive("sidebar", [ "$location", "$filter", "$timeout", "$rootScope", "$routeParams", "AuthorizationService", "Constants", "HTMLService", function(e, t, n, a, r, o, i, s) {
 var c = function(e, t) {
 return e.href === t || _.some(e.prefixes, function(e) {