diff options
author | cyuamber <xuranyjy@chinamobile.com> | 2019-09-26 16:53:28 +0800 |
---|---|---|
committer | xu ran <xuranyjy@chinamobile.com> | 2019-09-27 00:45:40 +0000 |
commit | 2fd289f8e4e211eb26752d04d8d9b394ab78470f (patch) | |
tree | 8d987aace682431d2818aaa301cc338a9f6b015a /usecaseui-portal/src/app/shared/components/e2e-detail | |
parent | 2b307fe51a873c200c22469327e6947095516288 (diff) |
feat:adjust the file schema of components related to service instances
Change-Id: I18f1674601536a59313528bb1e01fd6b4fffd4fd
Issue-ID: USECASEUI-307
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app/shared/components/e2e-detail')
4 files changed, 0 insertions, 522 deletions
diff --git a/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.html b/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.html deleted file mode 100644 index 976a9f6c..00000000 --- a/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.html +++ /dev/null @@ -1,109 +0,0 @@ -<!-- - 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. ---> -<!--<h3 class="title"> Services List </h3>--> -<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 *ngIf="detailParams.serviceDomain == 'E2E Service'" 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 class="vnf-box" *ngFor="let template of e2e_nestedTemplates;"> - <h3>{{template.name}}</h3> - <ul class="clearfix"> - <li *ngFor="let input of template.vnfs; let i = index;"> - <span style="width: 26%;min-width: 80px!important"> vf_location: </span> - <span class="input-content">{{input["vf_location"]}}</span> - </li> - </ul> - </div> - </div> - - <div *ngIf="detailParams.serviceDomain=='Network Service'" 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">{{ns_service.name}}</span> - </li> - <li> - <span style="width:25%">Description:</span> - <span class="input-content">{{ns_service.description}}</span> - </li> - </ul> - </div> - <div class="vnf-box" *ngIf="getKeys(ns_requestInputs).length>0"> - <h4>{{"i18nTextDefine_templateInputs" | translate}}</h4> - <ul> - <li *ngFor="let key of getKeys(ns_requestInputs);"> - <span title="{{key}}">{{key}}:</span> - <span class="input-content">{{ns_requestInputs[key]}}</span> - </li> - </ul> - </div> - <div class="vnf-box" *ngIf="ns_nestedTemplates.length>0"> - <h4>vnfs Inputs</h4> - <ul> - <li *ngFor="let vnf of ns_nestedTemplates;"> - <h5> - <span style="width: 26%;min-width: 80px!important"> id: </span> - <span class="input-content"> {{vnf.vnfInstanceId}}</span> - </h5> - <h5> - <span style="width: 26%;min-width: 80px!important"> vf_location: </span> - <span class="input-content">{{vnf["vnfInstanceName"]}}</span> - </h5> - </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/shared/components/e2e-detail/e2e-detail.component.less b/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.less deleted file mode 100644 index bada5991..00000000 --- a/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.less +++ /dev/null @@ -1,142 +0,0 @@ -/* - 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%; - } - } -} diff --git a/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.spec.ts b/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.spec.ts deleted file mode 100644 index ad24a477..00000000 --- a/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { E2eDetailComponent } from './e2e-detail.component'; - -describe('E2eDetailComponent', () => { - let component: E2eDetailComponent; - let fixture: ComponentFixture<E2eDetailComponent>; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ E2eDetailComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(E2eDetailComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.ts b/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.ts deleted file mode 100644 index 9f38ffa5..00000000 --- a/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.ts +++ /dev/null @@ -1,246 +0,0 @@ -/* - 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. -*/ - -import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; -import { ServiceListService } from '../../../core/services/serviceList.service'; -import * as d3 from 'd3'; - -@Component({ - selector: 'app-e2e-detail', - templateUrl: './e2e-detail.component.html', - styleUrls: ['./e2e-detail.component.less'] -}) -export class E2eDetailComponent implements OnInit { - - constructor(private myhttp: ServiceListService) { - } - - ngOnInit() { - // this.getDetails(); - this.dataInit(); - } - - @Input() detailParams; - - @Output() closeDetail = new EventEmitter(); - serviceInstanceName: any; - serviceType: any; - input_parameters: any; - nsinput_parameters: any; - - // e2e - service = { - name: "", - description: "", - }; - e2e_nestedTemplates = []; - e2e_requestInputs: any; - - ns_service = { - name: "", - description: "" - } - ns_nestedTemplates = []; - ns_requestInputs = {}; - roote2e = { - "name": "e2e", - "type": "e2e", - "children": [] - }; - - rootns = { - "name": "ns", - "type": "ns", - "children": [] - }; - - imgmap = { - '1': '../../../../assets/images/create-e2e.png', - '2': '../../../../assets/images/create-ns.png', - '3': '../../../../assets/images/create-vnf.png', - }; - - getKeys(item) { - return Object.keys(item); - } - - dataInit() { - console.log(this.detailParams); - this.serviceInstanceName = this.detailParams['service-instance-name'] || this.detailParams["nsName"]; - if (this.detailParams.serviceDomain == 'E2E Service') { - this.input_parameters = JSON.stringify(this.detailParams['input-parameters']); - this.input_parameters = JSON.parse(this.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; - } - if (this.input_parameters.service.parameters.resources != undefined && this.input_parameters.service.parameters.resources.length > 0) { - this.input_parameters.service.parameters.resources.map((item, i) => { - let nestedTemplates = { - name: null, - vnfs: [] - }; - nestedTemplates.name = item.resourceName; - item.parameters.locationConstraints.map((its, k) => { - nestedTemplates.vnfs.push({ - "vf_location": its.locationConstraints.cloudOwner - }) - }); - this.e2e_nestedTemplates.push(nestedTemplates); - - let nsIndex = { - "name": "ns", - "type": "ns", - "children": [] - }; - nsIndex.children = item.parameters.locationConstraints.map((itemits, index) => { - return { - "name": "vnf", - "type": "vnf", - } - }); - this.roote2e.children.push(nsIndex); - }); - console.log(this.e2e_nestedTemplates); - console.log(this.e2e_requestInputs); - console.log(this.roote2e) - } - } else if (this.detailParams.serviceDomain == 'Network Service') { - this.ns_service = { - name: this.detailParams.name || this.detailParams['service-instance-name'], - description: this.detailParams.description || null - }; - if (this.detailParams.requestInputs != undefined && Object.keys(this.detailParams.requestInputs).length > 0) { - this.ns_requestInputs = this.detailParams.requestInputs; - } - this.ns_nestedTemplates = this.detailParams.childServiceInstances; - this.rootns.children = this.ns_nestedTemplates.map((item, index) => { - return { - "name": "vnf", - "type": "vnf" - } - }); - console.log(this.ns_nestedTemplates); - console.log(this.ns_requestInputs); - console.log(this.rootns) - } - this.drawImage(this.detailParams.serviceDomain) - } - - goback() { - this.closeDetail.emit(); - } - - drawImage(type) { - if (type == "E2E Service") { - this.render(this.roote2e, this.imgmap) - } else if (type == "Network Service") { - this.render(this.rootns, this.imgmap) - } - - - } - - render(data, imgmap) { - var width = document.getElementById("createChart").clientWidth, - height = document.getElementById("createChart").clientHeight; - var cluster = d3.layout.tree() - .size([width, height]); - var diagonal = d3.svg.diagonal() - .projection(function (d) { - return [d.x - 18, d.y + 40]; - }); - var svg = d3.select("svg"); - - //marker - var marker = - svg.append("marker") - .attr("id", "resolved") - .attr("markerUnits", "strokeWidth") - .attr("markerUnits", "userSpaceOnUse") - .attr("viewBox", "0 -5 10 10") - .attr("refX", 22) - .attr("refY", 0) - .attr("markerWidth", 20) - .attr("markerHeight", 20) - .attr("orient", "auto") - .attr("stroke-width", 1) - .append("circle") - .attr("cx", 5) - .attr("cy", 0) - .attr("r", 2) - .attr("stroke-width", 1) - .style("stroke", "#2F8BF7") - .attr('fill', 'white'); - var i = 0; - var nodes = cluster.nodes(data).reverse(); - nodes.forEach(function (d) { - d.y = d.depth * 200 + 100; - - }); - - var links = cluster.links(nodes); - - var linkEnter = svg.selectAll("path.link") - .data(links); - - linkEnter.enter().append("path") - .attr("class", "link") - .attr("d", diagonal) - .style("stroke", "#2F8BF7") - .style('stroke-width', '1px') - .attr("marker-end", "url(#resolved)") - .style("fill", "none") - // .style("fill-opacity", 1) - .attr("id", function (d, i) { - return "mypath" + i; - }); - - var node = svg.selectAll(".node") - .data(nodes) - .enter() - .append("g") - .attr("class", "node") - .attr("transform", function (d) { - return "translate(" + (d.x + -50) + "," + (d.y) + ")"; - }); - - node.append('image') - .attr('xlink:href', function (d) { - if (d.type == "e2e") { - return imgmap[1]; - } else if (d.type == "ns") { - return imgmap[2]; - } else if (d.type == "vnf") { - return imgmap[3]; - } - - }) - .style('width', '12%') - .style("cursor", "pointer") - .attr("x", 0) - .attr("y", 0) - .attr("rx", 3); - - - } - - -} |