Added the Yang GUI to GUI2

Change-Id: I843db3838668e21a77837faaf00d4d6834676d8d
diff --git a/apps/faultmanagement/fm-gui2-lib/lib/alarmtable/alarmtable.component.html b/apps/faultmanagement/fm-gui2-lib/lib/alarmtable/alarmtable.component.html
index da4ad92..5558252 100644
--- a/apps/faultmanagement/fm-gui2-lib/lib/alarmtable/alarmtable.component.html
+++ b/apps/faultmanagement/fm-gui2-lib/lib/alarmtable/alarmtable.component.html
@@ -24,19 +24,10 @@
                    iconId="refresh" iconSize="36"
                    toolTip="{{ autoRefreshTip }}"></onos-icon>
       </div>
-      <div class="separator"></div>
-      <!--div (click)="(!!selId) ? confirmAction(AlarmActionEnum.ACKNOWLEDGE) : ''">
-        <onos-icon classes="{{ ctrlBtnState.acknowledged?'active-rect play':'play' }}"
-                   iconId="play" iconSize="42" toolTip="{{ acknowledgeTip }}"></onos-icon>
-      </div>
-      <div (click)="(!!selId) ? confirmAction(AlarmActionEnum.CLEAR) : ''">
-        <onos-icon classes="{{ ctrlBtnState.cleared?'active-rect stop':'stop' }}"
-                   iconId="stop" iconSize="42" toolTip="{{ clearTip }}"></onos-icon>
-      </div-->
     </div>
   </div>
 
-  <div class="summary-list" class="summary-list" onosTableResize>
+  <div class="summary-list" onosTableResize>
     <div class="table-header">
       <table>
         <tr>
diff --git a/apps/faultmanagement/fm-gui2-lib/lib/fm-gui2-lib.module.ts b/apps/faultmanagement/fm-gui2-lib/lib/fm-gui2-lib.module.ts
index d94f108..0c4ddcd 100644
--- a/apps/faultmanagement/fm-gui2-lib/lib/fm-gui2-lib.module.ts
+++ b/apps/faultmanagement/fm-gui2-lib/lib/fm-gui2-lib.module.ts
@@ -27,7 +27,6 @@
   imports: [
     CommonModule,
     FormsModule,
-    RouterModule,
     RouterModule.forChild([{path: '', component: AlarmTableComponent}]),
     Gui2FwLibModule
   ],
