summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src
diff options
context:
space:
mode:
Diffstat (limited to 'usecaseui-portal/src')
-rw-r--r--usecaseui-portal/src/app/app.module.ts2
-rw-r--r--usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css18
-rw-r--r--usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html447
-rw-r--r--usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.spec.ts15
-rw-r--r--usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts1158
-rw-r--r--usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.css77
-rw-r--r--usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.html123
-rw-r--r--usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.less80
-rw-r--r--usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.spec.ts25
-rw-r--r--usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts212
-rw-r--r--usecaseui-portal/src/app/myhttp.service.ts108
-rw-r--r--usecaseui-portal/src/app/networkHttpservice.service1.ts97
-rw-r--r--usecaseui-portal/src/app/services/services-list/services-list.component.css25
-rw-r--r--usecaseui-portal/src/app/services/services-list/services-list.component.html131
-rw-r--r--usecaseui-portal/src/app/services/services-list/services-list.component.less41
-rw-r--r--usecaseui-portal/src/app/services/services-list/services-list.component.ts525
16 files changed, 2001 insertions, 1083 deletions
diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts
index 8582a6fc..7f77bd81 100644
--- a/usecaseui-portal/src/app/app.module.ts
+++ b/usecaseui-portal/src/app/app.module.ts
@@ -37,6 +37,7 @@ import { CcvpnCreationComponent } from './ccvpn-creation/ccvpn-creation.componen
import { DetailsComponent } from './components/details/details.component';
import { GraphiclistComponent } from './components/graphiclist/graphiclist.component';
+import { E2eCreationComponent } from './components/e2e-creation/e2e-creation.component';
import { BarComponent } from './components/charts/bar/bar.component';
import { LineComponent } from './components/charts/line/line.component';
@@ -73,6 +74,7 @@ import { PerformanceDetailsComponent } from './components/performance-details/pe
LineComponent,
BarComponent,
GraphiclistComponent,
+ E2eCreationComponent,
CcvpnNetworkComponent,
CcvpnDetailComponent,
diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css
index 710bd104..02c3d4c6 100644
--- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css
+++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css
@@ -135,4 +135,22 @@ hr {
background-color: #aaa;
border-radius: 5px;
box-shadow: 0px 0px 20px #000;
+}
+#togo{
+ width: 600px;
+ height:400px;
+ border:1px solid #ccc;
+ user-select: none;
+}
+#togo text{
+ font-size:10px;
+ fill:#1A2C3F;
+ text-anchor: middle;
+}
+
+#togo .link{
+ stroke:#FFC000;
+}
+#togo .node-title{
+ font-size: 14px;
} \ No newline at end of file
diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html
index 33d56eb9..cd3e2067 100644
--- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html
+++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html
@@ -16,321 +16,178 @@
<h3 class="title"> Services List </h3>
<hr>
<div class="model">
- <!-- 详情数据 -->
+
<button class="back" nz-button (click)="goback()"><span><i class="anticon anticon-rollback"></i></span></button>
<div class="detaildata fl">
- <h3 class="title">{{detailParams.sotnvpnSer['service-instance-name']}} Instance Detail</h3>
- <div class="sotnvpn clearfix">
- <h3>SOTN VPN Info</h3>
+ <h3 class="title">{{detailParams['service-instance-name']}} Instance Detail</h3>
+ <div class="sotnvpn clearfix">
+ <h3>SOTN VPN Info</h3>
+ <ul>
+ <li><span>Name:</span> {{sotnVpnInfo.name}}</li>
+ <li><span>Description:</span> {{sotnVpnInfo.description}} </li>
+ <li><span>Start Time:</span> {{sotnVpnInfo.startTime}}</li>
+ <li><span>End Time:</span> {{sotnVpnInfo.endTime}} </li>
+ <li><span>COS:</span> {{sotnVpnInfo.COS}}</li>
+ <li><span>Reroute Enable:</span> {{sotnVpnInfo.reroute}} </li>
+ <li><span>Service Level Specification:</span> {{sotnVpnInfo.SLS}}</li>
+ <li><span>DualLink:</span> {{sotnVpnInfo.dualLink}} </li>
+ <li><span>CIR:</span> {{sotnVpnInfo.CIR}}</li>
+ <li><span>EIR:</span> {{sotnVpnInfo.EIR}} </li>
+ <li><span>CBS:</span> {{sotnVpnInfo.CBS}}</li>
+ <li><span>EBS:</span> {{sotnVpnInfo.EBS}} </li>
+ <li><span>Color Aware:</span> {{sotnVpnInfo.colorAware}}</li>
+ <li><span>Coupling Flag:</span> {{sotnVpnInfo.couplingFlag}} </li>
+ </ul>
+ </div>
+
+ <div class="site">
+ <h3>Site List</h3>
+ <nz-table #nzTable [nzData]="siteList"
+ [nzShowPagination]="false"
+ nzSize="small">
+ <thead>
+ <tr>
+ <th nzWidth="10%"> NO. </th>
+ <th nzWidth="15%"> Name </th>
+ <th nzWidth="20%"> Description </th>
+ <th nzWidth="15%"> Post Code </th>
+ <th nzWidth="15%"> Address </th>
+ <th nzWidth="15%"> VLAN </th>
+ <th nzWidth="10%"> Action </th>
+ </tr>
+ </thead>
+ <tbody>
+
+ <tr *ngFor="let item of nzTable.data; let i = index; ">
+ <td>{{i+1}}</td>
+ <td>{{item.baseNames.name}}</td>
+ <td>{{item.baseNames.description}}</td>
+ <td>{{item.baseNames.postcode}}</td>
+ <td>{{item.baseNames.address}}</td>
+ <td>{{item.baseNames.vlan}}</td>
+ <td (click)="showSiteDetail(item)"> <a href="javascript:;">Detail</a> </td>
+ </tr>
+
+ </tbody>
+ </nz-table>
+ <div class="siteDetail" *ngIf="siteDetail">
+ <h3>Site_Enterprise Service <span class="closeDetail fr" (click)="siteDetail=false">X</span></h3>
<ul>
- <li><span>Name:</span> {{sotnVpnInfo.name}}</li>
- <li><span>Description:</span> {{sotnVpnInfo.description}} </li>
- <li><span>Start Time:</span> {{sotnVpnInfo.startTime}}</li>
- <li><span>End Time:</span> {{sotnVpnInfo.endTime}} </li>
- <li><span>COS:</span> {{sotnVpnInfo.COS}}</li>
- <li><span>Reroute Enable:</span> {{sotnVpnInfo.reroute}} </li>
- <li><span>Service Level Specification:</span> {{sotnVpnInfo.SLS}}</li>
- <li><span>DualLink:</span> {{sotnVpnInfo.dualLink}} </li>
- <li><span>CIR:</span> {{sotnVpnInfo.CIR}}</li>
- <li><span>EIR:</span> {{sotnVpnInfo.EIR}} </li>
- <li><span>CBS:</span> {{sotnVpnInfo.CBS}}</li>
- <li><span>EBS:</span> {{sotnVpnInfo.EBS}} </li>
- <li><span>Color Aware:</span> {{sotnVpnInfo.colorAware}}</li>
- <li><span>Coupling Flag:</span> {{sotnVpnInfo.couplingFlag}} </li>
+ <li><span>Name:</span> {{ siteDetailData.baseNames.name}}</li>
+ <li><span>Description:</span> {{ siteDetailData.baseNames.description }} </li>
+ <li *ngIf="detailParams.serviceDomain == 'CCVPN'"><span>Type:</span> {{ siteDetailData.baseNames.type }} </li>
+ <li *ngIf="detailParams.serviceDomain == 'CCVPN'"><span>Role:</span> {{ siteDetailData.baseNames.role }} </li>
+ <li><span>PostCode:</span> {{ siteDetailData.baseNames.postcode }} </li>
+ <li><span>VLAN:</span> {{ siteDetailData.baseNames.vlan }}</li>
+ <li><span>Address:</span> {{ siteDetailData.baseNames.address }}</li>
+ <li><span>ClientSignal:</span> {{ siteDetailData.baseNames.clientSignal }}</li>
+ <li><span>ControlPoint:</span> {{ siteDetailData.baseNames.controlPoint }}</li>
+ <li><span>Emails:</span> {{ siteDetailData.baseNames.emails }}</li>
+ <li><span>GroupName:</span> {{ siteDetailData.baseNames.groupName }}</li>
+ <li><span>GroupRole:</span> {{ siteDetailData.baseNames.groupRole }}</li>
+ <li><span>Latitude:</span> {{ siteDetailData.baseNames.latitude }}</li>
+ <li><span>Longitude:</span> {{ siteDetailData.baseNames.longitude }}</li>
+ <li><span>SotnVpnName:</span> {{ siteDetailData.baseNames.sotnVpnName }}</li>
</ul>
- </div>
-
- <div class="site">
- <h3>Site List</h3>
- <nz-table #nzTable [nzData]="siteList"
- [nzShowPagination]="false"
- nzSize="small">
- <thead>
+ <div *ngIf="detailParams.serviceDomain == 'CCVPN'">
+ <h3>CPE</h3>
+ <ul>
+ <li><span>Name:</span> {{siteDetailData.cpeNames.device_name}}</li>
+ <li><span>Version:</span> {{ siteDetailData.cpeNames.device_version }} </li>
+ <li><span>ESN:</span> {{ siteDetailData.cpeNames.device_esn }} </li>
+ <li><span>Class:</span> {{ siteDetailData.cpeNames.device_class }} </li>
+ <li><span>System IP:</span> {{ siteDetailData.cpeNames.device_systemIp }} </li>
+ <li><span>Vendor:</span> {{ siteDetailData.cpeNames.device_vendor }}</li>
+ <li><span>Type:</span> {{ siteDetailData.cpeNames.device_type }}</li>
+ </ul>
+ <h3>WAN Port</h3>
+ <nz-table #nzTable [nzData]="siteDetailData.wanportNames"
+ [nzShowPagination]="false"
+ nzSize="small">
+ <thead>
<tr>
<th nzWidth="10%"> NO. </th>
<th nzWidth="15%"> Name </th>
<th nzWidth="20%"> Description </th>
- <th nzWidth="15%"> Post Code </th>
- <th nzWidth="15%"> Address </th>
- <th nzWidth="15%"> VLAN </th>
+ <th nzWidth="15%"> PortType </th>
+ <th nzWidth="15%"> PortNumber </th>
+ <th nzWidth="15%"> IPAddress </th>
<th nzWidth="10%"> Action </th>
</tr>
- </thead>
- <tbody>
- <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> -->
- <tr *ngFor="let item of nzTable.data; let i = index; ">
- <td>{{i+1}}</td>
- <td>{{item.baseNames.name}}</td>
- <td>{{item.baseNames.description}}</td>
- <td>{{item.baseNames.postcode}}</td>
- <td>{{item.baseNames.address}}</td>
- <td>{{item.baseNames.vlan}}</td>
- <td (click)="showSiteDetail(item)"> <a href="javascript:;">Detail</a> </td>
- </tr>
- <!-- </ng-template> -->
- </tbody>
- </nz-table>
- <div class="siteDetail" *ngIf="siteDetail">
- <h3>Site_Enterprise Service <span class="closeDetail fr" (click)="siteDetail=false">X</span></h3>
- <ul>
- <li><span>Name:</span> {{ siteDetailData.baseNames.name}}</li>
- <li><span>Description:</span> {{ siteDetailData.baseNames.description }} </li>
- <li *ngIf="detailParams.sotnvpnSer.Type == 'CCVPN'"><span>Type:</span> {{ siteDetailData.baseNames.type }} </li>
- <li *ngIf="detailParams.sotnvpnSer.Type == 'CCVPN'"><span>Role:</span> {{ siteDetailData.baseNames.role }} </li>
- <li><span>PostCode:</span> {{ siteDetailData.baseNames.postcode }} </li>
- <li><span>VLAN:</span> {{ siteDetailData.baseNames.vlan }}</li>
- <li><span>Address:</span> {{ siteDetailData.baseNames.address }}</li>
- <li><span>ClientSignal:</span> {{ siteDetailData.baseNames.clientSignal }}</li>
- <li><span>ControlPoint:</span> {{ siteDetailData.baseNames.controlPoint }}</li>
- <li><span>Emails:</span> {{ siteDetailData.baseNames.emails }}</li>
- <li><span>GroupName:</span> {{ siteDetailData.baseNames.groupName }}</li>
- <li><span>GroupRole:</span> {{ siteDetailData.baseNames.groupRole }}</li>
- <li><span>Latitude:</span> {{ siteDetailData.baseNames.latitude }}</li>
- <li><span>Longitude:</span> {{ siteDetailData.baseNames.longitude }}</li>
- <li><span>SotnVpnName:</span> {{ siteDetailData.baseNames.sotnVpnName }}</li>
- </ul>
- <div *ngIf="detailParams.sotnvpnSer.Type == 'CCVPN'">
- <h3>CPE</h3>
- <ul>
- <li><span>Name:</span> {{siteDetailData.cpeNames.device_name}}</li>
- <li><span>Version:</span> {{ siteDetailData.cpeNames.device_version }} </li>
- <li><span>ESN:</span> {{ siteDetailData.cpeNames.device_esn }} </li>
- <li><span>Class:</span> {{ siteDetailData.cpeNames.device_class }} </li>
- <li><span>System IP:</span> {{ siteDetailData.cpeNames.device_systemIp }} </li>
- <li><span>Vendor:</span> {{ siteDetailData.cpeNames.device_vendor }}</li>
- <li><span>Type:</span> {{ siteDetailData.cpeNames.device_type }}</li>
- </ul>
- <h3>WAN Port</h3>
- <nz-table #nzTable [nzData]="siteDetailData.wanportNames"
- [nzShowPagination]="false"
- nzSize="small">
- <thead>
- <tr>
- <th nzWidth="10%"> NO. </th>
- <th nzWidth="15%"> Name </th>
- <th nzWidth="20%"> Description </th>
- <th nzWidth="15%"> PortType </th>
- <th nzWidth="15%"> PortNumber </th>
- <th nzWidth="15%"> IPAddress </th>
- <th nzWidth="10%"> Action </th>
- </tr>
- </thead>
- <tbody>
- <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> -->
- <tr *ngFor="let item of nzTable.data; let i = index; ">
- <td>{{i+1}}</td>
- <td>{{item.sitewanport_name}}</td>
- <td>{{item.sitewanport_description}}</td>
- <td>{{item.sitewanport_portType}}</td>
- <td>{{item.sitewanport_portNumber}}</td>
- <td>{{item.sitewanport_ipAddress}}</td>
- <td (click)="showWanportDetail(item)"> <a href="javascript:;">Detail</a> </td>
- </tr>
- <!-- </ng-template> -->
- </tbody>
- </nz-table>
- <nz-modal [(nzVisible)]="wanPortModal" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="modalFooter" (nzOnCancel)="handleCancel()">
- <ng-template #modalTitle>
- WAN Port Detail
- </ng-template>
+ </thead>
+ <tbody>
+
+ <tr *ngFor="let item of nzTable.data; let i = index; ">
+ <td>{{i+1}}</td>
+ <td>{{item.sitewanport_name}}</td>
+ <td>{{item.sitewanport_description}}</td>
+ <td>{{item.sitewanport_portType}}</td>
+ <td>{{item.sitewanport_portNumber}}</td>
+ <td>{{item.sitewanport_ipAddress}}</td>
+ <td (click)="showWanportDetail(item)"> <a href="javascript:;">Detail</a> </td>
+ </tr>
+
+ </tbody>
+ </nz-table>
+ <nz-modal [(nzVisible)]="wanPortModal" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="modalFooter" (nzOnCancel)="handleCancel()">
+ <ng-template #modalTitle>
+ WAN Port Detail
+ </ng-template>
- <ng-template #modalContent>
- <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Name </span> {{wanPortDetail.sitewanport_name}}</p>
- <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Description: </span> {{wanPortDetail.sitewanport_description}} </p>
- <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Port Type: </span> {{wanPortDetail.sitewanport_portType}} </p>
- <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Port Number: </span> {{wanPortDetail.sitewanport_portNumber}} </p>
- <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Ip Address: </span> {{wanPortDetail.sitewanport_ipAddress}} </p>
- <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Provider IP Address: </span> {{wanPortDetail.sitewanport_providerIpAddress}} </p>
- <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Transport Nerwork: </span> {{wanPortDetail.sitewanport_transportNetworkName}} </p>
- <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Input Bandwidth: </span> {{wanPortDetail.sitewanport_inputBandwidth}} </p>
- <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Output Bandwidth: </span> {{wanPortDetail.sitewanport_outputBandwidth}} </p>
- </ng-template>
+ <ng-template #modalContent>
+ <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Name </span> {{wanPortDetail.sitewanport_name}}</p>
+ <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Description: </span> {{wanPortDetail.sitewanport_description}} </p>
+ <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Port Type: </span> {{wanPortDetail.sitewanport_portType}} </p>
+ <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Port Number: </span> {{wanPortDetail.sitewanport_portNumber}} </p>
+ <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Ip Address: </span> {{wanPortDetail.sitewanport_ipAddress}} </p>
+ <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Provider IP Address: </span> {{wanPortDetail.sitewanport_providerIpAddress}} </p>
+ <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Transport Nerwork: </span> {{wanPortDetail.sitewanport_transportNetworkName}} </p>
+ <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Input Bandwidth: </span> {{wanPortDetail.sitewanport_inputBandwidth}} </p>
+ <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Output Bandwidth: </span> {{wanPortDetail.sitewanport_outputBandwidth}} </p>
+ </ng-template>
- <ng-template #modalFooter>
- <!-- <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="isConfirmLoading">Custom Submit</button> -->
- </ng-template>
- </nz-modal>
- </div>
+ <ng-template #modalFooter>
+ </ng-template>
+ </nz-modal>
</div>
- </div>
- <div class="sitegroup" *ngIf="detailParams.sotnvpnSer.Type == 'CCVPN'">
- <h3>Site_Group List</h3>
- <nz-table #nzTable [nzData]="siteGroupList"
- [nzLoading]="loading"
- [nzShowPagination]="false"
- nzSize="small">
- <thead>
- <tr>
- <th nzWidth="10%"> NO. </th>
- <th nzWidth="20%"> Group Name </th>
- <th nzWidth="20%"> Topology </th>
- </tr>
- </thead>
- <tbody>
- <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> -->
- <tr *ngFor="let item of nzTable.data; let i = index; ">
- <td>{{i+1}}</td>
- <td>{{item.name}}</td>
- <td>{{item.topology}}</td>
- </tr>
- <!-- </ng-template> -->
- </tbody>
- </nz-table>
</div>
+ </div>
+
+ <div class="sitegroup" *ngIf="detailParams.serviceDomain == 'CCVPN'">
+ <h3>Site_Group List</h3>
+ <nz-table #nzTable [nzData]="siteGroupList"
+ [nzLoading]="loading"
+ [nzShowPagination]="false"
+ nzSize="small">
+ <thead>
+ <tr>
+ <th nzWidth="10%"> NO. </th>
+ <th nzWidth="20%"> Group Name </th>
+ <th nzWidth="20%"> Topology </th>
+ </tr>
+ </thead>
+ <tbody>
+
+ <tr *ngFor="let item of nzTable.data; let i = index; ">
+ <td>{{i+1}}</td>
+ <td>{{item.name}}</td>
+ <td>{{item.topology}}</td>
+ </tr>
+
+ </tbody>
+ </nz-table>
+ </div>
</div>
- <!-- 图 -->
+
<div class="chart fr">
- <div id="detailChart">
- <!-- <svg width="100%" height="100%">
- <line *ngFor="let item of lines" [attr.x1]="item.x1" [attr.y1]="item.y1" [attr.x2]="item.x2" [attr.y2]="item.y2" style="stroke:#3fa8eb;stroke-width:2"/>
- <image xlink:href="./assets/images/cloud-county.png"
- class="cloudcounty"
- (click)="toggleClick()"
- (mouseover)="hoverShowcould()"
- (mouseout)="hoverHidecould()"
- x="175" y="175" height="50px" width="50px"/>
- <image *ngFor="let item of siteImage"
- xlink:href="./assets/images/cloud-city.png"
- [attr.x]="item.x" [attr.y]="item.y" height="50px" width="50px"/>
- </svg>
- <div class="couldDetail" *ngIf="hoverShow || clickShow">
+ <div id="detailChart">
+ <svg id="togo">
- </div> -->
- <svg width="100%" height="100%" style="position: relative">
- <!--背景大图-->
- <image xlink:href="./assets/images/bigcloud.png"
- class="backgroundcloud"
- width="100%"
- style="position: absolute;z-index:-1">
- </image>
- <!--tp,site,domain之间的连线-->
- <line *ngFor="let item of detailLines" [attr.x1]="item.x1" [attr.y1]="item.y1" [attr.x2]="item.x2" [attr.y2]="item.y2" style="stroke:#FFC000; stroke-width:2"></line>
- <line *ngIf="detailSites" x1="45%" y1="30%" x2="75%" y2="20%" style="stroke:#FFC000; stroke-width:2"></line>
- <!--本地domain-->
- <g class="clouds">
- <image xlink:href="./assets/images/domain.png"
- id="domain1"
- width="20%"
- x="10%" y="10%"
- ></image>
- <text dx="12%" dy="16%" style="font-size: 14px; fill:#666;width: 20px;">
- {{vpns[0].domain}}
- </text>
- </g>
- <g *ngIf="vpns[1]" class="clouds">
- <image xlink:href="./assets/images/domain.png"
- id="domain2"
- width="20%"
- x="40%" y="13%"
- ></image>
- <text dx="43%" dy="19%" style="font-size: 14px; fill: #666;width: 20px;">
- {{vpns[1].domain}}
- </text>
- </g>
- <!--domain1下连接的tp-->
- <g class="clouds">
- <image xlink:href="./assets/images/tp.png"
- class="tp"
- id="tp1"
- height="16" width="20"
- x="15%" y="25%"
- ></image>
- <text dx="18%" dy="27%" style="font-size: 14px; fill: #666;width: 20px;">
- {{vpns[0].sitetpname}}
- </text>
- </g>
- <g class="clouds">
- <image xlink:href="./assets/images/tp.png"
- class="tp"
- id="tp2"
- height="16" width="20"
- x="30%" y="10%"
- ></image>
- <text dx="30%" dy="6%" style="font-size: 14px; fill: #666;width: 20px;">
- {{vpns[0].othertpname}}
- </text>
- </g>
- <!--domain2下连接的tp-->
- <g *ngIf="vpns[1]" class="clouds">
- <image xlink:href="./assets/images/tp.png"
- class="tp"
- id="tp3"
- height="16" width="20"
- x="40%" y="10%"
- ></image>
- <text dx="40%" dy="9%" style="font-size: 14px; fill: #666;width: 20px;">
- {{vpns[1].othertpname}}
- </text>
- </g>
- <g *ngIf="vpns[1]" class="clouds">
- <image xlink:href="./assets/images/tp.png"
- class="tp"
- id="tp4"
- height="16" width="20"
- x="43%" y="28%"
- ></image>
- <text dx="46%" dy="30%" style="font-size: 14px; fill: #666;width: 20px;">
- {{vpns[1].sitetpname}}
- </text>
- </g>
- <!--外部云-->
- <g class="clouds">
- <image xlink:href="./assets/images/out-domain.png"
- id="extent-cloud"
- height="70.8" width="120"
- x="66%" y="12%"
- ></image>
- <text dx="68%" dy="18%" style="font-size: 14px; fill: #666;width: 20px;">
- SP Partent Network
- </text>
- </g>
- <!--本地的2个site-->
- <g class="clouds">
- <image xlink:href="./assets/images/site.png"
- id="site1"
- height="59" width="100"
- x="0%" y="48%"
- ></image>
- <text dx="2%" dy="53%" style="font-size: 14px; fill: #666;width: 20px;">
- {{localSite[0]["service-instance-name"]}}
- </text>
- </g>
- <g *ngIf="!detailSites" class="clouds">
- <image xlink:href="./assets/images/site.png"
- id="site2"
- height="59" width="100"
- x="25%" y="48%"
- ></image>
- <text dx="26%" dy="54%" style="font-size: 14px; fill: #666;width: 20px;">
- {{localSite[1]["service-instance-name"]}}
- </text>
- </g>
- <!--外部的2个site-->
- <g *ngIf="!detailSites" class="clouds">
- <image xlink:href="./assets/images/site.png"
- id="site3"
- height="59" width="100"
- x="50%" y="48%"
- ></image>
- <text dx="52%" dy="54%" style="font-size: 14px; fill: #666;width: 20px;">
- {{outerSite[1]["service-instance-name"]}}
- </text>
- </g>
- <g class="clouds">
- <image xlink:href="./assets/images/site.png"
- id="site4"
- height="59" width="100"
- x="75%" y="48%"
- ></image>
- <text dx="80%" dy="54%" style="font-size: 14px; fill: #666;width: 20px;">
- {{outerSite[0]["service-instance-name"]}}
- </text>
- </g>
- </svg>
- </div>
+ </svg>
+ </div>
</div>
</div>
diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.spec.ts b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.spec.ts
index dc5d34d9..b8afc9c3 100644
--- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.spec.ts
+++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.spec.ts
@@ -1,3 +1,18 @@
+/*
+ Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CcvpnDetailComponent } from './ccvpn-detail.component';
diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts
index c9d60ef8..6f30253d 100644
--- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts
+++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts
@@ -3,366 +3,830 @@ import { MyhttpService } from '../myhttp.service';
import * as d3 from 'd3';
@Component({
- selector: 'app-ccvpn-detail',
- templateUrl: './ccvpn-detail.component.html',
- styleUrls: ['./ccvpn-detail.component.css']
+ selector: 'app-ccvpn-detail',
+ templateUrl: './ccvpn-detail.component.html',
+ styleUrls: ['./ccvpn-detail.component.css']
})
export class CcvpnDetailComponent implements OnInit {
- constructor(private myhttp:MyhttpService) { }
-
- ngOnInit() {
- // this.getDetails();
- this.dataInit();
- this.drawImages();
- }
-
- @Input() detailParams;
- @Input() namesTranslate;
- @Output() closeDetail = new EventEmitter();
-
- sotnVpnInfo:any;
- siteList=[];
- siteGroupList=[];
- dataInit(){
- // 循环真实参数,对比名字转换配置文件,将真实参数名字改成通用名字
- this.sotnVpnInfo = JSON.parse(this.detailParams.sotnvpnSer['input-parameters']).service.parameters.requestInputs;
- for(let key in this.sotnVpnInfo){
- for(let key2 in this.namesTranslate.sotnNameTranslate){
- let partnames = this.namesTranslate.sotnNameTranslate[key2].split("_");
- if(key.startsWith(partnames[0])&&key.endsWith(partnames[1])){
- this.sotnVpnInfo[key2] = this.sotnVpnInfo[key];
- break;
- }
- }
+ constructor(private myhttp:MyhttpService) { }
+
+ ngOnInit() {
+ // this.getDetails();
+ this.dataInit();
+ this.drawImages();
}
- this.siteList = this.detailParams.siteSer.map((item)=>{
- return JSON.parse(item['input-parameters']).service.parameters.requestInputs;
- })
- this.siteList.forEach((oneSite,idex)=>{
- oneSite["baseNames"]={};oneSite["cpeNames"]={};oneSite["wanportNames"]=[];
- for(let key in oneSite){
- let hasfind = false;
- if(key == "baseNames" || key == "cpeNames" || key == "wanportNames"){ continue };
- for(let key2 in this.namesTranslate.siteNameTranslate.baseNames){
- if(key.endsWith(this.namesTranslate.siteNameTranslate.baseNames[key2])){
- oneSite["baseNames"][key2] = oneSite[key];
- hasfind = true;
- break;
- }
- }
- if(hasfind){ continue };
- for(let key3 in this.namesTranslate.siteNameTranslate.cpeNames){
- if(key.endsWith(this.namesTranslate.siteNameTranslate.cpeNames[key3])){
- oneSite["cpeNames"][key3] = oneSite[key];
- hasfind = true;
- break;
- }
+ @Input() detailParams;
+ @Input() namesTranslate;
+ @Output() closeDetail = new EventEmitter();
+
+ sotnVpnInfo:any;
+ siteList=[];
+ siteGroupList=[];
+ dataInit(){
+ console.log(this.detailParams);
+
+ this.sotnVpnInfo = JSON.parse(this.detailParams['input-parameters']).service.parameters.requestInputs;
+ for(let key in this.sotnVpnInfo){
+ for(let key2 in this.namesTranslate.sotnNameTranslate){
+ let partnames = this.namesTranslate.sotnNameTranslate[key2].split("_");
+ if(key.startsWith(partnames[0])&&key.endsWith(partnames[1])){
+ this.sotnVpnInfo[key2] = this.sotnVpnInfo[key];
+ break;
+ }
+ }
}
- if(hasfind){ continue };
- let wanportStartName = key.split("_")[0];
- // 先分组,后面再变换名字
- let theItem = oneSite["wanportNames"].find((item,index)=>{
- if(item){
- return Object.keys(item)[0].startsWith(wanportStartName)
- }
+
+ this.siteList = this.detailParams.siteSer.map((item)=>{
+ return JSON.parse(item['input-parameters']).service.parameters.requestInputs;
})
- theItem?theItem[key]=oneSite[key]:oneSite["wanportNames"].push({[key]:oneSite[key]})
- }
- let wanportTs = Object.values(this.namesTranslate.siteNameTranslate.wanportNames);
- oneSite["wanportNames"].forEach((item)=>{
- for(let key in item){
- let newName = wanportTs.find((name)=>{
- return key.endsWith(name);
- })
- newName?item[newName]=item[key]:null;
- }
- })
-
- })
-
- this.siteGroupList = this.detailParams.sdwanSer.map((item)=>{
- return JSON.parse(item['input-parameters']).service.parameters.requestInputs;
- })
- this.siteGroupList.forEach((oneSiteGroup)=>{
- for(let key in oneSiteGroup){
- for(let key2 in this.namesTranslate.siteGroupNameTranslate){
- let partnames = this.namesTranslate.siteGroupNameTranslate[key2].split("_");
- if(key.startsWith(partnames[0])&&key.endsWith(partnames[1])){
- oneSiteGroup[key2] = oneSiteGroup[key];
- break;
- }
- }
- }
- })
- console.log(this.siteList)
- this.drawImage(this.siteList);
- }
-
- // site详情
- siteDetailData={baseNames:{},cpeNames:{},wanportNames:[]};
- siteDetail = false;
- showSiteDetail(item){
- this.siteDetail = true;
- this.siteDetailData = item;
- }
-
- wanPortModal = false;
- wanPortDetail = {};
- showWanportDetail(item){
- this.wanPortModal = true;
- this.wanPortDetail = item;
- }
- handleCancel(){
- this.wanPortModal = false;
- }
-
- // sitegroup详情
-
- // site节点图形描绘
- // site分类,根据site查tp pnf --> allotted-resource
- localSite = [];//本地site
- outerSite = [];//外部site
-
- getSiteAResource(){
- return new Promise((res,rej)=>{
- this.detailParams.siteSer.forEach((site)=>{
- site["relationship-list"]["relationship"].find((item)=>{return item["related-to"]=="site-resource"})?this.localSite.push(site):this.outerSite.push(site);
- })
-
- if(this.localSite[0]["service-instance-name"].startsWith("Dc")){
- this.localSite.reverse();
- }
-
- if(this.outerSite[0]["service-instance-name"].startsWith("Dc")){
- this.outerSite.reverse();
- }
-
- // 本地site获取tp pnf
- this.localSite.forEach((site)=>{
- let obj = {
- customerId: this.detailParams.customer.id,
- serviceType: this.detailParams.serviceType,
- serviceId: site["service-instance-id"]
- }
- this.myhttp.getAllottedResource(obj)
- .subscribe((data)=>{
- // console.log(data);
- let resource = data["allotted-resource"].find((item)=>{ return item["allotted-resource-name"]=="sotn ar"});
- // console.log(resource);
- let tps_pnfs = resource["relationship-list"]["relationship"].find((item)=>{ return item["related-to"]=="p-interface"})["relationship-data"];
- // console.log(tps_pnfs);
- // site.pnfname = tps_pnfs.find((item)=>{return item["relationship-key"]=="pnf.pnf-name"})["relationship-value"];
- site.tpsitename = tps_pnfs.find((item)=>{return item["relationship-key"]=="p-interface.interface-name"})["relationship-value"];
- // // 通过pnfname获取domain(network-resource);
- // this.myhttp.getPnfDetail(site.pnfname)
- // .subscribe((data2)=>{
- // // console.log(data2);
- // let networkRelation = data2["relationship-list"]["relationship"].find((item)=>{ return item["related-to"]=="network-resource"})["relationship-data"];
- // site.domain = networkRelation.find((item)=>{return item["relationship-key"]=="network-resource.network-id"})["relationship-value"];
- // res("sites-domain");
- // })
- res("sites-domain");
- })
- })
- })
- }
- //通过sotn 查vpn-id --> tp pnf --> allotted-resource
- relation = {sotn:{
- name:"sotn1",
- vpns:[
- {
- name:"vpn1",
- domain:"domain1",
- site:"site1",
- tps:[
- {name:"tp1",lineto:"site1"},
- {name:"tp2",lineto:"domain1"}
- ]
- },
- {
- name:"vpn2",
- domain:"domain2",
- site:"site2",
- tps:[
- {name:"tp3",lineto:"site2"},
- {name:"tp4",lineto:"domain2"}
- ]
- }
- ]
- }};
-
- vpns = [{name: "", tps: [], domain: "", sitetpname: "", othertpname: ""}];
- getSotnAresource(){
- return new Promise((res,rej)=>{
- let connectivityId = this.detailParams.sotnvpnSer["relationship-list"]["relationship"]
- .find((item)=>{return item["related-to"]=="connectivity"})["relationship-data"]
- .find((item2)=>{return item2["relationship-key"]=="connectivity.connectivity-id"})["relationship-value"];
- this.myhttp.getSotnConnectivity(connectivityId)
- .subscribe((data)=>{
- // console.log(data); //默认一个connectivityId只能查到一个connectivity
- let vpns = data.connectivity[0]["relationship-list"]["relationship"]
- .filter((item)=>{ return item["related-to"]=="vpn-binding"})
- .map((item2)=>{return item2["relationship-data"].find((item3)=>{return item3["relationship-key"]=="vpn-binding.vpn-id"})["relationship-value"]});
- console.log(vpns);
- this.detailParams.sotnvpnSer.vpns = vpns.map((item)=>{return {name:item}});
- this.detailParams.sotnvpnSer.vpns.forEach((vpn,index)=>{
- this.myhttp.getVpnBinding(vpn.name)
- .subscribe((data2)=>{
- // console.log(data2); //默认一个vpnid只能查到一个vpnbinding
- let tps_pnfs = data2["vpn-binding"][0]["relationship-list"]["relationship"]
- .filter((item)=>{ return item["related-to"]=="p-interface"})
- .map((item2)=>{return item2["relationship-data"]});
- let pnfname = tps_pnfs.map((item)=>{return item.find((item2)=>{return item2["relationship-key"]=="pnf.pnf-name"})["relationship-value"]});
- let tpnames = tps_pnfs.map((item)=>{return item.find((item2)=>{return item2["relationship-key"]=="p-interface.interface-name"})["relationship-value"]});
- // console.log(pnfname)
- // console.log(tpnames)
- vpn.tps = tpnames;
- // let thissite = this.localSite.find((item)=>{return item.pnfname == pnfname[0]}); //查找site上pnfname相同的项,即同domain
- // console.log(thissite);
- // thissite.tpsotnname = tpsotnnames.find((item)=>{return item!=thissite.tpsitename});
- // 通过pnfname获取domain(network-resource);
- this.myhttp.getPnfDetail(pnfname[0])
- .subscribe((data2)=>{
- // console.log(data2);
- let networkRelation = data2["relationship-list"]["relationship"].find((item)=>{ return item["related-to"]=="network-resource"})["relationship-data"];
- vpn.domain = networkRelation.find((item)=>{return item["relationship-key"]=="network-resource.network-id"})["relationship-value"];
- if(this.localSite[index]){
- vpn.sitetpname = this.localSite.find((site)=>{return tpnames.includes(site.tpsitename)}).tpsitename;
- console.log(tpnames)
- console.log(vpn.sitetpname)
- vpn.othertpname = tpnames.find((name)=>{return name != vpn.sitetpname});
- }else{
- vpn.sitetpname = this.localSite[0].tpsitename;
- vpn.othertpname = tpnames.find((name)=>{return name != vpn.sitetpname});
+ this.siteList.forEach((oneSite,idex)=>{
+ oneSite["baseNames"]={};oneSite["cpeNames"]={};oneSite["wanportNames"]=[];
+ for(let key in oneSite){
+ let hasfind = false;
+ if(key == "baseNames" || key == "cpeNames" || key == "wanportNames"){ continue };
+ for(let key2 in this.namesTranslate.siteNameTranslate.baseNames){
+ if(key.endsWith(this.namesTranslate.siteNameTranslate.baseNames[key2])){
+ oneSite["baseNames"][key2] = oneSite[key];
+ hasfind = true;
+ break;
+ }
+ }
+ if(hasfind){ continue };
+ for(let key3 in this.namesTranslate.siteNameTranslate.cpeNames){
+ if(key.endsWith(this.namesTranslate.siteNameTranslate.cpeNames[key3])){
+ oneSite["cpeNames"][key3] = oneSite[key];
+ hasfind = true;
+ break;
+ }
+ }
+ if(hasfind){ continue };
+ let wanportStartName = key.split("_")[0];
+
+ let theItem = oneSite["wanportNames"].find((item,index)=>{
+ if(item){
+ return Object.keys(item)[0].startsWith(wanportStartName)
}
+ })
+ theItem?theItem[key]=oneSite[key]:oneSite["wanportNames"].push({[key]:oneSite[key]})
+ }
+ let wanportTs = Object.values(this.namesTranslate.siteNameTranslate.wanportNames);
+ oneSite["wanportNames"].forEach((item)=>{
+ for(let key in item){
+ let newName = wanportTs.find((name)=>{
+ return key.endsWith(name);
+ })
+ newName?item[newName]=item[key]:null;
+ }
+ })
+
+ })
- this.vpns = this.detailParams.sotnvpnSer.vpns;
- res("sotn-domain");
- // console.log(vpn);
- })
-
- })
- })
+ this.siteGroupList = this.detailParams.sdwanSer.map((item)=>{
+ return JSON.parse(item['input-parameters']).service.parameters.requestInputs;
})
- })
- }
-
- drawImages(){
-
- this.getSiteAResource().then((data)=>{
- console.log(data);
- return this.getSotnAresource()
- }).then((data)=>{
- console.log(data);
- console.log(this.localSite);
- this.detailSites = this.detailParams.sotnvpnSer.Type == "CCVPN"?false:true;
- this.detailParams.sotnvpnSer.Type == "CCVPN"?null:this.detailLines.length = this.detailLines.length-3;
- // 当只有一个vpn的时候
- if(this.detailParams.sotnvpnSer.Type == "CCVPN" && this.vpns.length == 1){
- let line = {
- "x1":"32%","y1":"12%","x2":"32%","y2":"50%"//t2--site2 当本地云只有一朵的时候,tp2与本地site2相连
- }
- this.detailLines.length = this.detailLines.length-6;
- this.detailLines.push(line);
- // 当本地site有两个的时候
- if(this.localSite.length==2){
- let line = {
- "x1":"40%","y1":"52%","x2":"52%","y2":"52%"//site2--site3
- }
- this.detailLines.push(line);
+ this.siteGroupList.forEach((oneSiteGroup)=>{
+ for(let key in oneSiteGroup){
+ for(let key2 in this.namesTranslate.siteGroupNameTranslate){
+ let partnames = this.namesTranslate.siteGroupNameTranslate[key2].split("_");
+ if(key.startsWith(partnames[0])&&key.endsWith(partnames[1])){
+ oneSiteGroup[key2] = oneSiteGroup[key];
+ break;
+ }
+ }
+ }
+ })
+ }
+
+
+ siteDetailData={baseNames:{},cpeNames:{},wanportNames:[]};
+ siteDetail = false;
+ showSiteDetail(item){
+ this.siteDetail = true;
+ this.siteDetailData = item;
+ }
+
+ wanPortModal = false;
+ wanPortDetail = {};
+ showWanportDetail(item){
+ this.wanPortModal = true;
+ this.wanPortDetail = item;
+ }
+ handleCancel(){
+ this.wanPortModal = false;
+ }
+
+
+
+
+
+ localSite = [];
+ outerSite = [];
+
+ getSiteAResource(){
+ return new Promise((res,rej)=>{
+ this.detailParams.siteSer.forEach((site)=>{
+ site["relationship-list"]["relationship"].find((item)=>{return item["related-to"]=="site-resource"})?this.localSite.push(site):this.outerSite.push(site);
+ });
+
+ if(this.localSite[0] && this.localSite[0]["service-instance-name"].startsWith("Dc")){
+ this.localSite.reverse();
+ }
+
+ if(this.outerSite[0] && this.outerSite[0]["service-instance-name"].startsWith("Dc")){
+ this.outerSite.reverse();
+ }
+ console.log(this.localSite);
+ console.log(this.outerSite);
+
+ this.localSite.forEach((site)=>{
+ let obj = {
+ customerId: this.detailParams.customer.id,
+ serviceType: this.detailParams.serviceType,
+ serviceId: site["service-instance-id"]
+ };
+ this.myhttp.getAllottedResource(obj)
+ .subscribe((data)=>{
+ let resource = data["allotted-resource"].find((item)=>{ return item["allotted-resource-name"]=="sotn ar"});
+ let tps_pnfs = resource["relationship-list"]["relationship"].find((item)=>{ return item["related-to"]=="p-interface"})["relationship-data"];
+ site.tpsitename = tps_pnfs.find((item)=>{return item["relationship-key"]=="p-interface.interface-name"})["relationship-value"];
+ res("sites-domain");
+ })
+ })
+ })
+ }
+
+
+ vpns = [{
+ name:"",
+ domain: "",
+ tp1: "",
+ tp2: "",
+ tps:[],
+ site: [],
+ type: "domain",
+ start:false,
+ end:false
+ }];
+ cloudDomain={
+ cloud: "Partent Network",
+ site: [],
+ type: "cloud"
+ };
+ d3Data={
+ dates:[],
+ linkss:[]
+ };
+ svg=d3.select("#togo");
+ scale=1;
+ width=600;
+ height=600;
+ container;
+ nodes;
+ lineGroup;
+
+ getSotnAresource(){
+ return new Promise((res,rej)=>{
+ let connectivityId = this.detailParams["relationship-list"]["relationship"]
+ .find((item)=>{return item["related-to"]=="connectivity"})["relationship-data"]
+ .find((item2)=>{return item2["relationship-key"]=="connectivity.connectivity-id"})["relationship-value"];
+ this.myhttp.getSotnConnectivity(connectivityId)
+ .subscribe((data)=>{
+
+ let vpns = data.connectivity[0]["relationship-list"]["relationship"]
+ .filter((item)=>{ return item["related-to"]=="vpn-binding"})
+ .map((item2)=>{return item2["relationship-data"].find((item3)=>{return item3["relationship-key"]=="vpn-binding.vpn-id"})["relationship-value"]});
+ console.log(vpns);
+ this.detailParams.vpns = vpns.map((item)=>{return {
+ name:item,
+ domain: "",
+ tp1: "",
+ tp2: "",
+ tps:[],
+ site: [],
+ type: "domain",
+ start:false,
+ end:false
+ }});
+ this.detailParams.vpns.forEach((vpn,index)=>{
+ this.myhttp.getVpnBinding(vpn.name)
+ .subscribe((data2)=>{
+
+ let tps_pnfs = data2["vpn-binding"][0]["relationship-list"]["relationship"]
+ .filter((item)=>{ return item["related-to"]=="p-interface"})
+ .map((item2)=>{return item2["relationship-data"]});
+ let pnfname = tps_pnfs.map((item)=>{return item.find((item2)=>{return item2["relationship-key"]=="pnf.pnf-name"})["relationship-value"]});
+ let tpnames = tps_pnfs.map((item)=>{return item.find((item2)=>{return item2["relationship-key"]=="p-interface.interface-name"})["relationship-value"]});
+
+ vpn.tps = tpnames;
+ this.myhttp.getPnfDetail(pnfname[0])
+ .subscribe((data2)=>{
+
+ let networkRelation = data2["relationship-list"]["relationship"].find((item)=>{ return item["related-to"]=="network-resource"})["relationship-data"];
+ vpn.domain = networkRelation.find((item)=>{return item["relationship-key"]=="network-resource.network-id"})["relationship-value"];
+ console.log(this.localSite)
+ for(let i=0;i<this.localSite.length;i++){
+ for(let a=0;a<this.detailParams.vpns.length;a++){
+ let tps=this.detailParams.vpns[a].tps;
+ if(i==0){
+ if(tps.indexOf(this.localSite[i]["tpsitename"])>-1){
+ this.detailParams.vpns[a].site=[];
+ let index=tps.indexOf(this.localSite[i]["tpsitename"]);
+ let tp1=tps.slice(index,1)[0];
+ let tp2=tps.find((name)=>{return name != tp1});
+ this.detailParams.vpns[a].tp1=tp1;
+ this.detailParams.vpns[a].tp2=tp2;
+ this.detailParams.vpns[a].site.push(this.localSite[i]["service-instance-name"]);
+ this.detailParams.vpns[a].start=true;
+ let first=this.detailParams.vpns.splice(a,1)[0];
+ console.log(first)
+ this.detailParams.vpns.unshift(first);
+ console.log(this.detailParams.vpns)
+ }else {
+ this.detailParams.vpns[a].tp1=tps[0];
+ this.detailParams.vpns[a].tp2=tps[1];
+ }
+
+ } else if(i==1){
+ if(tps.indexOf(this.localSite[i]["tpsitename"])>-1){
+ let thisDomain=this.detailParams.vpns[a].domain;
+ if(thisDomain==this.detailParams.vpns[0].domain){
+ console.log(this.detailParams.vpns[0]);
+ console.log(this.localSite[i]["service-instance-name"]);
+ this.detailParams.vpns[0].site.push(this.localSite[i]["service-instance-name"])
+ console.log(this.detailParams.vpns[0])
+ }else {
+ this.detailParams.vpns[a].site=[];
+ let index=tps.indexOf(this.localSite[i]["tpsitename"]);
+ let tp2=tps.slice(index,1)[0];
+ let tp1=tps.find((name)=>{return name != tp2});
+ this.detailParams.vpns[a].tp1=tp1;
+ this.detailParams.vpns[a].tp2=tp2;
+ console.log("有多个domain,2个site");
+ this.detailParams.vpns[a].site.push(this.localSite[i]["service-instance-name"]);
+ this.detailParams.vpns[a].start=false;
+ this.detailParams.vpns[a].end=true;
+ let last=this.detailParams.vpns.splice(a,1)[0];
+ console.log(last);
+ this.detailParams.vpns.push(last);
+ }
+
+ }
+ }
+
+ }
+ }
+ for(let b=0;b<this.outerSite.length;b++){
+ this.cloudDomain.site.push(this.outerSite[b]["service-instance-name"]);
+ }
+ this.detailParams.vpns.push(this.cloudDomain);
+ console.log(this.detailParams.vpns);
+ this.vpns = this.detailParams.vpns;
+ console.log(this.vpns);
+ res(this.detailParams.vpns);
+ })
+
+ })
+ })
+ })
+ })
+ }
+
+ drawImages(){
+ this.getSiteAResource().then((data)=>{
+ console.log(data);
+ return this.getSotnAresource();
+ }).then((data)=>{
+ console.log(data);
+ this.detailParams.vpns.forEach((item)=>{
+ if(item.type == "domain" && item.site.length == 0){
+ this.d3Data.dates.push(
+ {
+ name: item.domain,
+ type: 'domain'
+ },{
+ name: item.tp1,
+ type: 'tp'
+
+ },{
+ name: item.tp2,
+ type: 'tp'
+ });
+ this.d3Data.linkss.push({
+ source: item.domain,
+ target: item.domain
+ },{
+ source: item.domain,
+ target: item.tp1
+ },{
+ source: item.domain,
+ target: item.tp2
+ })
+ };
+ if (item.type == "domain" && item.site.length == 1) {
+ this.d3Data.dates.push({
+ name: item.domain,
+ type: 'domain'
+ }, {
+ name: item.tp1,
+ type: 'tp'
+ }, {
+ name: item.tp2,
+ type: 'tp'
+ });
+ this.d3Data.linkss.push({
+ source: item.domain,
+ target: item.domain
+ }, {
+ source: item.domain,
+ target: item.tp1
+ }, {
+ source: item.domain,
+ target: item.tp2
+ });
+ if (item.start == true && item.end == false) {
+ this.d3Data.dates.push(
+ {
+ name: item.site[0],
+ type: 'site'
+ });
+ this.d3Data.linkss.push({
+ source: item.tp1,
+ target: item.site[0]
+ })
+ }
+ if (item.start == false && item.end == true) {
+ this.d3Data.dates.push(
+ {
+ name: item.site[0],
+ type: 'site'
+ });
+ this.d3Data.linkss.push({
+ source: item.tp2,
+ target: item.site[0]
+ })
+ }
+
+ }else if (item.type == "domain" && item.site.length == 2) {
+ this.d3Data.dates.push({
+ name: item.domain,
+ type: 'domain'
+ }, {
+ name: item.tp1,
+ type: 'tp'
+ }, {
+ name: item.tp2,
+ type: 'tp'
+ },
+ {
+ name: item.site[0],
+ type: 'site'
+ },
+ {
+ name: item.site[1],
+ type: 'site'
+ });
+ this.d3Data.linkss.push({
+ source: item.domain,
+ target: item.domain
+ }, {
+ source: item.domain,
+ target: item.tp1
+ }, {
+ source: item.domain,
+ target: item.tp2
+ }, {
+ source: item.tp1,
+ target: item.site[0]
+ }, {
+ source: item.tp2,
+ target: item.site[1]
+ });
+ }else if (item.type == "cloud" && item.site.length == 1) {
+ this.d3Data.dates.push({
+ name: item.cloud,
+ type: 'cloud'
+ },
+ {
+ name: item.site[0],
+ type: 'site'
+ });
+ this.d3Data.linkss.push({
+ source: item.cloud,
+ target: item.cloud
+ }, {
+ source: item.cloud,
+ target: item.site[0]
+ })
+ }
+ else if (item.type == "cloud" && item.site.length == 2) {
+ this.d3Data.dates.push({
+ name: item.cloud,
+ type: 'cloud',
+ source: item.cloud,
+ target: item.cloud
+ },
+ {
+ name: item.site[0],
+ type: 'site',
+ source: item.cloud,
+ target: item.site[0]
+ },
+ {
+ name: item.site[1],
+ type: 'site',
+ source: item.cloud,
+ target: item.site[1]
+ });
+ this.d3Data.linkss.push({
+ source: item.cloud,
+ target: item.cloud
+ }, {
+ source: item.cloud,
+ target: item.site[0]
+ }, {
+ source: item.cloud,
+ target: item.site[1]
+ })
+ }
+
+
+ });
+
+ var siteNum = 0;
+
+ for (var b = 0; b < this.d3Data.dates.length; b++) {
+ if (this.d3Data.dates[b].type == "site") {
+ siteNum++;
+ }
+ }
+
+ if (this.detailParams.vpns.length == 2) {
+ var source = this.detailParams.vpns.find((item) => {return item["type"] == "domain"}).site[1];
+ var target = this.detailParams.vpns.find((item) => {return item["type"] == "cloud"}).site[0];
+ this.d3Data.linkss.push({
+ source: source,
+ target: target
+ })
+ } else if (this.detailParams.vpns.length > 2) {
+ if (siteNum == 2) {
+ for (var c = 0; c < this.detailParams.vpns.length - 1; c++) {
+ if (c + 1 == this.detailParams.vpns.length - 1) {
+ var sourcess = this.detailParams.vpns[c].tp2,
+ targetss = this.detailParams.vpns.find((item)=> {return item["type"] == "cloud";}).cloud;
+ this.d3Data.linkss.push({
+ source: sourcess,
+ target: targetss
+ });
+ break;
+ }
+ var sources = this.detailParams.vpns[c].tp2,
+ targets = this.detailParams.vpns[c + 1].tp1;
+ this.d3Data.linkss.push({
+ source: sources,
+ target: targets
+ })
+ }
+ } else if (siteNum == 4) {
+ for (var c = 0; c < this.detailParams.vpns.length - 1; c++) {
+ if (c + 1 == this.detailParams.vpns.length - 1) {
+ break;
+ }
+ var sources = this.detailParams.vpns[c].tp2,
+ targets = this.detailParams.vpns[c + 1].tp1;
+ this.d3Data.linkss.push({
+ source: sources,
+ target: targets
+ })
+ }
+ }
+ }
+ setTimeout(this.render(),0)
+ });
+ }
+
+
+
+ clickShow = false;
+ hoverShow = false;
+ toggleClick(){
+ this.clickShow = !this.clickShow;
+ }
+ hoverShowcould(){
+ this.hoverShow = true;
+ }
+ hoverHidecould(){
+ this.hoverShow = false;
+ }
+
+
+
+ goback(){
+ this.closeDetail.emit();
+ }
+
+
+ render() {
+ console.log("dadada");
+ console.log(this.d3Data);
+ console.log(this.detailParams.vpns);
+ this.scale = 1;
+
+ this.svg .attr('width', this.width)
+ .attr('height', this.height);
+ this.container = this.svg.append('g')
+ .attr('transform', 'scale(' + this.scale + ')');
+
+ this.initPosition();
+ this.initLink();
+ this.initNode();
+ }
+
+
+ initPosition() {
+ let origin = [this.width / 6, this.height / 7];
+ var data=this.d3Data.dates;
+ let points = this.getVertices(origin, Math.min(this.width, this.height) * 0.3,data.length,this.detailParams.vpns);
+
+ this.d3Data.dates.forEach((item,i)=>{
+ item.x = points[i].x;
+ item.y = points[i].y;
+ })
+ }
+
+
+ getVertices(origin, r, n,data) {
+ if (typeof n !== 'number') return;
+ var ox = origin[0];
+ var oy = origin[1];
+ var i = 0;
+ var points = [];
+ var tempAngle =180,
+ reduce=50,
+ add=100;
+ for(let a=0;a<this.detailParams.vpns.length;a++){
+ if(this.detailParams.vpns[a].type=="domain"){
+ if(this.detailParams.vpns[a].site.length == 0){
+ tempAngle =180*i;
+ points.push({
+ x: ox +tempAngle,
+ y: oy
+ },{
+ x: ox +tempAngle-reduce,
+ y: oy+add
+ },{
+ x: ox +tempAngle+reduce,
+ y: oy+add
+ });
+ i++;
+ }else if((this.detailParams.vpns[a].site.length == 1)){
+ tempAngle =180*i;
+ points.push({
+ x: ox +tempAngle,
+ y: oy
+ },{
+ x: ox +tempAngle-reduce,
+ y: oy+add
+ },{
+ x: ox +tempAngle+reduce,
+ y: oy+add
+ },{
+ x: ox +tempAngle-1.5*reduce,
+ y: oy+2*add
+ });
+ i++;
+ } else if((this.detailParams.vpns[a].site.length == 2)){
+ tempAngle =350*i;
+ reduce=70;
+ points.push({
+ x: ox +tempAngle,
+ y: oy
+ },{
+ x: ox +tempAngle-reduce,
+ y: oy+add
+ },{
+ x: ox +tempAngle+reduce,
+ y: oy+add
+ },{
+ x: ox +tempAngle-1.5*reduce,
+ y: oy+2*add
+ }
+ ,{
+ x: ox +tempAngle+reduce,
+ y: oy+2*add
+ });
+ i++;
+ }
+
+ }else if((this.detailParams.vpns[a].type=="cloud")){
+ if((this.detailParams.vpns[a].site.length ==1)){
+ tempAngle =180*i;
+ points.push({
+ x: ox +tempAngle,
+ y: oy
+ },{
+ x: ox +tempAngle+1.5*reduce,
+ y: oy+2*add
+ });
+ i++;
+ } else if((this.detailParams.vpns[a].site.length == 2)){
+ if((this.detailParams.vpns.length>2)){
+ tempAngle =180*i;
+ }else{
+ tempAngle =400*i;
+ }
+ points.push({
+ x: ox +tempAngle,
+ y: oy
+ },{
+ x: ox +tempAngle-1.5*reduce,
+ y: oy+2*add
+ }
+ ,{
+ x: ox +tempAngle+1.5*reduce,
+ y: oy+2*add
+ });
+ i++;
+ }
+
+ }
+ }
+
+ return points;
+ }
+
+
+ initLink() {
+ this.drawLinkLine();
+ }
+
+
+ initNode() {
+ var self = this;
+
+ this.nodes = this.container.selectAll(".node")
+ .data(this.d3Data.dates)
+ .enter()
+ .append("g")
+ .attr("transform", function (d) {
+ return "translate(" + d.x + "," + d.y + ")";
+ })
+ .attr('class', 'node')
+ .style("cursor","pointer")
+ .call(d3.behavior.drag()
+ .on("drag", function (d) {
+ self.onDrag(this, d)
+ })
+ );
+
+
+ this.drawNodeSymbol();
+
+ this.drawNodeTitle();
+ }
+
+
+
+ drawNodeSymbol() {
+ var imgmap = {
+ 'domain': '../../assets/images/domain.png',
+ 'tp': '../../assets/images/tp.png',
+ 'site': '../../assets/images/site.png',
+ 'cloud': '../../assets/images/out-domain.png'
+ };
+
+
+ this.nodes.append('image')
+ .attr('width', function (d) {
+ let width = "15%";
+ switch (d.type) {
+ case 'domain':
+ width ="15%";
+ break;
+ case 'tp':
+ width ="4%";
+ break;
+ case 'site':
+ width ="10%";
+ break;
+ case 'cloud':
+ width ="15%";
+ break;
+ default:
+ break;
+ }
+ return width;
+ })
+ .attr('height', function (d) {
+ let height = "15%";
+ switch (d.type) {
+ case 'domain':
+ height ="15%";
+ break;
+ case 'tp':
+ height ="4%";
+ break;
+ case 'site':
+ height ="10%";
+ break;
+ case 'cloud':
+ height ="15%";
+ break;
+ default:
+ break;
+ }
+ return height;
+ })
+ .attr('xlink:href', function (d) {
+ return imgmap[d.type];
+ })
+ .attr('x',function () {
+ return -this.getBBox().width/2
+ })
+ .attr('y',function () {
+ return -this.getBBox().height/2
+ });
+ }
+
+
+
+ drawNodeTitle() {
+
+ this.nodes.append("text")
+ .attr('class','node-title')
+ .text(function (d) {
+ return d.name;
+ })
+ .attr("dx",function (d) {
+ var x=0;
+ if(d.type=="tp"){
+ x=20;
+ }else {
+ x=0;
+ }
+ return x;
+ })
+ .attr("dy",function (d) {
+ var y=0;
+ if(d.type=="tp"){
+ y=25;
+ }else {
+ y=0;
+ }
+ return y;
+ });
+ }
+
+
+ drawLinkLine() {
+ let data = this.d3Data.dates;
+ if (this.lineGroup) {
+ this.lineGroup.selectAll('.link')
+ .attr('d', link => genLinkPath(link))
+ } else {
+ this.lineGroup = this.container.append('g');
+ this.lineGroup.selectAll('.link')
+ .data(this.d3Data.linkss)
+ .enter()
+ .append('path')
+ .attr('class', 'link')
+ .attr('d',function (link) {
+ return genLinkPath(link)
+ })
+
}
- // 当外部site有两个的时候
- if(this.outerSite.length==2){
- let line = {
- "x1":"75%","y1":"20%","x2":"60%","y2":"50%"//out-domain--site3
- }
- this.detailLines.push(line);
+ function genLinkPath(d) {
+ let sx = data.find(function(item){
+ return item["name"]==d.source;
+ }).x;
+ let sy = data.find(function(item){
+ return item["name"]==d.source;
+ }).y;
+ let tx =data.find(function(item){
+ return item["name"]==d.target;
+ }).x;
+ let ty =data.find(function(item){
+ return item["name"]==d.target;
+ }).y;
+ return 'M' + sx + ',' + sy + ' L' + tx + ',' + ty;
}
- }
- })
- // let allnodes = [this.getSiteAResource(),this.getSotnAresource()];
- // Promise.all(allnodes).then((data)=>{
- // console.log(data)
- // console.log(this.localSite);
-
-
- // })
- }
-
- detailSites=false;
- detailLines=[ //详情拓扑图连线的坐标
- {
- "x1":"5%","y1":"50%","x2":"17%","y2":"25%"//site1--tp1
- },
- {
- "x1":"22%","y1":"20%","x2":"17%","y2":"25%"//tp1--domian1
}
- ,
- {
- "x1":"26%","y1":"15%","x2":"30%","y2":"12%"//domian1--tp2
- },
-
- {
- "x1":"80%","y1":"20%","x2":"85%","y2":"50%"//out-domain--site4
- },
-
- {
- "x1":"50%","y1":"22%","x2":"45%","y2":"28%"//tp4--domian2
- },
- {
- "x1":"40%","y1":"11%","x2":"50%","y2":"15%"//domian2--tp3
- },
- {
- "x1":"32%","y1":"11%","x2":"41%","y2":"11%"//tp2--tp3
- },
-
- {
- "x1":"45%","y1":"30%","x2":"35%","y2":"50%"//site2--tp4
- },
- {
- "x1":"75%","y1":"20%","x2":"60%","y2":"50%"//out-domain--site3
- },
- {
- "x1":"40%","y1":"52%","x2":"52%","y2":"52%"//site2--site3
+
+
+
+ update(d) {
+ this.drawLinkLine();
}
- ];
- lines=[];
- siteImage=[];
- drawImage(sitelist){
- let cx = 200;
- let cy = 200;
- let r = 150;
- let startAngle = -210 * (Math.PI/180);
- let step = sitelist.length > 1 ? 120/(sitelist.length-1) * (Math.PI/180) : 1;
-
- this.lines = sitelist.map((item,index)=>{
- let x = cx + Math.cos(startAngle - step*index)*r;
- let y = cy + Math.sin(startAngle - step*index)*r;
- return {img:"line",x1:cx,y1:cy,x2:x,y2:y}
- })
- this.siteImage = this.lines.map((item)=>{
- return {img:"site",x:item.x2 - 25,y:item.y2 - 25}
- })
- console.log(this.siteImage,this.lines)
- }
- clickShow = false;
- hoverShow = false;
- toggleClick(){
- this.clickShow = !this.clickShow;
- }
- hoverShowcould(){
- this.hoverShow = true;
- }
- hoverHidecould(){
- this.hoverShow = false;
- }
-
-
-
- goback(){
- this.closeDetail.emit();
- }
+
+
+ onDrag(ele, d) {
+ d.x = d3.event.x;
+ d.y = d3.event.y;
+ d3.select(ele)
+ .attr('transform', "translate(" + d3.event.x + "," + d3.event.y + ")");
+ this.update(d);
+ }
+
}
diff --git a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.css b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.css
new file mode 100644
index 00000000..f1d359f0
--- /dev/null
+++ b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.css
@@ -0,0 +1,77 @@
+/*
+ Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+.title {
+ font: 700 18px/18px "思源黑体";
+ color: #4c5e70;
+ margin-bottom: 18px;
+}
+hr {
+ border: none;
+ height: 2px;
+ background-color: #dce1e7;
+ margin-bottom: 10px;
+}
+.model {
+ background-color: #fff;
+ height: 90%;
+ overflow-y: auto;
+}
+.model .back {
+ position: absolute;
+ top: 10px;
+ right: 20px;
+}
+.model .creation {
+ position: relative;
+ width: 60%;
+ height: 100%;
+ overflow-y: auto;
+ border-radius: 5px;
+ padding: 20px;
+}
+.model .creation .baseparms h3 {
+ color: #3fa8eb;
+ font: 700 16px "Arial";
+}
+.model .creation .baseparms h4 {
+ font: 700 16px "Arial";
+}
+.model .creation .baseparms ul li {
+ margin: 3px 0;
+}
+.model .creation .baseparms ul li span {
+ display: inline-block;
+ width: 40%;
+ font: 700 14px "Arial";
+ vertical-align: middle;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ text-align: right;
+}
+.model .creation .baseparms ul li input {
+ width: 165px;
+}
+.model .creation .submit {
+ position: absolute;
+ top: 10px;
+ right: 20px;
+}
+.model .chart {
+ width: 40%;
+ padding: 10px;
+ height: 100%;
+ border-left: 10px solid #f3f3f3;
+}
diff --git a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.html b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.html
new file mode 100644
index 00000000..0ada7dd1
--- /dev/null
+++ b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.html
@@ -0,0 +1,123 @@
+<!--
+ Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-->
+<h3 class="title"> Services List </h3>
+<hr>
+<div class="model">
+ <!-- 创建数据 -->
+ <button class="back" nz-button (click)="goback()"><span><i class="anticon anticon-rollback"></i></span></button>
+ <div class="creation fl">
+ <div *ngIf="createParams.commonParams.templateType=='E2E Service'" class="baseparms clearfix">
+ <h3>Base</h3>
+ <ul>
+ <li><span>Name*</span> <input nz-input [(ngModel)]="service.name"></li>
+ <li><span>Description*</span> <input nz-input [(ngModel)]="service.description"></li>
+ </ul>
+ <br>
+ <h3>Template Parameters</h3>
+ <h4>template Inputs</h4>
+ <ul>
+ <li *ngFor="let parameter of templateParameters.inputs; let i = index;">
+ <span *ngIf="parameter.type !== 'vf_location' && parameter.type !== 'sdn_controller'">{{parameter.name}}:</span>
+ <input *ngIf="parameter.type !== 'vf_location' && parameter.type !== 'sdn_controller'" nz-input [(ngModel)]="parameter.value">
+
+ <h5 *ngIf="parameter.type === 'vf_location'" style="padding-left:10px;">id: {{parameter.name}}</h5>
+ <span *ngIf="parameter.type === 'vf_location'"> vf_location: </span>
+ <nz-select *ngIf="parameter.type === 'vf_location'" style="width: 165px;" [(ngModel)]="parameter.value" nzAllowClear >
+ <nz-option *ngFor="let vim of vimInfos" [nzValue]="vim" [nzLabel]="vim.name"></nz-option>
+ </nz-select>
+ <!-- <nz-select *ngIf="parameter.type === 'sdn_controller'" style="width: 165px;" [(ngModel)]="parameter.value" nzAllowClear >
+ <nz-option *ngFor="let control of sdnControllers" [nzValue]="control" [nzLabel]="control.name"></nz-option>
+ </nz-select> -->
+ </li>
+ </ul>
+ <h4>nestedTemplate Inputs</h4>
+ <div *ngFor="let template of templateParameters.nestedTemplates;">
+ <h4 style="font:400 14px 'Arial';color:#aaa;">templateName: {{template.name}}</h4>
+ <ul>
+ <li *ngFor="let input of template.inputs; let i = index;">
+ <span *ngIf="input.type !== 'vf_location' && input.type !== 'sdn_controller'" > {{input.name}}: </span>
+ <input *ngIf="input.type !== 'vf_location' && input.type !== 'sdn_controller'" nz-input [(ngModel)]="input.value">
+
+ <h5 *ngIf="input.type === 'vf_location'" style="padding-left:10px;">id: {{input.name}}</h5>
+ <span *ngIf="input.type === 'vf_location'"> vf_location: </span>
+ <nz-select *ngIf="input.type === 'vf_location'" style="width: 165px;" [(ngModel)]="input.value" nzAllowClear >
+ <nz-option *ngFor="let vim of vimInfos" [nzValue]="vim" [nzLabel]="vim.name"></nz-option>
+ </nz-select>
+ <!-- <nz-select *ngIf="input.type === 'sdn_controller'" style="width: 165px;" [(ngModel)]="input.value" nzAllowClear >
+ <nz-option *ngFor="let control of sdnControllers" [nzValue]="control" [nzLabel]="control.name"></nz-option>
+ </nz-select> -->
+ </li>
+ </ul>
+ </div>
+
+ </div>
+
+ <div *ngIf="createParams.commonParams.templateType=='Network Service'" class="baseparms clearfix">
+ <h3>Base</h3>
+ <ul>
+ <li><span>Name*</span> <input nz-input [(ngModel)]="ns_service.nsName"></li>
+ <li><span>Description*</span> <input nz-input [(ngModel)]="ns_service.description"></li>
+ </ul>
+ <h3>Template Parameters</h3>
+ <h4>template Inputs</h4>
+ <ul>
+ <li *ngFor="let parameter of nsTemplateParameters.inputs2; let i = index;">
+ <span *ngIf="parameter.type !== 'vf_location' && parameter.type !== 'sdn_controller'">{{parameter.name}}:</span>
+ <input *ngIf="parameter.type !== 'vf_location' && parameter.type !== 'sdn_controller'" nz-input [(ngModel)]="parameter.value">
+
+ <h5 *ngIf="parameter.type === 'vf_location'" style="padding-left:10px;">id: {{parameter.name}}</h5>
+ <span *ngIf="parameter.type === 'vf_location'"> vf_location: </span>
+ <nz-select *ngIf="parameter.type === 'vf_location'" style="width: 165px;" [(ngModel)]="parameter.value" nzAllowClear >
+ <nz-option *ngFor="let vim of vimInfos" [nzValue]="vim" [nzLabel]="vim.name"></nz-option>
+ </nz-select>
+ <!-- <nz-select *ngIf="parameter.type === 'sdn_controller'" style="width: 165px;" [(ngModel)]="parameter.value" nzAllowClear >
+ <nz-option *ngFor="let control of sdnControllers" [nzValue]="control" [nzLabel]="control.name"></nz-option>
+ </nz-select> -->
+ </li>
+ </ul>
+
+ <h4>vnfs Inputs</h4>
+
+ <ul>
+ <li *ngFor="let vnf of nsTemplateParameters.vnfs;">
+ <h5 style="padding-left:10px;">id: {{vnf.vnf_id}}</h5>
+ <span> vf_location: </span>
+ <nz-select style="width: 165px;" [(ngModel)]="vnf.value" nzAllowClear >
+ <nz-option *ngFor="let vim of vimInfos" [nzValue]="vim" [nzLabel]="vim.name"></nz-option>
+ </nz-select>
+ </li>
+ </ul>
+
+ </div>
+ <button class="submit" nz-button [nzType]="'primary'" (click)="submit()"><span>Create</span></button>
+ </div>
+
+ <!-- 图 -->
+ <div class="chart fr">
+ Create Service
+ <div id="createChart">
+ <svg width="100%" height="100%">
+
+ <image xlink:href="./assets/images/cloud-site.png"
+ x="25%" y="30%" width="50%"/>
+
+ </svg>
+
+ </div>
+ </div>
+
+</div>
+
diff --git a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.less b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.less
new file mode 100644
index 00000000..b8c41877
--- /dev/null
+++ b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.less
@@ -0,0 +1,80 @@
+/*
+ Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+.title {
+ font: 700 18px/18px "思源黑体";
+ color: #4c5e70;
+ margin-bottom: 18px;
+}
+hr {
+ border: none;
+ height: 2px;
+ background-color: #dce1e7;
+ margin-bottom: 10px;
+}
+.model {
+ background-color: #fff;
+ height: 90%;
+ overflow-y: auto;
+ .back {
+ position: absolute;
+ top: 10px;
+ right: 20px;
+ }
+ .creation{
+ position: relative;
+ width: 60%;
+ height: 100%;
+ overflow-y: auto;
+ border-radius: 5px;
+ padding: 20px;
+ .baseparms {
+ h3 {
+ color: #3fa8eb;
+ font: 700 16px "Arial";
+ }
+ h4 {
+ font: 700 16px "Arial";
+ }
+ ul li {
+ // display: inline-block;
+ margin: 3px 0;
+ span {
+ display: inline-block;
+ width: 40%;
+ font: 700 14px "Arial";
+ vertical-align: middle;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ text-align: right;
+ }
+ input {
+ width: 165px;
+ }
+ }
+ }
+ .submit {
+ position: absolute;
+ top: 10px;
+ right: 20px;
+ }
+ }
+ .chart {
+ width: 40%;
+ padding: 10px;
+ height: 100%;
+ border-left: 10px solid #f3f3f3;
+ }
+}
diff --git a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.spec.ts b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.spec.ts
new file mode 100644
index 00000000..de00c43f
--- /dev/null
+++ b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { E2eCreationComponent } from './e2e-creation.component';
+
+describe('E2eCreationComponent', () => {
+ let component: E2eCreationComponent;
+ let fixture: ComponentFixture<E2eCreationComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ E2eCreationComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(E2eCreationComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts
new file mode 100644
index 00000000..f478c699
--- /dev/null
+++ b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts
@@ -0,0 +1,212 @@
+/*
+ Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { MyhttpService } from '../../myhttp.service';
+
+@Component({
+ selector: 'app-e2e-creation',
+ templateUrl: './e2e-creation.component.html',
+ styleUrls: ['./e2e-creation.component.less']
+})
+export class E2eCreationComponent implements OnInit {
+
+ constructor( private myhttp:MyhttpService ) { }
+
+ ngOnInit() {
+ this.getTemParameters();
+ this.getVimInfo();
+ this.getSdnControllers();
+ console.log(this.createParams);
+ }
+
+ @Output() e2eCloseCreate = new EventEmitter();
+ @Output() nsCloseCreate = new EventEmitter();
+ @Input() createParams;
+
+
+ // e2e serviceTemplateParameters
+ templateParameters = {
+ invariantUUID: "",
+ uuid: "",
+ name: "",
+ type: "",
+ version: "",
+ description: "",
+ category: "",
+ subcategory: "",
+ customizationUuid: "",
+ inputs:[],
+ nestedTemplates:[]
+ };
+ // ns serviceTemplateParameters
+ nsTemplateParameters = {
+ inputs:{},
+ inputs2:[],
+ vnfs:[]
+ }
+ getTemParameters(){ //获取模板参数
+ let type = this.createParams.commonParams.templateType == "E2E Service" ? "e2e" : "ns";
+ this.myhttp.getTemplateParameters(type,this.createParams.template)
+ .subscribe((data)=>{
+ console.log(this.createParams);
+ console.log(data);
+ if(type == "e2e"){
+ this.templateParameters = data;
+ this.templateParameters.nestedTemplates.forEach((item)=>{
+ item.inputs = item.inputs.filter((input)=>{return input.type !== "sdn_controller"});
+ })
+ }else if(type == "ns"){
+ this.nsTemplateParameters = data;
+ this.nsTemplateParameters["inputs2"] = [];
+ let inputs = this.nsTemplateParameters.inputs;
+ for(let key in inputs){
+ this.nsTemplateParameters["inputs2"].push({name:key,type:inputs[key].type,value:inputs[key].value})
+ }
+ console.log(this.nsTemplateParameters);
+ }
+
+
+ })
+ }
+ vimInfos=[];
+ getVimInfo() {
+ this.myhttp.getVimInfo()
+ .subscribe((data)=>{
+ this.vimInfos = data.map((item)=>{return {name:item['cloud-owner'],id:item['cloud-region-id']}});
+ })
+ };
+ sdnControllers=[];
+ getSdnControllers(){
+ this.myhttp.getSdnControllers()
+ .subscribe((data)=>{
+ this.sdnControllers = data.map((item)=>{return {name:item['thirdparty-sdnc-id'],id:item['thirdparty-sdnc-id']}});
+ })
+ }
+
+ // e2e requstbody
+ service = {
+ name: "",
+ description: "",
+ serviceInvariantUuid: "",
+ serviceUuid: "", // uuid ??
+ globalSubscriberId: "", // "customer.id",
+ serviceType: "", // "serviceType.value",
+ parameters: {
+ locationConstraints:[
+
+ ],
+ resources: [],
+ requestInputs: {},
+ }
+
+ }
+
+ // ns requstbody
+ ns_service = {
+ csarId: "",
+ nsName: "",
+ description: "",
+ context: {
+ globalCustomerId: "",
+ serviceType: ""
+ }
+ }
+ ns_service2 = {
+ locationConstraints: [
+
+ ],
+ additionalParamForNs: {
+ }
+ }
+ submit(){
+ let type = this.createParams.commonParams.templateType == "E2E Service" ? "e2e" : "ns";
+ if(type == "e2e"){
+ this.service.serviceInvariantUuid = this.templateParameters.invariantUUID;
+ this.service.serviceUuid = this.templateParameters.uuid;
+ this.service.globalSubscriberId = this.createParams.commonParams.customer.id;
+ this.service.serviceType = this.createParams.commonParams.serviceType.name;
+
+ this.templateParameters.inputs.forEach((item)=>{
+ this.service.parameters.requestInputs[item.name] = item.value == undefined ? item.defaultValue : item.value;
+ })
+
+ this.templateParameters.nestedTemplates.forEach((item)=>{
+ let nsService = {
+ resourceName: item.name,
+ resourceInvariantUuid: item.invariantUUID,
+ resourceUuid: item.uuid,
+ resourceCustomizationUuid: item.customizationUuid,
+ parameters: {
+ locationConstraints:[],
+ resources:[],
+ requestInputs:{}
+ }
+ }
+ item.inputs.forEach((input)=>{
+ if(input.type == "vf_location"){
+ let location = {
+ vnfProfileId: input.name,
+ locationConstraints:{
+ vimId:input.value.id
+ }
+ }
+ nsService.parameters.locationConstraints.push(location);
+ }
+ })
+ this.service.parameters.resources.push(nsService);
+ })
+
+ this.e2eCloseCreate.emit(this.service);
+
+ }else if(type == "ns"){
+ //create ns instance
+ this.ns_service.csarId = this.createParams.template.id;
+ this.ns_service.context.globalCustomerId = this.createParams.commonParams.customer.id;
+ this.ns_service.context.serviceType = this.createParams.commonParams.serviceType.name;
+
+ this.nsTemplateParameters.inputs2.forEach((input)=>{
+ this.ns_service2.additionalParamForNs[input.name] = input.value == undefined ? input.defaultValue : input.value;
+ })
+ this.nsTemplateParameters.vnfs.forEach((vnf)=>{
+ let vnfparams = {
+ vnfProfileId: vnf.vnf_id,
+ locationConstraints: {
+ vimid: vnf.value.id,
+ accessinfo: {
+ tenant: ""
+ },
+ accessInfo: {
+ tenant: ""
+ }
+ }
+ }
+ this.ns_service2.locationConstraints.push(vnfparams);
+ })
+ console.log(this.ns_service2);
+
+ let requstbody = {
+ step1:this.ns_service,
+ step2:this.ns_service2
+ }
+ this.nsCloseCreate.emit(requstbody);
+ }
+
+ }
+ goback(){
+ this.e2eCloseCreate.emit();
+ }
+
+}
diff --git a/usecaseui-portal/src/app/myhttp.service.ts b/usecaseui-portal/src/app/myhttp.service.ts
index 8b872e64..958bc741 100644
--- a/usecaseui-portal/src/app/myhttp.service.ts
+++ b/usecaseui-portal/src/app/myhttp.service.ts
@@ -21,15 +21,19 @@ export class MyhttpService {
// customers:this.baseUrl + "/customers.json?",
// serviceType:this.baseUrl + "/serviceTypes.json?*_*",
// servicesCategory:this.baseUrl + "/configuration_files/servicesCategory.json?",
- // serviceInstanceList:this.baseUrl + "/instanceTableData4.json?",
+ // serviceInstanceList:this.baseUrl + "/instanceTableData.json?",
// serviceTemplates:this.baseUrl + "/serviceTemplates2.json?",
- // templateCategory:this.baseUrl + "/configuration_files/templateCategory.json?",
// templateParameters:this.baseUrl + "/*_*" + "ServiceTemplateParameters.json?",
+ // vimInfo:this.baseUrl + "/vimInfo.json?",
+ // sdnControllers:this.baseUrl + "/sdnControllers.json?",
// addressData: this.baseUrl + "/siteAddressData.json?",
- // createService:this.baseUrl + "/createService.json?",
+ // createService:this.baseUrl + "/createService.json",
+ // ns_createService: this.baseUrl + "/createNsService.json?",
+ // ns_createService2: this.baseUrl + "/createNsService2.json",
// inputNamesTransform: this.baseUrl + "/configuration_files/inputNamesTranslate.json?",
// deleteService: this.baseUrl + "/deleteService.json?",
// progress:this.baseUrl + "/progress.json?",
+ // nsProgress:this.baseUrl + "nsProgress.json?",
// allottedResource:this.baseUrl + "/allotted-resources2.json?",
// pnfDetail:this.baseUrl + "/pnfdetail-domain.json?",
@@ -54,13 +58,18 @@ export class MyhttpService {
servicesCategory: "./assets/json/configuration_files/servicesCategory.json",
serviceInstanceList:this.baseUrl + '/uui-sotn/getServiceInstanceList',
serviceTemplates:this.baseUrl + "/uui-lcm/service-templates",
- templateCategory: "./assets/json/configuration_files/templateCategory.json",
templateParameters:this.baseUrl + "/uui-lcm/service-templates/" + "*_*" +"?toscaModelPath=",
+ nstemplateParameters:this.baseUrl + "/uui-lcm/fetchNsTemplateData",
+ vimInfo:this.baseUrl + "/uui-lcm/locations/",
+ sdnControllers:this.baseUrl + "/uui-lcm/sdnc-controllers/",
addressData: this.baseUrl + "/uui-sotn/getOssInvenory",
createService:this.baseUrl + "/uui-lcm/services",
+ ns_createService: this.baseUrl + "/uui-lcm/createNetworkServiceInstance",
+ ns_createService2: this.baseUrl + "/uui-lcm/instantiateNetworkServiceInstance",
inputNamesTransform: "./assets/json/configuration_files/inputNamesTranslate.json?",
deleteService: this.baseUrl + "/uui-lcm/services/",
progress:this.baseUrl + "/uui-lcm/services/" + "*_*" + "/operations/",
+ nsProgress:this.baseUrl + "/uui-lcm/jobs/getNsLcmJobStatus/"+ "*_*" + "?responseId=",
allottedResource:this.baseUrl + "/uui-sotn/getAllottedResources",
pnfDetail:this.baseUrl + "/uui-sotn/getPnfInfo/",
@@ -98,44 +107,11 @@ export class MyhttpService {
-
-
- testObservable(){
- let myObservable = new Observable((observer)=>{
- observer.next(1);
- observer.next((n)=>{
- console.log(3+n);
- })
- setTimeout(()=>{
- observer.next(66666)
- },100)
- observer.next(()=>{
- setTimeout((n)=>{
- console.log("9999---" + n);
- },10)
- })
- // observer.error(2);
- // observer.complete();
- });
-
- myObservable.subscribe((e)=>{
- if(typeof e == "function"){
- e(5)
- }
- console.log(e);
- },(err)=>{
- console.log(err);
- },()=>{
- console.log(555);
- })
- }
-
//---------------------------------------------------------------------------------
// Get all customers
getAllCustomers(){
return this.http.get<any>(this.url.customers);
- // return this.http.jsonp<Object[]>('http://127.0.0.1:5500/customers.json',"callback");//
}
// Get relevant serviceType
@@ -144,9 +120,9 @@ export class MyhttpService {
return this.http.get<any>(url);
}
// Get service classification information, local configuration file
- getServicesCategory(){
- return this.http.get<any>(this.url.servicesCategory);
- }
+ // getServicesCategory(){
+ // return this.http.get<any>(this.url.servicesCategory);
+ // }
// list Tabular data
getInstanceTableData(paramsObj){
let params = new HttpParams({fromObject:paramsObj});
@@ -160,18 +136,27 @@ export class MyhttpService {
// }
// Get all template types
- getAllServiceTemplates(){
+ getAllServiceTemplates(type){
+ if(type=="Network Service"){
+ let nsUrl = this.url.serviceTemplates.replace("service-templates","listNsTemplates").replace("serviceTemplates2","serviceTemplates-ns");
+ console.log(nsUrl);
+ return this.http.get<any>(nsUrl);
+ }
return this.http.get<any>(this.url.serviceTemplates);
}
- // Get template classification information, local configuration file
- getTemplateCategory(){
- return this.http.get<any>(this.url.servicesCategory);
- }
+
//Get template input parameters
getTemplateParameters(type,template){
- let url = this.url.templateParameters.replace("*_*",type) + template.toscaModelURL; //本地模拟
- // let url = this.url.templateParameters.replace("*_*",template.uuid) + template.toscaModelURL;
+ // let url = this.url.templateParameters.replace("*_*",type) + template.toscaModelURL; //Local simulation
+ if(type == "ns"){
+ let body = {
+ csarId:template.id,
+ inputs:""
+ }
+ return this.http.post<any>(this.url.nstemplateParameters,body);
+ }
+ let url = this.url.templateParameters.replace("*_*",template.uuid) + template.toscaModelURL;
return this.http.get<any>(url);
}
// siteAddress address
@@ -179,10 +164,25 @@ export class MyhttpService {
return this.http.get<any>(this.url.addressData);
}
+ getVimInfo() {
+ return this.http.get<any>(this.url.vimInfo);
+ };
+ getSdnControllers(){
+ return this.http.get<any>(this.url.sdnControllers);
+ }
+
// Create interface
- createInstance(requestBody){
- return this.http.get<any>(this.url.createService); //本地模拟
- // return this.http.post<any>(this.url.createService,requestBody);
+ createInstance(requestBody,createParams){
+ // return this.http.get<any>(this.url.createService + createParams); //Local simulation
+ return this.http.post<any>(this.url.createService,requestBody);
+ }
+ nsCreateInstance(requestBody){
+ // return this.http.get<any>(this.url.ns_createService); //Local simulation
+ return this.http.post<any>(this.url.ns_createService,requestBody);
+ }
+ nsCreateInstance2(params,requestBody){
+ // return this.http.get<any>(this.url.ns_createService2 + params); //Local simulation
+ return this.http.post<any>(this.url.ns_createService + params,requestBody);
}
// Input parameter name conversion
@@ -203,8 +203,8 @@ export class MyhttpService {
'serviceType': obj.serviceType
}
};
- return this.http.get<any>(this.url.deleteService); //Local simulation
- // return this.http.delete<any>(this.url.deleteService + obj.serviceInstanceId, httpOptions);
+ // return this.http.get<any>(this.url.deleteService); //Local simulation
+ return this.http.delete<any>(this.url.deleteService + obj.serviceInstanceId, httpOptions);
}
// Query progress interface
@@ -212,6 +212,10 @@ export class MyhttpService {
let url = this.url.progress.replace("*_*",obj.serviceId) + obj.operationId;
return this.http.get<any>(url);
}
+ getNsProgress(jobid,responseId){
+ let url = this.url.nsProgress.replace("*_*",jobid) + responseId;
+ return this.http.get<any>(url);
+ }
// Get allotted-resource to get tp and pnf values
getAllottedResource(obj){
diff --git a/usecaseui-portal/src/app/networkHttpservice.service1.ts b/usecaseui-portal/src/app/networkHttpservice.service1.ts
deleted file mode 100644
index edb4df7c..00000000
--- a/usecaseui-portal/src/app/networkHttpservice.service1.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http';
-
-
-@Injectable()
-export class networkHttpservice {
-
- constructor(private http:HttpClient) { }
-
- // baseUrl = "./assets/json/";//本地环境
- // url={
- // "getNetworkD3Data":this.baseUrl + "netWorkD3Data.json",
- // "getLogicalLinksData":this.baseUrl + "LogicalLinksData.json",
- // "getPInterfacesData1":this.baseUrl + "netWorkD3Data.json",
- // "getPInterfacesData2":this.baseUrl + "p_interfaces1.json",
- // "createLink":this.baseUrl + "status.json",
- // "querySpecificLinkInfo":this.baseUrl + "specific_link _nfo.json",
- // "queryCloudUrl":this.baseUrl + "url.json",
- // "createNetwrok":this.baseUrl + "status.json",
- // "createPnf":this.baseUrl + "status.json",
- // "createTp":this.baseUrl + "status.json",
- // "createCloudLink":this.baseUrl + "status.json",
- // "createCloudUrl":this.baseUrl + "status.json",
- // "deleteLink":this.baseUrl + "status.json",
- // };
- // baseUrl = "http://10.73.242.244:8082/uui-sotn/";//线上环境
- // baseUrl = "http://172.19.44.223/api/usecaseui-server/v1/uui-sotn/";//线上环境
- baseUrl = "/api/usecaseui-server/v1/uui-sotn/";//线上环境
- url={
- "getNetworkD3Data":this.baseUrl + "getNetWorkResources",
- "getLogicalLinksData":this.baseUrl + "getLogicalLinks",
- "getPInterfacesData1":this.baseUrl + "getPinterfaceByPnfName/",
- "getPInterfacesData2":this.baseUrl + "getPinterfaceByPnfName/",
- "createLink":this.baseUrl + "createLink/",
- "querySpecificLinkInfo":this.baseUrl + "getSpecificLogicalLink/",
- "queryCloudUrl":this.baseUrl + "getHostUrl/",
- "createNetwrok":this.baseUrl + "createTopoNetwork/",
- "createPnf":this.baseUrl + "createPnf/",
- "createTp":this.baseUrl + "pnf/",
- "createCloudLink":this.baseUrl + "createLink/",
- "createCloudUrl":this.baseUrl + "createHostUrl/",
- "deleteLink":this.baseUrl + "deleteLink/",
- };
- //d3数据
- getNetworkD3Data(){
- return this.http.get<any>(this.url["getNetworkD3Data"]);
- }
- //初始化连线 logical-links
- getLogicalLinksData(){
- return this.http.get<any>(this.url["getLogicalLinksData"]);
- }
- //查询指定的node对应的tp数据
- getPInterfacesData1(paramsObj){
- return this.http.get<any>(this.url['getPInterfacesData1']+paramsObj["pnfName"]);
- }
- getPInterfacesData2(paramsObj){
- return this.http.get<any>(this.url["getPInterfacesData2"]+paramsObj["pnfName"]);
- }
- //创建连线接口
- createLink(paramsObj){
- return this.http.put<any>(this.url["createLink"]+paramsObj["link-name"],paramsObj);
- }
- //查询指定的单个连接线 接口
- querySpecificLinkInfo(paramsObj){
- return this.http.get<any>(this.url["querySpecificLinkInfo"]+paramsObj["link-name"]);
- }
- //查询 外部云host this.url地址 接口
- queryCloudUrl(aaiId){
- return this.http.get<any>(this.url["queryCloudUrl"]+aaiId);
- }
- //创建外部云newwork接口
- createNetwrok(paramsObj){
- return this.http.put<any>(this.url["createNetwrok"]+paramsObj["network-id"],paramsObj);
- }
- //创建外部云pnf接口
- createPnf(paramsObj){
- return this.http.put<any>(this.url["createPnf"]+paramsObj["pnf-name"],paramsObj);
- }
- //创建外部云Tp接口
- createTp(paramsObj,cloudNodeName){
- let str=cloudNodeName+"/p-interfaces/p-interface/"+paramsObj["interface-name"]+"/createTerminationPoint";
- return this.http.put<any>(this.url["createTp"]+str,paramsObj);
- }
- //创建外部云link接口
- createCloudLink(paramsObj){
- return this.http.put<any>(this.url["createCloudLink"]+paramsObj["link-name"],paramsObj);
- }
- //创建外部云host url接口
- createCloudUrl(paramsObj){
- return this.http.put<any>(this.url["createCloudUrl"]+paramsObj["aai-id"],paramsObj);
- }
- //删除连线
- deleteLink(paramsObj){
- let str=paramsObj["logical-link"]+"/"+paramsObj["resource-version"];
- return this.http.delete<any>((this.url["deleteLink"]+str));
- }
-}
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.css b/usecaseui-portal/src/app/services/services-list/services-list.component.css
index eaf8fddb..63426fd9 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.css
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.css
@@ -108,6 +108,31 @@ hr {
font-size: 12px;
color: #147dc2;
}
+.list nz-table.table2 tr td {
+ padding: 10px 8px;
+}
+.list nz-table.table2 tr td span.action {
+ color: #3fa8eb;
+ cursor: pointer;
+ padding: 5px;
+}
+.list nz-table.table2 tr td span.cannotclick {
+ pointer-events: none;
+ color: #aaa;
+ opacity: 0.6;
+}
+.list nz-table.table2 tr td span.deleting {
+ color: red;
+ font-size: 12px;
+ display: block;
+ height: 12px;
+}
+.list nz-table.table2 tr td span.creating {
+ color: #3fa8eb;
+ font-size: 12px;
+ display: block;
+ height: 12px;
+}
.detailComponent {
position: absolute;
left: 0;
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 e0866524..c18d294a 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
@@ -39,34 +39,40 @@
<button class="create" nz-button [nzType]="'primary'" (click)="showModal()"><i class="anticon anticon-plus-circle-o"></i><span> Create </span></button>
<nz-modal [(nzVisible)]="isVisible" nzTitle="Create" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
- <p>Content one</p>
- <p>Content two</p>
- <p>Content three</p>
- </nz-modal>
- <button class="create" nz-button [nzType]="'primary'" (click)="showModal2()"><i class="anticon anticon-plus-circle-o"></i><span> Create </span></button>
- <nz-modal [(nzVisible)]="isVisible2" nzTitle="Create" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk2()">
<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>
<hr>
- <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>
+ <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>
- <span> 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 >
+ <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 == '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>
@@ -101,76 +107,40 @@
<tbody>
<ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index">
<tr>
- <td>{{i+1}}</td>
- <td [nzShowExpand]="data.children[0]" [(nzExpand)]="data.expand"></td>
- <td>{{data.serviceId}}</td>
- <td>{{data.name}}</td>
- <td>{{data.type}}</td>
+ <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>
<span [ngClass]="{'active':data.status=='Active','closed':data.status=='Closed','onboarding':data.status=='Onboarding',
- 'updating':data.status=='Updating','deleting':data.status=='Deleting','creating':data.status=='Creating'}">{{data.status}}</span>
- <nz-progress *ngIf="data.status!='Active' && data.status!='Closed'" [nzPercent]="data.progress"></nz-progress>
+ 'updating':data.status=='Updating','deleting':data.status=='Deleting','creating':data.status=='Creating'}">{{data.status || "Active"}}</span>
+ <nz-progress *ngIf="data.status == 'Creating' || data.status == 'Deleting' || data.status == 'Updating' " [nzPercent]="data.rate"></nz-progress>
+ <!-- <nz-progress *ngIf="item.sotnvpnSer.status=='creating' || item.sotnvpnSer.status=='deleting'" [nzPercent]="item.sotnvpnSer.rate"></nz-progress> -->
</td>
<td>
- <i class="anticon anticon-setting" (click)="scaleService()"></i>
- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i>
- <i class="anticon anticon-delete" (click)="deleteService()"></i>
+ <i *ngIf="data.serviceDomain=='E2E Service'||data.serviceDomain=='Network 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 *ngIf="data.serviceDomain=='Network Service' " class="anticon anticon-pause" (click)="stopService(data)"></i>
+ <i *ngIf="data.serviceDomain=='Network Service' " class="anticon anticon-reload" (click)="restartService(data)"></i>
+ <i *ngIf="data.serviceDomain=='SOTN'||data.serviceDomain=='CCVPN' " class="anticon anticon-ellipsis" (click)="serviceDetail(data)"></i>
+ <i class="anticon anticon-delete" (click)="deleteService(data)"></i>
+ <!-- <span title="detail" class="action" [ngClass]="{'cannotclick':item.sotnvpnSer.status=='deleting'||item.sotnvpnSer.status=='creating'}"
+ (click)="showDetail(item)"> <i class="anticon anticon-ellipsis"></i> </span>
+ <span title="delete" class="action" [ngClass]="{'cannotclick':item.sotnvpnSer.status=='deleting'||item.sotnvpnSer.status=='creating'}"
+ (click)="deleteInstace(item)"> <i class="anticon anticon-delete"></i> </span> -->
</td>
</tr>
- <tr class="childtr" [nzExpand]="data.expand" *ngFor="let item of data.children">
+ <tr class="childtr" [nzExpand]="data.expand" *ngFor="let item of data.childServiceInstances">
<td></td>
<td></td>
- <td>{{item.serviceId}}</td>
- <td>{{item.name}}</td>
- <td colspan="3">{{item.type}}</td>
+ <td>{{data["service-instance-id"] || data.nsInstanceId}}</td>
+ <td>{{data["service-instance-name"] || data.nsName}}</td>
+ <td colspan="3">{{item.serviceDomain}}</td>
</tr>
</ng-template>
</tbody>
</nz-table>
- <nz-table *ngIf="1"
- #nzTable2 [nzData]="tableData2"
- nzShowSizeChanger
- [nzFrontPagination]="true"
- [nzShowQuickJumper]="true"
- [nzPageSizeOptions]="[5,10,15,20]"
- [(nzPageSize)]="pageSize"
- [(nzPageIndex)]='pageIndex'
- nzSize="middle"
- [nzScroll]="{ y: '58vh' }">
- <thead nzSingleSort>
- <tr>
- <th nzWidth="5%">NO.</th>
- <th nzWidth="20%"> Instance ID </th>
- <th nzWidth="20%">Instance Name</th>
- <!-- <th nzWidth="10%">Type</th> -->
- <th nzWidth="25%">Description</th>
- <th nzWidth="15%">Status</th>
- <th nzWidth="10%">Action</th>
- </tr>
- </thead>
- <tbody>
- <!-- <ng-template ngFor let-data [ngForOf]="nzTable2.data" let-i="index"> -->
- <tr *ngFor="let item of nzTable2.data; let i = index; ">
- <td>{{pageSize*(pageIndex-1) + i+1}}</td>
- <td>{{item.sotnvpnSer['service-instance-id']}}</td>
- <td>{{item.sotnvpnSer['service-instance-name']}}</td>
- <!-- <td>{{item.type}}</td> -->
- <td>{{item.sotnvpnSer.description}}</td>
- <td>
- <span *ngIf="item.sotnvpnSer.status!='creating' && item.sotnvpnSer.status!='deleting'">{{item.sotnvpnSer.status}}</span>
- <span *ngIf="item.sotnvpnSer.status=='creating' || item.sotnvpnSer.status=='deleting'" [ngClass]="{'deleting':item.sotnvpnSer.status=='deleting','creating':item.sotnvpnSer.status=='creating'}">{{item.sotnvpnSer.status}}</span>
- <nz-progress *ngIf="item.sotnvpnSer.status=='creating' || item.sotnvpnSer.status=='deleting'" [nzPercent]="item.sotnvpnSer.rate"></nz-progress>
- </td>
- <td>
- <span title="detail" class="action" [ngClass]="{'cannotclick':item.sotnvpnSer.status=='deleting'||item.sotnvpnSer.status=='creating'}"
- (click)="showDetail(item)"> <i class="anticon anticon-ellipsis"></i> </span>
- <span title="delete" class="action" [ngClass]="{'cannotclick':item.sotnvpnSer.status=='deleting'||item.sotnvpnSer.status=='creating'}"
- (click)="deleteInstace(item)"> <i class="anticon anticon-delete"></i> </span>
- </td>
- </tr>
- <!-- </ng-template> -->
- </tbody>
- </nz-table>
</div>
<div class="detailComponent" *ngIf="detailshow">
@@ -183,3 +153,10 @@
(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>
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 7e8ff80e..8f83cc9d 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
@@ -1,3 +1,18 @@
+/*
+ Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
.title {
font: 700 18px/18px "思源黑体";
color: #4c5e70;
@@ -103,6 +118,32 @@ hr {
}
}
+.list nz-table.table2 tr td {
+ padding: 10px 8px;
+}
+.list nz-table.table2 tr td span.action {
+ color: #3fa8eb;
+ cursor: pointer;
+ padding: 5px;
+}
+.list nz-table.table2 tr td span.cannotclick {
+ pointer-events: none;
+ color: #aaa;
+ opacity: 0.6;
+}
+.list nz-table.table2 tr td span.deleting {
+ color: red;
+ font-size: 12px;
+ display: block;
+ height: 12px;
+}
+.list nz-table.table2 tr td span.creating {
+ color: #3fa8eb;
+ font-size: 12px;
+ display: block;
+ height: 12px;
+}
+
.detailComponent {
position: absolute;
left: 0;
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 d893070d..9ea28d4b 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
@@ -1,3 +1,18 @@
+/*
+ Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
import { Component, OnInit, HostBinding } from '@angular/core';
import { MyhttpService } from '../../myhttp.service';
import { slideToRight } from '../../animates';
@@ -13,18 +28,18 @@ export class ServicesListComponent implements OnInit {
@HostBinding('@routerAnimate') routerAnimateState;
constructor(private myhttp: MyhttpService, private modalService: NzModalService) { }
+
ngOnInit() {
this.getallCustomers();
- this.getTemplateSubTypes();
this.inputNamests();
}
- // 筛选框(下拉框)customer servicetype
+ // customer servicetype
customerList = [];
customerSelected = {name:null,id:null};
serviceTypeList = [];
- serviceTypeSelected = {name:null,id:null};
+ serviceTypeSelected = {name:null};
- // 获取所有customer
+ //
getallCustomers(){
this.myhttp.getAllCustomers()
.subscribe((data)=>{
@@ -50,108 +65,71 @@ export class ServicesListComponent implements OnInit {
this.getTableData();
}
- // 模态框(对话框) create
+
+ // Create modal box 2 (dialog box) create -------------------------------
isVisible = false;
showModal(): void {
this.isVisible = true;
- }
- handleOk(): void {
- console.log('Button ok clicked!');
- this.isVisible = false;
- }
- handleCancel(): void {
- console.log('Button cancel clicked!');
- this.isVisible = false;
- this.isVisible2 = false;
- }
-
- // 创建模态框2(对话框) create -------------------------------
- isVisible2 = false;
- showModal2(): void {
- this.isVisible2 = true;
- this.templates1 = []; //多次创建会push累积名字,从新置空
- this.templates2 = [];
- this.templates3 = [];
this.getAlltemplates();
}
- // 服务
+ //
templateTypeSelected = "SOTN";
choseTemplateType(){
- // this.filterTemplates();//分类
+ this.getAlltemplates();
}
- // 模板
- templates = []; templates1;templates2;templates3;
+ //
+ templates = [];
template1={name:null};
template2={name:null};
template3={name:null};
- // 模板分类数据,创建、获取实例分类共用
- templateSubTypes = {}; //子类,sotnvpn、site、sdwan
- getTemplateSubTypes(){
- this.myhttp.getServicesCategory()
- .subscribe((data)=>{
- this.templateSubTypes = data;
- },(err)=>{
- console.log("getTemplateTypes err")
- })
- }
+ template4={name:null};
- getAlltemplates(){ //获取所有模板类型
- this.myhttp.getAllServiceTemplates()
+ getAlltemplates(){ //
+ this.myhttp.getAllServiceTemplates(this.templateTypeSelected)
.subscribe((data)=>{
console.log(data)
this.templates = data;
- this.template1 = data[0];
- this.template2 = data[1];
- this.template3 = data[2];
- // this.filterTemplates();//分类
+ if(this.templateTypeSelected=="Network Service"){
+ this.templates = data.map((item)=>{return {name:item.packageInfo.csarName,id:item.csarId,packageInfo:item.packageInfo}});
+ }
+ this.template1 = this.templates[0];
+ this.template2 = this.templates[1];
+ this.template3 = this.templates[2];
+ this.template4 = this.templates[0];
+
},(err)=>{
})
}
- // filterTemplates(){ //模板类型分类,本地配置文件
- // this.templates1 = [];
- // this.templates2 = [];
- // this.templates3 = [];
- // this.templates.forEach((item)=>{
- // this.templateSubTypes[this.templateTypeSelected].sotnvpn.find((d)=>{
- // return d["model-invariant-id"] == item.uuid && d["model-version-id"] == item.invariantUUID
- // })?this.templates1.push(item):null;
- // this.templateSubTypes[this.templateTypeSelected].site.find((d)=>{
- // return d["model-invariant-id"] == item.uuid && d["model-version-id"] == item.invariantUUID
- // })?this.templates2.push(item):null;
- // if(this.templateTypeSelected=="CCVPN"){
- // this.templateSubTypes[this.templateTypeSelected].sdwan.find((d)=>{
- // return d["model-invariant-id"] == item.uuid && d["model-version-id"] == item.invariantUUID
- // })?this.templates3.push(item):null;
- // }
- // })
- // this.template1 = this.templates1[0];
- // this.template2 = this.templates2[0];
- // if(this.templates3[0]){
- // this.template3 = this.templates3[0];
- // }
- // }
- // 确定、取消
+
+ //
createshow = false;
+ createshow2 = false;
createData:Object={};
- handleOk2(): void {
+ handleOk(): void {
console.log('Button ok clicked!');
- this.isVisible2 = false;
- let data1 = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected, templateType:"SOTN"},templates:{template1:this.template1,template2:this.template2}};
- let data2 = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected, templateType:"CCVPN"},templates:{template1:this.template1,template2:this.template2,template3:this.template3}};
+ this.isVisible = false;
+
+ if(this.templateTypeSelected=="SOTN"||this.templateTypeSelected=="CCVPN"){
+ let data1 = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected, templateType:"SOTN"},templates:{template1:this.template1,template2:this.template2}};
+ let data2 = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected, templateType:"CCVPN"},templates:{template1:this.template1,template2:this.template2,template3:this.template3}};
+ this.createData = this.templateTypeSelected == "SOTN" ? data1 : data2;
+ this.createshow = true;
+ }else if(this.templateTypeSelected=="E2E Service"||this.templateTypeSelected=="Network Service"){
+ this.createData = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected, templateType:this.templateTypeSelected},template:this.template4};
+ this.createshow2 = true;
+ }
- this.createData = this.templateTypeSelected == "SOTN" ? data1 : data2;
- this.createshow = true;
}
- // handleCancel(): void {
- // console.log('Button cancel clicked!');
- // this.isVisible2 = false;
- // }
+ handleCancel(): void {
+ console.log('Button cancel clicked!');
+ this.isVisible = false;
+ }
- //表格数据
+ //tableData
tableData = [];
pageIndex = 1;
pageSize = 10;
@@ -160,10 +138,10 @@ export class ServicesListComponent implements OnInit {
sortName = null;
sortValue = null;
getTableData(){
- // 查询参数: customer serviceType 当前页码,每页条数,排序方式
+ // params: customer serviceType pageIndex,pageSize,sortName
let paramsObj = {
- customer:this.customerSelected,
- serviceType:this.serviceTypeSelected,
+ customer:this.customerSelected.id,
+ serviceType:this.serviceTypeSelected.name,
pageIndex:this.pageIndex,
pageSize:this.pageSize,
serviceIdSort:this.sortValue
@@ -194,119 +172,54 @@ export class ServicesListComponent implements OnInit {
updataService(){
console.log("updataService!");
}
- deleteService(){
- console.log("deleteService!");
- }
-
- //表格数据
- tableData2 = [];
- getTableData2(){
- let params = {
- customerId:this.customerSelected.id,
- serviceType:this.serviceTypeSelected
- }
- this.myhttp.getInstanceTableData(params)
- .subscribe((data)=>{
- this.pageIndex = 1;
- this.tableData2 = [];
- console.log(data)
- // data.results.forEach((item)=>{
- // item["sotnvpnSer"] = item["service-subscription"]["service-instances"]["service-instance"].find((d)=>{
- // return this.templateSubTypes["SOTN"].sotnvpn.find((m)=>{
- // return d["model-invariant-id"]==m["model-invariant-id"] && d["model-version-id"]==m["model-version-id"]
- // })?item["Type"]="SOTN":null || this.templateSubTypes["CCVPN"].sotnvpn.find((m)=>{
- // return d["model-invariant-id"]==m["model-invariant-id"] && d["model-version-id"]==m["model-version-id"]
- // })?item["Type"]="CCVPN":null
- // })
-
- // if(item["sotnvpnSer"]){
- // this.tableData2.push(item);
- // }
- // })
-
- //---------数据结构有问题,模拟只有一组数据情况---------//
- data["sotnvpnSer"] = data["service-instance"].find((d)=>{
- return this.templateSubTypes["SOTN"].sotnvpn.find((m)=>{
- return d["model-invariant-id"]==m["model-invariant-id"] && d["model-version-id"]==m["model-version-id"]
- })?d["Type"]="SOTN":null || this.templateSubTypes["CCVPN"].sotnvpn.find((m)=>{
- return d["model-invariant-id"]==m["model-invariant-id"] && d["model-version-id"]==m["model-version-id"]
- })?d["Type"]="CCVPN":null
- })
- let inputParams = JSON.parse(data["sotnvpnSer"]["input-parameters"]).service.parameters.requestInputs;
- let descriptionName = Object.keys(inputParams).find((item)=>{ return item.endsWith("_description")});
- data["sotnvpnSer"]["description"] = inputParams[descriptionName];
- data["sotnvpnSer"]["status"] = "Active";
- this.tableData2.push(data);
+ stopService(data){
- console.log(this.tableData2)
- },(err)=>{
- console.log(err);
- })
}
+ restartService(data){
- // 显示详情
+ }
+ //
detailshow = false;
detailData:Object;
- showDetail(service){
+ serviceDetail(service){
service["siteSer"]=[];
service["sdwanSer"]=[];
service["customer"]=this.customerSelected;
service["serviceType"] = this.serviceTypeSelected;
- // service["service-subscription"]["service-instances"]["service-instance"].forEach((item)=>{
- // this.templateSubTypes[service.Type].site.find((d)=>{
- // return d["model-invariant-id"] == item["model-invariant-id"] && d["model-version-id"] == item["model-version-id"]
- // })?service["siteSer"].push(item):null;
- // if(service.Type=="CCVPN"){
- // this.templateSubTypes[service.Type].sdwan.find((d)=>{
- // return d["model-invariant-id"] == item["model-invariant-id"] && d["model-version-id"] == item["model-version-id"]
- // })?service["sdwanSer"].push(item):null;
- // }
- // })
- service["service-instance"].forEach((item)=>{
- this.templateSubTypes[service.sotnvpnSer.Type].site.find((d)=>{
- return d["model-invariant-id"] == item["model-invariant-id"] && d["model-version-id"] == item["model-version-id"]
- })?service["siteSer"].push(item):null;
- if(service.sotnvpnSer.Type=="CCVPN"){
- this.templateSubTypes[service.sotnvpnSer.Type].sdwan.find((d)=>{
- return d["model-invariant-id"] == item["model-invariant-id"] && d["model-version-id"] == item["model-version-id"]
- })?service["sdwanSer"].push(item):null;
+
+ service.childServiceInstances.forEach((item)=>{
+ if(item.serviceDomain=="SITE"){
+ service.siteSer.push(item);
+ }else if(item.serviceDomain=="SDWAN"){
+ service.sdwanSer.push(item);
}
})
this.detailshow = true;
this.detailData = service;
console.log(service);
}
- // 删除 确认模态框
- deleteInstace(service){
- // 创建确认框
+ // deleteService(){
+ // console.log("deleteService!");
+ // }
+
+
+ //
+ deleteService(service){
this.modalService.confirm({
nzTitle : 'Are you sure delete this instance?',
- nzContent : `Instance ID: <b class="deleteModelContent"> ${service.sotnvpnSer["service-instance-id"]}</b>`,
+ nzContent : `Instance ID: <b class="deleteModelContent"> ${service["service-instance-id"]}</b>`,
nzOkText : 'Yes',
nzOkType : 'danger',
nzOnOk : () => {
console.log(service);
- let allprogress = {}; //所有进度值,以operationId为键
- let querypros = []; //所有查询
- service.sotnvpnSer.rate = 0;
- service.sotnvpnSer.status = "deleting";
- // let deletePros = service["service-subscription"]["service-instances"]["service-instance"].map((item)=>{
- // let id = item["service-instance-id"];
- // return new Promise((res,rej)=>{
- // this.myhttp.deleteInstance(id)
- // .subscribe((data)=>{
- // let obj = {serviceId:id,operationId:data.operationId}
- // let updata = (prodata)=>{
- // allprogress[prodata.operationId] = prodata.progress;
- // let average = ((arr)=>{return eval(arr.join("+"))/arr.length})(Object.values(allprogress));
- // service.sotnvpnSer["rate"]=average;
- // }
- // querypros.push(this.queryProgress(obj,updata));
- // res();
- // })
- // })
- // })
- let deletePros = service["service-instance"].map((item)=>{
+ let allprogress = {}; //
+ let querypros = []; //
+ service.rate = 0;
+ service.status = "Deleting";
+
+ service["childServiceInstances"].push({"service-instance-id":service["service-instance-id"]})
+
+ let deletePros = service["childServiceInstances"].map((item)=>{
let params = {
globalSubscriberId:this.customerSelected.id,
serviceType:this.serviceTypeSelected,
@@ -319,7 +232,7 @@ export class ServicesListComponent implements OnInit {
let updata = (prodata)=>{
allprogress[prodata.operationId] = prodata.progress;
let average = ((arr)=>{return eval(arr.join("+"))/arr.length})(Object.values(allprogress));
- service.sotnvpnSer["rate"]=average;
+ service["rate"]=average;
}
querypros.push(this.queryProgress(obj,updata));
res();
@@ -330,11 +243,16 @@ export class ServicesListComponent implements OnInit {
Promise.all(deletePros).then(()=>{
Promise.all(querypros).then((data)=>{
console.log(data);
- service.sotnvpnSer.rate = 100;
- service.sotnvpnSer.status = "deleted";
- setTimeout(()=>{
- this.getTableData();
- },1000)
+ service.rate = 100;
+ service.status = "completed";
+ let hasUndone = this.tableData.some((item)=>{
+ return item.rate < 100;
+ })
+ if(!hasUndone){
+ setTimeout(()=>{
+ this.getTableData();
+ },1000)
+ }
})
})
@@ -344,35 +262,34 @@ export class ServicesListComponent implements OnInit {
});
}
-
+ //ccvpn sotn createservice
+ parentServiceInstanceId="";
closeCreate(obj){
if(!obj){
- this.createshow = false; //关闭创建窗口
+ this.createshow = false; //close
return false;
}
- this.createshow = false; //关闭创建窗口
+ this.createshow = false;
console.log(obj);
- let newData; //主表格中新创建的服务数据
- let stageNum = 0; //不同阶段进度,用于后续服务进度相加;
- // --------------------------------------------------------------------------
- // obj.groupbody.map((group)=>{ //所有创建
- // return this.createService(group)
- // })
- // obj.sitebody.map((group)=>{ //所有创建
- // console.log(group)
- // return this.createService(group)
- // })
- // -----------------------------------------------------------------------------
- this.createService(obj.vpnbody).then((data)=>{
+ let newData; //Newly created service data for the main table
+ let stageNum = 0; //Different stages of progress, used to add up subsequent service progress;
+
+ let createParams = "?customerId="+this.customerSelected.id +
+ "&serviceType="+this.serviceTypeSelected.name +
+ "&serviceDomain="+this.templateTypeSelected +
+ "&parentServiceInstanceId=";
+ this.createService(obj.vpnbody,createParams).then((data)=>{
console.log(data)
- newData = { //主表格中新创建的服务数据
+ this.parentServiceInstanceId = data["serviceId"]; //------------updata parentServiceInstanceId
+ newData = { //
'service-instance-id':data["serviceId"],
'service-instance-name':obj.vpnbody.service.name,
- description:obj.vpnbody.service.description,
- status:"creating",
+ serviceDomain:this.templateTypeSelected,
+ childServiceInstances:[],
+ status:"Creating",
rate:0,
}
- this.tableData2 = [{sotnvpnSer:newData},...this.tableData2];
+ this.tableData = [newData,...this.tableData];
let updata = (prodata)=>{
newData.rate = Math.floor(prodata.progress/3);
}
@@ -380,11 +297,17 @@ export class ServicesListComponent implements OnInit {
return this.queryProgress(queryParams,updata);
}).then((data)=>{
console.log(data);
- stageNum = newData.rate; //阶段进度值更新;
- let allprogress = {}; //所有进度值,以operationId为键
- let querypros = []; //所有查询
- let createPros = obj.groupbody.map((group)=>{ //所有创建
- return this.createService(group).then((data)=>{
+ stageNum = newData.rate; //Phase progress value update;
+ let allprogress = {}; //
+ let querypros = []; //All the query
+ // Additional parameters
+ let createParams = "?customerId="+this.customerSelected.id +
+ "&serviceType="+this.serviceTypeSelected.name +
+ "&serviceDomain="+"SDWAN" +
+ "&parentServiceInstanceId="+this.parentServiceInstanceId;
+
+ let createPros = obj.groupbody.map((group)=>{ //
+ return this.createService(group,createParams).then((data)=>{
console.log(data);
let updata = (prodata)=>{
allprogress[prodata.operationId] = prodata.progress;
@@ -397,7 +320,7 @@ export class ServicesListComponent implements OnInit {
})
return new Promise((res)=>{
- Promise.all(createPros).then(()=>{ //所有创建好之后querypros中查询进度才全都添加完毕
+ Promise.all(createPros).then(()=>{ //All queries in querypros are added only once created
Promise.all(querypros).then((data)=>{
console.log(data);
res("site--begin");
@@ -406,11 +329,16 @@ export class ServicesListComponent implements OnInit {
})
}).then((data)=>{
console.log(data);
- stageNum = newData.rate; //阶段进度值更新;
+ stageNum = newData.rate; //Phase progress value update;
let allprogress = {};
- let querypros = []; //所有查询
- let createPros = obj.sitebody.map((group)=>{ //所有创建
- return this.createService(group).then((data)=>{
+ let querypros = []; //All the query
+ // Additional parameters
+ let createParams = "?customerId="+this.customerSelected.id +
+ "&serviceType="+this.serviceTypeSelected.name +
+ "&serviceDomain="+"SITE" +
+ "&parentServiceInstanceId="+this.parentServiceInstanceId;
+ let createPros = obj.sitebody.map((group)=>{
+ return this.createService(group,createParams).then((data)=>{
console.log(data);
let updata = (prodata)=>{
allprogress[prodata.operationId] = prodata.progress;
@@ -422,23 +350,125 @@ export class ServicesListComponent implements OnInit {
})
})
console.log(createPros);
- Promise.all(createPros).then(()=>{ //所有创建好之后querypros中查询进度才全都添加完毕
+ Promise.all(createPros).then(()=>{ //
Promise.all(querypros).then((data)=>{
console.log(data);
newData.rate = 100;
newData.status = "completed";
- setTimeout(()=>{
- this.getTableData();
- },1000)
+ let hasUndone = this.tableData.some((item)=>{
+ return item.rate < 100;
+ })
+ if(!hasUndone){
+ setTimeout(()=>{
+ this.getTableData();
+ },1000)
+ }
})
})
})
}
- createService(params){
+ e2eCloseCreate(obj){
+ if(!obj){
+ this.createshow2 = false; //
+ return false;
+ }
+ this.createshow2 = false; //
+ console.log(obj);
+ let newData; //
+ let createParams = "?customerId="+this.customerSelected.id +
+ "&serviceType="+this.serviceTypeSelected.name +
+ "&serviceDomain="+this.templateTypeSelected +
+ "&parentServiceInstanceId=";
+ this.createService(obj,createParams).then((data)=>{
+ console.log(data);
+ newData = { //
+ 'service-instance-id':data["serviceId"],
+ 'service-instance-name':obj.name,
+ serviceDomain:this.templateTypeSelected,
+ childServiceInstances:[],
+ status:"Creating",
+ rate:0,
+ }
+
+ this.tableData = [newData,...this.tableData];
+ let updata = (prodata)=>{
+ newData.rate = prodata.progress;
+ }
+ let queryParams = {serviceId:data["serviceId"],operationId:data["operationId"]};
+ return this.queryProgress(queryParams,updata);
+ }).then((data)=>{
+ console.log(data);
+ newData.rate = 100;
+ newData.status = "completed";
+ let hasUndone = this.tableData.some((item)=>{
+ return item.rate < 100;
+ })
+ if(!hasUndone){
+ setTimeout(()=>{
+ this.getTableData();
+ },1000)
+ }
+ })
+
+ }
+
+ nsCloseCreate(obj){
+ if(!obj){
+ this.createshow2 = false; //
+ return false;
+ }
+ this.createshow2 = false; //
+ console.log(obj);
+ let newData; //
+ // step1
+ this.myhttp.nsCreateInstance(obj.step1)
+ .subscribe((data)=>{
+ console.log(data);
+ newData = { //
+ 'service-instance-id':data.nsInstanceId,
+ 'service-instance-name':obj.step1.nsName,
+ serviceDomain:this.templateTypeSelected,
+ childServiceInstances:[],
+ status:"Creating",
+ rate:0,
+ }
+ this.tableData = [newData,...this.tableData];
+ let createParams = "?ns_instance_id=" + data.nsInstanceId +
+ "&customerId="+this.customerSelected.id +
+ "&serviceType="+this.serviceTypeSelected.name +
+ "&serviceDomain="+"SITE" +
+ "&parentServiceInstanceId="+this.parentServiceInstanceId;
+ // step2
+ this.createNsService(createParams,obj.step2).then((jobid)=>{
+
+ let updata = (prodata)=>{
+ newData.rate = prodata.responseDescriptor.progress;
+ }
+
+ return this.queryNsProgress(jobid,updata);
+ }).then((data)=>{
+ console.log(data);
+ newData.rate = 100;
+ newData.status = "completed";
+ let hasUndone = this.tableData.some((item)=>{
+ return item.rate < 100;
+ })
+ if(!hasUndone){
+ setTimeout(()=>{
+ this.getTableData();
+ },1000)
+ }
+ })
+
+
+ })
+ }
+
+ createService(requestBody,createParams){
let mypromise = new Promise((res,rej)=>{
- this.myhttp.createInstance(params)
+ this.myhttp.createInstance(requestBody,createParams)
.subscribe((data)=>{
res(data.service);
@@ -446,6 +476,15 @@ export class ServicesListComponent implements OnInit {
})
return mypromise;
}
+ createNsService(id,obj){
+ let mypromise = new Promise((res,rej)=>{
+ this.myhttp.nsCreateInstance2(id,obj)
+ .subscribe((data)=>{
+ res(data.jobId);
+ })
+ })
+ return mypromise;
+ }
queryProgress(obj,callback){
let mypromise = new Promise((res,rej)=>{
@@ -497,9 +536,65 @@ export class ServicesListComponent implements OnInit {
})
return mypromise;
}
+ queryNsProgress(jobid,callback){
+ let mypromise = new Promise((res,rej)=>{
+ // let data = {
+ // "jobId": "string",
+ // "responseDescriptor": {
+ // "status": "string",
+ // "progress": 0,
+ // "statusDescription": "string",
+ // "errorCode": "string",
+ // "responseId": "string",
+ // "responseHistoryList": [
+ // {
+ // "status": "string",
+ // "progress": "string",
+ // "statusDescription": "string",
+ // "errorCode": "string",
+ // "responseId": "string"
+ // }
+ // ]
+ // }
+ // }
+ let requery = (responseId)=>{
+ this.myhttp.getNsProgress(jobid,responseId)
+ .subscribe((data)=>{
+ if(data.responseDescriptor.progress==undefined){
+ console.log(data);
+ setTimeout(()=>{
+ requery(data.responseDescriptor.responseId);
+ },5000)
+ return false;
+ }
+ if(data.responseDescriptor.progress < 100){
+ callback(data);
+ setTimeout(()=>{
+ requery(data.responseDescriptor.responseId);
+ },5000)
+ }else {
+ res(data);
+ }
+ })
+ // setTimeout(()=>{
+ // console.log(data.responseDescriptor.progress)
+ // data.responseDescriptor.progress++;
+ // if(data.responseDescriptor.progress<100){
+ // callback(data);
+ // requery(data.responseDescriptor.responseId)
+ // }else{
+ // callback(data);
+ // res(data)
+ // }
+ // },100)
+ }
+ requery(0);
+ })
+ return mypromise;
+ }
- // 名字转换参数匹配 --> 传给子组件用
+ // -->
namesTranslate:Object;
inputNamests(){
this.myhttp.inputNamesTransform()