feat: add intent based service

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

3 files changed, 231 insertions, 0 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
new file mode 100644
index 00000000..9bb9ffa4
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.html
@@ -0,0 +1,86 @@
+<nz-modal
+  [(nzVisible)]="cloudLeasedLineShowFlag"
+  nzTitle="Create Cloud Leased Line"
+  (nzOnCancel)="cancel()"
+  nzWidth="70%"
+  [nzFooter]="modalFooter"
+>
+  <div class="subnet_params_container">
+    <form nz-form>
+        <nz-form-item *ngFor="let item of comunicationFormItems; let i = index">
+            <nz-form-label
+              [nzSpan]="7"
+              [nzRequired]="item.required"
+              [nzFor]=" item.key"
+            >
+                {{ item.title }}
+            </nz-form-label>
+            <nz-form-control [nzSpan]="10">
+              <div *ngIf="item.type === 'text'">{{cloud_leased_line_info[item.key]}}</div>
+              <nz-tooltip
+                [nzTitle]="item.scoped && item.scopedText ? item.scopedText : ''"
+                [nzPlacement]="'right'"
+                [nzTrigger]="'focus'"
+              >
+                <input
+                  nz-input
+                  nz-tooltip
+                  [id]="item.key"
+                  [name]="item.key"
+                  *ngIf="item.type === 'input'"
+                  [(ngModel)]="cloud_leased_line_info[item.key]"
+                  [ngClass]="{'error-input-border' : validateRulesShow[i] === true}"
+                  [placeholder]="item.placeholder ? item.placeholder : ''"
+                  (blur)="item.required ? this.Util.validator(item.title,item.key,cloud_leased_line_info[item.key],i,rulesText,validateRulesShow) : this.Util.validator()"
+                />
+              </nz-tooltip>
+              <nz-select
+                [name]="item.key"
+                [(ngModel)]="cloud_leased_line_info[item.key]"
+                *ngIf="item.type === 'select'"
+              >
+                <nz-option
+                  [nzValue]="option.key"
+                  [nzLabel]="option.title"
+                  *ngFor="let option of cloudPointOptions"
+                >
+                </nz-option>
+              </nz-select>
+              <div *ngIf="item.type === 'node_select_one'">
+                <div>
+                  <span>{{item.rateName}}:</span>
+                  <input
+                    nz-input
+                    nz-tooltip
+                    [id]="item.key"
+                    [name]="item.key"
+                    [(ngModel)]="cloud_leased_line_info[item.key].bandwidth"
+                    [ngClass]="{'error-input-border' : validateRulesShow[i] === true}"
+                    [placeholder]="item.placeholder ? item.placeholder : ''"
+                    (blur)="item.required ? this.Util.validator(item.title,item.key,cloud_leased_line_info[item.key],i,rulesText,validateRulesShow) : this.Util.validator()"
+                  />
+                </div>
+                <div>
+                  <span>{{item.nodeName}}:</span>
+                  <nz-select
+                    [name]="item.key"
+                    [(ngModel)]="cloud_leased_line_info[item.key].name"
+                  >
+                    <nz-option
+                      [nzValue]="option.key"
+                      [nzLabel]="option.title"
+                      *ngFor="let option of nodeLists"
+                    >
+                    </nz-option>
+                  </nz-select>
+                </div>
+              </div>
+            </nz-form-control>
+        </nz-form-item>
+    </form>
+  </div>
+  <ng-template #modalFooter>
+    <button nz-button nzType="default" (click)="cancel()">Cancel</button>
+    <button nz-button nzType="primary" (click)="submit()" [nzLoading]="loading">OK</button>
+  </ng-template>
+</nz-modal>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.less b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.less
new file mode 100644
index 00000000..09a0a168
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.less
@@ -0,0 +1,40 @@
+.radio_txt {
+  p {
+    margin-bottom: 0px;
+    &:last-child {
+      margin-top: -18px;
+    }
+  }
+}
+.button_submit {
+  text-align: right;
+  padding-right: 306px;
+  .cancelBtn {
+    margin-right: 15px;
+  }
+}
+::ng-deep .ant-form-item-label {
+  text-align: left;
+  padding-left: 50px;
+}
+::ng-deep .ant-radio-button-wrapper {
+  padding: 0 45px;
+}
+::ng-deep .ant-radio-button-wrapper:hover {
+  color: #54657e;
+  border-color: none;
+}
+::ng-deep .ant-radio-button-wrapper-checked {
+  -webkit-box-shadow: -1px 0 0 0 #40a9ff;
+  background: #40a9ff;
+  border-color: #40a9ff;
+  color: #fff;
+}
+::ng-deep .ant-radio-button-wrapper-checked:hover {
+  -webkit-box-shadow: -1px 0 0 0 #40a9ff;
+  border-color: #40a9ff;
+  color: #fff;
+}
+::ng-deep .ant-radio-button-wrapper-checked:first-child {
+  border-color: #40a9ff;
+}
\ No newline at end of file
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
new file mode 100644
index 00000000..0f0afc79
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.ts
@@ -0,0 +1,105 @@
+import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
+import { NzMessageService } from "ng-zorro-antd";
+import { intentBaseService } from "../../../../core/services/intentBase.service";
+import { Util } from "../../../../shared/utils/utils";
+import { COMMUNICATION_FORM_ITEMS } from "../constants";
+
+@Component({
+  selector: 'app-cloud-leased-line-modal',
+  templateUrl: './cloud-leased-line-modal.component.html',
+  styleUrls: ['./cloud-leased-line-modal.component.less']
+})
+export class CloudLeasedLineModalComponent implements OnInit {
+
+  constructor(
+    private myHttp: intentBaseService,
+		private nzMessage: NzMessageService,
+		private Util: Util
+	) {}
+
+  @Input() modelParams: any;
+  @Input() cloudLeasedLineShowFlag: boolean;
+  @Output() cancelEmitter = new EventEmitter<boolean>();
+  comunicationFormItems = COMMUNICATION_FORM_ITEMS;
+  validateRulesShow: any[] = [];
+  isLoadingOne = false;
+  nodeLists: any[] = [];
+  cloudPointOptions: any[] = [];
+  cloud_leased_line_info = {
+		name: '',
+		instanceId: '',
+		accessPointOne: {
+      name: '',
+      bandwidth: ''
+    },
+		cloudPointName: '',
+	};
+
+  ngOnInit(): void {}
+  
+  ngOnChanges() {
+    if (this.cloudLeasedLineShowFlag) {
+      if (this.modelParams) {
+        this.cloud_leased_line_info = { ...this.modelParams };
+      } else {
+        this.getInstanceId();
+      }
+      this.queryAccessNodeInfo();
+    }
+	}
+  
+  queryAccessNodeInfo() {
+    this.myHttp.queryAccessNodeInfo().subscribe(
+      (response) => {
+        console.log(response);
+      },
+      (err) => {
+        console.log(err);
+      }
+    )
+  }
+
+  getInstanceId() {
+    this.myHttp.getInstanceId().subscribe(
+      (response) => {
+        const { code, message, data} = response;
+        if (code !== 200) {
+          this.nzMessage.error(message);
+          return;
+        }
+        this.cloud_leased_line_info.instanceId = data && data.instanceId;
+      },
+      (err) => {
+        console.log(err);
+      }
+    )
+  }
+
+  submit(): void {
+    this.myHttp.createIntentInstance({
+      ...this.cloud_leased_line_info
+    }).subscribe(
+      (data) => {
+        console.log(data);
+        this.cancel();
+      },
+      (err) => {
+        console.log(err);
+      }
+    )
+  }
+
+  cancel(): void {
+    this.cloudLeasedLineShowFlag = false
+    this.cloud_leased_line_info = {
+      name: '',
+      instanceId: '',
+      accessPointOne: {
+        name: '',
+        bandwidth: ''
+      },
+      cloudPointName: '',
+    };
+    this.cancelEmitter.emit();
+  }
+}
\ No newline at end of file