From b1592103a3164e8dced4f843e0b69b2599d1dd60 Mon Sep 17 00:00:00 2001 From: guochuyicmri Date: Fri, 12 Apr 2019 18:06:52 +0800 Subject: Service instance lifecycle management Change-Id: I788dbbc35e29d98885ec8d598929eb8193f6fc4f Issue-ID: USECASEUI-218 Signed-off-by: guochuyicmri --- .../services-list/services-list.component.html | 198 ++++++++++++++------- .../services-list/services-list.component.less | 123 +++++++++++++ .../services-list/services-list.component.ts | 7 + usecaseui-portal/src/styles.less | 14 ++ 4 files changed, 277 insertions(+), 65 deletions(-) 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 de137fd4..a415244b 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 @@ -207,77 +207,144 @@ - -

Are you sure delete this instance? -

- Instance ID: {{ thisService["service-instance-id"] || - thisService["nsInstanceId"] }} -
- terminationType: - - - - - gracefulTerminationTimeout: - + + + + + + + + + + + + + + + + + + + +
+

Delete

+

+
+

* Are you sure delete this instance£¿

+
+

Instance Name£º

+
{{ thisService["service-instance-id"] || + thisService["nsInstanceId"] }}
+
+
+

Instance Id£º

+
{{ thisService["service-instance-name"] || + thisService["nsInstanceName"] }}
+
+
+
+

terminationType:

+ + + + +
+
+

gracefulTerminationTimeout:

+ +
+
- - -

Are you sure heal this instance? -

- Instance ID: {{ thisService["service-instance-id"] || thisService["nsInstanceId"] || - thisService["vnfInstanceId"]}} - -
- degreeHealing: - - - - - - -
- actionsHealing: - -
-
- - -   +
+ + +
+
+ +
+

Heal

+

+
+

* Are you sure heal this instance£¿

+
+

Instance ID:

+
{{ thisService["service-instance-id"] || thisService["nsInstanceId"] || + thisService["vnfInstanceId"]}}
+
+ +
+
+

degreeHealing:

+ + + + + + +
+
+ actionsHealing: + +
+
+ + +   +
+
+ healScript: + +
+ additionalParamsforNs: + +
+
+ Key:   + Value: + +
- healScript: - -
- additionalParamsforNs: - -
-
- Key:   - Value: - + +
+
+

cause:

+
+
+

action:

+ +
+
+

actionvminfo:

+ + + +
+ +
- -
- cause: - - action: - - actionvminfo: - - - +
+ +
- +
+ + + + + + + + +
@@ -303,4 +370,5 @@
- \ No newline at end of file + +
\ No newline at end of file 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 915afd3a..fd7ef64b 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 @@ -27,6 +27,14 @@ hr { .ant-tabs-bar{ margin-bottom: 0!important; } +.mask{ + width: 100%; + height: 100%; + position: absolute; + z-index: 999; + background: rgba(0, 0, 0, 0.65); + top:0; +} .action { margin-bottom: 15px; padding: 28px; @@ -236,6 +244,121 @@ hr { } } } + //2019.0412 add + .nsdeleteModel{ + height: 580px!important; + } + .deleteModel,.healModel{ + width: 428px; + min-height: 450px; + position: fixed; + z-index: 1000; + top:50%; + left:50%; + margin-left: -214px; + margin-top: -225px; + background: #ffffff; + border-radius:4px; + h3{ + width: 100%; + height: 50px; + line-height: 50px; + text-align: center; + position: relative; + color: #0DA9E2; + font-size: 18px; + margin-bottom: 0!important; + i{ + position: absolute; + right: 3%; + cursor: pointer; + background: none!important; + transform: scale(1.5); + vertical-align: middle; + line-height: 50px; + } + } + .line{ + width: 100%; + height: 2px; + background:linear-gradient(180deg,#07A9E1 0%,#30D9C4 100%); + } + .modelText{ + padding: 10px 45px; + .question-title{ + color: #3C4F8C; + font-size: 16px; + font-weight: 500; + span{ + color: red; + } + } + .question,.heal-question{ + margin-bottom: 15px; + h4{ + border-radius:4px; + font-size: 16px; + } + .deleteModelContent,.healModelContent{ + width: 306px; + height: 40px; + line-height: 40px; + background:rgba(229,238,252,0.8); + border-radius:4px; + color: #0DA9E2; + text-indent: 10px; + } + .heal-label{ + float: left; + line-height: 42px; + margin-bottom: 0; + color:rgba(60,79,140,0.5); + } + .heal-input{ + width: 200px; + height: 40px; + border-radius: 6px; + float: right; + margin-right: 30px; + } + .healModelContent{ + width: 200px; + height: 40px; + overflow: hidden; + float: right; + margin-right: 30px + } + } + .heal-question{ + height: 40px; + } + + } + .action-btn{ + margin-top: 20px; + text-align: center; + button{ + width: 126px; + height: 40px; + line-height: 40px; + margin: 0 15px; + border: none; + border-radius:2px; + font-size: 14px!important; + } + button:nth-child(1){ + background:rgba(238,238,238,1); + color: #9DA7C5; + } + button:nth-child(2){ + background:rgba(13,169,226,1); + color: #ffffff; + } + } + } + .healModel{ + min-height: 470px!important; + } } 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 2efe231a..ae95aec6 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 @@ -48,6 +48,7 @@ export class ServicesListComponent implements OnInit { listSortMasters=JSON.parse(sessionStorage.getItem('listSortMasters')); language="en"; iconMore=false; + maskShow=false; serviceMunber = [ { "serviceDomain": "E2E", @@ -438,6 +439,7 @@ 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) @@ -450,6 +452,7 @@ export class ServicesListComponent implements OnInit { } healOk(){ this.healModelVisible = false; + this.maskShow = false; // nsParams this.nsParams.actionsHealing = this.healActions.map((item)=>{return item.value}); let additional = {}; @@ -467,6 +470,7 @@ export class ServicesListComponent implements OnInit { } healCancel(){ this.healModelVisible = false; + this.maskShow = false; } // show detail @@ -504,9 +508,11 @@ 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{ @@ -516,6 +522,7 @@ export class ServicesListComponent implements OnInit { deleteCancel(){ this.deleteModelVisible = false; + this.maskShow = false; } //ccvpn sotn createservice diff --git a/usecaseui-portal/src/styles.less b/usecaseui-portal/src/styles.less index 845187a5..cae17d18 100644 --- a/usecaseui-portal/src/styles.less +++ b/usecaseui-portal/src/styles.less @@ -595,4 +595,18 @@ nz-modal { } } } +} +//gong 2019.04.12 add +.healModel{ + .heal-question{ + nz-select{ + .ant-select-selection{ + height: 42px!important; + .ant-select-selection__rendered{ + line-height: 42px!important; + } + } + + } + } } \ No newline at end of file -- cgit 1.2.3-korg