diff options
Diffstat (limited to 'usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line')
3 files changed, 272 insertions, 0 deletions
diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.html b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.html new file mode 100644 index 00000000..331eb7b0 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.html @@ -0,0 +1,99 @@ +<div> + <div nz-row> + <button + nz-button + nzType="primary" + class="buy-button" + (click)="cloudLeasedLineShow()" + > + Create + </button> + <button + nz-button + nzType="primary" + class="buy-button" + (click)="smartCloudLeasedLineShow()" + > + Smart Create + </button> + </div> + <div class="slicing-resource-table-list"> + <nz-table + #basicTable [nzData]="listOfData" + [nzFrontPagination]="false" + nzShowSizeChanger + [nzPageSizeOptions]="[5,10,15,20]" + [nzTotal]='total' + [(nzPageSize)]="pageSize" + [(nzPageIndex)]='pageIndex' + [nzLoading]="loading" + (nzPageIndexChange)="searchData()" + (nzPageSizeChange)="searchData()" + > + <thead> + <tr> + <th nzWidth="6%">No</th> + <th nzWidth="15%">Communication Service Name</th> + <th nzWidth="10%">Intent Instance ID</th> + <th nzWidth="6%">Status</th> + <th nzWidth="20%">{{"i18nTextDefine_Operationbutton" | translate}}</th> + </tr> + </thead> + <tbody> + <ng-template ngFor let-data [ngForOf]="basicTable.data" let-i="index"> + <tr> + <td>{{i+1}}</td> + <td>{{ data.name }}</td> + <td>{{ data.instanceId }}</td> + <td>{{ statusObj[data.status] }}</td> + <td> + <button + nz-button + nzType="primary" + class="buy-button" + (click)="goMonitorService()" + > + Intent Monitor + </button> + <button + *ngIf="data.status === '3'" + nz-button + nzType="primary" + class="buy-button" + (click)="activeCloudLeasedLine(data)" + > + Active + </button> + <button + *ngIf="data.status === '1'" + nz-button + nzType="primary" + class="buy-button" + (click)="inactiveCloudLeasedLine(data)" + > + Inactive + </button> + <button + nz-button + nzType="primary" + class="buy-button" + (click)="deleteCloudLeasedLine(data)" + > + Delete + </button> + </td> + </tr> + </ng-template> + </tbody> + </nz-table> + </div> + <app-smart-cloud-leased-modal + [samrtCloudLeasedLineShowFlag]="smartCloudLeasedLineShowFlag" + (resolveEmitter)="smartCloudLeasedLineClose($event)" + ></app-smart-cloud-leased-modal> + <app-cloud-leased-line-modal + [modelParams]="resolveResult" + [cloudLeasedLineShowFlag]="cloudLeasedLineShowFlag" + (cancelEmitter)="cloudLeasedLineClose()" + ></app-cloud-leased-line-modal> +</div>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.less b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.less new file mode 100644 index 00000000..df2a899e --- /dev/null +++ b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.less @@ -0,0 +1,41 @@ +nz-select { + width: 200px; +} + +.task_status { + margin-bottom: 20px; + + span { + margin-right: 5%; + } +} + +.action-icon { + display: inline-block; + vertical-align: top; +} + +i.anticon { + cursor: pointer; + font-size: 18px; + padding: 2px 15px; + vertical-align: inherit !important; + + &:hover { + color: #147dc2; + } +} + +.cannotclick { + pointer-events: none; + color: #aaa; + opacity: 0.6; +} + +.buy-button { + float: right; + margin-right: 2%; +} +::ng-deep .ant-table-row .buy-button { + float: left; +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.ts b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.ts new file mode 100644 index 00000000..bf046545 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.ts @@ -0,0 +1,132 @@ +import { Component, OnInit } from "@angular/core"; +import { Router } from "@angular/router"; +import { NzMessageService } from "ng-zorro-antd"; +import { intentBaseService } from "../../../../core/services/intentBase.service"; + +@Component({ + selector: 'app-cloud-leased-line', + templateUrl: './cloud-leased-line.component.html', + styleUrls: ['./cloud-leased-line.component.less'] +}) +export class CloudLeasedLineComponent implements OnInit { + + constructor( + private router:Router, + private myHttp: intentBaseService, + private nzMessage: NzMessageService + ) {} + + ngOnChanges() {} + + ngOnInit() { + this.pageIndex = 1; + this.pageSize = 10; + this.getCloudLeasedLineList(); + } + + ngOnDestroy() {} + + statusObj: any = { + 0: 'Incomplete', + 1: 'Completed', + 2: 'Deleted', + 3: 'Inactive' + } + // 列表数据源 + listOfData: any[] = []; + // 分页信息及总数 + pageIndex: number = 1; + pageSize: number = 10; + total: number = 0; + loading = false; + // 控制弹窗展示变量 + cloudLeasedLineShowFlag: boolean = false; + smartCloudLeasedLineShowFlag: boolean = false; + // 初始化查询数据源 + getCloudLeasedLineList(): void { + this.myHttp.getInstanceList({ + currentPage: this.pageIndex, + pageSize: this.pageSize + }).subscribe((response) => { + const { code, message, data } = response; + if (code !== 200) { + this.nzMessage.error(message); + return; + } + this.total = data.totalRecords; + this.listOfData = [...data.list]; + }, (err) => { + console.log(err); + }); + } + // 分页信息变更查询数据 + searchData(): void { + this.getCloudLeasedLineList(); + } + // 解析结果传递到create弹窗 + resolveResult: any; + // 弹窗加载 + cloudLeasedLineShow(): void { + this.cloudLeasedLineShowFlag = true; + } + // 弹窗关闭 + cloudLeasedLineClose(): void { + this.cloudLeasedLineShowFlag = false; + this.pageIndex = 1; + this.pageSize = 10; + this.getCloudLeasedLineList(); + } + // smart 弹窗加载 + smartCloudLeasedLineShow(): void { + this.smartCloudLeasedLineShowFlag = true; + } + // smart 弹窗关闭 + smartCloudLeasedLineClose(data): void { + this.smartCloudLeasedLineShowFlag = false; + if (data.cancel) { + return; + } + this.cloudLeasedLineShowFlag = true; + this.resolveResult = { + name: 'test', + instanceId: '123456', + accessPointOne: { + name: 'aaa', + bandwidth: '20' + }, + cloudPointName: 'aaa', + }; + } + // 跳转监控管理页面 + goMonitorService(): void { + this.router.navigateByUrl('/fcaps/monitor_service'); + } + + activeCloudLeasedLine(row): void { + this.myHttp.activeIntentInstance({ + instanceId: row.instanceId + }).subscribe((data) => { + console.log(data); + }, (err) => { + console.log(err); + }); + } + + inactiveCloudLeasedLine(row): void { + this.myHttp.invalidIntentInstance({ + instanceId: row.instanceId + }).subscribe((data) => { + console.log(data); + }, (err) => { + console.log(err); + }); + } + + deleteCloudLeasedLine(row): void { + this.myHttp.deleteIntentInstance(row.instanceId).subscribe((data) => { + console.log(data); + }, (err) => { + console.log(err); + }); + } +}
\ No newline at end of file |