diff options
Diffstat (limited to 'so-monitoring/so-monitoring-ui/src/main/frontend/src/app')
36 files changed, 2057 insertions, 0 deletions
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app-routing.module.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app-routing.module.ts new file mode 100644 index 0000000000..8a505d9e6b --- /dev/null +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app-routing.module.ts @@ -0,0 +1,46 @@ +/**
+============LICENSE_START=======================================================
+ Copyright (C) 2018 Ericsson. All rights reserved.
+================================================================================
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+ limitations under the License.
+
+SPDX-License-Identifier: Apache-2.0
+============LICENSE_END=========================================================
+
+@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+*/
+
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { HomeComponent } from './home/home.component';
+import { DetailsComponent } from './details/details.component';
+
+const routes: Routes = [
+ {
+ // Route to home page
+ path: '',
+ component: HomeComponent
+ },
+ {
+ // Route to page to show individual process based on ID
+ path: 'details/:id',
+ component: DetailsComponent
+ },
+];
+
+@NgModule({
+ imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' })],
+ exports: [RouterModule]
+})
+
+export class AppRoutingModule { }
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.component.html b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.component.html new file mode 100644 index 0000000000..ddd274718d --- /dev/null +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.component.html @@ -0,0 +1,29 @@ +<!--
+============LICENSE_START=======================================================
+ Copyright (C) 2018 Ericsson. All rights reserved.
+================================================================================
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+ limitations under the License.
+
+SPDX-License-Identifier: Apache-2.0
+============LICENSE_END=========================================================
+
+@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+-->
+
+<app-topbar></app-topbar>
+<div id="container">
+ <app-sidebar></app-sidebar>
+ <div id="content">
+ <router-outlet></router-outlet>
+ </div>
+</div>
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.component.scss b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.component.scss new file mode 100644 index 0000000000..e69de29bb2 --- /dev/null +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.component.scss diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.component.spec.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.component.spec.ts new file mode 100644 index 0000000000..076be174fb --- /dev/null +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.component.spec.ts @@ -0,0 +1,53 @@ +/**
+============LICENSE_START=======================================================
+ Copyright (C) 2018 Ericsson. All rights reserved.
+================================================================================
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+ limitations under the License.
+
+SPDX-License-Identifier: Apache-2.0
+============LICENSE_END=========================================================
+
+@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+*/
+
+import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+describe('AppComponent', () => {
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ imports: [
+ RouterTestingModule
+ ],
+ declarations: [
+ AppComponent
+ ],
+ }).compileComponents();
+ }));
+ it('should create the app', async(() => {
+ const fixture = TestBed.createComponent(AppComponent);
+ const app = fixture.debugElement.componentInstance;
+ expect(app).toBeTruthy();
+ }));
+ it(`should have as title 'app'`, async(() => {
+ const fixture = TestBed.createComponent(AppComponent);
+ const app = fixture.debugElement.componentInstance;
+ expect(app.title).toEqual('app');
+ }));
+ it('should render title in a h1 tag', async(() => {
+ const fixture = TestBed.createComponent(AppComponent);
+ fixture.detectChanges();
+ const compiled = fixture.debugElement.nativeElement;
+ expect(compiled.querySelector('h1').textContent).toContain('Welcome to ONAP-SO-Monitor!');
+ }));
+});
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.component.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.component.ts new file mode 100644 index 0000000000..2750e4780f --- /dev/null +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.component.ts @@ -0,0 +1,33 @@ +/**
+============LICENSE_START=======================================================
+ Copyright (C) 2018 Ericsson. All rights reserved.
+================================================================================
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+ limitations under the License.
+
+SPDX-License-Identifier: Apache-2.0
+============LICENSE_END=========================================================
+
+@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+*/
+
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-root',
+ templateUrl: './app.component.html',
+ styleUrls: ['./app.component.scss']
+})
+
+export class AppComponent {
+ title = 'app';
+}
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.module.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.module.ts new file mode 100644 index 0000000000..c3a02b90f3 --- /dev/null +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/app.module.ts @@ -0,0 +1,70 @@ +/**
+============LICENSE_START=======================================================
+ Copyright (C) 2018 Ericsson. All rights reserved.
+================================================================================
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+ limitations under the License.
+
+SPDX-License-Identifier: Apache-2.0
+============LICENSE_END=========================================================
+
+@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+*/
+
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { SidebarComponent } from './sidebar/sidebar.component';
+import { TopbarComponent } from './topbar/topbar.component';
+import { HomeComponent } from './home/home.component';
+import { HttpClientModule } from '@angular/common/http';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatTableModule } from '@angular/material';
+import { DetailsComponent } from './details/details.component';
+import { ToastrNotificationService } from './toastr-notification-service.service';
+import { MatTabsModule } from '@angular/material/tabs';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatSelectModule } from '@angular/material/select';
+import { MatFormFieldModule, MatInputModule } from '@angular/material';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatNativeDateModule } from '@angular/material';
+import { MatCardModule } from '@angular/material/card';
+
+@NgModule({
+ declarations: [
+ AppComponent,
+ SidebarComponent,
+ TopbarComponent,
+ HomeComponent,
+ DetailsComponent
+ ],
+ imports: [
+ BrowserModule,
+ AppRoutingModule,
+ HttpClientModule,
+ FormsModule,
+ MatTableModule,
+ MatTabsModule,
+ BrowserAnimationsModule,
+ MatSelectModule,
+ MatFormFieldModule,
+ MatInputModule,
+ MatDatepickerModule,
+ MatNativeDateModule,
+ MatCardModule
+ ],
+ providers: [ToastrNotificationService],
+ bootstrap: [AppComponent]
+})
+export class AppModule { }
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/data.service.spec.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/data.service.spec.ts new file mode 100644 index 0000000000..987d29d548 --- /dev/null +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/data.service.spec.ts @@ -0,0 +1,37 @@ +/**
+============LICENSE_START=======================================================
+ Copyright (C) 2018 Ericsson. All rights reserved.
+================================================================================
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+ limitations under the License.
+
+SPDX-License-Identifier: Apache-2.0
+============LICENSE_END=========================================================
+
+@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+*/
+
+import { TestBed, inject } from '@angular/core/testing';
+
+import { DataService } from './data.service';
+
+describe('DataService', () => {
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ providers: [DataService]
+ });
+ });
+
+ it('should be created', inject([DataService], (service: DataService) => {
+ expect(service).toBeTruthy();
+ }));
+});
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/data.service.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/data.service.ts new file mode 100644 index 0000000000..8913eaa86f --- /dev/null +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/data.service.ts @@ -0,0 +1,96 @@ +/**
+============LICENSE_START=======================================================
+ Copyright (C) 2018 Ericsson. All rights reserved.
+================================================================================
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+ limitations under the License.
+
+SPDX-License-Identifier: Apache-2.0
+============LICENSE_END=========================================================
+
+@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+*/
+
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { Process } from './model/process.model';
+import { catchError } from 'rxjs/operators';
+import { Observable } from 'rxjs';
+import { ProcessInstanceId } from './model/processInstanceId.model';
+import { environment } from '../environments/environment';
+import { HttpResponse } from '@angular/common/http';
+import { PII } from './model/processInstance.model';
+import { HttpErrorHandlerService } from './http-error-handler.service';
+
+
+@Injectable({
+ providedIn: 'root'
+})
+export class DataService {
+
+ constructor(private http: HttpClient, private httpErrorHandlerService: HttpErrorHandlerService) { }
+
+ // HTTP POST call to running Spring Boot application
+ retrieveInstance(servInstId: {}, from: number, to: number) {
+ var url = environment.soMonitoringBackendURL + 'v1/search?from=' + from + "&to=" + to;
+ return this.http.post<Process[]>(url, servInstId)
+ .pipe(
+ catchError(this.httpErrorHandlerService.handleError("POST", url))
+ );
+ }
+
+ // HTTP GET to return Process Instance using RequestID
+ getProcessInstanceId(requestId): Observable<HttpResponse<ProcessInstanceId>> {
+ var url = environment.soMonitoringBackendURL + 'process-instance-id/' + requestId;
+ console.log(requestId);
+ console.log(url);
+ return this.http.get<ProcessInstanceId>(url, { observe: 'response' })
+ .pipe(
+ catchError(this.httpErrorHandlerService.handleError("GET", url))
+ );
+ }
+
+ // HTTP GET to return Activity instancs using ProcessInstanceID
+ getActivityInstance(processInstanceId) {
+ var url = environment.soMonitoringBackendURL + 'activity-instance/' + processInstanceId;
+ return this.http.get(url)
+ .pipe(
+ catchError(this.httpErrorHandlerService.handleError("GET", url))
+ );
+ }
+
+ // HTTP GET to return Activity Instance using ProcessInstanceID
+ async getProcessInstance(processInstanceId): Promise<PII> {
+ var url = environment.soMonitoringBackendURL + 'process-instance/' + processInstanceId;
+ return await (this.http.get<PII>(url)
+ .pipe(
+ catchError(this.httpErrorHandlerService.handleError("GET", url))))
+ .toPromise();
+ }
+
+ // HTTP GET to return Process Definition using processDefinitionId
+ getProcessDefinition(processDefinitionId) {
+ var url = environment.soMonitoringBackendURL + 'process-definition/' + processDefinitionId;
+ return this.http.get(url).pipe(
+ catchError(this.httpErrorHandlerService.handleError("GET", url))
+ );
+ }
+
+ // HTTP GET to return Variable Instance using ProcessInstanceID
+ getVariableInstance(processDefinitionId) {
+ var url = environment.soMonitoringBackendURL + 'variable-instance/' + processDefinitionId;
+ return this.http.get(url).pipe(
+ catchError(this.httpErrorHandlerService.handleError("GET", url))
+ );
+ }
+
+}
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.html b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.html new file mode 100644 index 0000000000..fc682acb61 --- /dev/null +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.html @@ -0,0 +1,99 @@ +<!--
+============LICENSE_START=======================================================
+ Copyright (C) 2018 Ericsson. All rights reserved.
+================================================================================
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+ limitations under the License.
+
+SPDX-License-Identifier: Apache-2.0
+============LICENSE_END=========================================================
+
+@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+-->
+
+<div class="completeForm">
+ <div class="topCanvas">
+ <section class="canvas" id="canvas"></section>
+ <mat-card class="besideCanvas" id="besideCanvas">
+ <mat-card-title>Process Information</mat-card-title>
+ <br />
+ <mat-card-content>Process Instance Id: </mat-card-content>
+ <mat-card-content>{{ processInstanceID }}</mat-card-content>
+ <br />
+ <mat-card-content>Process Definition Id: </mat-card-content>
+ <mat-card-content>{{ processDefinitionID }}</mat-card-content>
+ <br />
+ <mat-card-content>Process Definition Name: </mat-card-content>
+ <mat-card-content>{{ processDefinitionName }}</mat-card-content>
+ </mat-card>
+ </div>
+ <br />
+
+ <div class="example-container mat-elevation-z8">
+ <mat-tab-group class="tab-group">
+ <mat-tab label="Activity Instances">
+ <mat-table [dataSource]="activityInstance">
+ <ng-container matColumnDef="activityId">
+ <mat-header-cell *matHeaderCellDef> Activity Id </mat-header-cell>
+ <mat-cell *matCellDef="let activity"> {{ activity.activityId }} </mat-cell>
+ </ng-container>
+ <ng-container matColumnDef="activityName">
+ <mat-header-cell *matHeaderCellDef> Activity Name </mat-header-cell>
+ <mat-cell *matCellDef="let activity">
+ <div [ngSwitch]="!!activity.calledProcessInstanceId">
+ <div *ngSwitchCase="false"><a> {{ activity.activityName }} </a></div>
+ <div *ngSwitchCase="true"><a [routerLink]="['/details', activity.calledProcessInstanceId]"> {{ activity.activityName }} </a></div>
+ </div>
+ </mat-cell>
+ </ng-container>
+ <ng-container matColumnDef="activityType">
+ <mat-header-cell *matHeaderCellDef> Activity Type </mat-header-cell>
+ <mat-cell *matCellDef="let activity"> {{ activity.activityType }} </mat-cell>
+ </ng-container>
+ <ng-container matColumnDef="startTime">
+ <mat-header-cell *matHeaderCellDef> Start Time </mat-header-cell>
+ <mat-cell *matCellDef="let activity"> {{ activity.startTime }} </mat-cell>
+ </ng-container>
+ <ng-container matColumnDef="endTime">
+ <mat-header-cell *matHeaderCellDef> End Time </mat-header-cell>
+ <mat-cell *matCellDef="let activity"> {{ activity.endTime }} </mat-cell>
+ </ng-container>
+ <ng-container matColumnDef="durationInMillis">
+ <mat-header-cell *matHeaderCellDef> Duration (ms) </mat-header-cell>
+ <mat-cell *matCellDef="let activity"> {{ activity.durationInMillis }} </mat-cell>
+ </ng-container>
+ <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+ <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+ </mat-table>
+ </mat-tab>
+
+ <mat-tab label="Variable Instances">
+ <mat-table [dataSource]="variableInstance">
+ <ng-container matColumnDef="name">
+ <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
+ <mat-cell *matCellDef="let variable"> {{ variable.name }} </mat-cell>
+ </ng-container>
+ <ng-container matColumnDef="type">
+ <mat-header-cell *matHeaderCellDef> Type </mat-header-cell>
+ <mat-cell *matCellDef="let variable"> {{ variable.type }} </mat-cell>
+ </ng-container>
+ <ng-container matColumnDef="value">
+ <mat-header-cell *matHeaderCellDef> Value </mat-header-cell>
+ <mat-cell *matCellDef="let variable"> {{ variable.value }} </mat-cell>
+ </ng-container>
+ <mat-header-row *matHeaderRowDef="displayedColumnsVariable"></mat-header-row>
+ <mat-row *matRowDef="let row; columns: displayedColumnsVariable;"></mat-row>
+ </mat-table>
+ </mat-tab>
+ </mat-tab-group>
+ </div>
+</div>
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.scss b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.scss new file mode 100644 index 0000000000..52ace2f328 --- /dev/null +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.scss @@ -0,0 +1,68 @@ +/**
+============LICENSE_START=======================================================
+ Copyright (C) 2018 Ericsson. All rights reserved.
+================================================================================
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+ limitations under the License.
+
+SPDX-License-Identifier: Apache-2.0
+============LICENSE_END=========================================================
+
+@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+*/
+
+#canvas {
+ background: white;
+ padding: 0;
+ margin: 0;
+ width: 70%;
+ height: 470px;
+ margin-top: 0;
+ box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
+}
+
+#besideCanvas {
+ background: white;
+ padding-left: 20px;
+ margin: 0;
+ width: 28%;
+ height: 470px;
+ margin-top: 0;
+ box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
+ font-family: 'Montserrat', sans-serif;
+ font-size: 17px;
+}
+
+.topCanvas {
+ display: flex;
+ justify-content: space-between;
+}
+
+.mat-column-durationInMillis {
+ flex: 0 0 8%;
+}
+
+.mat-column-name {
+ flex: 0 0 40%;
+}
+
+.mat-column-type {
+ flex: 0 0 8%;
+}
+
+.mat-column-value {
+ flex: 0 0 52%;
+}
+
+.highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
+ fill: cyan !important; /* color elements as green */
+ }
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.spec.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.spec.ts new file mode 100644 index 0000000000..690c143b5f --- /dev/null +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.spec.ts @@ -0,0 +1,47 @@ +/**
+============LICENSE_START=======================================================
+ Copyright (C) 2018 Ericsson. All rights reserved.
+================================================================================
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+ limitations under the License.
+
+SPDX-License-Identifier: Apache-2.0
+============LICENSE_END=========================================================
+
+@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+*/
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DetailsComponent } from './details.component';
+
+describe('DetailsComponent', () => {
+ let component: DetailsComponent;
+ let fixture: ComponentFixture<DetailsComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [DetailsComponent]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DetailsComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.ts new file mode 100644 index 0000000000..9561e9abf7 --- /dev/null +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/details/details.component.ts @@ -0,0 +1,157 @@ +/**
+============LICENSE_START=======================================================
+ Copyright (C) 2018 Ericsson. All rights reserved.
+================================================================================
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+ limitations under the License.
+
+SPDX-License-Identifier: Apache-2.0
+============LICENSE_END=========================================================
+
+@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+*/
+
+import { Component, OnInit } from '@angular/core';
+import { DataService } from '../data.service';
+import { ActivatedRoute, Router } from "@angular/router";
+import { Process } from '../model/process.model';
+import { ACTINST } from '../model/activityInstance.model';
+import { PII } from '../model/processInstance.model';
+import { PDI } from '../model/processDefinition.model';
+import { CommonModule } from '@angular/common';
+import Viewer from 'bpmn-js/lib/NavigatedViewer';
+import { ViewEncapsulation } from '@angular/core';
+import { MatTabsModule } from '@angular/material/tabs';
+import { VarInstance } from '../model/variableInstance.model';
+import { ToastrNotificationService } from '../toastr-notification-service.service';
+
+@Component({
+ selector: 'app-details',
+ templateUrl: './details.component.html',
+ styleUrls: ['./details.component.scss'],
+ encapsulation: ViewEncapsulation.None
+})
+
+export class DetailsComponent implements OnInit {
+
+ bpmnViewer: any;
+
+ processInstanceID: string;
+
+ processDefinitionID: string;
+
+ processDefinitionName: string;
+
+ activityInstance: ACTINST[];
+
+ processInstance: PII;
+
+ processDefinition: PDI;
+
+ variableInstance: VarInstance[];
+
+ displayedColumns = ['activityId', 'activityName', 'activityType', 'startTime', 'endTime', 'durationInMillis'];
+
+ displayedColumnsVariable = ['name', 'type', 'value'];
+
+ constructor(private route: ActivatedRoute, private data: DataService, private popup: ToastrNotificationService, private router: Router) { }
+
+ getActInst(procInstId: string) {
+ this.data.getActivityInstance(procInstId).subscribe(
+ (data: ACTINST[]) => {
+ this.activityInstance = data;
+ console.log(data);
+ }, error => {
+ console.log(error);
+ this.popup.error("Unable to get activity instance details for id: " + procInstId + " Error code:" + error.status);
+ });
+ }
+
+ async getProcessDefinition(procDefId) {
+ await this.data.getProcessDefinition(procDefId).subscribe(
+ async (data: PDI) => {
+ this.processDefinition = data;
+ console.log(data);
+ await this.displayCamundaflow(this.processDefinition.processDefinitionXml, this.activityInstance, this.router);
+ }, error => {
+ console.log(error);
+ this.popup.error("Unable to get process definition for id: " + procDefId + " Error code:" + error.status);
+ });
+ }
+
+ async getProcInstance(procInstId) {
+ await this.data.getProcessInstance(procInstId).then(
+ async (data: PII) => {
+ this.processInstance = data;
+ this.processDefinitionID = this.processInstance.processDefinitionId;
+ this.processDefinitionName = this.processInstance.processDefinitionName;
+ console.log("Process definition id: " + this.processDefinitionID);
+ await this.getActInst(this.processInstanceID);
+ await this.getProcessDefinition(this.processDefinitionID);
+ }, error => {
+ console.log(error);
+ this.popup.error("Unable to get process instance for id: " + procInstId + " Error code:" + error.status);
+ });
+ }
+
+ displayCamundaflow(bpmnXml, activities: ACTINST[], r: Router) {
+
+ this.bpmnViewer.importXML(bpmnXml, (error) => {
+ if (error) {
+ console.error('Unable to load BPMN flow ', error);
+ this.popup.error('Unable to load BPMN flow ');
+ } else {
+ let canvas = this.bpmnViewer.get('canvas');
+ var eventBus = this.bpmnViewer.get('eventBus');
+ eventBus.on('element.click', function(e) {
+
+ activities.forEach(a => {
+ if (a.activityId == e.element.id && a.calledProcessInstanceId !== null) {
+ console.log("will drill down to : " + a.calledProcessInstanceId);
+ r.navigate(['/details/' + a.calledProcessInstanceId]);
+ }
+ });
+ });
+ // zoom to fit full viewport
+ canvas.zoom('fit-viewport');
+ activities.forEach(a => {
+ canvas.addMarker(a.activityId, 'highlight');
+ });
+ }
+ });
+ }
+
+ getVarInst(procInstId) {
+ this.data.getVariableInstance(procInstId).subscribe(
+ (data: VarInstance[]) => {
+ this.variableInstance = data;
+ console.log(data);
+ }, error => {
+ console.log(error);
+ this.popup.error("Unable to get Variable instances for id: " + procInstId + " Error code:" + error.status);
+ });
+ }
+
+ async ngOnInit() {
+ this.bpmnViewer = new Viewer({
+ container: '.canvas'
+ });
+ this.route.params.subscribe(
+ async params => {
+ this.processInstanceID = params.id as string;
+ console.log("Will GET Process instanc using id: " + this.processInstanceID);
+ await this.getProcInstance(this.processInstanceID);
+
+ this.getVarInst(this.processInstanceID);
+ });
+ }
+}
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.html b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.html new file mode 100644 index 0000000000..6adea3b357 --- /dev/null +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.html @@ -0,0 +1,187 @@ +<!--
+============LICENSE_START=======================================================
+Copyright (C) 2018 Ericsson. All rights reserved.
+================================================================================
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+SPDX-License-Identifier: Apache-2.0
+============LICENSE_END=========================================================
+
+@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+-->
+
+<base href="/">
+
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<link rel="stylesheet" ng-href="./home.component.scss">
+<div class="completeForm">
+ <div class="searchArea">
+
+ <!-- Dropdown Filter and TextBox for Service Instance Id -->
+ <div class="container-home">
+ <mat-form-field class="selectFilter">
+ <mat-select class="formatBox" [(ngModel)]="searchData.selectedValueSII" name="sel" placeholder="Select Filter">
+ <mat-option *ngFor="let option of options" [value]="option.value">{{option.name}}</mat-option>
+ </mat-select>
+ </mat-form-field>
+ <mat-form-field class="valueInput">
+ <input matInput #searchValueSII type="text" [(ngModel)]="searchData.serviceInstanceId" placeholder="Service Instance Id">
+ </mat-form-field>
+ </div>
+
+ <!-- Dropdown Filter and TextBox for Request Id -->
+ <div class="container-home">
+ <mat-form-field class="selectFilter">
+ <mat-select class="formatBox" [(ngModel)]="searchData.selectedValueRI" name="sel" placeholder="Select Filter">
+ <mat-option *ngFor="let option of options" [value]="option.value">{{option.name}}</mat-option>
+ </mat-select>
+ </mat-form-field>
+ <mat-form-field class="valueInput">
+ <input matInput #searchValueRI type="text" [(ngModel)]="searchData.requestId" placeholder="Request Id">
+ </mat-form-field>
+
+ <!-- Angular Start Date Picker -->
+ <mat-form-field class="startDate">
+ <input matInput #startDate [matDatepicker]="picker" [(ngModel)]="searchData.startDate" placeholder="Choose a start date">
+ <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+ <mat-datepicker #picker></mat-datepicker>
+ </mat-form-field>
+
+ <!-- Dropdown box for Start Hour selection -->
+ <mat-form-field class="selectHour">
+ <mat-select class="formatBox" [(ngModel)]="searchData.selectedStartHour" name="hourFrom" placeholder="Select Hour">
+ <mat-option *ngFor="let option of hourOptions" [value]="option">{{option}}</mat-option>
+ </mat-select>
+ </mat-form-field>
+
+ <!-- Dropdown box for Start Minute selection -->
+ <mat-form-field class="selectMinute">
+ <mat-select class="formatBox" [(ngModel)]="searchData.selectedStartMinute" name="minuteFrom" placeholder="Select Minute">
+ <mat-option *ngFor="let option of minuteOptions" [value]="option">{{option}}</mat-option>
+ </mat-select>
+ </mat-form-field>
+ </div>
+
+ <!-- Dropdown Filter and TextBox for Service Name -->
+ <div class="container-home">
+ <mat-form-field class="selectFilter">
+ <mat-select class="formatBox" [(ngModel)]="searchData.selectedValueSN" name="sel" placeholder="Select Filter">
+ <mat-option *ngFor="let option of options" [value]="option.value">{{option.name}}</mat-option>
+ </mat-select>
+ </mat-form-field>
+ <mat-form-field class="valueInput">
+ <input matInput #searchValueSN type="text" [(ngModel)]="searchData.serviceInstanceName" placeholder="Service Name">
+ </mat-form-field>
+
+ <!-- Angular End Date Picker -->
+ <mat-form-field class="endDate">
+ <input matInput #endDate [matDatepicker]="endpicker" [(ngModel)]="searchData.endDate" placeholder="Choose an end date">
+ <mat-datepicker-toggle matSuffix [for]="endpicker"></mat-datepicker-toggle>
+ <mat-datepicker #endpicker></mat-datepicker>
+ </mat-form-field>
+
+ <!-- Dropdown box for End Hour selection -->
+ <mat-form-field class="selectHour">
+ <mat-select class="formatBox" [(ngModel)]="searchData.selectedEndHour" name="hourTo" placeholder="Select Hour">
+ <mat-option *ngFor="let option of hourOptions" [value]="option">{{option}}</mat-option>
+ </mat-select>
+ </mat-form-field>
+
+ <!-- Dropdown box for End Minute selection -->
+ <mat-form-field class="selectMinute">
+ <mat-select class="formatBox" [(ngModel)]="searchData.selectedEndMinute" name="minuteTo" placeholder="Select Minute">
+ <mat-option *ngFor="let option of minuteOptions" [value]="option">{{option}}</mat-option>
+ </mat-select>
+ </mat-form-field>
+ </div>
+
+ <!-- Dropdown Filter for Status -->
+ <div class="container-home">
+ <mat-form-field class="selectFilter">
+ <mat-select class="formatBox" [(ngModel)]="searchData.selectedValueSTATUS" name="sel" placeholder="Status">
+ <mat-option *ngFor="let statusOption of statusOptions" [value]="statusOption.value">{{ statusOption.name }}</mat-option>
+ </mat-select>
+ </mat-form-field>
+ </div>
+ <br />
+
+ <!-- Button to call makeCall() function to commence search based on parameters -->
+ <button (click)="makeCall()" class="fa fa-search"></button>
+ </div>
+
+ <br />
+
+ <!-- Table to display selected fields if data present -->
+ <div class="example-container mat-elevation-z8">
+ <mat-tab-group class="tab-group">
+ <mat-tab label="Service Instances">
+ <mat-table [dataSource]="processData">
+ <ng-container matColumnDef="requestId">
+ <mat-header-cell *matHeaderCellDef> Request Id </mat-header-cell>
+ <mat-cell *matCellDef="let process"><a routerLink="" (click)="getProcessIsntanceId(process.requestId)">{{ process.requestId }}</a></mat-cell>
+ </ng-container>
+ <ng-container matColumnDef="serviceInstanceId">
+ <mat-header-cell *matHeaderCellDef> Instance Id </mat-header-cell>
+ <mat-cell *matCellDef="let process"> {{ process.serviceInstanceId }} </mat-cell>
+ </ng-container>
+ <ng-container matColumnDef="serviceIstanceName">
+ <mat-header-cell *matHeaderCellDef> Instance Name </mat-header-cell>
+ <mat-cell *matCellDef="let process"> {{ process.serviceIstanceName }} </mat-cell>
+ </ng-container>
+ <ng-container matColumnDef="networkId">
+ <mat-header-cell *matHeaderCellDef> Network Id </mat-header-cell>
+ <mat-cell *matCellDef="let process"> {{ process.networkId }} </mat-cell>
+ </ng-container>
+ <ng-container matColumnDef="requestStatus">
+ <mat-header-cell *matHeaderCellDef> Request Status </mat-header-cell>
+ <mat-cell *matCellDef="let process"> {{ process.requestStatus }} </mat-cell>
+ </ng-container>
+ <ng-container matColumnDef="serviceType">
+ <mat-header-cell *matHeaderCellDef> Service Type </mat-header-cell>
+ <mat-cell *matCellDef="let process"> {{ process.serviceType }} </mat-cell>
+ </ng-container>
+ <ng-container matColumnDef="startTime">
+ <mat-header-cell *matHeaderCellDef> Start Time </mat-header-cell>
+ <mat-cell *matCellDef="let process"> {{ process.startTime }} </mat-cell>
+ </ng-container>
+ <ng-container matColumnDef="endTime">
+ <mat-header-cell *matHeaderCellDef> End Time </mat-header-cell>
+ <mat-cell *matCellDef="let process"> {{ process.endTime }} </mat-cell>
+ </ng-container>
+ <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+ <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+ </mat-table>
+ </mat-tab>
+
+ <mat-tab label="Service Statistics">
+ <div id="servStats">
+ <p>Total: {{ totalVal }}</p>
+ <hr/>
+ <p>Complete: {{ completeVal }}</p>
+ <p><b> {{ percentageComplete }}%</b></p>
+ <hr/>
+ <p>Failed: {{ failedVal }}</p>
+ <p><b> {{ percentageFailed }}%</b></p>
+ <hr/>
+ <p>In Progress: {{ inProgressVal }}</p>
+ <hr/>
+ <p>Pending: {{ pendingVal }}</p>
+ <hr/>
+ <p>Unlocked: {{ unlockedVal }}</p>
+ </div>
+ </mat-tab>
+ </mat-tab-group>
+ </div>
+</div>
+
+<router-outlet></router-outlet>
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.scss b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.scss new file mode 100644 index 0000000000..d475c52cb8 --- /dev/null +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.scss @@ -0,0 +1,130 @@ +/**
+============LICENSE_START=======================================================
+Copyright (C) 2018 Ericsson. All rights reserved.
+================================================================================
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+SPDX-License-Identifier: Apache-2.0
+============LICENSE_END=========================================================
+
+@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+*/
+
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";
+
+.searchArea {
+ background-color: white;
+ padding: 10px;
+ height: 345px;
+ box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
+}
+
+.mat-form-field-appearance-legacy .mat-form-field-wrapper {
+ padding-bottom: 1.25em;
+ font-family: 'Montserrat', sans-serif;
+}
+
+.selectFilter {
+ width: 120px;
+}
+
+.valueInput {
+ width: 400px;
+ margin-left: 30px;
+}
+
+.selectFilter.mat-select.ng-tns-c5-1.ng-star-inserted {
+ font-family: 'Montserrat', sans-serif;
+ font-size: 17px;
+}
+
+.mat-form-field-flex .valueInput {
+ font-family: 'Montserrat', sans-serif;
+ font-size: 17px;
+}
+
+.mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
+ color: #00285F;
+}
+
+.mat-option {
+ font-size: 17px;
+ line-height: 3em;
+ height: 3em;
+ font-family: 'Montserrat', sans-serif;
+}
+
+.mat-select-arrow {
+ color: #00285F;
+}
+
+.mat-form-field.mat-focused.mat-primary .mat-select-arrow {
+ color: #00285F;
+}
+
+.mat-form-field-appearance-legacy .mat-form-field-underline {
+ color: #00285F;
+}
+
+.fa {
+ float: left;
+ width: 120px;
+ padding: 10px;
+ background: #2196F3;
+ color: white;
+ height: 40px;
+ font-size: 17px;
+ border: 1px solid grey;
+ border-left: none;
+ cursor: pointer;
+}
+
+form.example button:hover {
+ background: #0b7dda;
+}
+
+form.example::after {
+ content: "";
+ clear: both;
+ display: table;
+}
+
+.formFields {
+ display: inline-flex;
+}
+
+.startDate, .endDate{
+ margin-left: 90px;
+ width: 140px;
+}
+
+.selectHour, .selectMinute{
+ margin-left: 30px;
+ width: 100px
+}
+
+#servStats{
+ background-color: white;
+ padding: 10px;
+ font-size: 17px;
+ font-family: 'Montserrat', sans-serif;
+}
+
+hr {
+ display: block;
+ height: 1px;
+ border: 0;
+ border-top: 1px solid #ccc;
+ margin: 1em 0;
+ padding: 0;
+}
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.spec.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.spec.ts new file mode 100644 index 0000000000..9da8ba93f1 --- /dev/null +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.spec.ts @@ -0,0 +1,47 @@ +/**
+============LICENSE_START=======================================================
+ Copyright (C) 2018 Ericsson. All rights reserved.
+================================================================================
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+ limitations under the License.
+
+SPDX-License-Identifier: Apache-2.0
+============LICENSE_END=========================================================
+
+@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+*/
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+ let component: HomeComponent;
+ let fixture: ComponentFixture<HomeComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [HomeComponent]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(HomeComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.ts new file mode 100644 index 0000000000..dd08bb4ae5 --- /dev/null +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/home/home.component.ts @@ -0,0 +1,128 @@ +/** +============LICENSE_START======================================================= + Copyright (C) 2018 Ericsson. All rights reserved. +================================================================================ +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and + limitations under the License. + +SPDX-License-Identifier: Apache-2.0 +============LICENSE_END========================================================= + +@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com +*/ + +import { Component, OnInit } from '@angular/core'; +import { DataService } from '../data.service'; +import { ActivatedRoute, Router } from "@angular/router"; +import { Process } from '../model/process.model'; + +import { ProcessInstanceId } from '../model/processInstanceId.model'; +import { ToastrNotificationService } from '../toastr-notification-service.service'; +import { MatSelectModule } from '@angular/material/select'; +import { ViewEncapsulation } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { MatFormFieldModule, MatInputModule } from '@angular/material'; +import { SearchData } from '../model/searchData.model'; +import { MatDatepickerModule } from '@angular/material/datepicker'; +import { FormControl } from '@angular/forms'; +import { SearchRequest } from '../model/SearchRequest.model'; +import { ViewChild } from '@angular/core'; +import { ElementRef } from '@angular/core'; +import { Input } from '@angular/core'; + +@Component({ + selector: 'app-home', + templateUrl: './home.component.html', + styleUrls: ['./home.component.scss'], + encapsulation: ViewEncapsulation.None +}) + +export class HomeComponent implements OnInit { + + totalVal = 0; + completeVal = 0; + inProgressVal = 0; + failedVal = 0; + pendingVal = 0; + unlockedVal = 0; + percentageComplete = 0; + percentageFailed = 0; + + options = [{ name: "EQUAL", value: "EQ" }, { name: "NOT EQUAL", value: "NEQ" }, { name: "LIKE", value: "LIKE" }]; + statusOptions = [{ name: "ALL", value: "ALL" }, { name: "COMPLETE", value: "COMPLETE" }, { name: "IN_PROGRESS", value: "IN_PROGRESS" }, + { name: "FAILED", value: "FAILED" }, { name: "PENDING", value: "PENDING" }, { name: "UNLOCKED", value: "UNLOCKED" }]; + + hourOptions = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", + "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]; + + minuteOptions = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", + "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", + "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", + "56", "57", "58", "59"]; + + processData: Process[]; + searchData: SearchData; + + startingDate: Date; + + displayedColumns = ['requestId', 'serviceInstanceId', 'serviceIstanceName', 'networkId', 'requestStatus', 'serviceType', 'startTime', 'endTime']; + + constructor(private route: ActivatedRoute, private data: DataService, + private router: Router, private popup: ToastrNotificationService) { + this.searchData = new SearchData(); + } + + makeCall() { + var search = this.searchData.getSearchRequest().subscribe((result: SearchRequest) => { + + this.data.retrieveInstance(result.getFilters(), result.getStartTimeInMilliseconds(), result.getEndTimeInMilliseconds()) + .subscribe((data: Process[]) => { + this.processData = data; + this.popup.info("Number of records found: " + data.length); + // Calculate Statistics for Service Statistics tab + this.completeVal = this.processData.filter(i => i.requestStatus === "COMPLETE").length; + this.inProgressVal = this.processData.filter(i => i.requestStatus === "IN_PROGRESS").length; + this.failedVal = this.processData.filter(i => i.requestStatus === "FAILED").length; + this.pendingVal = this.processData.filter(i => i.requestStatus === "PENDING").length; + this.unlockedVal = this.processData.filter(i => i.requestStatus === "UNLOCKED").length; + this.totalVal = this.processData.length; + this.percentageComplete = Math.round(((this.completeVal / this.totalVal) * 100) * 100) / 100; + this.percentageFailed = Math.round(((this.failedVal / this.totalVal) * 100) * 100) / 100; + + console.log("COMPLETE: " + this.completeVal); + console.log("FAILED: " + this.failedVal); + }, error => { + console.log(error); + this.popup.error("Unable to perform search Error code:" + error.status); + }); + }, error => { + console.log("Data validation error " + error); + this.popup.error(error); + }); + } + + getProcessIsntanceId(requestId: string) { + var response = this.data.getProcessInstanceId(requestId).subscribe((data) => { + if (data.status == 200) { + var processInstanceId = (data.body as ProcessInstanceId).processInstanceId; + this.router.navigate(['/details/' + processInstanceId]); + } else { + this.popup.error('No process instance id found: ' + requestId); + console.log('No process instance id found: ' + requestId); + } + }); + } + + ngOnInit() { + + } +} diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/http-error-handler.service.spec.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/http-error-handler.service.spec.ts new file mode 100644 index 0000000000..0ecdf15d9e --- /dev/null +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/http-error-handler.service.spec.ts @@ -0,0 +1,37 @@ +/**
+============LICENSE_START=======================================================
+ Copyright (C) 2018 Ericsson. All rights reserved.
+================================================================================
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+ limitations under the License.
+
+SPDX-License-Identifier: Apache-2.0
+============LICENSE_END=========================================================
+
+@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+*/
+
+import { TestBed, inject } from '@angular/core/testing';
+
+import { HttpErrorHandlerService } from './http-error-handler.service';
+
+describe('HttpErrorHandlerService', () => {
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ providers: [HttpErrorHandlerService]
+ });
+ });
+
+ it('should be created', inject([HttpErrorHandlerService], (service: HttpErrorHandlerService) => {
+ expect(service).toBeTruthy();
+ }));
+});
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/http-error-handler.service.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/http-error-handler.service.ts new file mode 100644 index 0000000000..16d274f16a --- /dev/null +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/http-error-handler.service.ts @@ -0,0 +1,53 @@ +/**
+============LICENSE_START=======================================================
+ Copyright (C) 2018 Ericsson. All rights reserved.
+================================================================================
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+ limitations under the License.
+
+SPDX-License-Identifier: Apache-2.0
+============LICENSE_END=========================================================
+
+@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+*/
+
+import { Injectable } from '@angular/core';
+import { ToastrNotificationService } from './toastr-notification-service.service';
+import { HttpErrorResponse } from '@angular/common/http';
+import { Observable, of, throwError } from 'rxjs';
+
+@Injectable({
+ providedIn: 'root'
+})
+/** Handles HttpClient errors */
+export class HttpErrorHandlerService {
+
+ constructor(private popup: ToastrNotificationService) { }
+
+ handleError(operation = 'operation', url = 'url') {
+ return (error: HttpErrorResponse) => {
+ if (error.error instanceof ErrorEvent) {
+ console.error('An error occurred:', error.error.message);
+ this.popup.error("An error occurred for operation: " + operation + " using url: " + url + " Detail: " + error.error.message);
+ return throwError("An error occurred for operation: " + operation);
+ }
+ if (error.status == 500 || error.status == 0) {
+ this.popup.error("Internal Service Error occured for operation: " + operation + " please check backend service log. status code: " + error.status);
+ }
+ console.error(
+ 'Backend returned code ${error.status}, ' +
+ 'body was: ${error.error}');
+ return throwError(error.error || "Internal Service Error occured for operation: " + operation + " please check backend service log. status code: " + error.status);
+ };
+
+ }
+}
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/SearchRequest.model.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/SearchRequest.model.ts new file mode 100644 index 0000000000..f68f164d0e --- /dev/null +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/SearchRequest.model.ts @@ -0,0 +1,42 @@ +
+/**
+============LICENSE_START=======================================================
+ Copyright (C) 2018 Ericsson. All rights reserved.
+================================================================================
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+ limitations under the License.
+
+SPDX-License-Identifier: Apache-2.0
+============LICENSE_END=========================================================
+
+@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+*/
+
+export class SearchRequest {
+
+ constructor(private filter: {}, private startTimeInMilliseconds: number, private endTimeInMilliseconds: number) {
+
+ }
+
+
+ public getFilters(): {} {
+ return this.filter;
+ }
+
+ public getStartTimeInMilliseconds(): number {
+ return this.startTimeInMilliseconds;
+ }
+
+ public getEndTimeInMilliseconds(): number {
+ return this.endTimeInMilliseconds;
+ }
+}
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/activityInstance.model.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/activityInstance.model.ts new file mode 100644 index 0000000000..de5e98367f --- /dev/null +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/activityInstance.model.ts @@ -0,0 +1,32 @@ +/**
+============LICENSE_START=======================================================
+ Copyright (C) 2018 Ericsson. All rights reserved.
+================================================================================
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+ limitations under the License.
+
+SPDX-License-Identifier: Apache-2.0
+============LICENSE_END=========================================================
+
+@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+*/
+
+export interface ACTINST {
+ activityId: string;
+ activityName: string;
+ activityType: string;
+ processInstanceId: string;
+ calledProcessInstanceId: string;
+ startTime: string;
+ endTime: string;
+ durationInMillis: string;
+}
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/process.model.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/process.model.ts new file mode 100644 index 0000000000..245981884a --- /dev/null +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/process.model.ts @@ -0,0 +1,32 @@ +/**
+============LICENSE_START=======================================================
+ Copyright (C) 2018 Ericsson. All rights reserved.
+================================================================================
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+ limitations under the License.
+
+SPDX-License-Identifier: Apache-2.0
+============LICENSE_END=========================================================
+
+@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+*/
+
+export interface Process {
+ requestId: string;
+ serviceInstanceId: string;
+ serviceIstanceName: string;
+ networkId: string;
+ requestStatus: string;
+ serviceType: string;
+ startTime: string;
+ endTime: string;
+}
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/processDefinition.model.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/processDefinition.model.ts new file mode 100644 index 0000000000..73eab7051b --- /dev/null +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/processDefinition.model.ts @@ -0,0 +1,26 @@ +/**
+============LICENSE_START=======================================================
+ Copyright (C) 2018 Ericsson. All rights reserved.
+================================================================================
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+ limitations under the License.
+
+SPDX-License-Identifier: Apache-2.0
+============LICENSE_END=========================================================
+
+@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+*/
+
+export interface PDI {
+ processDefinitionId: string;
+ processDefinitionXml: string;
+}
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/processInstance.model.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/processInstance.model.ts new file mode 100644 index 0000000000..b1338bbeae --- /dev/null +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/processInstance.model.ts @@ -0,0 +1,28 @@ +/**
+============LICENSE_START=======================================================
+ Copyright (C) 2018 Ericsson. All rights reserved.
+================================================================================
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+ limitations under the License.
+
+SPDX-License-Identifier: Apache-2.0
+============LICENSE_END=========================================================
+
+@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+*/
+
+export interface PII {
+ processInstancId: string;
+ processDefinitionId: string;
+ processDefinitionName: string;
+ superProcessInstanceId: string;
+}
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/processInstanceId.model.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/processInstanceId.model.ts new file mode 100644 index 0000000000..662da2c7d6 --- /dev/null +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/processInstanceId.model.ts @@ -0,0 +1,25 @@ +/**
+============LICENSE_START=======================================================
+ Copyright (C) 2018 Ericsson. All rights reserved.
+================================================================================
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+ limitations under the License.
+
+SPDX-License-Identifier: Apache-2.0
+============LICENSE_END=========================================================
+
+@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+*/
+
+export interface ProcessInstanceId {
+ processInstanceId: string;
+}
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/searchData.model.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/searchData.model.ts new file mode 100644 index 0000000000..4552590041 --- /dev/null +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/searchData.model.ts @@ -0,0 +1,105 @@ +import { ToastrNotificationService } from "../toastr-notification-service.service";
+
+/**
+============LICENSE_START=======================================================
+ Copyright (C) 2018 Ericsson. All rights reserved.
+================================================================================
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+ limitations under the License.
+
+SPDX-License-Identifier: Apache-2.0
+============LICENSE_END=========================================================
+
+@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+*/
+
+import { Observable, throwError, of } from 'rxjs';
+import { SearchRequest } from "./SearchRequest.model";
+export class SearchData {
+
+ public selectedValueSII = "EQ";
+ public selectedValueRI = "EQ";
+ public selectedValueSN = "EQ";
+ public selectedValueSTATUS = "ALL";
+
+ private now = Date.now();
+ // Minus 1 hour from current time for start date
+ public startDate = new Date(this.now - (1 * 60 * 60 * 1000));
+ public selectedStartHour = this.getNumberAsString(this.startDate.getHours());
+ public selectedStartMinute = this.getNumberAsString(this.startDate.getMinutes());
+
+ public endDate = new Date(this.now);
+ public selectedEndHour = this.getNumberAsString(this.endDate.getHours());
+ public selectedEndMinute = this.getNumberAsString(this.endDate.getMinutes());
+
+
+ public serviceInstanceId: string;
+ public requestId: string;
+ public serviceInstanceName: string;
+
+ private startTimeInMilliseconds: number;
+ private endTimeInMilliseconds: number;
+
+ constructor() {
+ }
+
+ public getSearchRequest(): Observable<SearchRequest> {
+ var searchFields = {};
+ if ((!this.startDate || this.startDate === null) || (!this.endDate || this.endDate === null)) {
+ console.error("Found either start time or end time null or undefined");
+ return throwError("Found end or start date empty, Please enter start and end date");
+ }
+
+ this.startDate.setHours(parseInt(this.selectedStartHour));
+ this.startDate.setMinutes(parseInt(this.selectedStartMinute));
+
+ this.endDate.setHours(parseInt(this.selectedEndHour));
+ this.endDate.setMinutes(parseInt(this.selectedEndMinute));
+
+ this.startTimeInMilliseconds = this.startDate.getTime();
+ this.endTimeInMilliseconds = this.endDate.getTime();
+
+ if (this.startTimeInMilliseconds > this.endTimeInMilliseconds) {
+ console.error("End time: " + this.endDate + " can not be greater then start time: " + this.startDate);
+ return throwError("End time: " + this.endDate + " can not be greater then start time: " + this.startDate);
+ }
+
+
+ if (!this.isEmpty(this.selectedValueSII) && !this.isEmpty(this.serviceInstanceId)) {
+ searchFields["serviceInstanceId"] = [this.selectedValueSII, this.serviceInstanceId]
+ }
+ if (!this.isEmpty(this.selectedValueRI) && !this.isEmpty(this.requestId)) {
+ searchFields["requestId"] = [this.selectedValueRI, this.requestId]
+ }
+ if (!this.isEmpty(this.selectedValueSN) && !this.isEmpty(this.serviceInstanceName)) {
+ searchFields["serviceInstanceName"] = [this.selectedValueSN, this.serviceInstanceName]
+ }
+
+ if (!this.isEmpty(this.selectedValueSTATUS) && this.selectedValueSTATUS !== "ALL") {
+ searchFields["requestStatus"] = ["EQ", this.selectedValueSTATUS]
+ }
+
+ return of(new SearchRequest(searchFields, this.startTimeInMilliseconds, this.endTimeInMilliseconds));
+ }
+
+ private isEmpty(str) {
+ return (!str || 0 === str.length);
+ }
+
+ private getNumberAsString(num: number) {
+ if (num <= 9) {
+ return "0" + num;
+ }
+ return "" + num;
+ }
+
+}
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/variableInstance.model.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/variableInstance.model.ts new file mode 100644 index 0000000000..4b9dec0aa4 --- /dev/null +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/model/variableInstance.model.ts @@ -0,0 +1,27 @@ +/**
+============LICENSE_START=======================================================
+ Copyright (C) 2018 Ericsson. All rights reserved.
+================================================================================
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+ limitations under the License.
+
+SPDX-License-Identifier: Apache-2.0
+============LICENSE_END=========================================================
+
+@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+*/
+
+export interface VarInstance {
+ name: string;
+ value: string;
+ type: string;
+}
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/sidebar/sidebar.component.html b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/sidebar/sidebar.component.html new file mode 100644 index 0000000000..e8b54d7ae3 --- /dev/null +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/sidebar/sidebar.component.html @@ -0,0 +1,29 @@ +<!--
+============LICENSE_START=======================================================
+ Copyright (C) 2018 Ericsson. All rights reserved.
+================================================================================
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+ limitations under the License.
+
+SPDX-License-Identifier: Apache-2.0
+============LICENSE_END=========================================================
+
+@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+-->
+
+<nav>
+ <ul>
+ <li>
+ <a routerLink="/">Home</a>
+ </li>
+ </ul>
+</nav>
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/sidebar/sidebar.component.scss b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/sidebar/sidebar.component.scss new file mode 100644 index 0000000000..b1a2c654ee --- /dev/null +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/sidebar/sidebar.component.scss @@ -0,0 +1,44 @@ +/**
+============LICENSE_START=======================================================
+ Copyright (C) 2018 Ericsson. All rights reserved.
+================================================================================
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+ limitations under the License.
+
+SPDX-License-Identifier: Apache-2.0
+============LICENSE_END=========================================================
+
+@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+*/
+nav {
+ background: #00285F;
+ height: 100%;
+ width: 90px;
+
+ ul {
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+
+ li {
+ a {
+ color: #fff;
+ padding: 20px;
+ display: block;
+ }
+
+ .activated {
+ background-color: #00a8ff;
+ }
+ }
+ }
+}
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/sidebar/sidebar.component.spec.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/sidebar/sidebar.component.spec.ts new file mode 100644 index 0000000000..df51723f98 --- /dev/null +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/sidebar/sidebar.component.spec.ts @@ -0,0 +1,47 @@ +/**
+============LICENSE_START=======================================================
+ Copyright (C) 2018 Ericsson. All rights reserved.
+================================================================================
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+ limitations under the License.
+
+SPDX-License-Identifier: Apache-2.0
+============LICENSE_END=========================================================
+
+@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+*/
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SidebarComponent } from './sidebar.component';
+
+describe('SidebarComponent', () => {
+ let component: SidebarComponent;
+ let fixture: ComponentFixture<SidebarComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [SidebarComponent]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(SidebarComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/sidebar/sidebar.component.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/sidebar/sidebar.component.ts new file mode 100644 index 0000000000..19985e79a3 --- /dev/null +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/sidebar/sidebar.component.ts @@ -0,0 +1,40 @@ +/**
+============LICENSE_START=======================================================
+ Copyright (C) 2018 Ericsson. All rights reserved.
+================================================================================
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+ limitations under the License.
+
+SPDX-License-Identifier: Apache-2.0
+============LICENSE_END=========================================================
+
+@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+*/
+
+import { Component, OnInit } from '@angular/core';
+import { Router, NavigationEnd } from '@angular/router';
+
+@Component({
+ selector: 'app-sidebar',
+ templateUrl: './sidebar.component.html',
+ styleUrls: ['./sidebar.component.scss']
+})
+
+export class SidebarComponent implements OnInit {
+
+ currentUrl: string;
+
+ constructor(private router: Router) {
+ router.events.subscribe((_: NavigationEnd) => this.currentUrl = _.url);
+ }
+ ngOnInit() { }
+}
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/toastr-notification-service.service.spec.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/toastr-notification-service.service.spec.ts new file mode 100644 index 0000000000..062cc905a4 --- /dev/null +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/toastr-notification-service.service.spec.ts @@ -0,0 +1,37 @@ +/**
+============LICENSE_START=======================================================
+ Copyright (C) 2018 Ericsson. All rights reserved.
+================================================================================
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+ limitations under the License.
+
+SPDX-License-Identifier: Apache-2.0
+============LICENSE_END=========================================================
+
+@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+*/
+
+import { TestBed, inject } from '@angular/core/testing';
+
+import { ToastrNotificationService } from './toastr-notification-service.service';
+
+describe('ToasterNotificationService', () => {
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ providers: [ToastrNotificationService]
+ });
+ });
+
+ it('should be created', inject([ToastrNotificationService], (service: ToastrNotificationService) => {
+ expect(service).toBeTruthy();
+ }));
+});
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/toastr-notification-service.service.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/toastr-notification-service.service.ts new file mode 100644 index 0000000000..65870493a4 --- /dev/null +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/toastr-notification-service.service.ts @@ -0,0 +1,59 @@ +/**
+============LICENSE_START=======================================================
+ Copyright (C) 2018 Ericsson. All rights reserved.
+================================================================================
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+ limitations under the License.
+
+SPDX-License-Identifier: Apache-2.0
+============LICENSE_END=========================================================
+
+@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+*/
+
+import { Injectable } from '@angular/core';
+declare var toastr: any
+@Injectable({
+ providedIn: 'root'
+})
+export class ToastrNotificationService {
+
+ constructor() { this.toastrSettings() }
+
+ error(message: string) {
+ toastr.error(message, "Error");
+ }
+
+ info(message: string) {
+ toastr.info(message, "Info");
+ }
+
+ toastrSettings() {
+ toastr.options = {
+ "closeButton": false,
+ "debug": false,
+ "newestOnTop": false,
+ "progressBar": false,
+ "positionClass": "toast-bottom-full-width",
+ "preventDuplicates": true,
+ "onclick": null,
+ "showDuration": "300",
+ "hideDuration": "1000",
+ "timeOut": "5000",
+ "extendedTimeOut": "1000",
+ "showEasing": "swing",
+ "hideEasing": "linear",
+ "showMethod": "fadeIn",
+ "hideMethod": "fadeOut"
+ }
+ }
+}
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/topbar/topbar.component.html b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/topbar/topbar.component.html new file mode 100644 index 0000000000..93d9074df0 --- /dev/null +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/topbar/topbar.component.html @@ -0,0 +1,25 @@ +<!--
+============LICENSE_START=======================================================
+ Copyright (C) 2018 Ericsson. All rights reserved.
+================================================================================
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+ limitations under the License.
+
+SPDX-License-Identifier: Apache-2.0
+============LICENSE_END=========================================================
+
+@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+-->
+
+<nav>
+ <h1><a class="navbar-brand">SO Monitoring</a></h1>
+</nav>
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/topbar/topbar.component.scss b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/topbar/topbar.component.scss new file mode 100644 index 0000000000..d7e6d1b3f8 --- /dev/null +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/topbar/topbar.component.scss @@ -0,0 +1,59 @@ +/**
+============LICENSE_START=======================================================
+ Copyright (C) 2018 Ericsson. All rights reserved.
+================================================================================
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+ limitations under the License.
+
+SPDX-License-Identifier: Apache-2.0
+============LICENSE_END=========================================================
+
+@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+*/
+.navbar-brand {
+ display: inline;
+ margin-right: 1rem;
+ font-size: 1.25rem;
+ line-height: inherit;
+ white-space: nowrap;
+}
+
+nav {
+ background: #00285F;
+ height: 40px;
+
+ ul {
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+
+ li {
+ a {
+ color: #fff;
+ padding: 20px;
+ display: block;
+ }
+
+ .activated {
+ background-color: #00a8ff;
+ }
+ }
+ }
+}
+
+h1 {
+ color: white;
+ text-indent: 90px;
+ padding-top: 0;
+ padding-bottom: 10px;
+ font-size: 1.9rem;
+}
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/topbar/topbar.component.spec.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/topbar/topbar.component.spec.ts new file mode 100644 index 0000000000..0bc691ca7e --- /dev/null +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/topbar/topbar.component.spec.ts @@ -0,0 +1,47 @@ +/**
+============LICENSE_START=======================================================
+ Copyright (C) 2018 Ericsson. All rights reserved.
+================================================================================
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+ limitations under the License.
+
+SPDX-License-Identifier: Apache-2.0
+============LICENSE_END=========================================================
+
+@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+*/
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TopbarComponent } from './topbar.component';
+
+describe('TopbarComponent', () => {
+ let component: TopbarComponent;
+ let fixture: ComponentFixture<TopbarComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [TopbarComponent]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(TopbarComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/topbar/topbar.component.ts b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/topbar/topbar.component.ts new file mode 100644 index 0000000000..1fdd258282 --- /dev/null +++ b/so-monitoring/so-monitoring-ui/src/main/frontend/src/app/topbar/topbar.component.ts @@ -0,0 +1,36 @@ +/**
+============LICENSE_START=======================================================
+ Copyright (C) 2018 Ericsson. All rights reserved.
+================================================================================
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+ limitations under the License.
+
+SPDX-License-Identifier: Apache-2.0
+============LICENSE_END=========================================================
+
+@authors: ronan.kenny@ericsson.com, waqas.ikram@ericsson.com
+*/
+
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-topbar',
+ templateUrl: './topbar.component.html',
+ styleUrls: ['./topbar.component.scss']
+})
+
+export class TopbarComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() { }
+}
|