From b19b6af7444f5c5b9b2869270e26e76cc5d47f2d Mon Sep 17 00:00:00 2001 From: guochuyicmri Date: Fri, 29 Mar 2019 17:30:57 +0800 Subject: Service instance lifecycle management Change-Id: I9ec0d53ead1b19a3de8902cde71dc341fba3d7cf Issue-ID: USECASEUI-218 Signed-off-by: guochuyicmri --- .../services-list/services-list.component.html | 57 +++++++++--- .../services-list/services-list.component.less | 100 ++++++++++++++++----- .../services-list/services-list.component.ts | 33 ++++++- 3 files changed, 155 insertions(+), 35 deletions(-) (limited to 'usecaseui-portal/src/app') 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 4a1a44d3..9e36c7b3 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 @@ -14,7 +14,8 @@ limitations under the License. -->
- Customer: + + Customer: @@ -25,8 +26,7 @@ -    - Service Type: + Service Type: @@ -40,10 +40,22 @@ -
- Service: + Customer: + + + +
+
+ Service Type: + + + +
+
+ Service: @@ -62,14 +74,14 @@
- SITE: + SITE:
- SD-WAN: + SD-WAN: @@ -144,8 +156,10 @@ {{data["service-instance-id"] || data.nsInstanceId}} {{data["service-instance-name"] || data.nsName}} - - {{data.serviceDomain}} + +

+ {{data.serviceDomain}} +

+ class="anticon anticon-bars" (click)="serviceDetail(data)"> - + + +
    +
  • + + scale +
    • +
  • + + update +
    • +
@@ -171,7 +198,11 @@ {{item["service-instance-id"] || item.nsInstanceId || item.vnfInstanceId}} {{item["service-instance-name"] || item.nsName || item.vnfInstanceName}} - {{item.serviceDomain}} + +

+ {{item.serviceDomain}} +

