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';
{ 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' }
];
</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>
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
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");
ManagemencsService,
TextService,
SlicingTaskServices,
+ IntentManagementService,
// fakeBackendProvider
],
declarations: [
MonitorServiceComponent,
MdonsNetworkComponent,
CitySelectComponent,
+ IntentManagementComponent,
+ InputIntentManagementComponent,
+ InputIntentExpectationComponent,
+ InputIntentStateComponent,
+ InputIntentConditionComponent,
],
imports: [
BrowserModule,
--- /dev/null
+/*
+ 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 });
+}
+}
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
--- /dev/null
+<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
--- /dev/null
+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();
+ });
+});
--- /dev/null
+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
+ };
+ }
+
+}
--- /dev/null
+<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>
--- /dev/null
+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();
+ });
+});
--- /dev/null
+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
+ }
+
+}
--- /dev/null
+<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
--- /dev/null
+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();
+ });
+});
--- /dev/null
+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
--- /dev/null
+<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>
--- /dev/null
+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();
+ });
+});
--- /dev/null
+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=[]
+ }
+
+}
--- /dev/null
+<!--
+ 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
--- /dev/null
+: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
--- /dev/null
+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();
+ });
+});
--- /dev/null
+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
"i18nTextDefine_SotnEline": "SOTN Eline",
"i18nTextDefine_Mangement_5g": "5G切片管理",
"i18nTextDefine_IntentBasedServices": "Intent-based Services",
+ "i18nTextDefine_IntentManagement": "Intent Management",
"i18nTextDefine_PackageManagement": "包管理",
"i18nTextDefine_Alarm": "告警",
"i18nTextDefine_Performance": "性能",
"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",
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
Code Review / usecase-ui.git / commitdiff
