Added the Yang GUI to GUI2
Change-Id: I843db3838668e21a77837faaf00d4d6834676d8d
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;
+}