+ {{data.tips}} 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 55419785..ec4a7f76 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 @@ -73,7 +73,7 @@ hr { top:50%; width:116px; height:42px; - background:linear-gradient(90deg,rgba(99,194,246,1) 0%,rgba(62,155,255,1) 100%); + background:#0DA9E2; border-radius:2px; margin-top: -15px; span { @@ -89,7 +89,8 @@ hr { border: none; } .create:hover{ - background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important; + background:#09C6E2; + //background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important; } } @@ -100,21 +101,34 @@ hr { .top-list{ position: relative; width:22%; - height:160px; - margin: 15px 1.5%; - float: left; - background:linear-gradient(90deg,rgba(16,174,222,1) 0%,rgba(43,206,202,1) 100%); - box-shadow:0px 10px 15px 2px rgba(222,222,222,1); + height:184px; + margin: 15px 1.5%; + float: left; + background:url("../../../assets/images/servicelist-e2e.png") no-repeat; + background-size: 100% 100%; + //background:linear-gradient(90deg,rgba(16,174,222,1) 0%,rgba(43,206,202,1) 100%); border-radius:2px; } +.top-num .top-list:nth-child(2){ + background:url("../../../assets/images/servicelist-ns.png") no-repeat; + background-size: 100% 100%; +} +.top-num .top-list:nth-child(3){ + background:url("../../../assets/images/servicelist-cccvpn.png") no-repeat; + background-size: 100% 100%; +} +.top-num .top-list:nth-child(4){ + background:url("../../../assets/images/servicelist-sotn.png") no-repeat; + background-size: 100% 100%; +} .top-list .round{ position: absolute; width: 60px; height: 60px; line-height: 60px; - text-align: center; - top:50%; - left: 10px; + text-align: center; + top:45%; + left: 50px; margin-top: -30px; background:#E0EDFF; border:2px solid rgba(224,237,255,1); @@ -128,12 +142,15 @@ hr { text-align: right; height: 40px; line-height: 20px; - top:50%; + top:45%; margin-top: -20px; - right: 15px; + right: 50px; color: #fff; span:nth-child(1){ + display: inline-block; font-size: 22px; + font-weight: 500; + margin-bottom: 10px; } } .list { @@ -143,6 +160,7 @@ hr { nz-table { tbody { td { + position: relative; span.active { font-size: 14px; color: #147dc2; @@ -188,6 +206,26 @@ hr { color: #aaa; opacity: 0.6; } + .icon-more{ + position: absolute; + width: 115px; + height: 135px; + //height: 156px; + top:50px; + padding:15px 0 0 15px; + background: #ffffff; + z-index: 2; + border-radius: 5px; + box-shadow: 0px 10px 15px 2px rgba(247, 247, 247, 0.5); + li{ + margin-bottom:10px; + line-height: 20px; + text-align: left; + span{ + margin-left: 5px; + } + } + } } tr.childtr { td { @@ -223,26 +261,48 @@ hr { z-index: 3; } /*2019.01.14*/ -.e2eColor{ - color: #5B45E7; +.e2eColor,.nsColor,.ccvpnColor,.sotnColor,.voLTEColor{ + color: #FFFFFF; + width:120px; + height: 34px; + line-height: 34px; + margin-bottom: 0!important; + text-align: center; + background:linear-gradient(131deg,rgba(79,151,239,1) 0%,rgba(48,217,196,1) 100%); + border-radius:4px } .nsColor{ - color: #F96D7D; + background:linear-gradient(135deg,rgba(252,167,91,1) 0%,rgba(253,203,106,1) 100%); } -.ccvpnColor{ - color: #3E86EC; +.ccvpnColor{ + background:linear-gradient(135deg,rgba(81,113,251,1) 0%,rgba(201,123,254,1) 100%); } .sotnColor{ - color: #FFB629; + background:linear-gradient(133deg,rgba(24,179,170,1) 0%,rgba(70,216,178,1) 100%); +} +.voLTEColor{ + background:#0AD251; } +.vnfColor,.siteColor,.SDWANColor{ + color:rgba(60,79,140,0.5); + width:120px; + height: 34px; + line-height: 34px; + margin-bottom: 0!important; + text-align: center; + background:rgba(238,238,238,1); + border-radius:4px; +} + .select-list{ - width: 280px; + width: 320px; height: 32px; line-height: 32px; margin: 25px auto; } .select-list>span{ - text-align: left; + text-align: right; + width: 110px!important; line-height: 32px; } 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 0b550caa..ed724383 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 @@ -35,14 +35,19 @@ export class ServicesListComponent implements OnInit { } // customer servicetype isSol005Interface = false; - customerList = []; orchestratorList = []; + customerList = []; + customerList2 = []; customerSelected = {name:null,id:null}; - orchestratorSelected = {name:null,id:null}; + customerSelected2 = {name: null, id: null}; serviceTypeList = []; + serviceTypeList2 = []; serviceTypeSelected = {name:null}; + serviceTypeSelected2 = {name: null}; + orchestratorSelected = {name:null,id:null}; listSortMasters=JSON.parse(sessionStorage.getItem('listSortMasters')); language="en"; + iconMore=false; serviceMunber = [ { "serviceDomain": "E2E", @@ -62,6 +67,14 @@ export class ServicesListComponent implements OnInit { } ]; + //The icon behind each row of data in the table expands + iconMoreShow(data){ + if(data.iconMore==false){ + data.iconMore=true; + }else { + data.iconMore=false; + } + } getallCustomers(){ console.log(this.listSortMasters); this.myhttp.getAllCustomers() @@ -71,7 +84,15 @@ 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); // console.log(this.customers) }) @@ -94,11 +115,19 @@ export class ServicesListComponent implements OnInit { this.myhttp.getServiceTypes(this.customerSelected) .subscribe((data)=>{ this.serviceTypeList = data.map((item)=>{return {name:item["service-type"]}}); + this.serviceTypeList2 = data.map((item) => { + return {name: item["service-type"]} + }); if(this.serviceTypeList.length==0){ console.log("serviceTypeList.length == 0",this.serviceTypeList); return false; } + if (this.serviceTypeList2.length == 0) { + console.log("serviceTypeList2.length == 0", this.serviceTypeList2); + return false; + } this.serviceTypeSelected = this.serviceTypeList[0]; + this.serviceTypeSelected2 = this.serviceTypeList2[0]; this.choseServiceType(this.serviceTypeSelected); // console.log(this.listServiceTypes); }) -- cgit 1.2.3-korg