Intent analysis frontend

Issue-ID: USECASEUI-711

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

4 files changed, 221 insertions, 0 deletions

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