From c437d5360c75c1af5417c3681235a0f8015a9a85 Mon Sep 17 00:00:00 2001
From: liuwh7 <liuwh7@asiainfo.com>
Date: Wed, 15 Sep 2021 09:57:09 +0800
Subject: feat: add intent based service

Signed-off-by: liuwh7 <liuwh7@asiainfo.com>
Change-Id: If63eb5e61f01751771ad090728f33214077edd6f
Issue-ID: USECASEUI-605
---
 .../nlp-upload-dialog.component.html               |  30 +++++
 .../nlp-upload-dialog.component.less               |  56 ++++++++++
 .../nlp-upload-dialog.component.spec.ts            |  25 +++++
 .../nlp-upload-dialog.component.ts                 |  37 +++++++
 .../onboard-vnf-vm/onboard-vnf-vm.component.html   |  16 ++-
 .../onboard-vnf-vm/onboard-vnf-vm.component.ts     | 121 +++++++++++++++------
 6 files changed, 244 insertions(+), 41 deletions(-)
 create mode 100644 usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.html
 create mode 100644 usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.less
 create mode 100644 usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.spec.ts
 create mode 100644 usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.ts

(limited to 'usecaseui-portal/src/app/views/onboard-vnf-vm')

diff --git a/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.html b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.html
new file mode 100644
index 00000000..9e7f669b
--- /dev/null
+++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.html
@@ -0,0 +1,30 @@
+<nz-modal
+  [(nzVisible)]="isShowFlag"
+  nzTitle="NLP Model Type"
+  (nzOnCancel)="handleCancel()"
+  (nzOnOk)="handleOk()"
+  nzWidth="450px"
+  nzHeight="600px"
+>
+  <div class="subnet_params_container">
+    <form nz-form class='text-form-class'>
+      <nz-form-item>
+        <nz-form-label
+          [nzSpan]="7"
+          [nzFor]="nlpType"
+        >
+          Type
+        </nz-form-label>
+        <nz-form-control [nzSpan]="10">
+          <nz-select
+            [name]="nlpType"
+            [(ngModel)]="nlpType"
+          >
+            <nz-option nzValue="nlp" nzLabel="nlp"></nz-option>
+            <nz-option nzValue="intent" nzLabel="intent"></nz-option>
+          </nz-select>
+        </nz-form-control>
+      </nz-form-item>
+    </form>
+  </div>
+</nz-modal>
diff --git a/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.less b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.less
new file mode 100644
index 00000000..0cf44fad
--- /dev/null
+++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.less
@@ -0,0 +1,56 @@
+.subnet_params_container{
+  padding-left: 3%;
+  .text-form-class{
+    margin-bottom: 20px;
+  }
+  .subnet_params_area{
+    margin-right: 5px;
+  }
+  .ant-btn-icon-only{
+    padding: 0 5px !important;
+  }
+  .subnet_params_button{
+    margin-top: 7px;
+    margin-left: 10px;
+  }
+  .subnet_params_icon{
+    font-size: 14px;
+  }
+  .audio_class{
+    height: 130px;
+    .recode_class{
+      margin-top: 30px;
+      position: relative;
+      span{
+        font-size: 17px;
+      }
+      .audioBtn{
+        font-size: 20px;
+        position: absolute;
+        top: 5px;
+        left: 142px;
+      }
+      .anticon-pause-circle-o{
+        color: red;
+      }
+    }
+    .play_class{
+      font-size: 17px;
+      margin-top: 20px;
+      button {
+        margin-left: 2px;
+      }
+    }
+  }
+}
+.ant-form-item {
+  margin-top: 20px;
+  margin-bottom: -5px;
+}
+
+.validateRules{
+  color: red;
+}
+.error-input-border{
+  border-color: red!important;
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.spec.ts b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.spec.ts
new file mode 100644
index 00000000..ffdd130f
--- /dev/null
+++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InputBusinessOrderComponent } from './input-business-order.component';
+
+describe('InputBusinessOrderComponent', () => {
+  let component: InputBusinessOrderComponent;
+  let fixture: ComponentFixture<InputBusinessOrderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ InputBusinessOrderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InputBusinessOrderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.ts b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.ts
new file mode 100644
index 00000000..64b1973a
--- /dev/null
+++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.ts
@@ -0,0 +1,37 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { NzMessageService } from 'ng-zorro-antd';
+import { Recorder } from '../../../shared/utils/recorder';
+import { Util } from '../../../shared/utils/utils';
+
+@Component({
+  selector: 'app-nlp-upload-dialog',
+  templateUrl: './nlp-upload-dialog.component.html',
+  styleUrls: ['./nlp-upload-dialog.component.less']
+})
+export class NlpUploadDialogComponent implements OnInit {
+
+  constructor(
+    private Util: Util,
+    private Recorder: Recorder,
+    private msg: NzMessageService
+  ) { }
+
+  @Input() isShowFlag: boolean;
+  @Output() returnNlpType = new EventEmitter();
+  nlpType: String = "nlp";
+  
+  ngOnInit() {}
+
+  ngOnChange() {}
+
+  handleCancel(): void {
+    this.isShowFlag = false;
+    this.returnNlpType.emit({ "cancel": true });
+  }
+
+  handleOk(): void {
+    this.isShowFlag = false;
+    this.returnNlpType.emit({ "cancel": false, nlpType: this.nlpType });
+  }
+  
+}
diff --git a/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.html
index 34e78e60..2c7b11a5 100644
--- a/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.html
+++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.html
@@ -89,11 +89,12 @@
           </thead>
           <thead *ngIf="currentTab === 'NLP Model Reource'">
             <tr class="theadColor">
-                <th nzWidth="8%"> {{"i18nTextDefine_NO" | translate}} </th>
-                <th nzWidth="18%"> {{"i18nTextDefine_Name" | translate}} </th>
-                <th nzWidth="18%"> {{"i18nTextDefine_Size" | translate}} </th>
-                <th nzWidth="18%"> {{"i18nTextDefine_CreateTime" | translate}} </th>
-                <th nzWidth="18%"> {{"i18nTextDefine_Status" | translate}} </th>
+                <th nzWidth="5%"> {{"i18nTextDefine_NO" | translate}} </th>
+                <th nzWidth="15%"> {{"i18nTextDefine_Name" | translate}} </th>
+                <th nzWidth="15%"> {{"i18nTextDefine_Size" | translate}} </th>
+                <th nzWidth="15%"> {{"i18nTextDefine_CreateTime" | translate}} </th>
+                <th nzWidth="15%"> {{"i18nTextDefine_Status" | translate}} </th>
+                <th nzWidth="15%"> {{"i18nTextDefine_Type" | translate}} </th>
                 <th nzWidth="20%"> {{"i18nTextDefine_Operation" | translate}} </th>
             </tr>
           </thead>
@@ -150,6 +151,7 @@
                 <td>{{item.size}}</td>
                 <td>{{item.createTime}}</td>
                 <td>{{item.active ? 'Active' : 'Inactive'}}</td>
+                <td>{{item.type || '--'}}</td>
                 <td>
                     <button nz-button nzType="primary" class="buy-button" (click)="showDeleteConfirm(item.id)">
                         Delete
@@ -163,4 +165,8 @@
       </nz-table>
   </nz-spin>
 </div>
+<app-nlp-upload-dialog
+  [isShowFlag]="nlpDialogFlag"
+  (returnNlpType)="receiveNlpType($event)"
+></app-nlp-upload-dialog>
 <app-notification #notification [isServicesList]="false"></app-notification>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.ts b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.ts
index b9d74c19..ccdebc3b 100644
--- a/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.ts
+++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.ts
@@ -14,11 +14,11 @@
     limitations under the License.
 */
 import { HttpClient, HttpRequest, HttpResponse } from '@angular/common/http';
-import { Component, OnInit, HostBinding, ViewChild } from '@angular/core';
+import { Component, HostBinding, OnInit, ViewChild } from '@angular/core';
+import { NzMessageService, NzModalService, UploadFile } from 'ng-zorro-antd';
+import { filter } from 'rxjs/operators';
 import { onboardService } from '../../core/services/onboard.service';
 import { slideToRight } from '../../shared/utils/animates';
-import { NzMessageService, UploadFile, NzModalService } from 'ng-zorro-antd';
-import { filter } from 'rxjs/operators';
 
 @Component({
   selector: 'app-onboard-vnf-vm',
@@ -38,6 +38,10 @@ export class OnboardVnfVmComponent implements OnInit {
   infoId: string;
   display: string = 'block';
 
+  // nlp dialog
+  nlpDialogFlag: boolean = false;
+  nlpType: string = '';
+
   // table
   isSpinning: boolean = false;
   nsTableData: any[];
@@ -60,6 +64,20 @@ export class OnboardVnfVmComponent implements OnInit {
     model: '/api/usecaseui-server/v1/intent/uploadModel'
   };
 
+  tabMap = {
+    NS: 'ns',
+    VNF: 'vnf',
+    PNF: 'pnf',
+    'NLP Model Reource': 'model',
+  }
+
+  currentTabApi = {
+    NS: 'createNetworkServiceData',
+    VNF: 'createVnfData',
+    PNF: 'createPnfData',
+    'NLP Model Reource': '',
+  }
+
   file: {
     name: string,
     uid: string,
@@ -113,31 +131,51 @@ export class OnboardVnfVmComponent implements OnInit {
 
   beforeUpload = (file: UploadFile): boolean => {
     this.fileList.splice(0, 1, file);
-    let API: string;
-    if (this.currentTab === 'NS') {
-      API = 'createNetworkServiceData';
-    } else if (this.currentTab === 'VNF') {
-      API = 'createVnfData';
-    } else if (this.currentTab === 'PNF') {
-      API = 'createPnfData';
-    } else {
+    let API: string = this.currentTabApi[this.currentTab];
+    
+    if (!API) {
       return false;
     }
-    this.myhttp.getCreatensData(API, this.requestBody)//on-line
+    
+    this.myhttp.getCreatensData(API, this.requestBody)
       .subscribe((data) => {
         this.infoId = data["id"];
       }, (err) => {
         console.log(err);
-      })
+      });
+    
     return false;
   }
 
+  onClick() {
+    if (this.currentTab === 'NLP Model Reource') {
+      this.nlpDialogFlag = true;
+      return;
+    }
+    this.startUploadFile();
+  }
+
+  receiveNlpType(data) {
+    this.nlpDialogFlag = false;
+    if (data.cancel) {
+      return;
+    }
+    this.nlpType = data.nlpType;
+    this.startUploadFile();
+  }
+
   // Drag and drop and click the upload button
-  onClick(): void {
+  startUploadFile(): void {
     this.display = 'none';
-    let tab = this.currentTab === 'NS' ? 'ns' : (this.currentTab === 'VNF' ? 'vnf' : (this.currentTab === 'PNF' ? 'pnf' : 'model'));
-    let url = tab === "model" ? this.url[tab] : this.url[tab].replace("*_*", this.infoId);
-    tab === "model" ? this.handleUploadModel(url) : this.handleUpload(url);
+    let tab = this.tabMap[this.currentTab];
+    let url;
+    if (tab === "model") {
+      url = this.url[tab];
+      this.handleUploadModel(url);
+      return;
+    }
+    url = this.url[tab].replace("*_*", this.infoId);
+    this.handleUpload(url);
   }
 
   handleUploadModel(url: string): void {
@@ -243,24 +281,36 @@ export class OnboardVnfVmComponent implements OnInit {
     this.isSpinning = true;
     //ns vfc lists 
     this.myhttp.getOnboardTableData()
-      .subscribe((data) => {
-        this.nsTableData = data;
-        //ns sdc list
-        this.myhttp.getSDC_NSTableData()
-          .subscribe((data) => {
-            this.isSpinning = false; //loading hide
-            let nsData = data;
-            // this.NSTableData.map((nsvfc) => { nsvfc.sameid = nsData.find((nssdc) => { return nsvfc.id == nssdc.uuid }) && nsvfc.id; return nsvfc; });
-            let sameData = nsData.filter((nssdc) => { return !this.nsTableData.find((nsvfc) => { return nsvfc.id == nssdc.uuid }) });
-            this.nsTableData = this.nsTableData.concat(sameData);
-          }, (err) => {
-            this.msg.error(err);
-            this.isSpinning = false;
-          })
-      }, (err) => {
-        this.msg.error(err);
-        this.isSpinning = false;
-      })
+      .subscribe(
+        (data) => {
+          this.nsTableData = data;
+          //ns sdc list
+          this.myhttp.getSDC_NSTableData()
+            .subscribe(
+              (data) => {
+                this.isSpinning = false; //loading hide
+                if (!data) {
+                  return;
+                }
+                let nsData = data;
+                let sameData = nsData.filter((nssdc) => {
+                  return !this.nsTableData.find((nsvfc) => {
+                    return nsvfc.id == nssdc.uuid
+                  })
+                });
+                this.nsTableData = this.nsTableData.concat(sameData);
+              },
+              (err) => {
+                this.msg.error(err);
+                this.isSpinning = false;
+              }
+            )
+        },
+        (err) => {
+          this.msg.error(err);
+          this.isSpinning = false;
+        }
+      )
   }
 
   // Get the vnf list
@@ -443,7 +493,6 @@ export class OnboardVnfVmComponent implements OnInit {
 
   // Actived Model Resource
   activedModelFile(data) {
-    console.log('actived model');
     let url = `/api/usecaseui-server/v1/intent/activeModel?modelId=${data.id}`;
     this.myhttp.getOnboardTableActiveModelData(url)
       .subscribe((data) => {
-- 
cgit 1.2.3-korg