feat:When creating a ccvpn instance, the bandwidth is selected from the drop-down box

Issue-ID: REQ-1214
Signed-off-by: zhaoyh6 <zhaoyh6@asiainfo.com>
Change-Id: I912e0c9164b1ac64db433d9d7db8024fc1134f46

3 files changed, 49 insertions, 3 deletions

diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.html b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.html
index 8d84b953..5abbe2ed 100644
--- a/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.html
+++ b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.html
@@ -49,14 +49,26 @@
               <div *ngIf="item.type === 'node_select_one'">
                 <div>
                   <span>{{item.rateName}}:</span>
-                  <input
+                  <!-- <input
                     nz-input
                     nz-tooltip
                     [id]="item.rateName"
                     [name]="item.rateName"
                     [(ngModel)]="cloud_leased_line_info[item.key].bandwidth"
                     [placeholder]="item.placeholder ? item.placeholder : ''"
-                  />
+                  /> -->
+                  <nz-select
+                    [name]="item.rateName"
+                    [disabled]="isUpdateFlag"
+                    [(ngModel)]="cloud_leased_line_info[item.key].bandwidth"
+                  >
+                    <nz-option
+                      [nzValue]="option.value"
+                      [nzLabel]="option.label"
+                      *ngFor="let option of bandWidthLists"
+                    >
+                    </nz-option>
+                  </nz-select>
                 </div>
                 <div>
                   <span>{{item.nodeName}}:</span>
diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.ts b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.ts
index 4299ba83..31053159 100644
--- a/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.ts
+++ b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.ts
@@ -22,6 +22,7 @@ export class CloudLeasedLineModalComponent implements OnInit {
   @Output() cancelEmitter = new EventEmitter<any>();
   comunicationFormItems = COMMUNICATION_FORM_ITEMS;
   isUpdateFlag: boolean = false;
+  bandWidthLists: any[] = [];
   nodeLists: any[] = [];
   cloudPointOptions: any[] = [];
   cloud_leased_line_info = {
@@ -41,11 +42,23 @@ export class CloudLeasedLineModalComponent implements OnInit {
     if (this.cloudLeasedLineShowFlag) {
       if (this.modelParams) {
         this.isUpdateFlag = this.modelParams.isUpdateFlag;
+        if (this.modelParams.accessPointOne && this.modelParams.accessPointOne.bandwidth) {
+          if (this.modelParams.accessPointOne.bandwidth > 4000) {
+            this.modelParams.accessPointOne.bandwidth = 4000;
+          } else if (this.modelParams.accessPointOne.bandwidth > 3750) {
+            this.modelParams.accessPointOne.bandwidth = 3750;
+          } else if (this.modelParams.accessPointOne.bandwidth > 2500) {
+            this.modelParams.accessPointOne.bandwidth = 2500;
+          } else {
+            this.modelParams.accessPointOne.bandwidth = 1250;
+          }
+        }
         this.cloud_leased_line_info = { ...this.modelParams };
       } else {
         this.getInstanceId();
       }
       this.queryAccessNodeInfo();
+      this.initBandWidth();
     }
 	}
   
@@ -65,6 +78,27 @@ export class CloudLeasedLineModalComponent implements OnInit {
     )
   }
 
+  initBandWidth() {
+    this.bandWidthLists = [
+      {
+        value:1250,
+        label:"1.25 - 10"
+      },
+      {
+        value:2500,
+        label:"2.50 - 20"
+      },
+      {
+        value:3750,
+        label:"3.75 - 30"
+      },
+      {
+        value:4000,
+        label:"4.00 - 40"
+      }
+    ];
+  }
+
   getInstanceId() {
     this.myHttp.getInstanceId().subscribe(
       (response) => {
diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/constants.ts b/usecaseui-portal/src/app/views/services/intent-based-services/constants.ts
index 6c3941c1..835fa38d 100644
--- a/usecaseui-portal/src/app/views/services/intent-based-services/constants.ts
+++ b/usecaseui-portal/src/app/views/services/intent-based-services/constants.ts
@@ -45,7 +45,7 @@ export const COMMUNICATION_FORM_ITEMS = [
 	{
 		title: "Access Point 1",
     nodeName: 'Name',
-    rateName: 'Bandwidth',
+    rateName: 'Bandwidth(Gb/s) - Price($1000/month)',
 		key: "accessPointOne",
 		type: "node_select_one",
 		required: true,