Generic Artifact Browser SDC UI

Introduce Generic Artifact Browser SDC UI in VF -> Deployment Artifacts
view.

Change-Id: I312c6c9d77f42ad2d073a8ad21c983ede39dfd0b
Issue-ID: SDC-2211
Signed-off-by: Piotr Darosz <piotr.darosz@nokia.com>

17 files changed, 424 insertions, 18 deletions

diff --git a/catalog-ui/src/app/models/app-config.ts b/catalog-ui/src/app/models/app-config.ts
index 0e6284c669..4754cbaa01 100644
--- a/catalog-ui/src/app/models/app-config.ts
+++ b/catalog-ui/src/app/models/app-config.ts
@@ -3,6 +3,7 @@
  * SDC
  * ================================================================================
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * Modifications Copyright (C) 2019 Nokia. 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.
@@ -84,6 +85,7 @@ export interface IApi {
     GET_requirements_capabilities:string;
     GET_onboarding:string;
     GET_component_from_csar_uuid:string;
+    POST_GAB_Search:string;
     kibana:string;
     services_api_root:string;
 }
diff --git a/catalog-ui/src/app/models/artifacts.ts b/catalog-ui/src/app/models/artifacts.ts
index 959480b0f0..27c0dd6c49 100644
--- a/catalog-ui/src/app/models/artifacts.ts
+++ b/catalog-ui/src/app/models/artifacts.ts
@@ -3,6 +3,7 @@
  * SDC
  * ================================================================================
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * Modifications Copyright (C) 2019 Nokia. 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.
@@ -111,6 +112,10 @@ export class ArtifactModel {
         return _.has(ArtifactType.THIRD_PARTY_RESERVED_TYPES, this.artifactType);
     };
 
