2 Copyright 2020 TATA ELXSI
4 Licensed under the Apache License, Version 2.0 (the 'License');
5 you may not use this file except in compliance with the License.
6 You may obtain a copy of the License at
8 http://www.apache.org/licenses/LICENSE-2.0
10 Unless required by applicable law or agreed to in writing, software
11 distributed under the License is distributed on an "AS IS" BASIS,
12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 See the License for the specific language governing permissions and
14 limitations under the License.
16 Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
19 * @file Netslice Instance Component
21 import { Component, Injector, OnInit } from '@angular/core';
22 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
23 import { TranslateService } from '@ngx-translate/core';
24 import { CONFIGCONSTANT, ERRORDATA, MODALCLOSERESPONSEDATA } from 'CommonModel';
25 import { DataService } from 'DataService';
26 import { environment } from 'environment';
27 import { InstantiateNetSliceTemplateComponent } from 'InstantiateNetSliceTemplate';
28 import { NetsliceInstancesActionComponent } from 'NetsliceInstancesActionComponent';
29 import { NSTInstanceData, NSTInstanceDetails } from 'NetworkSliceModel';
30 import { LocalDataSource } from 'ng2-smart-table';
31 import { RestService } from 'RestService';
32 import { Subscription } from 'rxjs';
33 import { SharedService } from 'SharedService';
37 * @Component takes NetsliceInstancesComponent.html as template url
40 templateUrl: './NetsliceInstancesComponent.html',
41 styleUrls: ['./NetsliceInstancesComponent.scss']
44 /** Exporting a class @exports NetsliceInstancesComponent */
45 export class NetsliceInstancesComponent implements OnInit {
46 /** To inject services @public */
47 public injector: Injector;
49 /** handle translate @public */
50 public translateService: TranslateService;
52 /** Columns list of the smart table @public */
53 public columnLists: object = {};
55 /** Settings for smarttable to populate the table with columns @public */
56 public settings: object = {};
58 /** Datasource instance inititated @public */
59 public dataSource: LocalDataSource = new LocalDataSource();
61 /** Datasource table Data for the NST @public */
62 public nstInstanceData: NSTInstanceData[] = [];
64 /** Check the loading results @public */
65 public isLoadingResults: boolean = true;
67 /** Give the message for the loading @public */
68 public message: string = 'PLEASEWAIT';
70 /** Class for empty and present data @public */
71 public checkDataClass: string;
73 /** operational State init data @public */
74 public operationalStateFirstStep: string = CONFIGCONSTANT.operationalStateFirstStep;
76 /** operational State running data @public */
77 public operationalStateSecondStep: string = CONFIGCONSTANT.operationalStateSecondStep;
79 /** operational State failed data @public */
80 public operationalStateThirdStep: string = CONFIGCONSTANT.operationalStateThirdStep;
82 /** Config State init data @public */
83 public configStateFirstStep: string = CONFIGCONSTANT.configStateFirstStep;
85 /** Config State init data @public */
86 public configStateSecondStep: string = CONFIGCONSTANT.configStateSecondStep;
88 /** Config State init data @public */
89 public configStateThirdStep: string = CONFIGCONSTANT.configStateThirdStep;
91 /** config status assign @public */
92 public configStatusCheck: string;
94 /** To consume REST API calls @private */
95 private dataService: DataService;
97 /** Utilizes rest service for any CRUD operations @public */
98 private restService: RestService;
100 /** Contains all methods related to shared @private */
101 private sharedService: SharedService;
103 /** Instance of the modal service @private */
104 private modalService: NgbModal;
106 /** Instance of subscriptions @private */
107 private generateDataSub: Subscription;
109 constructor(injector: Injector) {
110 this.injector = injector;
111 this.restService = this.injector.get(RestService);
112 this.translateService = this.injector.get(TranslateService);
113 this.sharedService = this.injector.get(SharedService);
114 this.modalService = this.injector.get(NgbModal);
115 this.dataService = this.injector.get(DataService);
119 * Lifecyle Hooks the trigger before component is instantiate
121 public ngOnInit(): void {
122 this.generateTableColumn();
123 this.generateTableSettings();
125 this.generateDataSub = this.sharedService.dataEvent.subscribe(() => { this.generateData(); });
128 /** smart table listing manipulation @private */
129 public onChange(perPageValue: number): void {
130 this.dataSource.setPaging(1, perPageValue, true);
133 /** smart table listing manipulation @private */
134 public onUserRowSelect(event: MessageEvent): void {
135 Object.assign(event.data, { page: 'net-slice-instance' });
136 this.dataService.changeMessage(event.data);
139 /** Instantiate Net Slice using modalservice @public */
140 public instantiateNetSlice(): void {
141 // eslint-disable-next-line security/detect-non-literal-fs-filename
142 const modalRef: NgbModalRef = this.modalService.open(InstantiateNetSliceTemplateComponent, { backdrop: 'static' });
143 modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
147 }).catch((): void => {
148 // Catch Navigation Error
152 /** Generate smart table row title and filters @public */
153 public generateTableSettings(): void {
155 columns: this.columnLists,
156 actions: { add: false, edit: false, delete: false, position: 'right' },
157 attr: this.sharedService.tableClassConfig(),
158 pager: this.sharedService.paginationPagerConfig(),
159 noDataMessage: this.translateService.instant('NODATAMSG')
163 /** Generate smart table row title and filters @public */
164 public generateTableColumn(): void {
166 name: { title: this.translateService.instant('NAME'), width: '15%', sortDirection: 'asc' },
167 identifier: { title: this.translateService.instant('IDENTIFIER'), width: '15%' },
168 NstName: { title: this.translateService.instant('NSTNAME'), width: '15%' },
171 title: this.translateService.instant('OPERATIONALSTATUS'),
176 selectText: 'Select',
178 { value: this.operationalStateFirstStep, title: this.operationalStateFirstStep },
179 { value: this.operationalStateSecondStep, title: this.operationalStateSecondStep },
180 { value: this.operationalStateThirdStep, title: this.operationalStateThirdStep }
184 valuePrepareFunction: (cell: NSTInstanceData, row: NSTInstanceData): string => {
185 if (row.OperationalStatus === this.operationalStateFirstStep) {
186 return `<span class="icon-label" title="${row.OperationalStatus}">
187 <i class="fas fa-clock text-warning"></i>
189 } else if (row.OperationalStatus === this.operationalStateSecondStep) {
190 return `<span class="icon-label" title="${row.OperationalStatus}">
191 <i class="fas fa-check-circle text-success"></i>
193 } else if (row.OperationalStatus === this.operationalStateThirdStep) {
194 return `<span class="icon-label" title="${row.OperationalStatus}">
195 <i class="fas fa-times-circle text-danger"></i>
198 return `<span>${row.OperationalStatus}</span>`;
204 title: this.translateService.instant('CONFIGSTATUS'),
209 selectText: 'Select',
211 { value: this.configStateFirstStep, title: this.configStateFirstStep },
212 { value: this.configStateSecondStep, title: this.configStateSecondStep },
213 { value: this.configStateThirdStep, title: this.configStateThirdStep }
217 valuePrepareFunction: (cell: NSTInstanceData, row: NSTInstanceData): string => {
218 if (row.ConfigStatus === this.configStateFirstStep) {
219 return `<span class="icon-label" title="${row.ConfigStatus}">
220 <i class="fas fa-clock text-warning"></i>
222 } else if (row.ConfigStatus === this.configStateSecondStep) {
223 return `<span class="icon-label" title="${row.ConfigStatus}">
224 <i class="fas fa-check-circle text-success"></i>
226 } else if (row.ConfigStatus === this.configStateThirdStep) {
227 return `<span class="icon-label" title="${row.ConfigStatus}">
228 <i class="fas fa-times-circle text-danger"></i>
231 return `<span>${row.ConfigStatus}</span>`;
235 DetailedStatus: { title: this.translateService.instant('DETAILEDSTATUS'), width: '15%' },
237 name: 'Action', width: '10%', filter: false, sort: false, title: this.translateService.instant('ACTIONS'), type: 'custom',
238 valuePrepareFunction: (cell: NSTInstanceData, row: NSTInstanceData): NSTInstanceData => row,
239 renderComponent: NetsliceInstancesActionComponent
244 /** generateData initiate the net-slice-instance list @public */
245 public generateData(): void {
246 this.isLoadingResults = true;
247 this.restService.getResource(environment.NETWORKSLICEINSTANCESCONTENT_URL)
248 .subscribe((netSliceInstancesData: NSTInstanceDetails[]) => {
249 this.nstInstanceData = [];
250 netSliceInstancesData.forEach((netSliceInstanceData: NSTInstanceDetails) => {
251 if (netSliceInstanceData['config-status'] !== undefined) {
252 this.configStatusCheck = netSliceInstanceData['config-status'];
254 this.configStatusCheck = netSliceInstanceData['operational-status'];
256 const netSliceDataObj: NSTInstanceData = {
257 name: netSliceInstanceData.name,
258 identifier: netSliceInstanceData.id,
259 NstName: netSliceInstanceData['nst-ref'],
260 OperationalStatus: netSliceInstanceData['operational-status'],
261 ConfigStatus: this.configStatusCheck,
262 DetailedStatus: netSliceInstanceData['detailed-status']
264 this.nstInstanceData.push(netSliceDataObj);
266 if (this.nstInstanceData.length > 0) {
267 this.checkDataClass = 'dataTables_present';
269 this.checkDataClass = 'dataTables_empty';
271 this.dataSource.load(this.nstInstanceData).then((data: {}) => {
272 this.isLoadingResults = false;
273 }).catch((): void => {
274 // Catch Navigation Error
276 }, (error: ERRORDATA) => {
277 this.restService.handleError(error, 'get');
278 this.isLoadingResults = false;
283 * Lifecyle hook which get trigger on component destruction
285 public ngOnDestroy(): void {
286 this.generateDataSub.unsubscribe();