Skip to content

Commit f9bf6c8

Browse files
rkrejcirkrejci
committed
frontend FEATURE YANG Explorer history
allow going back in history of schema views
1 parent 6b5b8c7 commit f9bf6c8

File tree

8 files changed

+73
-39
lines changed

8 files changed

+73
-39
lines changed

‎frontend/inventory/schema.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ export class Schema {
44
public name: string = '',
55
public revision: string = '',
66
public type: string = '',
7+
public path: string = '',
78
public data: any = null,
89
public sections: string[] = []
910
) {}

‎frontend/yang/schemas.service.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { Schema } from '../inventory/schema';
1111
export class SchemasService {
1212
public schemas: Schema[];
1313
public activeSchema: string;
14+
public history;
1415

1516
constructor( private http: HttpClient ) {
1617
this.loadSchemas();
@@ -35,10 +36,13 @@ export class SchemasService {
3536
} else {
3637
localStorage.removeItem('schemas');
3738
}
39+
40+
localStorage.setItem('YEHistory', JSON.stringify(this.history));
3841
}
3942

4043
loadSchemas(): void {
4144
this.schemas = JSON.parse(localStorage.getItem('schemas'));
45+
this.history = JSON.parse(localStorage.getItem('YEHistory'));
4246
}
4347
/*
4448
getSchemaKey(schema: Schema) {
@@ -98,14 +102,14 @@ export class SchemasService {
98102
}
99103
this.http.get<object>('/netopeer/inventory/schema', {params: params})
100104
.subscribe((result: object) => {
101-
console.log(result)
102105
if (result['success']) {
103106
schema.name = result['name'];
104107
if ('revision' in result) {
105108
schema.revision = result['revision'];
106109
}
107110
schema.type = type;
108111
schema.data = result['data'];
112+
this.history.push({key, type, path});
109113
this.storeSchemas();
110114
}
111115
});

‎frontend/yang/yang.component.html‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<nav #subnav id="subnav">
22
<a *ngFor="let schema of schemasService.schemas" [class.active]="schema.key == schemasService.activeSchema"
3-
(click)="schemasService.changeActiveSchemaKey(schema.key);refreshActiveSchema()">{{schema.key}}
3+
(click)="changeView(schema.key)">{{schema.key}}
44
<img class="tab-icon tab-close tab-action-last" src="assets/netopeer/icons/close.svg" alt="x" title="close"
55
onmouseover="this.src='assets/netopeer/icons/close_active.svg'"
66
onmouseout="this.src='assets/netopeer/icons/close.svg'" (click)="schemasService.close(schema.key);refreshActiveSchema()"/>
@@ -13,14 +13,16 @@
1313
<div class="netopeer-content" [style.padding-top]="'calc(' + subnav.offsetHeight + 'px - -0.7em)'">
1414
<img *ngIf="!activeSchema" (click)="addSchema()" src="assets/netopeer/starthere.svg" alt="Start here with that + sign."/>
1515
<div *ngIf="activeSchema">
16-
<span>Switch to
17-
<ng-container [ngSwitch]="activeSchema.type">
18-
<a *ngSwitchCase="'text'" (click)="schemasService.show(activeSchema.key,null,'tree')">interactive</a>
19-
<ng-container *ngSwitchDefault><a (click)="schemasService.show(activeSchema.key,null,'text')">text</a>
20-
format<ng-container *ngIf="activeSchema.type!='tree'"> or show <a (click)="schemasService.show(activeSchema.key,null,'tree')">module root</a></ng-container>.
21-
</ng-container>
22-
</ng-container>
23-
</span>
16+
<img [style.visibility]="schemasService.history.length > 1 ? 'visible' : 'hidden'" (click)="back()"
17+
class="nav-button" src="assets/netopeer/icons/back.svg" alt="back" title="back"/>
18+
<ng-container [ngSwitch]="activeSchema.type">
19+
<img *ngSwitchCase="'text'" (click)="schemasService.show(activeSchema.key,null,'tree')"
20+
class="nav-button" src="assets/netopeer/icons/module.svg" alt="interactive" title="show YANG interactive view"/>
21+
<img *ngSwitchDefault (click)="schemasService.show(activeSchema.key,null,'text')"
22+
class="nav-button" src="assets/netopeer/icons/yangfile.svg" alt="text" title="show YANG text view"/>
23+
</ng-container>
24+
<img [style.visibility]="(activeSchema.type != 'tree' && activeSchema.type != 'text') ? 'visible' : 'hidden'" (click)="schemasService.show(activeSchema.key,null,'tree')"
25+
class="nav-button" src="assets/netopeer/icons/module.svg" alt="module" title="show module information"/>
2426
<hr/>
2527
<ng-container [ngSwitch]="activeSchema.type">
2628
<pre *ngSwitchCase="'text'">{{activeSchema.data}}</pre>

‎frontend/yang/yang.component.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,12 @@
33

44
$colorLineHover: #e1e1e1;
55

6+
.nav-button {
7+
height: 2em;
8+
cursor: pointer;
9+
margin: 0.3em;
10+
}
11+
612
.loading {
713
text-align: center;
814
margin: auto;

‎frontend/yang/yang.component.ts‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -105,12 +105,11 @@ export class YANGTypedef implements OnInit, OnChanges {
105105
}
106106

107107
ngOnChanges(changes: SimpleChanges) {
108-
console.log("change detected")
109108
this.ngOnInit();
110109
}
111110

112111
ngOnInit(): void {
113-
this.name = Object.keys(this.data)[0]
112+
this.name = Object.keys(this.schema.data)[0]
114113
}
115114
}
116115

@@ -194,6 +193,23 @@ export class YANGComponent {
194193
this.activeSchema = this.schemasService.getSchema(this.schemasService.activeSchema);
195194
}
196195

196+
back() {
197+
this.schemasService.history.pop(); /* the currently displayed element, forget it */
198+
let prev = this.schemasService.history.pop(); /* the previous one we want to display, it will be stored again by show() */
199+
this.schemasService.show(prev.key, null, prev.type, prev.path);
200+
this.schemasService.changeActiveSchemaKey(prev.key);
201+
this.refreshActiveSchema();
202+
}
203+
204+
changeView(key: string) {
205+
this.schemasService.changeActiveSchemaKey(key);
206+
this.refreshActiveSchema();
207+
let type = this.activeSchema.type;
208+
let path = this.activeSchema.path;
209+
this.schemasService.history.push({key, type, path});
210+
localStorage.setItem('YEHistory', JSON.stringify(this.schemasService.history));
211+
}
212+
197213
schemaData(schema: Schema) {
198214
return schema.data[Object.keys(schema.data)[0]]
199215
}