+    public isGenericBrowseable = ():boolean => {
+        return this.artifactType == ArtifactType.VES_EVENTS;
+    };
+
     public toJSON = ():any => {
         this.selected = undefined;
         this.originalDescription = undefined;
diff --git a/catalog-ui/src/app/models/paths-and-names.ts b/catalog-ui/src/app/models/paths-and-names.ts
new file mode 100644
index 0000000000..afab4d02f8
--- /dev/null
+++ b/catalog-ui/src/app/models/paths-and-names.ts
@@ -0,0 +1,23 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2019 Nokia. 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.
+ * ============LICENSE_END=========================================================
+ */
+
+export class PathsAndNamesDefinition {
+  constructor(public path: string, public friendlyName: string) {}
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/modules/directive-module.ts b/catalog-ui/src/app/modules/directive-module.ts
index 96bee45c59..7e664437a0 100644
--- a/catalog-ui/src/app/modules/directive-module.ts
+++ b/catalog-ui/src/app/modules/directive-module.ts
@@ -3,6 +3,7 @@
  * SDC
  * ================================================================================
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * Modifications Copyright (C) 2019 Nokia. 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.
@@ -189,6 +190,7 @@ import { MultilineEllipsisComponent } from "../ng2/shared/multiline-ellipsis/mul
 import { InterfaceOperationComponent } from '../ng2/pages/interface-operation/interface-operation.page.component';
 import { PluginFrameComponent } from "../ng2/components/ui/plugin/plugin-frame.component";
 import { TileComponent } from "../ng2/components/ui/tile/tile.component";
+import {GenericArtifactBrowserComponent} from "../ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component";
 
 
 directiveModule.directive('menuListNg2', downgradeComponent({
@@ -202,6 +204,12 @@ directiveModule.directive('topNav', downgradeComponent({
     outputs: ['searchTermChange']
 }) as ng.IDirectiveFactory);
 
+directiveModule.directive('gab', downgradeComponent({
+    component: GenericArtifactBrowserComponent,
+    inputs: ['pathsandnames', 'artifactid', 'resourceid'],
+    outputs: []
+}) as ng.IDirectiveFactory);
+
 directiveModule.directive('ng2ZoneContainer', downgradeComponent({
     component: ZoneContainerComponent,
         inputs: ['title', 'count', 'type', 'visible', 'minimized'],
diff --git a/catalog-ui/src/app/modules/service-module.ts b/catalog-ui/src/app/modules/service-module.ts
index 376a036540..7240682ae9 100644
--- a/catalog-ui/src/app/modules/service-module.ts
+++ b/catalog-ui/src/app/modules/service-module.ts
@@ -60,6 +60,7 @@ import {EventBusService} from "../ng2/services/event-bus.service";
 import {DynamicComponentService} from "app/ng2/services/dynamic-component.service";
 import {AutomatedUpgradeService} from "../ng2/pages/automated-upgrade/automated-upgrade.service";
 import {ArchiveService as ArchiveServiceNg2} from "app/ng2/services/archive.service";
+import {GabService as GabServiceNg2} from "app/ng2/services/gab.service";
 import {ComponentFactory} from "app/utils/component-factory";
 import {ToscaTypesServiceNg2} from "app/ng2/services/tosca-types.service";
 
@@ -115,5 +116,6 @@ serviceModule.factory('PluginsService', downgradeInjectable(PluginsService));
 serviceModule.factory('EventBusService', downgradeInjectable(EventBusService));
 serviceModule.factory('DynamicComponentService', downgradeInjectable(DynamicComponentService));
 serviceModule.factory('ArchiveServiceNg2', downgradeInjectable(ArchiveServiceNg2));
+serviceModule.factory('GabServiceNg2', downgradeInjectable(GabServiceNg2));
 serviceModule.factory('AutomatedUpgradeService', downgradeInjectable(AutomatedUpgradeService));
 serviceModule.factory('ToscaTypesServiceNg2', downgradeInjectable(ToscaTypesServiceNg2));
diff --git a/catalog-ui/src/app/modules/view-model-module.ts b/catalog-ui/src/app/modules/view-model-module.ts
index 8c8f239c4e..ce7d079329 100644
--- a/catalog-ui/src/app/modules/view-model-module.ts
+++ b/catalog-ui/src/app/modules/view-model-module.ts
@@ -3,6 +3,7 @@
  * SDC
  * ================================================================================
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * Modifications Copyright (C) 2019 Nokia. 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.
diff --git a/catalog-ui/src/app/ng2/app.module.ts b/catalog-ui/src/app/ng2/app.module.ts
index 22c6624348..cd488d9cd1 100644
--- a/catalog-ui/src/app/ng2/app.module.ts
+++ b/catalog-ui/src/app/ng2/app.module.ts
@@ -3,6 +3,7 @@
  * SDC
  * ================================================================================
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * Modifications Copyright (C) 2019 Nokia. 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.
@@ -78,6 +79,8 @@ import {AutomatedUpgradeService} from "./pages/automated-upgrade/automated-upgra
 import {AutomatedUpgradeModule} from "./pages/automated-upgrade/automated-upgrade.module";
 import {RequirementsEditorModule} from "./pages/req-and-capabilities-editor/requirements-editor/requirements-editor.module"
 import {CapabilitiesEditorModule} from "./pages/req-and-capabilities-editor/capabilities-editor/capabilities-editor.module"
+import {GenericArtifactBrowserModule} from "./components/logic/generic-artifact-browser/generic-artifact-browser.module";
+import {GabService} from "./services/gab.service";
 
 export const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule));
 
@@ -123,7 +126,8 @@ export function configServiceFactory(config: ConfigService) {
         ServiceDependenciesModule,
         ServiceDependenciesEditorModule,
         RequirementsEditorModule,
-        CapabilitiesEditorModule
+        CapabilitiesEditorModule,
+        GenericArtifactBrowserModule
     ],
     exports: [],
     entryComponents: [
@@ -163,6 +167,7 @@ export function configServiceFactory(config: ConfigService) {
         ComponentInstanceServiceNg2,
         TranslationServiceConfig,
         PluginsService,
+        GabService,
         ArchiveService,
         EventBusService,
         {
diff --git a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.html b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.html
new file mode 100644
index 0000000000..a94f0cafa0
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.html
@@ -0,0 +1,36 @@
+<!--
+  ~ Copyright (C) 2019 Nokia. 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>
+    <ngx-datatable
+        class="material"
+        *ngIf="ready"
+        [rows]="rows"
+        [columns]="columns"
+        [columnMode]="'force'"
+        [headerHeight]="50"
+        [scrollbarV]="true"
+        [scrollbarH]="true"
+        [footerHeight]="0"
+        [loadingIndicator]="isLoading"
+        [rowHeight]="200"
+        [reorderable]="false"
+        [selected]="selectedRows"
+        [selectionType]="'cell'"
+        >
+        Loading...
+    </ngx-datatable>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.less b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.less
new file mode 100644
index 0000000000..288cfd9619
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.less
@@ -0,0 +1,62 @@
+@import '../../../../../assets/styles/mixins';
+
+.ngx-datatable.material {
+  .datatable-body {
+    .datatable-body-row {
+      .datatable-body-cell {
+        background-clip: padding-box;
+        background-color: rgb(233, 236, 239);
+        flex-direction: column;
+        font-family: monospace;
+        font-size: 16px;
+        font-stretch: 100%;
+        font-weight: 400;
+        line-height:5px;
+        margin-right: 6px;
+        overflow: auto !important;
+        padding: 3px;
+        border-bottom: 6px solid white;
+
+        .selectable();
+
+        span {
+          display: inline-block;
+          line-height: 15pt;
+          .break-all-words();
+        }
+      }
+    }
+  }
+}
+
+.datatable-row-group {
+  padding-bottom: 6px;
+  padding-top: 6px;
+}
+
+.datatable-body-cell-label {
+  :focus {
+    border-color: white;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+  }
+  :hover {
+    cursor: default;
+  }
+}
+
+.datatable-header span.datatable-header-cell-label {
+  .break-all-words();
+}
+
+.datatable-header-cell {
+  color: rgb(51, 51, 51);
+  font-weight: bold;
+  font-size: 14px;
+  text-align: center;
+}
+
+.break-all-words {
+  word-break: break-all;
+  white-space: normal;
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.ts b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.ts
new file mode 100644
index 0000000000..c87fb51162
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.ts
@@ -0,0 +1,125 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2019 Nokia. 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.
+ * ============LICENSE_END=========================================================
+ */
+
+import {Component, Input, ViewEncapsulation} from "@angular/core";
+import {GabService, IServerResponse} from "../../../services/gab.service";
+import {PathsAndNamesDefinition} from "../../../../models/paths-and-names";
+
+const COLUMN_PREFIX: string = 'col';
+
+@Component({
+    selector: 'gab',
+    templateUrl: './generic-artifact-browser.component.html',
+    styleUrls:['./generic-artifact-browser.component.less'],
+    encapsulation: ViewEncapsulation.None
+})
+export class GenericArtifactBrowserComponent {
+    @Input()
+    pathsandnames: PathsAndNamesDefinition[];
+    @Input()
+    artifactid: string;
+    @Input()
+    resourceid: string;
+
+    columns: ColumnDefinition[];
+    rows: any[];
+    selectedRows: any[];
+    isLoading: boolean;
+    ready: boolean;
+
+    constructor(private gabService: GabService) {
+    }
+
+    ngOnInit() {
+        this.ready = false;
+        this.isLoading = true;
+        this.columns = [];
+        let paths: string[] = this.pathsandnames.map(item => item.path);
+        this.gabService.getArtifact(this.artifactid, this.resourceid, paths)
+        .subscribe(
+            response => {
+            let typedServerResponse:IServerResponse = <IServerResponse>response.json();
+            this.normalizeDataForNgxDatatable(typedServerResponse.data);
+            },
+            err => console.log(err),
+            () => {
+                this.ready = true;
+                this.isLoading = false;
+            }
+        );
+    }
+
+    private normalizeDataForNgxDatatable(data: [{ [key: string]: string }]) {
+        let result: NormalizationResult = this.getNormalizationResult(data, this.pathsandnames);
+        this.rows = result.rows;
+        this.columns = result.columns;
+    }
+
+    private getNormalizationResult(data: [{ [key: string]: string }],
+                                   pathsAndNames: PathsAndNamesDefinition[]): NormalizationResult {
+        //Prepare column names and column data property names
+        let mappingsPathToProp = new Map<string,string>();
+        let columnsDefinitions = this.normalizeColumns(pathsAndNames, mappingsPathToProp);
+
+        //Convert rows from { "string": "string" } to { prop : "string" } format
+        //This is required by NgxDatatable component
+        let arrayOfRows = this.normalizeRows(data, mappingsPathToProp);
+
+        return new NormalizationResult(arrayOfRows, columnsDefinitions);
+    }
+
+    private normalizeColumns(pathsAndNames: PathsAndNamesDefinition[], mappingsPathToProp: Map<string,string>) {
+        let columnsDefinitions: ColumnDefinition[] = [];
+        let index: number = 1;
+
+        pathsAndNames.forEach(function (col) {
+            let columnDataPropertyName: string = COLUMN_PREFIX + index;
+            mappingsPathToProp.set(col.path, columnDataPropertyName);
+            let cell: ColumnDefinition = new ColumnDefinition(col.friendlyName, columnDataPropertyName);
+            columnsDefinitions.push(cell);
+            index += 1;
+        });
+        return columnsDefinitions;
+    }
+
+    private normalizeRows(data: [{ [key: string]: string }], mappingsPathToProp: Map<string,string>) {
+        let arrayOfRows = [];
+        data.forEach(function (col) {
+            let row = {};
+            for (let key in col) {
+                if (col.hasOwnProperty(key)) {
+                    let columnNameAsProp = mappingsPathToProp.get(key);
+                    row[columnNameAsProp] = col[key];
+                }
+            }
+            arrayOfRows.push(row);
+        });
+        return arrayOfRows;
+    }
+}
+
+class NormalizationResult {
+    constructor(public rows: any[], public columns: ColumnDefinition[]) {}
+}
+
+export class ColumnDefinition {
+    constructor(public name: string, public prop: string) {}
+}
+
diff --git a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.module.ts b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.module.ts
new file mode 100644
index 0000000000..afb20472f1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.module.ts
@@ -0,0 +1,41 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2019 Nokia. 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.
+ * ============LICENSE_END=========================================================
+ */
+import {NgModule} from "@angular/core";
+import {GenericArtifactBrowserComponent} from "./generic-artifact-browser.component";
+import {NgxDatatableModule} from "@swimlane/ngx-datatable";
+import {GabService} from "../../../services/gab.service";
+import {BrowserModule} from "@angular/platform-browser";
+
+@NgModule({
+    declarations: [
+        GenericArtifactBrowserComponent
+    ],
+    imports: [
+        BrowserModule,
+        NgxDatatableModule
+    ],
+    entryComponents: [ //need to add anything that will be dynamically created
+        GenericArtifactBrowserComponent
+    ],
+    exports: [],
+    providers: [GabService]
+})
+export class GenericArtifactBrowserModule {
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/services/gab.service.ts b/catalog-ui/src/app/ng2/services/gab.service.ts
new file mode 100644
index 0000000000..d903d20ade
--- /dev/null
+++ b/catalog-ui/src/app/ng2/services/gab.service.ts
@@ -0,0 +1,59 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2019 Nokia. 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.
+ * ============LICENSE_END=========================================================
+ */
+
+import {Injectable, Inject} from "@angular/core";
+import {Response} from '@angular/http';
+import {HttpService} from "./http.service";
+import {SdcConfigToken, ISdcConfig} from "../config/sdc-config.config";
+import {Observable} from "rxjs";
+
+export interface IServerResponse {
+  data: [{ [key: string]: string }];
+}
+
+export class GabRequest {
+  constructor(public fields: string[],
+              public parentId: string,
+              public artifactUniqueId: string) {
+
+  }
+}
+
+@Injectable()
+export class GabService {
+  baseUrl: string;
+  gabUrl: string;
+
+  constructor(@Inject(SdcConfigToken) sdcConfig: ISdcConfig, private http: HttpService) {
+    this.baseUrl = sdcConfig.api.root;
+    this.gabUrl = sdcConfig.api.POST_GAB_Search;
+  }
+
+  public getArtifact(artifactUniqueId: string, resourceId: string, columns: string[]): Observable<Response> {
+    let finalUrl: string = this.baseUrl + this.gabUrl;
+    let request: GabRequest = {
+      fields: columns,
+      parentId: resourceId,
+      artifactUniqueId: artifactUniqueId
+    };
+
+    return this.http.post(finalUrl, request);
+  }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/utils/constants.ts b/catalog-ui/src/app/utils/constants.ts
index d96bf6f616..9d3bf104ee 100644
--- a/catalog-ui/src/app/utils/constants.ts
+++ b/catalog-ui/src/app/utils/constants.ts
@@ -3,6 +3,7 @@
  * SDC
  * ================================================================================
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * Modifications Copyright (C) 2019 Nokia. 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.
@@ -92,6 +93,7 @@ export class ArtifactType {
         AAI_VF_INSTANCE_MODEL: "AAI_VF_INSTANCE_MODEL"
     };
     static TOSCA = {TOSCA_TEMPLATE: "TOSCA_TEMPLATE", TOSCA_CSAR: "TOSCA_CSAR"};
+    static VES_EVENTS = "VES_EVENTS";
 }
 
 export class SEVERITY {
diff --git a/catalog-ui/src/app/utils/modals-handler.ts b/catalog-ui/src/app/utils/modals-handler.ts
index 001d35d386..903175f199 100644
--- a/catalog-ui/src/app/utils/modals-handler.ts
+++ b/catalog-ui/src/app/utils/modals-handler.ts
@@ -249,7 +249,6 @@ export class ModalsHandler implements IModalsHandler {
 
     openArtifactModal = (artifact:ArtifactModel, component:Component):ng.IPromise<any> => {
         let deferred = this.$q.defer();
-
         let modalOptions:ng.ui.bootstrap.IModalSettings = {
             templateUrl: '../view-models/forms/artifact-form/artifact-form-view.html',
             controller: 'Sdc.ViewModels.ArtifactResourceFormViewModel',
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view-model.ts
index c652da4eab..73273e04d5 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view-model.ts
@@ -3,6 +3,7 @@
  * SDC
  * ================================================================================
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * Modifications Copyright (C) 2019 Nokia. 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.
@@ -26,6 +27,10 @@ import {ArtifactModel, ArtifactGroupModel, Resource} from "app/models";
 import {ArtifactsUtils, ModalsHandler, ValidationUtils} from "app/utils";
 import {ComponentServiceNg2} from "app/ng2/services/component-services/component.service";
 import {ComponentGenericResponse} from "../../../../ng2/services/responses/component-generic-response";
+import {GenericArtifactBrowserComponent} from "../../../../ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component";
+import {PathsAndNamesDefinition} from "../../../../models/paths-and-names";
+import {ModalService as ModalServiceSdcUI} from "sdc-ui/lib/angular/modals/modal.service";
+import {IModalConfig} from "sdc-ui/lib/angular/modals/models/modal-config";
 
 interface IDeploymentArtifactsViewModelScope extends IWorkspaceViewModelScope {
     tableHeadersList:Array<any>;
@@ -64,7 +69,8 @@ export class DeploymentArtifactsViewModel {
         'ValidationUtils',
         'ArtifactsUtils',
         'ModalsHandler',
-        'ComponentServiceNg2'
+        'ComponentServiceNg2',
+        'ModalServiceSdcUI'
     ];
 
     constructor(private $scope:IDeploymentArtifactsViewModelScope,
@@ -73,7 +79,8 @@ export class DeploymentArtifactsViewModel {
                 private validationUtils:ValidationUtils,
                 private artifactsUtils:ArtifactsUtils,
                 private ModalsHandler:ModalsHandler,
-                private ComponentServiceNg2: ComponentServiceNg2) {
+                private ComponentServiceNg2: ComponentServiceNg2,
+                private ModalServiceSdcUI: ModalServiceSdcUI) {
         this.initScope();
     }
 
@@ -270,6 +277,35 @@ export class DeploymentArtifactsViewModel {
             }
         };
 
+        this.$scope.openGenericArtifactBrowserModal = (artifact:ArtifactModel):void => {
+            let modalConfig: IModalConfig = {
+                size: 'xl',
+                title: 'Generic Artifact Browser',
+                type: 'custom',
+                buttons: [{
+                        id: 'okButton',
+                        text: 'OK',
+                        size: "'x-small'",
+                        closeModal: true
+                    },
+                    {text: "Cancel", size: "'x-small'", closeModal: true}]
+            };
+
+            let pathsandnames: PathsAndNamesDefinition[] = [
+                {friendlyName: 'Action', path: 'event.action[2]'},
+                {friendlyName: 'Comment', path: 'event.comment'},
+                {friendlyName: 'Alarm Additional Information',
+                    path: 'event.structure.faultFields.structure.alarmAdditionalInformation.comment'}];
+
+            let modalInputs = {
+                pathsandnames: pathsandnames,
+                artifactid: artifact.esId,
+                resourceid: this.$scope.component.uniqueId
+            };
+
+            this.ModalServiceSdcUI.openCustomModal(modalConfig, GenericArtifactBrowserComponent, modalInputs);
+        };
+
         this.$scope.openEditEnvParametersModal = (artifact:ArtifactModel):void => {
             this.ModalsHandler.openEditEnvParametersModal(artifact, this.$scope.component).then(()=> {
                 this.initArtifacts(true);
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view.html b/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view.html
index 279f5baa81..a26bcdeccd 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view.html
+++ b/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view.html
@@ -1,5 +1,6 @@
 <!--
   ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
+  ~ Modifications Copyright (C) 2019 Nokia. 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.
@@ -78,6 +79,10 @@
                                     data-ng-if="!isViewMode() && !artifact.isHEAT() && !artifact.isThirdParty() && !isLicenseArtifact(artifact)" data-ng-click="delete(artifact)"> </button>
                              <button class="table-download-btn" download-artifact  data-tests-id="download_{{artifact.artifactDisplayName}}"
                                      data-ng-if="artifact.artifactDisplayName" component="component" artifact="artifact"></button>
+                            <button ng-if="artifact.isGenericBrowseable()"
+                                    class="table-magnifier-btn"
+                                    data-ng-click="openGenericArtifactBrowserModal(artifact)" component="component" artifact="artifact"
+                                    data-tests-id="gab-{{artifact.artifactDisplayName}}"></button>
                             <button ng-if="!isViewMode() && artifact.isHEAT()"
                                     class="sprite e-sdc-small-icon-pad edit-paramtes-button"
                                     data-ng-click="openEditEnvParametersModal(artifact)" type="button"
diff --git a/catalog-ui/src/assets/styles/table-flex.less b/catalog-ui/src/assets/styles/table-flex.less
index 3ac014cc1b..19355ddd80 100644
--- a/catalog-ui/src/assets/styles/table-flex.less
+++ b/catalog-ui/src/assets/styles/table-flex.less
@@ -118,37 +118,32 @@
 
             line-height: 0px;
             text-align: center;
-            .table-delete-btn {
+
+            button {
                 background-color: transparent;
                 border: none;
                 .sprite;
-                .sprite.e-sdc-small-icon-delete;
                 opacity: 0.8;
+            }
+            .table-delete-btn {
+                .sprite.e-sdc-small-icon-delete;
 
             }
             .table-edit-btn {
-                background-color: transparent;
-                border: none;
-                .sprite;
                 .e-sdc-small-icon-pencil;
-                opacity: 0.8;
                 margin-right: 10px;
             }
             .table-save-btn {
-                background-color: transparent;
-                border: none;
-                .sprite;
                 .sprite.e-sdc-green-save;
             }
             .table-download-btn {
-                background-color: transparent;
-                border: none;
-                .hand;
                 margin-left: 10px;
-                opacity: 0.8;
-                .sprite;
                 .sprite.e-sdc-small-download;
             }
+            .table-magnifier-btn {
+                margin-left: 10px;
+                .sprite.magnification-glass;
+            }
         }
 
     }