diff options
56 files changed, 2215 insertions, 981 deletions
diff --git a/usecaseui-portal/src/app/app-routing.module.ts b/usecaseui-portal/src/app/app-routing.module.ts index 558b4428..04a6bc80 100644 --- a/usecaseui-portal/src/app/app-routing.module.ts +++ b/usecaseui-portal/src/app/app-routing.module.ts @@ -19,6 +19,7 @@ import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './home/home.component'; import { ManagementComponent } from './management/management.component'; +import { FcapsComponent } from './fcaps/fcaps.component'; import { ServicesComponent } from './services/services.component'; import { ServicesListComponent } from './services/services-list/services-list.component'; import { OnboardVnfVmComponent } from './services/onboard-vnf-vm/onboard-vnf-vm.component'; @@ -40,6 +41,7 @@ const ServicesChildRoutes: Routes = [ const routes: Routes = [ { path: 'home', component: HomeComponent}, { path: 'management', component: ManagementComponent}, + { path: 'fcaps', component: FcapsComponent}, // { path: 'services', component: ServicesComponent, children:ServicesChildRoutes}, //Temporarily not a sub-routing structure { path: 'services/services-list', component: ServicesListComponent}, { path: 'services/onboard-vnf-vm', component: OnboardVnfVmComponent}, diff --git a/usecaseui-portal/src/app/app.component.html b/usecaseui-portal/src/app/app.component.html index 25d8f6d6..1b201c08 100644 --- a/usecaseui-portal/src/app/app.component.html +++ b/usecaseui-portal/src/app/app.component.html @@ -14,22 +14,51 @@ limitations under the License. --> <nz-layout> - <nz-sider nzWidth='260' style="overflow: auto; height: 100vh; position: fixed; left: 0"> - <ul nz-menu [nzTheme]="'dark'" [nzMode]="'inline'" style="width: 260px;"> - <li nz-menu-item nzSelected> + <nz-sider nzWidth='330' style="overflow: auto; height: 100vh; position: fixed; left: 0;background: url('assets/images/UUIMenuBar.png')"> + <div style="width: 330px;height:240px;text-align: center"> + <img src="assets/images/uui-logo130.png" alt="" style="margin-top: 40px"> + </div> + <ul nz-menu [nzTheme]="'dark'" [nzMode]="'inline'" style="width: 330px"> + <li nz-menu-item [ngClass]="{'activeMenuBar':activeMenuBar[0] == true}" (click)="thisActive(0)"> <a routerLink="home"> <span title> - <i class="anticon anticon-home"></i> - <span> {{"Home" | translate}} </span> + <i> + <img src="{{activeMenuBar[0] == true ? 'assets/images/home-icon-active.png':'assets/images/home-icon.png'}}" alt="home"> + </i> + <span> {{"i18nTextDefine_Home" | translate}} </span> </span> </a> </li> <hr> - <li nz-submenu> - <span title><i class="anticon anticon-home"></i> {{"Services" | translate}} </span> + <li nz-menu-item [ngClass]="{'activeMenuBar':activeMenuBar[1] == true}" (click)="thisActive(1)"> + <a routerLink="management"> + <span title> + <i> + <img src="{{activeMenuBar[1] == true ? 'assets/images/customer-icon-active.png':'assets/images/customer-icon.png'}}" alt="home"> + </i> + <span> {{"i18nTextDefine_Customer" | translate}} </span> + </span> + </a> + </li> + <hr> + <li nz-menu-item [ngClass]="{'activeMenuBar':activeMenuBar[2]== true}" (click)="thisActive(2)"> + <a href="#" onclick="window.open('http://172.30.1.80:5601/app/kibana#/dashboards')"> + <span title> + <i> + <img src="{{activeMenuBar[2] == true ? 'assets/images/monitor-icon-active.png':'assets/images/monitor-icon.png'}}" alt="home"> + </i> + <span> {{"i18nTextDefine_Monitor" | translate}} </span> + </span> + </a> + </li> + <hr> + <li nz-submenu [ngClass]="{'activeMenuBar':activeMenuBar[3] == true}" (click)="thisActive(3)"> + <span title> <i> + <img src="{{activeMenuBar[3] == true ? 'assets/images/Services-icon-active.png':'assets/images/Services-icon.png'}}" alt="home"> + </i> {{"i18nTextDefine_Services" | translate}} </span> <ul> - <li nz-menu-item><a routerLink='services/services-list'> {{"Services List" | translate}}</a></li> - <li nz-menu-item><a routerLink='services/onboard-vnf-vm'> Onboard VNF/VM </a></li> + <li nz-menu-item [ngClass]="{'activeMenuList':activeMenuList[0] == true}" (click)="thisListActive(0)"><a routerLink='services/services-list'> {{"i18nTextDefine_ServicesList" | translate}} </a></li> + <li nz-menu-item [ngClass]="{'activeMenuList':activeMenuList[1] == true}" (click)="thisListActive(1)"><a routerLink='services/onboard-vnf-vm'> {{"i18nTextDefine_PackageManagement" | translate}} </a></li> </ul> </li> <!-- <hr> @@ -37,39 +66,32 @@ <a routerLink="alarm"> <span title> <i class="anticon anticon-mail"></i> - <span> {{"Alarm" | translate}} </span> + <span> {{"i18nTextDefine_Alarm" | translate}} </span> </span> </a> </li> <hr> --> <!-- <li nz-submenu> - <span title><i class="anticon anticon-setting"></i> {{"Monitor" | translate}} </span> + <span title><i class="anticon anticon-setting"></i> {{"i18nTextDefine_Monitor" | translate}} </span> <ul> - <li nz-menu-item><a routerLink='alarm'> {{"Alarm" | translate}} </a></li> - <li nz-menu-item><a routerLink='performance/performance-vnf'> {{"Performance" | translate}}</a></li> + <li nz-menu-item><a routerLink='alarm'> {{"i18nTextDefine_Alarm" | translate}} </a></li> + <li nz-menu-item><a routerLink='performance/performance-vnf'> {{"i18nTextDefine_Performance" | translate}}</a></li> </ul> </li> --> <hr> - <li nz-menu-item> + <li nz-menu-item [ngClass]="{'activeMenuBar':activeMenuBar[4] == true}" (click)="thisActive(4)"> <a routerLink="network"> <span title> - <i class="anticon anticon-share-alt"></i> - <span> {{"Network" | translate}} </span> + <i> + <img src="{{activeMenuBar[4] == true ? 'assets/images/network-icon-active.png':'assets/images/network-icon.png'}}" alt="home"> + </i> + <span> {{"i18nTextDefine_NetworkTopology" | translate}} </span> </span> </a> </li> </ul> - - <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomRight'"> - <button nz-button nz-dropdown><span>{{selectLanguage | translate}}</span> <i class="anticon anticon-down"></i></button> - <ul nz-menu> - <li nz-menu-item (click)="changeLanguage(item)" *ngFor="let item of Language"> - <a>{{item | translate}}</a> - </li> - </ul> - </nz-dropdown> </nz-sider> - <nz-layout style="margin-left: 260px; height:100vh; position:relative;"> + <nz-layout style="margin-left: 330px; height:100vh; position:relative;"> <router-outlet></router-outlet> </nz-layout> </nz-layout> diff --git a/usecaseui-portal/src/app/app.component.less b/usecaseui-portal/src/app/app.component.less index a805166e..685a2167 100644 --- a/usecaseui-portal/src/app/app.component.less +++ b/usecaseui-portal/src/app/app.component.less @@ -1,25 +1,51 @@ nz-layout { nz-sider { ul { + background: transparent; li { margin: 0; font-size: 16px; + color: #ffffff!important; + background: transparent; + a{ + color: #ffffff; + } span { font-size: 16px; } i { width: 16px; height: 16px; + margin-right: 12px; + img{ + width: 20px; + } } .icon-services { background: url(../assets/images/icon.png) no-repeat 0px -16px; } ul { + background: transparent!important; li{ font-size: 12px; + color: #ffffff!important; + background: transparent!important; + } + li:hover,li a:hover{ + color: #ffffff!important; + } + li.activeMenuList,li.activeMenuList a{ + color: #0DA9E2!important; } } } + li:hover,li a:hover{ + color: #ffffff!important; + } + li.activeMenuBar{ + color: #ffffff!important; + background:linear-gradient(90deg,rgba(7,169,225,1) 0%,rgba(48,217,196,1) 100%); + } hr { margin: 0 auto; background-color: #39434f; diff --git a/usecaseui-portal/src/app/app.component.ts b/usecaseui-portal/src/app/app.component.ts index 0bdf72b2..01206873 100644 --- a/usecaseui-portal/src/app/app.component.ts +++ b/usecaseui-portal/src/app/app.component.ts @@ -13,8 +13,10 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { Component } from '@angular/core'; -import { TranslateService } from '@ngx-translate/core'; +import {Component} from '@angular/core'; +import {TranslateService} from '@ngx-translate/core'; +import {MyhttpService} from "./myhttp.service"; +import {HomesService} from "./homes.service"; @Component({ @@ -23,18 +25,88 @@ import { TranslateService } from '@ngx-translate/core'; styleUrls: ['./app.component.less'] }) export class AppComponent { - constructor(private translate:TranslateService){ - translate.addLangs(['en', 'zh']); - translate.setDefaultLang('en'); - // translate.use('en'); - } - - - Language:String[] = ["zh","en"]; - selectLanguage = "en"; - - changeLanguage(item){ - this.selectLanguage = item; - this.translate.use(item); - } + + constructor(private translate: TranslateService,private myhttp: HomesService) { + this.currentLanguageGet(); + // translate.use('en'); + } + + + //209.05.08 Get the currentLanguage + currentloginId = null; + currentLanguage = "en"; + currentLanguageGet() { + this.currentloginId = sessionStorage.getItem("loginId") || null; + if (this.currentloginId != null) { + console.log(this.currentloginId); + this.myhttp.getCurrentLanguage(this.currentloginId) + .subscribe( + (data) => { + console.log(data,"-------------getCurrentLanguage"); + this.currentLanguage = data.languageAlias.toLowerCase(); + this.translate.use(this.currentLanguage); + sessionStorage.setItem("DefaultLang",this.currentLanguage); + }, + (err) => { + console.log(err); + } + ) + }else { + this.translate.setDefaultLang(this.currentLanguage); + sessionStorage.setItem("DefaultLang",this.currentLanguage); + } + } + activeMenuBar =[true,false,false,false,false]; + activeMenuList =[false,false]; + thisActive(item){ + if(this.activeMenuBar[item] == true){ + this.activeMenuBar.map((its,index) => { + if(item != index){ + this.activeMenuBar[index] = false; + } + }) + }else { + this.activeMenuBar.map((its,index) => { + if(item == index){ + this.activeMenuBar[item] = true; + }else { + this.activeMenuBar[index] = false; + } + }) + this.activeMenuList.map((its,index) => { + this.activeMenuList[index] = false; + }) + } + } + thisListActive(item){ + if(this.activeMenuBar[3] = true){ + if(this.activeMenuList[item] == true){ + this.activeMenuList.map((its,index) => { + if(item != index){ + this.activeMenuList[index] = false; + } + }) + }else { + this.activeMenuList.map((its,index) => { + if(item == index){ + this.activeMenuList[item] = true; + }else { + this.activeMenuList[index] = false; + } + }) + + } + }else { + this.activeMenuList.map((its,index) => { + this.activeMenuList[index] = false; + }) + } + } + // + // selectLanguage = "en"; + + // changeLanguage(item){ + // this.selectLanguage = item; + // this.translate.use(item); + // } } diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts index be4454f2..9c69124f 100644 --- a/usecaseui-portal/src/app/app.module.ts +++ b/usecaseui-portal/src/app/app.module.ts @@ -69,6 +69,7 @@ import { PerformanceDetailsComponent } from './components/performance-details/pe import { E2eDetailComponent } from './components/e2e-detail/e2e-detail.component'; import { CustomerComponent } from './components/customer/customer.component'; import { ManagemencsService } from './managemencs.service'; +import { FcapsComponent } from './fcaps/fcaps.component'; @NgModule({ providers : [ @@ -106,6 +107,7 @@ import { ManagemencsService } from './managemencs.service'; E2eDetailComponent, CustomerComponent , PerformanceDetailsComponent, + FcapsComponent ], imports: [ BrowserModule, diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css index 99095ec3..ce546cb8 100644 --- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css +++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css @@ -63,7 +63,7 @@ hr { } .model .submit{ position: absolute; - width:116px; + width:90px; height: 35px; top: 10px; right: 85px; @@ -94,20 +94,32 @@ hr { color: #000; } /* SOTN VPN */ -.model .creation .sotnvpn .service-title{ - margin-bottom: 35px; +.model .creation .service-title{ + margin:60px 50px; } -.model .creation .sotnvpn .service-title .lable { +.model .creation .service-title .info-inputs{ + width:400px; + height: 42px; display: inline-block; - width: 90px; +} +.model .creation .service-title span{ + height: 42px; + line-height: 42px; + vertical-align: middle; +} +.model .creation .service-title .lable{ + display: inline-block; + width: 100px; font: 700 14px "Arial"; color: #3C4F8C; + height: 42px; + line-height: 42px; vertical-align: middle; margin-left: 5px; } -.model .creation .sotnvpn .service-title input { - width: 234px; - height: 40px; +.model .creation .service-title input { + width: 230px; + height: 42px; border-radius:4px; outline: none; margin-right: 50px; @@ -177,7 +189,7 @@ hr { .model .sitemodel .inputs input,.model .sitemodel .inputs nz-select { width: 186px; float: right; - margin-right: 25px; + margin-right: 60px; } .model .sotnnpnmodel .inputs input{ width: 186px; diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html index 8aa7bd61..3409c8fa 100644 --- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html +++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html @@ -18,10 +18,10 @@ <div class="model creation-model"> <div class="top-title"> - <h3 class="title fl">{{createParams.commonParams.templateType}} Instance Creation</h3> + <h3 class="title fl">{{createParams.commonParams.templateType}} {{"i18nTextDefine_InstanceCreation" | translate}} </h3> <div class="fl" style="width: 20%"> - <button class="submit" nz-button (click)="submit()"><i - class="anticon anticon-plus" style="transform: scale(1.5);line-height: 15px;margin-right: 5px;"></i><span>Create</span></button> + <button class="submit" nz-button (click)="submit()"><span> {{"i18nTextDefine_Create" | translate}} </span> + </button> <button class="back" nz-button (click)="goback()"> <i class="anticon anticon-arrow-left" style="transform: scale(1.5)"></i> </button> @@ -30,31 +30,32 @@ <!-- chart --> <div class="chart"> <span style="padding: 25px;display: inline-block;"> - Instance Topology + {{"i18nTextDefine_InstanceTopology" | translate}} </span> <div id="createChart"> <svg width="100%" height="100%"> - <image id="domain" xlink:href="../../assets/images/domain1.png" style="width: 15%" + <image id="domain" xlink:href="assets/images/domain1.png" style="width: 15%" x="40%" y="0"/> </svg> - <!-- <p class="siteNameP" [ngStyle]="siteNameStyle">{{ siteName }}</p> --> </div> </div> <div class="creation"> <nz-tabset [nzTabPosition]="'top'" [nzShowPagination]=false [nzTabBarGutter]="'2'" [nzTabBarStyle]=tabBarStyle> - <nz-tab nzTitle="sdwanvpnresource_list"> + <nz-tab nzTitle="Service Info"> + <div class="service-title" style="clear: both"> + <span style="color: red;">*</span><span class="lable" style="width: 60px">name:</span> + <input nz-input [(ngModel)]="this.templateParameters.service['name']" required="required"> + <span style="color: red;">*</span><span class="lable">description:</span> + <input nz-input [(ngModel)]="this.templateParameters.service['description']"> + </div> + </nz-tab> + <nz-tab nzTitle="Sdwanvpnresource List"> <div class="sotnvpn clearfix"> - <div class="service-title" style="clear: both"> - <span style="color: red;">*</span><span class="lable" style="width: 50px">name:</span> - <input nz-input [(ngModel)]="this.templateParameters.service['name']" required="required"> - <span style="color: red;">*</span><span class="lable">description:</span> - <input nz-input [(ngModel)]="this.templateParameters.service['description']"> - </div> <div style="clear: both;height: 10px"> <h3 style="float: left;color: #3C4F8C">sdwanVPN List</h3> <button nz-button (click)="addSotnvpn()" class="addListBtn" style="float: right;margin-right: 10px"><i class="anticon anticon-plus" - style="transform: scale(1.2);font-weight: 700"></i>Add + style="transform: scale(1.2);font-weight: 700"></i> {{"i18nTextDefine_Add" | translate}} </button> </div> <nz-table #sotnVpnTable [nzData]="sotnVpnTableData" @@ -86,13 +87,13 @@ </nz-table> </div> </nz-tab> - <nz-tab nzTitle="sdwansiteresource_list"> + <nz-tab nzTitle="Sdwansiteresource List"> <div class="site"> - <div> + <div style="height: 10px"> <h3 style="float: left;color: #3C4F8C">Site List</h3> <button nz-button (click)="addSite()" class="addListBtn" style="float: right;margin-right: 10px"><i class="anticon anticon-plus" - style="transform: scale(1.2);font-weight: 700"></i>Add + style="transform: scale(1.2);font-weight: 700"></i>{{"i18nTextDefine_Add" | translate}} </button> </div> <nz-table #siteTable [nzData]="siteTableData" @@ -134,7 +135,7 @@ </div> <!-- sotnVpnmodel --> <div class="sotnnpnmodel" *ngIf="sotnVpnModelShow"> - <h3>sdwanvpnresource_list</h3> + <h3> {{"i18nTextDefine_Base" | translate}} </h3> <div class="inputs"> <ul> <li *ngFor="let item of this.templateParameters.sotnvpn.sdwanvpnresource_list"> @@ -144,11 +145,11 @@ </ul> </div> <div> - <h3>sdwansitelan_list</h3> + <h3>Sdwansitelan List</h3> <div> <div style="width: 100%;text-align: right"> <button nz-button (click)="addSotnSdwansitelan()" class="addListBtn"><i class="anticon anticon-plus" - style="transform: scale(1.2);font-weight: 700;"></i>Add + style="transform: scale(1.2);font-weight: 700;"></i>{{"i18nTextDefine_Add" | translate}} </button> </div> <table class="siteWanTab"> @@ -185,13 +186,13 @@ </div> <div class="action"> - <button nz-button nzType="primary" (click)="addSotnVpn_cancel()">Cancel</button> - <button nz-button nzType="primary" (click)="addSotnVpn_OK()">Add</button> + <button nz-button nzType="primary" (click)="addSotnVpn_cancel()">{{"i18nTextDefine_Cancel" | translate}}</button> + <button nz-button nzType="primary" (click)="addSotnVpn_OK()">{{"i18nTextDefine_Add" | translate}}</button> </div> </div> <!-- sitemodel --> <div class="sitemodel" *ngIf="siteModelShow"> - <h3>sdwansiteresource_list</h3> + <h3> {{"i18nTextDefine_Base" | translate}} </h3> <div class="inputs"> <ul> <li *ngFor="let item of this.templateParameters.site.sdwansiteresource_list"> @@ -201,7 +202,7 @@ </ul> </div> <div> - <h3>sdwandevice_list</h3> + <h3>Sdwandevice</h3> <div class="inputs"> <ul> <li *ngFor="let item of this.templateParameters.site.sdwandevice_list"> @@ -210,11 +211,11 @@ required="{{item.required==true ? 'required':null}}"></li> </ul> </div> - <h3>sdwansitewan_list</h3> + <h3>Sdwansitewan List</h3> <div> <div style="width: 100%;text-align: right"> <button nz-button (click)="addSiteWan()" class="addListBtn"><i class="anticon anticon-plus" - style="transform: scale(1.2);font-weight: 700;"></i>Add + style="transform: scale(1.2);font-weight: 700;"></i>{{"i18nTextDefine_Add" | translate}} </button> </div> <table class="siteWanTab"> @@ -251,8 +252,8 @@ </div> <div class="action"> - <button nz-button nzType="primary" (click)="addsite_cancel()">Cancel</button> - <button nz-button nzType="primary" (click)="addsite_OK()">Add</button> + <button nz-button nzType="primary" (click)="addsite_cancel()">{{"i18nTextDefine_Cancel" | translate}}</button> + <button nz-button nzType="primary" (click)="addsite_OK()">{{"i18nTextDefine_Add" | translate}}</button> </div> </div> <div class="mask" *ngIf="siteModelShow || sotnVpnModelShow"></div> diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts index 063d609a..258e69d0 100644 --- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts +++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts @@ -17,6 +17,7 @@ import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core'; import * as d3 from 'd3'; import * as $ from 'jquery'; import { MyhttpService } from '../myhttp.service'; +import {el} from "@angular/platform-browser/testing/src/browser_util"; @Component({ selector: 'app-ccvpn-creation', @@ -32,13 +33,12 @@ export class CcvpnCreationComponent implements OnInit { } @Input() createParams; - @Input() namesTranslate; //Input parameter name conversion @Output() closeCreate = new EventEmitter(); //tabBarStyle tabBarStyle = { "height": "58px", - "width": "460px", + "width": "694px", "box-shadow": "none", "margin": "0", "border-radius": "4px 4px 0px 0px" @@ -244,6 +244,12 @@ export class CcvpnCreationComponent implements OnInit { console.log(sotnSdwansitelanData); } deleteSotnSdwansitelan(num, item, sotnSdwansitelanData){ + if(this.sotnSdwansitelanData.length <= 1){ + console.log("num>=1","sotnSdwansitelanData"); + return false; + }else { + + } this.sotnSdwansitelanData = this.sotnSdwansitelanData.filter((d, i) => i !== num - 1); console.log(this.sotnSdwansitelanData) } @@ -275,6 +281,10 @@ export class CcvpnCreationComponent implements OnInit { console.log(siteWanData); } deleteWanPort(num, item, siteWanData){ + if(this.siteWanData.length <= 1){ + console.log("num>=1","siteWanData"); + return false; + } this.siteWanData = this.siteWanData.filter((d, i) => i !== num - 1); console.log(this.siteWanData) } @@ -591,58 +601,14 @@ export class CcvpnCreationComponent implements OnInit { locationConstraints: [ ], }, + resources:[], requestInputs: { - }, - resources:[] + sdwanvpnresource_list:[], + sdwansiteresource_list:[] + } }; - - let sotnbody = this.sotnVpnTableData.map((sotn) => { - let sotninputs = { - resourceIndex: 0, - resourceName:this.templateParameters["sotnvpn"]["info"]["resourceName"], - resourceInvariantUuid: this.templateParameters["sotnvpn"]["info"]["resourceInvariantUuid"], - resourceUuid: this.templateParameters["sotnvpn"]["info"]["resourceUuid"], - resourceCustomizationUuid:this.templateParameters["sotnvpn"]["info"]["resourceCustomizationUuid"], - parameters: { - locationConstraints: [ - ], - resources: [ - ], - requestInputs: {} - } - }; - sotninputs.parameters.requestInputs=Object.assign({}, sotn); - - return sotninputs; - }); - - let sitebody = this.sotnVpnTableData.map((site) => { - let siteinputs = { - resourceIndex: 0, - resourceName:this.templateParameters["site"]["info"]["resourceName"], - resourceInvariantUuid: this.templateParameters["site"]["info"]["resourceInvariantUuid"], - resourceUuid: this.templateParameters["site"]["info"]["resourceUuid"], - resourceCustomizationUuid:this.templateParameters["site"]["info"]["resourceCustomizationUuid"], - parameters: { - locationConstraints: [ - ], - resources: [ - ], - requestInputs: {} - } - }; - siteinputs.parameters.requestInputs=Object.assign({}, site); - - return siteinputs; - }); - - servicebody.resources = sotnbody.concat(sitebody); - servicebody.resources.map((item,index) => { - item.resourceIndex=index; - }); - - console.log(sotnbody); - console.log(sitebody); + servicebody.requestInputs.sdwanvpnresource_list=servicebody.requestInputs.sdwanvpnresource_list.concat(this.sotnVpnTableData); + servicebody.requestInputs.sdwansiteresource_list=servicebody.requestInputs.sdwansiteresource_list.concat(this.siteTableData); console.log(servicebody); this.closeCreate.emit(servicebody); diff --git a/usecaseui-portal/src/app/components/charts/bar/bar.component.ts b/usecaseui-portal/src/app/components/charts/bar/bar.component.ts index ee76dfee..217ee121 100644 --- a/usecaseui-portal/src/app/components/charts/bar/bar.component.ts +++ b/usecaseui-portal/src/app/components/charts/bar/bar.component.ts @@ -33,8 +33,8 @@ export class BarComponent implements OnInit { ngOnInit() { this.initOpts = { renderer: 'canvas', - height: 200, - width: 280, + height: this.initData.height, + width: this.initData.width, }; this.barOption = { @@ -62,6 +62,7 @@ export class BarComponent implements OnInit { updateOption: any; chartDataChange() { this.updateOption = this.chartData; + console.log(this.initData.customer) } chartInit(chart) { this.chartIntance = chart; diff --git a/usecaseui-portal/src/app/components/customer/customer.component.html b/usecaseui-portal/src/app/components/customer/customer.component.html index 9bf6c5ab..5cdd5d99 100644 --- a/usecaseui-portal/src/app/components/customer/customer.component.html +++ b/usecaseui-portal/src/app/components/customer/customer.component.html @@ -14,36 +14,40 @@ limitations under the License. --> <div class="content"> + <div class="chearts"> + <div class="Cu"> + <p> {{"i18nTextDefine_Instance_Count_of_Customer" | translate}} </p> + <app-pie [initData]="CUChartInit" [chartData]="CUChartData"></app-pie> + <div class="legend"></div><span> {{"i18nTextDefine_users" | translate}} </span> + </div> + <div class="type"> + <p> {{"i18nTextDefine_Instance_Count_of_ServiceType" | translate}} </p> + <app-bar [initData]="serviceInit" [chartData]="serviceData"></app-bar> + <div class="footname" style="width: 100%;height: 40px;line-height: 40px;text-align: center;color: #3C4F8C;margin-top: 20px"> + <img src=".assets/images/customerBarUser.png" alt="customerName" style="margin-right: 5px;margin-bottom: 3px;"> + {{this.serviceInit["customer"]}} + </div> + </div> + </div> <div class="customer"> <div class="customer_title"> <div class="customers"> - <span>Customer</span> - <img src="./assets/images/customer04.png" alt="" (click)="this.customeradd = !this.customeradd"> + <span> {{"i18nTextDefine_Customer" | translate}} </span> + <img src="./assets/images/customer04.png" alt="" (click)="this.customeradd = !this.customeradd" style="cursor: pointer"> </div> </div> <div class="customer_detail"> <div class="customer_add" *ngIf="customeradd"> - <input nz-input placeholder="Input customer name" class="customer_name" nzSize="default"> - <button nz-button nzType="primary" class="customer_addbut">Add</button> + <input nz-input placeholder=" {{'i18nTextDefine_Input_customerName' | translate}} " class="customer_name" nzSize="default" [(ngModel)]="addNewCustomer"> + <button nz-button nzType="primary" class="customer_addbut" (click) = "createNewCustomer()">{{"i18nTextDefine_Add" | translate}}</button> </div> <div class="customer_list"> <ul> - <li class="active"><img src="./assets/images/customer05.png" alt=""><span>name</span><i - class="anticon anticon-delete" nzType="info"></i></li> - <li><img src="./assets/images/customer05.png" alt=""><span>name</span><i class="anticon anticon-delete" - nzType="info"></i></li> - <li><img src="./assets/images/customer05.png" alt=""><span>name</span><i class="anticon anticon-delete" - nzType="info"></i></li> - <li><img src="./assets/images/customer05.png" alt=""><span>name</span><i class="anticon anticon-delete" - nzType="info"></i></li> - <li><img src="./assets/images/customer05.png" alt=""><span>name</span><i class="anticon anticon-delete" - nzType="info"></i></li> - <li><img src="./assets/images/customer05.png" alt=""><span>name</span><i class="anticon anticon-delete" - nzType="info"></i></li> - <li><img src="./assets/images/customer05.png" alt=""><span>name</span><i class="anticon anticon-delete" - nzType="info"></i></li> - <li><img src="./assets/images/customer05.png" alt=""><span>name</span><i class="anticon anticon-delete" - nzType="info"></i></li> + <li *ngFor ="let item of AllCustomersdata,let i = index" [ngClass]="{active: chose ==i}" (click)="choseCustomer(i,item)"> + <img src="./assets/images/customer05.png" alt=""> + <span>{{item.name}}</span> + <i class="anticon anticon-delete" nzType="info" (click)="deleteCustomerModel(item)"></i> + </li> </ul> </div> </div> @@ -51,35 +55,56 @@ <div class="services_type"> <div class="services_type_title"> <div class="servicess"> - <span>Services Type</span> - <img src="./assets/images/customer03.png" alt="" (click)="this.servicesadd = !this.servicesadd "> + <span> {{"i18nTextDefine_ServiceType" | translate}} </span> + <img src="./assets/images/customer03.png" alt="" (click)="this.servicesadd = !this.servicesadd " style="cursor: pointer"> </div> </div> <div class="services_type_detail"> <div class="services_add" *ngIf="servicesadd"> - <input nz-input placeholder="Input services type" class="services_name" nzSize="default"> - <button nz-button nzType="primary" class="services_addbut">Add</button> + <input nz-input placeholder=" {{'i18nTextDefine_Input_ServicesType' | translate}} " class="services_name" nzSize="default"> + <button nz-button nzType="primary" class="services_addbut" (click) = "createNewServiceType()">{{"i18nTextDefine_Add" | translate}}</button> </div> <div class="services_list"> + <div class="border_size"></div> <div style="padding:0 20px;"> - <ul> - <li><span>Type1</span><i class="anticon anticon-delete" nzType="info"></i></li> - <li><span>Type2</span><i class="anticon anticon-delete" nzType="info"></i></li> - <li><span>Type3</span><i class="anticon anticon-delete" nzType="info"></i></li> - </ul> + <ul> + <li *ngFor = "let item of AllServiceTypes" > + <span>{{item.type}}</span> + <i class="anticon anticon-delete" nzType="info" (click)="deleteServiceTypeModel(item)"></i> + </li> + </ul> </div> </div> </div> </div> - <div class="chearts"> - <div class="Cu"> - <p>Instance Count of Customer</p> - <app-pie [initData]="CUChartInit" [chartData]="CUChartData"></app-pie> - <div class="legend"></div><span>users</span> + + <nz-modal nzWidth="428" [(nzVisible)]="deleteCustomerModelVisible" nzTitle=" {{'i18nTextDefine_delete' | translate}} " (nzOnCancel)="deleteCustomerCancel()" + (nzOnOk)="deleteCustomerOk()" nzClassName="deleteModel" nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " nzOkText=" {{'i18nTextDefine_modelOk' | translate}} "> + <h3><span style="color: red">* </span> {{"i18nTextDefine_Input_Sure_deleteCustomer" | translate}} </h3> + <div class="question"> + <h4> {{"i18nTextDefine_CustomerName" | translate}} :</h4> + <div class="deleteModelContent">{{thisdeleteCustomer["name"]}}</div> </div> - <div class="type"> - <p>Instance Count of Service Type</p> - <app-bar [initData]="serviceInit" [chartData]="serviceData"></app-bar> + <div class="question"> + <h4> {{"i18nTextDefine_CustomerID" | translate}} :</h4> + <div class="deleteModelContent">{{thisdeleteCustomer["id"]}}</div> </div> - </div> + </nz-modal> + <nz-modal nzWidth="428" [(nzVisible)]="deleteServiceTypeModelVisible" nzTitle=" {{'i18nTextDefine_delete' | translate}} " (nzOnCancel)="deleteServiceTypeCancel()" + (nzOnOk)="deleteServiceTypeOk()" nzClassName="deleteModel deleteServiceTypeModel" nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " nzOkText=" {{'i18nTextDefine_modelOk' | translate}} "> + <h3><span style="color: red">* </span> {{"i18nTextDefine_Input_Sure_deleteServiceType" | translate}} </h3> + <div class="question"> + <h4> {{"i18nTextDefine_CustomerName" | translate}} :</h4> + <div class="deleteModelContent">{{selectCustomer.name}}</div> + </div> + <div class="question"> + <h4> {{"i18nTextDefine_CustomerID" | translate}} :</h4> + <div class="deleteModelContent">{{selectCustomer.id}}</div> + </div> + <div class="question"> + <h4> {{"i18nTextDefine_ServiceType" | translate}} :</h4> + <div class="deleteModelContent">{{thisdeleteServiceType["type"]}}</div> + </div> + </nz-modal> + </div>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/components/customer/customer.component.less b/usecaseui-portal/src/app/components/customer/customer.component.less index f591cc4b..3ad7191e 100644 --- a/usecaseui-portal/src/app/components/customer/customer.component.less +++ b/usecaseui-portal/src/app/components/customer/customer.component.less @@ -15,13 +15,13 @@ */ .content { width: 100%; - height: 100vh; + height: 100%; i.anticon { cursor: pointer; font-size: 18px; padding: 2px; &:hover{ - color: #147dc2; + color: #0DA9E2; } } li.active{ @@ -33,23 +33,24 @@ } } .customer { - height: 580px; - margin-right: 2.5%; + height: 100%; + overflow: hidden; + width: 32%; + margin-right: 1.5%; border-radius: 5px; - width: 31%; background-color: #fff; box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06); display: inline-block; vertical-align: top; .customer_title { line-height: 3.5; - height: 50px; + height: 5%; width: 100%; border-bottom: 1px #07A9E1 solid; .customers { padding: 0 20px; span { - color: #3F9CFF; + color: #0DA9E2; font-family:"ArialMT"; } img { @@ -60,7 +61,7 @@ } } .customer_detail { - height: 535px; + height: 95%; width: 100%; border-top: 1px #07A9E1 solid; .customer_add { @@ -86,12 +87,15 @@ .customer_list { .active { background:linear-gradient(to right, #E5F6FF, #CFEEFA); + color: #3C4F8C; } li { padding: 0 20px; height: 50px; line-height: 3.5; width: 100%; + cursor: pointer; + color: rgba(60,79,140,0.5); img { width: 10%; } @@ -99,7 +103,6 @@ width: 80%; padding-left: 10%; display: inline-block; - color: rgba(60,79,140,0.5); } } } @@ -107,34 +110,35 @@ } .services_type { - height: 580px; - margin-right: 2.5%; + overflow: hidden; + height: 100%; border-radius: 5px; - width: 31%; + width: 32%; background-color: #fff; box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06); display: inline-block; vertical-align: top; .services_type_title { line-height: 3.5; - height: 50px; + height: 5%; width: 100%; border-bottom: 1px #07A9E1 solid; .servicess { padding: 0 20px; span { - color: #3F9CFF; + color: #0DA9E2; font-family:"ArialMT"; } img { width: 50px; float: right; + margin-right: -10px; margin-top: 5px; } } } .services_type_detail { - height: 535px; + height: 95%; width: 100%; border-top: 1px #07A9E1 solid; .services_add { @@ -158,63 +162,81 @@ background-color: #0DA9E2; } } + .services_list { background:linear-gradient(to right, #E5F6FF, #CFEEFA); - height: 530px; - li { - height: 50px; - line-height: 3.5; - width: 100%; - border-bottom: 2px #FFFFFF dashed; - i { - float: right; - clear: both; - padding-top: 17px; + height: 100%; + .border_size{ + position: absolute; + margin-left: -8px; + width: 0; + height: 0; + border-top: 24px solid transparent; + border-bottom: 24px solid transparent; + border-right: 10px solid #E5F6FF; + } + li { + height: 50px; + line-height: 50px; + width: 100%; + vertical-align: middle; + border-bottom: 2px #FFFFFF dashed; + position: relative; + color: #3C4F8C; + i { + display: inline-block; + vertical-align: middle; + position: absolute; + width: 48px; + height: 48px; + top: 0; + right: -16px; + line-height: 46px; + } } } - - } } } .chearts { display: inline-block; - width: 31%; + width: 32%; + margin-right: 1.5%; vertical-align: top; + height: 100%; >div{ padding: 20px 20px; } .Cu { - height: 280px; + height: 48%; width: 100%; - margin-bottom: 20px; + margin-bottom: 7%; margin-right: 2.5%; border-radius: 5px; background-color: #fff; box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06); p { - color :#3F9CFF; + color :#0DA9E2; font-family:"ArialMT"; } .legend { height: 10px; - width: 20px; + width: 10px; display: inline-block; background: linear-gradient(to right,#7DCEFB, #0DA9E2); - border-radius: 1px; + border-radius: 50%; margin: 15px 4px 0 43%; } } .type { - height: 280px; + height: 48%; width: 100%; - margin-bottom: 20px; margin-right: 2.5%; border-radius: 5px; background-color: #fff; box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06); p { - color :#3F9CFF; + color :#0DA9E2; font-family:"ArialMT"; } diff --git a/usecaseui-portal/src/app/components/customer/customer.component.ts b/usecaseui-portal/src/app/components/customer/customer.component.ts index 3008ae02..61e582c6 100644 --- a/usecaseui-portal/src/app/components/customer/customer.component.ts +++ b/usecaseui-portal/src/app/components/customer/customer.component.ts @@ -14,6 +14,7 @@ limitations under the License. */ import { Component, OnInit } from '@angular/core'; +import { ManagemencsService } from '../../managemencs.service'; @Component({ selector: 'app-customer', @@ -21,257 +22,443 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./customer.component.less'] }) export class CustomerComponent implements OnInit { + public chose = ''; + + constructor(private managemencs: ManagemencsService) { } - constructor() { } + ngOnInit() { + this.getAllCustomers(); + } - ngOnInit() { - } - customeradd = false; - servicesadd = false; - //Customer pie - CUChartData: Object; - CUChartInit: Object = { - height: 180, - option: { - color: ["#F2F6FD"], - series: [{ - type: 'pie', - name: "customer", - radius: '90%', - center: ['50%', '53%'], - data: [{ - value: 67, + AllCustomersdata = []; + AllServiceTypes = []; + customerber = []; + // Get all customers + active; + selectCustomer = { + name:null, + id:null + }; + addNewCustomer = null; + addNewServiceType = null; + deleteCustomerModelVisible = false; + deleteServiceTypeModelVisible = false; - }, { - value: 10, + getAllCustomers() { + this.managemencs.getAllCustomers().subscribe((data) => { + this.AllCustomersdata = data.map((item) => { + return {name: item["subscriber-name"], id: item["global-customer-id"]} + }); + this.active = this.selectCustomer = this.AllCustomersdata[0]; + this.serviceInit["customer"] = this.AllCustomersdata[0].name; + this.getCustomersPie(); + this.getServiceTypes(this.active); + this.getCustomersColumn(this.active); + }) - }, { - value: 17, + } - }, { - value: 33, - },], - label: { - normal: { - position: 'center', - show: false, - formatter: ' {b|{b}：{d}%} ', - backgroundColor: 'rgba(51,51,51,0.9)', - borderColor: 'rgba(51,51,51,0.9)', - borderWidth: 1, - borderRadius: 4, - rich: { - b: { - fontSize: 16, - color: '#fff', - lineHeight: 33 - } - } - }, - emphasis: { - show: true, + // Get all servicetype + getServiceTypes(item) { + this.managemencs.getServiceTypes(item).subscribe((data) => { + this.AllServiceTypes = data.map((item) => { + return {type: item["service-type"], id: item["global-customer-id"]} + }); + }) + } - } - }, - itemStyle: { - normal: { - borderWidth: 2, - borderColor: '#ffffff', - }, - emphasis: { - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [{ - offset: 0, color: '#7DCEFB' // 0% 处的颜色 - }, { - offset: 1, color: '#0DA9E2' // 100% 处的颜色 - }], - global: false // 缺省为 false - }, - shadowBlur: 10, - shadowOffsetX: 0, - shadowColor: 'rgba(0, 10, 5, 0)' - } - } - }] + // Switch user data + choseCustomer(index, item) { + this.chose = index; + this.selectCustomer = item; + this.serviceInit["customer"] = this.selectCustomer.name; + this.getServiceTypes(item); + this.getCustomersColumn(item); } - }; - // getHomeAlarmData() { - // this.myhttp.getHomeAlarmData() - // .subscribe((data) => { - // this.alarmChartData = { - // series: [{ - // data: [{ name: "Active", value: data[0] }, { name: "Fixed", value: data[1] }] - // }] - // }; - // }) - // } - // service bar - serviceData: Object; - serviceInit: Object = { - option: { - tooltip: { - show: true, - trigger: 'item', - formatter: "{c}" - }, - grid: { - top: '5%', - left: '5%', - bottom: '3%', - containLabel: true - }, - xAxis: [ - { - type: 'value', - splitLine: { - show: false, - }, - axisTick: { - show: false - }, - axisLine: { - lineStyle: { - color: "#EDEDED" - } - }, - axisLabel: { - color: "#3C4F8C" - } + customeradd = false; + servicesadd = false; + //Customer pie + CUChartData: Object; + CUChartInit: Object = { + height: 200, + option: { + color: ["#F2F6FD"], + series: [{ + type: 'pie', + name: "customer", + radius: '90%', + center: ['50%', '50%'], + data: [], + label: { + normal: { + position: 'center', + show: false, + formatter: ' {b|{b}：{d}%} ', + backgroundColor: 'rgba(51,51,51,0.9)', + borderColor: 'rgba(51,51,51,0.9)', + borderWidth: 1, + borderRadius: 4, + rich: { + b: { + fontSize: 16, + color: '#fff', + lineHeight: 33 + } + } + }, + emphasis: { + show: true, + + } + }, + itemStyle: { + normal: { + borderWidth: 3, + borderColor: '#ffffff', + }, + emphasis: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: '#7DCEFB' + }, { + offset: 1, color: '#0DA9E2' + }], + global: false + }, + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 10, 5, 0)' + } + } + }] } + }; - ], - yAxis: [ - { - type: 'category', - splitLine: { - show: false, - }, - axisTick: { - show: false - }, - axisLine: { - lineStyle: { - color: "#EDEDED" + // get customers chart pie + getCustomersPie() { + this.managemencs.getCustomersPie().subscribe((data) => { + this.CUChartData = { + series: [{ + data: data + }] } - }, - axisLabel: { - color: "#3C4F8C" - }, - data: ['Other', 'Type1', 'Type2', 'Type3', 'Type4'], - }, + console.log(this.CUChartData) + }, (err) => { + console.log(err); + }); + } - ], - series: [ - { - name: '', - barWidth: '40%', - type: 'bar', - data: [2800, 1700, 1200, 1000, 900], - itemStyle: { - normal: { - color: function (params) { - // build a color map as your need. - var colorList = [ - { + // service bar + serviceData: Object; + serviceInit: Object = { + customer: '', + height: 230, + width: 410, + option: { + tooltip: { + show: true, + trigger: 'item', + formatter: "{c}" + }, + grid: { + top: '5%', + left: '5%', + bottom: '3%', + containLabel: true + }, + xAxis: [ + { + type: 'value', + splitLine: { + show: false, + }, + axisTick: { + show: false + }, + axisLine: { + lineStyle: { + color: "#EDEDED" + } + }, + axisLabel: { + color: "#3C4F8C" + } + } + + ], + yAxis: [ + { + type: 'category', + splitLine: { + show: false, + }, + axisTick: { + show: false + }, + axisLine: { + lineStyle: { + color: "#EDEDED" + } + }, + axisLabel: { + color: "#3C4F8C" + }, + data: [], + }, + + ], + series: [ + { + name: '', + barWidth: '40%', type: 'bar', - colorStops: [{ - offset: 0, - color: '#FCCE2B' - }, { - offset: 1, - color: '#FEE956' - }], - globalCoord: false, - }, - { + data: [], + itemStyle: { + normal: { + color: function (params) { + // build a color map as your need. + var colorList = [ + { + type: 'bar', + colorStops: [{ + offset: 0, + color: '#FCCE2B' + }, { + offset: 1, + color: '#FEE956' + }], + globalCoord: false, + }, + { + type: 'bar', + colorStops: [{ + offset: 0, + color: '#F43A59' + }, { + offset: 1, + color: '#FA6C92' + }], + globalCoord: false, + }, + { + type: 'bar', + colorStops: [{ + offset: 0, + color: '#4F5B60' + }, { + offset: 1, + color: '#879499' + }], + globalCoord: false, + }, + { + type: 'bar', + colorStops: [{ + offset: 0, + color: '#31DAC3' + }, { + offset: 1, + color: '#5FEFE3' + }], + globalCoord: false, + }, + { + type: 'bar', + colorStops: [{ + offset: 0, + color: '#999999' + }, { + offset: 1, + color: '#C9C9C9' + }], + globalCoord: false, + } + ]; + return colorList[params.dataIndex] + }, + } + } + }, + { + name: 'Type4', type: 'bar', - colorStops: [{ - offset: 0, - color: '#F43A59' - }, { - offset: 1, - color: '#FA6C92' - }], - globalCoord: false, - }, - { + stack: '', + data: '', + + }, + { + name: 'Type1', type: 'bar', - colorStops: [{ - offset: 0, - color: '#4F5B60' - }, { - offset: 1, - color: '#879499' - }], - globalCoord: false, - }, - { + stack: '', + data: '' + }, + { + name: 'Type2', type: 'bar', - colorStops: [{ - offset: 0, - color: '#31DAC3' - }, { - offset: 1, - color: '#5FEFE3' - }], - globalCoord: false, - }, - { + stack: '', + data: '' + }, + { + name: 'Type3', type: 'bar', - colorStops: [{ - offset: 0, - color: '#999999' - }, { - offset: 1, - color: '#C9C9C9' - }], - globalCoord: false, - } - ]; - return colorList[params.dataIndex] - }, + stack: '', + data: '' + }, + { + name: 'Other', + type: 'bar', + stack: '', + data: '', + + } + ] + } + }; + name_s = []; + value_s = []; + + getCustomersColumn(item) { + this.name_s = []; + this.value_s = []; + this.managemencs.getCustomersColumn(item).subscribe((data) => { + data.forEach((item) => { + this.name_s.push(item.name); + this.value_s.push(item.value); + }) + this.serviceData = { + yAxis: [{ + data: this.name_s + }], + series: [{ + data: this.value_s + }] } - } - }, - { - name: 'Type4', - type: 'bar', - stack: '', - data: 2800, + console.log(this.serviceData) + }) + } - }, - { - name: 'Type1', - type: 'bar', - stack: '', - data: 1700 - }, - { - name: 'Type2', - type: 'bar', - stack: '', - data: 1500 - }, - { - name: 'Type3', - type: 'bar', - stack: '', - data: 1300 - }, - { - name: 'Other', - type: 'bar', - stack: '', - data: 1000, + createNewCustomer() { + let createParams = { + customerId: this.addNewCustomer + }; + this.managemencs.createCustomer(this.addNewCustomer, createParams).subscribe((data) => { + if (data["status"] == 'SUCCESS') { + this.getAllCustomers(); + console.log(data, "Interface returned success") + } else { + console.log(data, "Interface returned error") + } + }) + } - } - ] + // Customer delete model + thisdeleteCustomer={ + name:null, + id:null + }; + deleteCustomerModel(itemCustomer) { + this.thisdeleteCustomer = itemCustomer; + this.deleteCustomerModelVisible = true; + } + deleteCustomerCancel() { + this.deleteCustomerModelVisible = false; + } + deleteCustomerOk() { + this.deleteCustomerModelVisible = false; + this.getCustomerVersion(this.thisdeleteCustomer); + } + getCustomerVersion(thisdeleteCustomer){ + this.managemencs.getdeleteCustomerVersion(thisdeleteCustomer).subscribe((data) => { + if (data["status"] == 'SUCCESS') { + let params = { + customerId:thisdeleteCustomer.id, + version:data["result"]["resource-version"] + }; + this.deleteCustomer(params); + console.log(data, "Interface returned success") + } else { + console.log(data, "Interface returned error") + } + }) + } + deleteCustomer(params){ + this.managemencs.deleteSelectCustomer(params).subscribe((data) => { + if (data["status"] == 'SUCCESS') { + this.getAllCustomers(); + console.log(data, "Interface returned success") + } else { + console.log(data, "Interface returned error") + } + }) + } + + createNewServiceType() { + let createParams = { + customer: this.selectCustomer, + ServiceType:this.addNewServiceType + }; + this.managemencs.createServiceType(createParams).subscribe((data) => { + if (data["status"] == 'SUCCESS') { + this.getCustomersColumn(this.selectCustomer); + console.log(data, "Interface returned success") + } else { + console.log(data, "Interface returned error") + } + }) } - } + + // ServiceType delete model + thisdeleteServiceType={ + type:null + }; + deleteServiceTypeModel(itemServiceType) { + this.thisdeleteServiceType = itemServiceType; + this.deleteServiceTypeModelVisible = true; + } + deleteServiceTypeCancel() { + this.deleteServiceTypeModelVisible = false; + } + deleteServiceTypeOk() { + this.deleteServiceTypeModelVisible = false; + this.getServiceTypeVersion(); + } + getServiceTypeVersion(){ + let params={ + customerId:this.selectCustomer.id, + ServiceType:this.thisdeleteServiceType["type"] + }; + this.managemencs.getdeleteServiceTypeVersion(params).subscribe((data) => { + if (data["status"] == 'SUCCESS') { + let params = { + customerId:this.selectCustomer, + ServiceType:this.thisdeleteServiceType["type"], + version:data["result"]["resource-version"] + }; + this.deleteServiceType(params); + console.log(data, "Interface returned success") + } else { + console.log(data, "Interface returned error") + } + }) + } + deleteServiceType(params){ + this.managemencs.deleteSelectServiceType(params).subscribe((data) => { + if (data["status"] == 'SUCCESS') { + this.getCustomersPie(); + this.getServiceTypes(params.customerId); + this.getCustomersColumn(params.customerId); + console.log(data, "Interface returned success") + } else { + console.log(data, "Interface returned error") + } + }) + } + + } 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 index f1d359f0..5dce6c92 100644 --- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.css +++ b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.css @@ -1,5 +1,5 @@ /* - Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. + 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. 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 index d85eb167..3f642e97 100644 --- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.html +++ b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.html @@ -17,79 +17,29 @@ <div class="model creation-model"> <!-- Create data --> <div class="top-title"> - <h3 class="title fl">{{createParams.commonParams.templateType}} Instance Creation</h3> + <h3 class="title fl">{{createParams.commonParams.templateType}} {{"i18nTextDefine_InstanceCreation" | translate}} </h3> <div class="fl" style="width: 20%"> - <button class="submit" nz-button (click)="submit()"><span>Create</span></button> + <button class="submit" nz-button (click)="submit()"><span> {{"i18nTextDefine_Create" | translate}} </span></button> <button class="back" nz-button (click)="goback()"> <i class="anticon anticon-arrow-left" style="transform: scale(1.5)"></i> </button> </div> </div> + <div class="e2ecreate-content"> <div class="creation fl"> <div *ngIf="createParams.commonParams.templateType=='E2E Service'" class="baseparms clearfix"> <!--2019.02.21 add--> <div class="vnf-box"> - <h3>Base</h3> + <h3> {{"i18nTextDefine_Base" | translate}} </h3> <ul class="clearfix"> <li><span>Name:</span> <input nz-input [(ngModel)]="service.name"></li> <li><span>Description:</span> <input nz-input [(ngModel)]="service.description"></li> <li><span>COS:</span> <input nz-input [(ngModel)]="service.COS"></li> <li><span>EBS:</span> <input nz-input [(ngModel)]="service.EBS"></li> - <li> - <span style="vertical-align: top;margin-top: 3px;">checkbox</span> - <nz-checkbox-wrapper style="width: 100%;" (nzOnChange)="log($event)"> - <div nz-row> - <div nz-col style="margin-bottom: 10px"><label nz-checkbox nzValue="A" - [nzDisabled]="true">Mauris rutrum quam p - </label></div> - <div nz-col><label nz-checkbox nzValue="B" [ngModel]="true">fince in felis nec e - </label></div> - </div> - </nz-checkbox-wrapper> - </li> - </ul> - </div> - <div class="vnf-box"> - <h3>VNF1</h3> - <ul class="clearfix"> - <li><span>Name:</span> <input nz-input></li> - <li><span>Description:</span> <input nz-input></li> - <li> - <span style="vertical-align: top;margin-top: 3px;">radio button</span> - <nz-radio-group [(ngModel)]="radioValue1" nzName="radiogroup"> - <label nz-radio [ngStyle]="{'margin-bottom':'10px'}" nzValue="Selected" [ngModel]="true">Selected</label> - <br> - <label nz-radio [ngStyle]="style" nzValue="Disaled">Disaled</label> - </nz-radio-group> - </li> - <li> - <span>pull down:</span> - <nz-select nzAllowClear [(ngModel)]="selectedValue"> - <nz-option nzValue="Heresanoption" nzLabel="Heresanoption"></nz-option> - <nz-option nzValue="Anotheroption" nzLabel="Anotheroption"></nz-option> - <nz-option nzValue="Thirdoption" nzLabel="Thirdoption"></nz-option> - <nz-option nzValue="Noneoftheabove" nzLabel="Noneoftheabove"></nz-option> - </nz-select> - </li> </ul> </div> - <div class="vnf-box"> - <h3>VNF2</h3> - <ul class="clearfix"> - <li><span>Name:</span> <input nz-input></li> - <li><span>Description:</span> <input nz-input></li> - <li> - <span style="vertical-align: top;margin-top: 3px;" nzName="radiogroup2">radio button</span> - <nz-radio-group [(ngModel)]="radioValue2"> - <label nz-radio [ngStyle]="{'margin-bottom':'10px'}" nzValue="Selected2" [ngModel]="true">Selected2</label> - <br> - <label nz-radio [ngStyle]="style" nzValue="Disaled2">Disaled2</label> - </nz-radio-group> - </li> - </ul> - </div> - <div class="vnf-box"> - <h3>template Inputs</h3> + <div class="vnf-box" *ngIf="templateParameters.inputs.length>0"> + <h3>{{"i18nTextDefine_templateInputs" | translate}}</h3> <ul> <li *ngFor="let parameter of templateParameters.inputs; let i = index;"> <span *ngIf="parameter.type !== 'vf_location' && parameter.type !== 'sdn_controller'">{{parameter.name}}:</span> @@ -108,43 +58,44 @@ </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"> + </div> + <div class="vnf-box" *ngFor="let template of templateParameters.nestedTemplates;"> + <h3>{{template.name}}</h3> + <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> - <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> + <!--<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"> <div class="vnf-box"> - <h3>Base</h3> + <h3> {{"i18nTextDefine_Base" | translate}} </h3> <ul class="clearfix"> <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> </div> - <div class="vnf-box"> - <h3>Template Parameters</h3> - <h4>template Inputs</h4> + <div class="vnf-box" *ngIf="nsTemplateParameters.inputs2.length>0"> + <h4>{{"i18nTextDefine_templateInputs" | translate}}</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> @@ -163,9 +114,9 @@ </nz-select> --> </li> </ul> - + </div> + <div class="vnf-box"> <h4>vnfs Inputs</h4> - <ul> <li *ngFor="let vnf of nsTemplateParameters.vnfs;"> <h5 style="padding-left:10px;">id: {{vnf.vnf_id}}</h5> @@ -178,7 +129,7 @@ </div> </div> </div> - + <div class="dividing-line fl"></div> <!-- chart --> <div class="chart fr"> <div id="createChart"> @@ -189,6 +140,7 @@ </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 index c2b441cd..79e952f4 100644 --- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.less +++ b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.less @@ -79,16 +79,22 @@ hr { /*top:10px;*/ } + .e2ecreate-content{ + position: relative; + width: 98%; + height: 100%; + margin-left: 30px; + box-shadow:0px 10px 15px 2px rgba(222,222,222,0.5); + background: #fff; + border-radius:2px; + } .creation{ 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 { color: #06A7E2; @@ -112,7 +118,6 @@ hr { margin-left: 30px; } ul li { - // display: inline-block; margin: 10px 0; width: 40%; float: left; @@ -132,17 +137,17 @@ hr { } } } + .dividing-line{ + width: 0; + height: 85%; + margin: 4% 0; + border-left: 1px #cccccc dashed; + } .chart { - width: 35%; + width: 38%; padding: 10px; height: 95%; - box-shadow: 0px 10px 35px 10px rgba(222, 222, 222, 0.5); margin-right: 40px; - //background: url("../../../assets/images/ccvpn-createbanner2.png") no-repeat -45px -10px; - //background-size: 110% 110%; - background:linear-gradient(180deg,rgba(183, 230, 247, 1) 0%,rgba(214, 240, 254, 1) 100%); - //background-color: rgba(188, 231, 248, 1); - border-radius: 4px; #createChart{ height: 100%; width: 100%; 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 index 3d2bfc57..d5e1a3a0 100644 --- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts +++ b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts @@ -30,7 +30,6 @@ export class E2eCreationComponent implements OnInit { this.getTemParameters(); this.getVimInfo(); this.getSdnControllers(); - // this.drawImage("e2e"); console.log(this.createParams); } @@ -59,6 +58,23 @@ export class E2eCreationComponent implements OnInit { inputs2:[], vnfs:[] } + 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', + }; getTemParameters(){ //Get template parameters let type = this.createParams.commonParams.templateType == "E2E Service" ? "e2e" : "ns"; this.myhttp.getTemplateParameters(type,this.createParams.template) @@ -70,6 +86,22 @@ export class E2eCreationComponent implements OnInit { this.templateParameters.nestedTemplates.forEach((item)=>{ item.inputs = item.inputs.filter((input)=>{return input.type !== "sdn_controller"}); }) + this.templateParameters.nestedTemplates.map((item,index) => { + let nsIndex={ + "name": "ns", + "type": "ns", + "children": [] + }; + nsIndex.children=item.nestedTemplates.map((item,index) => { + return { + "name": "vnf", + "type": "vnf", + } + }); + this.roote2e.children.push(nsIndex); + }); + console.log(this.templateParameters); + console.log(this.roote2e) }else if(type == "ns"){ if(typeof data["model"]=='string'){ this.nsTemplateParameters = JSON.parse(data["model"]); @@ -81,6 +113,12 @@ export class E2eCreationComponent implements OnInit { for(let key in inputs){ this.nsTemplateParameters["inputs2"].push({name:key,type:inputs[key].type,value:inputs[key].value}) } + this.rootns.children=this.nsTemplateParameters.vnfs.map((item,index) => { + return { + "name": "vnf", + "type": "vnf", + } + }); console.log(this.nsTemplateParameters); } @@ -169,7 +207,8 @@ export class E2eCreationComponent implements OnInit { let location = { vnfProfileId: input.name, locationConstraints:{ - vimId: input.value.name + "_" + input.value.id, + cloudOwner: input.value.name, + cloudRegionId:input.value.id } } nsService.parameters.locationConstraints.push(location); @@ -179,6 +218,7 @@ export class E2eCreationComponent implements OnInit { }) this.service.parameters.resources.push(nsService); }) + console.log(this.service) this.service.parameters.requestInputs['orchestrator'] = this.createParams.orchestrator.name; if(this.createParams.isSol005Interface){ this.service.parameters.requestInputs['isSol005Interface'] = this.createParams.isSol005Interface; @@ -198,7 +238,8 @@ export class E2eCreationComponent implements OnInit { let vnfparams = { vnfProfileId: vnf.properties.id, locationConstraints: { - vimId: vnf.value.name + "_" + vnf.value.id, + cloudOwner: vnf.value.name, + cloudRegionId:vnf.value.id } } this.ns_service2.locationConstraints.push(vnfparams); @@ -217,64 +258,7 @@ export class E2eCreationComponent implements OnInit { this.e2eCloseCreate.emit(); } - roote2e = { - "name": "e2e", - "type": "e2e", - "children": - [ - { - "name": "ns", - "type": "ns", - "children": - [ - { - "name": "vnf", - "type": "vnf", - }, - { - "name": "vnf", - "type": "vnf", - } - ] - }, - { - "name": "ns", - "type": "ns", - "children": - [ - { - "name": "vnf", - "type": "vnf", - }, - { - "name": "vnf", - "type": "vnf", - } - ] - }] - } - - rootns = { - "name": "ns", - "type": "ns", - "children": - [ - { - "name": "vnf", - "type": "vnf", - }, - { - "name": "vnf", - "type": "vnf", - } - ] - } - - imgmap = { - '1': './assets/images/create-e2e.png', - '2': './assets/images/create-ns.png', - '3': './assets/images/create-vnf.png', - }; + drawImage(type) { if (type == "e2e") { @@ -295,7 +279,6 @@ export class E2eCreationComponent implements OnInit { .projection(function (d) { return [d.x-18, d.y+40]; }); - console.log(diagonal) var svg = d3.select("svg"); //marker diff --git a/usecaseui-portal/src/app/fcaps/fcaps.component.html b/usecaseui-portal/src/app/fcaps/fcaps.component.html new file mode 100644 index 00000000..edd2111a --- /dev/null +++ b/usecaseui-portal/src/app/fcaps/fcaps.component.html @@ -0,0 +1,3 @@ +<iframe src="http://172.30.1.80:5601" frameborder="0" style="height:100vh;width:100%;"></iframe> +<!-- <iframe src="http://dl_es:5601/app/kibana#/dashboard/a0db79a0-624e-11e9-88e5-b7b07490dd67?_g=(refreshInterval%3A(pause%3A!f%2Cvalue%3A86400000)%2Ctime%3A(from%3Anow-1y%2Cmode%3Aquick%2Cto%3Anow))" frameborder="0" style="height:100vh;width:100%;"></iframe> --> +<!-- <iframe src="http://dl_es:5601/app/kibana#/dashboard/a0db79a0-624e-11e9-88e5-b7b07490dd67?embed=true&_g=(refreshInterval%3A(pause%3A!f%2Cvalue%3A86400000)%2Ctime%3A(from%3Anow-1y%2Cmode%3Aquick%2Cto%3Anow))" style="height:100vh;width:100%;"></iframe> --> diff --git a/usecaseui-portal/src/app/fcaps/fcaps.component.less b/usecaseui-portal/src/app/fcaps/fcaps.component.less new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/usecaseui-portal/src/app/fcaps/fcaps.component.less diff --git a/usecaseui-portal/src/app/fcaps/fcaps.component.spec.ts b/usecaseui-portal/src/app/fcaps/fcaps.component.spec.ts new file mode 100644 index 00000000..42bdbc0f --- /dev/null +++ b/usecaseui-portal/src/app/fcaps/fcaps.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FcapsComponent } from './fcaps.component'; + +describe('FcapsComponent', () => { + let component: FcapsComponent; + let fixture: ComponentFixture<FcapsComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ FcapsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(FcapsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/fcaps/fcaps.component.ts b/usecaseui-portal/src/app/fcaps/fcaps.component.ts new file mode 100644 index 00000000..7f9ab7f4 --- /dev/null +++ b/usecaseui-portal/src/app/fcaps/fcaps.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-fcaps', + templateUrl: './fcaps.component.html', + styleUrls: ['./fcaps.component.less'] +}) +export class FcapsComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/usecaseui-portal/src/app/home/home.component.html b/usecaseui-portal/src/app/home/home.component.html index 72fe7f3d..34954314 100644 --- a/usecaseui-portal/src/app/home/home.component.html +++ b/usecaseui-portal/src/app/home/home.component.html @@ -17,41 +17,46 @@ <!--<h3 class="title"> {{"Overall trend" | translate}}</h3> <hr> --> <div class="content" style="padding: 20px 20px;"> - <div class="services"> - <h4>{{"SERVICES" | translate}}</h4> - <!-- <h3>{{serviceNumber}} <span>{{"services" | translate}}</span> </h3> - <p>{{serviceNumber}} {{"services has been created" | translate}}</p> --> - <app-pie [initData]="serviceChartInit" [chartData]="serviceChartData"></app-pie> - <div> - <h5> {{serviceNumber}} <span>cutomers and</span> {{serviceNumber}} <span>service intance</span></h5> + <div style="float: left;width:30%;height:96vh"> + <div class="services"> + <h4>{{"i18nTextDefine_SERVICES" | translate}}</h4> + <!-- <h3>{{serviceNumber}} <span>{{"services" | translate}}</span> </h3> + <p>{{serviceNumber}} {{"services has been created" | translate}}</p> --> + <app-pie [initData]="serviceChartInit" [chartData]="serviceChartData"></app-pie> + <div> + <h5><span>{{"i18nTextDefine_Total" | translate}}:</span> {{serviceNumber}} <span>{{"i18nTextDefine_cutomers_and" | translate}}</span> {{serviceNumber}} <span>{{"i18nTextDefine_service_instance" | translate}}</span></h5> + </div> + <p class="tip"> + <a href="#" style="color:#3C4F8C">{{"i18nTextDefine_ViewDetails" | translate}}</a> + </p> </div> - <div class="details"> - <li> <div class="detailstoplin" *ngFor="let item of userdata"> <div>{{item.name}}</div> <div> <app-bar [initData]="serviceBarChartInit" [chartData]="servicesBarChartData"></app-bar></div> <div>{{item.value1}}/{{item.value2}}</div></div> </li> + <div class="PACKAGE" style="height: 37%;margin-top: 3%"> + <h4 style="margin-bottom: 50px">{{"i18nTextDefine_PACKAGE" | translate}}</h4> + <div class="details"> + <li> <div class="detailstoplin" *ngFor="let item of userdata"> <div>{{item.name}}</div> <div> <app-bar [initData]="serviceBarChartInit" [chartData]="servicesBarChartData"></app-bar></div> <div>{{item.value1}}/{{item.value2}}</div></div> </li> + </div> + <p class="tip"> + <a href="#" style="color:#3C4F8C">{{"i18nTextDefine_ViewDetails" | translate}}</a> + </p> </div> - <p class="tip">View Details</p> </div> - <div class="rightcontent"> - <div class="rt-content"> + <div class="rightcontent" style="height: 96vh"> + <div class="rt-content" > <div class="alarm"> - <h4>{{"ALARM" | translate}}</h4> + <h4>{{"i18nTextDefine_ALARM" | translate}}</h4> <app-pie [initData]="alarmChartInit" [chartData]="alarmChartData"></app-pie> + <p class="alarm-name"> {{"i18nTextDefine_VNF_Alarm" | translate}} </p> </div> <div class="poerformance"> - <h4>{{"DEVICES" | translate}}</h4> - <div class="pfVnf"> - <h3 class="pfVnfNum">{{performanceVnfNum}}</h3> - <p>Performance VNF</p> - <img src="./assets/images/VNF.png" alt="VNF"> - </div> - <div class="pfVmPm"> - <h3 class="pfVmPmNum">{{performanceVmNum}}</h3> - <p>Performance VM/PM</p> - <img src="./assets/images/VM.png" alt="VM/PM"> - </div> + <app-pie [initData]="VMAlarmChartInit" [chartData]="VMAlarmChartData"></app-pie> + <p class="alarm-name"> {{"i18nTextDefine_VM_Alarm" | translate}} </p> + <p class="tip"> + <a href="#" style="color:#3C4F8C">{{"i18nTextDefine_ViewDetails" | translate}}</a> + </p> </div> </div> <div class="rb-content"> - <h4>{{"VM PERFORMANCE" | translate}}</h4> + <h4>{{"i18nTextDefine_VM_Performance" | translate}}</h4> <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomRight'"> <button nz-button nz-dropdown><span>{{sourceNameSelected}}</span> <i class="anticon anticon-down"></i></button> <ul nz-menu> diff --git a/usecaseui-portal/src/app/home/home.component.less b/usecaseui-portal/src/app/home/home.component.less index 9684fec7..6d57fbf2 100644 --- a/usecaseui-portal/src/app/home/home.component.less +++ b/usecaseui-portal/src/app/home/home.component.less @@ -25,16 +25,16 @@ // margin-bottom: 20px; // } .content { - .services { - float: left; + .services,.PACKAGE{ background-color: #fff; - width: 30%; - height: 628px; + width: 100%; + height: 60%; border-radius: 5px; padding: 28px 22px; + clear: both; h4 { font: 600 16px/16px "Arial Bold"; - color: #3F9CFF; + color: #0DA9E2; margin-bottom: 20px; } h3 { @@ -46,15 +46,16 @@ } } h5 { - font: 500 16px/16px "ArialMT"; - color:#3F9CFF; + font: 500 18px/18px "ArialMT"; + color:#0DA9E2; margin: -2em 0 1em 0 ; span { - font-size: 12px; + font-size: 14px; font-family: "Arial"; - color:rgba(60,79,140,1); + color:#3C4F8C; } span:first-child { + font-size: 18px; padding: 0 4PX 0 4px; } span:last-child { @@ -105,7 +106,8 @@ color: #3C4F8C; font-size: 16px; float: right; - margin-top: 53px; + margin-top: 20px; + margin-bottom: 0!important; line-height: 35px; border-radius: 5px; } @@ -115,11 +117,10 @@ padding-left: 15px; width: 70%; .rt-content { - height: 220px; + height: 40%; margin-bottom: 18px; .poerformance { - float: left; - margin-left: 2%; + float: left; background-color: #fff; height: 100%; width: 50%; @@ -132,7 +133,7 @@ } h4 { font: 600 16px/16px "Arial Bold"; - color: #3F9CFF; + color: #0DA9E2; margin-bottom: 34px; } @@ -164,26 +165,41 @@ background-color: #fff; height: 100%; width: 48%; - border-radius: 5px; position: relative; padding: 28px 26px; h4 { position: absolute; font: 600 16px/16px "Arial Bold"; - color: #3F9CFF; + color: #0DA9E2; } } + .alarm-name{ + text-align: center; + margin-top: 15px; + } + .tip{ + width: 110px; + background-color: #eceff4; + color: #3C4F8C; + font-size: 16px; + float: right; + margin-top: 20px; + margin-bottom: 0!important; + line-height: 35px; + border-radius: 5px; + text-align: center; + } } .rb-content { - height: 390px; + height: 58%; background-color: #fff; border-radius: 5px; padding: 24px 30px; position: relative; h4 { font: 600 16px/16px "Arial Bold"; - color: #3F9CFF; + color: #0DA9E2; } nz-dropdown { position: absolute; diff --git a/usecaseui-portal/src/app/home/home.component.ts b/usecaseui-portal/src/app/home/home.component.ts index bd4c5176..9bd02941 100644 --- a/usecaseui-portal/src/app/home/home.component.ts +++ b/usecaseui-portal/src/app/home/home.component.ts @@ -16,6 +16,7 @@ import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core'; import { HomesService } from '../homes.service'; import { slideToRight } from '../animates'; +import {TranslateService} from "@ngx-translate/core"; @Component({ selector: 'app-home', @@ -32,7 +33,7 @@ export class HomeComponent implements OnInit { this.getListSortMasters(); this.getSourceNames(); this.getHomeServiceData(); - this.getHomePerformanceData(); + // this.getHomePerformanceData(); this.getHomeAlarmData(); this.getHomeAlarmChartData(); this.getHomeServiceBarData(); @@ -109,15 +110,64 @@ export class HomeComponent implements OnInit { ) } - // performance - performanceVnfNum = 0; - performanceVmNum = 0; - getHomePerformanceData(){ - this.myhttp.getHomePerformanceData() - .subscribe((data)=>{ - this.performanceVnfNum = data.length; - }) - } + // performance + // performanceVnfNum = 0; + // performanceVmNum = 0; + // getHomePerformanceData() { + // this.myhttp.getHomePerformanceData() + // .subscribe((data) => { + // this.performanceVnfNum = data.length; + // }) + // } + + // VM alarm + VMAlarmChartData: Object; + VMAlarmChartInit: Object = { + height: 180, + option: { + color: [ + { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: '#FB93C2' + }, { + offset: 1, color: '#FB7788' + }], + globalCoord: false // + }, { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: '#A6BFE4' + }, { + offset: 1, color: '#7A8BAE' + }], + globalCoord: false + }], + series: [{ + name: "", + radius: ['50%', '70%'], + center: ['50%', '45%'], + label: { + normal: { + show: false, + }, + emphasis: { + show: true, + formatter: '{b}\n{c},{d}%', + color: "#3C4F8C" + } + } + }] + } + }; // alarm bar alarmChartData:Object; @@ -186,10 +236,15 @@ export class HomeComponent implements OnInit { data: [{ name: "Active", value: data[0] }, { name: "Fixed", value: data[1] }] }] }; - }) - } + this.VMAlarmChartData = { + series: [{ + data: [{name: "Active", value: data[0]}, {name: "Fixed", value: data[1]}] + }] + }; + }) + } - // alarm lin + // alarm line alarmLineChartData:Object; alarmLineChartInit:Object = { height:320, @@ -199,9 +254,7 @@ export class HomeComponent implements OnInit { data: ['CPU', 'Memory', 'Disk'] }, xAxis:{ - data:["2018-09-10 ","2018-09-11","2018-09-12","2018-09-13","2018-09-14", - "2018-09-15","2018-09-16","2018-09-17","2018-09-18","2018-09-19", - "2018-09-20","2018-09-21","2018-09-22"] + data:[] }, series : [ { @@ -210,7 +263,7 @@ export class HomeComponent implements OnInit { itemStyle: { color: "#70ACEC" }, - data: [30, 45, 34, 35, 43, 56, 36, 53, 42, 45, 44, 35, 32] + data: [] }, { name: 'Memory', @@ -218,7 +271,7 @@ export class HomeComponent implements OnInit { itemStyle: { color: "#3BCD79" }, - data: [10, 23, 24, 22, 14, 15, 32, 12, 12, 32, 14, 23, 23] + data: [] }, { name: 'Disk', @@ -226,7 +279,7 @@ export class HomeComponent implements OnInit { itemStyle: { color: "#FDC288" }, - data: [20, 23, 14, 12, 34, 25, 22, 42, 52, 35, 34, 13, 13] + data: [] } ] } @@ -235,7 +288,15 @@ export class HomeComponent implements OnInit { // services servicesBarChartData: Object; serviceBarChartInit: Object = { + height: 40, + width: 160, option: { + tooltip:{ + + }, + grid: { + + }, xAxis: { // data: [], type: 'value', @@ -246,6 +307,13 @@ export class HomeComponent implements OnInit { show: false }, }, + yAxis: { + type: 'category', + show: false, + axisTick: { + show: false + } + }, series: [{ type: 'bar', name: 'a', @@ -314,6 +382,7 @@ export class HomeComponent implements OnInit { { data: [Val1 - Val2] }, ] } + console.log(this.servicesBarChartData) }, (err) => { console.log(err); }) diff --git a/usecaseui-portal/src/app/homes.service.ts b/usecaseui-portal/src/app/homes.service.ts index 254408dd..a556a954 100644 --- a/usecaseui-portal/src/app/homes.service.ts +++ b/usecaseui-portal/src/app/homes.service.ts @@ -31,6 +31,7 @@ export class HomesService { home_servicebarData:this.baseUrl + "", sourceNames: this.baseUrl + "/alarm/getSourceNames", listSortMasters:this.baseUrl+"/listSortMasters", + currentLanguage:this.baseUrl+"/ONAPPORTAL/auxapi/languageSetting/user/", } @@ -110,4 +111,9 @@ export class HomesService { getListSortMasters(){ return this.http.get<any>(this.url.listSortMasters); } + //2019.05.08 add + getCurrentLanguage(currentloginId){ + let url=this.url.currentLanguage+currentloginId; + return this.http.get<any>(url); + } } diff --git a/usecaseui-portal/src/app/managemencs.service.ts b/usecaseui-portal/src/app/managemencs.service.ts index 2bf06233..03ddb2e2 100644 --- a/usecaseui-portal/src/app/managemencs.service.ts +++ b/usecaseui-portal/src/app/managemencs.service.ts @@ -1,8 +1,91 @@ import { Injectable } from '@angular/core'; +import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http'; +import { Observable } from 'rxjs/Observable'; +import {baseUrl} from './dataInterface'; + @Injectable() export class ManagemencsService { - constructor() { } + constructor(private http: HttpClient) { } + baseUrl = baseUrl.baseUrl; + + + + + /* line up */ + url = { + customers:this.baseUrl + "/uui-lcm/customers", /* get */ + serviceType:this.baseUrl + "/uui-lcm/customers/"+"*_*"+"/service-subscriptions", /* get */ + CustomersPir:this.baseUrl + "/uui-lcm/serviceNumByCustomer", /* get */ + CustomersColumn:this.baseUrl + "/uui-lcm/serviceNumByServiceType/"+"*_*", /* get */ + createCustomer:this.baseUrl+"/uui-lcm/customers/", /* put */ + createServiceType:this.baseUrl+"/uui-lcm/customers/*_*/service-subscriptions/*+*", /* put */ + getCustomerresourceVersion:this.baseUrl+"/uui-lcm/customers/*_*", /* put */ + deleteCustomer:this.baseUrl+"/uui-lcm/customers?customerId=*_*&resourceVersion=*+*", + getServiceTypeResourceVersion:this.baseUrl+"/uui-lcm/customers/*_*/service-subscriptions/*+*", + deleteServiceType:this.baseUrl+"/uui-lcm/customers/*_*/service-subscriptions/*+*?resourceVersion=*@* ", + }; + + + // Get all customers + getAllCustomers() { + return this.http.get<any>(this.url.customers); + } + // get all servicetype + getServiceTypes(customer) { + let url = this.url.serviceType.replace("*_*", customer.id); + console.log(url) + return this.http.get<any>(url); + } + // get Customer Pir + getCustomersPie(){ + return this.http.get<any>(this.url.CustomersPir); + } + // get Customer ber + getCustomersColumn(customer){ + let url = this.url.CustomersColumn.replace("*_*", customer.id); + return this.http.get<any>(url); + } + // create New Customer + createCustomer(customer, createParams) { + let url = this.url.createCustomer + customer; + // return this.http.get(url, createParams);//location + return this.http.put(url,createParams);//online + } + + createServiceType(createParams) { + let customerId = createParams.customer.id, + ServiceType = createParams.ServiceType; + let url = this.url.createServiceType.replace("*_*", customerId).replace("*+*", ServiceType); + // return this.http.get(url,createParams);//location + return this.http.put(url, createParams);//online + } + + getdeleteCustomerVersion(thisdeleteCustomer) { + let url = this.url.getCustomerresourceVersion.replace("*_*", thisdeleteCustomer.id); + return this.http.get(url); + } + + deleteSelectCustomer(params) { + let customerId = params.customerId, + version = params.version; + let url = this.url.deleteCustomer.replace("*_*", customerId).replace("*+*", version); + return this.http.delete(url); + } + + getdeleteServiceTypeVersion(params) { + let customerId = params.customerId.id, + ServiceType = params.ServiceType; + let url = this.url.getServiceTypeResourceVersion.replace("*_*", customerId).replace("*+*", ServiceType); + return this.http.get(url); + } + deleteSelectServiceType(params) { + let customerId = params.customerId.id, + ServiceType = params.ServiceType, + version = params.version; + let url = this.url.deleteServiceType.replace("*_*", customerId).replace("*+*", ServiceType).replace("*@*", version); + return this.http.delete(url); + } } diff --git a/usecaseui-portal/src/app/management/management.component.html b/usecaseui-portal/src/app/management/management.component.html index ef8c8435..8cfccfd3 100644 --- a/usecaseui-portal/src/app/management/management.component.html +++ b/usecaseui-portal/src/app/management/management.component.html @@ -13,22 +13,24 @@ See the License for the specific language governing permissions and limitations under the License. --> -<div class="content" style="padding: 20px 20px;"> - <div class="management" [@showHideAnimate]="show" > +<div class="content" style="padding: 20px 20px;height: 100vh"> + <div class="management" *ngIf="nocuster" > <div class="title"> - <p>Create initial customer</p> - <span>Customer has not been created in ONAP </span> - <span>please create customer and its service type</span> - <img src="../../assets/images/customer01.png" alt=""> - <input nz-input placeholder="input customer name" nzSize="large"> - <button nz-button nzType="primary" class="cancel">Cancel</button> - <button nz-button nzType="primary" class="add" (click) = "customerhide()">Add</button> + <p> {{"i18nTextDefine_Create_initial_customer" | translate}} </p> + <span> {{"i18nTextDefine_Customer_not_in_ONAP" | translate}} </span> + <span> {{"i18nTextDefine_createCustomer&serviceType" | translate}} </span> + <img src="./assets/images/customer01.png" alt=""> + <input nz-input placeholder=" {{'i18nTextDefine_input_customerName' | translate}} " nzSize="large" style="height: 50px" [(ngModel)]="firstCustomer"> + <div class="action"> + <button nz-button nzType="primary" class="cancel" (click) = "clearCustomerInput()"> {{"i18nTextDefine_Cancel" | translate}} </button> + <button nz-button nzType="primary" class="add" (click) = "createNewCustomer(firstCustomer)"> {{"i18nTextDefine_Add" | translate}} </button> + </div> </div> <div class="image"> - <img src="../../assets/images/customer02.png" alt=""> + <img src="./assets/images/customer02.png" alt=""> </div> </div> - <div [@showHideAnimate]="hide"> + <div *ngIf="!nocuster" style="height: 100%"> <app-customer></app-customer> </div> </div> diff --git a/usecaseui-portal/src/app/management/management.component.less b/usecaseui-portal/src/app/management/management.component.less index 4b4a0ab5..5a3a0f42 100644 --- a/usecaseui-portal/src/app/management/management.component.less +++ b/usecaseui-portal/src/app/management/management.component.less @@ -34,26 +34,33 @@ img { padding-top: 8%; width: 55%; - margin-left: 18%; + margin-left: 20%; margin-bottom: 5%; } input { width: 50%; - margin-left: 20%; + margin: 0 auto; margin-bottom: 5%; display: block; + + } + .action{ + width: 50%; + height: 40px; + margin: 0 auto; + } + .action button{ + width: 40%; + height: 40px; + margin: 0 4%; } .cancel{ background-color: #eee; border-color: #eee; color: #9DA7C5; - width: 80px; - margin-left: 25%; - margin-right: 2%; } .add { color: #fff; - width: 80px; background:linear-gradient(310deg,rgba(30,158,255,1) 0%,rgba(99,200,255,1) 100%); border-color: #1890ff; } diff --git a/usecaseui-portal/src/app/management/management.component.ts b/usecaseui-portal/src/app/management/management.component.ts index 5cc6be7b..0a5bfd2e 100644 --- a/usecaseui-portal/src/app/management/management.component.ts +++ b/usecaseui-portal/src/app/management/management.component.ts @@ -15,6 +15,7 @@ */ import { Component, OnInit , HostBinding} from '@angular/core'; import { showHideAnimate, slideToRight } from '../animates'; +import { ManagemencsService } from '../managemencs.service'; @Component({ selector: 'app-management', @@ -27,23 +28,41 @@ import { showHideAnimate, slideToRight } from '../animates'; export class ManagementComponent implements OnInit { @HostBinding('@routerAnimate') routerAnimateState; //Routing animation - constructor() { } + constructor(private managemencs: ManagemencsService) { } ngOnInit() { + this.getAllCustomers(); } - show = "show"; - hide = "hide"; - custerhide = false; - customershow(){ - this.show = "show"; - this.hide = "hide"; - this.custerhide = true; - } - customerhide(){ - this.show = "hide"; - this.hide = "show"; - this.custerhide = false; - } + nocuster = true; + firstCustomer = null; + AllCustomersdata = []; + + // Get all customers + getAllCustomers() { + this.managemencs.getAllCustomers().subscribe((data) => { + if (data.length > 0) { + this.nocuster = false; + } else { + this.nocuster = true; + } + }) + } + createNewCustomer(customer) { + let createParams = { + customerId: customer + }; + this.managemencs.createCustomer(customer, createParams).subscribe((data) => { + if (data["status"] == 'SUCCESS') { + this.nocuster = false; + } else { + this.nocuster = true; + console.log(data, "Interface returned error") + } + }) + } + clearCustomerInput(){ + this.firstCustomer=null; + } } diff --git a/usecaseui-portal/src/app/myhttp.service.ts b/usecaseui-portal/src/app/myhttp.service.ts index 71c0232b..58fc7034 100644 --- a/usecaseui-portal/src/app/myhttp.service.ts +++ b/usecaseui-portal/src/app/myhttp.service.ts @@ -102,7 +102,7 @@ export class MyhttpService { return this.http.post<any>(this.url.nstemplateParameters, body); } let body = { - csarId: template.id, + csarId: template.uuid, packageType: "", inputs: "" }; diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html index b4812924..c27a9353 100644 --- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html +++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html @@ -24,7 +24,7 @@ <p class="ant-upload-drag-icon"> <i nz-icon type="inbox" class="anticon anticon-inbox"></i> </p> - <p class="ant-upload-text">Click or drag CSAR File here</p> + <p class="ant-upload-text"> {{"i18nTextDefine_Click_CSAR_File" | translate}} </p> <p class="ant-upload-hint"></p> </nz-upload> <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileListNS.length == 0" @@ -35,7 +35,7 @@ <div class="listlin"></div> <div class="listfile"> <div> - <div style="color: #42548F;font-family:ArialMT;padding-bottom: 15px;">Uploaded files</div> + <div style="color: #42548F;font-family:ArialMT;padding-bottom: 15px;"> {{"i18nTextDefine_Uploaded_files" | translate}} </div> <div class="listfilebgc"> <div>111</div> <div class="color">pnf-test.csar</div> @@ -55,19 +55,19 @@ <div class="listfilebgc"> <div>111</div> <div>pnf-test.csar</div> - <div class="color">File upload completed</div> + <div class="color">{{"i18nTextDefine_File_upload_completed" | translate}}</div> <div>456</div> </div> <div class="listfilebgc"> <div>111</div> <div>pnf-test.csar</div> - <div class="color">File upload completed</div> + <div class="color">{{"i18nTextDefine_File_upload_completed" | translate}}</div> <div>456</div> </div> <div class="listfilebgc"> <div>111</div> <div class="color">pnf-test.csar</div> - <div>File upload completed</div> + <div>{{"i18nTextDefine_File_upload_completed" | translate}}</div> <div>456</div> </div> </div> @@ -80,13 +80,13 @@ [(nzPageIndex)]='nspageIndex' [nzLoading]="loading" nzSize="middle"> <thead (nzSortChange)="sort($event)" nzSingleSort> <tr> - <th nzWidth="15%">NO</th> - <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th> - <th nzWidth="15%">Version</th> - <th nzWidth="15%">Onboarding State</th> - <th nzWidth="15%">Operational State</th> - <th nzWidth="10%">Usage State</th> - <th nzWidth="15%">Operation button</th> + <th nzWidth="15%"> {{"i18nTextDefine_NO" | translate}} </th> + <th nzWidth="15%" nzShowSort nzSortKey="name"> {{"i18nTextDefine_Name" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_Version" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_OnboardingState" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_OperationalState" | translate}} </th> + <th nzWidth="10%"> {{"i18nTextDefine_UsageState" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_Operationbutton" | translate}} </th> </tr> </thead> <tbody> @@ -121,15 +121,15 @@ <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" *ngIf="item.id"></i> <!--<span *ngIf="item.id" [ngClass]="{'fileIcon':OnboardFile == 'disNone'}">--> - <span *ngIf="item.id && item.sameid == undefined"> - <nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload"> - <i class="anticon anticon-file" type="upload" (click)="onClickId(item.id,tab)"></i> - </nz-upload> - <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileList.length == 0" - style="margin-top: 16px" *ngIf="item.id==nsdInfoId"> - {{ nsuploading ? 'Uploading' : 'Start Upload' }} - </button> - </span> + <!--<span *ngIf="item.id && item.sameid == undefined">--> + <!--<nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload">--> + <!--<i class="anticon anticon-file" type="upload" (click)="onClickId(item.id,tab)"></i>--> + <!--</nz-upload>--> + <!--<button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileList.length == 0"--> + <!--style="margin-top: 16px" *ngIf="item.id==nsdInfoId">--> + <!--{{ nsuploading ? 'Uploading' : 'Start Upload' }}--> + <!--</button>--> + <!--</span>--> </td> </tr> @@ -181,19 +181,19 @@ <div class="listfilebgc"> <div>111</div> <div>pnf-test.csar</div> - <div class="color">File upload completed</div> + <div class="color">{{"i18nTextDefine_File_upload_completed" | translate}}</div> <div>456</div> </div> <div class="listfilebgc"> <div>111</div> <div>pnf-test.csar</div> - <div class="color">File upload completed</div> + <div class="color">{{"i18nTextDefine_File_upload_completed" | translate}}</div> <div>456</div> </div> <div class="listfilebgc"> <div>111</div> <div class="color">pnf-test.csar</div> - <div>File upload completed</div> + <div>{{"i18nTextDefine_File_upload_completed" | translate}}</div> <div>456</div> </div> </div> @@ -205,13 +205,13 @@ [(nzPageIndex)]='vnfpageIndex' [nzLoading]="loading" nzSize="middle"> <thead (nzSortChange)="sort($event)" nzSingleSort> <tr> - <th nzWidth="15%">NO</th> - <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th> - <th nzWidth="15%">Version</th> - <th nzWidth="15%">Onboarding State</th> - <th nzWidth="15%">Operational State</th> - <th nzWidth="10%">Usage State</th> - <th nzWidth="15%">Operation button</th> + <th nzWidth="15%"> {{"i18nTextDefine_NO" | translate}} </th> + <th nzWidth="15%" nzShowSort nzSortKey="name"> {{"i18nTextDefine_Name" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_Version" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_OnboardingState" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_OperationalState" | translate}} </th> + <th nzWidth="10%"> {{"i18nTextDefine_UsageState" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_Operationbutton" | translate}} </th> </tr> </thead> <tbody> @@ -233,20 +233,20 @@ *ngIf="item.uuid"></i> <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" *ngIf="item.id"></i> - <span *ngIf="item.id && item.sameid == undefined"> - <nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload"> - <!-- <button nz-button> --> - <i class="anticon anticon-file" type="upload" (click)="onClickId(item.id,tab)"></i> - <!-- <span >upload</span> --> - <!-- </button> --> + <!--<span *ngIf="item.id && item.sameid == undefined">--> + <!--<nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload">--> + <!--<!– <button nz-button> –>--> + <!--<i class="anticon anticon-file" type="upload" (click)="onClickId(item.id,tab)"></i>--> + <!--<!– <span >upload</span> –>--> + <!--<!– </button> –>--> - </nz-upload> - <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileList.length == 0" - style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;" - *ngIf="item.id==vnfPkgId"> - {{ nsuploading ? 'Uploading' : 'Start Upload' }} - </button> - </span> + <!--</nz-upload>--> + <!--<button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileList.length == 0"--> + <!--style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;"--> + <!--*ngIf="item.id==vnfPkgId">--> + <!--{{ nsuploading ? 'Uploading' : 'Start Upload' }}--> + <!--</button>--> + <!--</span>--> </td> </tr> </tbody> @@ -293,19 +293,19 @@ <div class="listfilebgc"> <div>111</div> <div>pnf-test.csar</div> - <div class="color">File upload completed</div> + <div class="color">{{"i18nTextDefine_File_upload_completed" | translate}}</div> <div>456</div> </div> <div class="listfilebgc"> <div>111</div> <div>pnf-test.csar</div> - <div class="color">File upload completed</div> + <div class="color">{{"i18nTextDefine_File_upload_completed" | translate}}</div> <div>456</div> </div> <div class="listfilebgc"> <div>111</div> <div class="color">pnf-test.csar</div> - <div>File upload completed</div> + <div>{{"i18nTextDefine_File_upload_completed" | translate}}</div> <div>456</div> </div> </div> @@ -317,12 +317,13 @@ [(nzPageIndex)]='pnfpageIndex' [nzLoading]="loading" nzSize="middle"> <thead (nzSortChange)="sort($event)" nzSingleSort> <tr> - <th nzWidth="15%">NO</th> - <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th> - <th nzWidth="15%">Version</th> - <th nzWidth="15%">Onboarding State</th> - <th nzWidth="10%">Usage State</th> - <th nzWidth="15%">Operation button</th> + <th nzWidth="15%"> {{"i18nTextDefine_NO" | translate}} </th> + <th nzWidth="15%" nzShowSort nzSortKey="name"> {{"i18nTextDefine_Name" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_Version" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_OnboardingState" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_OperationalState" | translate}} </th> + <th nzWidth="10%"> {{"i18nTextDefine_UsageState" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_Operationbutton" | translate}} </th> </tr> </thead> <tbody> @@ -334,16 +335,16 @@ <td>{{item.pnfdUsageState}}</td> <td> <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)"></i> - <span *ngIf="item.id" [ngClass]="{'fileIcon':OnboardFile == 'disNone'}"> - <nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload"> - <i class="anticon anticon-file" type="upload" (click)="onClickId(item.id,tab)"></i> - </nz-upload> - <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileList.length == 0" - style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;" - *ngIf="item.id==vnfPkgId"> - {{ nsuploading ? 'Uploading' : 'Start Upload' }} - </button> - </span> + <!--<span *ngIf="item.id" [ngClass]="{'fileIcon':OnboardFile == 'disNone'}">--> + <!--<nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload">--> + <!--<i class="anticon anticon-file" type="upload" (click)="onClickId(item.id,tab)"></i>--> + <!--</nz-upload>--> + <!--<button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileList.length == 0"--> + <!--style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;"--> + <!--*ngIf="item.id==vnfPkgId">--> + <!--{{ nsuploading ? 'Uploading' : 'Start Upload' }}--> + <!--</button>--> + <!--</span>--> </td> </tr> </tbody> diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts index 75d39eb5..a10996de 100644 --- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts +++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts @@ -52,9 +52,9 @@ export class OnboardVnfVmComponent implements OnInit { //url url = { // line up - ns: '/api/nsd/v1/ns_descriptors/'+this.nsdInfoId +'/nsd_content', - vnf: '/api/vnfpkgm/v1/vnf_packages/'+this.vnfPkgId+'/package_content', - pnf: '/api/nsd/v1/pnf_descriptors/'+this.pnfdInfoId+'/pnfd_content' + ns: '/api/nsd/v1/ns_descriptors/*_*/nsd_content', + vnf: '/api/vnfpkgm/v1/vnf_packages/*_*/package_content', + pnf: '/api/nsd/v1/pnf_descriptors/*_*/pnfd_content' // line local //ns: 'https://jsonplaceholder.typicode.com/posts/', //vnf: 'https://jsonplaceholder.typicode.com/posts/', @@ -209,20 +209,21 @@ export class OnboardVnfVmComponent implements OnInit { switch (tab) { case 'NS': console.log(this.nsdInfoId); + console.log(this.url.ns.replace("*_*",this.nsdInfoId)); // this.handleUpload('/api/nsd/v1/ns_descriptors/'+this.nsdInfoId+'/nsd_content',tab); - this.handleUpload(this.url.ns, tab); + this.handleUpload(this.url.ns.replace("*_*",this.nsdInfoId), tab); this.getTableData(); break case 'VNF': console.log(this.vnfPkgId); // this.handleUpload('/api/vnfpkgm/v1/vnf_packages/'+this.vnfPkgId+'/package_content',tab); - this.handleUpload(this.url.vnf, tab); + this.handleUpload(this.url.vnf.replace("*_*",this.vnfPkgId), tab); this.getTableVnfData() break case 'PNF': console.log(this.pnfdInfoId); // this.handleUpload('/api/nsd/v1/pnf_descriptors/'+this.pnfdInfoId+'/pnfd_content',tab); - this.handleUpload(this.url.pnf, tab); + this.handleUpload(this.url.pnf.replace("*_*",this.pnfdInfoId), tab); this.getTablePnfData(); break } @@ -272,8 +273,7 @@ export class OnboardVnfVmComponent implements OnInit { this.fileListNS = []; this.fileListVNF = []; this.fileListPNF = []; - this.http - .request(req) + this.http.request(req) .pipe(filter(e => e instanceof HttpResponse)) .subscribe( (event: {}) => { 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 f3378d03..24b2af67 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 @@ -15,7 +15,7 @@ --> <div class="action ant-tabs-bar"> - <span><i style="margin-right: 10px"><img src="../../../assets/images/customer.png" alt=""></i>Customer: </span> + <span><i style="margin-right: 10px"><img src="assets/images/customer.png" alt=""></i> {{"i18nTextDefine_Customer" | translate}} : </span> <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'"> <button nz-button nz-dropdown><span>{{customerSelected.name}}</span> <i class="anticon anticon-down"></i> </button> @@ -26,7 +26,7 @@ </ul> </nz-dropdown> - <span style="margin-left:40px"><i style="margin-right: 10px"><img src="../../../assets/images/service-type.png" alt=""></i>Service Type: </span> + <span style="margin-left:40px"><i style="margin-right: 10px"><img src="assets/images/service-type.png" alt=""></i> {{"i18nTextDefine_ServiceType" | translate}} : </span> <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'"> <button nz-button nz-dropdown><span>{{serviceTypeSelected.name}}</span> <i class="anticon anticon-down"></i> </button> @@ -38,26 +38,24 @@ </nz-dropdown> <button class="create" nz-button [nzType]="'primary'" (click)="createModal()"><i - class="anticon anticon-plus" style="transform: scale(1.5);line-height: 15px;margin-right: 5px;"></i><span> Create </span> + class="anticon anticon-plus" style="transform: scale(1.5);line-height: 15px;margin-right: 5px;"></i><span> {{"i18nTextDefine_Create" | translate}} </span> </button> - <nz-modal nzWidth="428" [(nzVisible)]="isVisible" nzTitle="Service Creation" (nzOnCancel)="handleCancel()" - (nzOnOk)="handleOk()" nzClassName="serviceCreationModel"> + <nz-modal nzWidth="428" [(nzVisible)]="isVisible" nzTitle=" {{'i18nTextDefine_ServiceCreation' | translate}} " (nzOnCancel)="handleCancel()" + (nzOnOk)="handleOk()" nzClassName="serviceCreationModel" nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " nzOkText=" {{'i18nTextDefine_modelOk' | translate}} "> <div class="select-list"> - <span style="display:inline-block;">CUSTOMER: </span> - - + <span style="display:inline-block;"> {{"i18nTextDefine_Customer" | translate}} : </span> <nz-select style="width: 176px;float: right;" [(ngModel)]="customerSelected2.name" nzAllowClear (ngModelChange)="customerChange()"> <nz-option *ngFor="let item of customerList2" [nzValue]="item.name" [nzLabel]="item.name"></nz-option> </nz-select> </div> - <div class="select-list"> - <span style="display:inline-block;">SERVICE TYPE: </span> + <div class="select-list"> + <span style="display:inline-block;"> {{"i18nTextDefine_ServiceType" | translate}} : </span> <nz-select style="width: 176px;float: right;" [(ngModel)]="serviceTypeSelectedName" nzAllowClear> <nz-option *ngFor="let item of serviceTypeList2" [nzValue]="item.name" [nzLabel]="item.name" ></nz-option> </nz-select> </div> - <div class="select-list"> - <span style="display:inline-block;">Use Case: </span> + <div class="select-list"> + <span style="display:inline-block;"> {{"i18nTextDefine_UseCase" | translate}} : </span> <nz-select style="width: 176px;float: right;" [(ngModel)]="templateTypeSelected" nzAllowClear (ngModelChange)="choseTemplateType()"> <!-- <nz-option *ngFor="let item of templateType" [nzValue]="item" [nzLabel]="item"></nz-option> --> @@ -67,15 +65,16 @@ <nz-option nzValue="Network Service" nzLabel="Network Service"></nz-option> </nz-select> </div> - <div class="select-list"> - <span style="display:inline-block;width:70px;">TEMPLATE: </span> + + <div class="select-list"> + <span style="display:inline-block;width:70px;"> {{"i18nTextDefine_Template" | translate}} : </span> <nz-select style="width: 176px;float: right;" [(ngModel)]="template1" nzAllowClear> <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option> </nz-select> </div> <div *ngIf="templateTypeSelected == 'E2E Service'"> <div class="select-list"> - <span style="display:inline-block;width:70px;">Orchestrator: </span> + <span style="display:inline-block;width:70px;"> {{"i18nTextDefine_Orchestrator" | translate}} : </span> <nz-select style="width: 176px;float: right;" [(ngModel)]="orchestratorSelected" nzAllowClear> <nz-option *ngFor="let item of orchestratorList" [nzValue]="item" [nzLabel]="item.name"></nz-option> </nz-select> @@ -94,8 +93,19 @@ <li *ngFor="let item of serviceMunber" class="top-list"> <span class="round">{{item.serviceDomain}}</span> <div class="top-list-text"> - <span>{{item.number}}</span><br> - <span>{{item.detailName}}</span> + <p> + <span>{{item.failed}}</span> + <span> {{"i18nTextDefine_Failed" | translate}} </span> + </p> + <p> + <span>{{item.Success}}</span> + <span> {{"i18nTextDefine_Success" | translate}} </span> + </p> + <p> + <span>{{item.InProgress}}</span> + <span> {{"i18nTextDefine_InProgress" | translate}} </span> + </p> + <p class="service-description"> {{item.detailName | translate}} </p> </div> </li> </ul> @@ -116,13 +126,13 @@ (nzPageSizeChange)="searchData(true)"> <thead> <tr> - <th nzWidth="5%">NO</th> + <th nzWidth="5%"> {{"i18nTextDefine_NO" | translate}} </th> <th nzWidth="5%"></th> - <th nzWidth="20%">Name</th> - <th nzWidth="20%">Description</th> - <th nzWidth="15%">Use Case</th> - <th nzWidth="20%">Status</th> - <th nzWidth="15%">Action</th> + <th nzWidth="20%"> {{"i18nTextDefine_Name" | translate}} </th> + <th nzWidth="20%"> {{"i18nTextDefine_Description" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_UseCase" | translate}} </th> + <th nzWidth="20%"> {{"i18nTextDefine_Status" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_Action" | translate}} </th> </tr> </thead> <tbody> @@ -156,13 +166,13 @@ <li> <i [ngClass]="{'cannotclick':data.serviceDomain!='E2E Service' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}" class="anticon anticon-setting" (click)="scaleService(data)"></i> - <span>scale</span> + <span> {{"i18nTextDefine_Scale" | translate}} </span> + </li> + <li> + <i [ngClass]="{'cannotclick':data.serviceDomain!='CCVPN' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}" + class="anticon anticon-cloud-upload-o" (click)="update(data)"></i> + <span> {{"i18nTextDefine_Update" | translate}} </span> </li> - <li> - <i [ngClass]="{'cannotclick':data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}" - class="anticon anticon-cloud-upload-o" (click)="update(data)"></i> - <span>update</span> - </li> </ul> <!-- <i *ngIf="data.serviceDomain=='E2E Service'||data.serviceDomain=='Network Service' " class="anticon anticon-cloud-upload-o" (click)="updataService(data)"></i> --> <!-- <i [ngClass]="{'cannotclick':data.status == 'processing'||data.status=='Deleting'||data.status=='Creating'||data.status=='Healing'}" @@ -180,8 +190,8 @@ </p> </td> <td> - <span [ngClass]="{'healing':data.statusClass=='1004'}">{{data.tips}}</span> - <nz-progress *ngIf=" item.status == 'Healing' " [nzPercent]="item.rate"></nz-progress> + <span [ngClass]="{'healing':data.statusClass=='1004'}">{{item.tips}}</span> + <nz-progress *ngIf=" item.status == 'In Progress' " [nzPercent]="item.rate"></nz-progress> </td> <td> <i [ngClass]="{'cannotclick':data.serviceDomain!='Network Service' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}" @@ -192,76 +202,145 @@ </tbody> </nz-table> - <nz-modal nzWidth="428" [nzVisible]="scaleModelVisible" nzTitle="Scale" (nzOnCancel)="scaleCancel()" - (nzOnOk)="scaleOk()" nzClassName="scaleModel"> - <h3><span style="color: red">* </span>Are you sure Scale this instance?</h3> + <nz-modal nzWidth="428" [nzVisible]="scaleModelVisible" nzTitle=" {{'i18nTextDefine_Scale' | translate}} " + (nzOnCancel)="scaleCancel()" + (nzOnOk)="scaleOk(templatescalestarting,templateScaleSuccessFaild)" nzClassName="scaleModel" nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " + nzOkText=" {{'i18nTextDefine_modelOk' | translate}} "> + <h3><span style="color: red">* </span> {{"i18nTextDefine_SureScale" | translate}} </h3> <div class="question"> - <h4>Instance ID:</h4> - <div class="scaleModelContent" style="width: 100%">{{ thisService["service-instance-id"] || thisService["nsInstanceId"] || - thisService["vnfInstanceId"]}}</div> + <h4> {{"i18nTextDefine_InstanceID" | translate}} :</h4> + <div class="scaleModelContent" style="width: 100%">{{ thisService["service-instance-id"] || + thisService["nsInstanceId"] || + thisService["vnfInstanceId"]}} + </div> </div> <div *ngFor="let item of e2e_nsData" style="margin-top: 20px"> <h3>{{ item.netWorkServiceName }}</h3> <div class="e2eScaleContent"> - <span class="e2eScaleLable">Scale Type:</span> + <span class="e2eScaleLable"> {{"i18nTextDefine_ScaleType" | translate}} :</span> <nz-select style="width: 165px;" [(ngModel)]="item.scaleType"> <nz-option nzValue="SCALE_NS" nzLabel="SCALE_NS"></nz-option> <nz-option nzValue="SCALE_VNF" nzLabel="SCALE_VNF"></nz-option> </nz-select> </div> <div class="e2eScaleContent"> - <span class="e2eScaleLable">AspectId:</span> + <span class="e2eScaleLable"> {{"i18nTextDefine_AspectId" | translate}} :</span> <input style="width: 165px;" nz-input [(ngModel)]="item.aspectId" placeholder="string"> </div> <div class="e2eScaleContent"> - <span class="e2eScaleLable">Number Of Steps:</span> + <span class="e2eScaleLable"> {{"i18nTextDefine_Number_Of_Steps" | translate}} :</span> <nz-input-number style="width: 165px;" [(ngModel)]="item.numberOfSteps" [nzMin]="1" [nzMax]="100" nzPrecision=0 [nzStep]="1" nzPlaceHolder="number"></nz-input-number> </div> <div class="e2eScaleContent"> - <span class="e2eScaleLable" >Scaling Direction:</span> + <span class="e2eScaleLable" > {{"i18nTextDefine_ScalingDirection" | translate}} :</span> <nz-select style="width: 165px;" nzPlaceHolder="Chose" [(ngModel)]="item.scalingDirection"> <nz-option nzValue="SCALE_IN" nzLabel="SCALE_IN"></nz-option> <nz-option nzValue="SCALE_OUT" nzLabel="SCALE_OUT"></nz-option> </nz-select> </div> </div> + <!--2019.05.09 add Scale notification--> + <ng-template #templatescalestarting > + <div class="ant-notification-notice-content"> + <div class="ant-notification-notice-with-icon"> + <span class="ant-notification-notice-icon"> + <img src="assets/images/execute-inproess.png" alt="instance temination is starting"> + </span> + <div class="ant-notification-notice-message">E2E {{"i18nTextDefine_InstanceTeminationStarting" | translate}}</div> + <div class="ant-notification-notice-description"> + <div class="notificationlist"> + <p> {{"i18nTextDefine_InstanceName" | translate}} :</p> + <span>{{ thisService["service-instance-name"] || + thisService["nsInstanceName"] }} + </span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_Customer" | translate}} :</p> + <span>{{ customerSelected.name }}</span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_UseCase" | translate}} :</p> + <span>{{ thisService["serviceDomain"] }}</span> + </div> + </div> + </div> + </div> + </ng-template> </nz-modal> - <nz-modal nzWidth="428" [(nzVisible)]="deleteModelVisible" nzTitle="Delete" (nzOnCancel)="deleteCancel()" - (nzOnOk)="deleteOk()" nzClassName="{{thisService['serviceDomain'] == 'Network Service'?'nsdeleteModel':'deleteModel'}}"> - <h3><span style="color: red">* </span>Are you sure delete this instance?</h3> + <nz-modal nzWidth="428" [(nzVisible)]="deleteModelVisible" nzTitle=" {{'i18nTextDefine_delete' | translate}} " + (nzOnCancel)="deleteCancel()" + (nzOnOk)="deleteOk(templatedeletestarting,templateDeleteSuccessFaild)" + nzClassName="{{thisService['serviceDomain'] == 'Network Service'?'nsdeleteModel':'deleteModel'}}" + nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " + nzOkText=" {{'i18nTextDefine_modelOk' | translate}} "> + <h3><span style="color: red">* </span> {{"i18nTextDefine_SureDelete" | translate}} </h3> <div class="question"> - <h4>Instance Name:</h4> - <div class="deleteModelContent">{{ thisService["service-instance-id"] || - thisService["nsInstanceId"] }}</div> + <h4> {{"i18nTextDefine_InstanceName" | translate}} :</h4> + <div class="deleteModelContent">{{ thisService["service-instance-name"] || + thisService["nsInstanceName"] }} + </div> </div> <div class="question"> - <h4>Instance ID:</h4> - <div class="deleteModelContent">{{ thisService["service-instance-name"] || - thisService["nsInstanceName"] }}</div> + <h4> {{"i18nTextDefine_InstanceID" | translate}} :</h4> + <div class="deleteModelContent">{{ thisService["service-instance-id"] || + thisService["nsInstanceId"] }} + </div> </div> <div *ngIf="thisService['serviceDomain'] == 'Network Service'"> <div class="question"> - <h4>terminationType:</h4> + <h4> {{"i18nTextDefine_terminationType" | translate}} :</h4> <nz-select style="width: 306px;" [(ngModel)]="terminationType"> - <nz-option nzValue="graceful" nzLabel="graceful"></nz-option> - <nz-option nzValue="forceful" nzLabel="forceful"></nz-option> + <nz-option nzValue="graceful" nzLabel=" {{'i18nTextDefine_graceful' | translate}} "></nz-option> + <nz-option nzValue="forceful" nzLabel=" {{'i18nTextDefine_forceful' | translate}} "></nz-option> </nz-select> </div> <div class="question"> - <h4 *ngIf="terminationType=='graceful'">gracefulTerminationTimeout:</h4> + <h4 *ngIf="terminationType=='graceful'"> {{"i18nTextDefine_gracefulTerminationTimeout" | translate}} :</h4> <input *ngIf="terminationType=='graceful'" style="width: 306px;" nz-input [(ngModel)]="gracefulTerminationTimeout"> </div> </div> + <!--2019.05.09 add delete notification--> + <ng-template #templatedeletestarting > + <div class="ant-notification-notice-content"> + <div class="ant-notification-notice-with-icon"> + <span class="ant-notification-notice-icon"> + <img src="assets/images/execute-inproess.png" alt="instance temination is starting"> + </span> + <div class="ant-notification-notice-message" *ngIf="thisService['serviceDomain'] == 'CCVPN' || thisService['serviceDomain'] == 'SOTN'">{{ thisService['serviceDomain'] }} {{"i18nTextDefine_InstanceTeminationStarting" | translate}} + </div> + <div class="ant-notification-notice-message" *ngIf="thisService['serviceDomain'] == 'E2E Service'">E2E {{"i18nTextDefine_InstanceTeminationStarting" | translate}}</div> + <div class="ant-notification-notice-message" *ngIf="thisService['serviceDomain'] == 'Network Service'">NS {{"i18nTextDefine_InstanceTeminationStarting" | translate}}</div> + <div class="ant-notification-notice-description"> + <div class="notificationlist"> + <p> {{"i18nTextDefine_InstanceName" | translate}} :</p> + <span>{{ thisService["service-instance-name"] || + thisService["nsInstanceName"] }} + </span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_Customer" | translate}} :</p> + <span>{{ customerSelected.name }}</span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_UseCase" | translate}} :</p> + <span>{{ thisService["serviceDomain"] }}</span> + </div> + </div> + </div> + </div> + </ng-template> </nz-modal> - <nz-modal nzWidth="428" [nzVisible]="healModelVisible" nzTitle="Heal" (nzOnCancel)="healCancel()" - (nzOnOk)="healOk()" nzClassName="healModel"> - <h3><span style="color: red">* </span>Are you sure heal this instance?</h3> + <nz-modal nzWidth="428" [nzVisible]="healModelVisible" nzTitle=" {{'i18nTextDefine_Heal' | translate}} " + (nzOnCancel)="healCancel()" + (nzOnOk)="healOk(templatehealstarting,templatehealSuccessFaild)" nzClassName="healModel" nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " + nzOkText=" {{'i18nTextDefine_modelOk' | translate}} "> + <h3><span style="color: red">* </span> {{"i18nTextDefine_SureHeal" | translate}} </h3> <div class="heal-question"> - <p class="heal-label">Instance ID: </p> + <p class="heal-label"> {{"i18nTextDefine_InstanceID" | translate}} : </p> <div class="healModelContent" title="{{ thisService['service-instance-id'] || thisService['nsInstanceId'] || thisService['vnfInstanceId']}}"> {{ thisService["service-instance-id"] || thisService["nsInstanceId"] || thisService["vnfInstanceId"]}}</div> @@ -269,7 +348,7 @@ <!-- NS --> <div *ngIf="thisService['serviceDomain'] == 'Network Service'"> <div class="question"> - <p class="heal-label">degreeHealing:</p> + <p class="heal-label"> {{"i18nTextDefine_degreeHealing" | translate}} :</p> <nz-select style="width: 200px;height:42px;margin-left: 15px;border-radius: 6px" [(ngModel)]="nsParams.degreeHealing"> <nz-option nzValue="HEAL_RESTORE" nzLabel="HEAL_RESTORE"></nz-option> <nz-option nzValue="HEAL_QOS" nzLabel="HEAL_QOS"></nz-option> @@ -278,7 +357,7 @@ </nz-select> </div> <div> - <span style="display:inline-block;">actionsHealing:</span> + <span style="display:inline-block;"> {{"i18nTextDefine_actionsHealing" | translate}} :</span> <button nz-button [nzType]="'default'" (click)="addActionsHealing()"><i class="anticon anticon-plus-circle-o"></i></button> <br> @@ -289,10 +368,10 @@ </div> </div> - <span style="display:inline-block;width:50%;">healScript:</span> + <span style="display:inline-block;width:50%;"> {{"i18nTextDefine_healScript" | translate}} :</span> <input style="width: 165px;" nz-input [(ngModel)]="nsParams.healScript"> <div> - <span style="display:inline-block;">additionalParamsforNs:</span> + <span style="display:inline-block;"> {{"i18nTextDefine_additionalParamsforNs" | translate}} :</span> <button nz-button [nzType]="'default'" (click)="addNsAdditional()"><i class="anticon anticon-plus-circle-o"></i></button> <br> @@ -307,23 +386,231 @@ <!-- vnf --> <div *ngIf="thisService['serviceDomain'] == 'vnf'" style="clear: both"> <div class="heal-question"> - <p class="heal-label">cause:</p> + <p class="heal-label"> {{"i18nTextDefine_cause" | translate}} :</p> <input nz-input [(ngModel)]="vnfParams.cause" class="heal-input"> </div> <div class="heal-question"> - <p class="heal-label">action:</p> + <p class="heal-label"> {{"i18nTextDefine_action" | translate}} :</p> <input nz-input [(ngModel)]="vnfParams.additionalParams.action" class="heal-input"> </div> <div class="heal-question"> - <p class="heal-label">actionvminfo:</p> + <p class="heal-label"> {{"i18nTextDefine_actionvminfo" | translate}}:</p> <nz-select style=" float: right;width: 200px;margin-left: 15px;border-radius: 6px;margin-right: 30px" [(ngModel)]="vmSelected"> <nz-option *ngFor="let item of vnfVms" [nzValue]="item" [nzLabel]="item.vmName"></nz-option> </nz-select> </div> </div> + <!--2019.05.09 add heal notification--> + <ng-template #templatehealstarting > + <div class="ant-notification-notice-content"> + <div class="ant-notification-notice-with-icon"> + <span class="ant-notification-notice-icon"> + <img src="assets/images/execute-inproess.png" alt="instance temination is starting"> + </span> + <div class="ant-notification-notice-message">NS {{"i18nTextDefine_InstanceHealingStarting" | translate}}</div> + <div class="ant-notification-notice-description"> + <div class="notificationlist"> + <p> {{"i18nTextDefine_InstanceName" | translate}} :</p> + <span>{{ thisService["service-instance-name"] || + thisService["nsInstanceName"] }} + </span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_Customer" | translate}} :</p> + <span>{{ customerSelected.name }}</span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_UseCase" | translate}} :</p> + <span>{{ thisService["serviceDomain"] }}</span> + </div> + </div> + </div> + </div> + </ng-template> </nz-modal> - </div> + <!-- add notification--> + <ng-template #templateCreatestarting > + <div class="ant-notification-notice-content"> + <div class="ant-notification-notice-with-icon"> + <span class="ant-notification-notice-icon"> + <img src="assets/images/execute-inproess.png" alt="instance temination is starting"> + </span> + <div class="ant-notification-notice-message" *ngIf="thisCreateService['serviceDomain'] == 'CCVPN' || thisService['serviceDomain'] == 'SOTN'">{{ thisService['serviceDomain'] }} {{"i18nTextDefine_InstanceCreationStarting" | translate}} + </div> + <div class="ant-notification-notice-message" *ngIf="thisCreateService['serviceDomain'] == 'E2E Service'">E2E {{"i18nTextDefine_InstanceCreationStarting" | translate}}</div> + <div class="ant-notification-notice-message" *ngIf="thisCreateService['serviceDomain'] == 'Network Service'">NS {{"i18nTextDefine_InstanceCreationStarting" | translate}}</div> + <div class="ant-notification-notice-description"> + <div class="notificationlist"> + <p> {{"i18nTextDefine_InstanceName" | translate}} :</p> + <span>{{ thisCreateService["service-instance-name"] }} + </span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_Customer" | translate}} :</p> + <span>{{ customerSelected2.name }}</span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_UseCase" | translate}} :</p> + <span>{{ thisCreateService['serviceDomain'] }}</span> + </div> + </div> + </div> + </div> + </ng-template> + <ng-template #templateCreateSuccessFaild > + <div class="ant-notification-notice-content"> + <div class="ant-notification-notice-with-icon"> + <span class="ant-notification-notice-icon"> + <img src="assets/images/execute-success.png" alt="instance temination is starting" *ngIf="thisCreateService.status == 'Successful'"> + <img src="assets/images/execute-faild.png" alt="instance temination is starting" *ngIf="thisCreateService.status == 'Failed'"> + </span> + <div class="ant-notification-notice-message" *ngIf="(thisCreateService['serviceDomain'] == 'CCVPN' || thisCreateService['serviceDomain'] == 'SOTN') && thisCreateService.status == 'Successful'">{{ thisCreateService['serviceDomain'] }} {{"i18nTextDefine_InstanceCreatedSuccessfully" | translate}} + </div> + <div class="ant-notification-notice-message" *ngIf="(thisCreateService['serviceDomain'] == 'E2E Service') && thisCreateService.status == 'Successful'">E2E {{"i18nTextDefine_InstanceCreatedSuccessfully" | translate}}</div> + <div class="ant-notification-notice-message" *ngIf="(thisCreateService['serviceDomain'] == 'Network Service') && thisCreateService.status == 'Successful'">NS {{"i18nTextDefine_InstanceCreatedSuccessfully" | translate}}</div> + <div class="ant-notification-notice-message" *ngIf="(thisCreateService['serviceDomain'] == 'CCVPN' || thisCreateService['serviceDomain'] == 'SOTN') && thisCreateService.status == 'Failed'">{{ thisCreateService['serviceDomain'] }} {{"i18nTextDefine_InstanceCreationFailed" | translate}} + </div> + <div class="ant-notification-notice-message" *ngIf="(thisCreateService['serviceDomain'] == 'E2E Service') && thisCreateService.status == 'Failed'">E2E {{"i18nTextDefine_InstanceCreationFailed" | translate}}</div> + <div class="ant-notification-notice-message" *ngIf="(thisCreateService['serviceDomain'] == 'Network Service') && thisCreateService.status == 'Failed'">NS {{"i18nTextDefine_InstanceCreationFailed" | translate}}</div> + <div class="ant-notification-notice-description"> + <div class="notificationlist"> + <p> {{"i18nTextDefine_InstanceName" | translate}} :</p> + <span>{{ thisCreateService["service-instance-name"] || + thisCreateService["nsInstanceName"] }} + </span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_Customer" | translate}} :</p> + <span>{{ customerSelected2.name }}</span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_UseCase" | translate}} :</p> + <span>{{ thisCreateService["serviceDomain"] }}</span> + </div> + </div> + </div> + </div> + </ng-template> + <ng-template #templateDeleteSuccessFaild > + <div class="ant-notification-notice-content"> + <div class="ant-notification-notice-with-icon"> + <span class="ant-notification-notice-icon"> + <img src="assets/images/execute-success.png" alt="instance temination is starting" *ngIf="thisService.status == 'Successful'"> + <img src="assets/images/execute-faild.png" alt="instance temination is starting" *ngIf="thisService.status == 'Failed'"> + </span> + <div class="ant-notification-notice-message" *ngIf="(thisService['serviceDomain'] == 'CCVPN' || thisService['serviceDomain'] == 'SOTN') && thisService.status == 'Successful'">{{ thisService['serviceDomain'] }} {{"i18nTextDefine_InstanceTeminatedSuccessfully" | translate}} + </div> + <div class="ant-notification-notice-message" *ngIf="(thisService['serviceDomain'] == 'E2E Service') && thisService.status == 'Successful'">E2E {{"i18nTextDefine_InstanceTeminatedSuccessfully" | translate}}</div> + <div class="ant-notification-notice-message" *ngIf="(thisService['serviceDomain'] == 'Network Service') && thisService.status == 'Successful'">NS {{"i18nTextDefine_InstanceTeminatedSuccessfully" | translate}}</div> + <div class="ant-notification-notice-message" *ngIf="(thisService['serviceDomain'] == 'CCVPN' || thisService['serviceDomain'] == 'SOTN') && thisService.status == 'Failed'">{{ thisService['serviceDomain'] }} {{"i18nTextDefine_InstanceTeminationFailed" | translate}} + </div> + <div class="ant-notification-notice-message" *ngIf="(thisService['serviceDomain'] == 'E2E Service') && thisService.status == 'Failed'">E2E {{"i18nTextDefine_InstanceTeminationFailed" | translate}}</div> + <div class="ant-notification-notice-message" *ngIf="(thisService['serviceDomain'] == 'Network Service') && thisService.status == 'Failed'">NS {{"i18nTextDefine_InstanceTeminationFailed" | translate}}</div> + <div class="ant-notification-notice-description"> + <div class="notificationlist"> + <p> {{"i18nTextDefine_InstanceName" | translate}} :</p> + <span>{{ thisService["service-instance-name"] || + thisService["nsInstanceName"] }} + </span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_Customer" | translate}} :</p> + <span>{{ customerSelected.name }}</span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_UseCase" | translate}} :</p> + <span>{{ thisService["serviceDomain"] }}</span> + </div> + </div> + </div> + </div> + </ng-template> + <ng-template #templateScaleSuccessFaild > + <div class="ant-notification-notice-content"> + <div class="ant-notification-notice-with-icon"> + <span class="ant-notification-notice-icon"> + <img src="assets/images/execute-success.png" alt="instance temination is starting" *ngIf="thisService.status == 'Successful'"> + <img src="assets/images/execute-faild.png" alt="instance temination is starting" *ngIf="thisService.status == 'Failed'"> + </span> + <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Successful'">E2E {{"i18nTextDefine_InstanceScaledSuccessfully" | translate}}</div> + <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Failed'">E2E {{"i18nTextDefine_InstanceScaleFailed" | translate}}</div> + <div class="ant-notification-notice-description"> + <div class="notificationlist"> + <p> {{"i18nTextDefine_InstanceName" | translate}} :</p> + <span>{{ thisService["service-instance-name"] || + thisService["nsInstanceName"] }} + </span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_Customer" | translate}} :</p> + <span>{{ customerSelected.name }}</span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_UseCase" | translate}} :</p> + <span>{{ thisService["serviceDomain"] }}</span> + </div> + </div> + </div> + </div> + </ng-template> + <ng-template #templatehealSuccessFaild > + <div class="ant-notification-notice-content"> + <div class="ant-notification-notice-with-icon"> + <span class="ant-notification-notice-icon"> + <img src="assets/images/execute-success.png" alt="instance temination is starting" *ngIf="thisService.status == 'Successful'"> + <img src="assets/images/execute-faild.png" alt="instance temination is starting" *ngIf="thisService.status == 'Failed'"> + </span> + <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Successful'">NS {{"i18nTextDefine_InstanceHealedSuccessfully" | translate}}</div> + <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Failed'">NS {{"i18nTextDefine_InstanceHealingFailed" | translate}}</div> + <div class="ant-notification-notice-description"> + <div class="notificationlist"> + <p> {{"i18nTextDefine_InstanceName" | translate}} :</p> + <span>{{ thisService["service-instance-name"] || + thisService["nsInstanceName"] }} + </span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_Customer" | translate}} :</p> + <span>{{ customerSelected.name }}</span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_UseCase" | translate}} :</p> + <span>{{ thisService["serviceDomain"] }}</span> + </div> + </div> + </div> + </div> + </ng-template> + <ng-template #templateUpdateSuccessFaild > + <div class="ant-notification-notice-content"> + <div class="ant-notification-notice-with-icon"> + <span class="ant-notification-notice-icon"> + <img src="assets/images/execute-success.png" alt="instance temination is starting" *ngIf="thisService.status == 'Successful'"> + <img src="assets/images/execute-faild.png" alt="instance temination is starting" *ngIf="thisService.status == 'Failed'"> + </span> + <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Successful'">CCVPN {{"i18nTextDefine_InstanceUpdatedSuccessfully" | translate}}</div> + <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Failed'">CCVPN {{"i18nTextDefine_InstanceUpdateFailed" | translate}}</div> + <div class="ant-notification-notice-description"> + <div class="notificationlist"> + <p> {{"i18nTextDefine_InstanceName" | translate}} :</p> + <span>{{ thisService["service-instance-name"] || + thisService["nsInstanceName"] }} + </span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_Customer" | translate}} :</p> + <span>{{ customerSelected.name }}</span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_UseCase" | translate}} :</p> + <span>{{ thisService["serviceDomain"] }}</span> + </div> + </div> + </div> + </div> + </ng-template> + </div> <div class="detailComponent" *ngIf="detailshow"> <app-ccvpn-detail [namesTranslate]="namesTranslate" [detailParams]="detailData" (closeDetail)="detailshow = false;listDisplay = false;"></app-ccvpn-detail> @@ -335,14 +622,14 @@ <div class="createComponent" *ngIf="createshow"> <app-ccvpn-creation [createParams]="createData" - (closeCreate)="closeCreate($event)"> + (closeCreate)="closeCreate($event,templateCreatestarting,templateCreateSuccessFaild)"> </app-ccvpn-creation> </div> <div class="createComponent" *ngIf="createshow2"> <app-e2e-creation [createParams]="createData" - (nsCloseCreate)="nsCloseCreate($event)" - (e2eCloseCreate)="e2eCloseCreate($event)"> + (nsCloseCreate)="nsCloseCreate($event,templateCreatestarting,templateCreateSuccessFaild)" + (e2eCloseCreate)="e2eCloseCreate($event,templateCreatestarting,templateCreateSuccessFaild)"> </app-e2e-creation> </div> <!--</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 ca0ac419..c1cf7598 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 @@ -108,9 +108,9 @@ hr { } .top-list{ position: relative; - width:31%; - height:224px; - margin: 15px 1%; + width:29%; + height:170px; + margin: 10px 1%; float: left; background:url("../../../assets/images/servicelist-e2e.png") no-repeat; background-size: 100% 100%; @@ -151,15 +151,35 @@ hr { text-align: right; height: 40px; line-height: 20px; - top:45%; - margin-top: -20px; right: 50px; color: #fff; - span:nth-child(1){ - display: inline-block; - font-size: 22px; - font-weight: 500; - margin-bottom: 20px; + p{ + font-size: 14px; + width: 250px; + margin: 15px 0 0 0; + height: 13px; + clear: both; + span{ + display: inline-block; + font-weight: 500; + text-align: right; + float: right; + } + span:nth-child(1){ + font-size: 18px; + width: 40px; + min-width: 40px; + } + span:nth-child(2){ + width: 85px; + font-size: 16px; + } + } + p:nth-child(1){ + margin-top: 25px; + } + .service-description{ + color: rgba(255,255,255,0.7); } } .list { 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 0c5c26a9..55e339f1 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 @@ -13,10 +13,11 @@ 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'; -import { NzModalService } from 'ng-zorro-antd'; +import {Component, OnInit, HostBinding,TemplateRef } from '@angular/core'; +import {MyhttpService} from '../../myhttp.service'; +import {slideToRight} from '../../animates'; +import {NzModalService} from 'ng-zorro-antd'; +import { NzNotificationService } from 'ng-zorro-antd'; @Component({ selector: 'app-services-list', @@ -26,8 +27,8 @@ import { NzModalService } from 'ng-zorro-antd'; }) export class ServicesListComponent implements OnInit { @HostBinding('@routerAnimate') routerAnimateState; - constructor(private myhttp: MyhttpService, private modalService: NzModalService) { } - + constructor(private myhttp: MyhttpService, private modalService: NzModalService, private notification: NzNotificationService) { + } ngOnInit() { this.getallCustomers(); @@ -48,24 +49,29 @@ export class ServicesListComponent implements OnInit { templateTypeSelected ="CCVPN"; orchestratorSelected = {name:null,id:null}; listSortMasters=JSON.parse(sessionStorage.getItem('listSortMasters')); - language="en"; + language = sessionStorage.getItem("DefaultLang"); iconMore=false; - maskShow=false; serviceMunber = [ { "serviceDomain": "E2E", - "number": 10, - "detailName":"End To End service" + "Success": 16, + "failed": 4, + "InProgress": 11, + "detailName":"i18nTextDefine_End_To_End_Service" }, { "serviceDomain": "NS", - "number": 20, - "detailName":"Network Service" + "Success": 21, + "failed": 2, + "InProgress": 17, + "detailName":"i18nTextDefine_Network_Service" }, { "serviceDomain": "CCVPN", - "number": 40, - "detailName":"Cross Domain and Cross Layer VPN" + "Success": 36, + "failed": 15, + "InProgress": 6, + "detailName":"i18nTextDefine_Cross_Domain_and_Cross_Layer_VPN" } ]; @@ -92,21 +98,17 @@ export class ServicesListComponent implements OnInit { console.log("customerList.length == 0",this.customerList); return false; } - this.customerList2 = data.map((item) => { - return {name: item["subscriber-name"], id: item["global-customer-id"]} - }); - if (this.customerList2.length == 0) { - console.log("customerList2.length == 0", this.customerList2); - return false; - } - this.customerSelected = this.customerList[0]; - this.customerSelected2 = this.customerList2[0]; - this.choseCustomer(this.customerSelected); - this.getServiceType(this.customerSelected2); - - // console.log(this.customers) - }) - } + this.customerList2 = data.map((item) => { + return {name: item["subscriber-name"], id: item["global-customer-id"]} + }); + if (this.customerList2.length == 0) { + console.log("customerList2.length == 0", this.customerList2); + return false; + } + this.customerSelected = this.customerList[0]; + this.choseCustomer(this.customerSelected); + }) + } getallOrchestrators(){ this.myhttp.getAllOrchestrators() @@ -160,21 +162,22 @@ export class ServicesListComponent implements OnInit { console.log("serviceTypeList.length == 0", this.serviceTypeList2); return false; } - this.serviceTypeSelected2 = this.serviceTypeList2[0]; + this.serviceTypeSelected2 = this.serviceTypeSelected; this.serviceTypeSelectedName = this.serviceTypeSelected2.name; - console.log(this.serviceTypeList2); + console.log(this.customerSelected2); + console.log(this.serviceTypeSelected2); this.getAlltemplates(); }) } createModal(): void { this.isVisible = true; - this.getallOrchestrators(); - + this.getallOrchestrators(); + this.customerSelected2 = this.customerSelected; + this.getServiceType(this.customerSelected2); } // choseTemplateType(){ - this.templateTypeSelected = this.serviceTypeSelected2.name; this.getallOrchestrators(); this.getAlltemplates(); } @@ -327,7 +330,9 @@ export class ServicesListComponent implements OnInit { let operationType = item["operationType"]; this.queryNsProgress(jobid,id,updata,operationType).then(()=>{ item["rate"] = 100; - item["status"] = "Successful"; + item["status"] = this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2001 && its["language"] == this.language + })["sortValue"]; item["tips"] = this.listSortMasters["operationTypes"].find((its)=>{ return its["sortCode"]==item["operationType"] && its["language"]==this.language})["sortValue"]+'\xa0\xa0\xa0'+item["status"]; }) }else{ @@ -346,7 +351,9 @@ export class ServicesListComponent implements OnInit { } this.queryProgress(obj,updata).then(()=>{ item["rate"] = 100; - item["status"] = "Successful"; + item["status"] = this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2001 && its["language"] == this.language + })["sortValue"]; item["tips"] = this.listSortMasters["operationTypes"].find((its)=>{ return its["sortCode"]==item["operationType"] && its["language"]==this.language})["sortValue"]+'\xa0\xa0\xa0'+item["status"]; }) } @@ -380,7 +387,8 @@ export class ServicesListComponent implements OnInit { this.e2e_nsData = data; }) } - scaleOk(){ + + scaleOk(templatescalestarting,templateScaleSuccessFaild) { this.scaleModelVisible = false; let requestBody = { "service": { @@ -402,12 +410,23 @@ export class ServicesListComponent implements OnInit { }) } } - this.scaleE2eService(this.thisService,requestBody); + this.scaleE2eService(this.thisService, requestBody,templateScaleSuccessFaild); + this.scaleNotification(templatescalestarting); } scaleCancel(){ this.scaleModelVisible = false; } + scaleNotification(template: TemplateRef<{}>): void { + console.log(template,"scaleNotification show"); + this.notification.template(template); + // this.notification.template(template,{ nzDuration: 0 }); + } + scaleSuccessNotification(template: TemplateRef<{}>): void { + console.log(template,"scaleNotification show"); + this.notification.template(template); + // this.notification.template(template,{ nzDuration: 0 }); + } updataService(){ console.log("updataService!"); } @@ -454,7 +473,6 @@ export class ServicesListComponent implements OnInit { // console.log(service); this.thisService = service; this.healModelVisible = true; - this.maskShow = true; if(service.serviceDomain == "vnf"){ this.vnfParams.vnfInstanceId = service.vnfInstanceId; this.myhttp.getVnfInfo(service.vnfInstanceId) @@ -465,9 +483,8 @@ export class ServicesListComponent implements OnInit { }) } } - healOk(){ + healOk(templatehealstarting,templatehealSuccessFaild){ this.healModelVisible = false; - this.maskShow = false; // nsParams this.nsParams.actionsHealing = this.healActions.map((item)=>{return item.value}); let additional = {}; @@ -481,13 +498,23 @@ export class ServicesListComponent implements OnInit { let requestBody = this.thisService["serviceDomain"] == "Network Service" ? {healNsData:this.nsParams} : {healVnfData:this.vnfParams}; console.log(requestBody); - this.healNsVnfService(this.thisService,requestBody); - } - healCancel(){ - this.healModelVisible = false; - this.maskShow = false; + this.healNsVnfService(this.thisService, requestBody,templatehealSuccessFaild); + this.healNotification(templatehealstarting); } + healCancel() { + this.healModelVisible = false; + } + healNotification(template: TemplateRef<{}>): void { + console.log(template,"healNotification show"); + this.notification.template(template); + // this.notification.template(template,{ nzDuration: 0 }); + } + healSuccessNotification(template: TemplateRef<{}>): void { + console.log(template,"healNotification show"); + this.notification.template(template); + // this.notification.template(template,{ nzDuration: 0 }); + } // show detail detailshow = false; detailshow2 = false; @@ -522,26 +549,46 @@ export class ServicesListComponent implements OnInit { deleteModel(service){ this.thisService = service; this.deleteModelVisible = true; - this.maskShow = true; } - deleteOk(){ - this.deleteModelVisible = false; - this.maskShow = false; - if(this.thisService["serviceDomain"] == "Network Service"){ - this.deleteNsService(this.thisService); - }else{ - this.deleteService(this.thisService); +deleteOk(templatedeletestarting,templateDeleteSuccessFaild) { + this.deleteModelVisible = false; + if (this.thisService["serviceDomain"] == "Network Service") { + this.deleteNsService(this.thisService,templateDeleteSuccessFaild); + } else { + this.deleteService(this.thisService,templateDeleteSuccessFaild); + } + this.deleteNotification(templatedeletestarting); } - } - deleteCancel(){ - this.deleteModelVisible = false; - this.maskShow = false; - } + deleteCancel() { + this.deleteModelVisible = false; + } + + deleteNotification(template: TemplateRef<{}>): void { + console.log(template,"deleteNotification show"); + this.notification.template(template); + // this.notification.template(template,{ nzDuration: 0 }); + } + deleteSuccessNotification(template: TemplateRef<{}>): void { + console.log(template,"deleteSuccessNotification show"); + this.notification.template(template); + // this.notification.template(template,{ nzDuration: 0 }); + } + createNotification(template: TemplateRef<{}>): void { + console.log(template,"deleteNotification show"); + this.notification.template(template); + // this.notification.template(template,{ nzDuration: 0 }); + } + createSuccessNotification(template: TemplateRef<{}>): void { + console.log(template,"deleteSuccessNotification show"); + this.notification.template(template); + // this.notification.template(template,{ nzDuration: 0 }); + } //ccvpn sotn createservice parentServiceInstanceId=""; - closeCreate(obj){ + thisCreateService = {}; + closeCreate(obj,templateCreatestarting,templateCreateSuccessFaild) { if(!obj){ this.createshow = false; //close this.listDisplay = false; //close @@ -552,10 +599,10 @@ export class ServicesListComponent implements OnInit { console.log(obj); let newData; //Newly created service data for the main table - let createParams = "?customerId=" + this.customerSelected.id + + let createParams = "?customerId=" + this.customerSelected2.id + "&serviceType=" + this.serviceTypeSelected2.name + "&serviceDomain=" + this.templateTypeSelected; - this.createService(obj, createParams).then((data) => { + this.createService(obj, createParams,templateCreatestarting,templateCreateSuccessFaild).then((data) => { console.log(data) newData = { //Newly created service data in the main form 'service-instance-id': data["serviceId"], @@ -567,8 +614,9 @@ export class ServicesListComponent implements OnInit { statusClass: 1001, tips: "" }; + this.thisCreateService = newData; this.tableData = [newData, ...this.tableData]; - + this.createNotification(templateCreatestarting); let updata = (prodata) => { newData.rate = prodata.progress; newData.tips = this.listSortMasters["operationTypes"].find((its) => { @@ -587,9 +635,12 @@ export class ServicesListComponent implements OnInit { console.log(data); newData.rate = 100; newData.status = "Successful"; + this.createSuccessNotification(templateCreateSuccessFaild); newData.tips = this.listSortMasters["operationTypes"].find((its) => { return its["sortCode"] == newData["statusClass"] && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + newData["status"]; + })["sortValue"] + '\xa0\xa0\xa0' +this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2001 && its["language"] == this.language + })["sortValue"]; let hasUndone = this.tableData.some((item) => { return item.rate < 100; }); @@ -601,7 +652,7 @@ export class ServicesListComponent implements OnInit { }) } - e2eCloseCreate(obj){ +e2eCloseCreate(obj,templateCreatestarting,templateCreateSuccessFaild) { if(!obj){ this.createshow2 = false; // this.listDisplay = false; // @@ -617,7 +668,7 @@ export class ServicesListComponent implements OnInit { "&parentServiceInstanceId="+ "&uuid="+obj.service.serviceUuid+ "&invariantUuuid="+obj.service.serviceInvariantUuid; - this.createService(obj,createParams).then((data)=>{ + this.createService(obj, createParams,templateCreatestarting,templateCreateSuccessFaild).then((data) => { console.log(data); newData = { // 'service-instance-id':data["serviceId"], @@ -625,11 +676,13 @@ export class ServicesListComponent implements OnInit { serviceDomain:this.templateTypeSelected, childServiceInstances:[], status:"Creating", + statusClass: 1001, rate:0, tips:"" } - + this.thisCreateService = newData; this.tableData = [newData,...this.tableData]; + this.createNotification(templateCreatestarting); let updata = (prodata)=>{ newData.rate = prodata.progress; newData.tips = newData["status"]+newData.rate+"%"; @@ -644,7 +697,12 @@ export class ServicesListComponent implements OnInit { console.log(data); newData.rate = 100; newData.status = "Successful"; - newData.tips = this.listSortMasters["operationTypes"].find((its)=>{ return its["sortCode"]==newData["statusClass"] && its["language"]==this.language})["sortValue"]+'\xa0\xa0\xa0'+newData["status"]; + this.createSuccessNotification(templateCreateSuccessFaild); + newData.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == newData["statusClass"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2001 && its["language"] == this.language + })["sortValue"]; let hasUndone = this.tableData.some((item)=>{ return item.rate < 100; }) @@ -657,7 +715,7 @@ export class ServicesListComponent implements OnInit { } - nsCloseCreate(obj){ + nsCloseCreate(obj,templateCreatestarting,templateCreateSuccessFaild) { if(!obj){ this.createshow2 = false; // this.listDisplay = false; // @@ -677,24 +735,34 @@ export class ServicesListComponent implements OnInit { serviceDomain:this.templateTypeSelected, childServiceInstances:[], status:"Creating", + statusClass: 1001, rate:0, tips:"" } + this.thisCreateService = newData; this.tableData = [newData,...this.tableData]; + this.createNotification(templateCreatestarting); if(data.status == "FAILED"){ + this.createSuccessNotification(templateCreateSuccessFaild); console.log("create ns service failed :" + JSON.stringify(data)); newData.status = "failed"; return false; } let createParams = "?ns_instance_id=" + data.nsInstanceId + - "&customerId="+this.customerSelected.id + + "&customerId=" + this.customerSelected2.id + "&serviceType="+this.serviceTypeSelected2.name + "&serviceDomain="+ this.templateTypeSelected + "&parentServiceInstanceId="; // step2 this.createNsService(createParams,obj.step2).then((jobid)=>{ if(jobid == "failed"){ + this.createSuccessNotification(templateCreateSuccessFaild); newData.status = "failed"; + newData.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == newData["statusClass"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2002 && its["language"] == this.language + })["sortValue"]; return false; } let operationType="1001"; @@ -712,7 +780,12 @@ export class ServicesListComponent implements OnInit { console.log(data); newData.rate = 100; newData.status = "Successful"; - newData.tips = this.listSortMasters["operationTypes"].find((its)=>{ return its["sortCode"]==newData["statusClass"] && its["language"]==this.language})["sortValue"]+'\xa0\xa0\xa0'+newData["status"]; + this.createSuccessNotification(templateCreateSuccessFaild); + newData.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == newData["statusClass"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2001 && its["language"] == this.language + })["sortValue"]; let hasUndone = this.tableData.some((item)=>{ return item.rate < 100; }) @@ -725,11 +798,12 @@ export class ServicesListComponent implements OnInit { }) } - createService(requestBody,createParams){ + createService(requestBody, createParams,templateCreatestarting,templateCreateSuccessFaild) { let mypromise = new Promise((res,rej)=>{ this.myhttp.createInstance(requestBody,createParams) .subscribe((data)=>{ if(data.status == "FAILED"){ + this.createSuccessNotification(templateCreateSuccessFaild); console.log("create e2e service failed :" + JSON.stringify(data)); return false; } @@ -753,17 +827,18 @@ export class ServicesListComponent implements OnInit { return mypromise; } - scaleE2eService(service,requestBody){ + scaleE2eService(service, requestBody,templateScaleSuccessFaild) { let id = service["service-instance-id"]; service.rate = 0; service.status = "In Progress"; service.statusClass = "1003"; - service.tips= "Scaling"; + service.tips = ""; this.myhttp.scaleE2eService(id,requestBody) .subscribe((data)=>{ if(data.status == "FAILED"){ console.log("scale E2e service failed :" + JSON.stringify(data)); service.status = "failed"; + this.scaleSuccessNotification(templateScaleSuccessFaild); return false; } let obj = { @@ -773,25 +848,34 @@ export class ServicesListComponent implements OnInit { } let updata = (prodata)=>{ service.rate = prodata.progress; - service.tips = "Scaling" + '\xa0\xa0\xa0' +service["rate"]+"%"; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service.statusClass && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' +service["rate"]+"%"; if(service["rate"] > 100){ service["status"]=prodata.status; - service.tips = "Scaling"+ '\xa0\xa0\xa0' + service["status"]; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service["statusClass"] && its["language"] == this.language + })["sortValue"]+ '\xa0\xa0\xa0' + service["status"]; } } this.queryProgress(obj,updata).then(()=>{ service.rate = 100; service.status = "Successful"; - service.tips = "Scaling"+ '\xa0\xa0\xa0' + service["status"]; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service["statusClass"] && its["language"] == this.language + })["sortValue"]+ '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2001 && its["language"] == this.language + })["sortValue"]; + this.scaleSuccessNotification(templateScaleSuccessFaild); }) }) } - healNsVnfService(service,requestBody){ + healNsVnfService(service, requestBody,templatehealSuccessFaild) { console.log(service); service.rate = 0; service.status = "In Progress"; - service.tips = "Healing"; + service.tips = ""; service.statusClass = "1004"; let id = service.nsInstanceId || service["service-instance-id"] || service["vnfNsInstanceId"]; this.myhttp.healNsService(id,requestBody) @@ -799,34 +883,49 @@ export class ServicesListComponent implements OnInit { if(data.status == "FAILED"){ console.log("heal nsvnf service failed :" + JSON.stringify(data)); service.status = "failed"; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service.statusClass && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2002 && its["language"] == this.language + })["sortValue"]; + this.healSuccessNotification(templatehealSuccessFaild); return false; } let jobid = data.jobId; let operationType = "1004"; let updata = (prodata)=>{ service.rate = prodata.progress; - service.tips = "Healing" + '\xa0\xa0\xa0' +service.rate+"%"; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service.statusClass && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' +service.rate+"%"; console.log(service.rate) if(service["rate"] > 100){ service["status"]=prodata.status; - service.tips = "Healing" + '\xa0\xa0\xa0' + service["status"]; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service.statusClass && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + service["status"]; } } this.queryNsProgress(jobid,null,updata,operationType).then((data1)=>{ console.log(data1); service.rate = 100; service.status = "Successful"; - service.tips = "Healing" + service["status"]; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service.statusClass && its["language"] == this.language + })["sortValue"] + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2001 && its["language"] == this.language + })["sortValue"]; + this.healSuccessNotification(templatehealSuccessFaild); }); }) } - deleteService(service){ + deleteService(service,templateDeleteSuccessFaild) { let allprogress = {}; // let querypros = []; // service.rate = 0; service.status = "In Progress"; - service.tips = "Deleting"; + service.tips = ""; service.statusClass = "1002"; service["childServiceInstances"].push({"service-instance-id":service["service-instance-id"]}); let deletePros = service["childServiceInstances"].map((item)=>{ @@ -841,7 +940,9 @@ export class ServicesListComponent implements OnInit { if(data.status == "FAILED"){ console.log("delete service failed :" + JSON.stringify(data)); service.status = "failed"; - service.tips = "Deleting" + service["status"]; + service.tips = this.listSortMasters["operationTypes"].find((its)=>{ return its["sortCode"]==service.statusClass && its["language"]==this.language})["sortValue"]+'\xa0\xa0\xa0'+ this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2002 && its["language"] == this.language + })["sortValue"]; return false; } let obj = {serviceId:params.serviceInstanceId,operationId:data.operationId,operationType:"1002"} @@ -849,10 +950,10 @@ export class ServicesListComponent implements OnInit { allprogress[prodata.operationId] = prodata.progress; let average = ((arr)=>{return eval(arr.join("+"))/arr.length})(Object.values(allprogress)); service["rate"]=average; - service.tips = "Deleting" + '\xa0\xa0\xa0' +service["rate"]+"%"; + service.tips = this.listSortMasters["operationTypes"].find((its)=>{ return its["sortCode"]==service.statusClass && its["language"]==this.language})["sortValue"] + '\xa0\xa0\xa0' +service["rate"]+"%"; if(service["rate"] > 100){ service["status"]=prodata.status; - service.tips = "Deleting" + '\xa0\xa0\xa0' + service["status"]; + service.tips = this.listSortMasters["operationTypes"].find((its)=>{ return its["sortCode"]==service.statusClass && its["language"]==this.language})["sortValue"] + '\xa0\xa0\xa0' + service["status"]; } } querypros.push(this.queryProgress(obj,updata)); @@ -866,7 +967,10 @@ export class ServicesListComponent implements OnInit { console.log(data); service.rate = 100; service.status = "Successful"; - service.tips = "Deleting" + service.status; + service.tips = this.listSortMasters["operationTypes"].find((its)=>{ return its["sortCode"]==service.statusClass && its["language"]==this.language})["sortValue"] + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2001 && its["language"] == this.language + })["sortValue"]; + this.deleteSuccessNotification(templateDeleteSuccessFaild); let hasUndone = this.tableData.some((item)=>{ return item.rate < 100; }) @@ -878,10 +982,10 @@ export class ServicesListComponent implements OnInit { }) }) } - deleteNsService(service){ + deleteNsService(service,templateDeleteSuccessFaild) { service.rate = 0; service.status = "In Progress"; - service.tips = "Deleting"; + service.tips = ""; service.statusClass = "1002"; let id = service.nsInstanceId || service["service-instance-id"]; let operationType ="1002"; @@ -892,15 +996,17 @@ export class ServicesListComponent implements OnInit { this.stopNsService(id,requestBody).then((jobid)=>{ if(jobid == "failed"){ service.status = "failed"; - service.tips = "Deleting" + service["status"]; + service.tips = this.listSortMasters["operationTypes"].find((its)=>{ return its["sortCode"]==service.statusClass && its["language"]==this.language})["sortValue"] + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2002 && its["language"] == this.language + })["sortValue"]; return false; } let updata = (prodata)=>{ service.rate = prodata.progress; - service.tips = "Deleting" + '\xa0\xa0\xa0' +service.rate+"%"; + service.tips = this.listSortMasters["operationTypes"].find((its)=>{ return its["sortCode"]==service.statusClass && its["language"]==this.language})["sortValue"] + '\xa0\xa0\xa0' +service.rate+"%"; if(service["rate"] > 100){ service["status"]=prodata.status; - service.tips = "Deleting" + service["status"]; + service.tips = this.listSortMasters["operationTypes"].find((its)=>{ return its["sortCode"]==service.statusClass && its["language"]==this.language})["sortValue"] + service["status"]; } } return this.queryNsProgress(jobid,null,updata,operationType); @@ -910,13 +1016,22 @@ export class ServicesListComponent implements OnInit { console.log(data); service.rate = 100; service.status = "Successful"; - service.tips = "Deleting" + service["status"]; + service.tips = this.listSortMasters["operationTypes"].find((its)=>{ return its["sortCode"]==service.statusClass && its["language"]==this.language})["sortValue"] + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2001 && its["language"] == this.language + })["sortValue"]; + this.deleteSuccessNotification(templateDeleteSuccessFaild); if(data.status == "FAILED"){ console.log("delete ns service failed :" + JSON.stringify(data)); service.status = "failed"; - service.tips = "Deleting" +'\xa0\xa0\xa0' + service["status"]; + service.tips = this.listSortMasters["operationTypes"].find((its)=>{ return its["sortCode"]==service.statusClass && its["language"]==this.language})["sortValue"] + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2002 && its["language"] == this.language + })["sortValue"]; + this.deleteSuccessNotification(templateDeleteSuccessFaild); return false; } + console.log(service,"deleteservice"); + console.log(this.thisService,"thisService"); + this.deleteSuccessNotification(templateDeleteSuccessFaild); let hasUndone = this.tableData.some((item)=>{ return item.rate < 100; }) diff --git a/usecaseui-portal/src/assets/i18n/cn.json b/usecaseui-portal/src/assets/i18n/cn.json new file mode 100644 index 00000000..3983d099 --- /dev/null +++ b/usecaseui-portal/src/assets/i18n/cn.json @@ -0,0 +1,135 @@ +{ + "app-component":"--:", + "i18nTextDefine_Home":"首页", + "i18nTextDefine_Customer":"用户", + "i18nTextDefine_Monitor":"监控", + "i18nTextDefine_Services":"服务", + "i18nTextDefine_ServicesList":"服务列表", + "i18nTextDefine_PackageManagement":"包管理", + "i18nTextDefine_Alarm":"告警", + "i18nTextDefine_Performance":"性能", + "i18nTextDefine_NetworkTopology":"网络拓扑", + + "home-component":"--:", + "i18nTextDefine_SERVICES":"服务", + "i18nTextDefine_PACKAGE":"包", + "i18nTextDefine_Total":"总数", + "i18nTextDefine_cutomers_and":"用户和", + "i18nTextDefine_service_instance":"服务实例", + "i18nTextDefine_ViewDetails":"查看详情", + "i18nTextDefine_ALARM":"告警", + "i18nTextDefine_VNF_Alarm":"VNF告警", + "i18nTextDefine_VM_Alarm":"VM告警", + "i18nTextDefine_VM_Performance":"VM性能", + + "services-list-component":"--:", + "i18nTextDefine_ServiceType":"服务类型", + "i18nTextDefine_Create":"创建", + "i18nTextDefine_Failed":"失败", + "i18nTextDefine_Success":"成功", + "i18nTextDefine_InProgress":"执行中", + "i18nTextDefine_End_To_End_Service":"端到端服务", + "i18nTextDefine_Network_Service":"NS服务", + "i18nTextDefine_Cross_Domain_and_Cross_Layer_VPN":"CCVPN服务", + "i18nTextDefine_NO":"序号", + "i18nTextDefine_Name":"名称", + "i18nTextDefine_Description":"描述", + "i18nTextDefine_UseCase":"场景用例", + "i18nTextDefine_Status":"状态", + "i18nTextDefine_Action":"动作", + "i18nTextDefine_Template":"模板", + "i18nTextDefine_Orchestrator":"编排器", + "i18nTextDefine_ServiceCreation":"服务创建", + "i18nTextDefine_Cancel":"取消", + "i18nTextDefine_modelOk":"确认", + "i18nTextDefine_Scale":"缩扩容", + "i18nTextDefine_SureScale":"您确定缩扩容此实例吗？", + "i18nTextDefine_InstanceName":"实例名称", + "i18nTextDefine_InstanceID":"实例ID", + "i18nTextDefine_ScaleType":"缩扩容类型", + "i18nTextDefine_AspectId":"详情Id", + "i18nTextDefine_Number_Of_Steps":"级数", + "i18nTextDefine_ScalingDirection":"缩扩容方向", + "i18nTextDefine_delete":"删除", + "i18nTextDefine_SureDelete":"您确定删除此实例吗？", + "i18nTextDefine_terminationType":"终止类型", + "i18nTextDefine_graceful":"优雅", + "i18nTextDefine_forceful":"强制", + "i18nTextDefine_gracefulTerminationTimeout":"优雅终止超时时间", + "i18nTextDefine_Heal":"自愈", + "i18nTextDefine_SureHeal":"您确定自愈此实例吗？", + "i18nTextDefine_degreeHealing":"自愈程度", + "i18nTextDefine_actionsHealing":"自愈行为", + "i18nTextDefine_healScript":"自愈脚本", + "i18nTextDefine_additionalParamsforNs":"NS附加参数", + "i18nTextDefine_cause":"原因", + "i18nTextDefine_action":"动作", + "i18nTextDefine_actionvminfo":"操作虚拟机信息", + "i18nTextDefine_Update":"更新", + "i18nTextDefine_InstanceCreationStarting":"创建开始", + "i18nTextDefine_InstanceCreatedSuccessfully":"创建成功", + "i18nTextDefine_InstanceCreationFailed":"创建失败！", + "i18nTextDefine_InstanceTeminationStarting":"删除开始", + "i18nTextDefine_InstanceTeminatedSuccessfully":"删除成功", + "i18nTextDefine_InstanceTeminationFailed":" 删除失败", + "i18nTextDefine_InstanceScaleStarting":"缩扩容开始", + "i18nTextDefine_InstanceScaledSuccessfully":"缩扩容成功", + "i18nTextDefine_InstanceScaleFailed":"缩扩容失败", + "i18nTextDefine_InstanceHealingStarting":"自愈开始", + "i18nTextDefine_InstanceHealedSuccessfully":"自愈成功", + "i18nTextDefine_InstanceHealingFailed":"自愈失败", + "i18nTextDefine_InstanceUpdateStarting":"更新开始", + "i18nTextDefine_InstanceUpdatedSuccessfully":"更新成功", + "i18nTextDefine_InstanceUpdateFailed":"更新失败", + + "ccvpn-creation-component":"--:", + "i18nTextDefine_InstanceCreation":"实例创建", + "i18nTextDefine_InstanceTopology":"实例拓扑", + "i18nTextDefine_Add":"新增", + "i18nTextDefine_Base":"基本信息", + "i18nTextDefine_templateInputs":"模板输入", + + "ccvpn-detail-component":"--:", + "i18nTextDefine_InstanceDetail":"实例详情", + + "onboard-vnf-vm-component":"--:", + "i18nTextDefine_Click_CSAR_File":"单击此处或拖入CSAR文件", + "i18nTextDefine_Uploaded_files":"已上传文件", + "i18nTextDefine_Uploading":"上传中", + "i18nTextDefine_StartUpload":"开始上传", + "i18nTextDefine_File_upload_completed":"文件上传完毕", + "i18nTextDefine_Version":"版本", + "i18nTextDefine_OnboardingState":"分发状态", + "i18nTextDefine_OperationalState":"操作状态", + "i18nTextDefine_UsageState":"使用状态", + "i18nTextDefine_Operationbutton":"操作按钮", + + "management-component":"--:", + "i18nTextDefine_Create_initial_customer":"创建初始用户", + "i18nTextDefine_Customer_not_in_ONAP":"ONAP尚未存在已创建用户", + "i18nTextDefine_createCustomer&serviceType":"请创建用户及其服务类型", + "i18nTextDefine_input_customerName":"输入用户名称", + + "customer-component":"--:", + "i18nTextDefine_Instance_Count_of_Customer":"用户实例计数", + "i18nTextDefine_users":"用户", + "i18nTextDefine_Instance_Count_of_ServiceType":"服务类型实例计数", + "i18nTextDefine_Input_ServicesType":"输入服务类型", + "i18nTextDefine_Input_Sure_deleteCustomer":"您确定删除此用户吗？", + "i18nTextDefine_Input_Sure_deleteServiceType":"您确定删除此服务类型吗？", + "i18nTextDefine_CustomerName":"用户名称", + "i18nTextDefine_CustomerID":"用户ID", + + "ccvpn-network-component":"--:", + "i18nTextDefine_AddLink":"添加链接", + "i18nTextDefine_SetAttribtes":"设置属性", + "i18nTextDefine_LinkName":"链接名称", + "i18nTextDefine_LeftPort":"左侧端口", + "i18nTextDefine_Network":"网络", + "i18nTextDefine_Node":"节点", + "i18nTextDefine_TerminalPoint":"终端", + "i18nTextDefine_RightPort":"右侧端口", + "i18nTextDefine_PartnerNetwork":"伙伴网络", + "i18nTextDefine_HostUrl":"主机网址", + "i18nTextDefine_deleteLink":"删除链接" +}
\ No newline at end of file diff --git a/usecaseui-portal/src/assets/i18n/en.json b/usecaseui-portal/src/assets/i18n/en.json index 9b191f8e..255134f8 100644 --- a/usecaseui-portal/src/assets/i18n/en.json +++ b/usecaseui-portal/src/assets/i18n/en.json @@ -1,22 +1,135 @@ { - "Language":"--:", - "zh":"Chinese", - "en":"English", - "app-component":"--:", - "Home":"Home", - "Services":"Services", - "Services List":"Services List", - "Alarm":"Alarm", - "Performance":"Performance", - "Monitor":"Monitor", - "Network":"Network", + "i18nTextDefine_Home":"Home", + "i18nTextDefine_Customer":"Customer", + "i18nTextDefine_Monitor":"Monitor", + "i18nTextDefine_Services":"Services", + "i18nTextDefine_ServicesList":"Services List", + "i18nTextDefine_PackageManagement":"Package Management", + "i18nTextDefine_Alarm":"Alarm", + "i18nTextDefine_Performance":"Performance", + "i18nTextDefine_NetworkTopology":"Network Topology", "home-component":"--:", - "Overall trend":"Overall trend", - "SERVICES":"SERVICES", - "services":"services", - "services has been created":"services has been created", - "PERFORMANCE":"PERFORMANCE", - "VM Performance":"VM Performance" + "i18nTextDefine_SERVICES":"SERVICES", + "i18nTextDefine_PACKAGE":"PACKAGE", + "i18nTextDefine_Total":"Total", + "i18nTextDefine_cutomers_and":"cutomers and", + "i18nTextDefine_service_instance":"Service instance", + "i18nTextDefine_ViewDetails":"View Details", + "i18nTextDefine_ALARM":"ALARM", + "i18nTextDefine_VNF_Alarm":"VNF Alarm", + "i18nTextDefine_VM_Alarm":"VM Alarm", + "i18nTextDefine_VM_Performance":"VM PERFORMANCE", + + "services-list-component":"--:", + "i18nTextDefine_ServiceType":"Service Type", + "i18nTextDefine_Create":"Create", + "i18nTextDefine_Failed":"Failed", + "i18nTextDefine_Success":"Success", + "i18nTextDefine_InProgress":"In Progress", + "i18nTextDefine_End_To_End_Service":"End To End Service", + "i18nTextDefine_Network_Service":"Network Service", + "i18nTextDefine_Cross_Domain_and_Cross_Layer_VPN":"Cross Domain and Cross Layer VPN", + "i18nTextDefine_NO":"NO", + "i18nTextDefine_Name":"Name", + "i18nTextDefine_Description":"Description", + "i18nTextDefine_UseCase":"Use Case", + "i18nTextDefine_Status":"Status", + "i18nTextDefine_Action":"Action", + "i18nTextDefine_Template":"Template", + "i18nTextDefine_Orchestrator":"Orchestrator", + "i18nTextDefine_ServiceCreation":"Service Creation", + "i18nTextDefine_Cancel":"Cancel", + "i18nTextDefine_modelOk":"OK", + "i18nTextDefine_Scale":"Scale", + "i18nTextDefine_SureScale":"Are you sure scale this instance?", + "i18nTextDefine_InstanceName":"Instance Name", + "i18nTextDefine_InstanceID":"Instance ID", + "i18nTextDefine_ScaleType":"Scale Type", + "i18nTextDefine_AspectId":"AspectId", + "i18nTextDefine_Number_Of_Steps":"Number Of Steps", + "i18nTextDefine_ScalingDirection":"Scaling Direction", + "i18nTextDefine_delete":"Delete", + "i18nTextDefine_SureDelete":"Are you sure delete this instance?", + "i18nTextDefine_terminationType":"Termination Type", + "i18nTextDefine_graceful":"graceful", + "i18nTextDefine_forceful":"forceful", + "i18nTextDefine_gracefulTerminationTimeout":"graceful Termination Timeout", + "i18nTextDefine_Heal":"Heal", + "i18nTextDefine_SureHeal":"Are you sure heal this instance?", + "i18nTextDefine_degreeHealing":"degreeHealing", + "i18nTextDefine_actionsHealing":"actionsHealing", + "i18nTextDefine_healScript":"healScript", + "i18nTextDefine_additionalParamsforNs":"additional Params for NS", + "i18nTextDefine_cause":"cause", + "i18nTextDefine_action":"action", + "i18nTextDefine_actionvminfo":"actionvminfo", + "i18nTextDefine_Update":"Update", + "i18nTextDefine_InstanceCreationStarting":"instance creation is starting.", + "i18nTextDefine_InstanceCreatedSuccessfully":"instance was created successfully.", + "i18nTextDefine_InstanceCreationFailed":"instance creation failed!!!", + "i18nTextDefine_InstanceTeminationStarting":"instance temination is starting.", + "i18nTextDefine_InstanceTeminatedSuccessfully":"instance was teminated successfully.", + "i18nTextDefine_InstanceTeminationFailed":" instance temination failed!!!", + "i18nTextDefine_InstanceScaleStarting":"instance scale is starting.", + "i18nTextDefine_InstanceScaledSuccessfully":"instance was scaled successfully.", + "i18nTextDefine_InstanceScaleFailed":"instance scale failed!!!", + "i18nTextDefine_InstanceHealingStarting":" instance healing is starting.", + "i18nTextDefine_InstanceHealedSuccessfully":"instance was healed successfully.", + "i18nTextDefine_InstanceHealingFailed":"instance healing failed!!!", + "i18nTextDefine_InstanceUpdateStarting":"instance update is starting.", + "i18nTextDefine_InstanceUpdatedSuccessfully":"instance was updated successfully.", + "i18nTextDefine_InstanceUpdateFailed":"instance update failed!!!", + + "ccvpn-creation-component":"--:", + "i18nTextDefine_InstanceCreation":"Instance Creation", + "i18nTextDefine_InstanceTopology":"Instance Topology", + "i18nTextDefine_Add":"Add", + "i18nTextDefine_Base":"Base", + "i18nTextDefine_templateInputs":"Template Inputs", + + "ccvpn-detail-component":"--:", + "i18nTextDefine_InstanceDetail":"Instance Detail", + + "onboard-vnf-vm-component":"--:", + "i18nTextDefine_Click_CSAR_File":"Click or drag CSAR File here", + "i18nTextDefine_Uploaded_files":"Uploaded files", + "i18nTextDefine_Uploading":"Uploading", + "i18nTextDefine_StartUpload":"StartUpload", + "i18nTextDefine_File_upload_completed":"File upload completed", + "i18nTextDefine_Version":"Version", + "i18nTextDefine_OnboardingState":"Onboarding State", + "i18nTextDefine_OperationalState":"Operational State", + "i18nTextDefine_UsageState":"Usage State", + "i18nTextDefine_Operationbutton":"Operation button", + + "management-component":"--:", + "i18nTextDefine_Create_initial_customer":"Create initial customer", + "i18nTextDefine_Customer_not_in_ONAP":"Customer has not been created in ONAP", + "i18nTextDefine_createCustomer":"Please create customer and its service type", + "i18nTextDefine_Input_customerName":"Input customer name", + + "customer-component":"--:", + "i18nTextDefine_Instance_Count_of_Customer":"Instance Count of Customer", + "i18nTextDefine_users":"Users", + "i18nTextDefine_Instance_Count_of_ServiceType":"Instance Count of Service Type", + "i18nTextDefine_Input_ServicesType":"Input services type", + "i18nTextDefine_Input_Sure_deleteCustomer":"Are you sure delete this Customer ?", + "i18nTextDefine_Input_Sure_deleteServiceType":"Are you sure delete this Service Type ?", + "i18nTextDefine_CustomerName":"Customer Name", + "i18nTextDefine_CustomerID":"Customer ID", + + "ccvpn-network-component":"--:", + "i18nTextDefine_AddLink":"Add Link", + "i18nTextDefine_SetAttribtes":"Set Attribtes", + "i18nTextDefine_LinkName":"Link Name ", + "i18nTextDefine_LeftPort":"Left Port", + "i18nTextDefine_Network":"Network", + "i18nTextDefine_Node":"Node", + "i18nTextDefine_TerminalPoint":"Terminal Point", + "i18nTextDefine_RightPort":"Right Port", + "i18nTextDefine_PartnerNetwork":"Partner Network", + "i18nTextDefine_HostUrl":"Host Url", + "i18nTextDefine_DeleteLink":"Delete Link" }
\ No newline at end of file diff --git a/usecaseui-portal/src/assets/i18n/zh.json b/usecaseui-portal/src/assets/i18n/zh.json deleted file mode 100644 index c360c822..00000000 --- a/usecaseui-portal/src/assets/i18n/zh.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "Language":"--:", - "zh":"中文", - "en":"英文", - - "app-component":"--:", - "Home":"首页", - "Services":"服务", - "Services List":"服务列表", - "Alarm":"告警", - "Monitor":"监控", - "Performance":"性能", - "Network":"网云", - - "home-component":"--:", - "Overall trend":"总体趋势", - "SERVICES":"服务", - "services":"条服务", - "services has been created":"条已创建的服务", - "PERFORMANCE":"性能", - "VM Performance":"VM 性能" -}
\ No newline at end of file diff --git a/usecaseui-portal/src/assets/images/Services-icon-active.png b/usecaseui-portal/src/assets/images/Services-icon-active.png Binary files differnew file mode 100644 index 00000000..a1b8c3e9 --- /dev/null +++ b/usecaseui-portal/src/assets/images/Services-icon-active.png diff --git a/usecaseui-portal/src/assets/images/Services-icon.png b/usecaseui-portal/src/assets/images/Services-icon.png Binary files differnew file mode 100644 index 00000000..0ca54865 --- /dev/null +++ b/usecaseui-portal/src/assets/images/Services-icon.png diff --git a/usecaseui-portal/src/assets/images/UUIMenuBar.png b/usecaseui-portal/src/assets/images/UUIMenuBar.png Binary files differnew file mode 100644 index 00000000..7faade31 --- /dev/null +++ b/usecaseui-portal/src/assets/images/UUIMenuBar.png diff --git a/usecaseui-portal/src/assets/images/customer-icon-active.png b/usecaseui-portal/src/assets/images/customer-icon-active.png Binary files differnew file mode 100644 index 00000000..a9155bf3 --- /dev/null +++ b/usecaseui-portal/src/assets/images/customer-icon-active.png diff --git a/usecaseui-portal/src/assets/images/customer-icon.png b/usecaseui-portal/src/assets/images/customer-icon.png Binary files differnew file mode 100644 index 00000000..f0454173 --- /dev/null +++ b/usecaseui-portal/src/assets/images/customer-icon.png diff --git a/usecaseui-portal/src/assets/images/customerBarUser.png b/usecaseui-portal/src/assets/images/customerBarUser.png Binary files differnew file mode 100644 index 00000000..54aef5f8 --- /dev/null +++ b/usecaseui-portal/src/assets/images/customerBarUser.png diff --git a/usecaseui-portal/src/assets/images/execute-faild.png b/usecaseui-portal/src/assets/images/execute-faild.png Binary files differnew file mode 100644 index 00000000..91ab52fe --- /dev/null +++ b/usecaseui-portal/src/assets/images/execute-faild.png diff --git a/usecaseui-portal/src/assets/images/execute-inproess.png b/usecaseui-portal/src/assets/images/execute-inproess.png Binary files differnew file mode 100644 index 00000000..6a1beb3b --- /dev/null +++ b/usecaseui-portal/src/assets/images/execute-inproess.png diff --git a/usecaseui-portal/src/assets/images/execute-success.png b/usecaseui-portal/src/assets/images/execute-success.png Binary files differnew file mode 100644 index 00000000..36d67efd --- /dev/null +++ b/usecaseui-portal/src/assets/images/execute-success.png diff --git a/usecaseui-portal/src/assets/images/home-icon-active.png b/usecaseui-portal/src/assets/images/home-icon-active.png Binary files differnew file mode 100644 index 00000000..c9371550 --- /dev/null +++ b/usecaseui-portal/src/assets/images/home-icon-active.png diff --git a/usecaseui-portal/src/assets/images/home-icon.png b/usecaseui-portal/src/assets/images/home-icon.png Binary files differnew file mode 100644 index 00000000..3a5e9212 --- /dev/null +++ b/usecaseui-portal/src/assets/images/home-icon.png diff --git a/usecaseui-portal/src/assets/images/monitor-icon-active.png b/usecaseui-portal/src/assets/images/monitor-icon-active.png Binary files differnew file mode 100644 index 00000000..6e06b662 --- /dev/null +++ b/usecaseui-portal/src/assets/images/monitor-icon-active.png diff --git a/usecaseui-portal/src/assets/images/monitor-icon.png b/usecaseui-portal/src/assets/images/monitor-icon.png Binary files differnew file mode 100644 index 00000000..8366b60b --- /dev/null +++ b/usecaseui-portal/src/assets/images/monitor-icon.png diff --git a/usecaseui-portal/src/assets/images/network-icon-active.png b/usecaseui-portal/src/assets/images/network-icon-active.png Binary files differnew file mode 100644 index 00000000..12bde3d4 --- /dev/null +++ b/usecaseui-portal/src/assets/images/network-icon-active.png diff --git a/usecaseui-portal/src/assets/images/network-icon.png b/usecaseui-portal/src/assets/images/network-icon.png Binary files differnew file mode 100644 index 00000000..c42afa05 --- /dev/null +++ b/usecaseui-portal/src/assets/images/network-icon.png diff --git a/usecaseui-portal/src/assets/images/notificationmodel.png b/usecaseui-portal/src/assets/images/notificationmodel.png Binary files differnew file mode 100644 index 00000000..315ed211 --- /dev/null +++ b/usecaseui-portal/src/assets/images/notificationmodel.png diff --git a/usecaseui-portal/src/assets/images/uui-logo130.png b/usecaseui-portal/src/assets/images/uui-logo130.png Binary files differnew file mode 100644 index 00000000..2843b006 --- /dev/null +++ b/usecaseui-portal/src/assets/images/uui-logo130.png diff --git a/usecaseui-portal/src/index.html b/usecaseui-portal/src/index.html index d2fc65f8..a2d2186f 100644 --- a/usecaseui-portal/src/index.html +++ b/usecaseui-portal/src/index.html @@ -17,7 +17,7 @@ <html lang="en"> <head> <meta charset="utf-8"> - <title>Uui2</title> + <title>UUI</title> <base href="./"> <meta name="viewport" content="width=device-width, initial-scale=1"> diff --git a/usecaseui-portal/src/styles.less b/usecaseui-portal/src/styles.less index 86c5b08f..a5a95a1d 100644 --- a/usecaseui-portal/src/styles.less +++ b/usecaseui-portal/src/styles.less @@ -73,7 +73,7 @@ nz-table { } } -// ҳʽ +// ����ҳ��������ʽ .detailInformatioin { nz-table { .ant-table-small { @@ -406,7 +406,7 @@ nz-modal .serviceCreationModel.ant-modal,nz-modal .deleteModel.ant-modal, nz-mod background: #fff; padding: 0; .ant-tabs-tabpane { - height: 400px; + height: 380px; background: #fff; border-radius: 0px 0px 4px 4px; border: 1px solid rgba(13, 169, 226, 0.8); @@ -713,7 +713,9 @@ nz-modal .nsdeleteModel.ant-modal { } } } - +nz-modal .deleteServiceTypeModel.ant-modal{ + height: 510px !important; +} nz-modal .healModel.ant-modal { min-height: 470px !important; } @@ -721,4 +723,59 @@ nz-modal .healModel.ant-modal { nz-modal .scaleModel.ant-modal { height: 628px !important; overflow: auto; +} + +//2019.05.09 add notification model +nz-notification-container .ant-notification{ + width: 592px!important; + max-width: 592px!important; + background-image: url("assets/images/notificationmodel.png"); + background-repeat: no-repeat; + opacity: 0.8; + nz-notification{ + width: 100%!important; + opacity: 1!important; + color: #ffffff; + .ant-notification-notice{ + width: 100%!important; + height: 140px !important; + background: rgba(255,255,255,0); + opacity: 1!important; + color: #ffffff; + .ant-notification-notice-content{ + .ant-notification-notice-icon{} + .ant-notification-notice-message{ + margin-left: 88px; + font-size: 18px; + color: #ffffff; + font-weight: 500; + } + .ant-notification-notice-description{ + margin-left: 88px; + .notificationlist{ + height: 25px; + line-height: 25px; + margin-bottom: 5px; + p,span{ + display: inline-block; + margin-bottom: 0!important; + margin-right: 6px; + } + span{ + color: #D9DEF1; + } + } + } + } + .ant-notification-notice-close,.ant-notification-notice-close:hover{ + color: #ffffff!important; + } + } + } +} +.ant-menu-dark .ant-menu-submenu-open,.ant-menu-dark .ant-menu-submenu-title:hover{ + color: #ffffff!important; +} +.ant-menu-dark .ant-menu-inline.ant-menu-sub{ + background:#313449!important; }
\ No newline at end of file |