diff --git a/apps/yang-gui/yang-gui2-lib/BUILD.bazel b/apps/yang-gui/yang-gui2-lib/BUILD.bazel
new file mode 100644
index 0000000..2ba3714
--- /dev/null
+++ b/apps/yang-gui/yang-gui2-lib/BUILD.bazel
@@ -0,0 +1,71 @@
+"""
+ Copyright 2020-present Open Networking Foundation
+
+ 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.
+"""
+
+package(default_visibility = ["//:__subpackages__"])
+
+load("@npm_angular_bazel//:index.bzl", "ng_module")
+load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+
+sass_binary(
+    name = "yangtable-styles",
+    src = ":lib/yangtable/yangtable.component.scss",
+)
+
+sass_binary(
+    name = "yangtable-theme",
+    src = ":lib/yangtable/yangtable.theme.scss",
+)
+
+sass_binary(
+    name = "yangdetails-styles",
+    src = ":lib/yangdetails/yangdetails.component.scss",
+)
+
+sass_binary(
+    name = "yangdetails-theme",
+    src = ":lib/yangdetails/yangdetails.theme.scss",
+)
+
+ng_module(
+    name = "yang-gui2-lib",
+    srcs = glob(
+        include = [
+            "**/*.ts",
+        ],
+        exclude = [
+            "**/*.spec.ts",
+        ],
+    ),
+    assets = [
+        ":yangtable-styles",
+        ":yangdetails-styles",
+        ":yangtable-theme",
+        ":yangdetails-theme",
+    ] + glob([
+        "**/*.html",
+    ]),
+    tsconfig = "//web/gui2:tsconfig.json",
+    deps = [
+        "//web/gui2-fw-lib",
+        "@npm//@angular/animations",
+        "@npm//@angular/core",
+        "@npm//@angular/forms",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@angular/router",
+        "@npm//@types",
+        "@npm//rxjs",
+    ],
+)
diff --git a/apps/yang-gui/yang-gui2-lib/lib/yang-gui2-lib.module.ts b/apps/yang-gui/yang-gui2-lib/lib/yang-gui2-lib.module.ts
new file mode 100644
index 0000000..2e670d4
--- /dev/null
+++ b/apps/yang-gui/yang-gui2-lib/lib/yang-gui2-lib.module.ts
@@ -0,0 +1,38 @@
+/*
+ * Copyright 2020-present Open Networking Foundation
+ *
+ * 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.
+ */
+
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
+import {RouterModule} from '@angular/router';
+import {
+    Gui2FwLibModule,
+} from 'gui2-fw-lib/public_api';
+import {YangTableComponent} from "./yangtable/yangtable.component";
+import {YangDetailsComponent} from "./yangdetails/yangdetails.component";
+
+@NgModule({
+    imports: [
+        CommonModule,
+        FormsModule,
+        RouterModule.forChild([{path: '', component: YangTableComponent}]),
+        Gui2FwLibModule
+    ],
+    declarations: [YangTableComponent, YangDetailsComponent],
+    exports: [YangTableComponent, YangDetailsComponent],
+})
+export class YangGui2LibModule {
+}
diff --git a/apps/yang-gui/yang-gui2-lib/lib/yangdetails/yangdetails.component.html b/apps/yang-gui/yang-gui2-lib/lib/yangdetails/yangdetails.component.html
new file mode 100644
index 0000000..020d95c
--- /dev/null
+++ b/apps/yang-gui/yang-gui2-lib/lib/yangdetails/yangdetails.component.html
@@ -0,0 +1,36 @@
+<!--
+~ Copyright 2018-present Open Networking Foundation
+~
+~ 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 id="yang-model-details-panel" class="floatpanel" [@yangDetailsState]="id!=='' && id!=undefined && !closed">
+    <div class="container">
+        <div class="top">
+            <div class="close-btn">
+                <onos-icon class="close-btn" classes="active-close" iconId="close" iconSize="20" (click)="close()"></onos-icon>
+            </div>
+            <onos-icon [iconSize]="40" [iconId]="'nav_yang'"></onos-icon>
+            <h2 class="clickable">Module {{detailsData.id}} ({{detailsData.revision}})</h2>
+            <hr>
+        </div>
+        <div class="bottom">
+            <h3>YANG Source</h3>
+            <div class="src-frame" style="height: 65vh">
+                <div class="module-source">
+                    <pre>{{detailsData.source?.join('\n')}}</pre>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/apps/yang-gui/yang-gui2-lib/lib/yangdetails/yangdetails.component.scss b/apps/yang-gui/yang-gui2-lib/lib/yangdetails/yangdetails.component.scss
new file mode 100644
index 0000000..a7834f2
--- /dev/null
+++ b/apps/yang-gui/yang-gui2-lib/lib/yangdetails/yangdetails.component.scss
@@ -0,0 +1,59 @@
+/*
+ * Copyright 2020-present Open Networking Foundation
+ *
+ * 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.
+ */
+
+
+#yang-model-details-panel.floatpanel {
+  z-index: 0;
+  right: -750px;
+  width: 744px;
+}
+
+#yang-model-details-panel .container {
+  padding: 8px 12px;
+}
+
+#yang-model-details-panel .close-btn {
+  position: absolute;
+  right: 12px;
+  top: 12px;
+  cursor: pointer;
+}
+
+#yang-model-details-panel .dev-icon {
+  display: inline-block;
+  padding: 0 6px 0 0;
+  vertical-align: middle;
+}
+
+#yang-model-details-panel h2 {
+  display: inline-block;
+  margin: 8px 0;
+  padding-left: 6px;
+  font-size: 16pt;
+  font-weight: lighter;
+}
+
+#yang-model-details-panel h3 {
+  display: inline-block;
+  margin: 8px 0;
+  padding-left: 6px;
+  font-size: 13pt;
+  font-weight: lighter;
+}
+
+#yang-model-details-panel .src-frame {
+  overflow: auto;
+}
diff --git a/apps/yang-gui/yang-gui2-lib/lib/yangdetails/yangdetails.component.spec.ts b/apps/yang-gui/yang-gui2-lib/lib/yangdetails/yangdetails.component.spec.ts
new file mode 100644
index 0000000..38ecc26
--- /dev/null
+++ b/apps/yang-gui/yang-gui2-lib/lib/yangdetails/yangdetails.component.spec.ts
@@ -0,0 +1,41 @@
+/*
+ * Copyright 2020-present Open Networking Foundation
+ *
+ * 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.
+ */
+
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {YangDetailsComponent} from './yangdetails.component';
+
+describe('YangDetailsComponent', () => {
+    let component: YangDetailsComponent;
+    let fixture: ComponentFixture<YangDetailsComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [YangDetailsComponent]
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(YangDetailsComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
diff --git a/apps/yang-gui/yang-gui2-lib/lib/yangdetails/yangdetails.component.ts b/apps/yang-gui/yang-gui2-lib/lib/yangdetails/yangdetails.component.ts
new file mode 100644
index 0000000..a7de139
--- /dev/null
+++ b/apps/yang-gui/yang-gui2-lib/lib/yangdetails/yangdetails.component.ts
@@ -0,0 +1,106 @@
+/*
+ * Copyright 2020-present Open Networking Foundation
+ *
+ * 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.
+ */
+
+import {
+    Component,
+    Input,
+    OnInit,
+    OnDestroy,
+    OnChanges,
+    SimpleChanges
+} from '@angular/core';
+import {trigger, state, style, animate, transition} from '@angular/animations';
+import {
+    FnService,
+    IconService,
+    LogService,
+    DetailsPanelBaseImpl,
+    WebSocketService,
+} from 'gui2-fw-lib/public_api';
+
+@Component({
+    selector: 'onos-yangdetails',
+    templateUrl: './yangdetails.component.html',
+    styleUrls: [
+        './yangdetails.component.scss', './yangdetails.theme.scss',
+        '../../../../../web/gui2-fw-lib/lib/widget/panel.css',
+        '../../../../../web/gui2-fw-lib/lib/widget/panel-theme.css'
+    ],
+    animations: [
+        trigger('yangDetailsState', [
+            state('true', style({
+                transform: 'translateX(-100%)',
+                opacity: '100'
+            })),
+            state('false', style({
+                transform: 'translateX(0%)',
+                opacity: '0'
+            })),
+            transition('0 => 1', animate('100ms ease-in')),
+            transition('1 => 0', animate('100ms ease-out'))
+        ])
+    ]
+})
+export class YangDetailsComponent extends DetailsPanelBaseImpl implements OnInit, OnDestroy, OnChanges {
+    @Input() id: string;
+    @Input() modelId: string;
+    @Input() revision: string;
+
+    constructor(
+        protected fs: FnService,
+        protected log: LogService,
+        protected is: IconService,
+        protected wss: WebSocketService
+    ) {
+        super(fs, log, wss, 'yangModel');
+    }
+
+    ngOnInit() {
+        this.init();
+        this.log.debug('Yang Table Details Component initialized:', this.id);
+    }
+
+    /**
+     * Stop listening to alarmTableDetailsResponse on WebSocket
+     */
+    ngOnDestroy() {
+        this.destroy();
+        this.log.debug('Yang Table Details Component destroyed');
+    }
+
+    /**
+     * Details Panel Data Request on row selection changes
+     * Should be called whenever id changes
+     * If id is empty, no request is made
+     */
+    ngOnChanges(changes: SimpleChanges) {
+        console.log('Change happened', changes);
+        if (changes['id']) {
+            if (this.id === '') {
+                this.modelId = '';
+                this.revision = '';
+                return '';
+            } else {
+                const query = {
+                    'id': this.id,
+                    'modelId': this.modelId,
+                    'revision': this.revision
+                };
+                this.requestDetailsPanelData(query);
+            }
+        }
+    }
+}
diff --git a/apps/yang-gui/yang-gui2-lib/lib/yangdetails/yangdetails.theme.scss b/apps/yang-gui/yang-gui2-lib/lib/yangdetails/yangdetails.theme.scss
new file mode 100644
index 0000000..39a342d
--- /dev/null
+++ b/apps/yang-gui/yang-gui2-lib/lib/yangdetails/yangdetails.theme.scss
@@ -0,0 +1,19 @@
+/*
+ * Copyright 2020-present Open Networking Foundation
+ *
+ * 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.
+ */
+
+#yang-model-details-panel .src-frame {
+  background-color: #f4f4f4;
+}
diff --git a/apps/yang-gui/yang-gui2-lib/lib/yangtable/yangtable.component.html b/apps/yang-gui/yang-gui2-lib/lib/yangtable/yangtable.component.html
new file mode 100644
index 0000000..6c76b39
--- /dev/null
+++ b/apps/yang-gui/yang-gui2-lib/lib/yangtable/yangtable.component.html
@@ -0,0 +1,74 @@
+<!--
+~ Copyright 2018-present Open Networking Foundation
+~
+~ 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.
+-->
+
+<!-- YANG Model partial HTML -->
+<div id="ov-yang-model">
+<!--     yangfiledrop on-file-drop="yangDropped()">-->
+    <onos-loading [theme]="'light'" [running]="loadingIconShown"></onos-loading>
+    <div class="tabular-header">
+        <h2>YANG Models ({{tableData.length}} total)</h2>
+        <div class="ctrl-btns">
+            <div class="refresh" (click)="toggleRefresh()">
+            <onos-icon [classes]="autoRefresh?'active refresh':'refresh'"
+                       [iconId]="'refresh'" [iconSize]="36"
+                       [toolTip]="autoRefreshTip"></onos-icon>
+            </div>
+            <div class="separator"></div>
+
+<!--            <form id="inputYangFileForm">-->
+<!--                <input id="uploadYangFile"-->
+<!--                       type="file" size="50" accept=".zip, *.jar, *.yang"-->
+<!--                       yang-file-model="yangFile">-->
+<!--            </form>-->
+            <div class="active"  (click)="triggerForm()">
+                <onos-icon classes="{{ 'active-rect upload' }}" [iconSize]="36"
+                           [iconId]="'nav_yang'" [toolTip]="'Upload a YANG file (.yang)'"></onos-icon>
+            </div>
+        </div>
+    </div>
+
+    <div class="summary-list" onosTableResize>
+        <div class="table-header">
+            <table>
+                <tr>
+                    <td colId="modelId">Model ID</td>
+                    <td colId="id">Module</td>
+                    <td colId="revision">Revision</td>
+                </tr>
+            </table>
+        </div>
+
+        <div class="table-body">
+            <table>
+                <tr class="table-body" *ngIf="tableData.length === 0" class="no-data">
+                    <td colspan="9">{{ annots.noRowsMsg }}</td>
+                </tr>
+                <tr *ngFor="let ymodel of tableData | filter: tableDataFilter"
+                    (click)="selectCallback($event, ymodel)"
+                    [ngClass]="{selected: ymodel.id === selId, 'data-change': isChanged(ymodel.id)}">
+                    <td>{{ymodel.modelId}}</td>
+                    <td>{{ymodel.id}}</td>
+                    <td>{{ymodel.revision}}</td>
+                </tr>
+            </table>
+        </div>
+    </div>
+
+    <onos-yangdetails class="floatpanels" [id]="selId" [modelId]="selectedModel?.modelId" [revision]="selectedModel?.revision"
+                      (closeEvent)="deselectRow($event)"></onos-yangdetails>
+
+</div>
+
diff --git a/apps/yang-gui/yang-gui2-lib/lib/yangtable/yangtable.component.scss b/apps/yang-gui/yang-gui2-lib/lib/yangtable/yangtable.component.scss
new file mode 100644
index 0000000..2ffb5a1
--- /dev/null
+++ b/apps/yang-gui/yang-gui2-lib/lib/yangtable/yangtable.component.scss
@@ -0,0 +1,29 @@
+/*
+ * Copyright 2020-present Open Networking Foundation
+ *
+ * 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.
+ */
+
+#ov-yang-model h2 {
+  display: inline-block;
+}
+
+#ov-yang-model div.ctrl-btns {
+  width: 250px;
+}
+
+/* -- Drag-n-Drop file upload -- */
+#ov-yang-model form#inputYangFileForm,
+#ov-yang-model input#uploadYangFile {
+  display: none;
+}
diff --git a/apps/yang-gui/yang-gui2-lib/lib/yangtable/yangtable.component.spec.ts b/apps/yang-gui/yang-gui2-lib/lib/yangtable/yangtable.component.spec.ts
new file mode 100644
index 0000000..32e4adb
--- /dev/null
+++ b/apps/yang-gui/yang-gui2-lib/lib/yangtable/yangtable.component.spec.ts
@@ -0,0 +1,41 @@
+/*
+ * Copyright 2020-present Open Networking Foundation
+ *
+ * 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.
+ */
+
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {YangTableComponent} from './yangtable.component';
+
+describe('YangTableComponent', () => {
+    let component: YangTableComponent;
+    let fixture: ComponentFixture<YangTableComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [YangTableComponent]
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(YangTableComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
diff --git a/apps/yang-gui/yang-gui2-lib/lib/yangtable/yangtable.component.ts b/apps/yang-gui/yang-gui2-lib/lib/yangtable/yangtable.component.ts
new file mode 100644
index 0000000..31a84f5
--- /dev/null
+++ b/apps/yang-gui/yang-gui2-lib/lib/yangtable/yangtable.component.ts
@@ -0,0 +1,85 @@
+/*
+ * Copyright 2020-present Open Networking Foundation
+ *
+ * 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.
+ */
+
+import {Component, OnInit, OnDestroy} from '@angular/core';
+import {WebSocketService, LogService, FnService, SortDir, TableBaseImpl, TableResponse} from 'gui2-fw-lib/public_api';
+
+/**
+ * Model of the response from the WebSocket
+ */
+export interface YangModel {
+    id: string;
+    revision: string;
+    modelId: string;
+}
+
+export interface YangModelDataResponse {
+    yangModels: YangModel[];
+}
+
+@Component({
+    selector: 'onos-yangtable',
+    templateUrl: './yangtable.component.html',
+    styleUrls: [
+        './yangtable.component.scss', 'yangtable.theme.scss',
+        '../../../../../web/gui2-fw-lib/lib/widget/table.css', '../../../../../web/gui2-fw-lib/lib/widget/table.theme.css'
+    ]
+})
+export class YangTableComponent extends TableBaseImpl implements OnInit, OnDestroy {
+    selectedModel: YangModel = undefined;
+
+    constructor(
+        protected log: LogService,
+        protected fs: FnService,
+        protected wss: WebSocketService,
+    ) {
+        super(fs, log, wss, 'yangModel');
+        this.log.debug('YangTableComponent constructed');
+        this.parentSelCb =  this.rowSelectionParent;
+
+        this.sortParams = {
+            firstCol: 'id',
+            firstDir: SortDir.desc,
+            secondCol: 'revision',
+            secondDir: SortDir.asc,
+        };
+    }
+
+    ngOnInit() {
+        this.init();
+        this.log.debug('YangTableComponent initialized');
+    }
+
+    ngOnDestroy() {
+        this.destroy();
+        this.log.debug('YangTableComponent destroyed');
+    }
+
+    /**
+     * When the upload button is clicked pass this on to the file input (hidden)
+     */
+    triggerForm() {
+        document.getElementById('uploadFile')
+            .dispatchEvent(new MouseEvent('click'));
+    }
+
+    /**
+     * called when a row is selected - sets the state of control icons
+     */
+    rowSelectionParent(event: any, selRow: any) {
+        this.selectedModel = selRow;
+    }
+}
diff --git a/apps/yang-gui/yang-gui2-lib/lib/yangtable/yangtable.theme.scss b/apps/yang-gui/yang-gui2-lib/lib/yangtable/yangtable.theme.scss
new file mode 100644
index 0000000..0394a14
--- /dev/null
+++ b/apps/yang-gui/yang-gui2-lib/lib/yangtable/yangtable.theme.scss
@@ -0,0 +1,20 @@
+/*
+ * Copyright 2020-present Open Networking Foundation
+ *
+ * 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.
+ */
+
+/* -- Drag-n-Drop YANG/ZIP files -- */
+div.dropping {
+  border: solid 3px #0095d6;
+}
diff --git a/apps/yang-gui/yang-gui2-lib/public_api.ts b/apps/yang-gui/yang-gui2-lib/public_api.ts
new file mode 100644
index 0000000..0238889
--- /dev/null
+++ b/apps/yang-gui/yang-gui2-lib/public_api.ts
@@ -0,0 +1,23 @@
+/*
+ * Copyright 2020-present Open Networking Foundation
+ *
+ * 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.
+ */
+
+/*
+ * Public API Surface of fm-gui2-lib
+ */
+
+export * from './lib/yang-gui2-lib.module';
+export * from './lib/yangtable/yangtable.component';
+export * from './lib/yangdetails/yangdetails.component';
diff --git a/apps/yang-gui/yang-gui2-lib/test.ts b/apps/yang-gui/yang-gui2-lib/test.ts
new file mode 100644
index 0000000..a951bdf
--- /dev/null
+++ b/apps/yang-gui/yang-gui2-lib/test.ts
@@ -0,0 +1,37 @@
+/*
+ * Copyright 2020-present Open Networking Foundation
+ *
+ * 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.
+ */
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'core-js/es7/reflect';
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
diff --git a/web/gui2/src/main/webapp/app/BUILD.bazel b/web/gui2/src/main/webapp/app/BUILD.bazel
index 26bd005..abd59ec 100644
--- a/web/gui2/src/main/webapp/app/BUILD.bazel
+++ b/web/gui2/src/main/webapp/app/BUILD.bazel
@@ -64,6 +64,7 @@
         "//web/gui2-topo-lib:gui2-topo-lib",
         "//apps/faultmanagement/fm-gui2-lib:fm-gui2-lib",
         "//apps/roadm/web/roadm-gui:roadm-gui",
+        "//apps/yang-gui/yang-gui2-lib:yang-gui2-lib",
         "@npm//@angular/core",
         "@npm//@angular/router",
         "@npm//@angular/platform-browser",
diff --git a/web/gui2/src/main/webapp/app/onos-routing.module.ts b/web/gui2/src/main/webapp/app/onos-routing.module.ts
index 85a9586..3ea2cba 100644
--- a/web/gui2/src/main/webapp/app/onos-routing.module.ts
+++ b/web/gui2/src/main/webapp/app/onos-routing.module.ts
@@ -112,6 +112,11 @@
         loadChildren: () => import('../../../../../../apps/roadm/web/roadm-gui/lib/roadm-gui-lib.module').then(m => m.RoadmGuiLibModule)
     },
     <Route>{
+        path: 'yangModel',
+        pathMatch: 'full',
+        loadChildren: () => import('../../../../../../apps/yang-gui/yang-gui2-lib/lib/yang-gui2-lib.module').then(m => m.YangGui2LibModule)
+    },
+    <Route>{
         path: '',
         redirectTo: 'topo2', // Default to Topology view
         pathMatch: 'full'