{
"/api/usecaseui-server/v1": {
- "target": "https://192.168.235.11:30283",
+ "target": "https://192.168.235.25:30283",
"secure": false,
"logLevel": "debug",
"changeOrigin": true
"nsi_type": "eMBB",
"nsi_orchestration-status": "activated"
},
- "tn_bh_slice_task_info":{
- "anVersion":"10.2.3.4.5",
- "vLanText":"11111",
- "tnVersion":"10.0.1.1.1",
- "mbps":"11111",
- "msText":"11111",
- "linkType":"p2p/mp2p",
- "tnEndVersion":"10.1.1.1",
- "cnVlan":"11",
- "cnVersion":"1.1.2.3",
- "orchestration_status":"active"
+ "connection_link":{
+ "an_slice_task_info": {
+ "suggestNssiId": null,
+ "suggestNSSIName": null,
+ "progress": null,
+ "status": null,
+ "statusDescription": null,
+ "sliceProfile": null,
+ "scriptName": null,
+ "enableNSSISelection": null,
+ "ip_adrress": "10.2.3.4.5",
+ "interface_id": "vlan ID",
+ "nextHop_info": "1111"
+ },
+ "cn_slice_task_info": {
+ "suggestNssiId": null,
+ "suggestNSSIName": null,
+ "progress": null,
+ "status": null,
+ "statusDescription": null,
+ "sliceProfile": null,
+ "scriptName": null,
+ "enableNSSISelection": null,
+ "ip_adrress":"10.5.6.4.5",
+ "interface_id": "vlan ID",
+ "nextHop_info": "1112"
+ },
+ "tn_bh_slice_task_info": {
+ "suggestNssiId": null,
+ "suggestNSSIName": null,
+ "progress": null,
+ "status": null,
+ "statusDescription": null,
+ "scriptName": null,
+ "enableNSSISelection": null,
+ "sliceProfile": null,
+ "lantency":"ms",
+ "max_bandWidth": "Mbss",
+ "link_type": "sdsa"
+ }
}
}
}
\ No newline at end of file
<p>
<img src="../../../../../../../assets/images/an-img.png" class="anImg"/>
</p>
- <!-- <p *ngIf="isshowran" class="ran_text">{{rantext}}</p> -->
- <p>{{businessDetailInfo.anVersion}}
- <!-- <img src="../../../../../../../assets/images/ask-img.png" alt=""
+ <p *ngIf="isshowran" class="ran_text">{{rantext}}</p>
+ <p>{{businessDetailInfo.an_ip_adrress}}
+ <img src="../../../../../../../assets/images/ask-img.png" alt=""
class="detail-icon"
- (mouseover)="detailFn(false,'ran')" (mouseleave)="detailFn(false,'ran')" /></p> -->
+ *ngIf="businessDetailInfo.an_ip_adrress"
+ (mouseover)="detailFn(false,'ran')" (mouseleave)="detailFn(false,'ran')" /></p>
</li>
<li class="vLan-line">
<p >
- Vlan ID:{{businessDetailInfo.vLanText}}
+ Vlan ID:{{businessDetailInfo.an_interface_id}}
</p>
<p [ngClass]="{'online-type':status=='activated','offline-type':status!=='activated'}"></p>
</li>
<li>
- <p>{{businessDetailInfo.tnVersion}}</p>
+ <p class="fantask">{{ businessDetailInfo.an_nextHop_info }}</p>
<p>
<img src="../../../../../../../assets/images/tn-edge-img.png" class="tnImg"/>
</p>
<p>PE</p>
</li>
<li class="three-box" >
- <p>{{businessDetailInfo.mbps}} Mbps</p>
+ <p>{{ businessDetailInfo.max_bandWidth }} Mbps</p>
<p>
- {{businessDetailInfo.msText}} ms
+ {{ businessDetailInfo.lantency }} ms
</p>
<p [ngClass]="{'online-type':status=='activated','offline-type':status!=='activated'}"></p>
- <p class="">Link Type:{{businessDetailInfo.linkType}}</p>
+ <p class="">Link Type:{{businessDetailInfo.link_type}}</p>
</li>
<li>
- <p>{{businessDetailInfo.tnEndVersion}}</p>
+ <p class="fantask">{{businessDetailInfo.cn_nextHop_info}}</p>
<p>
<img src="../../../../../../../assets/images/tn-edge-img.png" class="tnImg"/>
</p>
</li>
<li class="vLan-line">
<p >
- Vlan ID:{{businessDetailInfo.cnVlan}}
+ Vlan ID:{{businessDetailInfo.cn_interface_id}}
</p>
<p [ngClass]="{'online-type':status=='activated','offline-type':status!=='activated'}"></p>
</li>
<p>
<img src="../../../../../../../assets/images/cn-cloud-img.jpg" class="cnCloud"/>
</p>
- <!-- <p *ngIf="isshowran" class="cor_text">{{rantext}}</p> -->
- <p>{{businessDetailInfo.cnVersion}}
- <!-- <img src="../../../../../../../assets/images/ask-img.png" alt=""
+ <p *ngIf="isshowcore" class="cor_text">{{rantext}}</p>
+ <p>{{businessDetailInfo.cn_ip_adrress}}
+ <img src="../../../../../../../assets/images/ask-img.png" alt=""
class="core_icon"
- (mouseover)="detailFn(true,'core')" (mouseleave)="detailFn(false,'core')" /> -->
+ *ngIf="businessDetailInfo.cn_ip_adrress"
+ (mouseover)="detailFn(true,'core')" (mouseleave)="detailFn(false,'core')" />
</p>
</li>
</ul>
a{
text-decoration: none;
}
+.warp{
+ width: 100%;
+}
.header{
display: flex;
justify-content: space-between;
height: 40px;
line-height: 40px;
color:#000;
- margin:10px 80px;
-}
-.head_cn{
- margin-right: 8px;
+ margin:10px 8%;
+ text-align: center;
}
.anImg{
width: 76px;
margin-top: 20px;
}
.list-box{
+ width: 90%;
display: flex;
justify-content:center;
align-items: center;
text-align: center;
-
+ margin:0 5%;
}
.list-box li{
position: relative;
clear: both;
}
.online-vlan{
- width: 100px;
+ flex:1;
height: 1px;
background: #000;
}
.online-type{
- width: 180px;
height: 3px;
background: #1DA57A;
margin: 0 15px;
}
.offline-type{
- width: 180px;
+
height: 3px;
background: #7e848a;
margin: 0 15px;
.vLan-line{
text-align: center;
top:-20px;
+ flex:1;
}
.tnImg{
width: 50px;
}
.three-box{
text-align: center;
+ flex:1;
top:-20px;
}
.cnCloud{
margin-left:10px;
- width: 88px;
+ width: 68px;
height: auto;
margin-top: 20px;
}
-// .ran_text{
-// width: 200px;
-// height:auto;
-// background: rgba(0, 0, 0, .8);
-// line-height: 40px;
-// border-radius: 4px;
-// position: absolute;
-// right: -118px;
-// top: 34px;
-// color:#ffffff;
-// z-index:99;
-// }
-// .detail-icon{
-// position: absolute;
-// right: -26px;
-// bottom:-2px;
-// width:20px;
-// height:20px;
-// cursor: pointer;
-// }
-// .ran_text::before{
-// content: '';
-// display: block;
-// position: absolute;
-// right: 94px;
-// bottom: -16px;
-// border: 20px solid transparent;
-// border: 8px solid transparent;
-// border-top: 8px solid rgba(0, 0, 0, .8);
-// }
-// .cor_text{
-// width: 200px;
-// height:auto;
-// background: rgba(0, 0, 0, .8);
-// line-height: 40px;
-// border-radius: 4px;
-// text-indent: 2em;
-// position: absolute;
-// right: -300px;
-// top: -60px;
-// color:#ffffff;
-// }
-// .core_icon{
-// position: absolute;
-// right: 22px;
-// bottom:-10px;
-// width:20px;
-// height:20px;
-// cursor: pointer;
-// }
\ No newline at end of file
+.fantask{
+ height: 20px;
+}
+.ran_text{
+ width: 200px;
+ height:auto;
+ background: rgba(0, 0, 0, .8);
+ line-height: 40px;
+ border-radius: 4px;
+ position: absolute;
+ right: -118px;
+ top: 44px;
+ color:#ffffff;
+ z-index:99;
+}
+.detail-icon{
+ position: absolute;
+ right: -26px;
+ width:20px;
+ height:20px;
+ cursor: pointer;
+ }
+.ran_text::before{
+ content: '';
+ display: block;
+ position: absolute;
+ right: 94px;
+ bottom: -16px;
+ border: 20px solid transparent;
+ border: 8px solid transparent;
+ border-top: 8px solid rgba(0, 0, 0, .8);
+}
+.cor_text{
+ width: 200px;
+ height:auto;
+ background: rgba(0, 0, 0, .8);
+ line-height: 40px;
+ border-radius: 4px;
+ position: absolute;
+ right: -98px;
+ top: 20px;
+ color:#ffffff;
+}
+.cor_text::before{
+ content: '';
+ display: block;
+ position: absolute;
+ right: 94px;
+ bottom: -16px;
+ border: 20px solid transparent;
+ border: 8px solid transparent;
+ border-top: 8px solid rgba(0, 0, 0, .8);
+}
+.core_icon{
+ position: absolute;
+ right:-10px;
+
+ width:20px;
+ height:20px;
+ cursor: pointer;
+}
\ No newline at end of file
status: string = "";
businessDetailInfo : any = {}
rantext: string = "RAN Network Edge IP address";
-
+ isshowcore: boolean = false;
isshowran: boolean = false;
ngOnInit() {
this.status = this.outerData.orchestration_status
- console.log('status',this.status)
this.getDetail()
}
detailFn(flag,form){
this.rantext = form =='ran'? "RAN Network Edge IP address" : "Core Network Edge IP address";
- this.isshowran = !this.isshowran
+ if(form =='ran'){
+ this.isshowran = !this.isshowran
+ }else{
+ this.isshowcore = !this.isshowcore
+ }
}
getDetail() {
this.myhttp.getSlicingBusinessDetail(this.businessId).then(res => {
this.isSpinning = false;
- const { business_demand_info, business_demand_info: { coverage_area_ta_list }, nst_info, nsi_info ,connection_link: { tn_bh_slice_task_info }} = res.result_body;
- console.log(JSON.stringify(tn_bh_slice_task_info),11111)
- // tn_bh_slice_task_info = {"suggestNssiId":null,"suggestNSSIName":null,"progress":null,"status":null,"statusDescription":null,"scriptName":null,"enableNSSISelection":null,"sliceProfile":null,"lantency":null,"max_bandWidth":null,"link_type":null}
+ const { business_demand_info, business_demand_info: { coverage_area_ta_list }, nst_info, nsi_info ,connection_link: { an_slice_task_info,cn_slice_task_info,tn_bh_slice_task_info }} = res.result_body;
+ const connect_info = {
+ an_ip_adrress: an_slice_task_info.ip_adrress,
+ an_interface_id: an_slice_task_info.interface_id,
+ an_nextHop_info: an_slice_task_info.nextHop_info,
+ cn_interface_id: cn_slice_task_info.interface_id,
+ cn_ip_adrress: cn_slice_task_info.ip_adrress,
+ cn_nextHop_info: cn_slice_task_info.nextHop_info,
+ max_bandWidth: tn_bh_slice_task_info.max_bandWidth,
+ link_type: tn_bh_slice_task_info.link_type,
+ lantency: tn_bh_slice_task_info.lantency
+ }
+ this.businessDetailInfo = connect_info
- this.businessDetailInfo = {
- "suggestNssiId": '',
- "suggestNSSIName": '11111',
- "progress": 'active',
- "status": 'active',
- "statusDescription": 'p2p/mp2p',
- "scriptName": '10.1.1.1',
- "enableNSSISelection": '11',
- "sliceProfile": '10.1.1.1',
- "lantency": '10.2.3.4.5',
- "max_bandWidth": '1111',
- "link_type": '333'
- }
- // this.businessDetailInfo = {
- // "anVersion":"10.2.3.4.5",
- // "vLanText":"11111",
- // "tnVersion":"10.0.1.1.1",
- // "mbps":"11111",
- // "msText":"11111",
- // "linkType":"p2p/mp2p",
- // "tnEndVersion":"10.1.1.1",
- // "cnVlan":"11",
- // "cnVersion":"1.1.2.3",
- // "orchestration_status":"active"
- // }
business_demand_info.area = coverage_area_ta_list.map(item => {
item = item.split(';').join('-');
return item
<thead>
<tr>
<th *ngFor="let val of connectionTableHeader" class="subnet_td">{{val}}</th>
- <th class="subnet_td"> action </th>
+ <th class="subnet_td">{{connectionLinkTable.length!==0?'action':''}} </th>
</tr>
</thead>
<tbody>
Code Review / usecase-ui.git / commitdiff