* 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>
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';
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
}
]
}
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 {
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);
});
--- /dev/null
+<!--
+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
--- /dev/null
+/*
+ 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();
+ }
+}
--- /dev/null
+<!--
+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
--- /dev/null
+/*
+ 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]
+ }));
+ }
+ }
+}
--- /dev/null
+<!--
+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
--- /dev/null
+/*
+ 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
+ }));
+ }
+ }
+}
--- /dev/null
+<!--
+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
--- /dev/null
+/*
+ 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;
+ }
+ }
+}
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>
/** 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;
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 */
"SUBMIT": "Submit",
"REFRESH": "Aktualisierung",
"OPEN": "Öffnen",
+ "CLOSE": "Schließen",
"UPLOADCONFIG": "Upload Config",
"FILEUPLOADLABEL": "Oder aus Datei laden",
"CONFIG": "Konfig",
"SCALEIN": "Scale In",
"SCALING": "Manuelle Skalierung",
"SCALINGNOTFOUND": "scaling-aspect nicht in vnfd gefunden",
+ "NODATA": "Derzeit sind keine Daten verfügbar",
+ "STATUS": "Status",
+ "PUBLICADDRESS": "Öffentliche Adresse",
+ "EXECUTEDACTIONS": "Ausgeführte Aktionen",
+ "OUTPUT": "Ausgabe",
+ "VERIFIED": "Verifiziert",
+ "CODE": "Code",
+ "SCALE": "Rahmen",
+ "DEFAULT": "Standard",
+ "SOURCE": "Quelle",
"PAGE": {
"DASHBOARD": {
"DASHBOARD": "Instrumententafel",
"OSMREPOTITLE": "Registriertes OSM-Repository",
"CREATEDSUCCESSFULLY": "OSM-Repository erfolgreich hinzugefügt",
"UPDATEDSUCCESSFULLY": "OSM-Repository erfolgreich aktualisiert"
+ },
+ "OPERATIONALDASHBOARD": {
+ "TITLE": "Betriebs-Dashboard",
+ "MODELSUMMARY": "Modellzusammenfassung",
+ "MODEL": "Modell",
+ "APPLICATION": "App",
+ "APPLICATIONTITLE": "Apps",
+ "UNITS": "Einheit",
+ "UNITSTITLE": "Einheiten",
+ "RELATIONS": "Beziehungen",
+ "NOAPPLICATION": "Es gibt keine Anwendung in diesem Modell",
+ "NOUNITS": "Es gibt keine Einheiten in diesem Modell",
+ "NORELATIONS": "In diesem Modell gibt es keine Beziehungen",
+ "NOMACHINES": "Es gibt keine Maschinen in diesem Modell",
+ "NOEXECUTEDACTIONS": "In diesem Modell sind keine Aktionen ausgeführt",
+ "MACHINE": "Maschine",
+ "MACHINETITLE": "Maschinen",
+ "MESSAGE": "Botschaft",
+ "WORKLOAD": "Arbeitsbelastung",
+ "AGENT": "Agent",
+ "ADDRESS": "Adresse",
+ "INTERFACE": "Interface",
+ "REQUIRER": "Requerente",
+ "RELATIONPROVIDER": "Provedor de relacionamento",
+ "CHARM": "Charm",
+ "STORE": "Loja",
+ "LEADER": "Führer",
+ "LIVELOAD": "Live-Laden",
+ "SETSECONDS": "Timer einstellen",
+ "SERIES": "Serie"
}
},
"HTTPERROR": {
"SUBMIT": "Submit",
"REFRESH": "Refresh",
"OPEN": "Open",
+ "CLOSE": "Close",
"UPLOADCONFIG": "Upload Config",
"FILEUPLOADLABEL": "Or load from file",
"CONFIG": "Config",
"SCALEIN": "Scale In",
"SCALING": "Manual Scaling",
"SCALINGNOTFOUND": "scaling-aspect not found in vnfd",
+ "NODATA": "Currently data not available",
+ "STATUS": "Status",
+ "PUBLICADDRESS": "Public Address",
+ "EXECUTEDACTIONS": "Executed Actions",
+ "OUTPUT": "Output",
+ "VERIFIED": "Verified",
+ "CODE": "Code",
+ "SCALE": "Scale",
+ "DEFAULT": "Default",
+ "SOURCE": "Source",
"PAGE": {
"DASHBOARD": {
"DASHBOARD": "Dashboard",
"OSMREPOTITLE": "Registered OSM repository",
"CREATEDSUCCESSFULLY": "OSM Repository Added Successfully",
"UPDATEDSUCCESSFULLY": "OSM Repository Updated Successfully"
+ },
+ "OPERATIONALDASHBOARD": {
+ "TITLE": "Operational Dashboard",
+ "MODELSUMMARY": "Model Summary",
+ "MODEL": "Model",
+ "APPLICATION": "App",
+ "APPLICATIONTITLE": "Apps",
+ "UNITS": "Unit",
+ "UNITSTITLE": "Units",
+ "RELATIONS": "Relations",
+ "NOAPPLICATION": "There are no application in this model",
+ "NOUNITS": "There are no units in this model",
+ "NORELATIONS": "There are no relations in this model",
+ "NOMACHINES": "There are no machines in this model",
+ "NOEXECUTEDACTIONS": "There are no executed actions in this model",
+ "MACHINE": "Machine",
+ "MACHINETITLE": "Machines",
+ "MESSAGE": "Message",
+ "WORKLOAD": "Workload",
+ "AGENT": "Agent",
+ "ADDRESS": "Address",
+ "INTERFACE": "Interface",
+ "REQUIRER": "Requirer",
+ "RELATIONPROVIDER": "Relation Provider",
+ "CHARM": "Charm",
+ "STORE": "Store",
+ "LEADER": "Leader",
+ "LIVELOAD": "Live Loading",
+ "SETSECONDS": "Set Timer",
+ "SERIES": "Series"
}
},
"HTTPERROR": {
"CURRENTPROJECT": "Proyecto actual",
"SUBMIT": "Entrar",
"REFRESH": "Actualizar",
- "OPEN": "Abierto",
+ "OPEN": "Abrir",
+ "CLOSE": "Cerrar",
"UPLOADCONFIG": "Subir configuración",
"FILEUPLOADLABEL": "O cargar desde el archivo",
"CONFIG": "Config",
"SCALEIN": "Escalar",
"SCALING": "Escalado manual",
"SCALINGNOTFOUND": "scaling-aspect no encontrado en vnfd",
+ "NODATA": "Actualmente datos no disponibles",
+ "STATUS": "Estado",
+ "PUBLICADDRESS": "Dirección pública",
+ "EXECUTEDACTIONS": "Acciones ejecutadas",
+ "OUTPUT": "Salida",
+ "VERIFIED": "Verificada",
+ "CODE": "Código",
+ "SCALE": "Escala",
+ "DEFAULT": "por defecto",
+ "SOURCE": "Fuente",
"PAGE": {
"DASHBOARD": {
"DASHBOARD": "Tablero",
"OSMREPOTITLE": "Repositorio OSM registrado",
"CREATEDSUCCESSFULLY": "Repositorio OSM agregado correctamente",
"UPDATEDSUCCESSFULLY" : "Repositorio OSM actualizado correctamente"
+ },
+ "OPERATIONALDASHBOARD": {
+ "TITLE": "Tablero operativo",
+ "MODELSUMMARY": "Resumen de modelo",
+ "MODEL": "Modelo",
+ "APPLICATION": "App",
+ "APPLICATIONTITLE": "Apps",
+ "UNITS": "Unidad",
+ "UNITSTITLE": "Unidades",
+ "RELATIONS": "Relaciones",
+ "NOAPPLICATION": "No hay aplicación en este modelo.",
+ "NOUNITS": "No hay unidades en este modelo",
+ "NORELATIONS": "No hay relaciones en este modelo.",
+ "NOMACHINES": "No hay máquinas en este modelo.",
+ "NOEXECUTEDACTIONS": "No hay acciones ejecutadas en este modelo",
+ "MACHINE": "Máquina",
+ "MACHINETITLE": "Máquinas",
+ "MESSAGE": "Mensaje",
+ "WORKLOAD": "Carga de trabajo",
+ "AGENT": "Agente",
+ "ADDRESS": "Dirección",
+ "INTERFACE": "Interfaz",
+ "REQUIRER": "Solicitante",
+ "RELATIONPROVIDER": "Proveedor de relaciones",
+ "CHARM": "Charm",
+ "STORE": "Tienda",
+ "LEADER": "Líder",
+ "LIVELOAD": "Cargando en vivo",
+ "SETSECONDS": "Configurar temporizador",
+ "SERIES": "serie"
}
},
"HTTPERROR": {
"SUBMIT": "Enviar",
"REFRESH": "Atualizar",
"OPEN": "Aberto",
+ "CLOSE": "Fechar",
"UPLOADCONFIG": "Upload Config",
"FILEUPLOADLABEL": "Ou carregue do arquivo",
"CONFIG": "Config",
"SCALEIN": "Escala em",
"SCALING": "Escalonamento Manual",
"SCALINGNOTFOUND": "scaling-aspect não encontrado no vnfd",
+ "NODATA": "Atualmente, os dados não estão disponíveis",
+ "STATUS": "Status",
+ "PUBLICADDRESS": "Endereço público",
+ "EXECUTEDACTIONS": "Ações Executadas",
+ "OUTPUT": "Resultado",
+ "VERIFIED": "Verificada",
+ "CODE": "Code",
+ "SCALE": "Escala",
+ "DEFAULT": "Padrão",
+ "SOURCE": "Fonte",
"PAGE": {
"DASHBOARD": {
"DASHBOARD": "painel de controle",
"OSMREPOTITLE": "Repositório OSM registrado",
"CREATEDSUCCESSFULLY": "registrado OSM adicionado com sucesso",
"UPDATEDSUCCESSFULLY": "registrado OSM atualizado com sucesso"
+ },
+ "OPERATIONALDASHBOARD": {
+ "TITLE": "Painel Operacional",
+ "MODELSUMMARY": "Resumo do modelo",
+ "MODEL": "Modelo",
+ "APPLICATION": "App",
+ "APPLICATIONTITLE": "Apps",
+ "UNITS": "Unidade",
+ "UNITSTITLE": "Unidades",
+ "RELATIONS": "Relações",
+ "NOAPPLICATION": "Não há aplicação neste modelo",
+ "NOUNITS": "Não há unidades neste modelo",
+ "NORELATIONS": "Não há relações neste modelo",
+ "NOMACHINES": "Não há máquinas neste modelo",
+ "NOEXECUTEDACTIONS": "Não há ações executadas neste modelo",
+ "MACHINE": "Máquina",
+ "MACHINETITLE": "Maquinas",
+ "MESSAGE": "mensagem",
+ "WORKLOAD": "Carga de trabalho",
+ "AGENT": "Agente",
+ "ADDRESS": "Endereço",
+ "INTERFACE": "Interface",
+ "REQUIRER": "Requerente",
+ "RELATIONPROVIDER": "Provedor de relacionamento",
+ "CHARM": "Charm",
+ "STORE": "Loja",
+ "LEADER": "Líder",
+ "LIVELOAD": "Carregando ao vivo",
+ "SETSECONDS": "Definir temporizador",
+ "SERIES": "Series"
}
},
"HTTPERROR": {
color: $gray-400;
}
}
- .modal-dialog {
- max-width: 600px;
- }
.header-style {
@include font(null, 1.2rem, 700);
color: $primary;
}
}
}
+ .juju-section {
+ .card {
+ @include roundedCorners(4);
+ margin-bottom: 0.25rem;
+ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+ .bg-secondary {
+ @include background(null, $primary !important, null, null, null);
+ b,
+ span {
+ color: $white;
+ }
+ }
+ .card-body {
+ .seconds-btn-group .active {
+ color: $white;
+ @include background(null, $primary !important, null, null, null);
+ }
+ @include border(all, 2, dashed, $primary);
+ @include padding-value(5, 5, 5, 5);
+ border-top: 0;
+ table {
+ thead th {
+ font-size: 12px;
+ }
+ tbody th i.active-icon {
+ font-size: 10px;
+ }
+ }
+ }
+ }
+ }
.card {
margin-bottom: 1rem;
}
}
}
}
+ /** Switch Design **/
+ .switch {
+ @include position_value(relative, null, null, null, null);
+ @include flexbox(inline-block, null, null, null, null, null);
+ @include wh-value(50px, 15px);
+ @include margin-value(0, 0, 0, 0);
+ input {
+ opacity: 0;
+ @include wh-value(0px, 0px);
+ &:checked + .slider {
+ @include background(null, $gray-400, null, null, null);
+ &:before {
+ @include background(null, $pure-red, null, null, null);
+ left: 5px;
+ animation: pulse 2s infinite;
+ -webkit-transform: translateX(26px);
+ -ms-transform: translateX(26px);
+ transform: translateX(26px);
+ }
+ .on {
+ @include flexbox(block, null, null, null, null, null);
+ }
+ .off {
+ @include flexbox(none, null, null, null, null, null);
+ }
+ }
+ }
+ .slider {
+ @include position_value(absolute, 0, 0, 0, 0);
+ cursor: pointer;
+ @include background(null, $gray-400, null, null, null);
+ -webkit-transition: 0.4s;
+ transition: 0.4s;
+ box-shadow: 0 0 1px $gray-400;
+ &.round {
+ @include roundedCorners(30);
+ &:before {
+ @include roundedCornersPercentage(50%);
+ }
+ }
+ &:before {
+ @include position_value(absolute, null, null, -2px, 0px);
+ @include wh-value(20px, 20px);
+ @include background(null, $white, null, null, null);
+ content: "";
+ -webkit-transition: 0.4s;
+ transition: 0.4s;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+ }
+ .on {
+ @include flexbox(none, null, null, null, null, null);
+ @include position_value(absolute, 50%, null, null, 35% !important);
+ }
+ .on,
+ .off {
+ @include position_value(absolute, 50%, null, null, 65%);
+ color: $primary;
+ transform: translate(-50%, -50%);
+ @include font(null, 11px, bold);
+ }
+ }
+ @-webkit-keyframes pulse {
+ 0% {
+ -webkit-box-shadow: 0 0 0 0 rgba(204, 89, 44, 0.4);
+ }
+ 70% {
+ -webkit-box-shadow: 0 0 0 10px rgba(204, 89, 44, 0);
+ }
+ 100% {
+ -webkit-box-shadow: 0 0 0 0 rgba(204, 89, 44, 0);
+ }
+ }
+ @keyframes pulse {
+ 0% {
+ -moz-box-shadow: 0 0 0 0 rgba(204, 89, 44, 0.4);
+ box-shadow: 0 0 0 0 rgba(204, 89, 44, 0.4);
+ }
+ 70% {
+ -moz-box-shadow: 0 0 0 10px rgba(204, 89, 44, 0);
+ box-shadow: 0 0 0 10px rgba(204, 89, 44, 0);
+ }
+ 100% {
+ -moz-box-shadow: 0 0 0 0 rgba(204, 89, 44, 0);
+ box-shadow: 0 0 0 0 rgba(204, 89, 44, 0);
+ }
+ }
+ }
}
/****************************************************************************/
/************************** MEDIA QUERIES ***********************************/
.text-captilize {
text-transform: capitalize;
}
-.text-info{
+.text-info {
color: $secondary !important;
}
+.hide {
+ @include flexbox(none, null, null, null, null, null);
+}
+.title-bar {
+ .name-width {
+ @include wh-value(20%, null);
+ }
+ .id-width {
+ @include wh-value(25%, null);
+ }
+}
+.filter-actions {
+ button {
+ @include roundedCorners(10);
+ @include padding-percentage-value(0.2rem, 1rem, 0.2rem, 1rem);
+ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+ border: none;
+ }
+}
*/
import { HttpHeaders } from '@angular/common/http';
import { NSD } from 'NSInstanceModel';
+import { EXECUTEDACTIONS } from 'OperationalModel';
import { VNFD } from 'VNFDModel';
/**
oneMB = 1048576,
paginationDefaultValue = 10,
splitLongitude = 1,
- splitLatitude = 2
+ splitLatitude = 2,
+ timeOutDefaultSeconds = 5
}
/**
* handle count @enum
nsID?: string;
nsd?: NSD;
data?: VNFD[];
+ configs?: object;
+ actions?: object;
+ executedActions?: EXECUTEDACTIONS[];
}
/** Handle the Delete params */
export interface DELETEPARAMS {
icon: 'fas fa-layer-group',
menuName: 'PAGE.DASHBOARD.NETSLICEINSTANCE',
isChildExists: false
+ },
+ {
+ liClass: '',
+ anchorTagClass: 'link',
+ routerLink: '/instances/operational-view',
+ routerLinkActive: childActiveClass,
+ routerLinkActiveOptions: false,
+ icon: 'fas fa-tachometer-alt',
+ menuName: 'PAGE.OPERATIONALDASHBOARD.TITLE',
+ isChildExists: false
}
]
},
instantiate_params: InstantiateParam;
additionalParamsForNs: AdditionalParamForN;
_id?: string;
+ vcaStatus?: object;
}
/** Interface for Admin */
state?: string;
memberIndex?: DF[];
nsConfig?: object;
+ vcaStatus?: object;
adminDetails?: object;
vnfID?: string[];
nsd?: NSD;
--- /dev/null
+/*
+ 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 Model for Operational view JUJU information.
+ */
+
+// tslint:disable: completed-docs
+
+/** Interface for the VCASTATUS */
+export interface VCASTATUS {
+ vcaStatus: VCADETAILS;
+ name: string;
+ id: string;
+}
+/** Interface for the VCASTATUS */
+export interface VCADETAILS {
+ isLiveloading: boolean;
+ ns_id: string;
+ vcaStatusModels: SETMODELS[];
+ timeOutSeconds?: number;
+ vca_id: string;
+ vca_name: string;
+}
+/** Interface for the SETMODELS */
+export interface SETMODELS {
+ applications: VCAAPPLICATIONS[];
+ branches?: {};
+ controller_timestamp?: string;
+ executedActions?: EXECUTEDACTIONS;
+ machines: MACHINES[];
+ model: VCAMODEL;
+ offers?: {};
+ relations: RELATIONS[];
+ remote_applications?: {};
+ units: VCAUNITS[];
+ unknown_fields?: {};
+}
+/** Interface for the VCAAPPLICATIONS */
+export interface VCAAPPLICATIONS {
+ app_id: string;
+ charm: string;
+ store: string;
+ units: {};
+ status: STATUS;
+ scale: number;
+ public_address: string;
+ agent_status: AGENTSTATUS;
+ configs: object;
+ actions: object;
+}
+/** Interface for the VCAUNITS */
+export interface VCAUNITS {
+ address: string;
+ machine: string;
+ unit_id: string;
+ public_address: string;
+ status: string;
+ agent_status: AGENTSTATUS;
+}
+/** Interface for the EXECUTEDACTIONS */
+export interface EXECUTEDACTIONS {
+ id: string;
+ action: string;
+ status: string;
+ Code: string;
+ outout: string;
+ verified: string;
+}
+/** Interface for the VCAMODEL */
+export interface VCAMODEL {
+ available_version: string;
+ cloud_tag: string;
+ migration: string;
+ name: string;
+ region: string;
+ version: string;
+}
+/** Interface for the STATUS */
+export interface STATUS {
+ status: string;
+}
+/** Interface for the AGENTSTATUS */
+export interface AGENTSTATUS {
+ status: string;
+ info?: string;
+}
+/** Interface for the MACHINES */
+export interface MACHINES {
+ id_: string;
+ agent_status: AGENTSTATUS;
+ dns_name: string;
+ instance_id: string;
+ series: string;
+ instance_status: AGENTSTATUS;
+}
+/** Interface for the RELATIONS */
+export interface RELATIONS {
+ endpoints: ENDPOINTS[];
+ 'interface': string;
+ key: string;
+}
+/** Interface for the ENDPOINTS */
+export interface ENDPOINTS {
+ application: string;
+ name: string;
+ role: string;
+ subordinate: string;
+}
+/** Interface for the SETTIMER */
+export interface SETTIMER {
+ label: string;
+ value: number;
+}
+export const SET_TIMER: SETTIMER[] = [
+ {
+ label: '5s',
+ value: 5
+ },
+ {
+ label: '10s',
+ value: 10
+ },
+ {
+ label: '30s',
+ value: 30
+ },
+ {
+ label: '1m',
+ value: 60
+ }
+];
"OsmRepositoriesAction" : ["src/app/utilities/osm-repositories-action/OsmRepositoriesActionComponent"],
"OsmRepoModel": ["src/models/OsmRepoModel"],
"OsmRepoCreateUpdate": ["src/app/osm-repositories/osm-repo-create-update/OsmRepoCreateUpdateComponent"],
- "ScalingComponent": ["src/app/utilities/scaling/ScalingComponent"]
+ "ScalingComponent": ["src/app/utilities/scaling/ScalingComponent"],
+ "OperationalViewComponent": ["src/app/operational-view/OperationalViewComponent"],
+ "OperationalModel": ["src/models/OperationalModel"],
+ "OperationalAppConfigsComponent": ["src/app/operational-view/operational-view-app-configs/OperationalViewAppConfigsComponent"],
+ "OperationalAppActionsComponent": ["src/app/operational-view/operational-view-app-actions/OperationalViewAppActionsComponent"],
+ "OperationalAppExecutedActionsComponent" : ["src/app/operational-view/operational-view-app-executed-actions/OperationalViewAppExecutedActionsComponent"]
}
}
}
\ No newline at end of file
projects / osm / NG-UI.git / commitdiff