Added in support for navigating to Topo View from Intent View
Change-Id: Ia62428dee29013cc7fa52727662b67f5673d725c
diff --git a/web/gui2-fw-lib/README.md b/web/gui2-fw-lib/README.md
index fde4ffe..a7e71cb 100644
--- a/web/gui2-fw-lib/README.md
+++ b/web/gui2-fw-lib/README.md
@@ -5,7 +5,7 @@
It is separate to the main ONOS GUI2 project which is in ~/onos/web/gui2
The reason this has been separated out in to a separate library is to allow
-external applications e.g. YangGUI to use it, without bringing along the
+external applications e.g. Fault Management to use it, without bringing along the
whole of GUI 2
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.0.4.
@@ -21,36 +21,44 @@
The Bazel build of this library handles the building and packaging of the library
so that other projects and libraries can use it.
+## Development tools
+
## Development server
-To build the library project using Angular CLI run 'ng build --prod gui2-fw-lib'
-inside the ~/onos/web/gui2-fw-lib folder
+To build the library project using Angular CLI run
+`bazel run @npm//:node_modules/@angular/cli/bin/ng build --prod gui2-fw-lib`
+inside the `~/onos/web/gui2-fw-lib` folder.
-To make the library in to an NPM package use 'npm pack' inside the dist/gui2-fw-lib folder
+To make the library in to an NPM package use `bazel run @nodejs//:bin/npm pack` inside the dist/gui2-fw-lib folder
-To build the app that surrounds the library run 'ng build'. This app is not
+To build the app that surrounds the library run
+`bazel run @npm//:node_modules/@angular/cli/bin/ng build`. This app is not
part of the ONOS GUI and is there as a placeholder for testing the library
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`.
+Run `bazel run @npm//:node_modules/@angular/cli/bin/ng serve` for a dev server.
+Navigate to `http://localhost:4200/`.
The app will automatically reload if you change any of the source files.
__NOTE__ If you make changes to files in the library, the app will not pick them up until you build the library again
## Code scaffolding
-Run `ng generate component component-name --project=gui2-fw-lib` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+Run `bazel run @npm//:node_modules/@angular/cli/bin/ng generate component component-name --project=gui2-fw-lib`
+to generate a new component. You can also use
+`bazel run @npm//:node_modules/@angular/cli/bin/ng generate directive|pipe|service|class|guard|interface|enum|module`.
## Build
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+Run `bazel run @npm//:node_modules/@angular/cli/bin/ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
## Running unit tests
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+Run `bazel run @npm//:node_modules/@angular/cli/bin/ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
## Running end-to-end tests
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+Run `bazel run @npm//:node_modules/@angular/cli/bin/ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
## Further help
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+To get more help on the Angular CLI use `bazel run @npm//:node_modules/@angular/cli/bin/ng help`
+or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/forcesvg.component.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/forcesvg.component.ts
index adc814e..eebe851 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/forcesvg.component.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/forcesvg.component.ts
@@ -532,6 +532,7 @@
/**
* When traffic monitoring is turned on (A key) highlights will be sent back
* from the WebSocket through the Traffic Service
+ * Also handles Intent highlights in case one is selected
* @param devices - an array of device highlights
* @param hosts - an array of host highlights
* @param links - an array of link highlights
@@ -566,21 +567,30 @@
}
if (links.length > 0) {
this.log.debug(links.length, 'Links highlighted');
- links.forEach((lh) => {
- const linkComponent: LinkSvgComponent =
- this.links.find((l) => l.link.id === Link.linkIdFromShowHighlights(lh.id) );
- if (linkComponent) { // A link might not be present if hosts viewing is switched off
- if (fadeMs > 0) {
- lh.fadems = fadeMs;
- }
- linkComponent.ngOnChanges(
- {'linkHighlight': new SimpleChange(<LinkHighlight>{}, lh, true)}
- );
+ links.forEach((lh: LinkHighlight) => {
+ if (fadeMs > 0) {
+ lh.fadems = fadeMs;
}
+ // Don't user .filter() above as it will create a copy of the component which will be discarded
+ this.links.forEach((l) => {
+ if (l.link.id === Link.linkIdFromShowHighlights(lh.id)) {
+ l.linkHighlight = lh;
+ l.ngOnChanges(
+ <SimpleChanges>{'linkHighlight': new SimpleChange(<LinkHighlight>{}, lh, true)}
+ );
+ }
+ });
});
}
}
+ cancelAllLinkHighlightsNow() {
+ this.links.forEach((link: LinkSvgComponent) => {
+ link.linkHighlight = <LinkHighlight>{};
+ this.ngOnChanges(<SimpleChanges>{'linkHighlight': new SimpleChange(<LinkHighlight>{}, <LinkHighlight>{}, false)});
+ });
+ }
+
/**
* As nodes are dragged around the graph, their new location should be sent
* back to server
@@ -665,6 +675,5 @@
this.graph.reinitSimulation();
return numbernodes;
}
-
}
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/linksvg/linksvg.component.css b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/linksvg/linksvg.component.css
index 58548c4..e5f12ae 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/linksvg/linksvg.component.css
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/linksvg/linksvg.component.css
@@ -86,7 +86,7 @@
}
.link.animated {
- stroke-dasharray: 8 5;
+ stroke-dasharray: 8;
animation: ants 5s infinite linear;
/* below line could be added via Javascript, based on path, if we cared
* enough about the direction of ant-flow
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/linksvg/linksvg.component.html b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/linksvg/linksvg.component.html
index a94914d..ec3afae 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/linksvg/linksvg.component.html
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/linksvg/linksvg.component.html
@@ -37,11 +37,12 @@
<svg:line xmlns:svg="http://www.w3.org/2000/svg"
[attr.x1]="link.source?.x" [attr.y1]="link.source?.y"
[attr.x2]="link.target?.x" [attr.y2]="link.target?.y"
- [ngClass]="['link', selected?'selected':'', enhanced?'enhanced':'', highlighted]"
+ [ngClass]="['link', selected?'selected':'', enhanced?'enhanced':'', highlightAsString()]"
[ngStyle]="{'stroke-width': (enhanced ? 4 : 2) * scale + 'px'}"
(click)="toggleSelected(link, $event)"
- (mouseover)="enhance()"
- [attr.filter]="highlighted?'url(#glow)':'none'">
+ (mouseover)="enhance()">
+<!-- [attr.filter]="highlighted?'url(#glow)':'none'">-->
+ <svg:desc>{{link.id}} {{linkHighlight?.css}} {{isHighlighted}}</svg:desc>
</svg:line>
<svg:g xmlns:svg="http://www.w3.org/2000/svg"
[ngClass]="['linkLabel']"
@@ -58,7 +59,7 @@
[@linkLabelVisible]="isHighlighted"
[attr.x]="link.source?.x + (link.target?.x - link.source?.x)/2"
[attr.y]="link.source?.y + (link.target?.y - link.source?.y)/2"
- >{{ label }}</svg:text>
+ >{{ linkHighlight?.label }}</svg:text>
</svg:g>
<!-- Template explanation: Creates an SVG Group if
line 1) 'enhanced' is active and port text exists
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/linksvg/linksvg.component.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/linksvg/linksvg.component.ts
index c669c1c..197ac3c 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/linksvg/linksvg.component.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/linksvg/linksvg.component.ts
@@ -28,6 +28,10 @@
y: number;
}
+/*
+ * LinkSvgComponent gets its data from 2 sources - the force SVG regionData (which
+ * gives the Link below), and other state data here.
+ */
@Component({
selector: '[onos-linksvg]',
templateUrl: './linksvg.component.html',
@@ -47,9 +51,8 @@
})
export class LinkSvgComponent extends NodeVisual implements OnChanges {
@Input() link: Link;
- @Input() highlighted: string = '';
+ @Input() linkHighlight: LinkHighlight;
@Input() highlightsEnabled: boolean = true;
- @Input() label: string;
@Input() scale = 1.0;
isHighlighted: boolean = false;
@Output() selectedEvent = new EventEmitter<SelectedEvent>();
@@ -70,23 +73,28 @@
if (changes['linkHighlight']) {
const hl: LinkHighlight = changes['linkHighlight'].currentValue;
clearTimeout(this.lastTimer);
- this.highlighted = hl.css;
- this.label = hl.label;
this.isHighlighted = true;
- this.log.debug('Link hightlighted', this.link.id, this.highlighted);
+ this.log.debug('Link highlighted', this.link.id);
+
if (hl.fadems > 0) {
this.lastTimer = setTimeout(() => {
this.isHighlighted = false;
- this.highlighted = '';
+ this.linkHighlight = <LinkHighlight>{};
this.ref.markForCheck();
- }, hl.fadems); // Disappear slightly before next one comes in
+ }, this.linkHighlight.fadems); // Disappear slightly before next one comes in
}
-
}
this.ref.markForCheck();
}
+ highlightAsString(): string {
+ if (this.linkHighlight && this.linkHighlight.css) {
+ return this.linkHighlight.css;
+ }
+ return '';
+ }
+
enhance() {
if (!this.highlightsEnabled) {
return;
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology.service.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology.service.ts
index f2a1f60..fab3db2 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology.service.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology.service.ts
@@ -27,6 +27,21 @@
} from './layer/forcesvg/models';
/**
+ * Model of the Intent to be displayed
+ */
+export interface Intent {
+ appId: string;
+ appName: string;
+ key: string;
+ type: string;
+}
+
+export interface RelatedIntent {
+ ids: string[];
+ hover: string;
+}
+
+/**
* ONOS GUI -- Topology Service Module.
*/
@Injectable()
@@ -87,7 +102,8 @@
}
],
['showHighlights', (event) => {
- force.handleHighlights(event.devices, event.hosts, event.links);
+ this.log.debug('Handling showHighlights', event);
+ force.handleHighlights(event.devices, event.hosts, event.links, 5000);
}]
// topo2Highlights is handled by TrafficService
]));
@@ -96,6 +112,7 @@
this.handlers.push('topo2CurrentRegion');
this.handlers.push('topo2PeerRegions');
this.handlers.push('topo2UiModelEvent');
+ this.handlers.push('showHighlights');
// this.handlers.push('topo2Highlights');
// in case we fail over to a new server,
@@ -124,4 +141,30 @@
// tell the server we are ready to receive topo events
this.wss.sendEvent('topo2Start', {});
}
+
+ /*
+ * Result will be handled by showHighlights handler (set up in topology service)
+ * which will call handleHighlights() in Force Component
+ */
+ setSelectedIntent(selectedIntent: Intent): void {
+ this.log.debug('Selected intent changed to', selectedIntent);
+ this.wss.sendEvent('selectIntent', selectedIntent);
+ }
+
+ selectRelatedIntent(ids: string[]): void {
+ this.log.debug('Select next intent');
+ this.wss.sendEvent('requestNextRelatedIntent', <RelatedIntent>{
+ ids: ids,
+ hover: undefined,
+ });
+ }
+
+ /*
+ * Tell the backend to stop sending highlights - any present will fade after 5 seconds
+ * There is also a cancel traffic for Topo 2 in Traffic Service
+ */
+ cancelHighlights(): void {
+ this.wss.sendEvent('cancelTraffic', {});
+ this.log.debug('Highlights canceled');
+ }
}
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.spec.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.spec.ts
index 29dab54..ba99fc8 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.spec.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.spec.ts
@@ -27,7 +27,7 @@
import { SummaryComponent } from '../panel/summary/summary.component';
import { ToolbarComponent } from '../panel/toolbar/toolbar.component';
import { DetailsComponent } from '../panel/details/details.component';
-import { TopologyService } from '../topology.service';
+import {Intent, TopologyService} from '../topology.service';
import {
FlashComponent,
@@ -86,6 +86,9 @@
];
}
destroy() {}
+ setSelectedIntent(selectedIntent: Intent): void {}
+ selectRelatedIntent(ids: string[]): void {}
+ cancelHighlights(): void {}
}
class MockIconService {
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.ts
index 0aeaee7..fb4e4cb 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.ts
@@ -14,6 +14,7 @@
* limitations under the License.
*/
import {
+ AfterViewInit,
Component, HostListener, Inject, Input,
OnDestroy,
OnInit, SimpleChange,
@@ -37,7 +38,7 @@
import {DetailsComponent} from '../panel/details/details.component';
import {BackgroundSvgComponent} from '../layer/backgroundsvg/backgroundsvg.component';
import {ForceSvgComponent} from '../layer/forcesvg/forcesvg.component';
-import {TopologyService} from '../topology.service';
+import {Intent, TopologyService} from '../topology.service';
import {
GridDisplayToggle,
HostLabelToggle,
@@ -69,6 +70,7 @@
import {MapObject} from '../layer/maputils';
import {LayoutService, LayoutType} from '../layout.service';
import {SelectedEvent} from '../layer/forcesvg/visuals/nodevisual';
+import {ActivatedRoute} from '@angular/router';
const TOPO2_PREFS = 'topo2_prefs';
const TOPO_MAPID_PREFS = 'topo_mapid';
@@ -143,7 +145,7 @@
templateUrl: './topology.component.html',
styleUrls: ['./topology.component.css']
})
-export class TopologyComponent implements OnInit, OnDestroy {
+export class TopologyComponent implements OnInit, OnDestroy, AfterViewInit {
@Input() bannerHeight: number = 48;
// These are references to the components inserted in the template
@ViewChild(InstanceComponent, {static: true}) instance: InstanceComponent;
@@ -194,6 +196,7 @@
protected is: IconService,
private lion: LionService,
private layout: LayoutService,
+ protected ar: ActivatedRoute,
@Inject('Window') public window: any,
) {
if (this.lion.ubercache.length === 0) {
@@ -243,7 +246,6 @@
this.is.loadIconDef('roadm_otn');
this.is.loadIconDef('triangleUp');
this.is.loadIconDef('uiAttached');
- this.log.debug('Topology component constructed');
}
/**
@@ -298,14 +300,6 @@
// Service just to compartmentalize things a bit
this.ts.init(this.instance, this.background, this.force);
- // Scale the window initially - then after resize
- const zoomMapExtents = ZoomUtils.zoomToWindowSize(
- this.bannerHeight, this.window.innerWidth, this.window.innerHeight);
- this.zoomDirective.changeZoomLevel(zoomMapExtents, true);
- this.log.debug('TopologyComponent initialized',
- this.bannerHeight, this.window.innerWidth, this.window.innerHeight,
- zoomMapExtents);
-
// For the 2.1 release to not listen to updates of prefs as they are
// only the echo of what we have sent down and the event mechanism
// does not discern between users. Can get confused if multiple windows open
@@ -314,6 +308,37 @@
this.prefsState = this.ps.getPrefs(TOPO2_PREFS, this.prefsState);
this.mapIdState = this.ps.getPrefs(TOPO_MAPID_PREFS, this.mapIdState);
this.trs.init(this.force);
+
+ // Scale the window initially - then after resize
+ const zoomMapExtents = ZoomUtils.zoomToWindowSize(
+ this.bannerHeight, this.window.innerWidth, this.window.innerHeight);
+ this.zoomDirective.changeZoomLevel(zoomMapExtents, true);
+
+ // TODO find out why the following is never printed
+ this.log.debug('TopologyComponent initialized,',
+ this.bannerHeight, this.window.innerWidth, this.window.innerHeight,
+ zoomMapExtents);
+ }
+
+ ngAfterViewInit(): void {
+ this.ar.queryParams.subscribe(params => {
+ const intentId = params['intentId'];
+ const intentType = params['intentType'];
+ const appId = params['appId'];
+ const appName = params['appName'];
+
+ if (intentId && intentType && appId) {
+ const selectedIntent = <Intent>{
+ key: intentId,
+ type: intentType,
+ appId: appId,
+ appName: appName,
+ };
+ this.ts.setSelectedIntent(selectedIntent);
+
+ this.log.warn('TopologyComponent init with Intent: ', selectedIntent, params);
+ }
+ });
}
/**
@@ -744,6 +769,8 @@
}
);
}
+ this.ts.cancelHighlights();
+ this.force.cancelAllLinkHighlightsNow();
}
/**
diff --git a/web/gui2/README.md b/web/gui2/README.md
index a1b1410..bb20045 100644
--- a/web/gui2/README.md
+++ b/web/gui2/README.md
@@ -1,31 +1,32 @@
-# ONOS GUI 2.1.0
+# ONOS GUI 2.3.0
-This project is based on __[Angular 7](https://angular.io/docs)__
+This project is based on __[Angular 9](https://angular.io/docs)__
and __[ES6](http://www.ecma-international.org/ecma-262/6.0/index.html)__ (aka __ES2015__),
as an alternative to the 1.0.0 GUI which was based
off __[AngularJS 1.3.5](https://angularjs.org/)__
Building, testing and running lint are all handled by Bazel. See web/gui2/BUILD file.
-To use this new GUI you simply have to start the GUI in a running ONOS at the __onos>__ cli:
+To use this new GUI you simply have to ensure it is running on ONOS at the __onos>__ cli:
```
app activate gui2
```
and the gui will be accessible at [http://localhost:8181/onos/ui](http://localhost:8181/onos/ui)
-Gui2 can also be loaded every time ONOS starts by adding it to ONOS_APPS
+Gui2 is loaded by default as ONOS starts since it is added to ONOS_APPS
```
export ONOS_APPS=${ONOS_APPS:-drivers,openflow,gui2}
```
-The original legacy GUI is also loadable as an app, and is available at the same web resource onos/ui
+The original legacy GUI is also loadable as an app, and is available at the same
+web resource onos/ui on port 8181
The legacy GUI should be disabled if GUI2 is active and vice versa
```
app deactivate gui
```
-As usual with ONOS if you want to run it in a different language set the __ONOS_LOCALE__ environment variable
-to the locale you want before starting onos. e.g.
+As usual with ONOS if you want to run it in a different language set the
+__ONOS_LOCALE__ environment variable to the locale you want before starting onos. e.g.
```
ONOS_LOCALE=fr_FR SHLVL=1 bazel run onos-local -- clean debug
```
@@ -58,14 +59,15 @@
# Issues
Issues found on the GUI2 should be added to the existing list on the
[ONOS GUI Jira Kanban board](https://jira.onosproject.org/secure/RapidBoard.jspa?rapidView=31)
-(requires Jira login)
+(requires Jira login). Assigning the Epic Link `GUI` will ensure the issue appears
+ on this board
# Development
There are 2 ways to go about development -
1. rebuild the code and rerun through Bazel (much like can be done with any ordinary ONOS app)
(recommended for most people)
OR
-2. use Angular 7 CLI (__ng__ command) to rebuild on the fly (faster for
+2. use Angular 9 CLI (__ng__ command) to rebuild on the fly (faster for
development). Be aware that if you are just changing the topology view it does not
require all of the steps that __gui2__ does - see its own [README](../gui2-topo-lib/README.md)
for more details
@@ -79,7 +81,7 @@
For 2) it's well worth becoming familiar with Angular CLI.
> (this has the advantage of debug symbols and the code not is uglified and minimized)
-The project is created with [Angular CLI](https://github.com/angular/angular-cli) v7
+The project is created with [Angular CLI](https://github.com/angular/angular-cli) v9
to simplify development of the browser side code. It is complicated to set up,
but is worth the effort if you have more than a few days worth of development to do.
Since data is retrieved through WebSockets there is a requirement to run ONOS
@@ -89,84 +91,123 @@
>they are already installed, it's best to use the versions of these that's used
>by Bazel in ONOS.
-Add the following 2 entries to the __start__ of
-your PATH environment variable.
+## Yarn and Angular CLI
+Bazel installs all of the NPM modules with `Yarn` listed in
```
-~/.cache/bazel/_bazel_scondon/8beba376f58d295cf3282443fe02c21a/external/nodejs/bin/nodejs/bin
+web/gui-fw-lib/package.json
```
-> (where ~/.cache/bazel/_bazel_scondon/8beba376f58d295cf3282443fe02c21a should be
-> replaced by an equivalent folder on your system)
-```text
-~/onos/web/gui2-fw-lib/node_modules/@angular/cli/bin/
+through a declaration made in the ONOS `WORKSPACE` file.
+
+To check the Yarn installation you can run
+```bash
+bazel run @nodejs//:bin/yarn versions
```
-The first time you run this you will have to go to the framework folder and run "npm install"
-```text
-cd ~/onos/web/gui2-fw-lib && \
-npm install
+NPM is also available (but this is mainly used for GUI 1)
+```bash
+bazel run @nodejs//:bin/npm version
```
-This will install all the vendor Javascript implementations that are listed in package.json
-(including 'ng' - the Angular CLI command) in to ~/onos/web/gui2-fw-lib/node_modules
-After this you should be able to cd in to ~/onos/web/gui2-fw-lib and run 'ng version' and see:
+The Angular CLI (ng) is available inside Bazel as
+```bash
+bazel run @npm//:node_modules/@angular/cli/bin/ng version
```
-Angular CLI: 7.0.4
-Node: 8.11.1
+
+When run inside an Angular Project (from `~/onos/web/gui2-fw-lib`) we get:
+```bash
+Angular CLI: 8.3.19
+Node: 10.16.0
OS: linux x64
-Angular: 7.0.2
+Angular: 8.2.14
+... animations, bazel, common, compiler, compiler-cli, core
+... forms, language-service, platform-browser
+... platform-browser-dynamic, router
+
+Package Version
+------------------------------------------------------------
+@angular-devkit/architect 0.803.19
+@angular-devkit/build-angular 0.803.19
+@angular-devkit/build-ng-packagr 0.803.19
+@angular-devkit/build-optimizer 0.803.19
+@angular-devkit/build-webpack 0.803.19
+@angular-devkit/core 8.3.19
+@angular-devkit/schematics 8.3.19
+@angular/cli 8.3.19
+@angular/http 7.2.15
+@bazel/hide-bazel-files 0.40.0
+@bazel/karma 0.34.0
+@bazel/protractor 0.34.0
+@bazel/typescript 0.34.0
+@ngtools/webpack 8.3.19
+@schematics/angular 8.3.19
+@schematics/update 0.803.19
+ng-packagr 5.7.1
+rxjs 6.5.3
+typescript 3.5.3
+webpack 4.39.2
```
## GUI FW Lib
-The GUI2 __framework__ is in __~/onos/web/gui2-fw-lib__ and the GUI __application__ is in __~/onos/web/gui2__ (and depends on the framework).
+The GUI2 __framework__ (in `~/onos/web/gui2-fw-lib`) is at the heart of the GUI2
+implementation and contains core items like icon libraries, base classes etc.
+The main GUI __application__ is in `~/onos/web/gui2` (and depends on this framework).
-The GUI2 framework is a library inside its own mini application (unrelated to the
-main GUI application) - every thing of importance is in projects/gui2-fw-lib. The
-own application is just a wrapper around the framework library - it has to be
+The GUI2 framework is built as a library inside its own mini application (unrelated
+to the main GUI application) - every thing of importance is in `projects/gui2-fw-lib`.
+The mini application is just a wrapper around the framework library - it has to be
there for Angular CLI to work and can be useful for testing parts of the framework
-in isolation.
+in isolation.
+
+When the library is packaged up in
+[Angular Package Format](https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/preview)
+and can be manually uploaded to [https://www.npmjs.com/package/gui2-fw-lib](https://www.npmjs.com/package/gui2-fw-lib)
+to be used in other projects (e.g. [onos-gui](https://github.com/onosproject/onos-gui)
For build method 2) above if you make any changes here or are using it for the
-first time it will need to be built. From ~/onos/web/gui2 run:
+first time it will need to be built. From `~/onos/web/gui2` run:
```bash
pushd ~/onos/web/gui2-fw-lib && \
-ng build gui2-fw-lib && \
+bazel run @npm//:node_modules/@angular/cli/bin/ng build gui2-fw-lib && \
cd dist/gui2-fw-lib && \
-npm pack && \
+bazel run @nodejs//:bin/npm pack && \
popd && \
-npm install gui2-fw-lib
+bazel run @nodejs//:bin/npm install gui2-fw-lib
```
-This packages the Framework up in to __~/onos/web/gui2-fw-lib/dist/gui2-fw-lib/gui2-fw-lib-2.1.0.tgz__
+This packages the Framework up in to `~/onos/web/gui2-fw-lib/dist/gui2-fw-lib/gui2-fw-lib-2.3.2.tgz`
## GUI2 Topo library
-The GUI2 __Topology__ is in __~/onos/web/gui2-topo-lib__ and the GUI __application__
-includes this Topology application through the __onos-routing-module__. The
+The GUI2 __Topology__ is in `~/onos/web/gui2-topo-lib` and the GUI __application__
+includes this Topology application through the `onos-routing.module`. The
Topology app has its own README file.
For build method 2) above if you make any changes here or are using it for the
first time it will need to be built. From ~/onos/web/gui2 run:
```text
pushd ~/onos/web/gui2-topo-lib && \
-ng build gui2-topo-lib && \
+bazel run @npm//:node_modules/@angular/cli/bin/ng build gui2-topo-lib && \
cd dist/gui2-topo-lib && \
-npm pack && \
+bazel run @nodejs//:bin/npm pack && \
popd && \
-npm install gui2-topo-lib
+bazel run @nodejs//:bin/npm install gui2-topo-lib
```
-This packages the Topo View up in to __onos/web/gui2-topo-lib/dist/gui2-topo-lib/gui2-topo-lib-2.1.0.tgz__
+This packages the Topo View up in to `onos/web/gui2-topo-lib/dist/gui2-topo-lib/gui2-topo-lib-2.1.0.tgz`.
+
+It is manually uploaded to [https://www.npmjs.com/package/gui2-topo-lib](https://www.npmjs.com/package/gui2-topo-lib)
## GUI2 Application
-The application contains the ONOS index.html and all of the tabular views and the
-topology view. It references the gui2-fw-lib and gui2-topo-lib as just other
-dependencies.
+The application is the visible front end and contains the ONOS `index.html` and
+all of the tabular views and the topology view. It references the `gui2-fw-lib`
+and `gui2-topo-lib` as just other dependencies.
For build method 2) above to use this application in Angular CLI for development
on your system, you need to:
-1. Change directory in to onos/web/gui2 - this is where you will run the `ng` command from.
-2. Run `npm install` once from this folder to add dependencies
-3. Then run 'ng version' from onos/web/gui2 and an additional version should be
-shown __Angular: 7.0.2__
+1. Change directory in to onos/web/gui2 - this is where you will run the
+`bazel run @npm//:node_modules/@angular/cli/bin/ng` command from.
+2. Run `bazel run @nodejs//:bin/npm install` once from this folder to add dependencies
+3. Then run `bazel run @npm//:node_modules/@angular/cli/bin/ng version` from
+`onos/web/gui2` and the project version should be shown __Angular: 8.2.14__
4. Temporarily make a change to disable authentication in UIWebSocket.java
5. Temporarily make a change to disable external routes in onos-routing.module.ts
6. Create symbolic links for some CSS files
@@ -175,13 +216,13 @@
> Remember this is only for build method 2) above
Before the server can be run a couple of small adjustments need to be temporarily made
-1. The file __~/onos/web/gui/src/main/java/org/onosproject/ui/impl/UiWebSocket.java__
+1. The file `~/onos/web/gui/src/main/java/org/onosproject/ui/impl/UiWebSocket.java`
needs to be adjusted to remove authentication
-2. The file __~/onos/web/gui2/src/main/webapp/app/onos-routing.module.ts__ needs
-to be adjusted to remove references to routes in external applications
+2. The file `~/onos/web/gui2/src/main/webapp/app/onos-routing.module.ts` needs
+to be adjusted to remove references to routes in external applications
These changes are given in Appendix A at the end of this document - these changes
-should not be checked in though - as they are not required (and will break) the
+should **not** be checked in though - as they are not required (and will break) the
GUI2 embedded in ONOS.
### Create symbolic links for CSS files
@@ -199,56 +240,61 @@
After this it will be possible to build/test/lint/run the application inside the Angular CLI without errors.
```text
-ng build --prod && \
-ng lint && \
-ng test --watch=false
+bazel run @npm//:node_modules/@angular/cli/bin/ng build -- --prod;
+bazel run @npm//:node_modules/@angular/cli/bin/ng lint;
+bazel run @npm//:node_modules/@angular/cli/bin/ng test -- --watch=false --browsers=ChromeHeadless;
```
## Development server
Finally the application can be run, and will be available at http://localhost:4200
```text
-ng serve --aot
+bazel run @npm//:node_modules/@angular/cli/bin/ng serve -- --aot
```
-Run `ng serve --aot` for a dev server (because we are using ES6, we [must use AOT](https://github.com/angular/angular-cli/wiki/build)).
-Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+Run `bazel run @npm//:node_modules/@angular/cli/bin/ng serve --aot` for a dev server
+(because we are using ES6, we [must use AOT](https://github.com/angular/angular-cli/wiki/build)).
+Navigate to `http://localhost:4200/`. The app will automatically reload if you change
+any of the source files.
Press Ctrl-Shift-I in Chrome and Firefox to bring up the developer tools and the browser console.
-There are certain extra debugging can be turned on by adding the parameter 'debug'
-For example to turn extra logging for WebSockets add on __?debug=txrx__
+There are certain extra debugging supports which can be turned on by adding the
+parameter 'debug'. For example to turn extra logging for WebSockets add on __?debug=txrx__
-On the Apps view - icons will appear to be missing - this is because they use a relative path to
-source the image, and this path is not available in this 'ng serve' mode. The icons work fine in the
-mode where it's run inside ONOS.
+On the Apps view - icons will appear to be missing - this is because they use a
+relative path to source the image, and this path is not available in this
+`ng serve` mode. The icons work fine in the mode where it's run inside ONOS.
### Navigating
In this development mode navigation is not available, and to to jump to other view,
replace the 'device' at the end of the URL with the route you want to follow
-e.g. 'app' for the Applications view or 'topo' for the Topology view
+e.g. `app` for the Applications view or `topo` for the Topology view
## Code scaffolding
-Change directory in to '~onos/web/gui2/src/main/webapp/app/view'
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+Change directory in to `~onos/web/gui2/src/main/webapp/app/view`
+Run `bazel run @npm//:node_modules/@angular/cli/bin/ng generate component component-name` to generate a new component.
+You can also use `bazel run @npm//:node_modules/@angular/cli/bin/ng generate directive|pipe|service|class|guard|interface|enum|module`.
## Build
-The build is handled through the web/gui2/BUILD file. This downloads Node, NPM and Angular CLI
-It runs ```ng build --prod --extract-css``` and copies everything over in to WEB-INF/classes/dist
-
-To run it manually in Angular CLI run `ng build` (and add on --prod --extract-css --watch as necessary to alter its behaviour)
+The build is handled through the `web/gui2/BUILD` file.
+It runs `bazel run @npm//:node_modules/@angular/cli/bin/ng build --prod --extract-css`
+and copies everything over in to WEB-INF/classes/dist
## Running unit tests
-This is automatically done when using "bazel test " - see the web/gui2/BUILD file for more details.
+This is automatically done when using `bazel test //web/gui2:onos-gui2-ng-tests`
+ - see the `web/gui2/BUILD` file for more details.
-To run it manually in Angular CLI run `ng test --watch` to execute the unit tests
+To run it manually in Angular CLI run
+`bazel run @npm//:node_modules/@angular/cli/bin/ng test --watch` to execute the unit tests
via [Karma](https://karma-runner.github.io). Running it directly like this will
test with both Firefox and Chrome. To use only one use the __--browsers__ argument
## Running checkstyle (lint)
-This is automatically done when using "bazel test" - see the web/gui2/BUILD file
-for more details.
+This is automatically done when using `bazel test //web/gui2:onos-gui2-ng-tests`
+- see the web/gui2/BUILD file for more details.
-To run it manually in Angular CLI run `ng lint` to run codelyzer on your code,
+To run it manually in Angular CLI run
+`bazel run @npm//:node_modules/@angular/cli/bin/ng lint` to run codelyzer on your code,
according to the rules in __tslint.json__
## Running end-to-end tests
diff --git a/web/gui2/src/main/webapp/app/view/intent/intent/intent.component.html b/web/gui2/src/main/webapp/app/view/intent/intent/intent.component.html
index 040b3c2..e067611 100644
--- a/web/gui2/src/main/webapp/app/view/intent/intent/intent.component.html
+++ b/web/gui2/src/main/webapp/app/view/intent/intent/intent.component.html
@@ -40,9 +40,8 @@
</div>
</span>
<div class="separator"></div>
- <!-- TO-DO showIntent() need to correct once topology page is available-->
- <div (click)="showIntent()">
- <onos-icon classes="{active: canShowIntent()}" iconId="topo" iconSize="42" toolTip="{{ topoTip }}"></onos-icon>
+ <div routerLink="/topo2" [queryParams]="{ intentId: selId, appId: intentData.appId, appName: intentData.appName, intentType: intentData.type }" routerLinkActive="active">
+ <onos-icon classes="{{!!selId ? 'active-rect' :undefined}}" iconId="topo" iconSize="42" toolTip="{{ topoTip }}"></onos-icon>
</div>
<div (click)="!!selId && intentState() === 'Withdrawn' ? confirmAction(IntentActionEnum.RESUBMIT):''">
<onos-icon classes="{{!!selId && intentState() === 'Withdrawn' ? 'active-rect' :undefined}}" iconId="play" iconSize="42"
diff --git a/web/gui2/src/main/webapp/app/view/intent/intent/intent.component.spec.ts b/web/gui2/src/main/webapp/app/view/intent/intent/intent.component.spec.ts
index 8a5a9a5..b42147b 100644
--- a/web/gui2/src/main/webapp/app/view/intent/intent/intent.component.spec.ts
+++ b/web/gui2/src/main/webapp/app/view/intent/intent/intent.component.spec.ts
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { ActivatedRoute, Params } from '@angular/router';
+import {ActivatedRoute, Params} from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { DebugElement } from '@angular/core';
@@ -34,6 +34,7 @@
import { } from 'jasmine';
import { IntentComponent } from './intent.component';
+import {RouterTestingModule} from '@angular/router/testing';
class MockActivatedRoute extends ActivatedRoute {
constructor(params: Params) {
@@ -84,7 +85,7 @@
};
fs = new FnService(ar, logSpy, windowMock);
TestBed.configureTestingModule({
- imports: [BrowserAnimationsModule, FormsModule],
+ imports: [BrowserAnimationsModule, FormsModule, RouterTestingModule],
declarations: [
IntentComponent,
IconComponent,
diff --git a/web/gui2/src/main/webapp/app/view/intent/intent/intent.component.ts b/web/gui2/src/main/webapp/app/view/intent/intent/intent.component.ts
index 585514d..6bd490e 100644
--- a/web/gui2/src/main/webapp/app/view/intent/intent/intent.component.ts
+++ b/web/gui2/src/main/webapp/app/view/intent/intent/intent.component.ts
@@ -129,6 +129,7 @@
this.intentData.appId = splittedRowAppId[0].trim();
this.intentData.appName = splittedRowAppId[1].trim();
this.intentData.key = this.selId;
+ this.intentData.type = selRow.type;
}
briefToggle() {
@@ -153,20 +154,6 @@
}
/**
- * TO-DO intent view related function need to implement once
- * topology page will be available
- */
- showIntent() {
- }
-
- /**
- * TO-DO intent view related function need to implement once
- * topology page will be available
- */
- canShowIntent() {
- }
-
- /**
* Perform one of the intent actions - resubmit, remove, purge or purge withdrawn
* Raises a dialog which calls back the dOk() below
*/