Catalog alignment

Issue-ID: SDC-2724
Signed-off-by: ys9693 <ys9693@att.com>
Change-Id: I52b4aacb58cbd432ca0e1ff7ff1f7dd52099c6fe

7 files changed, 165 insertions, 0 deletions

diff --git a/catalog-ui/src/app/ng2/pages/plugins/plugin-context-view/plugin-context-view.page.component.html b/catalog-ui/src/app/ng2/pages/plugins/plugin-context-view/plugin-context-view.page.component.html
new file mode 100644
index 0000000000..85e83c4310
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/plugins/plugin-context-view/plugin-context-view.page.component.html
@@ -0,0 +1,4 @@
+<div class="workspace-plugins">
+    <plugin-frame (onLoadingDone)="onLoadingDone(plugin)" [plugin]="plugin" [queryParams]="queryParams"></plugin-frame>
+    <loader [display]="isLoading && plugin.isOnline" ></loader>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/plugins/plugin-context-view/plugin-context-view.page.component.less b/catalog-ui/src/app/ng2/pages/plugins/plugin-context-view/plugin-context-view.page.component.less
new file mode 100644
index 0000000000..c913af1931
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/plugins/plugin-context-view/plugin-context-view.page.component.less
@@ -0,0 +1,2 @@
+.workspace-plugins {
+}
diff --git a/catalog-ui/src/app/ng2/pages/plugins/plugin-context-view/plugin-context-view.page.component.ts b/catalog-ui/src/app/ng2/pages/plugins/plugin-context-view/plugin-context-view.page.component.ts
new file mode 100644
index 0000000000..21aa8584d5
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/plugins/plugin-context-view/plugin-context-view.page.component.ts
@@ -0,0 +1,58 @@
+import {Component, Inject} from "@angular/core";
+import {Component as ComponentData, IUserProperties, Plugin} from "app/models";
+import {CacheService, PluginsService} from "app/services-ng2";
+
+
+@Component({
+    selector: 'plugin-context-view',
+    templateUrl: './plugin-context-view.page.component.html',
+    styleUrls: ['./plugin-context-view.page.component.less']
+})
+
+export class PluginContextViewPageComponent {
+    plugin: Plugin;
+    user: IUserProperties;
+    queryParams: Object;
+    isLoading: boolean;
+    show: boolean;
+    component: ComponentData;
+
+    constructor(@Inject("$stateParams") private _stateParams,
+                private cacheService: CacheService,
+                private pluginsService: PluginsService) {
+
+        this.show = false;
+        this.component = this._stateParams.component;
+        this.plugin = this.pluginsService.getPluginByStateUrl(_stateParams.path);
+        this.user = this.cacheService.get('user');
+    }
+
+    ngOnInit() {
+        this.isLoading = true;
+
+        this.queryParams = {
+            userId: this.user.userId,
+            userRole: this.user.role,
+            displayType: "context",
+            contextType: this.component.getComponentSubType(),
+            uuid: this.component.uuid,
+            lifecycleState: this.component.lifecycleState,
+            isOwner: this.component.lastUpdaterUserId === this.user.userId,
+            version: this.component.version,
+            parentUrl: window.location.origin,
+            eventsClientId: this.plugin.pluginId
+        };
+
+        if (this._stateParams.queryParams) {
+            _.assign(this.queryParams, this._stateParams.queryParams);
+        }
+    }
+
+    onLoadingDone(plugin: Plugin) {
+        if (plugin.pluginId == this.plugin.pluginId) {
+            this.isLoading = false;
+        }
+    }
+
+
+}
diff --git a/catalog-ui/src/app/ng2/pages/plugins/plugin-tab-view/plugin-tab-view.page.component.html b/catalog-ui/src/app/ng2/pages/plugins/plugin-tab-view/plugin-tab-view.page.component.html
new file mode 100644
index 0000000000..5ce95d11f8
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/plugins/plugin-tab-view/plugin-tab-view.page.component.html
@@ -0,0 +1,20 @@
+<!--
+  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+  ~
+  ~ 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.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+-->
+<div class="sdc-catalog-container plugins-tab-container">
+    <top-nav [version]="version" [hideSearch]="true"></top-nav>
+    <plugin-frame (onLoadingDone)="onLoadingDone(plugin)" [plugin]="plugin" [queryParams]="queryParams"></plugin-frame>
+    <loader [display]="isLoading"></loader>
+</div>
diff --git a/catalog-ui/src/app/ng2/pages/plugins/plugin-tab-view/plugin-tab-view.page.component.less b/catalog-ui/src/app/ng2/pages/plugins/plugin-tab-view/plugin-tab-view.page.component.less
new file mode 100644
index 0000000000..3cb5d1b421
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/plugins/plugin-tab-view/plugin-tab-view.page.component.less
@@ -0,0 +1,2 @@
+.plugins-tab-container {
+}
diff --git a/catalog-ui/src/app/ng2/pages/plugins/plugin-tab-view/plugin-tab-view.page.component.ts b/catalog-ui/src/app/ng2/pages/plugins/plugin-tab-view/plugin-tab-view.page.component.ts
new file mode 100644
index 0000000000..7ba8474569
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/plugins/plugin-tab-view/plugin-tab-view.page.component.ts
@@ -0,0 +1,45 @@
+import {Component, Inject} from "@angular/core";
+import {IUserProperties, Plugin} from "app/models";
+import {CacheService, PluginsService} from "app/services-ng2";
+
+@Component({
+    selector: 'plugin-tab-view',
+    templateUrl: './plugin-tab-view.page.component.html',
+    styleUrls: ['./plugin-tab-view.page.component.less']
+})
+
+export class PluginTabViewPageComponent {
+    plugin: Plugin;
+    user: IUserProperties;
+    version: string;
+    queryParams: Object;
+    isLoading: boolean;
+
+    constructor(@Inject("$stateParams") private _stateParams,
+                private cacheService: CacheService,
+                private pluginsService: PluginsService) {
+
+        this.plugin = this.pluginsService.getPluginByStateUrl(_stateParams.path);
+        this.version = this.cacheService.get('version');
+        this.user = this.cacheService.get('user');
+    }
+
+    ngOnInit() {
+        this.isLoading = true;
+
+        this.queryParams = {
+            userId: this.user.userId,
+            userRole: this.user.role,
+            displayType: "tab",
+            parentUrl: window.location.origin,
+            eventsClientId: this.plugin.pluginId
+        };
+
+    }
+
+    onLoadingDone(plugin: Plugin) {
+        if (plugin.pluginId == this.plugin.pluginId) {
+            this.isLoading = false;
+        }
+    }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/plugins/plugins-module.ts b/catalog-ui/src/app/ng2/pages/plugins/plugins-module.ts
new file mode 100644
index 0000000000..763e329789
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/plugins/plugins-module.ts
@@ -0,0 +1,34 @@
+import {NgModule} from "@angular/core";
+import {PluginContextViewPageComponent} from "./plugin-context-view/plugin-context-view.page.component";
+import {PluginFrameModule} from "../../components/ui/plugin/plugin-frame.module";
+import {CommonModule} from "@angular/common";
+import {UiElementsModule} from "../../components/ui/ui-elements.module";
+import {PluginTabViewPageComponent} from "./plugin-tab-view/plugin-tab-view.page.component";
+import {LayoutModule} from "../../components/layout/layout.module";
+import {HttpModule} from "@angular/http";
+
+@NgModule({
+    declarations: [
+        PluginContextViewPageComponent,
+        PluginTabViewPageComponent
+    ],
+    imports: [
+        CommonModule,
+        PluginFrameModule,
+        UiElementsModule,
+        LayoutModule,
+        HttpModule
+    ],
+    exports: [
+        PluginContextViewPageComponent,
+        PluginTabViewPageComponent
+    ],
+    entryComponents: [
+        PluginContextViewPageComponent,
+        PluginTabViewPageComponent
+    ]
+})
+export class PluginsModule {
+
+}
+