From 7bdeb7cc89a8d60e4c3199f1922a6bf73a9d83c1 Mon Sep 17 00:00:00 2001 From: zoulingli128 Date: Thu, 8 Sep 2022 15:32:27 +0800 Subject: Intent analysis frontend Issue-ID: USECASEUI-711 Signed-off-by: zoulingli128 Change-Id: I8f8636f6b47c5ba25e6f342c484fd8ffb5ed1d6d --- usecaseui-portal/src/app/app-routing.module.ts | 2 + usecaseui-portal/src/app/app.component.html | 13 ++ usecaseui-portal/src/app/app.module.ts | 12 ++ .../app/core/services/intentManagement.service.ts | 43 ++++++ usecaseui-portal/src/app/shared/utils/utils.ts | 14 ++ .../input-intent-condition.component.html | 24 ++++ .../input-intent-condition.component.less | 0 .../input-intent-condition.component.spec.ts | 25 ++++ .../input-intent-condition.component.ts | 78 +++++++++++ .../input-intent-expectation.component.html | 59 ++++++++ .../input-intent-expectation.component.less | 0 .../input-intent-expectation.component.spec.ts | 25 ++++ .../input-intent-expectation.component.ts | 109 +++++++++++++++ .../input-intent-management.component.html | 48 +++++++ .../input-intent-management.component.less | 0 .../input-intent-management.component.spec.ts | 25 ++++ .../input-intent-management.component.ts | 148 +++++++++++++++++++++ .../input-intent-state.component.html | 46 +++++++ .../input-intent-state.component.less | 0 .../input-intent-state.component.spec.ts | 25 ++++ .../input-intent-state.component.ts | 94 +++++++++++++ .../intent-management.component.html | 50 +++++++ .../intent-management.component.less | 114 ++++++++++++++++ .../intent-management.component.spec.ts | 25 ++++ .../intent-management.component.ts | 60 +++++++++ usecaseui-portal/src/assets/i18n/cn.json | 1 + usecaseui-portal/src/assets/i18n/en.json | 1 + .../src/assets/images/intent-icon-active.png | Bin 0 -> 1002 bytes usecaseui-portal/src/assets/images/intent-icon.png | Bin 0 -> 1049 bytes usecaseui-portal/src/styles.less | 11 +- 30 files changed, 1051 insertions(+), 1 deletion(-) create mode 100644 usecaseui-portal/src/app/core/services/intentManagement.service.ts create mode 100644 usecaseui-portal/src/app/views/intent-management/input-intent-condition/input-intent-condition.component.html create mode 100644 usecaseui-portal/src/app/views/intent-management/input-intent-condition/input-intent-condition.component.less create mode 100644 usecaseui-portal/src/app/views/intent-management/input-intent-condition/input-intent-condition.component.spec.ts create mode 100644 usecaseui-portal/src/app/views/intent-management/input-intent-condition/input-intent-condition.component.ts create mode 100644 usecaseui-portal/src/app/views/intent-management/input-intent-expectation/input-intent-expectation.component.html create mode 100644 usecaseui-portal/src/app/views/intent-management/input-intent-expectation/input-intent-expectation.component.less create mode 100644 usecaseui-portal/src/app/views/intent-management/input-intent-expectation/input-intent-expectation.component.spec.ts create mode 100644 usecaseui-portal/src/app/views/intent-management/input-intent-expectation/input-intent-expectation.component.ts create mode 100644 usecaseui-portal/src/app/views/intent-management/input-intent-management/input-intent-management.component.html create mode 100644 usecaseui-portal/src/app/views/intent-management/input-intent-management/input-intent-management.component.less create mode 100644 usecaseui-portal/src/app/views/intent-management/input-intent-management/input-intent-management.component.spec.ts create mode 100644 usecaseui-portal/src/app/views/intent-management/input-intent-management/input-intent-management.component.ts create mode 100644 usecaseui-portal/src/app/views/intent-management/input-intent-state/input-intent-state.component.html create mode 100644 usecaseui-portal/src/app/views/intent-management/input-intent-state/input-intent-state.component.less create mode 100644 usecaseui-portal/src/app/views/intent-management/input-intent-state/input-intent-state.component.spec.ts create mode 100644 usecaseui-portal/src/app/views/intent-management/input-intent-state/input-intent-state.component.ts create mode 100644 usecaseui-portal/src/app/views/intent-management/intent-management.component.html create mode 100644 usecaseui-portal/src/app/views/intent-management/intent-management.component.less create mode 100644 usecaseui-portal/src/app/views/intent-management/intent-management.component.spec.ts create mode 100644 usecaseui-portal/src/app/views/intent-management/intent-management.component.ts create mode 100644 usecaseui-portal/src/assets/images/intent-icon-active.png create mode 100644 usecaseui-portal/src/assets/images/intent-icon.png 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 @@ + +
  • + + + + home + + {{"i18nTextDefine_IntentManagement" | translate}} + + +
    • 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(this.url.getIntentManagement); + } + createIntentManagement(requestBody) { + return this.http.post(this.url["createIntentManagement"], requestBody); + } + deleteIntentManagementData(intentId) { + let params = new HttpParams({ fromObject: { "intentId": intentId } }); + return this.http.delete(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 @@ + +
    +

    + Condition Name: + +

    +

    + Operator: + + + +

    +
    + + + + +
    +
    +     \ 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 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; + + 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 @@ + +
    +

    + Expectation Name: + +

    +

    + Expectation Type: + + + +

    +

    + Object Instance: + +

    +

    + Object Type: + + + +

    +
    +

    + Target List + +

    + + + + No + Target Name + {{"i18nTextDefine_Action" | translate}} + + + + + + {{i+1}} + {{ data.targetName }} + + + + + + + + +
    + +
    +     + 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 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; + + 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 @@ + +
    +

    + Intent Name: + +

    +

    + Expectation List + +

    +
    + + + + No + Expectation Name + Expectation Type + Object Type + Object Instance + {{"i18nTextDefine_Action" | translate}} + + + + + + {{i+1}} + {{ data.expectationName }} + {{ data.expectationType }} + {{ data.expectationObject.objectType }} + {{ data.expectationObject.objectInstance }} + + + + + + + + +
    +
    +     + \ 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 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; + + 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 @@ + +
    +

    + Target Name: + +

    +
    +

    + Condition List + +

    + + + + No + Condition Name + Operator + Condition Value + {{"i18nTextDefine_Action" | translate}} + + + + + + {{i+1}} + {{ data.conditionName }} + {{ data.operator }} + {{ data.conditionValue }} + + + + + + + + +
    +
    +     + 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 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; + + 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 @@ + +
    +

    + Intent List + +

    + + + + No + Intent ID + Intent Name + {{"i18nTextDefine_Action" | translate}} + + + + + + {{i+1}} + {{ data.intentId }} + {{ data.intentName }} + + + + + + + + +
    + \ 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; + + 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 new file mode 100644 index 00000000..98f0fc9e Binary files /dev/null and b/usecaseui-portal/src/assets/images/intent-icon-active.png differ diff --git a/usecaseui-portal/src/assets/images/intent-icon.png b/usecaseui-portal/src/assets/images/intent-icon.png new file mode 100644 index 00000000..7850abc3 Binary files /dev/null and b/usecaseui-portal/src/assets/images/intent-icon.png differ 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 -- cgit 1.2.3-korg