diff options
Diffstat (limited to 'usecaseui-portal/src/app/views/services/services-list/mdons-detail')
3 files changed, 237 insertions, 0 deletions
diff --git a/usecaseui-portal/src/app/views/services/services-list/mdons-detail/mdons-detail.component.html b/usecaseui-portal/src/app/views/services/services-list/mdons-detail/mdons-detail.component.html new file mode 100644 index 00000000..dd622985 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services-list/mdons-detail/mdons-detail.component.html @@ -0,0 +1,44 @@ +<div class="model creation-model"> + + <div class="top-title"> + <h3 class="title fl">{{serviceInstanceName}} Instance Detail</h3> + <div class="fl" style="width: 20%"> + <button class="back" nz-button (click)="goback()"></button> + </div> + </div> + <div class="detaildata fl"> + <div class="baseparms clearfix"> + <div class="vnf-box"> + <h3> {{"i18nTextDefine_Base" | translate}} </h3> + <ul class="clearfix"> + <li> + <span style="width:15%">Name:</span> + <span class="input-content">{{service.name}}</span> + </li> + <li> + <span style="width:25%">Description:</span> + <span class="input-content">{{service.description}}</span> + </li> + </ul> + </div> + <div class="vnf-box" *ngIf="getKeys(e2e_requestInputs).length>0"> + <h3>{{"i18nTextDefine_templateInputs" | translate}}</h3> + <ul class="clearfix"> + <li *ngFor="let key of getKeys(e2e_requestInputs);"> + <span title="{{key}}">{{key}}:</span> + <span class="input-content">{{e2e_requestInputs[key]}}</span> + </li> + </ul> + </div> + </div> +</div> + +<!-- chart --> +<div class="chart fr"> + <div id="createChart"> + <svg width="100%" height="100%"> + </svg> + </div> +</div> + +</div>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/services-list/mdons-detail/mdons-detail.component.less b/usecaseui-portal/src/app/views/services/services-list/mdons-detail/mdons-detail.component.less new file mode 100644 index 00000000..9a0f1925 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services-list/mdons-detail/mdons-detail.component.less @@ -0,0 +1,143 @@ +/* + Copyright (C) 2019 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; + } + .creation-model{ + position: relative; + } + .model { + background-color: #F7F8FC; + height: 100%; + overflow-y: auto; + position: relative; + .top-title{ + width: 100%; + padding: 20px; + position: relative; + display: inline-block; + } + .back,.back:hover{ + position: absolute; + top: 10px; + right: 20px; + display: inline-block; + width: 35px; + height: 35px; + background:url("../../../../../assets/images/Return-icon.png") no-repeat!important; + background-size: 100%!important; + border-radius:4px; + color: #D7D7D7; + cursor: pointer; + } + .back:hover{ + background: url("../../../../../assets/images/Return-icon-active.png")!important; + background-size: 100%!important; + } + .top-title h3.title { + height: 35px; + width: 80%; + font-size:16px; + font-family:ArialMT; + color:#3C4F8C; + line-height:35px; + display: inline-block; + } + .detaildata{ + position: relative; + width: 58%; + height: 100%; + overflow-y: auto; + border-radius: 5px; + padding: 20px; + background: #fff; + margin-left: 30px; + box-shadow:0px 10px 15px 2px rgba(222,222,222,0.5); + .baseparms { + h3,h4{ + color: #06A7E2; + width: 96%; + height: 40px; + line-height: 35px; + font-size: 18px; + font-weight: 500; + margin: 10px auto; + border-bottom: 2px solid; + border-image: -webkit-linear-gradient(#07A9E1,#30D9C4) 100 100; + border-image: -moz-linear-gradient(#07A9E1,#30D9C4) 100 100; + border-image: linear-gradient(#07A9E1,#30D9C4) 100 100; + border-radius:2px; + } + h4 { + font: 700 16px "Arial"; + margin-left: 25px; + } + .vnf-box{ + clear: both; + } + ul{ + margin-left: 30px; + } + ul li { + margin: 10px 0; + width: 49%; + float: left; + text-align: left; + color:rgba(60,79,140,1); + font-size: 14px; + span { + display: inline-block; + width: 50%; + font: 700 14px "Arial"; + vertical-align: top; + overflow: hidden; + text-align: left; + color:rgba(60,79,140,0.5); + word-break: break-all; + } + span.input-content{ + width: 42%; + color: #3C4F8C; + margin-left: 5%; + word-break: break-all; + vertical-align: top; + } + } + } + } + .chart { + width: 35%; + padding: 10px; + height: 95%; + box-shadow: 0px 10px 35px 10px rgba(222, 222, 222, 0.5); + margin-right: 1%; + background:linear-gradient(180deg,rgba(183, 230, 247, 1) 0%,rgba(214, 240, 254, 1) 100%); + border-radius: 4px; + #createChart{ + height: 100%; + width: 100%; + } + } + } +
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/services-list/mdons-detail/mdons-detail.component.ts b/usecaseui-portal/src/app/views/services/services-list/mdons-detail/mdons-detail.component.ts new file mode 100644 index 00000000..ee4c71df --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services-list/mdons-detail/mdons-detail.component.ts @@ -0,0 +1,50 @@ +import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core'; +import { ServiceListService } from '../../../../core/services/serviceList.service'; + +@Component({ + selector: 'app-mdons-detail', + templateUrl: './mdons-detail.component.html', + styleUrls: ['./mdons-detail.component.less'] +}) +export class MdonsDetailComponent implements OnInit { + + constructor(private myhttp: ServiceListService) { } + + @Input() detailParams; + @Output() closeDetail = new EventEmitter(); + serviceInstanceName: any; + serviceType: any; + input_parameters: any; + e2e_requestInputs: any; + + service = { + name: "", + description: "", + }; + + getKeys(item) { + return Object.keys(item); + } + + ngOnInit() { + + console.log(this.detailParams); + this.serviceInstanceName = this.detailParams['serviceDomain'] || this.detailParams["nsName"]; + this.input_parameters = JSON.parse(this.detailParams['input-parameters']); + console.log(this.input_parameters); + this.service = { + name: this.input_parameters.service.name, + description: this.input_parameters.service.description, + }; + if (this.input_parameters.service.parameters.requestInputs != undefined && Object.keys(this.input_parameters.service.parameters.requestInputs).length > 0) { + this.e2e_requestInputs = this.input_parameters.service.parameters.requestInputs; + } + } + + goback() { + this.closeDetail.emit(); + } + + + +}
\ No newline at end of file |