Feature-9904: Enhancing NG-UI to enable Juju operational view dashboard
* NG-UI able to show the Juju Operational view dashboard of launched NS.
Change-Id: I9c7feadce8dbfca00e4e9321dffed3818a2e4510
Signed-off-by: Barath Kumar R <barath.r@tataelxsi.co.in>
diff --git a/src/app/instances/InstancesModule.ts b/src/app/instances/InstancesModule.ts
index 7e47d32..18c733c 100644
--- a/src/app/instances/InstancesModule.ts
+++ b/src/app/instances/InstancesModule.ts
@@ -39,6 +39,10 @@
import { NSInstancesComponent } from 'NSInstancesComponent';
import { NSPrimitiveComponent } from 'NSPrimitiveComponent';
import { NSTopologyComponent } from 'NSTopologyComponent';
+import { OperationalViewAppActionsComponent } from 'OperationalAppActionsComponent';
+import { OperationalViewAppConfigsComponent } from 'OperationalAppConfigsComponent';
+import { OperationalViewAppExecutedActionsComponent } from 'OperationalAppExecutedActionsComponent';
+import { OperationalViewComponent } from 'OperationalViewComponent';
import { PagePerRowModule } from 'PagePerRowModule';
import { PageReloadModule } from 'PageReloadModule';
import { PDUInstancesComponent } from 'PDUInstancesComponent';
@@ -100,6 +104,23 @@
projectInfo, { title: 'NSINSTANCES', url: '/instances/ns' }, { title: '{id}', url: null }]
},
component: NSTopologyComponent
+ },
+ {
+ path: 'operational-view',
+ data: {
+ breadcrumb: [{ title: 'PAGE.DASHBOARD.DASHBOARD', url: '/' }, { title: 'PAGE.DASHBOARD.PROJECTS', url: '/projects' },
+ projectInfo, { title: 'PAGE.OPERATIONALDASHBOARD.TITLE', url: null }]
+ },
+ component: OperationalViewComponent
+ },
+ {
+ path: 'operational-view/:id',
+ data: {
+ breadcrumb: [{ title: 'PAGE.DASHBOARD.DASHBOARD', url: '/' }, { title: 'PAGE.DASHBOARD.PROJECTS', url: '/projects' },
+ projectInfo, { title: 'PAGE.OPERATIONALDASHBOARD.TITLE', url: '/instances/operational-view' },
+ { title: '{id}', url: null }]
+ },
+ component: OperationalViewComponent
}
]
}
@@ -114,10 +135,17 @@
CodemirrorModule, CommonModule, Ng2SmartTableModule, FlexLayoutModule, RouterModule.forChild(routes), NgbModule,
NgSelectModule, PagePerRowModule, LoaderModule, SidebarModule.forRoot(), PageReloadModule],
declarations: [InstancesComponent, NSInstancesComponent, VNFInstancesComponent, PDUInstancesComponent, AddPDUInstancesComponent,
- NetsliceInstancesComponent, HistoryOperationsComponent, NSTopologyComponent, NSPrimitiveComponent],
+ NetsliceInstancesComponent, HistoryOperationsComponent, NSTopologyComponent, NSPrimitiveComponent, OperationalViewComponent,
+ OperationalViewAppConfigsComponent, OperationalViewAppActionsComponent, OperationalViewAppExecutedActionsComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
providers: [DataService],
- entryComponents: [NSPrimitiveComponent, AddPDUInstancesComponent]
+ entryComponents: [
+ NSPrimitiveComponent,
+ AddPDUInstancesComponent,
+ OperationalViewAppConfigsComponent,
+ OperationalViewAppActionsComponent,
+ OperationalViewAppExecutedActionsComponent
+ ]
})
/** Exporting a class @exports InstancesModule */
export class InstancesModule {
diff --git a/src/app/instances/ns-instances/NSInstancesComponent.ts b/src/app/instances/ns-instances/NSInstancesComponent.ts
index 3f20710..7b81d91 100644
--- a/src/app/instances/ns-instances/NSInstancesComponent.ts
+++ b/src/app/instances/ns-instances/NSInstancesComponent.ts
@@ -242,7 +242,8 @@
adminDetails: nsdInstanceData._admin,
vnfID: nsdInstanceData['vnfd-id'],
nsd: nsdInstanceData.nsd,
- 'nsd-id': nsdInstanceData['nsd-id']
+ 'nsd-id': nsdInstanceData['nsd-id'],
+ vcaStatus: nsdInstanceData.vcaStatus
};
this.nsInstanceData.push(nsDataObj);
});
diff --git a/src/app/operational-view/OperationalViewComponent.html b/src/app/operational-view/OperationalViewComponent.html
new file mode 100644
index 0000000..e23f6a4
--- /dev/null
+++ b/src/app/operational-view/OperationalViewComponent.html
@@ -0,0 +1,276 @@
+<!--
+Copyright 2020 TATA ELXSI
+
+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.
+
+Author: BARATH KUMAR R (barath.r@tataelxsi.co.in)
+-->
+<div class="row d-flex flex-row justify-content-between">
+ <div class="d-flex align-items-center header-style">{{ 'PAGE.OPERATIONALDASHBOARD.TITLE' | translate }}
+ ({{ 'PAGE.OPERATIONALDASHBOARD.MODELSUMMARY' | translate }})</div>
+ <page-reload></page-reload>
+</div>
+<div class="container-fluid p-0 m-0 mt-2">
+ <ng-container *ngIf="vcaDetails.length > 0 else noData">
+ <ngb-accordion #acc="ngbAccordion" class="juju-section" [closeOthers]="true" type="secondary"
+ activeIds="{{activeID}}">
+ <ngb-panel id="{{vcaDetail.ns_id}}" *ngFor="let vcaDetail of vcaDetails; let i = index;">
+ <ng-template ngbPanelHeader let-opened="opened">
+ <div class="d-flex align-items-center justify-content-between cursor-pointer title-bar"
+ (click)="acc.toggle(vcaDetail.ns_id);">
+ <span class="name-width">{{vcaDetail.vca_name}}</span>
+ <span class="id-width">{{vcaDetail.ns_id}}</span>
+ <button class="btn btn-sm btn-primary border-radius-default" placement="top" container="body"
+ ngbTooltip="{{ (opened ? 'CLOSE' : 'OPEN') | translate }}">
+ <i [ngClass]="{ 'fas': true, 'fa-angle-down': opened, 'fa-angle-right': !opened }"></i>
+ </button>
+ </div>
+ </ng-template>
+ <ng-template ngbPanelContent>
+ <div class="row">
+ <div class="col-lg-12 col-md-12 col-sm-12 p-1">
+ <div class="row my-2 justify-content-end align-items-center setting-section">
+ <div class="form-group row align-items-center mb-0">
+ <label class="col-form-label font-weight-bold text-primary">
+ {{ 'PAGE.OPERATIONALDASHBOARD.LIVELOAD' | translate}}
+ </label>
+ <!-- Live button switch -->
+ <label class="switch ml-1">
+ <input id="liveData{{i}}" type="checkbox" [checked]="vcaDetail.isLiveloading"
+ (change)="callLiveData($event.target.checked, vcaDetail.ns_id, i)">
+ <div class="slider round">
+ <span class="on">{{ 'ON' | translate }}</span>
+ <span class="off">{{ 'OFF' | translate }}</span>
+ </div>
+ </label>
+ <!-- Seconds button group -->
+ <div class="btn-group list action ml-2 seconds-btn-group" role="group"
+ *ngIf="vcaDetail.isLiveloading">
+ <button [disabled]="!vcaDetail.isLiveloading" type="button"
+ class="btn btn-primary"
+ [ngClass]="{'active': seconds.value === vcaDetail.timeOutSeconds}"
+ (click)="onSetTimerSelector(seconds.value, vcaDetail.ns_id, i)"
+ *ngFor="let seconds of setSeconds;">{{seconds.label}}</button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <ng-container *ngFor="let modelVCAStatus of vcaDetail.vcaStatusModels; let i = index;">
+ <h5 class="font-weight-bold text-primary">
+ {{ 'PAGE.OPERATIONALDASHBOARD.MODEL' | translate }} {{i+1}} (Cloud/Region):
+ {{modelVCAStatus.model ? modelVCAStatus.model.cloud_tag : '-'}}/
+ {{modelVCAStatus.model ? modelVCAStatus.model.region : '-' }}
+ </h5>
+ <div class="row">
+ <div class="col-lg-12 col-md-12 col-sm-12 p-1">
+ <div class="row my-2 justify-content-between align-items-center filter-actions">
+ <div class="form-group row align-items-center mb-0">
+ <button class="btn btn-sm btn-outline-primary mx-1 filter{{i}} all{{i}} active"
+ type="button" (click)="showHideTables($event.target, 'all', i)">
+ {{ 'ALL' | translate }}
+ </button>
+ <button class="btn btn-sm btn-outline-primary mx-1 filter{{i}} app{{i}}"
+ type="button" (click)="showHideTables($event.target, 'app', i)"
+ *ngIf="modelVCAStatus.applications.length > 0">
+ {{ 'PAGE.OPERATIONALDASHBOARD.APPLICATIONTITLE' | translate }} -
+ {{modelVCAStatus.applications.length > 0 ?
+ modelVCAStatus.applications.length : 0}}
+ </button>
+ <button class="btn btn-sm btn-outline-primary mx-1 filter{{i}} unit{{i}}"
+ type="button" (click)="showHideTables($event.target, 'unit', i)"
+ *ngIf="modelVCAStatus.units.length > 0">
+ {{ 'PAGE.OPERATIONALDASHBOARD.UNITSTITLE' | translate }} -
+ {{modelVCAStatus.units.length > 0 ? modelVCAStatus.units.length : 0}}
+ </button>
+ <button class="btn btn-sm btn-outline-primary mx-1 filter{{i}} machine{{i}}"
+ type="button" (click)="showHideTables($event.target, 'machine', i)"
+ *ngIf="modelVCAStatus.machines.length > 0">
+ {{ 'PAGE.OPERATIONALDASHBOARD.MACHINETITLE' | translate }} -
+ {{modelVCAStatus.machines.length > 0 ? modelVCAStatus.machines.length : 0}}
+ </button>
+ <button class="btn btn-sm btn-outline-primary mx-1 filter{{i}} relation{{i}}"
+ type="button" (click)="showHideTables($event.target, 'relation', i)"
+ *ngIf="modelVCAStatus.relations.length > 0">
+ {{ 'PAGE.OPERATIONALDASHBOARD.RELATIONS' | translate }} -
+ {{modelVCAStatus.relations.length > 0 ? modelVCAStatus.relations.length :
+ 0}}
+ </button>
+ </div>
+ <div class="form-group row align-items-center mb-0"
+ *ngIf="modelVCAStatus.executedActions !== undefined && modelVCAStatus.executedActions.length > 0">
+ <label class="col-form-label font-weight-bold text-primary">
+ {{ 'EXECUTEDACTIONS' | translate }}
+ </label>
+ <button type="button"
+ class="btn btn-sm btn-primary border border-radius-default ml-1"
+ (click)="showExecutedActionsList(modelVCAStatus.executedActions);">
+ <i class="fas fa-directions"></i>
+ </button>
+ </div>
+ </div>
+ <!-- Apps section -->
+ <table class="table table-sm filterTable{{i}} app{{i}}" id="app{{i}}"
+ *ngIf="modelVCAStatus.applications.length > 0">
+ <thead>
+ <tr>
+ <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.APPLICATION' | translate }}
+ </th>
+ <th scope="col">{{ 'STATUS' | translate }}</th>
+ <th scope="col">{{ 'SCALE' | translate }}</th>
+ <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.CHARM' | translate }}</th>
+ <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.STORE' | translate }}</th>
+ <th scope="col">{{ 'ACTIONS' | translate }}</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngFor="let application of modelVCAStatus.applications">
+ <th scope="row">
+ <i class="active-icon fa-circle"
+ [ngClass]="application.status ? application.status === 'active' ? 'fas text-success': application.status === 'waiting' ? 'fas text-warning' : application.status === 'blocked' ? 'fas text-danger' : 'far': ''">
+ </i>
+ {{application.app_id ? application.app_id : '-' }}
+ </th>
+ <td>{{application.status ? application.status : '-' }}</td>
+ <td>{{application.scale ? application.scale : 0 }}</td>
+ <td>{{application.charm ? application.charm : '-' }}</td>
+ <td>{{application.store ? application.store : '-' }}</td>
+ <td>
+ <div class="btn-group list action" role="group">
+ <button type="button" class="btn btn-primary"
+ (click)="showConfigList(application.configs);" placement="top"
+ container="body" ngbTooltip="{{ 'CONFIG' | translate }}"
+ [disabled]="application.configs === null">
+ <i class="fas fa-cogs"></i>
+ </button>
+ <button type="button" class="btn btn-primary"
+ (click)="showActionsList(application.actions);" placement="top"
+ container="body" ngbTooltip="{{ 'ACTIONS' | translate }}"
+ [disabled]="application.actions === null">
+ <i class="fas fa-receipt"></i>
+ </button>
+ </div>
+ </td>
+ </tr>
+ <tr class="text-center" *ngIf="modelVCAStatus.applications.length === 0">
+ <td colspan="7">{{ 'PAGE.OPERATIONALDASHBOARD.NOAPPLICATION' | translate }}
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <!-- Units section -->
+ <table class="table table-sm filterTable{{i}} unit{{i}}" id="unit{{i}}"
+ *ngIf="modelVCAStatus.units.length > 0">
+ <thead>
+ <tr>
+ <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.UNITS' | translate }}</th>
+ <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.WORKLOAD' | translate }}</th>
+ <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.AGENT' | translate }}</th>
+ <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.MACHINE' | translate }}</th>
+ <th scope="col">
+ {{ 'PUBLICADDRESS' | translate }} /
+ {{ 'PAGE.OPERATIONALDASHBOARD.ADDRESS' | translate }}
+ </th>
+ <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.MESSAGE' | translate }}</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngFor="let unit of modelVCAStatus.units">
+ <th scope="row">
+ <i class="active-icon fa-circle"
+ [ngClass]="unit.workload_status ? unit.workload_status.status === 'active' ? 'fas text-success': unit.workload_status.status === 'waiting' ? 'fas text-warning' : unit.workload_status.status === 'blocked' ? 'fas text-danger' : 'far': ''">
+ </i>
+ {{unit.unit_id ? unit.unit_id : '-'}} {{unit.leader !== null ? '(' +
+ ('PAGE.OPERATIONALDASHBOARD.LEADER' | translate) + ')' : '' }}
+ </th>
+ <td>{{unit.workload_status ? unit.workload_status.status : '-'}}</td>
+ <td>{{unit.agent_status ? unit.agent_status.status : '-'}}</td>
+ <td>{{unit.machine ? unit.machine : '-'}}</td>
+ <td>
+ {{unit.public_address ? unit.public_address : unit.address ?
+ unit.address : '-'}}
+ </td>
+ <td>{{unit.workload_status ? unit.workload_status.info : '-'}}</td>
+ </tr>
+ <tr class="text-center" *ngIf="modelVCAStatus.units.length === 0">
+ <td colspan="7">{{ 'PAGE.OPERATIONALDASHBOARD.NOUNITS' | translate }}</td>
+ </tr>
+ </tbody>
+ </table>
+ <!-- Machines section -->
+ <table class="table table-sm filterTable{{i}} machine{{i}}" id="machine{{i}}"
+ *ngIf="modelVCAStatus.machines.length > 0">
+ <thead>
+ <tr>
+ <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.MACHINE' | translate }}</th>
+ <th scope="col">State</th>
+ <th scope="col">DNS</th>
+ <th scope="col">Instance ID</th>
+ <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.SERIES' | translate }}</th>
+ <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.MESSAGE' | translate }}</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngFor="let machines of modelVCAStatus.machines">
+ <th scope="row">{{machines.id_ ? machines.id_ : '-'}}</th>
+ <td>{{machines.agent_status ? machines.agent_status.status : '-'}}</td>
+ <td>{{machines.dns_name !== null ? machines.dns_name : '-'}}</td>
+ <td>{{machines.instance_id ? machines.instance_id : '-'}}</td>
+ <td>{{machines.series ? machines.series : '-'}}</td>
+ <td>{{machines.instance_status ? machines.instance_status.info : '-'}}</td>
+ </tr>
+ <tr class="text-center" *ngIf="modelVCAStatus.machines.length === 0">
+ <td colspan="6">
+ {{ 'PAGE.OPERATIONALDASHBOARD.NOMACHINES' | translate }}
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <!-- Relations section -->
+ <table class="table table-sm filterTable{{i}} relation{{i}}" id="relation{{i}}"
+ *ngIf="modelVCAStatus.relations.length > 0">
+ <thead>
+ <tr>
+ <th scope="col">
+ {{ 'PAGE.OPERATIONALDASHBOARD.RELATIONPROVIDER' | translate }}
+ </th>
+ <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.REQUIRER' | translate }}</th>
+ <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.INTERFACE' | translate }}</th>
+ <th scope="col">{{ 'TYPE' | translate }}</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngFor="let relation of modelVCAStatus.relations">
+ <th scope="row">{{relation.key ? relation.key : '-'}}</th>
+ <td>{{relation.key ? relation.key : '-'}}</td>
+ <td>{{relation.interface ? relation.interface : '-'}}</td>
+ <td>{{relation.endpoints[0].role ? relation.endpoints[0].role : '-'}}</td>
+ </tr>
+ <tr class="text-center" *ngIf="modelVCAStatus.relations.length === 0">
+ <td colspan="4">{{ 'PAGE.OPERATIONALDASHBOARD.NORELATIONS' | translate }}
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </ng-container>
+ </ng-template>
+ </ngb-panel>
+ </ngb-accordion>
+ </ng-container>
+ <ng-template #noData>
+ <h5 class="text-center">{{ 'NODATA' | translate }}</h5>
+ </ng-template>
+</div>
+<app-loader [waitingMessage]="message" *ngIf="isLoadingResults"></app-loader>
\ No newline at end of file
diff --git a/src/app/operational-view/OperationalViewComponent.ts b/src/app/operational-view/OperationalViewComponent.ts
new file mode 100644
index 0000000..9d6c1fe
--- /dev/null
+++ b/src/app/operational-view/OperationalViewComponent.ts
@@ -0,0 +1,396 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ 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.
+
+ Author: BARATH KUMAR R (barath.r@tataelxsi.co.in)
+*/
+
+/**
+ * @file Page for Operational View Component
+ */
+import { Component, Injector, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateService } from '@ngx-translate/core';
+import { CONSTANTNUMBER, ERRORDATA } from 'CommonModel';
+import { environment } from 'environment';
+import * as HttpStatus from 'http-status-codes';
+import { OperationalViewAppActionsComponent } from 'OperationalAppActionsComponent';
+import { OperationalViewAppConfigsComponent } from 'OperationalAppConfigsComponent';
+import { OperationalViewAppExecutedActionsComponent } from 'OperationalAppExecutedActionsComponent';
+import { EXECUTEDACTIONS, MACHINES, SET_TIMER, SETMODELS, SETTIMER, VCAAPPLICATIONS, VCADETAILS, VCASTATUS, VCAUNITS } from 'OperationalModel';
+import { RestService } from 'RestService';
+import { Observable } from 'rxjs';
+import { Subscription } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { SharedService } from 'SharedService';
+import { isNullOrUndefined } from 'util';
+/**
+ * Creating component
+ * @Component takes OperationalViewComponent.html as template url
+ */
+@Component({
+ selector: 'app-operational-view',
+ templateUrl: './OperationalViewComponent.html'
+})
+/** Exporting a class @exports OperationalViewComponent */
+export class OperationalViewComponent implements OnInit {
+ /** Invoke service injectors @public */
+ public injector: Injector;
+
+ /** Check the loading results @public */
+ public isLoadingResults: boolean = false;
+
+ /** Give the message for the loading @public */
+ public message: string = 'PLEASEWAIT';
+
+ /** Formation of appropriate Data for vcaStatus Details @public */
+ public vcaDetails: VCADETAILS[] = [];
+
+ /** Contains all methods related to shared @public */
+ public sharedService: SharedService;
+
+ /** Utilizes rest service for any CRUD operations @public */
+ public restService: RestService;
+
+ /** variables contains activeID @public */
+ public activeID: string = null;
+
+ /** variables contains NS Instances ID @public */
+ public instancesID: string = null;
+
+ /** variables contains URL of operational Dashboard @public */
+ public openURL: string = 'instances/operational-view/';
+
+ /** variables contains default seconds for the timeout @public */
+ public timeOutDefaultSeconds: number = CONSTANTNUMBER.timeOutDefaultSeconds;
+
+ /** variables contains minimum seconds for the timeout @public */
+ public minSeconds: number = 5;
+
+ /** variables contains maximum seconds for the timeout @public */
+ public maxSeconds: number = 60;
+
+ /** variables contains timer calculation value of milliseconds @public */
+ public timeDefaultCal: number = 1000;
+
+ /** variables contains timeout @public */
+ public timeOut: number;
+
+ /** Set the timer button @public */
+ // tslint:disable-next-line: no-magic-numbers
+ public setSeconds: SETTIMER[] = SET_TIMER;
+
+ /** Instance of subscriptions @private */
+ private generateDataSub: Subscription;
+
+ /** Contains tranlsate instance @private */
+ private translateService: TranslateService;
+
+ /** Holds teh instance of AuthService class of type AuthService @private */
+ private activatedRoute: ActivatedRoute;
+
+ /** Instance of the modal service @private */
+ private modalService: NgbModal;
+
+ /** creates Operational view component */
+ constructor(injector: Injector) {
+ this.injector = injector;
+ this.restService = this.injector.get(RestService);
+ this.sharedService = this.injector.get(SharedService);
+ this.translateService = this.injector.get(TranslateService);
+ this.activatedRoute = this.injector.get(ActivatedRoute);
+ this.modalService = this.injector.get(NgbModal);
+ }
+
+ /**
+ * Lifecyle Hooks the trigger before component is instantiate
+ */
+ public ngOnInit(): void {
+ // tslint:disable-next-line:no-backbone-get-set-outside-model
+ this.instancesID = this.activatedRoute.snapshot.paramMap.get('id');
+ this.generateData();
+ this.generateDataSub = this.sharedService.dataEvent.subscribe((): void => { this.generateData(); });
+ }
+ /** Fetching the juju vca_status data from API and Load it in the respective table @public */
+ public generateData(): void {
+ this.clearTimeoutAndInterval();
+ this.modalService.dismissAll();
+ this.isLoadingResults = true;
+ this.vcaDetails = [];
+ let NSURL: string = environment.NSDINSTANCES_URL;
+ if (this.instancesID !== null) {
+ NSURL = NSURL + '/' + this.instancesID;
+ this.generateIndividualNSData(NSURL);
+ } else {
+ this.generateAllNSData(NSURL);
+ }
+ }
+ /**
+ * Show all NS Data that contains the juju vca_status from API and Load it in the table @public
+ * @param NSURL : osm/nslcm/v1/ns_instances
+ */
+ public generateAllNSData(NSURL: string): void {
+ this.restService.getResource(NSURL).subscribe((operationalList: VCASTATUS[]): void => {
+ if (operationalList.length > 0) {
+ operationalList.forEach((list: VCASTATUS): void => {
+ if (!isNullOrUndefined(list.vcaStatus)) {
+ const getVCAStatusDetails: VCADETAILS = this.vcaDetailsData(list, false, this.timeOutDefaultSeconds);
+ this.vcaDetails.push(getVCAStatusDetails);
+ }
+ });
+ if (this.activeID === null && this.vcaDetails.length > 0) {
+ this.activeID = this.vcaDetails[0].ns_id;
+ }
+ }
+ this.isLoadingResults = false;
+ }, (error: ERRORDATA): void => {
+ this.isLoadingResults = false;
+ this.restService.handleError(error, 'get');
+ });
+ }
+ /**
+ * Show the individual NS Data that contains the juju vca_status from generateNSData method and Load it in the table @public
+ * @param NSURL : osm/nslcm/v1/ns_instances/<ID>
+ */
+ public generateIndividualNSData(NSURL: string): void {
+ this.generateNSData(NSURL, false, this.timeOutDefaultSeconds).subscribe((getVCAStatusDetails: VCADETAILS): void => {
+ this.vcaDetails.push(getVCAStatusDetails);
+ if (this.activeID === null && this.vcaDetails.length > 0) {
+ this.activeID = this.instancesID;
+ }
+ this.isLoadingResults = false;
+ }, (error: ERRORDATA): void => {
+ this.isLoadingResults = false;
+ this.restService.handleError(error, 'get');
+ });
+ }
+ /**
+ * Fetching the Individual NS Data that contains the juju vca_status from API and return the VCADetails @public
+ * @param NSURL : osm/nslcm/v1/ns_instances/<ID>
+ * @param liveData : Needs to repeat the httprequest
+ * @param timeOutSeconds : set the timeout seconds to trigger the httprequest
+ */
+ public generateNSData(NSURL: string, liveData: boolean, timeOutSeconds: number): Observable<VCADETAILS> {
+ if (liveData) {
+ NSURL = NSURL + '?vcaStatusRefresh=true';
+ }
+ return this.restService.getResource(NSURL).pipe(map((operationalList: VCASTATUS): VCADETAILS => {
+ return this.vcaDetailsData(operationalList, liveData, timeOutSeconds);
+ }));
+ }
+ /**
+ * Form the VCA Details for each NS Instances
+ */
+ public formVCADetails(getData: VCADETAILS): VCADETAILS {
+ return {
+ isLiveloading: getData.isLiveloading,
+ ns_id: getData.ns_id,
+ vcaStatusModels: getData.vcaStatusModels,
+ timeOutSeconds: getData.timeOutSeconds,
+ vca_id: getData.vca_id,
+ vca_name: getData.vca_name
+ };
+ }
+ /**
+ * Assign the VCA Status of Multiple model in getModels array for each NS Instance
+ */
+ public assignVCAStatusOfEachModel(getData: SETMODELS): SETMODELS {
+ return {
+ applications: getData.applications,
+ branches: getData.branches,
+ controller_timestamp: getData.controller_timestamp,
+ executedActions: getData.executedActions,
+ machines: getData.machines,
+ model: getData.model,
+ offers: getData.offers,
+ relations: getData.relations,
+ remote_applications: getData.remote_applications,
+ units: getData.units,
+ unknown_fields: getData.unknown_fields
+ };
+ }
+ /**
+ * Use to fetch the vcaDetails from vca_status @public
+ */
+ public vcaDetailsData(list: VCASTATUS, liveData: boolean, timeOutSeconds: number): VCADETAILS {
+ const assignVCADetails: VCADETAILS[] = [];
+ const setModels: SETMODELS[] = [];
+ const assignNSInstancesID: string = list.id;
+ Object.keys(list.vcaStatus).forEach((key: string): void => {
+ const vcaApplication: VCAAPPLICATIONS[] = this.appData(list.vcaStatus[key].applications);
+ const vcaUnits: VCAUNITS[] = this.unitsData(vcaApplication);
+ const vcaMachines: MACHINES[] = this.machinesData(list.vcaStatus[key].machines);
+ list.vcaStatus[key].units = vcaUnits;
+ list.vcaStatus[key].applications = vcaApplication;
+ list.vcaStatus[key].machines = vcaMachines;
+ list.vcaStatus[key].relations = list.vcaStatus[key].relations;
+ list.vcaStatus[key].model = list.vcaStatus[key].model;
+ const getEachModelData: SETMODELS = this.assignVCAStatusOfEachModel(list.vcaStatus[key]);
+ setModels.push(getEachModelData);
+ list.vcaStatus[assignNSInstancesID].vca_id = key;
+ list.vcaStatus[assignNSInstancesID].vca_name = list.name;
+ list.vcaStatus[assignNSInstancesID].ns_id = list.id;
+ list.vcaStatus[assignNSInstancesID].isLiveloading = liveData;
+ list.vcaStatus[assignNSInstancesID].timeOutSeconds = timeOutSeconds;
+ list.vcaStatus[assignNSInstancesID].vcaStatusModels = setModels;
+ const getAssignedData: VCADETAILS = this.formVCADetails(list.vcaStatus[assignNSInstancesID]);
+ assignVCADetails.push(getAssignedData);
+ });
+ return assignVCADetails[0];
+ }
+ /**
+ * Use to fetch the app data from vca_status @public
+ */
+ public appData(applicationData: VCAAPPLICATIONS): VCAAPPLICATIONS[] {
+ const vcaApplication: VCAAPPLICATIONS[] = [];
+ Object.keys(applicationData).forEach((applicationKey: string): void => {
+ const charmSplitlist: string[] = applicationData[applicationKey].charm.split('/');
+ const status: string = applicationData[applicationKey].status.status;
+ const charm: string = charmSplitlist[1].substr(0, charmSplitlist[1].lastIndexOf('-'));
+ const store: string = charmSplitlist[0].substr(0, charmSplitlist[0].lastIndexOf(':'));
+ applicationData[applicationKey].app_id = applicationKey;
+ applicationData[applicationKey].charm = charm;
+ applicationData[applicationKey].status = status;
+ applicationData[applicationKey].scale = Object.keys(applicationData[applicationKey].units).length;
+ applicationData[applicationKey].store = store;
+ applicationData[applicationKey].configs = !isNullOrUndefined(applicationData[applicationKey].configs) ?
+ applicationData[applicationKey].configs : null;
+ applicationData[applicationKey].actions = !isNullOrUndefined(applicationData[applicationKey].actions) ?
+ applicationData[applicationKey].actions : null;
+ vcaApplication.push(applicationData[applicationKey]);
+ });
+ return vcaApplication;
+ }
+ /**
+ * Use to fetch the units data from vca_status @public
+ */
+ public unitsData(applicationData: VCAAPPLICATIONS[]): VCAUNITS[] {
+ const vcaUnits: VCAUNITS[] = [];
+ applicationData.forEach((applicationList: VCAAPPLICATIONS): void => {
+ Object.keys(applicationList.units).forEach((unitsKey: string): void => {
+ applicationList.units[unitsKey].unit_id = unitsKey;
+ vcaUnits.push(applicationList.units[unitsKey]);
+ });
+ });
+ return vcaUnits;
+ }
+ /**
+ * Use to fetch the machines data from vca_status @public
+ */
+ public machinesData(machinesData: MACHINES[]): MACHINES[] {
+ const vcaMachines: MACHINES[] = [];
+ Object.keys(machinesData).forEach((machineKey: string): void => {
+ vcaMachines.push(machinesData[machineKey]);
+ });
+ return vcaMachines;
+ }
+ /** Show the Config list in modal using modalservice @public */
+ public showExecutedActionsList(executeActionsList: EXECUTEDACTIONS[]): void {
+ this.modalService.open(OperationalViewAppExecutedActionsComponent, { size: 'xl', backdrop: 'static' })
+ .componentInstance.params = { executedActions: executeActionsList };
+ }
+ /** Show the Config list in modal using modalservice @public */
+ public showConfigList(configList: object): void {
+ this.modalService.open(OperationalViewAppConfigsComponent, { size: 'xl', backdrop: 'static' })
+ .componentInstance.params = { configs: configList };
+ }
+ /** Show the Config list in modal using modalservice @public */
+ public showActionsList(actionsList: object): void {
+ this.modalService.open(OperationalViewAppActionsComponent, { size: 'xl', backdrop: 'static' })
+ .componentInstance.params = { actions: actionsList };
+ }
+ /** Call the live data to fetch the latest results @public */
+ public callLiveData(isChecked: boolean, getNSID: string, index: number): void {
+ this.vcaDetails[index].isLiveloading = isChecked;
+ if (isChecked) {
+ this.stopExistingModelLiveLoading(getNSID);
+ this.generateRefreshedData(getNSID, index, this.vcaDetails[index].timeOutSeconds);
+ } else {
+ this.clearTimeoutAndInterval();
+ }
+ }
+ /** Fetching the juju vca_status data from API and Load it in the respective model @public */
+ public generateRefreshedData(getNSID: string, index: number, secondsValue: number): void {
+ this.modalService.dismissAll();
+ const liveDataURL: string = environment.NSDINSTANCES_URL + '/' + getNSID;
+ this.generateNSData(liveDataURL, true, secondsValue).subscribe((getVCAStatusDetails: VCADETAILS): void => {
+ this.vcaDetails[index] = getVCAStatusDetails;
+ this.callSetTimeOut(getNSID, index, secondsValue);
+ }, (error: ERRORDATA): void => {
+ this.restService.handleError(error, 'get');
+ if (error.error.status === HttpStatus.NOT_FOUND) {
+ this.vcaDetails.splice(index, 1);
+ }
+ this.clearTimeoutAndInterval();
+ });
+ }
+ /** Call the setimeout to refresh the all models data in regular timeout @public */
+ public callSetTimeOut(id: string, index: number, secondsValue: number): void {
+ this.clearTimeoutAndInterval();
+ this.timeOut = window.setTimeout((): void => {
+ this.generateRefreshedData(id, index, secondsValue);
+ }, secondsValue * this.timeDefaultCal);
+ }
+ /** Stop existing model live reload @public */
+ public stopExistingModelLiveLoading(getNSID: string): void {
+ this.clearTimeoutAndInterval();
+ this.vcaDetails.forEach((vcaDetail: VCADETAILS, i: number): void => {
+ if (vcaDetail.ns_id !== getNSID) {
+ vcaDetail.isLiveloading = false;
+ }
+ });
+ }
+ /** Method to show/hide the tables @public */
+ public showHideTables(event: HTMLElement, getTableName: string, index: number): void {
+ let selectedClassName: string = getTableName + index;
+ if (selectedClassName === 'all' + index) {
+ selectedClassName = '';
+ }
+ document.querySelectorAll('.filter' + index).forEach((button: HTMLElement): void => {
+ button.classList.remove('active');
+ if (selectedClassName !== '') {
+ if (button.classList.contains(selectedClassName)) {
+ button.classList.add('active');
+ }
+ } else if (button.classList.contains('all' + index)) {
+ button.classList.add('active');
+ }
+ });
+ document.querySelectorAll('.filterTable' + index).forEach((table: HTMLElement): void => {
+ table.classList.remove('hide');
+ if (selectedClassName !== '') {
+ if (!table.classList.contains(selectedClassName)) {
+ table.classList.add('hide');
+ }
+ }
+ });
+ }
+ /** Get the timer selected @public */
+ public onSetTimerSelector(getSeconds: number, nsID: string, index: number): void {
+ this.vcaDetails[index].timeOutSeconds = getSeconds;
+ this.callLiveData(true, nsID, index);
+ }
+ /** Clear settimeOut and setinterval @public */
+ public clearTimeoutAndInterval(): void {
+ clearTimeout(this.timeOut);
+ }
+ /**
+ * Lifecyle hook which get trigger on component destruction
+ */
+ public ngOnDestroy(): void {
+ this.clearTimeoutAndInterval();
+ this.generateDataSub.unsubscribe();
+ }
+}
diff --git a/src/app/operational-view/operational-view-app-actions/OperationalViewAppActionsComponent.html b/src/app/operational-view/operational-view-app-actions/OperationalViewAppActionsComponent.html
new file mode 100644
index 0000000..08e6ec7
--- /dev/null
+++ b/src/app/operational-view/operational-view-app-actions/OperationalViewAppActionsComponent.html
@@ -0,0 +1,42 @@
+<!--
+Copyright 2020 TATA ELXSI
+
+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.
+
+Author: BARATH KUMAR R (barath.r@tataelxsi.co.in)
+-->
+<div class="modal-header">
+ <h4 class="modal-title" id="modal-basic-title">{{ 'ACTIONS' | translate }}</h4>
+ <button class="button-xs" type="button" class="close" aria-label="Close" (click)="activeModal.close()">
+ <i class="fas fa-times-circle text-danger"></i>
+ </button>
+</div>
+<div class="modal-body modal-body-custom-height">
+ <table class="table table-sm">
+ <thead class="thead-dark">
+ <tr>
+ <th scope="col">{{ 'ACTIONS' | translate }}</th>
+ <th scope="col">{{ 'DESCRIPTION' | translate }}</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngFor="let actions of actionsData">
+ <th scope="row">{{actions.actions ? actions.actions : '-'}}</th>
+ <td>{{actions.description ? actions.description : '-'}}</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+<div class="modal-footer">
+ <button type="button" class="btn btn-danger" (click)="activeModal.close()">{{'CLOSE' | translate}}</button>
+</div>
\ No newline at end of file
diff --git a/src/app/operational-view/operational-view-app-actions/OperationalViewAppActionsComponent.ts b/src/app/operational-view/operational-view-app-actions/OperationalViewAppActionsComponent.ts
new file mode 100644
index 0000000..5a4f48e
--- /dev/null
+++ b/src/app/operational-view/operational-view-app-actions/OperationalViewAppActionsComponent.ts
@@ -0,0 +1,67 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ 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.
+
+ Author: BARATH KUMAR R (barath.r@tataelxsi.co.in)
+*/
+
+/**
+ * @file Page for Operational View App actions Component
+ */
+import { Component, Injector, Input, OnInit } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { URLPARAMS } from 'CommonModel';
+import { isNullOrUndefined } from 'util';
+/**
+ * Creating component
+ * @Component takes OperationalViewAppActionsComponent.html as template url
+ */
+@Component({
+ selector: 'app-operational-view-app-actions',
+ templateUrl: './OperationalViewAppActionsComponent.html'
+})
+/** Exporting a class @exports OperationalViewAppActionsComponent */
+export class OperationalViewAppActionsComponent implements OnInit {
+ /** Invoke service injectors @public */
+ public injector: Injector;
+
+ /** Get the actions data @public */
+ public actionsData: {}[];
+
+ /** Instance for active modal service @public */
+ public activeModal: NgbActiveModal;
+
+ /** Input contains component objects @private */
+ @Input() private params: URLPARAMS;
+
+ /** creates Operational view app actions component */
+ constructor(injector: Injector) {
+ this.injector = injector;
+ this.activeModal = this.injector.get(NgbActiveModal);
+ }
+
+ /**
+ * Lifecyle Hooks the trigger before component is instantiate
+ */
+ public ngOnInit(): void {
+ this.actionsData = [];
+ if (!isNullOrUndefined(this.params.actions)) {
+ this.actionsData = Object.keys(this.params.actions).map((key: string): Object => (
+ {
+ actions: key,
+ description: this.params.actions[key]
+ }));
+ }
+ }
+}
diff --git a/src/app/operational-view/operational-view-app-configs/OperationalViewAppConfigsComponent.html b/src/app/operational-view/operational-view-app-configs/OperationalViewAppConfigsComponent.html
new file mode 100644
index 0000000..95264f6
--- /dev/null
+++ b/src/app/operational-view/operational-view-app-configs/OperationalViewAppConfigsComponent.html
@@ -0,0 +1,50 @@
+<!--
+Copyright 2020 TATA ELXSI
+
+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.
+
+Author: BARATH KUMAR R (barath.r@tataelxsi.co.in)
+-->
+<div class="modal-header">
+ <h4 class="modal-title" id="modal-basic-title">{{ 'CONFIG' | translate }}</h4>
+ <button class="button-xs" type="button" class="close" aria-label="Close" (click)="activeModal.close()">
+ <i class="fas fa-times-circle text-danger"></i>
+ </button>
+</div>
+<div class="modal-body modal-body-custom-height">
+ <table class="table table-sm">
+ <thead class="thead-dark">
+ <tr>
+ <th scope="col">{{ 'NAME' | translate }}</th>
+ <th scope="col">{{ 'DEFAULT' | translate }}</th>
+ <th scope="col">{{ 'DESCRIPTION' | translate }}</th>
+ <th scope="col">{{ 'SOURCE' | translate }}</th>
+ <th scope="col">{{ 'TYPE' | translate }}</th>
+ <th scope="col">{{ 'VALUE' | translate }}</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngFor="let configs of configData">
+ <th scope="row">{{configs.name}}</th>
+ <td>{{configs.default ? configs.default : '-'}}</td>
+ <td>{{configs.description ? configs.description : '-'}}</td>
+ <td>{{configs.source ? configs.source : '-'}}</td>
+ <td>{{configs.type ? configs.type : '-'}}</td>
+ <td>{{configs.value ? configs.value : '-'}}</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+<div class="modal-footer">
+ <button type="button" class="btn btn-danger" (click)="activeModal.close()">{{'CLOSE' | translate}}</button>
+</div>
\ No newline at end of file
diff --git a/src/app/operational-view/operational-view-app-configs/OperationalViewAppConfigsComponent.ts b/src/app/operational-view/operational-view-app-configs/OperationalViewAppConfigsComponent.ts
new file mode 100644
index 0000000..1e1b453
--- /dev/null
+++ b/src/app/operational-view/operational-view-app-configs/OperationalViewAppConfigsComponent.ts
@@ -0,0 +1,71 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ 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.
+
+ Author: BARATH KUMAR R (barath.r@tataelxsi.co.in)
+*/
+
+/**
+ * @file Page for Operational View App configs Component
+ */
+import { Component, Injector, Input, OnInit } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { URLPARAMS } from 'CommonModel';
+import { isNullOrUndefined } from 'util';
+/**
+ * Creating component
+ * @Component takes OperationalViewAppConfigsComponent.html as template url
+ */
+@Component({
+ selector: 'app-operational-view-app-configs',
+ templateUrl: './OperationalViewAppConfigsComponent.html'
+})
+/** Exporting a class @exports OperationalViewAppConfigsComponent */
+export class OperationalViewAppConfigsComponent implements OnInit {
+ /** Invoke service injectors @public */
+ public injector: Injector;
+
+ /** Get the config data @public */
+ public configData: {}[];
+
+ /** Instance for active modal service @public */
+ public activeModal: NgbActiveModal;
+
+ /** Input contains component objects @private */
+ @Input() private params: URLPARAMS;
+
+ /** creates Operational view app config component */
+ constructor(injector: Injector) {
+ this.injector = injector;
+ this.activeModal = this.injector.get(NgbActiveModal);
+ }
+
+ /**
+ * Lifecyle Hooks the trigger before component is instantiate
+ */
+ public ngOnInit(): void {
+ this.configData = [];
+ if (!isNullOrUndefined(this.params.configs)) {
+ this.configData = Object.keys(this.params.configs).map((key: string): Object => (
+ {
+ name: key,
+ default: this.params.configs[key].default,
+ description: this.params.configs[key].description,
+ source: this.params.configs[key].source,
+ type: this.params.configs[key].type,
+ value: this.params.configs[key].value
+ }));
+ }
+ }
+}
diff --git a/src/app/operational-view/operational-view-app-executed-actions/OperationalViewAppExecutedActionsComponent.html b/src/app/operational-view/operational-view-app-executed-actions/OperationalViewAppExecutedActionsComponent.html
new file mode 100644
index 0000000..65323b9
--- /dev/null
+++ b/src/app/operational-view/operational-view-app-executed-actions/OperationalViewAppExecutedActionsComponent.html
@@ -0,0 +1,53 @@
+<!--
+Copyright 2020 TATA ELXSI
+
+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.
+
+Author: BARATH KUMAR R (barath.r@tataelxsi.co.in)
+-->
+<div class="modal-header">
+ <h4 class="modal-title" id="modal-basic-title">{{ 'EXECUTEDACTIONS' | translate }}</h4>
+ <button class="button-xs" type="button" class="close" aria-label="Close" (click)="activeModal.close()">
+ <i class="fas fa-times-circle text-danger"></i>
+ </button>
+</div>
+<div class="modal-body modal-body-custom-height">
+ <table class="table table-sm">
+ <thead class="thead-dark">
+ <tr>
+ <th scope="col">{{ 'ID' | translate }}</th>
+ <th scope="col">{{ 'ACTION' | translate }}</th>
+ <th scope="col">{{ 'OUTPUT' | translate }}</th>
+ <th scope="col">{{ 'STATUS' | translate }}</th>
+ <th scope="col">{{ 'VERIFIED' | translate }}</th>
+ <th scope="col">{{ 'CODE' | translate }}</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngFor="let executedActions of executedActionsData">
+ <td>{{executedActions.id ? executedActions.id : '-'}}</td>
+ <td>{{executedActions.action ? executedActions.action : '-'}}</td>
+ <td>{{executedActions.output ? executedActions.output : '-'}}</td>
+ <td>{{executedActions.status ? executedActions.status : '-'}}</td>
+ <td>{{executedActions.verified ? executedActions.verified : '-'}}</td>
+ <td>{{executedActions.Code ? executedActions.Code : '-'}}</td>
+ </tr>
+ <tr class="text-center" *ngIf="isExecutedActionNotAvailable">
+ <td colspan="6">{{ 'PAGE.OPERATIONALDASHBOARD.NOEXECUTEDACTIONS' | translate }}</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+<div class="modal-footer">
+ <button type="button" class="btn btn-danger" (click)="activeModal.close()">{{'CLOSE' | translate}}</button>
+</div>
\ No newline at end of file
diff --git a/src/app/operational-view/operational-view-app-executed-actions/OperationalViewAppExecutedActionsComponent.ts b/src/app/operational-view/operational-view-app-executed-actions/OperationalViewAppExecutedActionsComponent.ts
new file mode 100644
index 0000000..af39f79
--- /dev/null
+++ b/src/app/operational-view/operational-view-app-executed-actions/OperationalViewAppExecutedActionsComponent.ts
@@ -0,0 +1,69 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ 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.
+
+ Author: BARATH KUMAR R (barath.r@tataelxsi.co.in)
+*/
+
+/**
+ * @file Page for Operational View App Executed actions Component
+ */
+import { Component, Injector, Input, OnInit } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { URLPARAMS } from 'CommonModel';
+import { EXECUTEDACTIONS } from 'OperationalModel';
+import { isNullOrUndefined } from 'util';
+/**
+ * Creating component
+ * @Component takes OperationalViewAppExecutedActionsComponent.html as template url
+ */
+@Component({
+ selector: 'app-operational-view-executed-app-actions',
+ templateUrl: './OperationalViewAppExecutedActionsComponent.html'
+})
+/** Exporting a class @exports OperationalViewAppExecutedActionsComponent */
+export class OperationalViewAppExecutedActionsComponent implements OnInit {
+ /** Invoke service injectors @public */
+ public injector: Injector;
+
+ /** Get the Executed actions data @public */
+ public executedActionsData: EXECUTEDACTIONS[];
+
+ /** Instance for active modal service @public */
+ public activeModal: NgbActiveModal;
+
+ /** Is executed action not available @public */
+ public isExecutedActionNotAvailable: boolean = false;
+
+ /** Input contains component objects @private */
+ @Input() private params: URLPARAMS;
+
+ /** creates Operational view app executed actions component */
+ constructor(injector: Injector) {
+ this.injector = injector;
+ this.activeModal = this.injector.get(NgbActiveModal);
+ }
+
+ /**
+ * Lifecyle Hooks the trigger before component is instantiate
+ */
+ public ngOnInit(): void {
+ if (!isNullOrUndefined(this.params.executedActions) && this.params.executedActions.length > 0) {
+ this.params.executedActions.sort((a: EXECUTEDACTIONS, b: EXECUTEDACTIONS): number => (+a.id > +b.id ? 1 : +a.id < +b.id ? -1 : 0));
+ this.executedActionsData = this.params.executedActions;
+ } else {
+ this.isExecutedActionNotAvailable = true;
+ }
+ }
+}
diff --git a/src/app/utilities/ns-instances-action/NSInstancesActionComponent.html b/src/app/utilities/ns-instances-action/NSInstancesActionComponent.html
index 977a87e..8a32bb7 100644
--- a/src/app/utilities/ns-instances-action/NSInstancesActionComponent.html
+++ b/src/app/utilities/ns-instances-action/NSInstancesActionComponent.html
@@ -16,6 +16,9 @@
Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
-->
<div class="btn-group list action" role="group">
+ <button routerLink="/instances/operational-view/{{instanceID}}" type="button" class="btn btn-primary" placement="top" container="body" [disabled]="isShowOperationalDashboard" ngbTooltip="{{'PAGE.OPERATIONALDASHBOARD.TITLE' | translate}}">
+ <i class="fas fa-tachometer-alt"></i>
+ </button>
<button type="button" class="btn btn-primary" (click)="metrics()" placement="top" container="body" [disabled]="operationalStatus == 'failed' || configStatus == 'failed'" ngbTooltip="{{'METRICS' | translate}}">
<i class="fas fa-chart-bar icons"></i>
</button>
diff --git a/src/app/utilities/ns-instances-action/NSInstancesActionComponent.ts b/src/app/utilities/ns-instances-action/NSInstancesActionComponent.ts
index ed24a67..a66f78a 100644
--- a/src/app/utilities/ns-instances-action/NSInstancesActionComponent.ts
+++ b/src/app/utilities/ns-instances-action/NSInstancesActionComponent.ts
@@ -77,15 +77,18 @@
/** Assign the VNF Details @public */
public vnfDetails: VNFD[] = [];
+ /** Contains instance ID @public */
+ public instanceID: string;
+
+ /** Contains operational dashboard view @public */
+ public isShowOperationalDashboard: boolean = false;
+
/** Instance of the modal service @private */
private modalService: NgbModal;
/** Holds teh instance of AuthService class of type AuthService @private */
private router: Router;
- /** Contains instance ID @private */
- private instanceID: string;
-
/** Contains all methods related to shared @private */
private sharedService: SharedService;
@@ -120,6 +123,8 @@
this.operationalStatus = this.value.OperationalStatus;
this.instanceID = this.value.identifier;
this.getAdminDetails = this.value.adminDetails;
+ this.isShowOperationalDashboard = !isNullOrUndefined(this.value.vcaStatus) ?
+ Object.keys(this.value.vcaStatus).length === 0 && typeof this.value.vcaStatus === 'object' : true;
}
/** Shows information using modalservice @public */