From 1d4225938f4975fa49d8ed8718f878f682d9b2bd Mon Sep 17 00:00:00 2001 From: guochuyicmri Date: Tue, 16 Apr 2019 10:38:00 +0800 Subject: Service instance lifecycle management Change-Id: Ia4d422bcd68f12942fbcf5b9a7c19d713f927270 Issue-ID: USECASEUI-218 Signed-off-by: guochuyicmri --- .../services-list/services-list.component.html | 275 +++++++++------------ .../services-list/services-list.component.less | 115 --------- .../services-list/services-list.component.ts | 1 - usecaseui-portal/src/styles.less | 151 ++++++++++- 4 files changed, 260 insertions(+), 282 deletions(-) (limited to 'usecaseui-portal') 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 a415244b..04289c62 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 @@ -41,7 +41,7 @@ class="anticon anticon-plus" style="transform: scale(1.5);line-height: 15px;margin-right: 5px;"> Create + (nzOnOk)="handleOk()" nzClassName="serviceCreationModel">
Customer: @@ -54,28 +54,12 @@
-
+
TEMPLATE:
- -
-
- Orchestrator: - - - -
-
- -
-
- - -
-
@@ -182,169 +166,135 @@ -

Are you sure heal this instance? -

- Instance ID: {{ thisService["service-instance-id"] || thisService["nsInstanceId"] || - thisService["vnfInstanceId"]}} -
+ (nzOnOk)="scaleOk()" nzClassName="scaleModel"> +

* Are you sure Scale this instance?

+
+

Instance ID:

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

{{ item.netWorkServiceName }}

-
- Scale Type: - - - - - AspectId: - - Number Of Steps: - - Scaling Direction: - - - - +
+ Scale Type: + + + + +
+
+ AspectId: + +
+
+ Number Of Steps: + +
+
+ Scaling Direction: + + + + +
- - - - - - - - - - - - - - - - - - -
-

Delete

-

-
-

* Are you sure delete this instance£¿

+ +

* Are you sure delete this instance?

+
+

Instance Name:

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

Instance ID:

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

Instance Name£º

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

terminationType:

+ + + +
-

Instance Id£º

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

terminationType:

- - - - -
-
-

gracefulTerminationTimeout:

- -
+

gracefulTerminationTimeout:

+
-
- - -
-
+ -
-

Heal

-

-
-

* Are you sure heal this instance£¿

-
-

Instance ID:

-
+

* Are you sure heal this instance?

+
+

Instance ID:

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

degreeHealing:

+ + + + + +
- -
-
-

degreeHealing:

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

cause:

- -
-
-

action:

- -
-
-

actionvminfo:

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

cause:

+ +
+
+

action:

+ +
+
+

actionvminfo:

+ + + +
-
- - - - - - - - - +
@@ -371,4 +321,3 @@
-
\ 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 fd7ef64b..ca0ac419 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 @@ -244,121 +244,6 @@ 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 ae95aec6..113b8e4c 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 @@ -496,7 +496,6 @@ export class ServicesListComponent implements OnInit { this.detailshow2 = true; } this.listDisplay = true; - this.detailshow = true; this.detailData = service; console.log(service); } diff --git a/usecaseui-portal/src/styles.less b/usecaseui-portal/src/styles.less index cae17d18..b12aa622 100644 --- a/usecaseui-portal/src/styles.less +++ b/usecaseui-portal/src/styles.less @@ -278,12 +278,10 @@ nz-range-picker { //2019.01.21 add services-list.component.html //creat -nz-modal { - .ant-modal { +nz-modal .serviceCreationModel.ant-modal,nz-modal .deleteModel.ant-modal, nz-modal .nsdeleteModel.ant-modal, nz-modal .healModel.ant-modal, nz-modal .scaleModel.ant-modal{ height: 628px; background: url("assets/images/create-box.png") no-repeat 100% 110%; overflow: auto; - } .ant-modal-content { height: 600px; background: transparent; @@ -609,4 +607,151 @@ nz-modal { } } +} + +//gong 2019.04.15 services-list.component.html add +//deleteModel style +nz-modal .deleteModel.ant-modal, nz-modal .nsdeleteModel.ant-modal, nz-modal .healModel.ant-modal, nz-modal .scaleModel.ant-modal { + background: #ffffff; + height: 450px; + .ant-modal-content { + height: auto !important; + .ant-modal-header { + border-bottom: 2px solid #07A9E1; + } + .ant-modal-close { + background: #ffffff; + .ant-modal-close-x::before { + color: #B8C0C4; + border: 1px solid #B8C0C4; + } + } + .ant-modal-title { + color: #0DA9E2; + } + } + .ant-modal-body { + padding: 24px 35px; + h3 { + color: #3C4F8C; + margin-bottom: 10px; + } + .question, .heal-question { + margin-bottom: 15px; + h4 { + border-radius: 4px; + font-size: 16px; + color: rgba(60, 79, 140, 0.5); + } + .deleteModelContent, .healModelContent,.scaleModelContent{ + color: #0DA9E2; + width: 306px; + height: 40px; + line-height: 40px; + background: rgba(229, 238, 252, 0.8); + border-radius: 4px; + 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; + } + .e2eScaleContent { + margin: 10px 0; + .e2eScaleLable { + height: 40px; + line-height: 40px; + display: inline-block; + width: 50%; + } + nz-select{ + .ant-select-selection--single { + height: 40px; + .ant-select-selection__rendered { + line-height: 40px; + } + } + } + input{ + height: 40px; + line-height: 40px; + } + nz-input-number { + height: 40px; + .ant-input-number-input-wrap { + height: 40px; + line-height: 40px; + .ant-input-number-input { + height: 38px; + line-height: 38px; + } + } + } + } + } + .ant-modal-footer { + padding: 0; + text-align: center; + button { + margin-top: 35px; + } + button:nth-child(2) { + margin-right: 0; + } + } +} + +nz-modal .nsdeleteModel.ant-modal { + height: 580px !important; + .ant-modal-footer { + padding: 0; + button { + margin-top: 15px; + } + } + .ant-modal-body { + .question { + nz-select { + .ant-select-selection--single { + height: 40px; + } + .ant-select-selection__rendered { + line-height: 40px; + } + } + input { + height: 40px; + line-height: 40px; + } + } + } +} + +nz-modal .healModel.ant-modal { + min-height: 470px !important; +} + +nz-modal .scaleModel.ant-modal { + height: 628px !important; + overflow: auto; } \ No newline at end of file -- cgit 1.2.3-korg