From efe7d00c5ce63fa5ab28158485876d3772194c1f Mon Sep 17 00:00:00 2001 From: guochuyicmri Date: Mon, 21 Jan 2019 16:53:17 +0800 Subject: Fix instance instantiation for CCVPN Change-Id: I4920a1e277de18d55599aff8d3c2bbd7b49480ab Issue-ID: USECASEUI-170 Signed-off-by: guochuyicmri --- .../services-list/services-list.component.html | 486 +++++++++++---------- .../services-list/services-list.component.less | 102 ++++- .../services-list/services-list.component.ts | 18 + 3 files changed, 373 insertions(+), 233 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 76950c32..28162251 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 @@ -13,236 +13,276 @@ See the License for the specific language governing permissions and limitations under the License. --> -

Services List

-
-
- Customer: - - - - - -    - Service Type: - - - - +
+ Customer: + + + + - - - Service: - - - - - - - +    + Service Type: + + + + -
-
- SOTN VPN: - - - + + +
+ Service: + + + + + + + +
-

- SITE: - - - - -
-
- SD-WAN: - - - -
-
+
+
+ SOTN VPN: + + + +
+
+ SITE: + + + +
+
+
+ SD-WAN: + + + +
+
+
-
- TEMPLATE: - - - -
- +
+
+ TEMPLATE: + + + +
+
+
-
- - - - NO - - Service Instance Id - Name - Type - Status - Action - - - - - - {{pageSize*(pageIndex-1) + i+1}} - - {{data["service-instance-id"] || data.nsInstanceId}} - {{data["service-instance-name"] || data.nsName}} - {{data.serviceDomain}} - + +
    +
  • + {{item.serviceDomain}} +
    + {{item.number}}
    + {{item.serviceDomain}}  Service Instances +
    +
    • +
+
+ + + + NO + + Service Instance Id + Name + Service + Status + Action + + + + + + {{pageSize*(pageIndex-1) + i+1}} + + {{data["service-instance-id"] || data.nsInstanceId}} + {{data["service-instance-name"] || data.nsName}} + + {{data.serviceDomain}} + + {{data.tips}} - - - - - - - - - - - - - - {{item["service-instance-id"] || item.nsInstanceId || item.vnfInstanceId}} - {{item["service-instance-name"] || item.nsName || item.vnfInstanceName}} - {{item.serviceDomain}} - - {{item.status || "Available"}} - - - - - - - - - + + + + + + + + + + + + + + {{item["service-instance-id"] || item.nsInstanceId || item.vnfInstanceId}} + {{item["service-instance-name"] || item.nsName || item.vnfInstanceName}} + {{item.serviceDomain}} + + {{item.status || "Available"}} + + + + + + + + + - -

Are you sure heal this instance?

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

{{ item.netWorkServiceName }}

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

Are you sure delete this instance?

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

Are you sure heal this instance?

- Instance ID: {{ thisService["service-instance-id"] || thisService["nsInstanceId"] || thisService["vnfInstanceId"]}} - -
- degreeHealing: - - - - - - -
- actionsHealing: - -
-
- -   -
-
- healScript: - -
- additionalParamsforNs: - -
-
- Key:   - Value: - -
-
-
- -
- cause: - - action: - - actionvminfo: - - - -
- -
+ +

Are you sure heal this instance? +

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

{{ item.netWorkServiceName }}

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

Are you sure delete this instance? +

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

Are you sure heal this instance? +

+ Instance ID: {{ thisService["service-instance-id"] || thisService["nsInstanceId"] || + thisService["vnfInstanceId"]}} + +
+ degreeHealing: + + + + + + +
+ actionsHealing: + +
+
+ + +   +
+
+ healScript: + +
+ additionalParamsforNs: + +
+
+ Key:   + Value: + +
+
+
+ +
+ cause: + + action: + + actionvminfo: + + + +
+ +
-
- -
-
- - -
-
- - -
+
+ +
+
+ + +
+
+ + +
+ + \ 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 40c00231..3ef3fde2 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 @@ -25,25 +25,31 @@ hr { margin-bottom: 20px; } .action { - margin-bottom: 20px; + margin-bottom: 15px; + padding: 28px; + background: #ffffff; + position: relative; span { display: inline-block; font: 700 14px "Arial"; - color: #4c5e70; + color: #3C4F8C; + margin-right: 5px; } nz-dropdown { vertical-align: middle; + background-color:#ffffff; :hover{ - border-color: #147dc2; + border-color: #48C6EF; } button { width: 165px; - height: 30px; - background-color: #eceff4; + height: 42px; + background-color:#ffffff; text-align: left; - border-color: #9fa9ab; + border-color: #EEEEEE; span { font-weight: 400; + color: #3C4F8C; display: inline-block; width: 120px; overflow: hidden; @@ -56,17 +62,69 @@ hr { right: 10px; } } - //下拉框中的样式在style.less中，下拉框是在body中额外临时生成的 } + // //下拉框中的样式在style.less中，下拉框是在body中额外临时生成的 .create { - float: right; - height: 30px; - padding: 0 10px; + position: absolute; + right: 3%; + top:50%; + width:116px; + height:42px; + background:linear-gradient(90deg,rgba(99,194,246,1) 0%,rgba(62,155,255,1) 100%); + border-radius:2px; + margin-top: -15px; span { color: #fff; font-weight: 400; + font-size: 18px; + } + .anticon-plus-circle-o{ + font-size: 18px; } } + .create.ant-btn.ant-btn-primary{ + border: none; + } + +} +.top-num{ + overflow: auto; +} +.top-list{ + position: relative; + width:360px; + height:160px; + margin: 15px 15px 30px 15px; + 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); + border-radius:2px; +} +.top-list .round{ + position: absolute; + width:80px; + height:80px; + line-height: 80px; + text-align: center; + top:50%; + left: 10px; + margin-top: -40px; + background:#E0EDFF; + border:2px solid rgba(224,237,255,1); + border-radius: 50%; + font-size:18px; + font-family:ArialMT; + color:#3C4F8C; +} +.top-list .top-list-text{ + position: absolute; + text-align: right; + height: 40px; + line-height: 20px; + top:50%; + margin-top: -20px; + right: 20px; + color: #fff; } .list { background-color: #fff; @@ -154,3 +212,27 @@ hr { padding: 20px 32px; z-index: 3; } +/*2019.01.14*/ +.e2eColor{ + color: #5B45E7; +} +.nsColor{ + color: #F96D7D; +} +.ccvpnColor{ + color: #3E86EC; +} +.sotnColor{ + color: #FFB629; +} +.select-list{ + width: 280px; + height: 32px; + line-height: 32px; + margin: 25px auto; +} +.select-list>span{ + text-align: left; + 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 8c273602..7149ae2f 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 @@ -40,6 +40,24 @@ export class ServicesListComponent implements OnInit { serviceTypeSelected = {name:null}; listSortMasters=JSON.parse(sessionStorage.getItem('listSortMasters')); language="en"; + serviceMunber = [ + { + "serviceDomain": "E2E", + "number": 10 + }, + { + "serviceDomain": "NS", + "number": 20 + }, + { + "serviceDomain": "SOTN", + "number": 30 + }, + { + "serviceDomain": "CCVPN", + "number": 40 + } + ]; getallCustomers(){ console.log(this.listSortMasters); -- cgit 1.2.3-korg