Intent analysis frontend

Issue-ID: USECASEUI-711

Signed-off-by: zoulingli128 <zll_1208@126.com>
Change-Id: I8f8636f6b47c5ba25e6f342c484fd8ffb5ed1d6d

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
new 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
new 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