‎frontend/yang/yang.module.html‎

Lines changed: 30 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -10,35 +10,39 @@
1010
</div>
1111

1212
<!-- linkage-stmts -->
13-
<div class="yang-info-section" *ngIf="!section('imports')"><a class="yang-info-section-label" (click)="section('imports', true)">imports</a></div>
14-
<div class="yang-info-section" *ngIf="section('imports') && data['import']"><a class="yang-info-section-label" (click)="section('imports', false)">imports</a>
15-
<span class="yang-info-subsection" *ngFor="let key of getKeys(data['import'])">
16-
<span class="yang-info-subsection-label">
17-
<a (click)="link(data['import'][key]['resolves-to'].module+'.yang')">{{key}}</a>
13+
<ng-container *ngIf="data['import']">
14+
<div class="yang-info-section" *ngIf="!section('imports')"><a class="yang-info-section-label" (click)="section('imports', true)">imports</a></div>
15+
<div class="yang-info-section" *ngIf="section('imports') && data['import']"><a class="yang-info-section-label" (click)="section('imports', false)">imports</a>
16+
<span class="yang-info-subsection" *ngFor="let key of getKeys(data['import'])">
17+
<span class="yang-info-subsection-label">
18+
<a (click)="link(data['import'][key]['resolves-to'].module+'.yang')">{{key}}</a>
19+
</span>
20+
<div class="yang-info">
21+
<span class="yang-info-label">prefix</span><span class="yang-info-value">{{data['import'][key].prefix.value}}</span>
22+
</div>
23+
<div class="yang-info" *ngIf="data['import'][key].description">
24+
<span class="yang-info-label">description</span><pre class="yang-info-value">{{data['import'][key].description.text}}</pre>
25+
</div>
26+
<div class="yang-info" *ngIf="data['import'][key].reference">
27+
<span class="yang-info-label">reference</span><pre class="yang-info-value">{{data['import'][key].reference.text}}</pre>
28+
</div>
1829
</span>
19-
<div class="yang-info">
20-
<span class="yang-info-label">prefix</span><span class="yang-info-value">{{data['import'][key].prefix.value}}</span>
21-
</div>
22-
<div class="yang-info" *ngIf="data['import'][key].description">
23-
<span class="yang-info-label">description</span><pre class="yang-info-value">{{data['import'][key].description.text}}</pre>
24-
</div>
25-
<div class="yang-info" *ngIf="data['import'][key].reference">
26-
<span class="yang-info-label">reference</span><pre class="yang-info-value">{{data['import'][key].reference.text}}</pre>
27-
</div>
28-
</span>
29-
</div>
30-
<div class="yang-info-section" *ngIf="!section('includes')"><a class="yang-info-section-label" (click)="section('includes', true)">includes</a></div>
31-
<div class="yang-info-section" *ngIf="section('includes') && data['include']"><a class="yang-info-section-label" (click)="section('includes', false)">includes</a>
32-
<div class="yang-info-subsection" *ngFor="let key of getKeys(data['include'])">
33-
<span class="yang-info-subsection-label">{{key}}</span>
34-
<div class="yang-info" *ngIf="data['include'][key].description">
35-
<span class="yang-info-label">description</span><pre class="yang-info-value">{{data['include'][key].description.text}}</pre>
36-
</div>
37-
<div class="yang-info" *ngIf="data['include'][key].reference">
38-
<span class="yang-info-label">reference</span><pre class="yang-info-value">{{data['include'][key].reference.text}}</pre>
30+
</div>
31+
</ng-container>
32+
<ng-container *ngIf="data['include']">
33+
<div class="yang-info-section" *ngIf="!section('includes')"><a class="yang-info-section-label" (click)="section('includes', true)">includes</a></div>
34+
<div class="yang-info-section" *ngIf="section('includes') && data['include']"><a class="yang-info-section-label" (click)="section('includes', false)">includes</a>
35+
<div class="yang-info-subsection" *ngFor="let key of getKeys(data['include'])">
36+
<span class="yang-info-subsection-label">{{key}}</span>
37+
<div class="yang-info" *ngIf="data['include'][key].description">
38+
<span class="yang-info-label">description</span><pre class="yang-info-value">{{data['include'][key].description.text}}</pre>
39+
</div>
40+
<div class="yang-info" *ngIf="data['include'][key].reference">
41+
<span class="yang-info-label">reference</span><pre class="yang-info-value">{{data['include'][key].reference.text}}</pre>
42+
</div>
3943
</div>
4044
</div>
41-
</div>
45+
</ng-container>
4246

4347
<!-- meta-stmts -->
4448
<div class="yang-info-section" *ngIf="!section('meta')"><a class="yang-info-section-label" (click)="section('meta', true)">meta information</a></div>

‎frontend/yang/yang.type.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@
8585
<span class="yang-info-label">base</span><a class="yang-info-value" (click)="base(value)" title="from {{value | prefixOnly}}">{{value | noPrefix}}</a>
8686
</div>
8787
</div>
88-
88+
8989
<!-- union -->
9090
<div class="yang-info-section" *ngIf="data.types">
9191
<ng-container *ngFor="let type of data.types">

‎frontend/yang/yang.typedef.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,5 @@
2424

2525
</div>
2626

27+
<!-- <pre>{{data | json}}</pre> -->
2728
<!-- <pre>{{schema | json}}</pre> -->

0 commit comments

Comments
 (0)