Create Error page for offline plugin

Created an error page to be displayed when a plugin is offline

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

13 files changed, 113 insertions, 25 deletions

diff --git a/catalog-ui/src/app/app.ts b/catalog-ui/src/app/app.ts
index 24665cccbc..48f15c057d 100644
--- a/catalog-ui/src/app/app.ts
+++ b/catalog-ui/src/app/app.ts
@@ -7,9 +7,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -58,7 +58,6 @@ import {ComponentServiceNg2} from "./ng2/services/component-services/component.s
 import {ComponentMetadata} from "./models/component-metadata";
 import {Categories} from "./models/categories";
 import {IUserProperties} from "./models/user";
-import {PluginFrameComponent} from "./ng2/components/ui/plugin/plugin-frame.component";
 
 let moduleName:string = 'sdcApp';
 let viewModelsModuleName:string = 'Sdc.ViewModels';
@@ -145,7 +144,6 @@ _.each(hostedApplications, (hostedApp)=> {
 // ===================== Hosted applications section ====================
 
 export const ng1appModule:ng.IModule = angular.module(moduleName, dependentModules);
-angular.module('sdcApp').directive('pluginFrame', downgradeComponent( {component: PluginFrameComponent, inputs: ['plugin', 'queryParams'], outputs: ['onLoadingDone']} ) as angular.IDirectiveFactory);
 
 ng1appModule.config([
     '$stateProvider',
diff --git a/catalog-ui/src/app/modules/directive-module.ts b/catalog-ui/src/app/modules/directive-module.ts
index 1babeefbdb..6285415056 100644
--- a/catalog-ui/src/app/modules/directive-module.ts
+++ b/catalog-ui/src/app/modules/directive-module.ts
@@ -7,9 +7,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *      http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -183,6 +183,7 @@ import { SearchWithAutoCompleteComponent } from "../ng2/components/ui/search-wit
 import { PalettePopupPanelComponent } from "../ng2/components/ui/palette-popup-panel/palette-popup-panel.component";
 import { ServicePathComponent } from '../ng2/components/logic/service-path/service-path.component';
 import { ServicePathSelectorComponent } from '../ng2/components/logic/service-path-selector/service-path-selector.component';
+import {PluginFrameComponent} from "../ng2/components/ui/plugin/plugin-frame.component";
 
 directiveModule.directive('menuListNg2', downgradeComponent({
     component: MenuListNg2Component,
@@ -240,3 +241,9 @@ directiveModule.directive('ng2ServicePathSelector', downgradeComponent({
     inputs: ['drawPath', 'deletePaths', 'service', 'selectedPathId'],
     outputs: []
 }) as angular.IDirectiveFactory);
+
+directiveModule.directive('pluginFrame', downgradeComponent( {
+    component: PluginFrameComponent,
+    inputs: ['plugin', 'queryParams'],
+    outputs: ['onLoadingDone']
+}) as angular.IDirectiveFactory);
diff --git a/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.html b/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.html
index fb90a1eb90..a72ed837a4 100644
--- a/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.html
+++ b/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.html
@@ -1,5 +1,6 @@
 <div class="plugin-frame">
     <div class="w-sdc-main-container">
-        <iframe class="plugin-iframe" [src]="pluginUrl | safeUrlSanitizer"></iframe>
+        <iframe *ngIf="plugin.isOnline" class="plugin-iframe" [src]="pluginUrl | safeUrlSanitizer"></iframe>
+        <plugin-not-connected [pluginName]="plugin.pluginId" *ngIf="!plugin.isOnline"></plugin-not-connected>
     </div>
 </div>
diff --git a/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.ts b/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.ts
index fc0af53a44..2ba784727f 100644
--- a/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.ts
@@ -25,6 +25,12 @@ export class PluginFrameComponent implements OnInit {
     }
 
     ngOnInit(): void {
+        if (this.plugin.isOnline) {
+            this.initPlugin();
+        }
+    }
+
+    private initPlugin() {
         this.pluginUrl = this.plugin.pluginSourceUrl;
         this.isClosed = false;
 
diff --git a/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.module.ts b/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.module.ts
index 9eebd5c47f..fce9c76eb1 100644
--- a/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.module.ts
+++ b/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.module.ts
@@ -4,6 +4,7 @@ import {PluginFrameComponent} from "./plugin-frame.component";
 import {LayoutModule} from "../../layout/layout.module";
 import {GlobalPipesModule} from "../../../pipes/global-pipes.module";
 import {UiElementsModule} from "../ui-elements.module";
+import {PluginNotConnectedModule} from "../../../pages/plugin-not-connected/plugin-not-connected-module";
 
 
 @NgModule({
@@ -13,6 +14,7 @@ import {UiElementsModule} from "../ui-elements.module";
     imports: [
         CommonModule,
         LayoutModule,
+        PluginNotConnectedModule,
         GlobalPipesModule,
         UiElementsModule
     ],
diff --git a/catalog-ui/src/app/ng2/pages/plugin-not-connected/plugin-not-connected-module.ts b/catalog-ui/src/app/ng2/pages/plugin-not-connected/plugin-not-connected-module.ts
new file mode 100644
index 0000000000..5e92cd5e55
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/plugin-not-connected/plugin-not-connected-module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from "@angular/core";
+import {PluginNotConnectedComponent} from "./plugin-not-connected.component";
+import {TranslateModule} from "../../shared/translator/translate.module";
+
+@NgModule({
+    declarations: [
+        PluginNotConnectedComponent
+    ],
+    imports: [TranslateModule],
+    exports: [PluginNotConnectedComponent],
+    entryComponents: [
+        PluginNotConnectedComponent
+    ]
+})
+export class PluginNotConnectedModule {
+
+}
+
diff --git a/catalog-ui/src/app/ng2/pages/plugin-not-connected/plugin-not-connected.component.html b/catalog-ui/src/app/ng2/pages/plugin-not-connected/plugin-not-connected.component.html
new file mode 100644
index 0000000000..93fdcd57ac
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/plugin-not-connected/plugin-not-connected.component.html
@@ -0,0 +1,19 @@
+<div class="plugin-not-connected">
+    <div class="plugin-error-message">
+        <div class="icon-wrapper">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="89" height="89">
+                <defs>
+                    <path id="x-copy-25-a" d="M58.156238,59.5335698 C62.1689453,59.5335698 61.56978,63.8275462 60.7163086,64.9135742 L45.4370117,86.4863281 C43.7791748,88.5723877 41.4401855,90.0166016 39.0654297,88.0742188 C36.6906738,86.1318359 37.5565186,83.9068604 38.814209,82.0805664 L51.0482595,65.7737569 L33.5520953,65.7737569 C30.1455078,65.7737569 30.2847382,62.4296446 31.1382096,61.3436165 L48.2076381,39.6230552 C49.4878452,37.8130084 51.4625128,37.3138743 53.5961914,38.3999023 C55.72987,39.4859304 55.7423523,41.7951113 54.4621452,43.6051581 L41.6600738,59.5335698 L58.156238,59.5335698 Z M66.4338862,21.1879296 C76.7247909,21.1879296 85.9130987,28.2505006 88.1182925,38.1381001 C90.3234864,49.4382137 82.6053079,60.7383274 70.8442739,63.2102273 C70.4767416,63.2102273 70.4767416,63.2102273 70.1092093,63.2102273 C68.2715477,63.2102273 66.8014185,62.1508416 66.4338862,60.3851989 C66.0663539,58.2664275 67.5364831,57.5007848 69.3741447,57.1476562 C77.0923232,55.735142 83.9549925,47.3194424 82.4848633,39.5506143 C81.014734,32.8411718 73.4170001,27.2505006 66.4338862,27.2505006 L62.0234984,27.2505006 C60.1858369,27.2505006 58.7157076,25.8379864 58.3481753,24.4254722 C55.0403845,11.3597158 40.7066244,3.2377591 27.1079288,6.76904461 C20.4923472,8.18155882 13.6118303,13.4191014 10.3040395,19.0691583 C6.62871635,25.0723437 6.52611941,32.4286576 8.36378097,38.7849715 C10.2014425,45.494414 14.6118303,50.1444709 20.8598796,53.3226278 C22.6975411,54.3820135 23.4326057,56.5007848 22.3300088,58.2664275 C21.2274119,60.0320703 19.022218,60.3851989 17.1845564,59.3258132 C9.09884559,55.0882706 3.21832861,48.0256995 1.01313474,39.5506143 C-1.19205913,31.4286576 0.278070119,22.9535723 4.68845786,15.5378728 C9.4663779,8.47530172 16.4494918,3.17837344 25.2702673,1.05960213 C41.8092213,-3.1779405 59.0832399,5.6502733 64.5962246,21.1879296 C65.8213323,21.1879296 66.4338862,21.1879296 66.4338862,21.1879296 Z"/>
+                </defs>
+                <g fill="none" fill-rule="evenodd">
+                    <use fill="#CF2A2A" fill-rule="nonzero" xlink:href="#x-copy-25-a"/>
+                </g>
+            </svg>
+        </div>
+        <div class="plugin-message-text">
+            <span class="plugin-message-main-text" [innerHTML]="'PLUGIN_NOT_CONNECTED_ERROR_MAIN' | translate: { pluginName: pluginName }"></span>
+            <br/>
+            <span class="plugin-message-sub-text" [innerHTML]="'PLUGIN_NOT_CONNECTED_ERROR_SUB' | translate"></span>
+        </div>
+    </div>
+</div>
diff --git a/catalog-ui/src/app/ng2/pages/plugin-not-connected/plugin-not-connected.component.less b/catalog-ui/src/app/ng2/pages/plugin-not-connected/plugin-not-connected.component.less
new file mode 100644
index 0000000000..2893d3f477
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/plugin-not-connected/plugin-not-connected.component.less
@@ -0,0 +1,38 @@
+@import '../../../../assets/styles/mixins';
+@import '../../../../assets/styles/variables';
+
+.plugin-not-connected {
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .plugin-error-message {
+        line-height: 2em;
+    }
+
+    .icon-wrapper {
+        text-align: center;
+        margin-right: 10px;
+        line-height: 3em;
+    }
+
+    .plugin-message-text {
+        text-align: center;
+        color: #323943;
+        font-family: @font-opensans-medium;
+    }
+
+    .plugin-message-main-text {
+        font-size: 22px;
+    }
+
+    .plugin-message-sub-text {
+        font-size: 14px;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/pages/plugin-not-connected/plugin-not-connected.component.ts b/catalog-ui/src/app/ng2/pages/plugin-not-connected/plugin-not-connected.component.ts
new file mode 100644
index 0000000000..6cc2b39b89
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/plugin-not-connected/plugin-not-connected.component.ts
@@ -0,0 +1,15 @@
+import {Component, Input} from "@angular/core";
+
+@Component({
+    selector: 'plugin-not-connected',
+    templateUrl: './plugin-not-connected.component.html',
+    styleUrls:['plugin-not-connected.component.less']
+})
+export class PluginNotConnectedComponent {
+
+    @Input() pluginName: string;
+
+    constructor() {
+
+    }
+}
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 6ee4855a4c..843aaa14fa 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,6 +1,5 @@
 <div class="sdc-catalog-container plugins-tab-container">
     <loader display="isLoading"></loader>
     <top-nav [version]="version" [hide-search]="true"></top-nav>
-    <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>
+    <plugin-frame (on-loading-done)="onLoadingDone(plugin)" [plugin]="plugin" [query-params]="queryParams"></plugin-frame>
 </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
index f821041436..3cb5d1b421 100644
--- a/catalog-ui/src/app/view-models/plugins/plugins-tab.less
+++ b/catalog-ui/src/app/view-models/plugins/plugins-tab.less
@@ -1,10 +1,2 @@
 .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.html b/catalog-ui/src/app/view-models/workspace/tabs/plugins/plugins-context-view.html
index 6c34749a28..d70717a3ed 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,5 +1,4 @@
 <loader display="isLoading"></loader>
 <div class="workspace-plugins">
-    <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>
+    <plugin-frame (on-loading-done)="onLoadingDone(plugin)" [plugin]="plugin" [query-params]="queryParams"></plugin-frame>
 </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
index dd0b751423..c913af1931 100644
--- 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
@@ -1,8 +1,2 @@
 .workspace-plugins {
-
-    text-align: center;
-
-    .offline-plugin-message {
-        display: inline-block;
-    }
 }