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>

4 files changed, 90 insertions, 0 deletions

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() {
+
+    }
+}