feat: Instances management screen not accessible sometimes

This closes gravitee-io/issues#1908

build.json

@@ -1,3 +1,3 @@
 {
-    "version": "1.23.0"
+    "version": "1.24.0-SNAPSHOT"
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gravitee-management-webui",
-  "version": "1.23.0",
+  "version": "1.24.0-SNAPSHOT",
   "description": "Gravitee.io APIM - Portal",
   "dependencies": {
     "amdefine": "^1.0.1",

src/management/instances/instances.controller.ts

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 import * as _ from 'lodash';
+import InstancesService from "../../services/instances.service";
 
 interface IInstancesScope extends ng.IScope {
 
@@ -25,29 +26,36 @@ interface IInstancesScope extends ng.IScope {
 class InstancesController {
   private instances: any;
   private startedInstances: any;
+  private allInstances: any;
   private _displayEmptyMode: boolean;
   private searchGatewayInstances: string;
 
   constructor(
-    private $scope: IInstancesScope) {
+    private $scope: IInstancesScope,
+    private InstancesService: InstancesService) {
 		'ngInject';
 	}
 
   $onInit() {
     this.searchGatewayInstances = '';
-    this.startedInstances = _.filter(this.instances, { 'state': 'started'});
+    this.instances = this.startedInstances = _.clone(_.filter(this.instances, { 'state': 'started'}));
     this._displayEmptyMode = this.startedInstances.length === 0;
 
     this.$scope.displayAllInstances = false;
 
-    let that = this;
-    this.$scope.switchDisplayInstances = function() {
-      that.$scope.displayAllInstances = !that.$scope.displayAllInstances;
+    this.$scope.switchDisplayInstances = () => {
+      this.$scope.displayAllInstances = !this.$scope.displayAllInstances;
 
-      if (!that.$scope.displayAllInstances) {
-        that._displayEmptyMode = that.startedInstances.length === 0;
+      if (this.$scope.displayAllInstances) {
+        this._displayEmptyMode = this.instances.length === 0;
+        if (this.allInstances) {
+          this.instances = this.allInstances;
+        } else {
+          this.InstancesService.list(true).then(response => this.instances = this.allInstances = response.data);
+        }
       } else {
-        that._displayEmptyMode = that.instances.length === 0;
+        this._displayEmptyMode = this.startedInstances.length === 0;
+        this.instances = this.startedInstances;
       }
     };
   }

src/management/instances/instances.html

@@ -32,8 +32,7 @@
                    style="padding: 0; overflow-y: auto;">
     <div layout="row" layout-wrap class="inset">
       <div class="gravitee-instances-box"
-           ng-repeat="instance in $ctrl.instances | filter:displayAllInstances?{}:{state: 'started'}
-             | filter:$ctrl.searchGatewayInstances | orderBy:'-started_at'">
+           ng-repeat="instance in $ctrl.instances | filter:$ctrl.searchGatewayInstances | orderBy:'-started_at'">
         <a ui-sref="management.instances.detail.environment({instanceId: instance.event})">
           <md-card class="gravitee-instances-box gravitee-card gravitee-api-card">
             <md-card-header layout="row" layout-align="end start">

src/services/instances.service.ts

@@ -21,8 +21,8 @@ class InstancesService {
     this.instancesURL = `${Constants.baseURL}instances/`;
   }
 
-  list() {
-    return this.$http.get(this.instancesURL + '?includeStopped=true');
+  list(includeStopped?: boolean) {
+    return this.$http.get(this.instancesURL + '?includeStopped=' + (includeStopped === undefined ? false : includeStopped));
   }
 
   get(id) {