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 + usecaseui-portal/src/assets/images/create-box.png | Bin 0 -> 61405 bytes usecaseui-portal/src/styles.less | 237 +++++++--- 5 files changed, 561 insertions(+), 282 deletions(-) create mode 100644 usecaseui-portal/src/assets/images/create-box.png (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 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); diff --git a/usecaseui-portal/src/assets/images/create-box.png b/usecaseui-portal/src/assets/images/create-box.png new file mode 100644 index 00000000..5dc9ba35 Binary files /dev/null and b/usecaseui-portal/src/assets/images/create-box.png differ diff --git a/usecaseui-portal/src/styles.less b/usecaseui-portal/src/styles.less index 23b954c8..93e5251c 100644 --- a/usecaseui-portal/src/styles.less +++ b/usecaseui-portal/src/styles.less @@ -1,63 +1,97 @@ /* You can add global styles to this file, and also import other style files */ // 下拉框背景hover状态颜色 .ant-dropdown-menu { - .ant-dropdown-menu-item:hover, .ant-dropdown-menu-submenu-title:hover { - background-color: #3fa8eb; + .ant-dropdown-menu-item:hover, .ant-dropdown-menu-submenu-title:hover { + background-color: #3fa8eb; + a { + color: #fff; } + } } // 表格每页条数选项单位置 nz-table { - .ant-table-thead>tr>th { - color:rgba(60,79,140,0.5); //标题字体颜色 - background-color: #F7F8FC; - border-bottom: 0px solid #e8e8e8; - } - .ant-table-tbody>tr>td{ - background-color:#fff; - border-bottom: 8px solid #F7F8FC; - } - .ant-spin-container { - nz-pagination { - ul { - .ant-pagination-options { - .ant-pagination-options-size-changer.ant-select{ - position: absolute; - left: 0; - } - } + .ant-table-thead > tr > th { + color: rgba(60, 79, 140, 0.5); //标题字体颜色 + background-color: #F7F8FC; + border-bottom: 0px solid #e8e8e8; + } + .ant-table-tbody > tr > td { + background-color: #fff; + border-bottom: 8px solid #F7F8FC; + } + .ant-spin-container { + nz-pagination { + ul { + .ant-pagination-options { + .ant-pagination-options-size-changer.ant-select { + width: 100px; + height: 40px; + line-height: 40px !important; + position: absolute; + left: 0; + color: #3C4F8C; + .ant-select-selection--single { + height: 40px; + line-height: 40px !important; + .ant-select-selection-selected-value { + height: 40px; + line-height: 40px !important; + } } + } + } + } + .ant-pagination.mini.ant-table-pagination { + .ant-pagination-prev, .ant-pagination-item, .ant-pagination-next { + width: 40px; + height: 40px; + line-height: 40px; + .ant-pagination-item-link, .ant-pagination-item-link:after { + width: 40px; + height: 40px; + line-height: 40px; + } } + .ant-pagination-item.ant-pagination-item-active { + background: linear-gradient(270deg, rgba(63, 156, 255, 1) 0%, rgba(98, 193, 246, 1) 100%); + border-radius: 2px; + a { + color: #fff; + } + } + } } + } } // 详情页迷你表格样式 .detailInformatioin { - nz-table { - .ant-table-small { + nz-table { + .ant-table-small { + border-color: #dfdfe0; + border-right: 0; + .ant-table-content { + border-color: #dfdfe0; + .ant-table-body > table { + padding: 0; + .ant-table-thead > tr > th { + background-color: #f0f2f5; + font-weight: 700; + font-size: 18px; + padding: 2px 15px; border-color: #dfdfe0; - border-right: 0; - .ant-table-content { - border-color: #dfdfe0; - .ant-table-body > table { - padding: 0; - .ant-table-thead > tr > th { - background-color: #f0f2f5; - font-weight: 700; - font-size: 14px; - padding: 2px 15px; - border-color: #dfdfe0; - } - .ant-table-tbody > tr > td { - background-color: #f0f2f5; - font-size: 14px; - padding: 2px 15px; - color: #323437; - border-color: #dfdfe0; - } - } - } + } + .ant-table-tbody > tr > td { + background-color: #f0f2f5; + font-size: 14px; + padding: 2px 15px; + color: #323437; + border-color: #dfdfe0; + } } + } } + } } // 日期选择插件背景颜色 @@ -69,14 +103,45 @@ nz-table { } // 分页每页条数选项单位置 nz-pagination { - ul { - .ant-pagination-options { - .ant-pagination-options-size-changer.ant-select{ - position: absolute; - left: 0; - } + ul { + .ant-pagination-options { + .ant-pagination-options-size-changer.ant-select { + position: absolute; + left: 0; + width: 100px; + height: 40px; + color: #3C4F8C; + line-height: 40px !important; + .ant-select-selection--single { + height: 40px; + line-height: 40px !important; + .ant-select-selection-selected-value { + height: 40px; + line-height: 40px !important; + } } + } } + } + .ant-pagination.mini.ant-table-pagination { + .ant-pagination-prev, .ant-pagination-item, .ant-pagination-next { + width: 40px; + height: 40px; + line-height: 40px; + .ant-pagination-item-link, .ant-pagination-item-link:after { + width: 40px; + height: 40px; + line-height: 40px; + } + } + .ant-pagination-item.ant-pagination-item-active { + background: linear-gradient(270deg, rgba(63, 156, 255, 1) 0%, rgba(98, 193, 246, 1) 100%); + border-radius: 2px; + a { + color: #fff; + } + } + } } html,body,div,h1,h2,h3,h4,h5,h6,p,ul,li,a,span { @@ -180,3 +245,77 @@ nz-layout { .ant-calendar-picker { width: 234px !important; } + +//2019.01.21 add services-list.component.html + +nz-modal { + .ant-modal { + height: 628px; + background: url("assets/images/create-box.png") 100% 100%; + } + .ant-modal-content{ + height: 628px; + background:transparent; + } + .ant-modal-header,ant-modal-title,.ant-modal-footer{ + background:transparent; + border: none; + } + .ant-modal-title{ + font-size:20px; + text-align: center; + color:rgba(255,255,255,1); + line-height:23px; + } + .ant-modal-body{ + span{ + font-size: 16px; + color:rgba(60,79,140,0.5); + line-height: 18px; + display: inline-block; + } + nz-select{ + .ant-select-open.ant-select-selection{ + border: #48C6EF; + } + .ant-select-selection__rendered{ + .ant-select-selection-selected-value{ + color:rgba(60,79,140,0.5)!important; + } + } + } + } + .ant-modal-footer{ + margin: 0 auto; + button{ + width: 126px; + height: 40px; + line-height: 40px; + text-align: center; + border: none; + outline: none; + margin-top: 50px; + } + button:nth-child(1){ + background:#EEEEEE; + border-radius:2px; + margin-left: 50px; + margin-right: 10px; + span{ + color: #9DA7C5; + font-size: 14px !important; + } + } + button:nth-child(2){ + background:linear-gradient(310deg,rgba(30,158,255,1) 0%,rgba(99,200,255,1) 100%); + box-shadow:0px 0px 2px 0px rgba(14,90,218,1); + border-radius:2px; + margin-left: 20px; + margin-right: 50px; + span{ + color: #FFFFFF; + font-size: 14px !important; + } + } + } +} \ No newline at end of file -- cgit 1.2.3-korg