summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src
diff options
context:
space:
mode:
authorguochuyicmri <guochuyi@chinamobile.com>2019-01-21 16:53:17 +0800
committerguochuyicmri <guochuyi@chinamobile.com>2019-01-21 16:58:24 +0800
commitefe7d00c5ce63fa5ab28158485876d3772194c1f (patch)
tree98d50987036f0394e7610929fbf106df8b020d5b /usecaseui-portal/src
parent9ed97927108df3ba9041441e89370fe4c2b6460a (diff)
Fix instance instantiation for CCVPN
Change-Id: I4920a1e277de18d55599aff8d3c2bbd7b49480ab Issue-ID: USECASEUI-170 Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src')
-rw-r--r--usecaseui-portal/src/app/services/services-list/services-list.component.html486
-rw-r--r--usecaseui-portal/src/app/services/services-list/services-list.component.less102
-rw-r--r--usecaseui-portal/src/app/services/services-list/services-list.component.ts18
-rw-r--r--usecaseui-portal/src/assets/images/create-box.pngbin0 -> 61405 bytes
-rw-r--r--usecaseui-portal/src/styles.less237
5 files changed, 561 insertions, 282 deletions
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.html b/usecaseui-portal/src/app/services/services-list/services-list.component.html
index 76950c32..28162251 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.html
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.html
@@ -13,236 +13,276 @@
See the License for the specific language governing permissions and
limitations under the License.
-->
-<h3 class="title"> Services List </h3>
-<hr>
-<div class="action">
- <span>Customer: </span>
- <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
- <button nz-button nz-dropdown><span>{{customerSelected.name}}</span> <i class="anticon anticon-down"></i></button>
- <ul nz-menu style="max-height: 200px; overflow: auto;">
- <li nz-menu-item (click)="choseCustomer(item)" *ngFor="let item of customerList">
- <a title="{{item.name}}" style="max-width: 165px; overflow: hidden; text-overflow: ellipsis;">{{item.name}}</a>
- </li>
- </ul>
- </nz-dropdown>
-
- &nbsp;&nbsp;
- <span>Service Type: </span>
- <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
- <button nz-button nz-dropdown><span>{{serviceTypeSelected.name}}</span> <i class="anticon anticon-down"></i></button>
- <ul nz-menu style="max-height: 200px; overflow: auto;">
- <li nz-menu-item (click)="choseServiceType(item)" *ngFor="let item of serviceTypeList">
- <a title="{{item.name}}" style="max-width: 165px; overflow: hidden; text-overflow: ellipsis;">{{item.name}}</a>
- </li>
- </ul>
- </nz-dropdown>
+<div class="action ant-tabs-bar">
+ <span>Customer: </span>
+ <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
+ <button nz-button nz-dropdown><span>{{customerSelected.name}}</span> <i class="anticon anticon-down"></i>
+ </button>
+ <ul nz-menu style="min-height:40px;max-height: 200px; overflow: auto;">
+ <li nz-menu-item (click)="choseCustomer(item)" *ngFor="let item of customerList">
+ <a title="{{item.name}}" style="max-width: 165px; overflow: hidden; text-overflow: ellipsis;">{{item.name}}</a>
+ </li>
+ </ul>
+ </nz-dropdown>
- <button class="create" nz-button [nzType]="'primary'" (click)="createModal()"><i class="anticon anticon-plus-circle-o"></i><span> Create </span></button>
- <nz-modal [(nzVisible)]="isVisible" nzTitle="Create" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
- <span style="display:inline-block;width:70px;">Service: </span>
- <nz-select style="width: 165px;" [(ngModel)]="templateTypeSelected" nzAllowClear (ngModelChange)="choseTemplateType()">
- <!-- <nz-option *ngFor="let item of templateType" [nzValue]="item" [nzLabel]="item"></nz-option> -->
- <nz-option nzValue="SOTN" nzLabel="SOTN"></nz-option>
- <nz-option nzValue="CCVPN" nzLabel="CCVPN"></nz-option>
- <nz-option nzValue="E2E Service" nzLabel="E2E Service"></nz-option>
- <nz-option nzValue="Network Service" nzLabel="Network Service"></nz-option>
- </nz-select>
+ &nbsp;&nbsp;
+ <span>Service Type: </span>
+ <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
+ <button nz-button nz-dropdown><span>{{serviceTypeSelected.name}}</span> <i class="anticon anticon-down"></i>
+ </button>
+ <ul nz-menu style="min-height:40px;max-height: 200px; overflow: auto;">
+ <li nz-menu-item (click)="choseServiceType(item)" *ngFor="let item of serviceTypeList">
+ <a title="{{item.name}}" style="max-width: 165px; overflow: hidden; text-overflow: ellipsis;">{{item.name}}</a>
+ </li>
+ </ul>
+ </nz-dropdown>
- <hr>
- <div *ngIf="templateTypeSelected == 'SOTN'||templateTypeSelected == 'CCVPN'">
- <span>SOTN VPN: </span>
- <nz-select style="width: 165px;" [(ngModel)]="template1" nzAllowClear >
- <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option>
- </nz-select>
+ <button class="create" nz-button [nzType]="'primary'" (click)="createModal()"><i
+ class="anticon anticon-plus-circle-o"></i><span> Create </span></button>
+ <nz-modal nzWidth="428" [(nzVisible)]="isVisible" nzTitle="CREATE" (nzOnCancel)="handleCancel()"
+ (nzOnOk)="handleOk()">
+ <div class="select-list">
+ <span style="display:inline-block;width:70px;">Service: </span>
+ <nz-select style="width: 176px;float: right;" [(ngModel)]="templateTypeSelected" nzAllowClear
+ (ngModelChange)="choseTemplateType()">
+ <!-- <nz-option *ngFor="let item of templateType" [nzValue]="item" [nzLabel]="item"></nz-option> -->
+ <nz-option nzValue="SOTN" nzLabel="SOTN"></nz-option>
+ <nz-option nzValue="CCVPN" nzLabel="CCVPN"></nz-option>
+ <nz-option nzValue="E2E Service" nzLabel="E2E Service"></nz-option>
+ <nz-option nzValue="Network Service" nzLabel="Network Service"></nz-option>
+ </nz-select>
+ </div>
- <br><br>
- <span style="display:inline-block;width:70px;"> SITE: </span>
- <nz-select style="width: 165px;" [(ngModel)]="template2" nzAllowClear >
- <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option>
- </nz-select>
-
- <div *ngIf="templateTypeSelected == 'CCVPN'">
- <br>
- <span style="display:inline-block;width:70px;">SD-WAN: </span>
- <nz-select style="width: 165px;" [(ngModel)]="template3" nzAllowClear >
- <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option>
- </nz-select>
- </div>
- </div>
+ <div *ngIf="templateTypeSelected == 'SOTN'||templateTypeSelected == 'CCVPN'">
+ <div class="select-list">
+ <span style="display:inline-block;">SOTN VPN: </span>
+ <nz-select style="width: 176px;float: right;" [(ngModel)]="template1" nzAllowClear>
+ <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option>
+ </nz-select>
+ </div>
+ <div class="select-list">
+ <span style="display:inline-block;width:70px;"> SITE: </span>
+ <nz-select style="width: 176px;float: right;" [(ngModel)]="template2" nzAllowClear>
+ <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option>
+ </nz-select>
+ </div>
+ <div *ngIf="templateTypeSelected == 'CCVPN'">
+ <div class="select-list">
+ <span style="display:inline-block;width:70px;">SD-WAN: </span>
+ <nz-select style="width: 176px;float: right;" [(ngModel)]="template3" nzAllowClear>
+ <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option>
+ </nz-select>
+ </div>
+ </div>
+ </div>
- <div *ngIf="templateTypeSelected == 'E2E Service'||templateTypeSelected == 'Network Service'">
- <span style="display:inline-block;width:70px;">TEMPLATE: </span>
- <nz-select style="width: 165px;" [(ngModel)]="template4" nzAllowClear >
- <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option>
- </nz-select>
- </div>
- </nz-modal>
+ <div *ngIf="templateTypeSelected == 'E2E Service'||templateTypeSelected == 'Network Service'">
+ <div class="select-list">
+ <span style="display:inline-block;width:70px;">TEMPLATE: </span>
+ <nz-select style="width: 176px;float: right;" [(ngModel)]="template4" nzAllowClear>
+ <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option>
+ </nz-select>
+ </div>
+ </div>
+ </nz-modal>
</div>
-<div class="list">
- <nz-table *ngIf="1"
- #nzTable [nzData]="tableData"
- nzShowSizeChanger
- [nzFrontPagination]="false"
- [nzShowQuickJumper]="true"
- [nzPageSizeOptions]="[5,10,15,20]"
- [nzTotal]= 'total'
- [(nzPageSize)]="pageSize"
- [(nzPageIndex)]='pageIndex'
- [nzLoading]="loading"
- [nzSize]="'middle'"
- [nzScroll]="{ y: '58vh' }"
- (nzPageIndexChange)="searchData()"
- (nzPageSizeChange)="searchData(true)">
- <thead>
- <tr>
- <th nzWidth="5%">NO</th>
- <th nzWidth="5%"></th>
- <th nzWidth="20%">Service Instance Id</th>
- <th nzWidth="20%">Name</th>
- <th nzWidth="15%">Type</th>
- <th nzWidth="20%">Status</th>
- <th nzWidth="15%">Action</th>
- </tr>
- </thead>
- <tbody>
- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index">
- <tr>
- <td>{{pageSize*(pageIndex-1) + i+1}}</td>
- <td [nzShowExpand]="data.childServiceInstances[0]" [(nzExpand)]="data.expand"></td>
- <td>{{data["service-instance-id"] || data.nsInstanceId}}</td>
- <td>{{data["service-instance-name"] || data.nsName}}</td>
- <td>{{data.serviceDomain}}</td>
- <td>
+<nz-layout style=" padding: 20px 32px; ">
+ <ul class="top-num">
+ <li *ngFor="let item of serviceMunber" class="top-list">
+ <span class="round">{{item.serviceDomain}}</span>
+ <div class="top-list-text">
+ <span>{{item.number}}</span><br>
+ <span>{{item.serviceDomain}}&nbsp;&nbsp;Service Instances</span>
+ </div>
+ </li>
+ </ul>
+ <div class="list">
+ <nz-table *ngIf="1"
+ #nzTable [nzData]="tableData"
+ nzShowSizeChanger
+ [nzFrontPagination]="false"
+ [nzShowQuickJumper]="true"
+ [nzPageSizeOptions]="[5,10,15,20]"
+ [nzTotal]='total'
+ [(nzPageSize)]="pageSize"
+ [(nzPageIndex)]='pageIndex'
+ [nzLoading]="loading"
+ [nzSize]="'middle'"
+ [nzScroll]="{ y: '58vh' }"
+ (nzPageIndexChange)="searchData()"
+ (nzPageSizeChange)="searchData(true)">
+ <thead>
+ <tr>
+ <th nzWidth="5%">NO</th>
+ <th nzWidth="5%"></th>
+ <th nzWidth="20%">Service Instance Id</th>
+ <th nzWidth="20%">Name</th>
+ <th nzWidth="15%">Service</th>
+ <th nzWidth="20%">Status</th>
+ <th nzWidth="15%">Action</th>
+ </tr>
+ </thead>
+ <tbody>
+ <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index">
+ <tr>
+ <td>{{pageSize*(pageIndex-1) + i+1}}</td>
+ <td [nzShowExpand]="data.childServiceInstances[0]" [(nzExpand)]="data.expand"></td>
+ <td>{{data["service-instance-id"] || data.nsInstanceId}}</td>
+ <td>{{data["service-instance-name"] || data.nsName}}</td>
+ <td [ngClass]="{'e2eColor':data.serviceDomain=='E2E Service','nsColor':data.serviceDomain=='Network Service','ccvpnColor':data.serviceDomain=='CCVPN','sotnColor':data.serviceDomain=='SOTN'}">
+ {{data.serviceDomain}}
+ </td>
+ <td>
<span [ngClass]="{'active':data.statusClass=='2001','closed':data.statusClass=='Closed','onboarding':data.statusClass=='Onboarding',
'updating':data.statusClass=='Updating','deleting':data.statusClass=='1002','creating':data.statusClass=='1001',
'scaling':data.statusClass=='1003','healing':data.statusClass=='1004'}">{{data.tips}}</span>
- <nz-progress *ngIf="data.status == 'In Progress'" [nzPercent]="data.rate"></nz-progress>
- </td>
- <td>
- <i [ngClass]="{'cannotclick':data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}"
- *ngIf="data.serviceDomain=='E2E Service' " class="anticon anticon-setting" (click)="scaleService(data)"></i>
- <!-- <i *ngIf="data.serviceDomain=='E2E Service'||data.serviceDomain=='Network Service' " class="anticon anticon-cloud-upload-o" (click)="updataService(data)"></i> -->
- <!-- <i [ngClass]="{'cannotclick':data.status == 'processing'||data.status=='Deleting'||data.status=='Creating'||data.status=='Healing'}"
- *ngIf="data.serviceDomain=='Network Service' " class="anticon anticon-reload" (click)="healService(data)"></i> -->
- <i [ngClass]="{'cannotclick':data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}"
- *ngIf="data.serviceDomain=='SOTN'||data.serviceDomain=='CCVPN' " class="anticon anticon-ellipsis" (click)="serviceDetail(data)"></i>
- <i [ngClass]="{'cannotclick':data.status == 'In Progress'}" class="anticon anticon-delete" (click)="deleteModel(data)"></i>
- </td>
- </tr>
- <tr class="childtr" [nzExpand]="data.expand" *ngFor="let item of data.childServiceInstances">
- <td></td>
- <td></td>
- <td>{{item["service-instance-id"] || item.nsInstanceId || item.vnfInstanceId}}</td>
- <td>{{item["service-instance-name"] || item.nsName || item.vnfInstanceName}}</td>
- <td>{{item.serviceDomain}}</td>
- <td>
- <span [ngClass]="{'healing':item.status=='Healing'}">{{item.status || "Available"}}</span>
- <nz-progress *ngIf=" item.status == 'Healing' " [nzPercent]="item.rate"></nz-progress>
- </td>
- <td>
- <i *ngIf="item.serviceDomain=='vnf'" [ngClass]="{'cannotclick':data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}" class="anticon anticon-reload" (click)="healService(item)"></i>
- </td>
- </tr>
- </ng-template>
- </tbody>
- </nz-table>
+ <nz-progress *ngIf="data.status == 'In Progress'" [nzPercent]="data.rate"></nz-progress>
+ </td>
+ <td>
+ <i [ngClass]="{'cannotclick':data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}"
+ class="anticon anticon-ellipsis" (click)="serviceDetail(data)"></i>
+ <i [ngClass]="{'cannotclick':data.status == 'In Progress'}" class="anticon anticon-delete"
+ (click)="deleteModel(data)"></i>
+ <i [ngClass]="{'cannotclick':data.serviceDomain!='E2E Service' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}"
+ class="anticon anticon-setting" (click)="scaleService(data)"></i>
+ <!-- <i *ngIf="data.serviceDomain=='E2E Service'||data.serviceDomain=='Network Service' " class="anticon anticon-cloud-upload-o" (click)="updataService(data)"></i> -->
+ <!-- <i [ngClass]="{'cannotclick':data.status == 'processing'||data.status=='Deleting'||data.status=='Creating'||data.status=='Healing'}"
+ *ngIf="data.serviceDomain=='Network Service' " class="anticon anticon-reload" (click)="healService(data)"></i> -->
+ </td>
+ </tr>
+ <tr class="childtr" [nzExpand]="data.expand" *ngFor="let item of data.childServiceInstances">
+ <td></td>
+ <td></td>
+ <td>{{item["service-instance-id"] || item.nsInstanceId || item.vnfInstanceId}}</td>
+ <td>{{item["service-instance-name"] || item.nsName || item.vnfInstanceName}}</td>
+ <td>{{item.serviceDomain}}</td>
+ <td>
+ <span [ngClass]="{'healing':item.status=='Healing'}">{{item.status || "Available"}}</span>
+ <nz-progress *ngIf=" item.status == 'Healing' " [nzPercent]="item.rate"></nz-progress>
+ </td>
+ <td>
+ <i [ngClass]="{'cannotclick':data.serviceDomain!='E2E Service' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}"
+ class="anticon anticon-reload" (click)="healService(item)"></i>
+ </td>
+ </tr>
+ </ng-template>
+ </tbody>
+ </nz-table>
- <nz-modal [nzVisible]="scaleModelVisible" nzTitle="Scale" (nzOnCancel)="scaleCancel()" (nzOnOk)="scaleOk()">
- <h3><i class="anticon anticon-question-circle" style="color:yellow;"></i>Are you sure heal this instance?</h3>
- Instance ID: <b style="color:green"> {{ thisService["service-instance-id"] || thisService["nsInstanceId"] || thisService["vnfInstanceId"]}}</b>
- <div *ngFor="let item of e2e_nsData">
- <h3>{{ item.netWorkServiceName }}</h3><hr>
- <span style="display:inline-block;width:50%;">Scale Type:</span>
- <nz-select style="width: 165px;" [(ngModel)]="item.scaleType">
- <nz-option nzValue="SCALE_NS" nzLabel="SCALE_NS"></nz-option>
- <nz-option nzValue="SCALE_VNF" nzLabel="SCALE_VNF"></nz-option>
- </nz-select>
- <span style="display:inline-block;width:50%;">AspectId:</span>
- <input style="width: 165px;" nz-input [(ngModel)]="item.aspectId" placeholder="string">
- <span style="display:inline-block;width:50%;">Number Of Steps:</span>
- <nz-input-number style="width: 165px;" [(ngModel)]="item.numberOfSteps" [nzMin]="1" [nzMax]="100" nzPrecision=0 [nzStep]="1" nzPlaceHolder="number"></nz-input-number>
- <span style="display:inline-block;width:50%;">Scaling Direction:</span>
- <nz-select style="width: 165px;" nzPlaceHolder="Chose" [(ngModel)]="item.scalingDirection">
- <nz-option nzValue="SCALE_IN" nzLabel="SCALE_IN"></nz-option>
- <nz-option nzValue="SCALE_OUT" nzLabel="SCALE_OUT"></nz-option>
- </nz-select>
- </div>
- </nz-modal>
- <nz-modal [(nzVisible)]="deleteModelVisible" nzTitle="Delete" (nzOnCancel)="deleteCancel()" (nzOnOk)="deleteOk()">
- <h3><i class="anticon anticon-question-circle" style="color:yellow;"></i>Are you sure delete this instance?</h3>
- Instance ID: <b class="deleteModelContent"> {{ thisService["service-instance-id"] || thisService["nsInstanceId"] }}</b>
- <div *ngIf="thisService['serviceDomain'] == 'Network Service'">
- <span style="display:inline-block;width:50%;">terminationType:</span>
- <nz-select style="width: 165px;" [(ngModel)]="terminationType" >
- <nz-option nzValue="graceful" nzLabel="graceful"></nz-option>
- <nz-option nzValue="forceful" nzLabel="forceful"></nz-option>
- </nz-select>
- <span *ngIf="terminationType=='graceful'" style="display:inline-block;width:50%;">gracefulTerminationTimeout:</span>
- <input *ngIf="terminationType=='graceful'" style="width: 165px;" nz-input [(ngModel)]="gracefulTerminationTimeout">
- </div>
- </nz-modal>
- <nz-modal [nzVisible]="healModelVisible" nzTitle="Heal" (nzOnCancel)="healCancel()" (nzOnOk)="healOk()">
- <h3><i class="anticon anticon-question-circle" style="color:yellow;"></i>Are you sure heal this instance?</h3>
- Instance ID: <b style="color:green"> {{ thisService["service-instance-id"] || thisService["nsInstanceId"] || thisService["vnfInstanceId"]}}</b>
- <!-- NS -->
- <div *ngIf="thisService['serviceDomain'] == 'Network Service'">
- <span style="display:inline-block;width:50%;">degreeHealing:</span>
- <nz-select style="width: 165px;" [(ngModel)]="nsParams.degreeHealing" >
- <nz-option nzValue="HEAL_RESTORE" nzLabel="HEAL_RESTORE"></nz-option>
- <nz-option nzValue="HEAL_QOS" nzLabel="HEAL_QOS"></nz-option>
- <nz-option nzValue="HEAL_RESET" nzLabel="HEAL_RESET"></nz-option>
- <nz-option nzValue="PARTIAL_HEALING" nzLabel="PARTIAL_HEALING"></nz-option>
- </nz-select>
- <div>
- <span style="display:inline-block;">actionsHealing:</span>
- <button nz-button [nzType]="'default'" (click)="addActionsHealing()"><i class="anticon anticon-plus-circle-o"></i></button>
- <br>
- <div *ngFor="let item of healActions;let i = index;" style="display:inline-block;">
- <input style="width: 165px;" nz-input [(ngModel)]="item.value"><button nz-button [nzType]="'dashed'" (click)="minusActionsHealing(i)"><i class="anticon anticon-minus-circle-o"></i></button>
- &nbsp;
- </div>
- </div>
- <span style="display:inline-block;width:50%;">healScript:</span>
- <input style="width: 165px;" nz-input [(ngModel)]="nsParams.healScript">
- <div>
- <span style="display:inline-block;">additionalParamsforNs:</span>
- <button nz-button [nzType]="'default'" (click)="addNsAdditional()"><i class="anticon anticon-plus-circle-o"></i></button>
- <br>
- <div *ngFor="let item of nsAdditional;let i = index;">
- Key: <input style="width: 165px;" nz-input [(ngModel)]="item.key"> &nbsp;
- Value: <input style="width: 165px;" nz-input [(ngModel)]="item.value">
- <button nz-button [nzType]="'dashed'" (click)="minusNsAdditional(i)"><i class="anticon anticon-minus-circle-o"></i></button>
- </div>
- </div>
- </div>
- <!-- vnf -->
- <div *ngIf="thisService['serviceDomain'] == 'vnf'">
- <span style="display:inline-block;width:50%;">cause:</span>
- <input style="width: 165px;" nz-input [(ngModel)]="vnfParams.cause">
- <span style="display:inline-block;width:50%;">action:</span>
- <input style="width: 165px;" nz-input [(ngModel)]="vnfParams.additionalParams.action">
- <span style="display:inline-block;width:50%;">actionvminfo:</span>
- <nz-select style="width: 165px;" [(ngModel)]="vmSelected" >
- <nz-option *ngFor="let item of vnfVms" [nzValue]="item" [nzLabel]="item.vmName"></nz-option>
- </nz-select>
- </div>
- </nz-modal>
-</div>
+ <nz-modal [nzVisible]="scaleModelVisible" nzTitle="Scale" (nzOnCancel)="scaleCancel()" (nzOnOk)="scaleOk()">
+ <h3><i class="anticon anticon-question-circle" style="color:yellow;"></i>Are you sure heal this instance?
+ </h3>
+ Instance ID: <b style="color:green"> {{ thisService["service-instance-id"] || thisService["nsInstanceId"] ||
+ thisService["vnfInstanceId"]}}</b>
+ <div *ngFor="let item of e2e_nsData">
+ <h3>{{ item.netWorkServiceName }}</h3>
+ <hr>
+ <span style="display:inline-block;width:50%;">Scale Type:</span>
+ <nz-select style="width: 165px;" [(ngModel)]="item.scaleType">
+ <nz-option nzValue="SCALE_NS" nzLabel="SCALE_NS"></nz-option>
+ <nz-option nzValue="SCALE_VNF" nzLabel="SCALE_VNF"></nz-option>
+ </nz-select>
+ <span style="display:inline-block;width:50%;">AspectId:</span>
+ <input style="width: 165px;" nz-input [(ngModel)]="item.aspectId" placeholder="string">
+ <span style="display:inline-block;width:50%;">Number Of Steps:</span>
+ <nz-input-number style="width: 165px;" [(ngModel)]="item.numberOfSteps" [nzMin]="1" [nzMax]="100"
+ nzPrecision=0 [nzStep]="1" nzPlaceHolder="number"></nz-input-number>
+ <span style="display:inline-block;width:50%;">Scaling Direction:</span>
+ <nz-select style="width: 165px;" nzPlaceHolder="Chose" [(ngModel)]="item.scalingDirection">
+ <nz-option nzValue="SCALE_IN" nzLabel="SCALE_IN"></nz-option>
+ <nz-option nzValue="SCALE_OUT" nzLabel="SCALE_OUT"></nz-option>
+ </nz-select>
+ </div>
+ </nz-modal>
+ <nz-modal [(nzVisible)]="deleteModelVisible" nzTitle="Delete" (nzOnCancel)="deleteCancel()"
+ (nzOnOk)="deleteOk()">
+ <h3><i class="anticon anticon-question-circle" style="color:yellow;"></i>Are you sure delete this instance?
+ </h3>
+ Instance ID: <b class="deleteModelContent"> {{ thisService["service-instance-id"] ||
+ thisService["nsInstanceId"] }}</b>
+ <div *ngIf="thisService['serviceDomain'] == 'Network Service'">
+ <span style="display:inline-block;width:50%;">terminationType:</span>
+ <nz-select style="width: 165px;" [(ngModel)]="terminationType">
+ <nz-option nzValue="graceful" nzLabel="graceful"></nz-option>
+ <nz-option nzValue="forceful" nzLabel="forceful"></nz-option>
+ </nz-select>
+ <span *ngIf="terminationType=='graceful'" style="display:inline-block;width:50%;">gracefulTerminationTimeout:</span>
+ <input *ngIf="terminationType=='graceful'" style="width: 165px;" nz-input
+ [(ngModel)]="gracefulTerminationTimeout">
+ </div>
+ </nz-modal>
+ <nz-modal [nzVisible]="healModelVisible" nzTitle="Heal" (nzOnCancel)="healCancel()" (nzOnOk)="healOk()">
+ <h3><i class="anticon anticon-question-circle" style="color:yellow;"></i>Are you sure heal this instance?
+ </h3>
+ Instance ID: <b style="color:green"> {{ thisService["service-instance-id"] || thisService["nsInstanceId"] ||
+ thisService["vnfInstanceId"]}}</b>
+ <!-- NS -->
+ <div *ngIf="thisService['serviceDomain'] == 'Network Service'">
+ <span style="display:inline-block;width:50%;">degreeHealing:</span>
+ <nz-select style="width: 165px;" [(ngModel)]="nsParams.degreeHealing">
+ <nz-option nzValue="HEAL_RESTORE" nzLabel="HEAL_RESTORE"></nz-option>
+ <nz-option nzValue="HEAL_QOS" nzLabel="HEAL_QOS"></nz-option>
+ <nz-option nzValue="HEAL_RESET" nzLabel="HEAL_RESET"></nz-option>
+ <nz-option nzValue="PARTIAL_HEALING" nzLabel="PARTIAL_HEALING"></nz-option>
+ </nz-select>
+ <div>
+ <span style="display:inline-block;">actionsHealing:</span>
+ <button nz-button [nzType]="'default'" (click)="addActionsHealing()"><i
+ class="anticon anticon-plus-circle-o"></i></button>
+ <br>
+ <div *ngFor="let item of healActions;let i = index;" style="display:inline-block;">
+ <input style="width: 165px;" nz-input [(ngModel)]="item.value">
+ <button nz-button [nzType]="'dashed'" (click)="minusActionsHealing(i)"><i
+ class="anticon anticon-minus-circle-o"></i></button>
+ &nbsp;
+ </div>
+ </div>
+ <span style="display:inline-block;width:50%;">healScript:</span>
+ <input style="width: 165px;" nz-input [(ngModel)]="nsParams.healScript">
+ <div>
+ <span style="display:inline-block;">additionalParamsforNs:</span>
+ <button nz-button [nzType]="'default'" (click)="addNsAdditional()"><i
+ class="anticon anticon-plus-circle-o"></i></button>
+ <br>
+ <div *ngFor="let item of nsAdditional;let i = index;">
+ Key: <input style="width: 165px;" nz-input [(ngModel)]="item.key"> &nbsp;
+ Value: <input style="width: 165px;" nz-input [(ngModel)]="item.value">
+ <button nz-button [nzType]="'dashed'" (click)="minusNsAdditional(i)"><i
+ class="anticon anticon-minus-circle-o"></i></button>
+ </div>
+ </div>
+ </div>
+ <!-- vnf -->
+ <div *ngIf="thisService['serviceDomain'] == 'vnf'">
+ <span style="display:inline-block;width:50%;">cause:</span>
+ <input style="width: 165px;" nz-input [(ngModel)]="vnfParams.cause">
+ <span style="display:inline-block;width:50%;">action:</span>
+ <input style="width: 165px;" nz-input [(ngModel)]="vnfParams.additionalParams.action">
+ <span style="display:inline-block;width:50%;">actionvminfo:</span>
+ <nz-select style="width: 165px;" [(ngModel)]="vmSelected">
+ <nz-option *ngFor="let item of vnfVms" [nzValue]="item" [nzLabel]="item.vmName"></nz-option>
+ </nz-select>
+ </div>
+ </nz-modal>
+ </div>
-<div class="detailComponent" *ngIf="detailshow">
- <app-ccvpn-detail [namesTranslate]="namesTranslate" [detailParams]="detailData" (closeDetail)="detailshow = false;"></app-ccvpn-detail>
-</div>
-<div class="createComponent" *ngIf="createshow">
- <app-ccvpn-creation
- [createParams]="createData"
- [namesTranslate]="namesTranslate"
- (closeCreate)="closeCreate($event)">
- </app-ccvpn-creation>
-</div>
-<div class="createComponent" *ngIf="createshow2">
- <app-e2e-creation
- [createParams]="createData"
- (nsCloseCreate)="nsCloseCreate($event)"
- (e2eCloseCreate)="e2eCloseCreate($event)">
- </app-e2e-creation>
-</div>
+ <div class="detailComponent" *ngIf="detailshow">
+ <app-ccvpn-detail [namesTranslate]="namesTranslate" [detailParams]="detailData"
+ (closeDetail)="detailshow = false;"></app-ccvpn-detail>
+ </div>
+ <div class="createComponent" *ngIf="createshow">
+ <app-ccvpn-creation
+ [createParams]="createData"
+ [namesTranslate]="namesTranslate"
+ (closeCreate)="closeCreate($event)">
+ </app-ccvpn-creation>
+ </div>
+ <div class="createComponent" *ngIf="createshow2">
+ <app-e2e-creation
+ [createParams]="createData"
+ (nsCloseCreate)="nsCloseCreate($event)"
+ (e2eCloseCreate)="e2eCloseCreate($event)">
+ </app-e2e-creation>
+ </div>
+ <!--</div>-->
+</nz-layout> \ No newline at end of file
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.less b/usecaseui-portal/src/app/services/services-list/services-list.component.less
index 40c00231..3ef3fde2 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.less
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.less
@@ -25,25 +25,31 @@ hr {
margin-bottom: 20px;
}
.action {
- margin-bottom: 20px;
+ margin-bottom: 15px;
+ padding: 28px;
+ background: #ffffff;
+ position: relative;
span {
display: inline-block;
font: 700 14px "Arial";
- color: #4c5e70;
+ color: #3C4F8C;
+ margin-right: 5px;
}
nz-dropdown {
vertical-align: middle;
+ background-color:#ffffff;
:hover{
- border-color: #147dc2;
+ border-color: #48C6EF;
}
button {
width: 165px;
- height: 30px;
- background-color: #eceff4;
+ height: 42px;
+ background-color:#ffffff;
text-align: left;
- border-color: #9fa9ab;
+ border-color: #EEEEEE;
span {
font-weight: 400;
+ color: #3C4F8C;
display: inline-block;
width: 120px;
overflow: hidden;
@@ -56,17 +62,69 @@ hr {
right: 10px;
}
}
- //下拉框中的样式在style.less中,下拉框是在body中额外临时生成的
}
+ // //下拉框中的样式在style.less中,下拉框是在body中额外临时生成的
.create {
- float: right;
- height: 30px;
- padding: 0 10px;
+ position: absolute;
+ right: 3%;
+ top:50%;
+ width:116px;
+ height:42px;
+ background:linear-gradient(90deg,rgba(99,194,246,1) 0%,rgba(62,155,255,1) 100%);
+ border-radius:2px;
+ margin-top: -15px;
span {
color: #fff;
font-weight: 400;
+ font-size: 18px;
+ }
+ .anticon-plus-circle-o{
+ font-size: 18px;
}
}
+ .create.ant-btn.ant-btn-primary{
+ border: none;
+ }
+
+}
+.top-num{
+ overflow: auto;
+}
+.top-list{
+ position: relative;
+ width:360px;
+ height:160px;
+ margin: 15px 15px 30px 15px;
+ float: left;
+ background:linear-gradient(90deg,rgba(16,174,222,1) 0%,rgba(43,206,202,1) 100%);
+ box-shadow:0px 10px 15px 2px rgba(222,222,222,1);
+ border-radius:2px;
+}
+.top-list .round{
+ position: absolute;
+ width:80px;
+ height:80px;
+ line-height: 80px;
+ text-align: center;
+ top:50%;
+ left: 10px;
+ margin-top: -40px;
+ background:#E0EDFF;
+ border:2px solid rgba(224,237,255,1);
+ border-radius: 50%;
+ font-size:18px;
+ font-family:ArialMT;
+ color:#3C4F8C;
+}
+.top-list .top-list-text{
+ position: absolute;
+ text-align: right;
+ height: 40px;
+ line-height: 20px;
+ top:50%;
+ margin-top: -20px;
+ right: 20px;
+ color: #fff;
}
.list {
background-color: #fff;
@@ -154,3 +212,27 @@ hr {
padding: 20px 32px;
z-index: 3;
}
+/*2019.01.14*/
+.e2eColor{
+ color: #5B45E7;
+}
+.nsColor{
+ color: #F96D7D;
+}
+.ccvpnColor{
+ color: #3E86EC;
+}
+.sotnColor{
+ color: #FFB629;
+}
+.select-list{
+ width: 280px;
+ height: 32px;
+ line-height: 32px;
+ margin: 25px auto;
+}
+.select-list>span{
+ text-align: left;
+ line-height: 32px;
+}
+
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.ts b/usecaseui-portal/src/app/services/services-list/services-list.component.ts
index 8c273602..7149ae2f 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.ts
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.ts
@@ -40,6 +40,24 @@ export class ServicesListComponent implements OnInit {
serviceTypeSelected = {name:null};
listSortMasters=JSON.parse(sessionStorage.getItem('listSortMasters'));
language="en";
+ serviceMunber = [
+ {
+ "serviceDomain": "E2E",
+ "number": 10
+ },
+ {
+ "serviceDomain": "NS",
+ "number": 20
+ },
+ {
+ "serviceDomain": "SOTN",
+ "number": 30
+ },
+ {
+ "serviceDomain": "CCVPN",
+ "number": 40
+ }
+ ];
getallCustomers(){
console.log(this.listSortMasters);
diff --git a/usecaseui-portal/src/assets/images/create-box.png b/usecaseui-portal/src/assets/images/create-box.png
new file mode 100644
index 00000000..5dc9ba35
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/create-box.png
Binary files differ
diff --git a/usecaseui-portal/src/styles.less b/usecaseui-portal/src/styles.less
index 23b954c8..93e5251c 100644
--- a/usecaseui-portal/src/styles.less
+++ b/usecaseui-portal/src/styles.less
@@ -1,63 +1,97 @@
/* You can add global styles to this file, and also import other style files */
// 下拉框背景hover状态颜色
.ant-dropdown-menu {
- .ant-dropdown-menu-item:hover, .ant-dropdown-menu-submenu-title:hover {
- background-color: #3fa8eb;
+ .ant-dropdown-menu-item:hover, .ant-dropdown-menu-submenu-title:hover {
+ background-color: #3fa8eb;
+ a {
+ color: #fff;
}
+ }
}
// 表格每页条数选项单位置
nz-table {
- .ant-table-thead>tr>th {
- color:rgba(60,79,140,0.5); //标题字体颜色
- background-color: #F7F8FC;
- border-bottom: 0px solid #e8e8e8;
- }
- .ant-table-tbody>tr>td{
- background-color:#fff;
- border-bottom: 8px solid #F7F8FC;
- }
- .ant-spin-container {
- nz-pagination {
- ul {
- .ant-pagination-options {
- .ant-pagination-options-size-changer.ant-select{
- position: absolute;
- left: 0;
- }
- }
+ .ant-table-thead > tr > th {
+ color: rgba(60, 79, 140, 0.5); //标题字体颜色
+ background-color: #F7F8FC;
+ border-bottom: 0px solid #e8e8e8;
+ }
+ .ant-table-tbody > tr > td {
+ background-color: #fff;
+ border-bottom: 8px solid #F7F8FC;
+ }
+ .ant-spin-container {
+ nz-pagination {
+ ul {
+ .ant-pagination-options {
+ .ant-pagination-options-size-changer.ant-select {
+ width: 100px;
+ height: 40px;
+ line-height: 40px !important;
+ position: absolute;
+ left: 0;
+ color: #3C4F8C;
+ .ant-select-selection--single {
+ height: 40px;
+ line-height: 40px !important;
+ .ant-select-selection-selected-value {
+ height: 40px;
+ line-height: 40px !important;
+ }
}
+ }
+ }
+ }
+ .ant-pagination.mini.ant-table-pagination {
+ .ant-pagination-prev, .ant-pagination-item, .ant-pagination-next {
+ width: 40px;
+ height: 40px;
+ line-height: 40px;
+ .ant-pagination-item-link, .ant-pagination-item-link:after {
+ width: 40px;
+ height: 40px;
+ line-height: 40px;
+ }
}
+ .ant-pagination-item.ant-pagination-item-active {
+ background: linear-gradient(270deg, rgba(63, 156, 255, 1) 0%, rgba(98, 193, 246, 1) 100%);
+ border-radius: 2px;
+ a {
+ color: #fff;
+ }
+ }
+ }
}
+ }
}
// 详情页迷你表格样式
.detailInformatioin {
- nz-table {
- .ant-table-small {
+ nz-table {
+ .ant-table-small {
+ border-color: #dfdfe0;
+ border-right: 0;
+ .ant-table-content {
+ border-color: #dfdfe0;
+ .ant-table-body > table {
+ padding: 0;
+ .ant-table-thead > tr > th {
+ background-color: #f0f2f5;
+ font-weight: 700;
+ font-size: 18px;
+ padding: 2px 15px;
border-color: #dfdfe0;
- border-right: 0;
- .ant-table-content {
- border-color: #dfdfe0;
- .ant-table-body > table {
- padding: 0;
- .ant-table-thead > tr > th {
- background-color: #f0f2f5;
- font-weight: 700;
- font-size: 14px;
- padding: 2px 15px;
- border-color: #dfdfe0;
- }
- .ant-table-tbody > tr > td {
- background-color: #f0f2f5;
- font-size: 14px;
- padding: 2px 15px;
- color: #323437;
- border-color: #dfdfe0;
- }
- }
- }
+ }
+ .ant-table-tbody > tr > td {
+ background-color: #f0f2f5;
+ font-size: 14px;
+ padding: 2px 15px;
+ color: #323437;
+ border-color: #dfdfe0;
+ }
}
+ }
}
+ }
}
// 日期选择插件背景颜色
@@ -69,14 +103,45 @@ nz-table {
}
// 分页每页条数选项单位置
nz-pagination {
- ul {
- .ant-pagination-options {
- .ant-pagination-options-size-changer.ant-select{
- position: absolute;
- left: 0;
- }
+ ul {
+ .ant-pagination-options {
+ .ant-pagination-options-size-changer.ant-select {
+ position: absolute;
+ left: 0;
+ width: 100px;
+ height: 40px;
+ color: #3C4F8C;
+ line-height: 40px !important;
+ .ant-select-selection--single {
+ height: 40px;
+ line-height: 40px !important;
+ .ant-select-selection-selected-value {
+ height: 40px;
+ line-height: 40px !important;
+ }
}
+ }
}
+ }
+ .ant-pagination.mini.ant-table-pagination {
+ .ant-pagination-prev, .ant-pagination-item, .ant-pagination-next {
+ width: 40px;
+ height: 40px;
+ line-height: 40px;
+ .ant-pagination-item-link, .ant-pagination-item-link:after {
+ width: 40px;
+ height: 40px;
+ line-height: 40px;
+ }
+ }
+ .ant-pagination-item.ant-pagination-item-active {
+ background: linear-gradient(270deg, rgba(63, 156, 255, 1) 0%, rgba(98, 193, 246, 1) 100%);
+ border-radius: 2px;
+ a {
+ color: #fff;
+ }
+ }
+ }
}
html,body,div,h1,h2,h3,h4,h5,h6,p,ul,li,a,span {
@@ -180,3 +245,77 @@ nz-layout {
.ant-calendar-picker {
width: 234px !important;
}
+
+//2019.01.21 add services-list.component.html
+
+nz-modal {
+ .ant-modal {
+ height: 628px;
+ background: url("assets/images/create-box.png") 100% 100%;
+ }
+ .ant-modal-content{
+ height: 628px;
+ background:transparent;
+ }
+ .ant-modal-header,ant-modal-title,.ant-modal-footer{
+ background:transparent;
+ border: none;
+ }
+ .ant-modal-title{
+ font-size:20px;
+ text-align: center;
+ color:rgba(255,255,255,1);
+ line-height:23px;
+ }
+ .ant-modal-body{
+ span{
+ font-size: 16px;
+ color:rgba(60,79,140,0.5);
+ line-height: 18px;
+ display: inline-block;
+ }
+ nz-select{
+ .ant-select-open.ant-select-selection{
+ border: #48C6EF;
+ }
+ .ant-select-selection__rendered{
+ .ant-select-selection-selected-value{
+ color:rgba(60,79,140,0.5)!important;
+ }
+ }
+ }
+ }
+ .ant-modal-footer{
+ margin: 0 auto;
+ button{
+ width: 126px;
+ height: 40px;
+ line-height: 40px;
+ text-align: center;
+ border: none;
+ outline: none;
+ margin-top: 50px;
+ }
+ button:nth-child(1){
+ background:#EEEEEE;
+ border-radius:2px;
+ margin-left: 50px;
+ margin-right: 10px;
+ span{
+ color: #9DA7C5;
+ font-size: 14px !important;
+ }
+ }
+ button:nth-child(2){
+ background:linear-gradient(310deg,rgba(30,158,255,1) 0%,rgba(99,200,255,1) 100%);
+ box-shadow:0px 0px 2px 0px rgba(14,90,218,1);
+ border-radius:2px;
+ margin-left: 20px;
+ margin-right: 50px;
+ span{
+ color: #FFFFFF;
+ font-size: 14px !important;
+ }
+ }
+ }
+} \ No newline at end of file