diff options
Diffstat (limited to 'usecaseui-portal')
30 files changed, 1051 insertions, 1 deletions
diff --git a/usecaseui-portal/src/app/app-routing.module.ts b/usecaseui-portal/src/app/app-routing.module.ts index 7cc97875..9c9235f4 100644 --- a/usecaseui-portal/src/app/app-routing.module.ts +++ b/usecaseui-portal/src/app/app-routing.module.ts @@ -35,6 +35,7 @@ import { ManageServiceComponent } from './views/services/sotn-management/manage- import { MonitorServiceComponent } from './views/services/sotn-management/monitor-service/monitor-service.component'; import { OrderServiceComponent } from './views/services/sotn-management/order-service/order-service.component'; import { SotnManagementComponent } from './views/services/sotn-management/sotn-management.component'; +import { IntentManagementComponent } from './views/intent-management/intent-management.component'; @@ -69,6 +70,7 @@ const routes: Routes = [ { path: 'performance/performance-vm', component: PerformanceVmComponent }, { path: 'network/ccvpn-network', component: CcvpnNetworkComponent }, { path: 'network/mdons-network', component: MdonsNetworkComponent }, + { path: 'intent-management', component:IntentManagementComponent}, { path: '**', redirectTo: 'home', pathMatch: 'full' } ]; diff --git a/usecaseui-portal/src/app/app.component.html b/usecaseui-portal/src/app/app.component.html index 36c5b7ff..cb4c9f7d 100644 --- a/usecaseui-portal/src/app/app.component.html +++ b/usecaseui-portal/src/app/app.component.html @@ -129,6 +129,19 @@ </ul> </li> + <!-- Intent Management --> + <li nz-menu-item [ngClass]="{'activeMenuBar': url === 'intent-management'}"> + <a routerLink="intent-management"> + <span title> + <i> + <img + src="{{url === 'intent-management' ? 'assets/images/intent-icon-active.png':'assets/images/intent-icon.png'}}" + alt="home"> + </i> + <span>{{"i18nTextDefine_IntentManagement" | translate}} </span> + </span> + </a> + </li> <hr> </ul> </nz-sider> diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts index 69839d2c..65e8ec06 100644 --- a/usecaseui-portal/src/app/app.module.ts +++ b/usecaseui-portal/src/app/app.module.ts @@ -35,6 +35,7 @@ import { intentBaseService } from "./core/services/intentBase.service"; import { ManagemencsService } from "./core/services/managemencs.service"; import { networkHttpservice } from "./core/services/networkHttpservice.service"; import { onboardService } from "./core/services/onboard.service"; +import { IntentManagementService } from "./core/services/intentManagement.service"; // Custom service import { ServiceListService } from "./core/services/serviceList.service"; // slicingTask service @@ -108,6 +109,11 @@ import { MonitorServiceComponent } from "./views/services/sotn-management/monito import { OrderServiceComponent } from "./views/services/sotn-management/order-service/order-service.component"; import { SotnManagementComponent } from "./views/services/sotn-management/sotn-management.component"; import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown'; +import { IntentManagementComponent } from './views/intent-management/intent-management.component'; +import { InputIntentManagementComponent } from './views/intent-management/input-intent-management/input-intent-management.component'; +import { InputIntentExpectationComponent } from './views/intent-management/input-intent-expectation/input-intent-expectation.component'; +import { InputIntentStateComponent } from './views/intent-management/input-intent-state/input-intent-state.component'; +import { InputIntentConditionComponent } from './views/intent-management/input-intent-condition/input-intent-condition.component'; export function HttpLoaderFactory(httpClient: HttpClient) { return new TranslateHttpLoader(httpClient, "./assets/i18n/", ".json"); @@ -136,6 +142,7 @@ registerLocaleData(en); ManagemencsService, TextService, SlicingTaskServices, + IntentManagementService, // fakeBackendProvider ], declarations: [ @@ -206,6 +213,11 @@ registerLocaleData(en); MonitorServiceComponent, MdonsNetworkComponent, CitySelectComponent, + IntentManagementComponent, + InputIntentManagementComponent, + InputIntentExpectationComponent, + InputIntentStateComponent, + InputIntentConditionComponent, ], imports: [ BrowserModule, diff --git a/usecaseui-portal/src/app/core/services/intentManagement.service.ts b/usecaseui-portal/src/app/core/services/intentManagement.service.ts new file mode 100644 index 00000000..eb9ad2b3 --- /dev/null +++ b/usecaseui-portal/src/app/core/services/intentManagement.service.ts @@ -0,0 +1,43 @@ +/* + Copyright (C) 2022 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { Injectable } from '@angular/core'; +import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http'; +import { Observable } from 'rxjs/Observable'; +import { baseUrl } from '../models/dataInterface'; + +@Injectable() +export class IntentManagementService { + + constructor(private http: HttpClient) { } + baseUrl = baseUrl.baseUrl; + url = { + createIntentManagement: this.baseUrl + "/api/usecaseui-intent-analysis/v1/intents", + getIntentManagement: this.baseUrl + "/api/usecaseui-intent-analysis/v1/intents", + deleteIntentManagement: this.baseUrl + "/api/usecaseui-intent-analysis/v1/intents", + }; + + // intentManagement + getIntentManagementData(){ + return this.http.get<any>(this.url.getIntentManagement); + } + createIntentManagement(requestBody) { + return this.http.post<any>(this.url["createIntentManagement"], requestBody); + } + deleteIntentManagementData(intentId) { + let params = new HttpParams({ fromObject: { "intentId": intentId } }); + return this.http.delete<any>(this.url.deleteIntentManagement, { params }); +} +} diff --git a/usecaseui-portal/src/app/shared/utils/utils.ts b/usecaseui-portal/src/app/shared/utils/utils.ts index a8fdd76f..c3f38e52 100644 --- a/usecaseui-portal/src/app/shared/utils/utils.ts +++ b/usecaseui-portal/src/app/shared/utils/utils.ts @@ -134,4 +134,18 @@ export class Util { intersection(inputs: any[]) : any[]{ return inputs.reduce((a, b) => a.filter(c => b.includes(c))) } + + getUuid() { + let s = [] + let hexDigits = '0123456789abcdef' + for (let i = 0; i < 36; i++) { + let _temp=Math.floor(Math.random() * 0x10) + s[i] = hexDigits.substring(_temp, _temp + 1) + } + s[14] = '4' + let _temp2=(s[19] & 0x3) | 0x8 + s[19] = hexDigits.substring(_temp2, _temp2 + 1) + s[8] = s[13] = s[18] = s[23] = '-' + return s.join('') + } }
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/intent-management/input-intent-condition/input-intent-condition.component.html b/usecaseui-portal/src/app/views/intent-management/input-intent-condition/input-intent-condition.component.html new file mode 100644 index 00000000..9dab2962 --- /dev/null +++ b/usecaseui-portal/src/app/views/intent-management/input-intent-condition/input-intent-condition.component.html @@ -0,0 +1,24 @@ +<nz-modal [(nzVisible)]="showModel" nzTitle="Add Condition" nzCentered (nzOnCancel)="handleCancel()" + (nzOnOk)="handleOk()" nzWidth="44%" nzHeight="600px" class="intent-management-modal"> + <div class="intent-condition-div clearfix"> + <p class="expectation-p w50"> + <span class="left"> Condition Name:</span> + <input nz-input id="condition_name" [(ngModel)]="this.defaultParams['conditionName']"> + </p> + <p class="expectation-p w50"> + <span class="left"> Operator:</span> + <nz-select *ngIf="conditionType === 'value'" [(ngModel)]="this.defaultParams['operator']" (ngModelChange)="handleChange($event)"> + <nz-option [nzValue]="itemType.value" [nzLabel]="itemType.label" *ngFor="let itemType of operatorList"></nz-option> + </nz-select> + </p> + <div class="condition-type"> + <nz-radio-group [(ngModel)]="conditionType"> + <label nz-radio nzValue="value"> + Condition Value + <input type="text" nz-input id="condition_value" [(ngModel)]="this.defaultParams['conditionValue']" *ngIf="conditionType === 'value'" placeholder="please input condition value" /> + </label> + <label nz-radio nzValue="list" [nzDisabled]="true">Condition List</label> + </nz-radio-group> + </div> + </div> +</nz-modal>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/intent-management/input-intent-condition/input-intent-condition.component.less b/usecaseui-portal/src/app/views/intent-management/input-intent-condition/input-intent-condition.component.less new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/usecaseui-portal/src/app/views/intent-management/input-intent-condition/input-intent-condition.component.less diff --git a/usecaseui-portal/src/app/views/intent-management/input-intent-condition/input-intent-condition.component.spec.ts b/usecaseui-portal/src/app/views/intent-management/input-intent-condition/input-intent-condition.component.spec.ts new file mode 100644 index 00000000..916308db --- /dev/null +++ b/usecaseui-portal/src/app/views/intent-management/input-intent-condition/input-intent-condition.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { InputIntentConditionComponent } from './input-intent-condition.component'; + +describe('InputIntentConditionComponent', () => { + let component: InputIntentConditionComponent; + let fixture: ComponentFixture<InputIntentConditionComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ InputIntentConditionComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(InputIntentConditionComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/intent-management/input-intent-condition/input-intent-condition.component.ts b/usecaseui-portal/src/app/views/intent-management/input-intent-condition/input-intent-condition.component.ts new file mode 100644 index 00000000..22d3bfed --- /dev/null +++ b/usecaseui-portal/src/app/views/intent-management/input-intent-condition/input-intent-condition.component.ts @@ -0,0 +1,78 @@ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { Util } from '../../../shared/utils/utils'; + +@Component({ + selector: 'app-input-intent-condition', + templateUrl: './input-intent-condition.component.html', + styleUrls: ['../intent-management.component.less'] +}) +export class InputIntentConditionComponent implements OnInit { + + constructor( + private Util: Util + ) { } + + @Input() showModel: boolean; + @Output() modalOpreation = new EventEmitter(); + @Input() editConditionTableData; + + defaultParams:Object={ + conditionId:'', + conditionName:'', + operator:'EQUALTO', + conditionValue:'', + conditionList:null + }; + conditionType: string; + operatorList: any[] = []; + + ngOnChanges() { + // this.defaultParams=this.editConditionTableData + // if(this.editConditionTableData['conditionList'] === null){ + // this.conditionType='value' + // }else{ + // this.conditionType='list' + // this.secondParams=this.editConditionTableData['conditionList'] + // } + if (this.showModel) { + if (JSON.stringify(this.editConditionTableData)!=='{}') { + this.defaultParams=this.editConditionTableData + } + console.log(this.editConditionTableData) + } + } + ngOnInit() { + this.conditionType = 'value' + this.operatorList = [ + { label:'EQUALTO', value:'EQUALTO'}, + { label:'LARGETHAN', value:'LARGETHAN'}, + { label:'LESSTHAN', value:'LESSTHAN'} + ] + } + handleCancel(): void { + this.modalOpreation.emit({ "cancel": true }); + this.clearConditionData() + } + handleOk(): void { + if(JSON.stringify(this.editConditionTableData)==='{}'){ + this.defaultParams['conditionId']=this.Util.getUuid() + } + console.log(this.defaultParams) + this.modalOpreation.emit({ "cancel": false, "param": this.defaultParams }); + this.clearConditionData() + } + handleChange(event){ + this.defaultParams['operator']=event + } + clearConditionData(){ + this.conditionType = 'value' + this.defaultParams={ + conditionId:'', + conditionName:'', + operator:'EQUALTO', + conditionValue:'', + conditionList:null + }; + } + +} diff --git a/usecaseui-portal/src/app/views/intent-management/input-intent-expectation/input-intent-expectation.component.html b/usecaseui-portal/src/app/views/intent-management/input-intent-expectation/input-intent-expectation.component.html new file mode 100644 index 00000000..b20ba987 --- /dev/null +++ b/usecaseui-portal/src/app/views/intent-management/input-intent-expectation/input-intent-expectation.component.html @@ -0,0 +1,59 @@ +<nz-modal [(nzVisible)]="showModel" nzTitle="Add Expectation" nzCentered (nzOnCancel)="handleCancel()" + (nzOnOk)="handleOk()" nzWidth="52%" nzHeight="600px" class="intent-management-modal"> + <div class="add-expectation-container"> + <p class="expectation-p"> + <span class="left"> Expectation Name:</span> + <input nz-input id="expectation_name" [(ngModel)]="this.defaultParams['expectationName']"> + </p> + <p class="expectation-p"> + <span class="left"> Expectation Type:</span> + <nz-select [(ngModel)]="this.defaultParams['expectationType']"> + <nz-option [nzValue]="itemType.value" [nzLabel]="itemType.label" *ngFor="let itemType of expectationTypeList"></nz-option> + </nz-select> + </p> + <p class="expectation-p"> + <span class="left"> Object Instance:</span> + <input nz-input id="object_instance" [(ngModel)]="this.defaultParams['expectationObject']['objectInstance']"> + </p> + <p class="expectation-p"> + <span class="left"> Object Type:</span> + <nz-select [(ngModel)]="this.defaultParams['expectationObject']['objectType']"> + <nz-option [nzValue]="itemType.value" [nzLabel]="itemType.label" *ngFor="let itemType of expectationObjectTypeList"></nz-option> + </nz-select> + </p> + <div class="target-div"> + <p class="title"> + Target List + <button nz-button nzType="primary" class="add" (click)="inputIntentTargetShow()"> + {{"i18nTextDefine_Create" | translate}} </button> + </p> + <nz-table + #basicTable [nzData]="listOfData" + [nzFrontPagination]="false" + [nzShowPagination]="false" + > + <thead> + <tr> + <th nzWidth="10%">No</th> + <th nzWidth="20%">Target Name</th> + <th nzWidth="15%">{{"i18nTextDefine_Action" | translate}}</th> + </tr> + </thead> + <tbody> + <ng-template ngFor let-data [ngForOf]="basicTable.data" let-i="index"> + <tr> + <td>{{i+1}}</td> + <td>{{ data.targetName }}</td> + <td> + <em class="anticon anticon-edit" (click)="editTargetList(data,i)"></em> + <em class="anticon anticon-delete" (click)="deleteTargetList(i)"></em> + </td> + </tr> + </ng-template> + </tbody> + </nz-table> + </div> + + </div> + </nz-modal> +<app-input-intent-state [showModel]="intentTargetShow" (modalOpreation)="inputIntentStateClose($event)" [editTargetTableData]="editTargetTableList"></app-input-intent-state> diff --git a/usecaseui-portal/src/app/views/intent-management/input-intent-expectation/input-intent-expectation.component.less b/usecaseui-portal/src/app/views/intent-management/input-intent-expectation/input-intent-expectation.component.less new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/usecaseui-portal/src/app/views/intent-management/input-intent-expectation/input-intent-expectation.component.less diff --git a/usecaseui-portal/src/app/views/intent-management/input-intent-expectation/input-intent-expectation.component.spec.ts b/usecaseui-portal/src/app/views/intent-management/input-intent-expectation/input-intent-expectation.component.spec.ts new file mode 100644 index 00000000..797eddea --- /dev/null +++ b/usecaseui-portal/src/app/views/intent-management/input-intent-expectation/input-intent-expectation.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { InputIntentExpectationComponent } from './input-intent-expectation.component'; + +describe('InputIntentExpectationComponent', () => { + let component: InputIntentExpectationComponent; + let fixture: ComponentFixture<InputIntentExpectationComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ InputIntentExpectationComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(InputIntentExpectationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/intent-management/input-intent-expectation/input-intent-expectation.component.ts b/usecaseui-portal/src/app/views/intent-management/input-intent-expectation/input-intent-expectation.component.ts new file mode 100644 index 00000000..3848ffbb --- /dev/null +++ b/usecaseui-portal/src/app/views/intent-management/input-intent-expectation/input-intent-expectation.component.ts @@ -0,0 +1,109 @@ +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { Util } from '../../../shared/utils/utils'; + +@Component({ + selector: 'app-input-intent-expectation', + templateUrl: './input-intent-expectation.component.html', + styleUrls: ['../intent-management.component.less'] +}) +export class InputIntentExpectationComponent implements OnInit { + + constructor( + private Util: Util + ) { } + + @Input() showModel: boolean; + @Output() modalOpreation = new EventEmitter(); + @Input() editExpectationTableData; + + defaultParams:Object={ + expectationId:'', + expectationName:'', + expectationType:'DELIVERY', + expectationObject:{ + objectType:'CLL_VPN', + objectInstance:'', + }, + expectationTargets:[] + }; + currentIndex:number = -1; + + listOfData: any[] = []; + + intentTargetShow: boolean = false; + editTargetTableList: Object={}; + + expectationTypeList: any[] = []; + expectationObjectTypeList: any[] = []; + + ngOnInit() { + this.expectationTypeList = [ + { label:'DELIVERY', value:'DELIVERY' }, + { label:'ASSURANCE', value:'ASSURANCE' } + ] + this.expectationObjectTypeList = [ + { label:'CLL_VPN', value:'CLL_VPN' } + ] + } + + ngOnChanges() { + if (this.showModel) { + if (JSON.stringify(this.editExpectationTableData)!=='{}') { + this.defaultParams=this.editExpectationTableData + this.listOfData=this.defaultParams['expectationTargets'] + } + } + } + + handleCancel(): void { + this.modalOpreation.emit({ "cancel": true }); + this.clearExpectationData() + } + handleOk(): void { + if(JSON.stringify(this.editExpectationTableData)==='{}'){ + this.defaultParams['expectationId']=this.Util.getUuid() + } + this.modalOpreation.emit({ "cancel": false, "param": this.defaultParams }); + this.clearExpectationData() + } + editTargetList(data,i): void { + this.editTargetTableList=JSON.parse(JSON.stringify(data)) + this.currentIndex=i + this.intentTargetShow = true + } + deleteTargetList(i): void{ + this.listOfData.splice(i,1) + } + clearExpectationData(): void{ + this.showModel = false; + this.defaultParams = { + expectationId:'', + expectationName:'', + expectationType:'DELIVERY', + expectationObject:{ + objectType:'CLL_VPN', + objectInstance:'', + }, + expectationTargets:[] + }; + this.listOfData=[] + } + inputIntentTargetShow(): void { + this.intentTargetShow = true; + } + inputIntentStateClose($event: any): void { + this.intentTargetShow = false; + this.editTargetTableList={} + if ($event.cancel) { + return; + } + if(this.currentIndex>-1){ + this.listOfData[this.currentIndex]=$event.param + this.currentIndex=-1 + }else{ + this.listOfData.push($event.param) + } + this.defaultParams['expectationTargets']=this.listOfData + } + +} diff --git a/usecaseui-portal/src/app/views/intent-management/input-intent-management/input-intent-management.component.html b/usecaseui-portal/src/app/views/intent-management/input-intent-management/input-intent-management.component.html new file mode 100644 index 00000000..6a17f05b --- /dev/null +++ b/usecaseui-portal/src/app/views/intent-management/input-intent-management/input-intent-management.component.html @@ -0,0 +1,48 @@ +<nz-modal [(nzVisible)]="showModel" nzTitle="Add Intent" (nzOnCancel)="handleCancel()" + (nzOnOk)="handleOk()" nzWidth="56%" nzHeight="600px" class="intent-management-modal"> + <div class="subnet_params_container clearfix"> + <p> + Intent Name: + <input nz-input id="intent_name" [(ngModel)]="this.defaultParams['intentName']"> + </p> + <p class="title"> + Expectation List + <button nz-button nzType="primary" class="add" (click)="inputIntentExpectationShow()"> + {{"i18nTextDefine_Create" | translate}} </button> + </p> + <div class="intent-table"> + <nz-table + #basicTable [nzData]="listOfData" + [nzFrontPagination]="false" + [nzShowPagination]="false" + > + <thead> + <tr> + <th nzWidth="8%">No</th> + <th nzWidth="20%">Expectation Name</th> + <th nzWidth="20%">Expectation Type</th> + <th nzWidth="15%">Object Type</th> + <th nzWidth="22%">Object Instance</th> + <th nzWidth="15%">{{"i18nTextDefine_Action" | translate}}</th> + </tr> + </thead> + <tbody> + <ng-template ngFor let-data [ngForOf]="basicTable.data" let-i="index"> + <tr> + <td>{{i+1}}</td> + <td>{{ data.expectationName }}</td> + <td>{{ data.expectationType }}</td> + <td>{{ data.expectationObject.objectType }}</td> + <td>{{ data.expectationObject.objectInstance }}</td> + <td> + <em class="anticon anticon-edit" (click)="editExpectationList(data,i)"></em> + <em class="anticon anticon-delete" (click)="deleteExpectationList(i)"></em> + </td> + </tr> + </ng-template> + </tbody> + </nz-table> + </div> + </div> +</nz-modal> +<app-input-intent-expectation [showModel]="intentExpectationShow" (modalOpreation)="inputIntentExpectationClose($event)" [editExpectationTableData]="editExpectationTableList"></app-input-intent-expectation>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/intent-management/input-intent-management/input-intent-management.component.less b/usecaseui-portal/src/app/views/intent-management/input-intent-management/input-intent-management.component.less new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/usecaseui-portal/src/app/views/intent-management/input-intent-management/input-intent-management.component.less diff --git a/usecaseui-portal/src/app/views/intent-management/input-intent-management/input-intent-management.component.spec.ts b/usecaseui-portal/src/app/views/intent-management/input-intent-management/input-intent-management.component.spec.ts new file mode 100644 index 00000000..e7284904 --- /dev/null +++ b/usecaseui-portal/src/app/views/intent-management/input-intent-management/input-intent-management.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { InputIntentManagementComponent } from './input-intent-management.component'; + +describe('InputIntentManagementComponent', () => { + let component: InputIntentManagementComponent; + let fixture: ComponentFixture<InputIntentManagementComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ InputIntentManagementComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(InputIntentManagementComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/intent-management/input-intent-management/input-intent-management.component.ts b/usecaseui-portal/src/app/views/intent-management/input-intent-management/input-intent-management.component.ts new file mode 100644 index 00000000..180afcad --- /dev/null +++ b/usecaseui-portal/src/app/views/intent-management/input-intent-management/input-intent-management.component.ts @@ -0,0 +1,148 @@ +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { IntentManagementService } from '../../../core/services/intentManagement.service'; +import { Util } from '../../../shared/utils/utils'; + +@Component({ + selector: 'app-input-intent-management', + templateUrl: './input-intent-management.component.html', + styleUrls: ['../intent-management.component.less'] +}) +export class InputIntentManagementComponent implements OnInit { + + constructor( + private myhttp: IntentManagementService, + private Util: Util + ) { } + defaultParams:Object={ + intentId:'', + intentName:'', + intentExpectations:[ + { + expectationId:'', + expectationName:'', + expectationType:'', + expectationObject:{ + objectType:'', + objectInstance:'' + }, + expectationTargets:[ + { + targetId:'', + targetName:'', + targetCondition:{ + conditionId:'', + conditionName:'', + operator:'', + conditionValue:'', + conditionList:null + } + } + ] + } + ], + }; + currentIndex:number = -1; + intentExpectationShow: boolean = false; + editExpectationTableList: Object={}; + + listOfData: any[] = []; + + @Input() showModel: boolean; + @Input() editIntentTableData; + @Output() modalOpreation = new EventEmitter(); + + ngOnInit() {} + ngOnChanges() { + if (this.showModel) { + if (JSON.stringify(this.editIntentTableData)!=='{}') { + this.defaultParams=this.editIntentTableData + this.listOfData=this.editIntentTableData['intentExpectations'] + } + } + } + + handleCancel(): void { + this.showModel = false; + this.clearIntentData() + this.modalOpreation.emit({ "cancel": true }); + } + handleOk(): void { + this.showModel = false; + if(JSON.stringify(this.editIntentTableData)==='{}'){ + this.defaultParams['intentId']=this.Util.getUuid() + } + this.createIntentInstance() + this.modalOpreation.emit({ "cancel": false, "param": this.defaultParams }); + this.clearIntentData() + } + clearIntentData(): void{ + this.defaultParams = { + intentId:'', + intentName:'', + intentExpectations:[ + { + expectationId:'', + expectationName:'', + expectationType:'', + expectationObject:{ + objectType:'', + objectInstance:'' + }, + expectationTargets:[ + { + targetId:'', + targetName:'', + targetCondition:{ + conditionId:'', + conditionName:'', + operator:'', + conditionValue:'', + conditionList:null + } + } + ] + } + ] + }; + this.listOfData=[] + } + + inputIntentExpectationShow(): void { + this.intentExpectationShow = true; + } + inputIntentExpectationClose($event: any): void { + this.intentExpectationShow = false; + this.editExpectationTableList={} + if ($event.cancel) { + return; + } + if(this.currentIndex>-1){ + this.listOfData[this.currentIndex]=$event.param + this.currentIndex=-1 + }else{ + this.listOfData.push($event.param) + } + this.defaultParams['intentExpectations']=this.listOfData + } + editExpectationList(data,i): void { + this.editExpectationTableList=JSON.parse(JSON.stringify(data)) + this.currentIndex=i + this.intentExpectationShow = true + } + deleteExpectationList(i): void{ + this.listOfData.splice(i,1) + } + + createIntentInstance(): void { + this.myhttp.createIntentManagement({ + ...this.defaultParams + }).subscribe( + (response) => { + this.modalOpreation.emit({ "cancel": false }); + }, + (err) => { + console.log(err); + } + ) + } +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/intent-management/input-intent-state/input-intent-state.component.html b/usecaseui-portal/src/app/views/intent-management/input-intent-state/input-intent-state.component.html new file mode 100644 index 00000000..7d4db0d7 --- /dev/null +++ b/usecaseui-portal/src/app/views/intent-management/input-intent-state/input-intent-state.component.html @@ -0,0 +1,46 @@ +<nz-modal [(nzVisible)]="showModel" nzTitle="Add Target" nzCentered (nzOnCancel)="handleCancel()" + (nzOnOk)="handleOk()" nzWidth="48%" nzHeight="600px" class="intent-management-modal"> + <div class="subnet_params_container clearfix"> + <p> + <span class="left">Target Name:</span> + <input nz-input id="target_name" [(ngModel)]="this.defaultParams['targetName']"> + </p> + <div class="intent-table"> + <p class="title"> + Condition List + <button nz-button nzType="primary" class="add" (click)="inputTargetConditionShow()"> + {{"i18nTextDefine_Create" | translate}} </button> + </p> + <nz-table + #basicTable [nzData]="listOfData" + [nzFrontPagination]="false" + [nzShowPagination]="false" + > + <thead> + <tr> + <th nzWidth="10%">No</th> + <th nzWidth="20%">Condition Name</th> + <th nzWidth="20%">Operator</th> + <th nzWidth="35%">Condition Value</th> + <th nzWidth="15%">{{"i18nTextDefine_Action" | translate}}</th> + </tr> + </thead> + <tbody> + <ng-template ngFor let-data [ngForOf]="basicTable.data" let-i="index"> + <tr> + <td>{{i+1}}</td> + <td>{{ data.conditionName }}</td> + <td>{{ data.operator }}</td> + <td>{{ data.conditionValue }}</td> + <td> + <em class="anticon anticon-edit" (click)="editConditionList(data,i)"></em> + <em class="anticon anticon-delete" (click)="deleteConditionList(i)"></em> + </td> + </tr> + </ng-template> + </tbody> + </nz-table> + </div> + </div> +</nz-modal> +<app-input-intent-condition [showModel]="intentConditionShow" (modalOpreation)="inputIntentConditionClose($event)" [editConditionTableData]="editConditionTableList"></app-input-intent-condition> diff --git a/usecaseui-portal/src/app/views/intent-management/input-intent-state/input-intent-state.component.less b/usecaseui-portal/src/app/views/intent-management/input-intent-state/input-intent-state.component.less new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/usecaseui-portal/src/app/views/intent-management/input-intent-state/input-intent-state.component.less diff --git a/usecaseui-portal/src/app/views/intent-management/input-intent-state/input-intent-state.component.spec.ts b/usecaseui-portal/src/app/views/intent-management/input-intent-state/input-intent-state.component.spec.ts new file mode 100644 index 00000000..d945e25d --- /dev/null +++ b/usecaseui-portal/src/app/views/intent-management/input-intent-state/input-intent-state.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { InputIntentStateComponent } from './input-intent-state.component'; + +describe('InputIntentStateComponent', () => { + let component: InputIntentStateComponent; + let fixture: ComponentFixture<InputIntentStateComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ InputIntentStateComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(InputIntentStateComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/intent-management/input-intent-state/input-intent-state.component.ts b/usecaseui-portal/src/app/views/intent-management/input-intent-state/input-intent-state.component.ts new file mode 100644 index 00000000..5686b4f3 --- /dev/null +++ b/usecaseui-portal/src/app/views/intent-management/input-intent-state/input-intent-state.component.ts @@ -0,0 +1,94 @@ +import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'; +import { Util } from '../../../shared/utils/utils'; + +@Component({ + selector: 'app-input-intent-state', + templateUrl: './input-intent-state.component.html', + styleUrls: ['../intent-management.component.less'] +}) +export class InputIntentStateComponent implements OnInit { + + constructor( + private Util: Util + ) { } + + currentIndex:number = -1; + listOfData: any[] = []; + intentConditionShow: boolean = false; + editConditionTableList: Object={}; + + ngOnInit() { + this.operatorList = [ + { label:'EQUALTO', value:'EQUALTO'}, + { label:'LARGETHAN', value:'LARGETHAN'}, + { label:'LESSTHAN', value:'LESSTHAN'} + ] + this.conditionType = 'value' + } + @Input() showModel: boolean; + @Output() modalOpreation = new EventEmitter(); + @Input() editTargetTableData; + + defaultParams:Object={ + targetId:'', + targetName:'', + targetConditions:[] + }; + + operatorList: any[] = []; + conditionType: string; + + ngOnChanges() { + if (this.showModel) { + if (JSON.stringify(this.editTargetTableData)!=='{}') { + this.defaultParams=this.editTargetTableData + } + } + } + handleCancel(): void { + this.modalOpreation.emit({ "cancel": true }); + this.clearTargetConditionData() + } + handleOk(): void { + if(JSON.stringify(this.editTargetTableData)==='{}'){ + this.defaultParams['targetId']=this.Util.getUuid() + } + this.modalOpreation.emit({ "cancel": false, "param": this.defaultParams }); + this.clearTargetConditionData() + } + inputTargetConditionShow(): void { + this.intentConditionShow = true; + } + inputIntentConditionClose($event: any): void { + this.intentConditionShow = false; + this.editConditionTableList={} + if ($event.cancel) { + return; + } + if(this.currentIndex>-1){ + this.listOfData[this.currentIndex]=$event.param + this.currentIndex=-1 + }else{ + this.listOfData.push($event.param) + } + this.defaultParams['targetConditions']=this.listOfData + } + editConditionList(data,i): void { + this.editConditionTableList=JSON.parse(JSON.stringify(data)) + this.currentIndex=i + this.intentConditionShow = true + } + deleteConditionList(i): void{ + this.listOfData.splice(i,1) + } + clearTargetConditionData(): void{ + this.showModel = false; + this.defaultParams = { + targetId:'', + targetName:'', + targetConditions:[] + }; + this.listOfData=[] + } + +} diff --git a/usecaseui-portal/src/app/views/intent-management/intent-management.component.html b/usecaseui-portal/src/app/views/intent-management/intent-management.component.html new file mode 100644 index 00000000..7e3a5712 --- /dev/null +++ b/usecaseui-portal/src/app/views/intent-management/intent-management.component.html @@ -0,0 +1,50 @@ +<!-- + Copyright (C) 2022 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +--> +<div class="content"> + <p class="title"> + Intent List + <button nz-button nzType="primary" class="add" (click)="inputIntentModuleShow()"> + {{"i18nTextDefine_Create" | translate}} </button> + </p> + <nz-table + #basicTable [nzData]="listOfData" + [nzFrontPagination]="false" + [nzShowPagination]="false" + > + <thead> + <tr> + <th nzWidth="12%">No</th> + <th nzWidth="30%">Intent ID</th> + <th nzWidth="30%">Intent Name</th> + <th nzWidth="18%">{{"i18nTextDefine_Action" | translate}}</th> + </tr> + </thead> + <tbody> + <ng-template ngFor let-data [ngForOf]="basicTable.data" let-i="index"> + <tr> + <td>{{i+1}}</td> + <td>{{ data.intentId }}</td> + <td>{{ data.intentName }}</td> + <td> + <em class="anticon anticon-edit" (click)="editIntentList(data,i)"></em> + <em class="anticon anticon-delete" (click)="deleteIntentList(data)"></em> + </td> + </tr> + </ng-template> + </tbody> + </nz-table> +</div> +<app-input-intent-management [showModel]="intentModuleShow" (modalOpreation)="inputIntentModuleClose($event)" [editIntentTableData]="editIntentTableList"></app-input-intent-management>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/intent-management/intent-management.component.less b/usecaseui-portal/src/app/views/intent-management/intent-management.component.less new file mode 100644 index 00000000..04580fef --- /dev/null +++ b/usecaseui-portal/src/app/views/intent-management/intent-management.component.less @@ -0,0 +1,114 @@ +:host{ + display: block; +} +.content { + padding: 40px; + min-height: 937px; + height: 100vh; + .title{ + font-size: 30px; + color: #3C4F8C; + margin-bottom: 0.5em; + .add{ + float: right; + margin-top: 7px; + } + } + .anticon-edit,.anticon-delete{ + font-size: 18px; + margin-right: 10px; + cursor: pointer; + } +} + +.intent-management-modal{ + .add-expectation-container:after{ + content: ''; + display: block; + clear: both; + } + p{ + position: relative; + } + .ant-input{ + width: 300px; + } + .title{ + height: 32px; + line-height: 32px; + margin-bottom: 15px; + .add{ + float: right; + } + } + .required{ + color: #ff0000; + } + .intent-required{ + display: none; + } + .intent-error{ + position: absolute; + color: #ff0000; + top: 32px; + left: 110px; + } + .anticon-edit,.anticon-delete{ + font-size: 18px; + margin-right: 10px; + cursor: pointer; + } +} +.intent-table{ + margin-bottom: 15px; +} +.target-div{ + float: left; + width: 100%; +} +.expectation-p{ + position: relative; + float: left; + width: 50%; + .left{ + float: left; + width: 40%; + height: 32px; + line-height: 32px; + text-align: right; + padding-right: 2%; + } + .ant-input{ + float: left; + width: 58%; + } + .ant-select{ + width: 58%; + } +} +.w50{ + width: 50%; +} +.condition-type{ + float: left; + width: 100%; + [nz-radio] { + display: block; + height: 32px; + line-height: 32px; + margin-left: 15%; + .ant-input{ + width: 60%; + } + } + .ant-radio-group{ + width: 50%; + } +} +.intent-condition-div{ + width: 100%; + float: left; +} +.condition-operator-div{ + margin-left: 50px; +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/intent-management/intent-management.component.spec.ts b/usecaseui-portal/src/app/views/intent-management/intent-management.component.spec.ts new file mode 100644 index 00000000..9fe5114d --- /dev/null +++ b/usecaseui-portal/src/app/views/intent-management/intent-management.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { IntentManagementComponent } from './intent-management.component'; + +describe('IntentManagementComponent', () => { + let component: IntentManagementComponent; + let fixture: ComponentFixture<IntentManagementComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ IntentManagementComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(IntentManagementComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/intent-management/intent-management.component.ts b/usecaseui-portal/src/app/views/intent-management/intent-management.component.ts new file mode 100644 index 00000000..acd37ec9 --- /dev/null +++ b/usecaseui-portal/src/app/views/intent-management/intent-management.component.ts @@ -0,0 +1,60 @@ +import { Component, OnInit } from '@angular/core'; +import { IntentManagementService } from '../../core/services/intentManagement.service' + +@Component({ + selector: 'app-intent-management', + templateUrl: './intent-management.component.html', + styleUrls: ['./intent-management.component.less'] +}) +export class IntentManagementComponent implements OnInit { + + constructor(private myhttp: IntentManagementService) { } + + ngOnInit() { + this.getIntentManagementData() + } + + listOfData: any[] = []; + intentModuleShow: boolean = false; + editIntentTableList: Object={}; + currentIndex: number=-1; + + getIntentManagementData():void{ + this.myhttp.getIntentManagementData() + .subscribe( + (data) => { + this.listOfData=data + }, + (err) => { + console.error(err); + } + ) + } + inputIntentModuleShow(): void { + this.intentModuleShow = true; + } + inputIntentModuleClose($event: any): void { + this.intentModuleShow = false; + this.editIntentTableList={} + if ($event.cancel) { + return; + } + if(this.currentIndex>-1){ + this.listOfData[this.currentIndex]=$event.param + this.currentIndex=-1 + } + this.getIntentManagementData() + } + editIntentList(data,i): void { + this.editIntentTableList=JSON.parse(JSON.stringify(data)) + this.currentIndex=i + this.intentModuleShow = true + } + deleteIntentList(data): void{ + this.myhttp.deleteIntentManagementData(data.intentId).subscribe((data) => { + this.getIntentManagementData() + }, (err) => { + console.log(err); + }); + } +}
\ No newline at end of file diff --git a/usecaseui-portal/src/assets/i18n/cn.json b/usecaseui-portal/src/assets/i18n/cn.json index ecaa4f5b..09d7d716 100644 --- a/usecaseui-portal/src/assets/i18n/cn.json +++ b/usecaseui-portal/src/assets/i18n/cn.json @@ -9,6 +9,7 @@ "i18nTextDefine_SotnEline": "SOTN Eline", "i18nTextDefine_Mangement_5g": "5G切片管理", "i18nTextDefine_IntentBasedServices": "Intent-based Services", + "i18nTextDefine_IntentManagement": "Intent Management", "i18nTextDefine_PackageManagement": "包管理", "i18nTextDefine_Alarm": "告警", "i18nTextDefine_Performance": "性能", diff --git a/usecaseui-portal/src/assets/i18n/en.json b/usecaseui-portal/src/assets/i18n/en.json index 6dabf760..ba2f37ff 100644 --- a/usecaseui-portal/src/assets/i18n/en.json +++ b/usecaseui-portal/src/assets/i18n/en.json @@ -9,6 +9,7 @@ "i18nTextDefine_SotnEline": "SOTN Eline", "i18nTextDefine_Mangement_5g": "5G Slicing Management", "i18nTextDefine_IntentBasedServices": "Intent-based Services", + "i18nTextDefine_IntentManagement": "Intent Management", "i18nTextDefine_PackageManagement": "Package Management", "i18nTextDefine_Alarm": "Alarm", "i18nTextDefine_Performance": "Performance", diff --git a/usecaseui-portal/src/assets/images/intent-icon-active.png b/usecaseui-portal/src/assets/images/intent-icon-active.png Binary files differnew file mode 100644 index 00000000..98f0fc9e --- /dev/null +++ b/usecaseui-portal/src/assets/images/intent-icon-active.png diff --git a/usecaseui-portal/src/assets/images/intent-icon.png b/usecaseui-portal/src/assets/images/intent-icon.png Binary files differnew file mode 100644 index 00000000..7850abc3 --- /dev/null +++ b/usecaseui-portal/src/assets/images/intent-icon.png diff --git a/usecaseui-portal/src/styles.less b/usecaseui-portal/src/styles.less index e3b06d8e..51f726f3 100644 --- a/usecaseui-portal/src/styles.less +++ b/usecaseui-portal/src/styles.less @@ -883,4 +883,13 @@ nz-notification-container .ant-notification{ border-bottom: 1px solid gainsboro; border-right: 1px solid gainsboro; } -.monitor-table tr:nth-child(even) {background-color:#bfbfbf;}
\ No newline at end of file +.monitor-table tr:nth-child(even) {background-color:#bfbfbf;} + +.intent-management-modal .ant-modal-mask{ + background-color: rgba(0, 0, 0, 0.4); +} +.ant-modal-body:after{ + content: ''; + display: block; + clear: both; +}
\ No newline at end of file |
