feat:commit UUI front end code

Change-Id: I4cf28e3b9e6f3ea44b52f028f5dfd70fbf650853
Signed-off-by: liuwh7 <liuwh7@asiainfo.com>
Issue-ID: USECASEUI-525

9 files changed, 504 insertions, 127 deletions

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 c48d68f9..34e78e60 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
@@ -16,108 +16,151 @@
 
 <!-- tab -->
 <nz-tabset [nzTabPosition]="'top'" [nzType]="'card'">
-    <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab)"></nz-tab>
+  <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab)"></nz-tab>
 </nz-tabset>
 <div class="list">
-    <!-- upload -->
-    <div  class="listUploadContainer">
-        <div class="listupload">
-            <nz-upload nzType="drag" [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload">
-                <p class="ant-upload-drag-icon">
-                    <i nz-icon type="inbox" class="anticon anticon-inbox"></i>
-                </p>
-                <p class="ant-upload-text"> {{"i18nTextDefine_Click_CSAR_File" | translate}} </p>
-                <p class="ant-upload-hint"></p>
-            </nz-upload>
-            <button nz-button [nzLoading]="uploading" (click)="onClick()" [disabled]="fileList.length == 0" class="upload">
-                {{ uploading ? 'Uploading' : 'Start Upload' }}
-            </button>
-        </div>
-        <div class="listlin"></div>
-        <div class="listfile">
-            <div class="listFileTitle"> {{"i18nTextDefine_Uploaded_files" | translate}} </div>
-            <div class="nouploadfile" [style.display]="display">{{"i18nTextDefine_Nofileuploading" | translate}}</div>
-            <div class="listfilebgc" *ngIf="file">
-                <i class="anticon anticon-link icon"></i>
-                <div class="color" [ngClass]="{'progress':file.status}">{{file.name}}</div>
-                <div class="color" *ngIf="file.status">
-                    <nz-progress [nzPercent]="file.progress" [nzShowInfo]="false"></nz-progress>
-                </div>
-                <div class="color" *ngIf="!file.status">
-                    <span *ngIf="file.success === 0">{{"i18nTextDefine_File_upload_completed" | translate}}</span>
-                    <span *ngIf="file.success === 1">{{"i18nTextDefine_File_upload_failed" | translate}}</span>
-                </div>
-                <div *ngIf="!file.status">
-                    <i class="anticon anticon-check-circle success" *ngIf="file.success === 0"></i>
-                    <i class="anticon anticon-exclamation-circle fail"  *ngIf="file.success === 1"></i>
-                </div>
-            </div>
-        </div>
-    </div>
-    <!-- table -->
-    <nz-spin [nzSpinning]="isSpinning" class="listContainer">
-        <div class="mask" *ngIf="isSpinning"></div>
-        <nz-table #nzTable [nzData]="currentTab === 'NS'? nsTableData: (currentTab === 'VNF'? vnfTableData : pnfTableData)" nzShowSizeChanger [nzFrontPagination]="true"
-            [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [(nzPageSize)]="pageSize"
-            [(nzPageIndex)]='pageIndex' nzSize="middle">
-            <thead>
-                <tr class="theadColor">
-                    <th nzWidth="15%"> {{"i18nTextDefine_NO" | translate}} </th>
-                    <th nzWidth="15%"> {{"i18nTextDefine_Name" | translate}} </th>
-                    <th nzWidth="15%"> {{"i18nTextDefine_Version" | translate}} </th>
-                    <th nzWidth="15%"> {{"i18nTextDefine_OnboardingState" | translate}} </th>
-                    <th nzWidth="15%" *ngIf="currentTab !== 'PNF'"> {{"i18nTextDefine_OperationalState" | translate}} </th>
-                    <th nzWidth="10%"> {{"i18nTextDefine_UsageState" | translate}} </th>
-                    <th nzWidth="15%"> {{"i18nTextDefine_Operationbutton" | translate}} </th>
-                </tr>
-            </thead>
-            <tbody *ngIf="currentTab === 'NS'">
-                <tr *ngFor="let item of nzTable.data;let i = index;">
-                    <td>{{i+1}}</td>    
-                    <td>{{item.nsdName || item.name }}</td>     
-                    <td>{{item.nsdVersion || item.version}}</td>
-                    <td>{{item.nsdOnboardingState ? item.nsdOnboardingState : status}}</td>                       
-                    <td>{{item.nsdOperationalState}}</td>
-                    <td>{{item.nsdUsageState}}</td>
-                    <td>
-                        <i [ngClass]="{'cannotclick': isUpdate}"
-                            class="anticon anticon-upload upicon" #upload_icon (click)="updataService(item.uuid)"
-                            *ngIf="item.uuid"></i>
-                        <i class="anticon anticon-delete" (click)="showDeleteConfirm(item.id)"
-                            *ngIf="item.id"></i>
-                    </td>
-                </tr>
-            </tbody>
-            <tbody *ngIf="currentTab === 'VNF'">
-                <tr *ngFor="let item of nzTable.data;let i = index;">
-                    <td>{{i+1}}</td>
-                    <td>{{item.vnfProductName || item.name }}</td>     
-                    <td>{{item.vnfdVersion || item.version}}</td>
-                    <td>{{item.onboardingState}}</td>
-                    <td>{{item.operationalState}}</td>
-                    <td>{{item.usageState}}</td>
-                    <td>
-                        <i [ngClass]="{'cannotclick': isUpdate}"
-                            class="anticon anticon-upload upicon" #upload_icon (click)="updataService(item.uuid)"
-                            *ngIf="item.uuid"></i>
-                        <i class="anticon anticon-delete" (click)="showDeleteConfirm(item.id)"
-                            *ngIf="item.id"></i>
-                    </td>
-                </tr>
-            </tbody>
-            <tbody *ngIf="currentTab === 'PNF'" >
-                <tr *ngFor="let item of nzTable.data; let i = index;">
-                    <td>{{i+1}}</td>
-                    <td>{{item.pnfdName}}</td>
-                    <td>{{item.pnfdVersion}}</td>
-                    <td>{{item.pnfdOnboardingState}}</td>
-                    <td>{{item.pnfdUsageState}}</td>
-                    <td>
-                        <i class="anticon anticon-delete" (click)="showDeleteConfirm(item.id)"></i>
-                    </td>
-                </tr> 
-            </tbody>
-        </nz-table>
-    </nz-spin>
+  <!-- upload -->
+  <div  class="listUploadContainer">
+      <div class="listupload">
+          <nz-upload nzType="drag" [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload">
+              <p class="ant-upload-drag-icon">
+                  <i nz-icon type="inbox" class="anticon anticon-inbox"></i>
+              </p>
+              <p class="ant-upload-text"> {{"i18nTextDefine_Click_CSAR_File" | translate}} </p>
+              <p class="ant-upload-hint"></p>
+          </nz-upload>
+          <button nz-button [nzLoading]="uploading" (click)="onClick()" [disabled]="fileList.length == 0" class="upload">
+              {{ uploading ? 'Uploading' : 'Start Upload' }}
+          </button>
+      </div>
+      <div class="listlin"></div>
+      <div class="listfile">
+          <div class="listFileTitle"> {{"i18nTextDefine_Uploaded_files" | translate}} </div>
+          <div class="nouploadfile" [style.display]="display">{{"i18nTextDefine_Nofileuploading" | translate}}</div>
+          <div class="listfilebgc" *ngIf="file">
+              <i class="anticon anticon-link icon"></i>
+              <div class="color" [ngClass]="{'progress':file.status}">{{file.name}}</div>
+              <div class="color" *ngIf="file.status">
+                  <nz-progress [nzPercent]="file.progress" [nzShowInfo]="false"></nz-progress>
+              </div>
+              <div class="color" *ngIf="!file.status">
+                  <span *ngIf="file.success === 0">{{"i18nTextDefine_File_upload_completed" | translate}}</span>
+                  <span *ngIf="file.success === 1">{{"i18nTextDefine_File_upload_failed" | translate}}</span>
+              </div>
+              <div *ngIf="!file.status">
+                  <i class="anticon anticon-check-circle success" *ngIf="file.success === 0"></i>
+                  <i class="anticon anticon-exclamation-circle fail"  *ngIf="file.success === 1"></i>
+              </div>
+          </div>
+      </div>
+  </div>
+  <!-- table -->
+  <nz-spin [nzSpinning]="isSpinning" class="listContainer">
+      <div class="mask" *ngIf="isSpinning"></div>
+      <nz-table
+        #nzTable 
+        [nzData]="currentTab === 'NS'
+          ? nsTableData
+          : (currentTab === 'VNF'
+            ? vnfTableData
+            : (currentTab === 'PNF'
+              ? pnfTableData
+              : modelTableData
+              )
+            )"
+        nzShowSizeChanger
+        [nzFrontPagination]="true"
+        [nzShowQuickJumper]="true"
+        [nzPageSizeOptions]="[5,10,15,20]"
+        [(nzPageSize)]="pageSize"
+        [(nzPageIndex)]='pageIndex'
+        nzSize="middle"
+      >
+          <thead *ngIf="currentTab !== 'NLP Model Reource'">
+              <tr class="theadColor">
+                  <th nzWidth="15%"> {{"i18nTextDefine_NO" | translate}} </th>
+                  <th nzWidth="15%"> {{"i18nTextDefine_Name" | translate}} </th>
+                  <th nzWidth="15%"> {{"i18nTextDefine_Version" | translate}} </th>
+                  <th nzWidth="15%"> {{"i18nTextDefine_OnboardingState" | translate}} </th>
+                  <th nzWidth="15%" *ngIf="currentTab !== 'PNF'"> {{"i18nTextDefine_OperationalState" | translate}} </th>
+                  <th nzWidth="10%"> {{"i18nTextDefine_UsageState" | translate}} </th>
+                  <th nzWidth="15%"> {{"i18nTextDefine_Operationbutton" | translate}} </th>
+              </tr>
+          </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="20%"> {{"i18nTextDefine_Operation" | translate}} </th>
+            </tr>
+          </thead>
+          <tbody *ngIf="currentTab === 'NS'">
+              <tr *ngFor="let item of nzTable.data;let i = index;">
+                  <td>{{i+1}}</td>    
+                  <td>{{item.nsdName || item.name }}</td>     
+                  <td>{{item.nsdVersion || item.version}}</td>
+                  <td>{{item.nsdOnboardingState ? item.nsdOnboardingState : status}}</td>                       
+                  <td>{{item.nsdOperationalState}}</td>
+                  <td>{{item.nsdUsageState}}</td>
+                  <td>
+                      <i [ngClass]="{'cannotclick': isUpdate}"
+                          class="anticon anticon-upload upicon" #upload_icon (click)="updataService(item.uuid)"
+                          *ngIf="item.uuid"></i>
+                      <i class="anticon anticon-delete" (click)="showDeleteConfirm(item.id)"
+                          *ngIf="item.id"></i>
+                  </td>
+              </tr>
+          </tbody>
+          <tbody *ngIf="currentTab === 'VNF'">
+              <tr *ngFor="let item of nzTable.data;let i = index;">
+                  <td>{{i+1}}</td>
+                  <td>{{item.vnfProductName || item.name }}</td>     
+                  <td>{{item.vnfdVersion || item.version}}</td>
+                  <td>{{item.onboardingState}}</td>
+                  <td>{{item.operationalState}}</td>
+                  <td>{{item.usageState}}</td>
+                  <td>
+                      <i [ngClass]="{'cannotclick': isUpdate}"
+                          class="anticon anticon-upload upicon" #upload_icon (click)="updataService(item.uuid)"
+                          *ngIf="item.uuid"></i>
+                      <i class="anticon anticon-delete" (click)="showDeleteConfirm(item.id)"
+                          *ngIf="item.id"></i>
+                  </td>
+              </tr>
+          </tbody>
+          <tbody *ngIf="currentTab === 'PNF'" >
+              <tr *ngFor="let item of nzTable.data; let i = index;">
+                  <td>{{i+1}}</td>
+                  <td>{{item.pnfdName}}</td>
+                  <td>{{item.pnfdVersion}}</td>
+                  <td>{{item.pnfdOnboardingState}}</td>
+                  <td>{{item.pnfdUsageState}}</td>
+                  <td>
+                      <i class="anticon anticon-delete" (click)="showDeleteConfirm(item.id)"></i>
+                  </td>
+              </tr> 
+          </tbody>
+          <tbody *ngIf="currentTab === 'NLP Model Reource'">
+            <tr *ngFor="let item of nzTable.data;let i = index;">
+                <td>{{i+1}}</td>
+                <td>{{item.modelName}}</td>
+                <td>{{item.size}}</td>
+                <td>{{item.createTime}}</td>
+                <td>{{item.active ? 'Active' : 'Inactive'}}</td>
+                <td>
+                    <button nz-button nzType="primary" class="buy-button" (click)="showDeleteConfirm(item.id)">
+                        Delete
+                    </button>
+                    <button nz-button nzType="primary" class="buy-button" (click)="activedModelFile(item)">
+                        Actived
+                    </button>
+                </td>
+            </tr>
+          </tbody>
+      </nz-table>
+  </nz-spin>
 </div>
 <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 98f40637..0a25f2b1 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
@@ -31,7 +31,7 @@ export class OnboardVnfVmComponent implements OnInit {
   @ViewChild('notification') notification: any;
 
   // upload
-  tabs: string[] = ['NS', 'VNF', 'PNF'];
+  tabs: string[] = ['NS', 'VNF', 'PNF', 'NLP Model Reource'];
   currentTab: string = 'NS'
   fileList: UploadFile[] = [];
   uploading: boolean = false;
@@ -43,6 +43,7 @@ export class OnboardVnfVmComponent implements OnInit {
   nsTableData: any[];
   vnfTableData: any[];
   pnfTableData: any[];
+  modelTableData: any[];
   status: string = "Onboard Available";
   pageIndex: number = 1;
   pageSize: number = 10;
@@ -55,7 +56,8 @@ export class OnboardVnfVmComponent implements OnInit {
   url = {
     ns: '/api/nsd/v1/ns_descriptors/*_*/nsd_content',
     vnf: '/api/vnfpkgm/v1/vnf_packages/*_*/package_content',
-    pnf: '/api/nsd/v1/pnf_descriptors/*_*/pnfd_content'
+    pnf: '/api/nsd/v1/pnf_descriptors/*_*/pnfd_content',
+    model: '/api/usecaseui-server/v1/intent/uploadModel'
   };
 
   file: {
@@ -94,6 +96,9 @@ export class OnboardVnfVmComponent implements OnInit {
       case 'PNF':
         this.getTablePnfData()
         break
+      case 'NLP Model Reource':
+        this.getTableModelData();
+        break
     }
   }
 
@@ -113,8 +118,10 @@ export class OnboardVnfVmComponent implements OnInit {
       API = 'createNetworkServiceData';
     } else if (this.currentTab === 'VNF') {
       API = 'createVnfData';
-    } else {
+    } else if (this.currentTab === 'PNF') {
       API = 'createPnfData';
+    } else {
+      return false;
     }
     this.myhttp.getCreatensData(API, this.requestBody)//on-line
       .subscribe((data) => {
@@ -128,8 +135,58 @@ export class OnboardVnfVmComponent implements OnInit {
   // Drag and drop and click the upload button
   onClick(): void {
     this.display = 'none';
-    let tab = this.currentTab === 'NS' ? 'ns' : (this.currentTab === 'VNF' ? 'vnf' : 'pnf')
-    this.handleUpload(this.url[tab].replace("*_*", this.infoId));
+    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);
+  }
+
+  handleUploadModel(url: string): void {
+    const formData = new FormData();
+    // tslint:disable-next-line:no-any
+    this.fileList.forEach((file: any) => {
+      formData.set('file', file);
+    });
+    this.uploading = true;
+    this.file = {
+      name: this.fileList[0].name,
+      uid: this.fileList[0].uid,
+      progress: 0,
+      status: true,
+      success: 0
+    };
+    let requery = (file) => {
+      file.progress += 3;
+      setTimeout(() => {
+        if (file.progress < 100) {
+          requery(file)
+        }
+      }, 100)
+    };
+    requery(this.file);
+    const req = new HttpRequest('POST', url, formData, {
+      reportProgress: true,
+      withCredentials: true
+    });
+    //Upload pre-empty array
+    this.fileList = [];
+    this.http.request(req)
+      .pipe(filter(e => e instanceof HttpResponse))
+      .subscribe(
+        (event: {}) => {
+          this.file.progress = 100;
+          this.file.status = false;
+          this.uploading = false;
+          this.msg.success('upload successfully.');
+          this.getTableModelData();
+        },
+        err => {
+          this.file.progress = 100;
+          this.file.status = false;
+          this.file.success = 1;
+          this.uploading = false;
+          this.msg.error('upload failed.');
+        }
+      );
   }
 
   handleUpload(url: string): void {
@@ -244,6 +301,22 @@ export class OnboardVnfVmComponent implements OnInit {
       })
   }
 
+  // Get Model list
+  getTableModelData() {
+    this.isSpinning = true;
+    this.myhttp.getOnboardTableModelData()
+      .subscribe((data) => {
+        data.forEach(element => {
+          element['size'] = `${element['size']}K`;
+        })
+        this.modelTableData = data;
+        this.isSpinning = false;   //loading hide
+      }, (err) => {
+        console.error(err);
+        this.isSpinning = false;
+      })
+  }
+
   // confirm
   showConfirm(requestBody: object, id: string): void {
     let API = this.currentTab === 'NS' ? 'getNsonboard' : 'getVnfonboard';
@@ -333,17 +406,20 @@ export class OnboardVnfVmComponent implements OnInit {
       API = 'deleteNsIdData';
     } else if (this.currentTab === 'VNF') {
       API = 'deleteVnfIdData';
-    } else {
+    } else if (this.currentTab === 'PNF') {
       API = 'deletePnfIdData';
+    } else {
+      API = 'deleteModelIdData';
     }
     this.myhttp[API](pkgid)
       .subscribe((data) => {
         resolve()
-          if(data.status === 'FAILED'){
-              this.notification.notificationFailed(this.currentTab, 'delete', pkgid);
-          }else {
-              this.notification.notificationSuccess(this.currentTab, 'delete', pkgid);
-          }
+        let tipTitle = this.currentTab === 'NLP Model Reource' ? 'MODELREOURCE' : this.currentTab
+        if(data.status === 'FAILED'){
+            this.notification.notificationFailed(tipTitle, 'delete', pkgid);
+        }else {
+            this.notification.notificationSuccess(tipTitle, 'delete', pkgid);
+        }
         //refresh list after successful deletion
         switch (this.currentTab) {
           case 'NS':
@@ -355,10 +431,30 @@ export class OnboardVnfVmComponent implements OnInit {
           case 'PNF':
             this.getTablePnfData();
             break
+          case 'NLP Model Reource':
+            this.getTableModelData();
+            break
         }
       }, (err) => {
         console.log(err);
         this.notification.notificationFailed(this.currentTab, 'delete', pkgid);
       })
   }
+
+  // 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) => {
+        if(data.status === 'FAILED'){
+          this.msg.success('Actived Failed');
+          return;
+        }
+        this.msg.success('Actived Successfully');
+        this.getTableModelData();
+      }, (err) => {
+        console.error(err);
+      });
+  }
 }
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts
index 2418c904..693d6487 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts
@@ -19,17 +19,26 @@ export class BusinessOrderComponent implements OnInit {
 	ngOnInit() {}
 
 	ngOnChanges() {
-		this.AreaFormatting();
+	    let areaList = ["Beijing;Beijing;Haidian District;Wanshoulu Street"];
+            if (this.modelParams && this.showModel) {
+                this.slicing_order_info = {...this.modelParams};
+                if (this.slicing_order_info.coverageArea) {
+                    areaList = [];
+                    areaList.push(this.slicing_order_info.coverageArea.split(" ").join(";"));
+                }
+            }
+	    this.AreaFormatting(areaList);
 	}
-    detailFn(flag){
+        detailFn(flag){
 	  COMMUNICATION_FORM_ITEMS.forEach((item, index) => {
-		  if(item.key=='coverageAreaNumber'){
-			item["coverflag"] = flag == true ? false:true
-		  }
+	      if(item.key=='coverageAreaNumber'){
+		  item["coverflag"] = flag == true ? false:true
+	      }
 	  })
 	}
 
-	@Input() showModel: boolean;
+        @Input() showModel: boolean;
+        @Input() modelParams: any;
 	@Output() cancel = new EventEmitter<boolean>();
 	comunicationFormItems = COMMUNICATION_FORM_ITEMS;
 	slicing_order_info = {
@@ -47,9 +56,8 @@ export class BusinessOrderComponent implements OnInit {
 	validateRulesShow: any[] = [];
 	rulesText: any[] = [];
 	areaLevel: number = 4;
-    masktext: string = MASKTEXT ;
-	AreaFormatting(): void {
-		let areaList = ["Beijing;Beijing;Haidian District;Wanshoulu Street"];
+        masktext: string = MASKTEXT ;
+	AreaFormatting(areaList): void {
 		this.areaList = areaList.map((item: any) => {
 			let arr = item.split(";");
 			item = arr.map((it, index) => {
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html
index 6b43a8af..f229d7cf 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html
@@ -8,6 +8,7 @@
       </nz-select>
     </div>
     <button nz-button nzType="primary" class="buy-button" (click)="OrderModelShow()">Create</button>
+    <button nz-button nzType="primary" class="buy-button" (click)="inputOrderModelShow()">Smart Create</button>
   </div>
   <div class="slicing-resource-table-list">
     <nz-table #basicTable [nzData]="listOfData" [nzFrontPagination]="false" nzShowSizeChanger
@@ -68,5 +69,6 @@
       </tbody>
     </nz-table>
   </div>
-  <app-business-order [showModel]="businessOrderShow" (cancel)="orderModelClose($event)"></app-business-order>
+  <app-input-business-order [showModel]="inputBusinessOrderShow" (modalOpreation)="inputOrderModelClose($event)"></app-input-business-order>
+  <app-business-order [modelParams]="orderForm" [showModel]="businessOrderShow" (cancel)="orderModelClose($event)"></app-business-order>
 </div>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts
index a0a96b3f..6eb5e936 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts
@@ -47,7 +47,9 @@ export class CsmfSlicingBusinessManagementComponent implements OnInit {
 	statusOptions: any[] = BUSINESS_STATUS;
 	progressingTimer: any[] = [];
 	terminateStart: any[] = [];
-	businessOrderShow: boolean = false;
+        businessOrderShow: boolean = false;
+        inputBusinessOrderShow: boolean = false;
+        orderForm: any;
 	getCSMFBusinessList(): void {
 		this.loading = true;
 		// this.listOfData = []; //solve the problem of blank screen after each operation
@@ -232,10 +234,22 @@ export class CsmfSlicingBusinessManagementComponent implements OnInit {
 	}
 
 	OrderModelShow(): void {
-		this.businessOrderShow = true;
+            this.orderForm = null;
+	    this.businessOrderShow = true;
 	}
 	orderModelClose($event: any): void {
-		this.businessOrderShow = $event;
-		this.getCSMFBusinessList();
-	}
+	    this.businessOrderShow = $event;
+	    this.getCSMFBusinessList();
+        }
+        inputOrderModelShow(): void {
+            this.inputBusinessOrderShow = true;
+        }
+        inputOrderModelClose($event: any): void {
+            this.inputBusinessOrderShow = false;
+            if ($event.cancel) {
+                return;
+            }
+            this.orderForm = $event.param;
+            this.businessOrderShow = true;
+        }
 }
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component.html b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component.html
new file mode 100644
index 00000000..a448f3e0
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component.html
@@ -0,0 +1,38 @@
+<nz-spin nzTip='Loading...' [nzSpinning]="isSpinning">
+  <nz-modal [(nzVisible)]="showModel" nzTitle="Communication Service Message" (nzOnCancel)="handleCancel()"
+    (nzOnOk)="handleOk()" nzWidth="450px" nzHeight="600px">
+    <div class="subnet_params_container">
+      <nz-radio-group [(ngModel)]="radioValue">
+        <label nz-radio nzValue="text">Text Input</label>
+        <label nz-radio nzValue="audio">Audio Input</label>
+      </nz-radio-group>
+      <form nz-form *ngIf='radioValue === "text"' class='text-form-class'>
+        <nz-form-item>
+          <nz-form-control [nzSpan]="24">
+            <textarea [id]="communicationMessage" nz-tooltip
+              [ngClass]="{'error-input-border':validateRulesShow[0] === true}" nz-input
+              placeholder="Please input communicationMessage" [nzAutosize]="{ minRows: 6, maxRows: 6 }"
+              [(ngModel)]="communicationMessage" name="communicationMessage"
+              (blur)="this.Util.validator('communicationMessage','communicationMessage',communicationMessage,0,rulesText,validateRulesShow)">
+            </textarea>
+            <nz-form-explain *ngIf="validateRulesShow[0]" class="validateRules">{{rulesText[0]}}
+            </nz-form-explain>
+          </nz-form-control>
+        </nz-form-item>
+      </form>
+      <div *ngIf='radioValue === "audio"' class="audio_class">
+        <div class="recode_class">
+          <span>Sound Recording: </span>
+          <i *ngIf='!isPlay' class="anticon anticon-play-circle-o audioBtn" (click)="startAudio()"></i>
+          <i *ngIf='isPlay' class="anticon anticon-pause-circle-o audioBtn" (click)="stopAudio()"></i>
+          
+        </div>
+        <div class="play_class">
+          <span>Audition: </span>
+          <button (click)="playAudio()">Click To Play</button>
+          <audio class="audio-node" id="audio_id" autoplay></audio>
+        </div>
+      </div>
+    </div>
+  </nz-modal>
+</nz-spin>
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component.less b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component.less
new file mode 100644
index 00000000..025518f4
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component.less
@@ -0,0 +1,50 @@
+.subnet_params_container{
+  padding-left: 3%;
+  .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: 26px;
+      }
+      .audioBtn{
+        font-size: 27px;
+        position: absolute;
+        top: 10px;
+        left: 217px;
+      }
+      .anticon-pause-circle-o{
+        color: red;
+      }
+    }
+    .play_class{
+      font-size: 26px;
+      margin-top: 20px;
+    }
+  }
+}
+.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/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component.spec.ts b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component.spec.ts
new file mode 100644
index 00000000..ffdd130f
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.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/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component.ts
new file mode 100644
index 00000000..3196bbba
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component.ts
@@ -0,0 +1,101 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Util } from '../../../../../shared/utils/utils';
+import { onboardService } from '../../../../../core/services/onboard.service';
+import { Recorder } from '../../../../../shared/utils/recorder';
+
+@Component({
+  selector: 'app-input-business-order',
+  templateUrl: './input-business-order.component.html',
+  styleUrls: ['./input-business-order.component.less']
+})
+export class InputBusinessOrderComponent implements OnInit {
+
+  constructor(private Util: Util, private Recorder: Recorder, private myhttp: onboardService) { }
+
+  @Input() showModel: boolean;
+  @Output() modalOpreation = new EventEmitter();
+  isSpinning: boolean = false;
+  communicationMessage: String = "";
+  validateRulesShow: any[] = [];
+  rulesText: any[] = [];
+  radioValue: String = 'text';
+  isPlay: boolean = false;
+  clickRepeat: boolean = false;
+
+  ngOnInit() {
+    this.validateRulesShow = [];
+    this.rulesText = [];
+    this.communicationMessage = '';
+  }
+
+  ngOnChange() {
+  }
+
+  handleCancel(): void {
+    this.showModel = false;
+    this.communicationMessage = "";
+    this.modalOpreation.emit({ "cancel": true });
+  }
+
+  handleOk(): void {
+    if (this.clickRepeat) {
+      return;
+    }
+    this.clickRepeat = true;
+    if (this.radioValue === "text") {
+      this.submitFormMessage();
+      return;
+    }
+    this.clickRepeat = false;
+    this.communicationMessage = "";
+    this.showModel = false;
+    let defaultParams = {
+      coverageArea: "Beijing Beijing Haiding Wanshoulu",
+      expDataRateDL: "1000",
+      expDataRateUL: "1000",
+      latency: "10",
+      maxNumberofUEs: "10",
+      name: "exclusive slicing service",
+      resourceSharingLevel: "shared",
+      uEMobilityLevel: "stationary"
+    }
+    this.modalOpreation.emit({ "cancel": false, "param": defaultParams });
+  }
+  submitFormMessage(): void {
+    this.Util.validator("communicationMessage", "communicationMessage", this.communicationMessage, 0, this.rulesText, this.validateRulesShow);
+    if (this.validateRulesShow.indexOf(true) > -1) {
+      this.clickRepeat = false;
+      return
+    }
+    let params = {
+          "title": "predict",
+          "text": this.communicationMessage
+    };
+    this.myhttp["analysisInputText"](params)
+      .subscribe((data) => {
+        this.clickRepeat = false;
+        if (data === 0) {
+          return;
+        }
+        let orderForm = { ...data };
+        this.communicationMessage = "";
+        this.showModel = false;
+        this.modalOpreation.emit({ "cancel": false, "param": orderForm });
+      }, (err) => {
+        this.clickRepeat = false;
+        console.log(err);
+      })
+  }
+  startAudio(): void {
+    this.isPlay = true;
+    this.Recorder.beforeStartRecord();
+  }
+  stopAudio(): void {
+    this.isPlay = false;
+    this.Recorder.stopRecord();
+  }
+  playAudio(): void {
+    let audio = document.querySelector('audio');
+    audio["src"] = this.Recorder.playRecord();
+  }
+}