Add timeout and connection status

Added timeout and connection status to the plugins configuration.
Added support in ui to display a temporary error screen in case a plugin in offline

Change-Id: Id4a0909cc704903be6183f22c67caec6f5050103
Issue-ID: SDC-1081
Signed-off-by: Idan Amit <ia096e@intl.att.com>

9 files changed, 39 insertions, 8 deletions

diff --git a/catalog-ui/src/app/models/plugins-config.ts b/catalog-ui/src/app/models/plugins-config.ts
index 3f687a3af0..e69501abb4 100644
--- a/catalog-ui/src/app/models/plugins-config.ts
+++ b/catalog-ui/src/app/models/plugins-config.ts
@@ -5,6 +5,7 @@ export class Plugin {
     pluginSourceUrl: string;
     pluginStateUrl: string;
     pluginDisplayOptions: Map<string, PluginDisplayOptions>;
+    isOnline: boolean;
 }
 
 export class PluginDisplayOptions {
@@ -17,4 +18,5 @@ export type Plugins = Array<Plugin>;
 
 export class PluginsConfiguration {
     static plugins: Plugins;
+    static connectionTimeout: boolean;
 }
diff --git a/catalog-ui/src/app/view-models/plugins/plugins-tab-view-model.ts b/catalog-ui/src/app/view-models/plugins/plugins-tab-view-model.ts
index 438cf4a60c..cb3f842648 100644
--- a/catalog-ui/src/app/view-models/plugins/plugins-tab-view-model.ts
+++ b/catalog-ui/src/app/view-models/plugins/plugins-tab-view-model.ts
@@ -30,11 +30,15 @@ export class PluginsTabViewModel {
     }
 
     private initScope = ():void => {
-        this.$scope.isLoading = true;
         this.$scope.plugin = this.pluginsService.getPluginByStateUrl(this.$stateParams.path);
         this.$scope.version = this.cacheService.get('version');
         this.$scope.user = this.cacheService.get('user');
 
+        // Don't show the loader if the plugin isn't online
+        if (this.$scope.plugin.isOnline) {
+            this.$scope.isLoading = true;
+        }
+
         this.$scope.queryParams = {
             userId: this.$scope.user.userId,
             userRole: this.$scope.user.role,
diff --git a/catalog-ui/src/app/view-models/plugins/plugins-tab-view.html b/catalog-ui/src/app/view-models/plugins/plugins-tab-view.html
index bc404b46d1..6ee4855a4c 100644
--- a/catalog-ui/src/app/view-models/plugins/plugins-tab-view.html
+++ b/catalog-ui/src/app/view-models/plugins/plugins-tab-view.html
@@ -1,5 +1,6 @@
-<div class="sdc-catalog-container">
+<div class="sdc-catalog-container plugins-tab-container">
     <loader display="isLoading"></loader>
     <top-nav [version]="version" [hide-search]="true"></top-nav>
-    <plugin-frame (on-loading-done)="onLoadingDone(plugin)" [plugin]="plugin" [query-params]="queryParams"></plugin-frame>
+    <plugin-frame data-ng-if="plugin.isOnline" (on-loading-done)="onLoadingDone(plugin)" [plugin]="plugin" [query-params]="queryParams"></plugin-frame>
+    <div class="offline-plugin-message" data-ng-if="!plugin.isOnline">The plugin {{plugin.pluginId}} is offline. Please try again later</div>
 </div>
diff --git a/catalog-ui/src/app/view-models/plugins/plugins-tab.less b/catalog-ui/src/app/view-models/plugins/plugins-tab.less
new file mode 100644
index 0000000000..f821041436
--- /dev/null
+++ b/catalog-ui/src/app/view-models/plugins/plugins-tab.less
@@ -0,0 +1,10 @@
+.plugins-tab-container {
+
+    text-align: center;
+
+    .offline-plugin-message {
+        top: 50px;
+        position: relative;
+        display: inline-block;
+    }
+}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/plugins/plugins-context-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/plugins/plugins-context-view-model.ts
index 550fb84c10..3e0fb44cc8 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/plugins/plugins-context-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/plugins/plugins-context-view-model.ts
@@ -9,6 +9,7 @@ interface IPluginsContextViewModelScope extends IWorkspaceViewModelScope {
     user:IUserProperties;
     queryParams: Object;
     isLoading: boolean;
+    show: boolean;
 
     onLoadingDone(plugin: Plugin): void;
 }
@@ -30,10 +31,15 @@ export class PluginsContextViewModel {
     }
 
     private initScope = ():void => {
-        this.$scope.isLoading = true;
+        this.$scope.show = false;
         this.$scope.plugin = this.pluginsService.getPluginByStateUrl(this.$stateParams.path);
         this.$scope.user = this.cacheService.get('user');
 
+        // Don't show loader if the plugin isn't online
+        if (this.$scope.plugin.isOnline) {
+            this.$scope.isLoading = true;
+        }
+
         this.$scope.queryParams = {
             userId: this.$scope.user.userId,
             userRole: this.$scope.user.role,
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/plugins/plugins-context-view.html b/catalog-ui/src/app/view-models/workspace/tabs/plugins/plugins-context-view.html
index d70717a3ed..6c34749a28 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/plugins/plugins-context-view.html
+++ b/catalog-ui/src/app/view-models/workspace/tabs/plugins/plugins-context-view.html
@@ -1,4 +1,5 @@
 <loader display="isLoading"></loader>
 <div class="workspace-plugins">
-    <plugin-frame (on-loading-done)="onLoadingDone(plugin)" [plugin]="plugin" [query-params]="queryParams"></plugin-frame>
+    <plugin-frame data-ng-if="plugin.isOnline" (on-loading-done)="onLoadingDone(plugin)" [plugin]="plugin" [query-params]="queryParams"></plugin-frame>
+    <div class="offline-plugin-message" data-ng-if="!plugin.isOnline">The plugin {{plugin.pluginId}} is offline. Please try again later</div>
 </div>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/plugins/plugins-context.less b/catalog-ui/src/app/view-models/workspace/tabs/plugins/plugins-context.less
new file mode 100644
index 0000000000..dd0b751423
--- /dev/null
+++ b/catalog-ui/src/app/view-models/workspace/tabs/plugins/plugins-context.less
@@ -0,0 +1,8 @@
+.workspace-plugins {
+
+    text-align: center;
+
+    .offline-plugin-message {
+        display: inline-block;
+    }
+}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/plugins/plugins-tab.less b/catalog-ui/src/app/view-models/workspace/tabs/plugins/plugins-tab.less
deleted file mode 100644
index 7798e36af8..0000000000
--- a/catalog-ui/src/app/view-models/workspace/tabs/plugins/plugins-tab.less
+++ /dev/null
@@ -1,3 +0,0 @@
-.workspace-plugins {
-
-}
diff --git a/catalog-ui/src/assets/styles/app.less b/catalog-ui/src/assets/styles/app.less
index f48fd864ef..6eabc7e756 100644
--- a/catalog-ui/src/assets/styles/app.less
+++ b/catalog-ui/src/assets/styles/app.less
@@ -93,6 +93,7 @@
 @import '../../app/view-models/modals/onboarding-modal/onboarding-modal.less';
 @import '../../app/view-models/modals/icons-modal/icons-modal-view.less';
 @import '../../app/view-models/onboard-vendor/onboard-vendor.less';
+@import '../../app/view-models/plugins/plugins-tab.less';
 @import '../../app/view-models/support/support.less';
 @import '../../app/view-models/tabs/general-tab.less';
 @import '../../app/view-models/tabs/hierarchy/hierarchy.less';
@@ -117,3 +118,4 @@
 @import '../../app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities.less';
 @import '../../app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts.less';
 @import '../../app/view-models/workspace/workspace.less';
+@import '../../app/view-models/workspace/tabs/plugins/plugins-context.less';