From d0f5347dc16b5aa9fc95eb520fbc9a1c7b672b09 Mon Sep 17 00:00:00 2001 From: cyuamber Date: Thu, 22 Aug 2019 16:55:57 +0800 Subject: feat: change the project structure and add mock data function Change-Id: I381845bff5eb37d1fab3eba8cf1ae7838df523b7 Issue-ID: USECASEUI-307 Signed-off-by: cyuamber --- usecaseui-portal/src/app/alarm/alarm.component.css | 164 --- .../src/app/alarm/alarm.component.html | 138 -- .../src/app/alarm/alarm.component.less | 244 ---- .../src/app/alarm/alarm.component.spec.ts | 66 - usecaseui-portal/src/app/alarm/alarm.component.ts | 301 ----- usecaseui-portal/src/app/app-routing.module.ts | 58 +- usecaseui-portal/src/app/app.component.css | 2 +- usecaseui-portal/src/app/app.component.html | 38 +- usecaseui-portal/src/app/app.component.spec.ts | 2 +- usecaseui-portal/src/app/app.component.ts | 4 +- usecaseui-portal/src/app/app.module.ts | 76 +- .../ccvpn-creation/ccvpn-creation.component.css | 321 ----- .../ccvpn-creation/ccvpn-creation.component.html | 272 ---- .../ccvpn-creation.component.spec.ts | 24 - .../app/ccvpn-creation/ccvpn-creation.component.ts | 723 ---------- .../app/ccvpn-detail/ccvpn-detail.component.css | 365 ----- .../app/ccvpn-detail/ccvpn-detail.component.html | 468 ------- .../ccvpn-detail/ccvpn-detail.component.spec.ts | 69 - .../src/app/ccvpn-detail/ccvpn-detail.component.ts | 815 ----------- .../app/ccvpn-network/ccvpn-network.component.css | 119 -- .../app/ccvpn-network/ccvpn-network.component.html | 152 --- .../ccvpn-network/ccvpn-network.component.spec.ts | 40 - .../app/ccvpn-network/ccvpn-network.component.ts | 1270 ------------------ .../app/components/charts/bar/bar.component.html | 22 - .../app/components/charts/bar/bar.component.less | 0 .../components/charts/bar/bar.component.spec.ts | 25 - .../src/app/components/charts/bar/bar.component.ts | 71 - .../app/components/charts/line/line.component.html | 22 - .../app/components/charts/line/line.component.less | 0 .../components/charts/line/line.component.spec.ts | 25 - .../app/components/charts/line/line.component.ts | 105 -- .../app/components/charts/pie/pie.component.html | 24 - .../app/components/charts/pie/pie.component.less | 0 .../components/charts/pie/pie.component.spec.ts | 25 - .../src/app/components/charts/pie/pie.component.ts | 114 -- .../components/customer/customer.component.html | 131 -- .../components/customer/customer.component.less | 254 ---- .../components/customer/customer.component.spec.ts | 25 - .../app/components/customer/customer.component.ts | 552 -------- .../app/components/details/details.component.css | 104 -- .../app/components/details/details.component.html | 68 - .../app/components/details/details.component.less | 111 -- .../components/details/details.component.spec.ts | 25 - .../app/components/details/details.component.ts | 59 - .../e2e-creation/e2e-creation.component.css | 77 -- .../e2e-creation/e2e-creation.component.html | 138 -- .../e2e-creation/e2e-creation.component.less | 159 --- .../e2e-creation/e2e-creation.component.spec.ts | 25 - .../e2e-creation/e2e-creation.component.ts | 354 ----- .../e2e-detail/e2e-detail.component.html | 105 -- .../e2e-detail/e2e-detail.component.less | 139 -- .../e2e-detail/e2e-detail.component.spec.ts | 25 - .../components/e2e-detail/e2e-detail.component.ts | 243 ---- .../graphiclist/graphiclist.component.css | 91 -- .../graphiclist/graphiclist.component.html | 55 - .../graphiclist/graphiclist.component.less | 137 -- .../graphiclist/graphiclist.component.spec.ts | 25 - .../graphiclist/graphiclist.component.ts | 78 -- .../performance-details.component.css | 104 -- .../performance-details.component.html | 61 - .../performance-details.component.less | 110 -- .../performance-details.component.spec.ts | 25 - .../performance-details.component.ts | 57 - .../src/app/core/models/dataInterface.ts | 57 + .../src/app/core/services/homes.service.spec.ts | 15 + .../src/app/core/services/homes.service.ts | 131 ++ .../src/app/core/services/managemencs.service.ts | 91 ++ .../src/app/core/services/myhttp.service.ts | 235 ++++ .../core/services/networkHttpservice.service.ts | 122 ++ .../src/app/core/services/onboard.service.ts | 182 +++ .../src/app/core/services/text.service.spec.ts | 15 + .../src/app/core/services/text.service.ts | 43 + usecaseui-portal/src/app/dataInterface.ts | 57 - .../src/app/fcaps/fcaps.component.html | 3 - .../src/app/fcaps/fcaps.component.less | 0 .../src/app/fcaps/fcaps.component.spec.ts | 25 - usecaseui-portal/src/app/fcaps/fcaps.component.ts | 15 - usecaseui-portal/src/app/home/home.component.css | 158 --- usecaseui-portal/src/app/home/home.component.html | 102 -- usecaseui-portal/src/app/home/home.component.less | 265 ---- .../src/app/home/home.component.spec.ts | 42 - usecaseui-portal/src/app/home/home.component.ts | 531 -------- usecaseui-portal/src/app/homes.service.spec.ts | 15 - usecaseui-portal/src/app/homes.service.ts | 132 -- usecaseui-portal/src/app/managemencs.service.ts | 91 -- .../src/app/management/management.component.html | 36 - .../src/app/management/management.component.less | 79 -- .../app/management/management.component.spec.ts | 25 - .../src/app/management/management.component.ts | 68 - usecaseui-portal/src/app/mock/fakedata.js | 24 + .../src/app/mock/json/LogicalLinksData.json | 168 +++ .../src/app/mock/json/alarmFormData.json | 371 +++++ .../src/app/mock/json/allotted-resources2.json | 1 + .../src/app/mock/json/createService.json | 7 + usecaseui-portal/src/app/mock/json/customers.json | 82 ++ .../src/app/mock/json/deleteService.json | 4 + .../src/app/mock/json/detailsData.json | 19 + .../mock/json/e2eServiceTemplateParameters.json | 71 + .../src/app/mock/json/homeAllData.json | 23 + .../app/mock/json/homePerformanceChartData.json | 4 + .../src/app/mock/json/instanceTableData.json | 505 +++++++ .../src/app/mock/json/instanceTableData2.json | 388 ++++++ .../src/app/mock/json/instanceTableData3.json | 2 + .../src/app/mock/json/instanceTableData4.json | 656 +++++++++ .../src/app/mock/json/netWorkD3Data.json | 94 ++ .../src/app/mock/json/netWorkD3Data2.json | 246 ++++ .../app/mock/json/nsServiceTemplateParameters.json | 354 +++++ .../src/app/mock/json/onboardTableData.json | 103 ++ .../src/app/mock/json/p_interfaces1.json | 17 + .../src/app/mock/json/p_interfaces2.json | 17 + .../src/app/mock/json/pnfdetail-domain.json | 29 + usecaseui-portal/src/app/mock/json/progress.json | 13 + .../json/sdwanvpnServiceTemplateParameters.json | 57 + .../src/app/mock/json/serviceTemplates.json | 19 + .../src/app/mock/json/serviceTemplates2.json | 43 + .../src/app/mock/json/serviceTypes.json | 18 + .../src/app/mock/json/servicesList.json | 4 + .../src/app/mock/json/servicesTableData.json | 127 ++ .../src/app/mock/json/siteAddressData.json | 39 + .../mock/json/siteServiceTemplateParameters.json | 308 +++++ .../src/app/mock/json/sotn-connectivity.json | 94 ++ .../src/app/mock/json/sotn-connectivity2.json | 1 + .../json/sotnvpnServiceTemplateParameters.json | 225 ++++ .../src/app/mock/json/specific_link_nfo.json | 52 + usecaseui-portal/src/app/mock/json/status.json | 3 + usecaseui-portal/src/app/mock/json/status2.json | 3 + usecaseui-portal/src/app/mock/json/url.json | 8 + usecaseui-portal/src/app/mock/json/vpnbinding.json | 82 ++ .../src/app/mock/json/xuran_test_data.json | 8 + usecaseui-portal/src/app/mock/mock.js | 7 + usecaseui-portal/src/app/mock/server.js | 87 ++ usecaseui-portal/src/app/myhttp.service.ts | 38 +- .../src/app/networkHttpservice.service.ts | 122 -- usecaseui-portal/src/app/onboard.service.ts | 182 --- .../performance-vm/performance-vm.component.css | 75 -- .../performance-vm/performance-vm.component.html | 79 -- .../performance-vm/performance-vm.component.less | 76 -- .../performance-vm.component.spec.ts | 68 - .../performance-vm/performance-vm.component.ts | 159 --- .../performance-vnf/performance-vnf.component.css | 126 -- .../performance-vnf/performance-vnf.component.html | 60 - .../performance-vnf/performance-vnf.component.less | 136 -- .../performance-vnf.component.spec.ts | 45 - .../performance-vnf/performance-vnf.component.ts | 145 -- .../src/app/performance/performance.component.css | 26 - .../src/app/performance/performance.component.html | 17 - .../src/app/performance/performance.component.less | 11 - .../app/performance/performance.component.spec.ts | 25 - .../src/app/performance/performance.component.ts | 16 - .../onboard-vnf-vm/onboard-vnf-vm.component.css | 67 - .../onboard-vnf-vm/onboard-vnf-vm.component.html | 333 ----- .../onboard-vnf-vm/onboard-vnf-vm.component.less | 182 --- .../onboard-vnf-vm.component.spec.ts | 25 - .../onboard-vnf-vm/onboard-vnf-vm.component.ts | 670 ---------- .../services-list/services-list.component.css | 145 -- .../services-list/services-list.component.html | 769 ----------- .../services-list/services-list.component.less | 433 ------ .../services-list/services-list.component.spec.ts | 25 - .../services-list/services-list.component.ts | 1363 ------------------- .../src/app/services/services.component.html | 18 - .../src/app/services/services.component.less | 0 .../src/app/services/services.component.spec.ts | 25 - .../src/app/services/services.component.ts | 15 - .../components/charts/bar/bar.component.html | 22 + .../components/charts/bar/bar.component.less | 0 .../components/charts/bar/bar.component.spec.ts | 25 + .../shared/components/charts/bar/bar.component.ts | 71 + .../components/charts/line/line.component.html | 22 + .../components/charts/line/line.component.less | 0 .../components/charts/line/line.component.spec.ts | 25 + .../components/charts/line/line.component.ts | 105 ++ .../components/charts/pie/pie.component.html | 24 + .../components/charts/pie/pie.component.less | 0 .../components/charts/pie/pie.component.spec.ts | 25 + .../shared/components/charts/pie/pie.component.ts | 114 ++ .../components/customer/customer.component.html | 144 ++ .../components/customer/customer.component.less | 254 ++++ .../components/customer/customer.component.spec.ts | 25 + .../components/customer/customer.component.ts | 552 ++++++++ .../components/details/details.component.css | 104 ++ .../components/details/details.component.html | 68 + .../components/details/details.component.less | 108 ++ .../components/details/details.component.spec.ts | 25 + .../shared/components/details/details.component.ts | 59 + .../e2e-creation/e2e-creation.component.css | 77 ++ .../e2e-creation/e2e-creation.component.html | 139 ++ .../e2e-creation/e2e-creation.component.less | 159 +++ .../e2e-creation/e2e-creation.component.spec.ts | 25 + .../e2e-creation/e2e-creation.component.ts | 357 +++++ .../e2e-detail/e2e-detail.component.html | 104 ++ .../e2e-detail/e2e-detail.component.less | 139 ++ .../e2e-detail/e2e-detail.component.spec.ts | 25 + .../components/e2e-detail/e2e-detail.component.ts | 246 ++++ .../graphiclist/graphiclist.component.css | 91 ++ .../graphiclist/graphiclist.component.html | 55 + .../graphiclist/graphiclist.component.less | 137 ++ .../graphiclist/graphiclist.component.spec.ts | 25 + .../graphiclist/graphiclist.component.ts | 78 ++ .../performance-details.component.css | 104 ++ .../performance-details.component.html | 61 + .../performance-details.component.less | 110 ++ .../performance-details.component.spec.ts | 25 + .../performance-details.component.ts | 57 + usecaseui-portal/src/app/shared/utils/utils.js | 0 usecaseui-portal/src/app/test/test.component.html | 25 + usecaseui-portal/src/app/test/test.component.less | 3 + .../src/app/test/test.component.spec.ts | 25 + usecaseui-portal/src/app/test/test.component.ts | 34 + .../src/app/views/alarm/alarm.component.css | 164 +++ .../src/app/views/alarm/alarm.component.html | 138 ++ .../src/app/views/alarm/alarm.component.less | 244 ++++ .../src/app/views/alarm/alarm.component.spec.ts | 66 + .../src/app/views/alarm/alarm.component.ts | 301 +++++ .../ccvpn-creation/ccvpn-creation.component.css | 321 +++++ .../ccvpn-creation/ccvpn-creation.component.html | 275 ++++ .../ccvpn-creation.component.spec.ts | 24 + .../ccvpn-creation/ccvpn-creation.component.ts | 723 ++++++++++ .../views/ccvpn-detail/ccvpn-detail.component.css | 365 +++++ .../views/ccvpn-detail/ccvpn-detail.component.html | 421 ++++++ .../ccvpn-detail/ccvpn-detail.component.spec.ts | 69 + .../views/ccvpn-detail/ccvpn-detail.component.ts | 815 +++++++++++ .../ccvpn-network/ccvpn-network.component.css | 119 ++ .../ccvpn-network/ccvpn-network.component.html | 152 +++ .../ccvpn-network/ccvpn-network.component.spec.ts | 40 + .../views/ccvpn-network/ccvpn-network.component.ts | 1270 ++++++++++++++++++ .../src/app/views/fcaps/fcaps.component.html | 3 + .../src/app/views/fcaps/fcaps.component.less | 0 .../src/app/views/fcaps/fcaps.component.spec.ts | 25 + .../src/app/views/fcaps/fcaps.component.ts | 15 + .../src/app/views/home/home.component.css | 158 +++ .../src/app/views/home/home.component.html | 102 ++ .../src/app/views/home/home.component.less | 265 ++++ .../src/app/views/home/home.component.spec.ts | 42 + .../src/app/views/home/home.component.ts | 531 ++++++++ .../app/views/management/management.component.html | 39 + .../app/views/management/management.component.less | 79 ++ .../views/management/management.component.spec.ts | 25 + .../app/views/management/management.component.ts | 68 + .../performance-vm/performance-vm.component.css | 75 ++ .../performance-vm/performance-vm.component.html | 79 ++ .../performance-vm/performance-vm.component.less | 76 ++ .../performance-vm.component.spec.ts | 68 + .../performance-vm/performance-vm.component.ts | 159 +++ .../performance-vnf/performance-vnf.component.css | 126 ++ .../performance-vnf/performance-vnf.component.html | 63 + .../performance-vnf/performance-vnf.component.less | 136 ++ .../performance-vnf.component.spec.ts | 45 + .../performance-vnf/performance-vnf.component.ts | 145 ++ .../views/performance/performance.component.css | 26 + .../views/performance/performance.component.html | 17 + .../views/performance/performance.component.less | 11 + .../performance/performance.component.spec.ts | 25 + .../app/views/performance/performance.component.ts | 16 + .../onboard-vnf-vm/onboard-vnf-vm.component.css | 67 + .../onboard-vnf-vm/onboard-vnf-vm.component.html | 333 +++++ .../onboard-vnf-vm/onboard-vnf-vm.component.less | 182 +++ .../onboard-vnf-vm.component.spec.ts | 25 + .../onboard-vnf-vm/onboard-vnf-vm.component.ts | 668 ++++++++++ .../services-list/services-list.component.css | 145 ++ .../services-list/services-list.component.html | 745 +++++++++++ .../services-list/services-list.component.less | 380 ++++++ .../services-list/services-list.component.spec.ts | 25 + .../services-list/services-list.component.ts | 1410 ++++++++++++++++++++ .../src/app/views/services/services.component.html | 18 + .../src/app/views/services/services.component.less | 0 .../app/views/services/services.component.spec.ts | 25 + .../src/app/views/services/services.component.ts | 15 + 267 files changed, 21230 insertions(+), 16502 deletions(-) delete mode 100644 usecaseui-portal/src/app/alarm/alarm.component.css delete mode 100644 usecaseui-portal/src/app/alarm/alarm.component.html delete mode 100644 usecaseui-portal/src/app/alarm/alarm.component.less delete mode 100644 usecaseui-portal/src/app/alarm/alarm.component.spec.ts delete mode 100644 usecaseui-portal/src/app/alarm/alarm.component.ts delete mode 100644 usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css delete mode 100644 usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html delete mode 100644 usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.spec.ts delete mode 100644 usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts delete mode 100644 usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css delete mode 100644 usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html delete mode 100644 usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.spec.ts delete mode 100644 usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts delete mode 100644 usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.css delete mode 100644 usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.html delete mode 100644 usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.spec.ts delete mode 100644 usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts delete mode 100644 usecaseui-portal/src/app/components/charts/bar/bar.component.html delete mode 100644 usecaseui-portal/src/app/components/charts/bar/bar.component.less delete mode 100644 usecaseui-portal/src/app/components/charts/bar/bar.component.spec.ts delete mode 100644 usecaseui-portal/src/app/components/charts/bar/bar.component.ts delete mode 100644 usecaseui-portal/src/app/components/charts/line/line.component.html delete mode 100644 usecaseui-portal/src/app/components/charts/line/line.component.less delete mode 100644 usecaseui-portal/src/app/components/charts/line/line.component.spec.ts delete mode 100644 usecaseui-portal/src/app/components/charts/line/line.component.ts delete mode 100644 usecaseui-portal/src/app/components/charts/pie/pie.component.html delete mode 100644 usecaseui-portal/src/app/components/charts/pie/pie.component.less delete mode 100644 usecaseui-portal/src/app/components/charts/pie/pie.component.spec.ts delete mode 100644 usecaseui-portal/src/app/components/charts/pie/pie.component.ts delete mode 100644 usecaseui-portal/src/app/components/customer/customer.component.html delete mode 100644 usecaseui-portal/src/app/components/customer/customer.component.less delete mode 100644 usecaseui-portal/src/app/components/customer/customer.component.spec.ts delete mode 100644 usecaseui-portal/src/app/components/customer/customer.component.ts delete mode 100644 usecaseui-portal/src/app/components/details/details.component.css delete mode 100644 usecaseui-portal/src/app/components/details/details.component.html delete mode 100644 usecaseui-portal/src/app/components/details/details.component.less delete mode 100644 usecaseui-portal/src/app/components/details/details.component.spec.ts delete mode 100644 usecaseui-portal/src/app/components/details/details.component.ts delete mode 100644 usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.css delete mode 100644 usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.html delete mode 100644 usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.less delete mode 100644 usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.spec.ts delete mode 100644 usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts delete mode 100644 usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.html delete mode 100644 usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.less delete mode 100644 usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.spec.ts delete mode 100644 usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.ts delete mode 100644 usecaseui-portal/src/app/components/graphiclist/graphiclist.component.css delete mode 100644 usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html delete mode 100644 usecaseui-portal/src/app/components/graphiclist/graphiclist.component.less delete mode 100644 usecaseui-portal/src/app/components/graphiclist/graphiclist.component.spec.ts delete mode 100644 usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts delete mode 100644 usecaseui-portal/src/app/components/performance-details/performance-details.component.css delete mode 100644 usecaseui-portal/src/app/components/performance-details/performance-details.component.html delete mode 100644 usecaseui-portal/src/app/components/performance-details/performance-details.component.less delete mode 100644 usecaseui-portal/src/app/components/performance-details/performance-details.component.spec.ts delete mode 100644 usecaseui-portal/src/app/components/performance-details/performance-details.component.ts create mode 100644 usecaseui-portal/src/app/core/models/dataInterface.ts create mode 100644 usecaseui-portal/src/app/core/services/homes.service.spec.ts create mode 100644 usecaseui-portal/src/app/core/services/homes.service.ts create mode 100644 usecaseui-portal/src/app/core/services/managemencs.service.ts create mode 100644 usecaseui-portal/src/app/core/services/myhttp.service.ts create mode 100644 usecaseui-portal/src/app/core/services/networkHttpservice.service.ts create mode 100644 usecaseui-portal/src/app/core/services/onboard.service.ts create mode 100644 usecaseui-portal/src/app/core/services/text.service.spec.ts create mode 100644 usecaseui-portal/src/app/core/services/text.service.ts delete mode 100644 usecaseui-portal/src/app/dataInterface.ts delete mode 100644 usecaseui-portal/src/app/fcaps/fcaps.component.html delete mode 100644 usecaseui-portal/src/app/fcaps/fcaps.component.less delete mode 100644 usecaseui-portal/src/app/fcaps/fcaps.component.spec.ts delete mode 100644 usecaseui-portal/src/app/fcaps/fcaps.component.ts delete mode 100644 usecaseui-portal/src/app/home/home.component.css delete mode 100644 usecaseui-portal/src/app/home/home.component.html delete mode 100644 usecaseui-portal/src/app/home/home.component.less delete mode 100644 usecaseui-portal/src/app/home/home.component.spec.ts delete mode 100644 usecaseui-portal/src/app/home/home.component.ts delete mode 100644 usecaseui-portal/src/app/homes.service.spec.ts delete mode 100644 usecaseui-portal/src/app/homes.service.ts delete mode 100644 usecaseui-portal/src/app/managemencs.service.ts delete mode 100644 usecaseui-portal/src/app/management/management.component.html delete mode 100644 usecaseui-portal/src/app/management/management.component.less delete mode 100644 usecaseui-portal/src/app/management/management.component.spec.ts delete mode 100644 usecaseui-portal/src/app/management/management.component.ts create mode 100644 usecaseui-portal/src/app/mock/fakedata.js create mode 100644 usecaseui-portal/src/app/mock/json/LogicalLinksData.json create mode 100644 usecaseui-portal/src/app/mock/json/alarmFormData.json create mode 100644 usecaseui-portal/src/app/mock/json/allotted-resources2.json create mode 100644 usecaseui-portal/src/app/mock/json/createService.json create mode 100644 usecaseui-portal/src/app/mock/json/customers.json create mode 100644 usecaseui-portal/src/app/mock/json/deleteService.json create mode 100644 usecaseui-portal/src/app/mock/json/detailsData.json create mode 100644 usecaseui-portal/src/app/mock/json/e2eServiceTemplateParameters.json create mode 100644 usecaseui-portal/src/app/mock/json/homeAllData.json create mode 100644 usecaseui-portal/src/app/mock/json/homePerformanceChartData.json create mode 100644 usecaseui-portal/src/app/mock/json/instanceTableData.json create mode 100644 usecaseui-portal/src/app/mock/json/instanceTableData2.json create mode 100644 usecaseui-portal/src/app/mock/json/instanceTableData3.json create mode 100644 usecaseui-portal/src/app/mock/json/instanceTableData4.json create mode 100644 usecaseui-portal/src/app/mock/json/netWorkD3Data.json create mode 100644 usecaseui-portal/src/app/mock/json/netWorkD3Data2.json create mode 100644 usecaseui-portal/src/app/mock/json/nsServiceTemplateParameters.json create mode 100644 usecaseui-portal/src/app/mock/json/onboardTableData.json create mode 100644 usecaseui-portal/src/app/mock/json/p_interfaces1.json create mode 100644 usecaseui-portal/src/app/mock/json/p_interfaces2.json create mode 100644 usecaseui-portal/src/app/mock/json/pnfdetail-domain.json create mode 100644 usecaseui-portal/src/app/mock/json/progress.json create mode 100644 usecaseui-portal/src/app/mock/json/sdwanvpnServiceTemplateParameters.json create mode 100644 usecaseui-portal/src/app/mock/json/serviceTemplates.json create mode 100644 usecaseui-portal/src/app/mock/json/serviceTemplates2.json create mode 100644 usecaseui-portal/src/app/mock/json/serviceTypes.json create mode 100644 usecaseui-portal/src/app/mock/json/servicesList.json create mode 100644 usecaseui-portal/src/app/mock/json/servicesTableData.json create mode 100644 usecaseui-portal/src/app/mock/json/siteAddressData.json create mode 100644 usecaseui-portal/src/app/mock/json/siteServiceTemplateParameters.json create mode 100644 usecaseui-portal/src/app/mock/json/sotn-connectivity.json create mode 100644 usecaseui-portal/src/app/mock/json/sotn-connectivity2.json create mode 100644 usecaseui-portal/src/app/mock/json/sotnvpnServiceTemplateParameters.json create mode 100644 usecaseui-portal/src/app/mock/json/specific_link_nfo.json create mode 100644 usecaseui-portal/src/app/mock/json/status.json create mode 100644 usecaseui-portal/src/app/mock/json/status2.json create mode 100644 usecaseui-portal/src/app/mock/json/url.json create mode 100644 usecaseui-portal/src/app/mock/json/vpnbinding.json create mode 100644 usecaseui-portal/src/app/mock/json/xuran_test_data.json create mode 100644 usecaseui-portal/src/app/mock/mock.js create mode 100644 usecaseui-portal/src/app/mock/server.js delete mode 100644 usecaseui-portal/src/app/networkHttpservice.service.ts delete mode 100644 usecaseui-portal/src/app/onboard.service.ts delete mode 100644 usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.css delete mode 100644 usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.html delete mode 100644 usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.less delete mode 100644 usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.spec.ts delete mode 100644 usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.ts delete mode 100644 usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.css delete mode 100644 usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html delete mode 100644 usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.less delete mode 100644 usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.spec.ts delete mode 100644 usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.ts delete mode 100644 usecaseui-portal/src/app/performance/performance.component.css delete mode 100644 usecaseui-portal/src/app/performance/performance.component.html delete mode 100644 usecaseui-portal/src/app/performance/performance.component.less delete mode 100644 usecaseui-portal/src/app/performance/performance.component.spec.ts delete mode 100644 usecaseui-portal/src/app/performance/performance.component.ts delete mode 100644 usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css delete mode 100644 usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html delete mode 100644 usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less delete mode 100644 usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts delete mode 100644 usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts delete mode 100644 usecaseui-portal/src/app/services/services-list/services-list.component.css delete mode 100644 usecaseui-portal/src/app/services/services-list/services-list.component.html delete mode 100644 usecaseui-portal/src/app/services/services-list/services-list.component.less delete mode 100644 usecaseui-portal/src/app/services/services-list/services-list.component.spec.ts delete mode 100644 usecaseui-portal/src/app/services/services-list/services-list.component.ts delete mode 100644 usecaseui-portal/src/app/services/services.component.html delete mode 100644 usecaseui-portal/src/app/services/services.component.less delete mode 100644 usecaseui-portal/src/app/services/services.component.spec.ts delete mode 100644 usecaseui-portal/src/app/services/services.component.ts create mode 100644 usecaseui-portal/src/app/shared/components/charts/bar/bar.component.html create mode 100644 usecaseui-portal/src/app/shared/components/charts/bar/bar.component.less create mode 100644 usecaseui-portal/src/app/shared/components/charts/bar/bar.component.spec.ts create mode 100644 usecaseui-portal/src/app/shared/components/charts/bar/bar.component.ts create mode 100644 usecaseui-portal/src/app/shared/components/charts/line/line.component.html create mode 100644 usecaseui-portal/src/app/shared/components/charts/line/line.component.less create mode 100644 usecaseui-portal/src/app/shared/components/charts/line/line.component.spec.ts create mode 100644 usecaseui-portal/src/app/shared/components/charts/line/line.component.ts create mode 100644 usecaseui-portal/src/app/shared/components/charts/pie/pie.component.html create mode 100644 usecaseui-portal/src/app/shared/components/charts/pie/pie.component.less create mode 100644 usecaseui-portal/src/app/shared/components/charts/pie/pie.component.spec.ts create mode 100644 usecaseui-portal/src/app/shared/components/charts/pie/pie.component.ts create mode 100644 usecaseui-portal/src/app/shared/components/customer/customer.component.html create mode 100644 usecaseui-portal/src/app/shared/components/customer/customer.component.less create mode 100644 usecaseui-portal/src/app/shared/components/customer/customer.component.spec.ts create mode 100644 usecaseui-portal/src/app/shared/components/customer/customer.component.ts create mode 100644 usecaseui-portal/src/app/shared/components/details/details.component.css create mode 100644 usecaseui-portal/src/app/shared/components/details/details.component.html create mode 100644 usecaseui-portal/src/app/shared/components/details/details.component.less create mode 100644 usecaseui-portal/src/app/shared/components/details/details.component.spec.ts create mode 100644 usecaseui-portal/src/app/shared/components/details/details.component.ts create mode 100644 usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.css create mode 100644 usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.html create mode 100644 usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.less create mode 100644 usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.spec.ts create mode 100644 usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.ts create mode 100644 usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.html create mode 100644 usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.less create mode 100644 usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.spec.ts create mode 100644 usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.ts create mode 100644 usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.css create mode 100644 usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.html create mode 100644 usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.less create mode 100644 usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.spec.ts create mode 100644 usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.ts create mode 100644 usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.css create mode 100644 usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.html create mode 100644 usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.less create mode 100644 usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.spec.ts create mode 100644 usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.ts create mode 100644 usecaseui-portal/src/app/shared/utils/utils.js create mode 100644 usecaseui-portal/src/app/test/test.component.html create mode 100644 usecaseui-portal/src/app/test/test.component.less create mode 100644 usecaseui-portal/src/app/test/test.component.spec.ts create mode 100644 usecaseui-portal/src/app/test/test.component.ts create mode 100644 usecaseui-portal/src/app/views/alarm/alarm.component.css create mode 100644 usecaseui-portal/src/app/views/alarm/alarm.component.html create mode 100644 usecaseui-portal/src/app/views/alarm/alarm.component.less create mode 100644 usecaseui-portal/src/app/views/alarm/alarm.component.spec.ts create mode 100644 usecaseui-portal/src/app/views/alarm/alarm.component.ts create mode 100644 usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.css create mode 100644 usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.html create mode 100644 usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.spec.ts create mode 100644 usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.ts create mode 100644 usecaseui-portal/src/app/views/ccvpn-detail/ccvpn-detail.component.css create mode 100644 usecaseui-portal/src/app/views/ccvpn-detail/ccvpn-detail.component.html create mode 100644 usecaseui-portal/src/app/views/ccvpn-detail/ccvpn-detail.component.spec.ts create mode 100644 usecaseui-portal/src/app/views/ccvpn-detail/ccvpn-detail.component.ts create mode 100644 usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.css create mode 100644 usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.html create mode 100644 usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.spec.ts create mode 100644 usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.ts create mode 100644 usecaseui-portal/src/app/views/fcaps/fcaps.component.html create mode 100644 usecaseui-portal/src/app/views/fcaps/fcaps.component.less create mode 100644 usecaseui-portal/src/app/views/fcaps/fcaps.component.spec.ts create mode 100644 usecaseui-portal/src/app/views/fcaps/fcaps.component.ts create mode 100644 usecaseui-portal/src/app/views/home/home.component.css create mode 100644 usecaseui-portal/src/app/views/home/home.component.html create mode 100644 usecaseui-portal/src/app/views/home/home.component.less create mode 100644 usecaseui-portal/src/app/views/home/home.component.spec.ts create mode 100644 usecaseui-portal/src/app/views/home/home.component.ts create mode 100644 usecaseui-portal/src/app/views/management/management.component.html create mode 100644 usecaseui-portal/src/app/views/management/management.component.less create mode 100644 usecaseui-portal/src/app/views/management/management.component.spec.ts create mode 100644 usecaseui-portal/src/app/views/management/management.component.ts create mode 100644 usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.css create mode 100644 usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.html create mode 100644 usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.less create mode 100644 usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.spec.ts create mode 100644 usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.ts create mode 100644 usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.css create mode 100644 usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.html create mode 100644 usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.less create mode 100644 usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.spec.ts create mode 100644 usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.ts create mode 100644 usecaseui-portal/src/app/views/performance/performance.component.css create mode 100644 usecaseui-portal/src/app/views/performance/performance.component.html create mode 100644 usecaseui-portal/src/app/views/performance/performance.component.less create mode 100644 usecaseui-portal/src/app/views/performance/performance.component.spec.ts create mode 100644 usecaseui-portal/src/app/views/performance/performance.component.ts create mode 100644 usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.css create mode 100644 usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html create mode 100644 usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.less create mode 100644 usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts create mode 100644 usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.ts create mode 100644 usecaseui-portal/src/app/views/services/services-list/services-list.component.css create mode 100644 usecaseui-portal/src/app/views/services/services-list/services-list.component.html create mode 100644 usecaseui-portal/src/app/views/services/services-list/services-list.component.less create mode 100644 usecaseui-portal/src/app/views/services/services-list/services-list.component.spec.ts create mode 100644 usecaseui-portal/src/app/views/services/services-list/services-list.component.ts create mode 100644 usecaseui-portal/src/app/views/services/services.component.html create mode 100644 usecaseui-portal/src/app/views/services/services.component.less create mode 100644 usecaseui-portal/src/app/views/services/services.component.spec.ts create mode 100644 usecaseui-portal/src/app/views/services/services.component.ts (limited to 'usecaseui-portal/src/app') diff --git a/usecaseui-portal/src/app/alarm/alarm.component.css b/usecaseui-portal/src/app/alarm/alarm.component.css deleted file mode 100644 index 37c2d936..00000000 --- a/usecaseui-portal/src/app/alarm/alarm.component.css +++ /dev/null @@ -1,164 +0,0 @@ -/* - Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -.title { - font: 700 18px/18px "思源黑体"; - color: #4c5e70; - margin-bottom: 18px; -} -hr { - border: none; - height: 2px; - background-color: #dce1e7; - margin-bottom: 20px; -} -.select { - margin-bottom: 20px; -} -.select span { - display: inline-block; - font: 700 14px "Arial"; - color: #4c5e70; -} -.select nz-dropdown { - vertical-align: middle; -} -.select nz-dropdown :hover { - border-color: #147dc2; -} -.select nz-dropdown button { - width: 165px; - height: 30px; - background-color: #eceff4; - text-align: left; - border-color: #9fa9ab; -} -.select nz-dropdown button span { - font-weight: 400; - display: inline-block; - width: 120px; - overflow: hidden; - text-overflow: ellipsis; - padding-top: 2px; -} -.select nz-dropdown button i { - position: absolute; - top: 10px; - right: 10px; -} -.select .search { - margin-left: 20px; - height: 30px; - padding: 0 10px; -} -.select .search span { - color: #fff; - font-weight: 400; -} -.content .title { - border-radius: 5px 5px 0 0; - background-color: #fff; - height: 106px; - border-bottom: 1px solid #f0f0f0; - margin-bottom: 0; -} -.content .title ul { - display: flex; - display: -webkit-flex; - justify-content: space-around; - align-items: center; - padding: 0; - margin: 0; - height: 100%; -} -.content .title ul li { - list-style: none; - padding-left: 32px; - width: 100%; - border-left: 1px solid #eceff4; -} -.content .title ul li h5 { - font: 500 14px "Arial"; - color: #3d4d65; -} -.content .title ul li p { - font: 500 24px "Arial"; - color: #3fa8eb; - margin-bottom: 0; -} -.content .title ul li:nth-child(1) { - border: none; -} -.content .chart { - background-color: #fff; - position: relative; - padding-bottom: 24px; -} -.content .chart h3 { - font: 700 18px/18px "思源黑体"; - color: #4c5e70; - padding: 20px 15px; - margin: 0; - width: 12%; - display: inline-block; -} -.content .chart .AlarmChart { - height: 0px; - overflow: hidden; - border-bottom: 1px solid #f5f5f5; - transition: all 0.3s linear; -} -.content .chart .alarmChart-active { - height: 386px; -} -.content .chart .open-close { - width: 50px; - height: 25px; - position: absolute; - left: 50%; - bottom: 0px; - transform: translate(-25px, 0); - border: none; - outline: none; - cursor: pointer; - background-color: #fff; - background: url(../../assets/images/open-close.png) no-repeat center -27px; -} -.content .chart .open-close:hover { - background: url(../../assets/images/open-close.png) no-repeat center -79px; -} -.content .chart .open-close-active { - background: url(../../assets/images/open-close.png) center -1px; -} -.content .chart .open-close-active:hover { - background: url(../../assets/images/open-close.png) no-repeat center -53px; -} -.content .tablelist { - background-color: #fff; - padding: 24px 10px 0px; - border-radius: 0 0 5px 5px; -} -.content .tablelist .action { - padding: 10px 0 0 20px; -} -.content .tablelist .action .details { - display: inline-block; - width: 16px; - height: 16px; - background: url(../../assets/images/icon.png) center -113px; -} -.content .tablelist .action .details:hover { - background: url(../../assets/images/icon.png) no-repeat center -128px; -} diff --git a/usecaseui-portal/src/app/alarm/alarm.component.html b/usecaseui-portal/src/app/alarm/alarm.component.html deleted file mode 100644 index 312ec236..00000000 --- a/usecaseui-portal/src/app/alarm/alarm.component.html +++ /dev/null @@ -1,138 +0,0 @@ - -

Alarm Device Alarm Details

-
-
-
-
-
Active
-
13,980
-
-
There are 13980 faults waiting to be solved
-
-
-
Closed
-
23,980
-
-
23,980 faults have been fixed
-
-
-
- Daily Total - -
-
-
-
-
- Source Name: - - - - -
-
- Priority: - - - - -
-
- Status: - - - - -
-
- Report Time: - - -
- -
-
-
- - -
- - - - NO - Source Name - Priority - SpecificProblem - Report Time - Clear Time - Status - Action - - - - - {{i+1}} - {{item.sourceName}} - {{item.priority}} - {{item.specificProblem}} - {{item.startEpochMicrosec | date:'yyyy-MM-dd HH:mm:ss'}} - {{item.startEpochMicrosecCleared | date:'yyyy-MM-dd HH:mm:ss'}} - {{item.status}} - - - - -
-
-
- -
-
\ No newline at end of file diff --git a/usecaseui-portal/src/app/alarm/alarm.component.less b/usecaseui-portal/src/app/alarm/alarm.component.less deleted file mode 100644 index 434470fc..00000000 --- a/usecaseui-portal/src/app/alarm/alarm.component.less +++ /dev/null @@ -1,244 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -.title { - font: 500 16px/16px "ArialMT"; - color: #3C4F8C; - margin: 20px; -} -hr { - border: none; - height: 2px; - background-color: #dce1e7; - margin-bottom: 20px; -} -.select { - margin-bottom: 15px; - width: 100%; - .query_criteria { - width: 100%; - .query_item { - width: 20%; - display: inline-block; - span { - display: inline-block; - font: 500 13px "ArialMT"; - color: #3C4F8C; - } - nz-dropdown { - vertical-align: middle; - width: 55%; - :hover{ - border-color: #48C6EF; - } - button { - width: 100%; - height: 30px; - background-color: #fff; - text-align: left; - border-color: #EEEEEE ; - border-radius: 2px; - span { - font-weight: 400; - color:rgba(60,79,140,0.5); - display: inline-block; - overflow: hidden; - text-overflow: ellipsis; - padding-top: 2px; - } - i { - position: absolute; - top: 10px; - right: 10px; - } - } - } - } - - .query_time{ - display: inline-block; - span { - font: 500 13px "ArialMT"; - color: #3C4F8C; - } - } - .search { - margin-left: 0.8%; - height: 30px; - padding: 0 10px; - span { - color: #fff; - font-weight: 400; - } - } - } -} -.charts{ - width: 100%; - height: 250px; - margin-bottom: 25px; - .chartsleft { - width: 30%; - height: 100%; - float: left; - margin-right: 2%; - color: #fff; - font-family:"ArialMT"; - .sctive_closed { - height: 48.75%; - padding: 12px; - width: 100%; - :first-child{ - font-size: 14px; - } - :nth-child(2) { - font-size: 18px; - } - :nth-child(3) { - font-size: 12px; - } - } - .active { - margin-bottom: 5px; - background: -webkit-linear-gradient(left, #FB7788 , #FB93C2); /* Safari 5.1 - 6.0 */ - background: -o-linear-gradient(right, #FB7788, #FB93C2); /* Opera 11.1 - 12.0 */ - background: -moz-linear-gradient(right, #FB7788, #FB93C2); /* Firefox 3.6 - 15 */ - background: linear-gradient(to right, #FB7788 , #FB93C2); /* 标准的语法（必须放在最后） */ - } - .closed { - margin-top: 2px; - background: -webkit-linear-gradient(left, #7A8BAE , #A6BFE4); /* Safari 5.1 - 6.0 */ - background: -o-linear-gradient(right, #7A8BAE , #A6BFE4); /* Opera 11.1 - 12.0 */ - background: -moz-linear-gradient(right, #7A8BAE , #A6BFE4); /* Firefox 3.6 - 15 */ - background: linear-gradient(to right, #7A8BAE , #A6BFE4); /* 标准的语法（必须放在最后） */ - } - - } - .chartsright { - background-color: #fff; - width: 68%; - padding: 20px; - float: left; - height: 100%; - .picker { - float: right; margin-right: 3%; - } - .datapicker { - padding-left: 700px; - } - } -} -.content { - .title { - border-radius: 5px 5px 0 0; - background-color: #fff; - height: 106px; - border-bottom: 1px solid #f0f0f0; - margin-bottom: 0; - ul { - display: flex; - display: -webkit-flex; - justify-content: space-around; - align-items: center; - padding: 0; - margin: 0; - height: 100%; - li { - list-style: none; - padding-left: 32px; - width: 100%; - border-left: 1px solid #eceff4; - h5 { - font: 500 14px "Arial"; - color: #3d4d65; - } - p { - font: 500 24px "Arial"; - color: #3fa8eb; - margin-bottom: 0; - } - } - li:nth-child(1){ - border: none; - } - } - } - .chart { - background-color: #fff; - position: relative; - padding-bottom: 24px; - h3 { - font: 700 18px/18px "思源黑体"; - color: #4c5e70; - padding: 20px 15px; - margin: 0; - width: 12%; - display: inline-block; - } - .AlarmChart { - height: 0px; - overflow: hidden; - border-bottom: 1px solid #f5f5f5; - transition: all 0.3s linear; - } - .alarmChart-active { - height: 386px; - } - .open-close { - width: 50px; - height: 25px; - position: absolute; - left: 50%; - bottom: 0px; - transform: translate(-25px,0); - border: none; - outline: none; - cursor: pointer; - background-color: #fff; - background: url(../../assets/images/open-close.png) no-repeat center -27px; - &:hover { - background: url(../../assets/images/open-close.png) no-repeat center -79px; - } - } - .open-close-active { - background: url(../../assets/images/open-close.png) center -1px; - &:hover { - background: url(../../assets/images/open-close.png) no-repeat center -53px; - } - } - } - .tablelist { - // background-color: #fff; - // padding: 24px 10px 0px; - border-radius: 0 0 5px 5px; - .action{ - padding: 10px 0 0 20px; - .details{ - display: inline-block; - width: 16px; - height: 16px; - background: url(../../assets/images/icon.png) center -113px; - &:hover { - background: url(../../assets/images/icon.png) no-repeat center -128px; - } - } - } - } -} - - - - - diff --git a/usecaseui-portal/src/app/alarm/alarm.component.spec.ts b/usecaseui-portal/src/app/alarm/alarm.component.spec.ts deleted file mode 100644 index f64bcb83..00000000 --- a/usecaseui-portal/src/app/alarm/alarm.component.spec.ts +++ /dev/null @@ -1,66 +0,0 @@ -import { async, ComponentFixture, TestBed, inject, fakeAsync } from '@angular/core/testing'; -import { NO_ERRORS_SCHEMA,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -import { NgxEchartsModule } from 'ngx-echarts'; -import { NgZorroAntdModule } from 'ng-zorro-antd'; -import { TranslateModule, TranslateLoader, TranslateService, TranslateFakeLoader} from '@ngx-translate/core'; -import { HttpClientModule } from '@angular/common/http'; -import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { NZ_I18N, en_US } from 'ng-zorro-antd'; - -import { AlarmComponent } from './alarm.component'; -import { DetailsComponent } from '../components/details/details.component'; -import { LineComponent } from '../components/charts/line/line.component'; -import { HomesService } from '../homes.service'; - -fdescribe('AlarmComponent', () => { - let component: AlarmComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ AlarmComponent, DetailsComponent, LineComponent ], - imports: [ TranslateModule.forRoot({loader: { provide: TranslateLoader, useClass: TranslateFakeLoader }}), - NgZorroAntdModule.forRoot(), - NgxEchartsModule, - HttpClientModule, - BrowserAnimationsModule, - HttpClientTestingModule ], - providers: [ TranslateService, HomesService, - { provide: NZ_I18N, useValue: en_US } ], - schemas: [ - CUSTOM_ELEMENTS_SCHEMA, - NO_ERRORS_SCHEMA - ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(AlarmComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', inject([HttpTestingController, HomesService], - (httpMock: HttpTestingController, service: HomesService) => { - expect(component).toBeTruthy(); - })); - - it('expects service to fetch data with proper sorting', - inject([HttpTestingController, HomesService], - (httpMock: HttpTestingController, service: HomesService) => { - // We call the service - service.getqueryAllSourceNames().subscribe(data => { - expect(data.pageInfo.totalRecordCount).toBe(21); - expect(data.pageInfo.pageNumber).toBe(0); - expect(data.data.length).toBe(7); - }); - // We set the expectations for the HttpClient mock - const req = httpMock.expectOne('http://.../data/contacts'); - expect(req.request.method).toEqual('GET'); - // Then we set the fake data to be returned by the mock - req.flush({data: ...}); - }) -); -}); diff --git a/usecaseui-portal/src/app/alarm/alarm.component.ts b/usecaseui-portal/src/app/alarm/alarm.component.ts deleted file mode 100644 index 5d479020..00000000 --- a/usecaseui-portal/src/app/alarm/alarm.component.ts +++ /dev/null @@ -1,301 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -import { Component, OnInit, Input, Output, EventEmitter, HostBinding, Pipe, PipeTransform } from '@angular/core'; -import { HomesService } from '../homes.service'; -import { showHideAnimate, slideToRight } from '../animates'; -import { DatePipe } from '@angular/common'; -@Component({ - selector: 'app-alarm', - templateUrl: './alarm.component.html', - styleUrls: ['./alarm.component.less'], - animations: [ - showHideAnimate, slideToRight - ], - providers: [DatePipe] -}) -export class AlarmComponent implements OnInit { - size = 'day'; - @HostBinding('@routerAnimate') routerAnimateState; //Routing animation - public currentPage: number = 1; - public pageSize: number = 10; - public sourceName: string = ''; - public priority: string = ''; - public startTime: string = this.myhttp.dateformater(Date.now() - 30 * 24 * 60 * 60 * 1000); - public endTime: string = this.datePipe.transform(new Date(), 'yyyy-MM-dd HH:mm:ss'); - public vfStatus: string = ''; - public sourceNameList: Array = ['---auto---']; - list: any; - sourcenames: any; - constructor( - private datePipe: DatePipe, - private myhttp: HomesService) { } - ngOnInit() { - this.getAlarmFormData(); - this.getSourceNames(); - - // this.getstatuscount(); - } - - // Filter box - sourceNameSelected = this.sourceNameList[0]; - - priorityList = ['---auto---', 'Critical', 'Major', 'Minor', 'Warning']; - prioritySelected = this.priorityList[0]; - - - statusList = ['---auto---', 'active', 'Close']; - statusSelected = this.statusList[0]; - - choseSourceName(item) { - if (item == "---auto---") { - this.sourceName = ''; - } else { - this.sourceName = item; - } - this.sourceNameSelected = item; - - } - chosePriority(item) { - this.prioritySelected = item; - if (item == "---auto---") { - this.priority = ''; - } else { - this.priority = item; - } - } - choseStatus(item) { - this.statusSelected = item; - if (item == "---auto---") { - this.vfStatus = ''; - } else { - this.vfStatus = item; - } - } - getSourceNames() { - this.myhttp.getSourceNames().subscribe((data) => { - for (let i = 0; i < data.length; i++) { - this.sourceNameList.push(data[i]); - } - this.sourceNameSelected = this.sourceNameList[0]; - }) - } - - // Date screening - dateRange = [(new Date(), -30), new Date()]; - onChange(result: Date): void { - this.startTime = this.datePipe.transform(result[0], 'yyyy-MM-dd'); - this.endTime = this.datePipe.transform(result[1], 'yyyy-MM-dd'); - } - dateRange2 = [(new Date(), -30), new Date()]; - onChange2(result: Date): void { - this.startTime = this.datePipe.transform(result[0], 'yyyy-MM-dd'); - this.endTime = this.datePipe.transform(result[1], 'yyyy-MM-dd'); - } - - // total - alarmList = { - all: 0, - closed: 0, - activeNum: 0 - } - // total data - // getstatuscount() { - // this.myhttp.getstatuscount().subscribe((data) => { - // this.alarmList.activeNum = data[0]; - // this.alarmList.closed = data[1]; - // this.alarmList.all = (data[0] - 0) + (data[1] - 0); - - // }) - // } - getAlarmFormData() { - this.myhttp.getAlarmFormData(this.currentPage, this.pageSize, this.sourceName, this.priority, this.startTime, this.endTime, this.vfStatus).subscribe((data) => { - this.list = data.alarms; - }) - // this.getAlarmChartData(event); - } - getAlarmChartData() { - let paramsObj = { - // sourceName: this.sourceName, - // startTime: this.startTime, - // endTime: this.endTime, - // format: 'day' - } - this.myhttp.getHomeAlarmChartData(paramsObj) - .subscribe((data) => { - this.alarmChartData = { - xAxis: { - data: data.dateList - }, - series: [ - { data: data.allList }, - { data: data.ActiveList }, - ] - } - }, (err) => { - console.log(err); - }) - } - // day alarmchartdata - // day() { - // let paramsObj = { - // sourceName: this.sourceName, - // startTime: this.startTime, - // endTime: this.endTime, - // format: "day" - // } - // this.myhttp.getHomeAlarmChartData(paramsObj) - // .subscribe((data) => { - // this.alarmChartData = { - // xAxis: { - // data: data.dateList - // }, - // series: [ - // { data: data.allList }, - // { data: data.ActiveList }, - // { data: data.closedList } - // ] - // } - // }, (err) => { - // console.log(err); - // }) - // } - // month() { - // let paramsObj = { - // sourceName: this.sourceName, - // startTime: this.startTime, - // endTime: this.endTime, - // format: "month" - // } - // this.myhttp.getHomeAlarmChartData(paramsObj) - // .subscribe((data) => { - // this.alarmChartData = { - // xAxis: { - // data: data.dateList - // }, - // series: [ - // { data: data.allList }, - // { data: data.ActiveList }, - // { data: data.closedList } - // ] - // } - // }, (err) => { - // console.log(err); - // }) - // } - //Line chart - alarmShow = false; - alarmChartData: Object; - alarmChartInit: Object = { - height: 200, - option: { - legend: { - icon: "circle", - itemWidth:10, - itemHeight:10, - bottom: '-5px', - data: ['Active', 'Fixed'] - }, - tooltip: { - trigger: 'axis', - }, - dataZoom: [ - { - type: 'slider', - show: true, - start: 1, - height: 10, - end: 60, - bottom:'9%' - } - ], - xAxis: { - data: [] - }, - series: [ - { - name: 'Active', - type: 'bar', - data: [], - barWidth: 10, - barGap: 1, - itemStyle: { - normal: { - barBorderRadius: [5], - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [{ - offset: 0, color: '#FB7788' - }, { - offset: 1, color: '#FB93C2' - }], - }, - opacity: 1, - } - } - }, - { - name: 'Fixed', - type: 'bar', - data: [], - barWidth: 10, - barGap: 1, - itemStyle: { - normal: { - barBorderRadius: [5], - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [{ - offset: 0, color: '#7A8BAE' - }, { - offset: 1, color: '#A6BFE4' - }], - }, - opacity: 1, - } - } - }, - ] - } - }; - sort(e){ - - } - //Detail page title display - detailshow = false; - // Show hidden animation - state = "show"; - state2 = "hide"; - detailId: string; - detailShow(item) { - this.state = 'hide'; - this.state2 = 'show'; - this.detailshow = true; - this.detailId = item.id; - } - detailHide() { - this.state = 'show'; - this.state2 = 'hide'; - this.detailshow = false; - } -} diff --git a/usecaseui-portal/src/app/app-routing.module.ts b/usecaseui-portal/src/app/app-routing.module.ts index 04a6bc80..f47cf11b 100644 --- a/usecaseui-portal/src/app/app-routing.module.ts +++ b/usecaseui-portal/src/app/app-routing.module.ts @@ -13,48 +13,52 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { NgModule } from '@angular/core'; +import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import { HomeComponent } from './home/home.component'; -import { ManagementComponent } from './management/management.component'; -import { FcapsComponent } from './fcaps/fcaps.component'; -import { ServicesComponent } from './services/services.component'; -import { ServicesListComponent } from './services/services-list/services-list.component'; -import { OnboardVnfVmComponent } from './services/onboard-vnf-vm/onboard-vnf-vm.component'; -import { AlarmComponent } from './alarm/alarm.component'; -import { PerformanceComponent } from './performance/performance.component'; -import { PerformanceVnfComponent } from './performance/performance-vnf/performance-vnf.component'; -import { PerformanceVmComponent } from './performance/performance-vm/performance-vm.component'; +import { HomeComponent } from './views/home/home.component'; +import { ManagementComponent } from './views/management/management.component'; +import { FcapsComponent } from './views/fcaps/fcaps.component'; +import { ServicesComponent } from './views/services/services.component'; +import { ServicesListComponent } from './views/services/services-list/services-list.component'; +import { OnboardVnfVmComponent } from './views/services/onboard-vnf-vm/onboard-vnf-vm.component'; +import { AlarmComponent } from './views/alarm/alarm.component'; +import { PerformanceComponent } from './views/performance/performance.component'; +import { PerformanceVnfComponent } from './views/performance/performance-vnf/performance-vnf.component'; +import { PerformanceVmComponent } from './views/performance/performance-vm/performance-vm.component'; -import { CcvpnNetworkComponent } from './ccvpn-network/ccvpn-network.component'; +import { CcvpnNetworkComponent } from './views/ccvpn-network/ccvpn-network.component'; + + +import { TestComponent } from './test/test.component'; // import { DetailsComponent } from './details/details.component'; const ServicesChildRoutes: Routes = [ - { path: 'services-list', component: ServicesListComponent}, - { path: 'onboard-vnf-vm', component: OnboardVnfVmComponent}, + { path: 'services-list', component: ServicesListComponent }, + { path: 'onboard-vnf-vm', component: OnboardVnfVmComponent }, { path: '**', redirectTo: 'services-list' } ] const routes: Routes = [ - { path: 'home', component: HomeComponent}, - { path: 'management', component: ManagementComponent}, - { path: 'fcaps', component: FcapsComponent}, + { path: 'text', component: TestComponent }, + { path: 'home', component: HomeComponent }, + { path: 'management', component: ManagementComponent }, + { path: 'fcaps', component: FcapsComponent }, // { path: 'services', component: ServicesComponent, children:ServicesChildRoutes}, //Temporarily not a sub-routing structure - { path: 'services/services-list', component: ServicesListComponent}, - { path: 'services/onboard-vnf-vm', component: OnboardVnfVmComponent}, - { path: 'alarm', component: AlarmComponent}, - { path: 'performance', component: PerformanceComponent}, - { path: 'performance/performance-vnf', component: PerformanceVnfComponent}, - { path: 'performance/performance-vm', component: PerformanceVmComponent}, + { path: 'services/services-list', component: ServicesListComponent }, + { path: 'services/onboard-vnf-vm', component: OnboardVnfVmComponent }, + { path: 'alarm', component: AlarmComponent }, + { path: 'performance', component: PerformanceComponent }, + { path: 'performance/performance-vnf', component: PerformanceVnfComponent }, + { path: 'performance/performance-vm', component: PerformanceVmComponent }, { path: 'network', component: CcvpnNetworkComponent }, - { path: '**', redirectTo: 'home', pathMatch: 'full'} + { path: '**', redirectTo: 'home', pathMatch: 'full' } ]; @NgModule({ - imports: [ RouterModule.forRoot(routes) ], - exports: [ RouterModule ] + imports: [RouterModule.forRoot(routes)], + exports: [RouterModule] }) -export class AppRoutingModule {} +export class AppRoutingModule { } diff --git a/usecaseui-portal/src/app/app.component.css b/usecaseui-portal/src/app/app.component.css index 1e0f7181..7e91ee2b 100644 --- a/usecaseui-portal/src/app/app.component.css +++ b/usecaseui-portal/src/app/app.component.css @@ -25,7 +25,7 @@ nz-layout nz-sider ul li i { height: 16px; } nz-layout nz-sider ul li .icon-services { - background: url(../assets/images/icon.png) no-repeat 0px -16px; + background: url(assets/images/icon.png) no-repeat 0px -16px; } nz-layout nz-sider ul li ul li { font-size: 12px; diff --git a/usecaseui-portal/src/app/app.component.html b/usecaseui-portal/src/app/app.component.html index 2bd60670..a0838c3d 100644 --- a/usecaseui-portal/src/app/app.component.html +++ b/usecaseui-portal/src/app/app.component.html @@ -23,7 +23,9 @@ - home + home {{"i18nTextDefine_Home" | translate}} @@ -33,8 +35,10 @@
  • - - home + + home {{"i18nTextDefine_Customer" | translate}} @@ -45,7 +49,9 @@ - home + home {{"i18nTextDefine_Monitor" | translate}} @@ -53,12 +59,16 @@
  • - - home - {{"i18nTextDefine_Services" | translate}} + + home + {{"i18nTextDefine_Services" | translate}}
    • -
    - -
    -

    {{createParams.commonParams.templateType}} {{"i18nTextDefine_InstanceCreation" | translate}}

    -
    - - -
    -
    - -
    - - {{"i18nTextDefine_InstanceTopology" | translate}} - -
    - - - -
    -
    - -
    - - -
    - *name: - - *description: - -
    -     - -
    -
    -

    sdwanVPN List

    - -
    - - - - NO. - {{key.split("_")[1] || key}} - Action - - - - - {{i+1}} - - {{item[keys]}} - - - -   - - - - - -
    -     - -
    -
    -

    Site List

    - -
    - - - - NO. - {{key.split("_")[1] || key}} - Action - - - - - {{i+1}} - - {{item[keys]}} - - - -   - - - - - -
    -     -     -
    - -
    -

    {{"i18nTextDefine_Base" | translate}}

    -
    -
      -
    • - *{{item.lableShow}}: -
      • -
    -
    -
    -

    Sdwansitelan List

    -
    -
    - -
    - - - - - - - - - - - - - - - -
    NO.{{key}} Action
    {{i+1}} - {{item[key]}} - - - - -
    -
    -
    - -
    - - -
    -
    - -
    -

    {{"i18nTextDefine_Base" | translate}}

    -
    -
      -
    • - *{{item.lableShow}}: -
      • -
    -
    -
    -

    Sdwandevice

    -
    -
    - -
    - - - - - - - - - - - - - - - -
    NO.{{key}} Action
    {{i+1}} - {{item[key]}} - - - - -
    -
    - - -

    Sdwansitewan List

    -
    -
    - -
    - - - - - - - - - - - - - - - -
    NO.{{key}} Action
    {{i+1}} - {{item[key]}} - - - - -
    -
    -
    - -
    - - -
    -
    -
    -
    diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.spec.ts b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.spec.ts deleted file mode 100644 index 30402412..00000000 --- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.spec.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { CcvpnCreationComponent } from './ccvpn-creation.component'; -describe('CcvpnCreationComponent', () => { - let component: CcvpnCreationComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ CcvpnCreationComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(CcvpnCreationComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts deleted file mode 100644 index f4c1f94c..00000000 --- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts +++ /dev/null @@ -1,723 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; -import * as d3 from 'd3'; -import * as $ from 'jquery'; -import { MyhttpService } from '../myhttp.service'; -import { el } from "@angular/platform-browser/testing/src/browser_util"; - -@Component({ - selector: 'app-ccvpn-creation', - templateUrl: './ccvpn-creation.component.html', - styleUrls: ['./ccvpn-creation.component.css'] -}) -export class CcvpnCreationComponent implements OnInit { - - constructor(private myhttp: MyhttpService) { } - @Input() createParams; - @Input() ccvpn_temParametersContent; - @Output() closeCreate = new EventEmitter(); - - ngOnInit() { - this.getccvpnTemParameters(this.ccvpn_temParametersContent); - } - - //tabBarStyle - tabBarStyle = { - "height": "58px", - "width": "694px", - "box-shadow": "none", - "margin": "0", - "border-radius": "4px 4px 0px 0px" - }; - templateParameters = { - service: {}, - sotnvpn: { - info: {}, - sdwanvpnresource_list: [], - sdwansitelan_list: [] - }, - site: { - info: {}, - sdwansiteresource_list: [], - sdwandevice_list: [], - sdwansitewan_list: [] - } - }; - - bodyTemplateParameter = {}; - - // SOTN VPN List - sotnVpnTableData = []; - sotnInfo = {};//sotnmodel The first part of sotnInfo - sotnSdwansitelanData = [];//sotnmodel The second part of the data sdwansitelan Table - sotnSdwansitelanParams = {};//sdwansitelan Table Detailed parameters of each line of data - tabInputShowSdwansitelan = [];//sdwansitelan Table input&span The status identifier of the label switching display - // Site List - siteTableData = []; - siteBaseData = {}; //sitemodel one sdwansiteresource_list - // cpe - siteSdwanDevice = []; //sitemodel SdwanDevice port Table data - siteCpeData = {}; //sitemodel two sdwandevice_list - tabInputShowDevice = [];//Device port Table input和span The status identifier of the label switching display - // Wan Port - siteWanData = []; //sitemodel three wan port Table data - siteWanParams = {}; //wan port Table Detailed parameters of each line of data - tabInputShowWanPort = [];//wan port Table input和span The status identifier of the label switching display - getKeys(item) { - return Object.keys(item); - } - - getccvpnTemParameters(data) { //Get template parameters - console.log(this.createParams); - if (typeof data["model"] == 'string') { - data = JSON.parse(data["model"]); - } - console.log(data); - let inputss = data["inputs"]; - let inputs = {}; - this.templateParameters.service = { - name: data.metadata["name"], - description: data.metadata.description, - serviceInvariantUuid: data.metadata.invariantUUID, - serviceUuid: data.metadata.UUID - }; - - //Screening separation sotnvpn data - Object.keys(inputss).map((items) => { - if (items.search("vpn") != -1) { - this.bodyTemplateParameter[items] = []; - inputss[items].map((item, index) => { - if (item["required"] != undefined) { - this.templateParameters["sotnvpn"]["sdwanvpnresource_list"].push(item); - } - if (item["required"] == undefined && Object.keys(item).length == 1 && Object.keys(item)[0].search("site") != -1 && item[Object.keys(item)[0]] instanceof Array === true) { - this.templateParameters["sotnvpn"]["sdwansitelan_list"] = item[Object.keys(item)[0]] - let sitelanKey = {}; - sitelanKey[Object.keys(item)[0]] = []; - this.bodyTemplateParameter[items].push(sitelanKey); - } - }); - } - if (items.search("site") != -1) { - this.bodyTemplateParameter[items] = []; - inputss[items].map((item, index) => { - if (item["required"] != undefined) { - this.templateParameters["site"]["sdwansiteresource_list"].push(item); - } - if (item["required"] == undefined && Object.keys(item).length == 1 && Object.keys(item)[0].search("device") != -1 && item[Object.keys(item)[0]] instanceof Array === true) { - this.templateParameters["site"]["sdwandevice_list"] = item[Object.keys(item)[0]]; - let sitelanKey = {}; - sitelanKey[Object.keys(item)[0]] = []; - this.bodyTemplateParameter[items].push(sitelanKey); - } - if (item["required"] == undefined && Object.keys(item).length == 1 && Object.keys(item)[0].search("site") != -1 && Object.keys(item)[0].search("device") == -1 && item[Object.keys(item)[0]] instanceof Array === true) { - this.templateParameters["site"]["sdwansitewan_list"] = item[Object.keys(item)[0]]; - let sitelanKey = {}; - sitelanKey[Object.keys(item)[0]] = []; - this.bodyTemplateParameter[items].push(sitelanKey); - } - }); - } - }); - this.showTemParametersSotnVpn(); - this.showTemParametersSite(); - console.log(this.bodyTemplateParameter,this.templateParameters) - } - - //sotnVpn data, after combining the structure, rendering the template data to the page - showTemParametersSotnVpn() { - //sotn Data analysis, structure assembly - this.templateParameters.sotnvpn.sdwanvpnresource_list.map((item, index) => { - let input = {}; - for (var keys in item) { - if (keys != "required" && keys != "type" && keys != "description") { - input[keys] = item[keys]; - item["lable"] = keys; - item["lableShow"] = keys.split("_")[1]; - this.sotnInfo = Object.assign(this.sotnInfo, input); - } - } - }); - - this.templateParameters.sotnvpn.sdwansitelan_list.map((item, index) => { - let input = {}; - for (var keys in item) { - if (keys != "required" && keys != "type" && keys != "description") { - input[keys] = item[keys]; - item["lable"] = keys; - this.sotnSdwansitelanParams = Object.assign(this.sotnSdwansitelanParams, this.sotnSdwansitelanParams, input); - } - } - }); - this.sotnSdwansitelanData.push(this.sotnSdwansitelanParams); - this.sotnSdwansitelanData.map((item, index) => { - this.tabInputShowSdwansitelan[index] = true; - }); - } - - //Site data, after combining the structure, rendering the template to the page - showTemParametersSite() { - //site Data analysis, structure assembly - this.templateParameters.site.sdwansiteresource_list.map((item, index) => { - let input = {}; - for (var keys in item) { - if (keys != "required" && keys != "type" && keys != "description") { - input[keys] = item[keys]; - item["lable"] = keys; - item["lableShow"] = keys.split("_")[1]; - this.siteBaseData = Object.assign(this.siteBaseData, input); - } - } - }); - - this.templateParameters.site.sdwandevice_list.map((item, index) => { - let input = {}; - for (var keys in item) { - if (keys != "required" && keys != "type" && keys != "description") { - input[keys] = item[keys]; - item["lable"] = keys; - this.siteCpeData = Object.assign(this.siteCpeData, input); - } - } - }); - this.templateParameters.site.sdwandevice_list.map((item, index) => { - if (this.getKeys(item).indexOf("lable") == -1) { - this.templateParameters.site.sdwandevice_list.splice(index, 1) - } - }); - this.templateParameters.site.sdwansitewan_list.push( - { - ipMode: "", - description: "" - }, - { - publicIP: "", - description: "" - } - ); - - this.templateParameters.site.sdwansitewan_list.map((item, index) => { - let input = {}; - for (var keys in item) { - if (keys != "required" && keys != "type" && keys != "description") { - input[keys] = item[keys]; - item["lable"] = keys; - this.siteWanParams = Object.assign(this.siteWanParams, this.siteWanParams, input); - } - } - }); - this.siteSdwanDevice.push(this.siteCpeData); - this.siteWanData.push(this.siteWanParams); - this.siteWanData.map((item, index) => { - this.tabInputShowDevice[index] = true; - }); - this.siteWanData.map((item, index) => { - this.tabInputShowWanPort[index] = true; - }); - - } - - //add,edit,delete sotnSdwansitelan - addSotnSdwansitelan() { - if (this.tabInputShowSdwansitelan.indexOf(true) > -1) {//Adding new rows is not allowed when there is a row of data being edited - return false; - } - let addNum = this.sotnSdwansitelanData.length; - let inputsData = Object.assign({}, this.sotnSdwansitelanParams); - Object.keys(inputsData).forEach((item) => {//Add a new line of empty data - if (item != "description") { - inputsData[item] = null; - } - }); - this.sotnSdwansitelanData[addNum] = inputsData; - this.tabInputShowSdwansitelan[addNum] = true; - this.sotnSdwansitelanData = [...this.sotnSdwansitelanData]; //Table refresh - } - editSotnSdwansitelan(num, item, sotnSdwansitelanData) { - if (this.tabInputShowSdwansitelan[num - 1] == false) { - this.tabInputShowSdwansitelan[num - 1] = true; - } else { - this.tabInputShowSdwansitelan[num - 1] = false; - } - } - deleteSotnSdwansitelan(num, item, sotnSdwansitelanData) { - if (this.sotnSdwansitelanData.length <= 1) { - return false; - } else { - - } - this.sotnSdwansitelanData = this.sotnSdwansitelanData.filter((d, i) => i !== num - 1); - } - - //add,edit,delete SdwanDevice - addSdwanDevice() { - if (this.tabInputShowDevice.indexOf(true) > -1) {//当有正在编辑的一行数据时，不允许添加新的行 - return false; - } - let addNum = this.siteSdwanDevice.length; - let inputsData = Object.assign({}, this.siteCpeData); - Object.keys(inputsData).forEach((item) => {//新增一行空数据 - if (item != "description") { - inputsData[item] = null; - } - }); - this.siteSdwanDevice[addNum] = inputsData; - this.tabInputShowDevice[addNum] = true; - this.siteSdwanDevice = [...this.siteSdwanDevice]; //表格刷新 - } - - editDevicePort(num, item, siteSdwanDevice) { - if (this.tabInputShowDevice[num - 1] == false) { - this.tabInputShowDevice[num - 1] = true; - } else { - this.tabInputShowDevice[num - 1] = false; - } - } - - deleteDevicePort(num, item, siteSdwanDevice) { - if (this.siteSdwanDevice.length <= 1) { - return false; - } - this.siteSdwanDevice = this.siteSdwanDevice.filter((d, i) => i !== num - 1); - } - - //add,edit,delete siteWanPort - addSiteWan() { - if (this.tabInputShowWanPort.indexOf(true) > -1) {//Adding new rows is not allowed when there is a row of data being edited - return false; - } - let addNum = this.siteWanData.length; - let inputsData = Object.assign({}, this.siteWanParams); - Object.keys(inputsData).forEach((item) => {//Add a new line of empty data - if (item != "description") { - inputsData[item] = null; - } - }); - this.siteWanData[addNum] = inputsData; - this.tabInputShowWanPort[addNum] = true; - this.siteWanData = [...this.siteWanData]; //Table refresh - } - editWanPort(num, item, siteWanData) { - if (this.tabInputShowWanPort[num - 1] == false) { - this.tabInputShowWanPort[num - 1] = true; - } else { - this.tabInputShowWanPort[num - 1] = false; - } - } - deleteWanPort(num, item, siteWanData) { - if (this.siteWanData.length <= 1) { - return false; - } - this.siteWanData = this.siteWanData.filter((d, i) => i !== num - 1); - } - - //siteModel,sotnVpnModel Display sign - siteModelShow = false; - sotnVpnModelShow = false; - addSotnvpn() { - this.sotnVpnModelShow = true; - this.isEditSotnVpn = 0; - } - addSite() { - this.siteModelShow = true; - this.isEditSite = 0; - } - - //add sotnVpn model - isEditSotnVpn = 0;//Edit serial number, No value, 0 means increase - addSotnVpn_OK() { - let inputs = { - "sdwansitelan_list": [] - }; - inputs = Object.assign(inputs, this.sotnInfo); - inputs["sdwansitelan_list"] = this.sotnSdwansitelanData.map((item) => { - return Object.assign({}, item); - }); - if (this.isEditSotnVpn) { - // Edit status does not increase - this.sotnVpnTableData[this.isEditSotnVpn - 1] = inputs; - this.sotnVpnTableData = [...this.sotnVpnTableData]; //Table refresh - } else { - this.sotnVpnTableData = [...this.sotnVpnTableData, inputs]; - } - Object.keys(this.sotnInfo).forEach((item) => { //Clear modal box - this.sotnInfo[item] = null; - }); - this.sotnSdwansitelanData.forEach((item, index) => { - if (index > 0) { - this.sotnSdwansitelanData.splice(index, 1); - this.tabInputShowSdwansitelan.splice(index, 1); - } else { - Object.keys(item).forEach((item2) => { - item[item2] = null; - }); - this.tabInputShowSdwansitelan[index] = true; - } - - }); - this.sotnVpnModelShow = false; - } - - addSotnVpn_cancel() { - Object.keys(this.sotnInfo).forEach((item) => { //Clear modal box - this.sotnInfo[item] = null; - }); - this.sotnSdwansitelanData.forEach((item, index) => { - if (index > 0) { - this.sotnSdwansitelanData.splice(index, 1); - } else { - Object.keys(item).forEach((item2) => { - item[item2] = null; - }); - this.tabInputShowSdwansitelan[index] = true; - } - - }); - this.sotnVpnModelShow = false; - } - - editSotnVpn(num) { - this.sotnVpnModelShow = true; - this.isEditSotnVpn = num; - Object.keys(this.sotnInfo).forEach((item) => { //Clear modal box - this.sotnInfo[item] = this.sotnVpnTableData[num - 1][item]; - }); - this.sotnSdwansitelanData = this.sotnVpnTableData[num - 1].sdwansitelan_list.map((item) => { - return Object.assign({}, {}, item) - }); - this.sotnSdwansitelanData.forEach((item, index) => { - this.tabInputShowSdwansitelan[index] = false; - }); - } - - deleteSotnVpn(num) { - this.sotnVpnTableData = this.sotnVpnTableData.filter((d, i) => i !== num - 1); - } - - // addsite model - isEditSite = 0; //Edit serial number, No value, 0 means increase - addsite_OK() { - let inputs = { - "sdwandevice_list": [], - "sdwansitewan_list": [] - }; - inputs = Object.assign(inputs, this.siteBaseData); - inputs["sdwandevice_list"] = this.siteSdwanDevice.map((item) => { - return Object.assign({}, item); - }); - inputs["sdwansitewan_list"] = this.siteWanData.map((item) => { - return Object.assign({}, item); - }); - if (this.isEditSite) { - // Edit status does not increase - this.siteTableData[this.isEditSite - 1] = inputs; - this.siteTableData = [...this.siteTableData]; //Table refresh - } else { - this.siteTableData = [...this.siteTableData, inputs]; - } - - Object.keys(this.siteBaseData).forEach((item) => { //Clear modal box - this.siteBaseData[item] = null; - }); - this.siteSdwanDevice.forEach((item, index) => { - if (index > 0) { - this.siteSdwanDevice.splice(index, 1); - this.tabInputShowDevice.splice(index, 1); - } else { - Object.keys(item).forEach((item2) => { - item[item2] = null; - }); - this.tabInputShowDevice[index] = true; - } - }); - this.siteWanData.forEach((item, index) => { - if (index > 0) { - this.siteWanData.splice(index, 1); - this.tabInputShowWanPort.splice(index, 1); - } else { - Object.keys(item).forEach((item2) => { - item[item2] = null; - }); - this.tabInputShowWanPort[index] = true; - } - }); - console.log(this.siteTableData); - this.drawImage(this.siteTableData); - this.siteModelShow = false; - } - - addsite_cancel() { - Object.keys(this.siteBaseData).forEach((item) => { //Clear modal box - this.siteBaseData[item] = null; - }) - this.siteSdwanDevice.forEach((item, index) => { - if (index > 0) { - this.siteSdwanDevice.splice(index, 1); - } else { - Object.keys(item).forEach((item2) => { - item[item2] = null; - }); - this.tabInputShowDevice[index] = true; - } - - }); - this.siteWanData.forEach((item, index) => { - if (index > 0) { - this.siteWanData.splice(index, 1); - } else { - Object.keys(item).forEach((item2) => { - item[item2] = null; - }); - this.tabInputShowWanPort[index] = true; - } - - }); - this.siteModelShow = false; - } - - editSite(num) { //Edit and modify the selected site information - this.siteModelShow = true; - this.isEditSite = num; - Object.keys(this.siteBaseData).forEach((item) => { //Clear modal box - this.siteBaseData[item] = this.siteTableData[num - 1][item]; - }); - this.siteSdwanDevice = this.siteTableData[num - 1].sdwandevice_list.map((item) => { - return Object.assign({}, item) - }); - this.siteSdwanDevice.forEach((item, index) => { - this.tabInputShowDevice[index] = false; - }); - this.siteWanData = this.siteTableData[num - 1].sdwansitewan_list.map((item) => { - return Object.assign({}, item) - }); - this.siteWanData.forEach((item, index) => { - this.tabInputShowWanPort[index] = false; - }); - } - - deleteSite(num) { - this.siteTableData = this.siteTableData.filter((d, i) => i !== num - 1); - this.drawImage(this.siteTableData); - } - - // Site node graphic depiction - lines = []; - siteImage = []; - tpImage = []; - imgmap = { - '1': './assets/images/domain1.png', - '2': './assets/images/site.png' - }; - - drawImage(sitelist) { - let cx = 550; - let cy = 40; - let innerx1 = 720; //Left site pattern coordinate position - let innery1 = 40; - let ox = 950; - let oy = 50; - let innerx2 = 780;//Right site pattern coordinate position - let innery2 = 50; - let lateX1 = Math.random() * 30 + 55; - let lateX2 = 10; - let lateY1 = 15; - this.lines = sitelist.map((item, index) => { - let step = index + 1; - let x = cx; - let y = cy; - let innerX = innerx1; - let innerY = innery1; - if (step % 2 != 0) { //Left site pattern coordinate position - x = cx; - y = cy; - innerX = innerx1; - innerY = innery1; - if (step == 1) { - innerX = innerx1; - innerY = innery1; - } else { - x = cx - lateX1 * Math.ceil((step / 2)) >= 0 ? cx - lateX1 * Math.ceil((step / 2)) : -(cx - lateX1 * Math.ceil((step / 2))); - y = cy + lateY1 * Math.floor((step / 2)); - innerX = this.lines[step - 3].innerX - lateX2; - innerY = y; - } - } else { //Right site pattern coordinate position - x = ox; - y = oy; - innerX = innerx2; - innerY = innery2; - if (step / 2 == 1) { - innerX = innerx2; - innerY = innery2; - } else { - x = ox + lateX1 * (step / 2) >= 0 ? ox + lateX1 * (step / 2) : -(ox + lateX1 * (step / 2)); - y = oy + lateY1 * (step / 2 - 1); - innerX = this.lines[step - 3].innerX - lateX2; - innerY = y; - } - } - return { - img: "line", - site: item.sdwandevice_list[0].name, - x1: x, - y1: y, - x2: innerX, - y2: innerY, - innerX: innerX, - innerY: innerY - } - }); - this.render(this.imgmap, this.lines); - } - - render(imgmap, lines) { - - //enter - var svg = d3.select("svg"), - _g_lines = svg.selectAll('line.line') - .data(lines) - .enter() - .append('line') - .style('stroke', '#3fa8eb' - ) - .style('stroke-width', 2) - .attr('class', 'line') - .attr("x1", function (d) { - return d.x1; - }) - .attr("y1", function (d) { - return d.y1; - }) - .attr("x2", function (d) { - return d.x2; - }) - .attr("y2", function (d) { - return d.y2; - }), - _g_site = svg.selectAll('g.g-site') - .data(lines) - .enter() - .append('g') - .style('cursor', 'pointer') - .attr('class', 'g-site'); - _g_site.append('image') - .style("width", "50px") - .attr('xlink:href', function (d) { - return imgmap[2]; - }) - .attr("x", function (d) { - return d.x1 - 25; - }) - .attr("y", function (d) { - return d.y1 - 25; - }) - - //quit - svg.selectAll("g.g-site") - .data(lines) - .exit() //Select a picture without bound data - .remove(); - svg.selectAll("line.line") - .data(lines) - .exit() //Select the connection without binding data - .remove(); - - } - - modifyJosnKey(json, oddkey, newkey) { - - let val = json[oddkey]; - delete json[oddkey]; - json[newkey] = val; - } - - // submit createData - submit() { - let globalCustomerId = this.createParams.commonParams.customer.id; - let globalServiceType = this.createParams.commonParams.serviceType.name; - let servicebody = { - service: { - name: this.templateParameters.service["name"], - description: this.templateParameters.service["description"], - serviceInvariantUuid: this.templateParameters.service["serviceInvariantUuid"], - serviceUuid: this.templateParameters.service["serviceUuid"], - globalSubscriberId: globalCustomerId, //customer.id - serviceType: globalServiceType, //serviceType.value - parameters: { - locationConstraints: [], - resources: [], - requestInputs: {} - }, - } - }; - let siteresource = null, sitewan = null, device = null, vpnresource = null, sitelan = null; - Object.keys(this.bodyTemplateParameter).map((item, index) => { - if (item.search("site") != -1) { - siteresource = item; - this.bodyTemplateParameter[item].map((items, index) => { - if (Object.keys(items)[0].search("site") != -1 && Object.keys(items)[0].search("device") == -1) { - sitewan = Object.keys(items)[0] - } - if (Object.keys(items)[0].search("device") != -1) { - device = Object.keys(items)[0] - } - }); - } - if (item.search("vpn") != -1) { - vpnresource = item; - this.bodyTemplateParameter[item].map((items, index) => { - if (Object.keys(items)[0].search("site") != -1) { - sitelan = Object.keys(items)[0] - } - }); - } - }); - this.sotnVpnTableData.forEach((item, index) => { - Object.keys(item).map((items, index) => { - if (items.search("site") != -1 && item[items] instanceof Array === true) { - this.modifyJosnKey(item, items, sitelan) - } - }); - }); - this.siteTableData.forEach((item, index) => { - Object.keys(item).map((items, index) => { - if (items.search("site") != -1 && Object.keys(item)[0].search("device") == -1 && item[items] instanceof Array === true) { - this.modifyJosnKey(item, items, sitewan) - } - if (items.search("device") != -1) { - this.modifyJosnKey(item, items, device) - } - }); - }); - Object.keys(this.bodyTemplateParameter).map((item, index) => { - if (item.search("site") != -1) { - servicebody.service.parameters.requestInputs[item] = [].concat(this.siteTableData); - } - if (item.search("vpn") != -1) { - servicebody.service.parameters.requestInputs[item] = [].concat(this.sotnVpnTableData); - } - }); - console.log(servicebody); - - this.closeCreate.emit(servicebody); - - } - - goback() { - this.closeCreate.emit(); - } -} diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css deleted file mode 100644 index 72e59fa5..00000000 --- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css +++ /dev/null @@ -1,365 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -.title { - font: 700 18px/18px "思源黑体"; - color: #4c5e70; - margin-bottom: 18px; -} -hr { - border: none; - height: 2px; - background-color: #dce1e7; - margin-bottom: 10px; -} -.model { - background-color: #F7F8FC; - overflow-y: auto; -} -.creation-model{ - position: relative; - height: 100%; -} -.top-title{ - width: 100%; - padding: 20px; - position: relative; - display: inline-block; -} -.model .submit{ - position: absolute; - width: 90px; - height: 35px; - top: 10px; - right: 85px; - color: #fff; - font-size: 18px; - background: #0DA9E2; - border-radius: 4px; - border: none!important; - border-color: rgba(0,0,0,0)!important; -} -.model .back,.model .back:hover{ - position: absolute; - top: 10px; - right: 20px; - display: inline-block; - width: 35px; - height: 35px; - background:url("../../assets/images/Return-icon.png") no-repeat!important; - background-size: 100%!important; - border-radius:4px; - color: #D7D7D7; - cursor: pointer; -} -.model .back:hover{ - background: url("../../assets/images/Return-icon-active.png")!important; - background-size: 100%!important; -} -.top-title h3.title { - height: 35px; - width: 80%; - font-size:16px; - font-family:ArialMT; - color:#3C4F8C; - line-height:35px; - display: inline-block; -} - - -.model .detaildata { - width: 100%; - overflow-y: auto; - border-radius: 5px; - padding: 15px; -} -.model .detaildata h3.title { - height: 20px; - font: 700 20px/20px "Arial"; - color: #666; -} -.model .detaildata h3 { - height: 20px; - font: 700 16px/20px "Arial"; - margin: 5px 0; - color: #000; -} -.model .detaildata .service-title{ - margin:60px 50px; -} -.model .detaildata .service-title .info-inputs{ - width:400px; - height: 42px; - display: inline-block; -} -.model .detaildata .service-title span{ - height: 42px; - line-height: 42px; - vertical-align: middle; -} -.model .detaildata .service-title .lable{ - display: inline-block; - width: 100px; - font: 700 14px "Arial"; - color: #3C4F8C; - height: 42px; - line-height: 42px; - vertical-align: middle; - margin-left: 5px; -} -.model .detaildata .service-title .service-title-input { - width: 230px; - height: 42px; - border-radius:4px; - margin-right: 30px; - display: inline-block; -} -/* SOTN VPN */ -.model .detaildata .sotnvpn ul li { - display: inline-block; - height: 40px; - width: 24.5%; - margin-bottom: 40px; - float: left; -} -.model .detaildata .sotnvpn ul li span { - display: inline-block; - font-size: 14px; - font-weight: 500; - color:rgba(60,79,140,0.5); - margin-left: 10px; - vertical-align: middle; - float: left; - width: 110px; -} - -.model .sitemodel .inputs ul li span,.model .sotnnpnmodel .inputs ul li span { - display: inline-block; - line-height: 35px; - font-size: 14px; - font-weight: 500; - color: #3C4F8C; - margin-left: 10px; - vertical-align: middle; - float: left; -} -.model .sitemodel .inputs input,.model .sitemodel .inputs nz-select{ - width: 186px; - float: right; - margin-right: 60px; -} -.model .sotnnpnmodel .inputs input{ - width: 186px; - float: left; - margin-left: 20px; -} - -/* addsite model */ -.model .sitemodel,.model .sotnnpnmodel{ - position: absolute; - z-index: 1001; - left: 50px; - top: 60px; - background-color: #fff; - width:1500px; - height: 81%; - border-radius:2px; - overflow:auto; -} -.model .sotnnpnmodel{ - width: 1000px; - height: 53%; - top:200px; - left: 50%; - margin-left: -500px; -} -.model .sitemodel h3,.model .sotnnpnmodel h3{ - width: 96%; - height: 40px; - line-height: 35px; - font-size: 18px; - font-weight: 500; - margin: 10px auto; - color: #06A7E2; - border-bottom: 2px solid; - border-image: -webkit-linear-gradient(#07A9E1,#30D9C4) 100 100; - border-image: -moz-linear-gradient(#07A9E1,#30D9C4) 100 100; - border-image: linear-gradient(#07A9E1,#30D9C4) 100 100; - border-radius:2px; -} -.model .sitemodel .inputs,.model .sotnnpnmodel .inputs { - padding: 10px 20px 0; -} -.model .sitemodel .inputs ul li,.model .sotnnpnmodel .inputs ul li { - display: inline-block; - height: 35px; - line-height: 35px; - width: 24.5%; - margin-bottom: 20px; -} -.model .sotnnpnmodel .inputs ul li{ - width: 31%; -} -.model .sitemodel .inputs ul li span,.model .sotnnpnmodel .inputs ul li span { - display: inline-block; - line-height: 35px; - font-size: 14px; - font-weight: 500; - color: #3C4F8C; - margin-left: 10px; - vertical-align: middle; - float: left; -} -.model .sitemodel .inputs input,.model .sitemodel .inputs nz-select{ - width: 186px; - float: right; - margin-right: 60px; -} -.model .sotnnpnmodel .inputs div{ - width: 186px; - float: left; - margin-left: 20px; -} -.model .sitemodel .action,.model .sotnnpnmodel .action { - text-align: center; - margin-top: 30px; - margin-bottom: 20px; - cursor: pointer -} -.model .sotnnpnmodel .action{ - margin-top: 70px; -} -.model .sitemodel .action button,.model .sotnnpnmodel .action button{ - width: 126px; - height:40px; - background:#EEEEEE; - border-radius:2px; - border: none!important; - color: #9DA7C5; - font-size: 16px; - margin: 0 15px; -} -.model .sitemodel .action button:nth-child(2),.model .sotnnpnmodel .action button:nth-child(2){ - background: #0DA9E2; - color: #fff; -} -.model .sitemodel .action button:nth-child(2):hover,.model .sotnnpnmodel .action button:nth-child(2):hover{ - background:#09C6E2; -} - -.model nz-table tbody td i.anticon:hover { - color: #3fa8eb; - cursor: pointer; -} - -/* site table */ -.sitemodel h3 button,.sotnnpnmodel h3 button{ - color: #D7D7D7; - width:32px; - height:32px; - background:#ffffff; - border-radius:4px; - border:1px solid #D7D7D7; -} -.sitemodel h3 button:hover,.sotnnpnmodel h3 button:hover{ - background:#ffffff; - color: #0DA9E2; - border:1px solid #0DA9E2; -} -.sitemodel h3>button,.sotnnpnmodel h3>button{ - float: right; - width: 30px; - height: 30px; - margin-right: 15px; -} - -/* site Detail */ - -.model .detaildata .site h3 .closeDetail { - cursor: pointer; - padding: 2px 15px; - color: #3fa8eb; -} - -.model .detaildata .sotnvpn,.model .detaildata .site{ - background: #fff; - padding: 30px 30px 0 30px; -} - -.mask{ - width: 100%; - height: 100%; - position: absolute; - z-index: 1000; - background: rgba(0, 0, 0, 0.65); - top:0; -} - -/* charts */ -.model .chart { - width: 98%; - padding: 10px; - margin: 0 auto; - color: #06A7E2; - font-size: 16px; - font-weight: 500; - margin-bottom: 30px; - background: #EEF9FF; - border-radius: 4px; -} -.model .chart #detailChart { - width: 100%; - height: 254px; - margin-top: 20px; - position: relative; -} -.model .chart #detailChart .cloudcounty { - cursor: pointer; -} - -.model .chart #detailChart .couldDetail { - position: absolute; - left: 50%; - top: 10px; - width: 80%; - transform: translate(-50%,0); - height: 160px; - background-color: #aaa; - border-radius: 5px; - box-shadow: 0px 0px 20px #000; -} -.siteWanTab{ - width: 96%; - margin: 0 auto; - margin-top: 10px; -} -.siteWanTab th{ - padding: 10px 8px; - color: #3C4F8C; - font-size: 16px; -} -.siteWanTab tr td{ - padding: 10px 5px; -} -.siteWanTab .tr-border{ - border-bottom: 1px solid #EDEDED; -} -.addListBtn{ - margin-right: 30px; - color: #06A7E2; - border: none; - background: rgba(229,238,252,0.8); - cursor: pointer; -} diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html deleted file mode 100644 index ce556687..00000000 --- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html +++ /dev/null @@ -1,468 +0,0 @@ - - -
    - -
    -

    {{detailParams['service-instance-name']}} Instance Detail

    -
    - - -
    -
    - -
    - -
    - - - - - - {{vpns[0].domain}} - - - - - - {{vpns[1].domain}} - - - - - - - {{vpns[0].sitetpname}} - - - - - - {{vpns[0].othertpname}} - - - - - - - {{vpns[1].othertpname}} - - - - - - {{vpns[1].sitetpname}} - - - - - - - SP Partent Network - - - - - - - {{localSite[0] && localSite[0]["service-instance-name"]}} - - - - - - {{ localSite[1] && localSite[1]["service-instance-name"]}} - - - - {{ localSite[1] && localSite[1]["service-instance-name"]}} - - - - - - - {{outerSite[1] && outerSite[1]["service-instance-name"]}} - - - - - - {{outerSite[0] && outerSite[0]["service-instance-name"]}} - - - - - - -
    -
    -
    - - -
    - name: -
    {{templateParameters.service["name"]}}
    - description: -
    {{templateParameters.service["description"]}}
    -
    -     - -
    -
    -

    sdwanVPN List

    - -
    - - - - NO. - Name - topology - Action - - - - - {{i+1}} - {{item.sdwanvpn_name}} - {{item.sdwanvpn_topology}} - - - -   - - - - - -
    -     - -
    -
    -

    Site List

    - -
    - - - - NO. - Name - Description - Post Code - Address - VLAN - Action - - - - - - {{i+1}} - {{item.sdwandevice_list[0].name}} - {{item.sdwansite_description}} - {{item.sdwansite_postcode}} - {{item.sdwansite_address}} - {{item.sdwansite_emails}} - - -   - -   - - - - - - -
    -     -     -
    - -
    -

    {{"i18nTextDefine_Base" | translate}}

    -
    -
      -
    • - {{item.lableShow}}: - {{sotnInfo[item.lable]}} -
      • -
    -
    -
    -

    Sdwansitelan List

    -
    -
    -
    - - - - - - - - - - - - - -
    NO.{{key}}
    {{i+1}} - {{item[key]}} -
    -
    -
    -
    - -
    -
    - -
    -

    {{"i18nTextDefine_Base" | translate}}

    -
    -
      -
    • - {{item.lableShow}}: - {{siteBaseData[item.lable]}} -
      • -
    -
    -
    -

    Sdwandevice

    -
    - - - - - - - - - - - - - -
    NO.{{key}}
    {{i+1}} - {{item[key]}} -
    -
    -

    Sdwansitewan List

    -
    - - - - - - - - - - - - - -
    NO.{{key}}
    {{i+1}} - {{item[key]}} -
    -
    -
    - -
    - -
    -
    - -
    -

    {{"i18nTextDefine_Base" | translate}}

    -
    -
      -
    • - {{item.lableShow}}: -
      • -
    -
    -
    -

    Sdwansitelan List

    -
    -
    - -
    - - - - - - - - - - - - - - - -
    NO.{{key}} Action
    {{i+1}} - {{item[key]}} - - - - -
    -
    -
    - -
    - - -
    -
    - -
    -

    {{"i18nTextDefine_Base" | translate}}

    -
    -
      -
    • - {{item.lableShow}}: -
      • -
    -
    -
    -

    Sdwandevice

    -
    -
      -
    • - {{item.lable}}: - -
      • -
    -
    -

    Sdwansitewan List

    -
    -
    - -
    - - - - - - - - - - - - - - - -
    NO.{{key}} Action
    {{i+1}} - {{item[key]}} - - - - -
    -
    -
    - -
    - - -
    -
    -
    -
    diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.spec.ts b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.spec.ts deleted file mode 100644 index 2d466531..00000000 --- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.spec.ts +++ /dev/null @@ -1,69 +0,0 @@ -/* - Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { NgZorroAntdModule } from 'ng-zorro-antd'; -import { HttpClientModule } from '@angular/common/http'; -import { NZ_I18N, en_US } from 'ng-zorro-antd'; -import { TranslateModule, TranslateLoader, TranslateService, TranslateFakeLoader } from '@ngx-translate/core'; - -import { CcvpnDetailComponent } from './ccvpn-detail.component'; -import { MyhttpService } from '../myhttp.service'; - -describe('CcvpnDetailComponent', () => { - let component: CcvpnDetailComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [CcvpnDetailComponent], - imports: [TranslateModule.forRoot({ loader: { provide: TranslateLoader, useClass: TranslateFakeLoader } }), - NgZorroAntdModule.forRoot(), HttpClientModule], - providers: [MyhttpService, { provide: NZ_I18N, useValue: en_US }] - }) - .compileComponents(); - })); - - beforeEach(() => { - let detailshow = false; - detailData: Object; - let serviceDetail = (service) => { - service["siteSer"] = []; - service["sdwanSer"] = []; - service["customer"] = this.customerSelected; - service["serviceType"] = this.serviceTypeSelected; - - service.childServiceInstances.forEach((item) => { - if (item.serviceDomain == "SITE") { - service.siteSer.push(item); - } else if (item.serviceDomain == "SDWAN") { - service.sdwanSer.push(item); - } - }) - this.detailshow = true; - this.detailData = service; - component.detailParams = this.detailData - fixture = TestBed.createComponent(CcvpnDetailComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }; - - it('should create', () => { - console.log(component); - expect(component).toBeTruthy(); - }); - }); - -}); diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts deleted file mode 100644 index 04931461..00000000 --- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts +++ /dev/null @@ -1,815 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; -import { MyhttpService } from '../myhttp.service'; -import * as d3 from 'd3'; - -@Component({ - selector: 'app-ccvpn-detail', - templateUrl: './ccvpn-detail.component.html', - styleUrls: ['./ccvpn-detail.component.css'] -}) -export class CcvpnDetailComponent implements OnInit { - - constructor(private myhttp: MyhttpService) { } - - ngOnInit() { - this.dataInit(); - this.drawImages(); - } - - @Input() detailParams; - @Input() upDateShow; - @Output() closeDetail = new EventEmitter(); - @Output() closeUpdate = new EventEmitter(); - - tabBarStyle = { - "height": "58px", - "width": "694px", - "box-shadow": "none", - "margin": "0", - "border-radius": "4px 4px 0px 0px" - }; - input_parameters: any; - templateParameters = { - service: {}, - sotnvpn: { - // info: {}, - sdwanvpnresource_list: [], - sdwansitelan_list: [] - }, - site: { - // info: {}, - sdwansiteresource_list: [], - sdwandevice_list: [], - sdwansitewan_list: [] - } - }; - bodyTemplateParameter = {}; - - // SOTN VPN List - sotnVpnTableData = []; - sotnInfo = {};//sotnmodel The first part of sotnInfo - sotnSdwansitelanData = [];//sotnmodel The second part of the data sdwansitelan Table - sotnSdwansitelanParams = {};//sdwansitelan Table Detailed parameters of each line of data - tabInputShowSdwansitelan = [];//sdwansitelan table input and span - // Site List - siteTableData = []; - siteBaseData = {}; //sitemodel one sdwansiteresource_list - // cpe - siteSdwanDevice = []; //sitemodel SdwanDevice port Table data - siteCpeData = {}; //sitemodel two sdwandevice_list - tabInputShowDevice = [];//Device port input and span - // Wan Port - siteWanData = []; //sitemodel three wan port Table data - siteWanParams = {}; //wan port Table Detailed parameters of each line of data - tabInputShowWanPort = [];//wan port table input and span - sitenum = []; - sotnvpnnum = []; - - getKeys(item) { - return Object.keys(item); - } - //tabBarStyle - dataInit() { - console.log(this.detailParams); - // this.input_parameters = JSON.stringify(this.detailParams['input-parameters']) - if (this.detailParams['input-parameters']) { - this.input_parameters = JSON.parse(this.detailParams['input-parameters']); - } else { - return false; - } - console.log(this.input_parameters); - this.templateParameters.service = { - name: this.input_parameters.service.name, - description: this.input_parameters.service.description, - serviceInvariantUuid: this.input_parameters.service["serviceInvariantUuid"], - serviceUuid: this.input_parameters.service["serviceUuid"] - }; - let inputs = this.input_parameters.service.parameters.requestInputs; - - Object.keys(inputs).map((items) => { - if (items.search("vpn") != -1) { - this.bodyTemplateParameter[items] = []; - inputs[items].map((item, index) => { - this.sotnVpnTableData.push(item); - this.sotnvpnnum.push(false); - }); - let sdwanvpnresource_list = inputs[items][0]; - Object.keys(sdwanvpnresource_list).forEach((its) => { - let input = {}; - if (its.search("site") != -1 && sdwanvpnresource_list[its] instanceof Array === true) { - Object.keys(sdwanvpnresource_list[its][0]).forEach((i) => { - let input1 = {}; - input1[i] = sdwanvpnresource_list[its][i]; - this.templateParameters["sotnvpn"]["sdwansitelan_list"].push(input1); - }) - let sitelanKey = {}; - sitelanKey[its] = []; - this.bodyTemplateParameter[items].push(sitelanKey); - } - if (its.search("sitelan") == -1 && sdwanvpnresource_list[its] instanceof Array === false) { - input[its] = sdwanvpnresource_list[its]; - this.templateParameters["sotnvpn"]["sdwanvpnresource_list"].push(input); - } - }); - } - if (items.search("site") != -1) { - this.bodyTemplateParameter[items] = []; - inputs[items].map((item, index) => { - this.siteTableData.push(item); - this.sitenum.push(false); - }); - let sdwansiteresource_list = inputs[items][0]; - Object.keys(sdwansiteresource_list).forEach((its) => { - let input2 = {}; - if(its.search("device") != -1 && sdwansiteresource_list[its] instanceof Array === true){ - this.templateParameters["site"]["sdwandevice_list"][0] = sdwansiteresource_list[its][0]; - let sitelanKey = {}; - sitelanKey[its] = []; - this.bodyTemplateParameter[items].push(sitelanKey); - } - if (its.search("site") != -1 && its.search("device") == -1 && sdwansiteresource_list[its] instanceof Array === true) { - this.templateParameters["site"]["sdwansitewan_list"][0] = sdwansiteresource_list[its][0]; - let sitelanKey = {}; - sitelanKey[its] = []; - this.bodyTemplateParameter[items].push(sitelanKey); - } - if (its.search("device") == -1 && sdwansiteresource_list[its] instanceof Array === false) { - input2[its] = sdwansiteresource_list[its]; - this.templateParameters["site"]["sdwansiteresource_list"].push(input2); - } - }); - - } - }); - - console.log(this.templateParameters.site); - console.log(this.siteTableData); - - this.showTemParametersSotnVpn(); - this.showTemParametersSite(); - - } - - //sotnVpn data, after combining the structure, rendering the template data to the page - showTemParametersSotnVpn() { - //sotn Data analysis, structure assembly - this.templateParameters.sotnvpn.sdwanvpnresource_list.map((item, index) => { - let input = {}; - for (let keys in item) { - if (keys != "required" && keys != "type" && keys != "description") { - input[keys] = item[keys]; - item["lable"] = keys; - item["lableShow"] = keys.split("_")[1]; - this.sotnInfo = Object.assign(this.sotnInfo, input); - } - } - }); - - this.templateParameters.sotnvpn.sdwansitelan_list.map((item, index) => { - let input = {}; - for (let keys in item) { - if (keys != "required" && keys != "type" && keys != "description") { - input[keys] = item[keys]; - item["lable"] = keys; - this.sotnSdwansitelanParams = Object.assign(this.sotnSdwansitelanParams, this.sotnSdwansitelanParams, input); - } - } - }); - this.sotnSdwansitelanData.push(this.sotnSdwansitelanParams); - this.sotnSdwansitelanData.map((item, index) => { - this.tabInputShowSdwansitelan[index] = true; - }); - } - - //Site data, after combining the structure, rendering the template to the page - showTemParametersSite() { - //site Data analysis, structure assembly - this.templateParameters.site.sdwansiteresource_list.map((item, index) => { - let input = {}; - for (let keys in item) { - if (keys != "required" && keys != "type" && keys != "description") { - input[keys] = item[keys]; - item["lable"] = keys; - item["lableShow"] = keys.split("_")[1]; - this.siteBaseData = Object.assign(this.siteBaseData, input); - } - } - }); - - this.templateParameters.site.sdwandevice_list.map((item, index) => { - let input = {}; - for (let keys in item) { - if (keys != "required" && keys != "type" && keys != "description") { - input[keys] = item[keys]; - item["lable"] = keys; - this.siteCpeData = Object.assign(this.siteCpeData, input); - } - } - }); - this.templateParameters.site.sdwandevice_list.map((item, index) => { - if (this.getKeys(item).indexOf("lable") == -1) { - this.templateParameters.site.sdwandevice_list.splice(index, 1) - } - }); - this.templateParameters.site.sdwansitewan_list.map((item, index) => { - let input = {}; - for (let keys in item) { - if (keys != "required" && keys != "type" && keys != "description") { - input[keys] = item[keys]; - item["lable"] = keys; - this.siteWanParams = Object.assign(this.siteWanParams, this.siteWanParams, input); - } - } - }); - this.siteSdwanDevice.push(this.siteCpeData); - this.siteSdwanDevice.map((item, index) => { - this.tabInputShowDevice[index] = true; - }); - this.siteWanData.push(this.siteWanParams); - this.siteWanData.map((item, index) => { - this.tabInputShowWanPort[index] = true; - }); - } - - //sotnVpn detail show - sotnVpnDetailShow = false; - isEditSotnVpn = 0; - showstonVpnDetail(num) { - this.sotnVpnDetailShow = true; - this.isEditSotnVpn = num; - Object.keys(this.sotnInfo).forEach((item) => { - this.sotnInfo[item] = this.sotnVpnTableData[num - 1][item]; - }); - this.sotnSdwansitelanData = this.sotnVpnTableData[num - 1].sdwansitelan_list.map((item) => { - return Object.assign({}, {}, item) - }); - } - detailSotnVpn_cancel() { - this.sotnVpnDetailShow = false; - } - - // site detail show - siteDetail = false; - isEditSite = 0; - showSiteDetail(num) { - this.siteDetail = true; - this.isEditSite = num; - console.log(this.siteTableData[num - 1]); - Object.keys(this.siteBaseData).forEach((item) => { - this.siteBaseData[item] = this.siteTableData[num - 1][item]; - }); - this.siteSdwanDevice = this.siteTableData[num - 1].sdwandevice_list.map((item) => { - return Object.assign({}, {}, item) - }); - this.siteWanData = this.siteTableData[num - 1].sdwansitewan_list.map((item) => { - return Object.assign({}, {}, item) - }); - } - detailsite_cancel() { - this.siteDetail = false; - } - deleteUpdateSite(num) { - this.siteTableData = this.siteTableData.filter((d, i) => i !== num - 1); - this.sitenum.splice(num - 1, 1); - } - - //sotnVpn addModel - sotnVpnAddModelShow = false; - - updateSotnVpn_OK() { - let inputs = { - "sdwansitelan_list": [] - }; - inputs = Object.assign(inputs, this.sotnInfo); - inputs["sdwansitelan_list"] = this.sotnSdwansitelanData.map((item) => { - return Object.assign({}, item); - }); - if (this.isEditSotnVpn) { - - this.sotnVpnTableData[this.isEditSotnVpn - 1] = inputs; - this.sotnVpnTableData = [...this.sotnVpnTableData]; - } else { - // this.siteTableData.push(inputs); - this.sotnVpnTableData = [...this.sotnVpnTableData, inputs]; - this.sotnvpnnum = [...this.sotnvpnnum, true]; - } - Object.keys(this.sotnInfo).forEach((item) => { - this.sotnInfo[item] = null; - }); - this.sotnSdwansitelanData.forEach((item, index) => { - if (index > 0) { - this.sotnSdwansitelanData.splice(index, 1); - this.tabInputShowSdwansitelan.splice(index, 1); - } else { - Object.keys(item).forEach((item2) => { - item[item2] = null; - }); - this.tabInputShowSdwansitelan[index] = true; - } - - }); - this.sotnVpnAddModelShow = false; - } - - updateSotnVpn_cancel() { - Object.keys(this.sotnInfo).forEach((item) => { - this.sotnInfo[item] = null; - }); - this.sotnSdwansitelanData.forEach((item, index) => { - if (index > 0) { - this.sotnSdwansitelanData.splice(index, 1); - } else { - Object.keys(item).forEach((item2) => { - item[item2] = null; - }); - this.tabInputShowSdwansitelan[index] = true; - } - - }); - this.sotnVpnAddModelShow = false; - } - - editUpdateSotnVpn(num) { - this.sotnVpnAddModelShow = true; - this.isEditSotnVpn = num; - Object.keys(this.sotnInfo).forEach((item) => { - this.sotnInfo[item] = this.sotnVpnTableData[num - 1][item]; - }); - this.sotnSdwansitelanData = this.sotnVpnTableData[num - 1].sdwansitelan_list.map((item) => { - return Object.assign({}, {}, item) - }); - this.sotnSdwansitelanData.forEach((item, index) => { - this.tabInputShowSdwansitelan[index] = false; - }); - } - - deleteUpdateSotnVpn(num) { - this.sotnVpnTableData = this.sotnVpnTableData.filter((d, i) => i !== num - 1); - this.sotnvpnnum.splice(num - 1, 1); - } - updateSotnSdwansitelan() { - if (this.tabInputShowSdwansitelan.indexOf(true) > -1) { - return false; - } - let addNum = this.sotnSdwansitelanData.length; - let inputsData = Object.assign({}, this.sotnSdwansitelanParams); - Object.keys(inputsData).forEach((item) => { - if (item != "description") { - inputsData[item] = null; - } - }); - this.sotnSdwansitelanData[addNum] = inputsData; - this.tabInputShowSdwansitelan[addNum] = true; - this.sotnSdwansitelanData = [...this.sotnSdwansitelanData]; - } - editUpdateSotnSdwansitelan(num, item, sotnSdwansitelanData) { - if (this.tabInputShowSdwansitelan[num - 1] == false) { - this.tabInputShowSdwansitelan[num - 1] = true; - } else { - this.tabInputShowSdwansitelan[num - 1] = false; - } - } - deleteUpdateSotnSdwansitelan(num, item, sotnSdwansitelanData) { - if (this.sotnSdwansitelanData.length <= 1) { - return false; - } else { - - } - this.sotnSdwansitelanData = this.sotnSdwansitelanData.filter((d, i) => i !== num - 1); - } - - // site addModel - siteAddModelShow = false; - - updateSotnvpn() { - this.sotnVpnAddModelShow = true; - this.isEditSotnVpn = 0; - } - - updateSite() { - this.siteAddModelShow = true; - this.isEditSite = 0; - } - - editUpdateSite(num) { - this.siteAddModelShow = true; - this.isEditSite = num; - Object.keys(this.siteBaseData).forEach((item) => { - this.siteBaseData[item] = this.siteTableData[num - 1][item]; - }); - this.siteSdwanDevice = this.siteTableData[num - 1].sdwandevice_list.map((item) => { - return Object.assign({}, item) - }); - this.siteSdwanDevice.forEach((item, index) => { - this.tabInputShowDevice[index] = false; - }); - this.siteWanData = this.siteTableData[num - 1].sdwansitewan_list.map((item) => { - return Object.assign({}, item) - }); - this.siteWanData.forEach((item, index) => { - this.tabInputShowWanPort[index] = false; - }); - } - - updatesite_cancel() { - Object.keys(this.siteBaseData).forEach((item) => { - this.siteBaseData[item] = null; - }) - this.siteSdwanDevice.forEach((item, index) => { - if (index > 0) { - this.siteSdwanDevice.splice(index, 1); - } else { - Object.keys(item).forEach((item2) => { - item[item2] = null; - }); - this.tabInputShowDevice[index] = true; - } - - }); - this.siteWanData.forEach((item, index) => { - if (index > 0) { - this.siteWanData.splice(index, 1); - } else { - Object.keys(item).forEach((item2) => { - item[item2] = null; - }); - this.tabInputShowWanPort[index] = true; - } - - }); - this.siteAddModelShow = false; - } - - updatesite_OK() { - let inputs = { - "sdwandevice_list": [], - "sdwansitewan_list": [] - }; - inputs = Object.assign(inputs, this.siteBaseData); - inputs["sdwandevice_list"]= this.siteSdwanDevice.map((item) => { - return Object.assign({}, item); - }); - inputs["sdwansitewan_list"] = this.siteWanData.map((item) => { - return Object.assign({}, item); - }); - if (this.isEditSite) { - // Edit status does not increase - this.siteTableData[this.isEditSite - 1] = inputs; - this.siteTableData = [...this.siteTableData]; //Table refresh - } else { - // this.siteTableData.push(inputs); - this.siteTableData = [...this.siteTableData, inputs]; - this.sitenum = [...this.sitenum, true]; - } - - Object.keys(this.siteBaseData).forEach((item) => { //Clear modal box - this.siteBaseData[item] = null; - }); - this.siteSdwanDevice.forEach((item, index) => { - if (index > 0) { - this.siteSdwanDevice.splice(index, 1); - this.tabInputShowDevice.splice(index, 1); - } else { - Object.keys(item).forEach((item2) => { - item[item2] = null; - }); - this.tabInputShowDevice[index] = true; - } - - }); - this.siteWanData.forEach((item, index) => { - if (index > 0) { - this.siteWanData.splice(index, 1); - this.tabInputShowWanPort.splice(index, 1); - } else { - Object.keys(item).forEach((item2) => { - item[item2] = null; - }); - this.tabInputShowWanPort[index] = true; - } - - }); - console.log(this.siteTableData); - this.siteAddModelShow = false; - } - - //add.edit，detele siteWanPort - updateSiteWan() { - if (this.tabInputShowWanPort.indexOf(true) > -1) {//Adding new rows is not allowed when there is a row of data being edited - return false; - } - let addNum = this.siteWanData.length; - let inputsData = Object.assign({}, this.siteWanParams); - Object.keys(inputsData).forEach((item) => {//Add a new line of empty data - if (item != "description") { - inputsData[item] = null; - } - }); - this.siteWanData[addNum] = inputsData; - this.tabInputShowWanPort[addNum] = true; - this.siteWanData = [...this.siteWanData]; //Table refresh - console.log(this.siteWanData) - } - - editUpdateWanPort(num, item, siteWanData) { - if (this.tabInputShowWanPort[num - 1] == false) { - this.tabInputShowWanPort[num - 1] = true; - } else { - this.tabInputShowWanPort[num - 1] = false; - } - } - - deleteUpdateWanPort(num, item, siteWanData) { - if (this.siteWanData.length <= 1) { - return false; - } - this.siteWanData = this.siteWanData.filter((d, i) => i !== num - 1); - } - - // site节点图形描绘 - // site分类，根据site查tp pnf --> allotted-resource - localSite = [];//本地site - outerSite = [];//外部site - - getSiteAResource() { - return new Promise((res, rej) => { - this.detailParams.siteSer.forEach((site) => { - site["relationship-list"]["relationship"].find((item) => { return item["related-to"] == "site-resource" }) ? this.localSite.push(site) : this.outerSite.push(site); - }); - - if (this.localSite[0] && this.localSite[0]["service-instance-name"].startsWith("Dc")) { - this.localSite.reverse(); - } - - if (this.outerSite[0] && this.outerSite[0]["service-instance-name"].startsWith("Dc")) { - this.outerSite.reverse(); - } - if (this.localSite.length > 0) { - this.detailLines = [].concat(this.detailLiness); - this.localSite.forEach((site) => { - let obj = { - customerId: this.detailParams.customer.id, - serviceType: this.detailParams.serviceType, - serviceId: site["service-instance-id"] - }; - this.myhttp.getAllottedResource(obj) - .subscribe((data) => { - let resource = data["allotted-resource"].find((item) => { return item["allotted-resource-name"] == "sotn ar" }); - let tps_pnfs = resource["relationship-list"]["relationship"].find((item) => { return item["related-to"] == "p-interface" })["relationship-data"]; - site.tpsitename = tps_pnfs.find((item) => { return item["relationship-key"] == "p-interface.interface-name" })["relationship-value"]; - res("sites-domain"); - }) - }) - } else { - return false; - } - }) - } - - - vpns = [{ name: "", tps: [], domain: "", sitetpname: "", othertpname: "" }]; - - - getSotnAresource() { - return new Promise((res, rej) => { - let connectivityId = this.detailParams["relationship-list"]["relationship"] - .find((item) => { - return item["related-to"] == "connectivity" - })["relationship-data"] - .find((item2) => { - return item2["relationship-key"] == "connectivity.connectivity-id" - })["relationship-value"]; - this.myhttp.getSotnConnectivity(connectivityId) - .subscribe((data) => { - let vpns = data.connectivity[0]["relationship-list"]["relationship"] - .filter((item) => { - return item["related-to"] == "vpn-binding" - }) - .map((item2) => { - return item2["relationship-data"].find((item3) => { - return item3["relationship-key"] == "vpn-binding.vpn-id" - })["relationship-value"] - }); - console.log(vpns); - this.detailParams.vpns = vpns.map((item) => { - return { name: item } - }); - this.detailParams.vpns.forEach((vpn, index) => { - this.myhttp.getVpnBinding(vpn.name) - .subscribe((data2) => { - let tps_pnfs = data2["vpn-binding"][0]["relationship-list"]["relationship"] - .filter((item) => { - return item["related-to"] == "p-interface" - }) - .map((item2) => { - return item2["relationship-data"] - }); - let pnfname = tps_pnfs.map((item) => { - return item.find((item2) => { - return item2["relationship-key"] == "pnf.pnf-name" - })["relationship-value"] - }); - let tpnames = tps_pnfs.map((item) => { - return item.find((item2) => { - return item2["relationship-key"] == "p-interface.interface-name" - })["relationship-value"] - }); - vpn.tps = tpnames; - this.myhttp.getPnfDetail(pnfname[0]) - .subscribe((data2) => { - let networkRelation = data2["relationship-list"]["relationship"].find((item) => { - return item["related-to"] == "network-resource" - })["relationship-data"]; - vpn.domain = networkRelation.find((item) => { - return item["relationship-key"] == "network-resource.network-id" - })["relationship-value"]; - if (this.localSite[index]) { - vpn.sitetpname = this.localSite.find((site) => { - return tpnames.includes(site.tpsitename) - }).tpsitename; - console.log(tpnames); - console.log(vpn.sitetpname); - vpn.othertpname = tpnames.find((name) => { - return name != vpn.sitetpname - }); - } else { - vpn.sitetpname = this.localSite[0].tpsitename; - vpn.othertpname = tpnames.find((name) => { - return name != vpn.sitetpname - }); - } - - this.vpns = this.detailParams.vpns; - console.log(this.vpns) - res(this.detailParams.vpns) - }) - console.log(this.detailParams.vpns) - }) - }) - }) - }) - } - - - drawImages() { - - this.getSiteAResource().then((data) => { - return this.getSotnAresource() - }).then((data) => { - this.detailSites = this.detailParams.serviceDomain == "CCVPN" ? false : true; - // When there is only one vpn - if (this.detailParams.serviceDomain == "CCVPN" && this.vpns.length == 1) { - this.detailLines.length = this.detailLines.length - 3; - // this.detailLines.push(line); - // when local site have 2 - if (this.localSite.length == 2) { - let line = { - "x1": "30%", "y1": "55%", "x2": "42%", "y2": "55%"//tp2--tp3 - } - this.detailLines.push(line); - } - // when cloud site have 2 - if (this.outerSite.length == 2) { - let line = { - "x1": "81%", "y1": "21%", "x2": "90%", "y2": "21%"//out-domain--site3 - }; - this.detailLines.push(line); - } - } - }) - let allnodes = [this.getSiteAResource(), this.getSotnAresource()]; - Promise.all(allnodes).then((data) => { - console.log(data); - console.log(this.localSite); - - - }) - } - - detailSites = false; - detailLines = []; - detailLiness = [ //Details of the topology map connection coordinates - { - "x1": "9%", "y1": "40%", "x2": "21%", "y2": "40%"//site1--tp1 - }, - - { - "x1": "83%", "y1": "51%", "x2": "91%", "y2": "51%"//out-domain--site4 - }, - - { - "x1": "52%", "y1": "81%", "x2": "63%", "y2": "81%"//site2--tp4 - }, - { - "x1": "81%", "y1": "21%", "x2": "90%", "y2": "21%"//out-domain--site3 - }, - { - "x1": "30%", "y1": "55%", "x2": "44%", "y2": "55%"//tp2--tp3 - } - ]; - - modifyJosnKey(json, oddkey, newkey) { - - let val = json[oddkey]; - delete json[oddkey]; - json[newkey] = val; - } - - // ccvpn update - submitUpdate() { - let globalCustomerId = this.detailParams.customer.id; - let globalServiceType = this.detailParams.serviceType.name; - let servicebody = { - service: { - name: this.templateParameters.service["name"], - description: this.templateParameters.service["description"], - serviceInvariantUuid: this.templateParameters.service["serviceInvariantUuid"], - serviceUuid: this.templateParameters.service["serviceUuid"], - globalSubscriberId: globalCustomerId, //customer.id - serviceType: globalServiceType, //serviceType.value - parameters: { - locationConstraints: [], - resources: [], - requestInputs: { - sdwanvpnresource_list: [], - sdwansiteresource_list: [] - } - } - } - }; - let siteresource = null, sitewan = null, device = null, vpnresource = null, sitelan = null; - Object.keys(this.bodyTemplateParameter).map((item, index) => { - if (item.search("site") != -1) { - siteresource = item; - this.bodyTemplateParameter[item].map((items, index) => { - if (Object.keys(items)[0].search("site") != -1 && Object.keys(items)[0].search("device") == -1) { - sitewan = Object.keys(items)[0] - } - if (Object.keys(items)[0].search("device") != -1) { - device = Object.keys(items)[0] - } - }); - } - if (item.search("vpn") != -1) { - vpnresource = item; - this.bodyTemplateParameter[item].map((items, index) => { - if (Object.keys(items)[0].search("site") != -1) { - sitelan = Object.keys(items)[0] - } - }); - } - }); - this.sotnVpnTableData.forEach((item, index) => { - Object.keys(item).map((items, index) => { - if (items.search("site") != -1 && item[items] instanceof Array === true) { - this.modifyJosnKey(item, items, sitelan) - } - }); - }); - this.siteTableData.forEach((item, index) => { - Object.keys(item).map((items, index) => { - if (items.search("site") != -1 && items.search("device") == -1 && item[items] instanceof Array === true) { - this.modifyJosnKey(item, items, sitewan) - } - if (items.search("device") != -1) { - this.modifyJosnKey(item, items, device) - } - }); - }); - Object.keys(this.bodyTemplateParameter).map((item, index) => { - if (item.search("site") != -1) { - servicebody.service.parameters.requestInputs[item] = [].concat(this.siteTableData); - } - if (item.search("vpn") != -1) { - servicebody.service.parameters.requestInputs[item] = [].concat(this.sotnVpnTableData); - } - }); - console.log(servicebody); - this.closeUpdate.emit(servicebody); - } - - goback() { - this.closeDetail.emit(); - } - - hiddenModel() { - this.sotnVpnDetailShow = false; - this.siteDetail = false; - } - -} diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.css b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.css deleted file mode 100644 index 5055205d..00000000 --- a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.css +++ /dev/null @@ -1,119 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -.outer{ - width: 20%; - float: left; -} -.content{ - width: 100px; - margin: 30px 0; -} - -.submit,.delete,.add{ - padding:10px 20px; - width: 100px; - margin: 0 auto; - background: dodgerblue; - border: none; - border-radius: 10px; - color: #fff; - cursor: pointer; -} - -#tpContainer{ - position: relative; - width:100%; - height: 95%; - margin-top: 15px; - float: left; - background: #EEF9FF; -} -#tpContainer .no-network{ - width: 300px; - margin: 0 auto; - height: 280px; - position: absolute; - top: 50%; - left: 50%; - margin-top: -140px; - margin-left: -150px; -} -.no-network img{ - width: 100%; -} -.no-network p{ - text-align: center; - color: #A0AACD; - font-size: 18px; - margin-top: 20px; -} -.model { - position: relative; - padding: 15px; - height: 100vh; - width: 100%; -} -.model h2{ - display: inline-block; - margin: 0; - color: #3C4F8C; - margin-left: 10px; - display: inline-block; -} -.model .title-modelshow{ - color: #A0AACD; -} -.model .creation { - /*margin-top:-4%;*/ - background-color: #fff; - /*float: left;*/ - width: 20%; - position: absolute; - left: 0; - margin-top: 30px; - margin-left: 30px; - border-radius: 5px; - box-shadow: 0 0 10px #9e9e9e; - padding: 10px; - height: 80vh; - overflow: auto; -} -.model .creation .v_color{ - height: 17px; - float: left; - margin-left: -11px; - margin-top: 5px; - border-left: 4px #3fa8eb solid; -} -.w_font4{ - font-weight: 400; -} -.title-span{ - margin-left: 10%; - font-size: 12px; -} -.red-span{ - color: red; - margin-right: 3px; -} -.choose li nz-select,.choose li input{ - display: block !important; - margin: 5px 10% 15px; - width: 80%; -} - - - diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.html b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.html deleted file mode 100644 index 25687f67..00000000 --- a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.html +++ /dev/null @@ -1,152 +0,0 @@ - - -
    - - -

    - Please configure network links for registered devices and partner system. -

    -
    -
    -

    - There is not any terminal device can be used for configuration -

    -
    -

    - please register external network into ONAP. -

    -
    -
    - No network available -

    No network available

    -
    -
    - -
    - -

    {{"i18nTextDefine_SetAttribtes" | translate}}

    -
      -
    • - * {{"i18nTextDefine_LinkName" | translate}} - -
      • -
    -

    {{"i18nTextDefine_LeftPort" | translate}}

    -
      -
    • - * {{"i18nTextDefine_Network" | translate}} - - - -
      • -
    • - * {{"i18nTextDefine_Node" | translate}} - - - -
      • -
    • - * {{"i18nTextDefine_TerminalPoint" | translate}} - - - - -
      • -
    -

    {{"i18nTextDefine_RightPort" | translate}}

    - -
      -
    • - * {{"i18nTextDefine_HostUrl" | translate}} - -
      • -
    • - * {{"i18nTextDefine_Network" | translate}} - - - - -
      • -
    • - * {{"i18nTextDefine_Node" | translate}} - - - - -
      • -
    • - * {{"i18nTextDefine_TerminalPoint" | translate}} - - - - -
      • -
    - - -
    -
    - -
      -
    • - {{"i18nTextDefine_LinkName" | translate}} - -
      • -
    -

    {{"i18nTextDefine_LeftPort" | translate}}

    -
      -
    • - {{"i18nTextDefine_Network" | translate}} - -
      • -
    • - {{"i18nTextDefine_Node" | translate}} - -
      • -
    • - {{"i18nTextDefine_TerminalPoint" | translate}} - -
      • -
    -

    {{"i18nTextDefine_RightPort" | translate}}

    -
      -
    • - {{"i18nTextDefine_HostUrl" | translate}} - -
      • -
    • - {{"i18nTextDefine_Network" | translate}} - -
      • -
    • - {{"i18nTextDefine_Node" | translate}} - -
      • -
    • - {{"i18nTextDefine_TerminalPoint" | translate}} - -
      • -
    - - - -
    -
    -     diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.spec.ts b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.spec.ts deleted file mode 100644 index 9ec321c5..00000000 --- a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.spec.ts +++ /dev/null @@ -1,40 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { CcvpnNetworkComponent } from './ccvpn-network.component'; - -describe('CcvpnNetworkComponent', () => { - let component: CcvpnNetworkComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ CcvpnNetworkComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(CcvpnNetworkComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts deleted file mode 100644 index 3de992fd..00000000 --- a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts +++ /dev/null @@ -1,1270 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -import { Component, EventEmitter, OnInit, Output } from '@angular/core'; -import * as d3 from 'd3'; -import * as $ from 'jquery'; -import { networkHttpservice } from '../networkHttpservice.service'; - -@Component({ - selector: 'app-ccvpn-network', - templateUrl: './ccvpn-network.component.html', - styleUrls: ['./ccvpn-network.component.css'] -}) -export class CcvpnNetworkComponent implements OnInit { - - constructor(private myhttp: networkHttpservice) { - } - - ngOnInit() { - let thisNg = this; - thisNg.getD3Data(); - - - //Local cloud TP port connection, click on the right to expand the details - $('#tpContainer').on('click', '.line-port', function () { - thisNg.isVisible = false; - thisNg.delBoxisVisible = true; - thisNg.delcloud = false; - - thisNg.delTp1 = $(this).attr('data-tp1'); - thisNg.delTp2 = $(this).attr('data-tp2'); - thisNg.delNode1 = $(this).attr('data-node1'); - thisNg.delNode2 = $(this).attr('data-node2'); - thisNg.delVersion = $(this).attr('data-version'); - thisNg.delLinkname = $(this).attr('data-link'); - thisNg.delcloudUrl = null; - thisNg.delLinkIndex = $(this); - - let dataD3 = thisNg.d3Data; - for (let p = 0; p < dataD3.length; p++) {//Determine which Domain network the two tp ports belong to - if (dataD3[p]['name'] == thisNg.delTp1) { - thisNg.network.push(dataD3[p]['source']['name']); - } - if (dataD3[p]['name'] == thisNg.delTp2) { - thisNg.network.push(dataD3[p]['source']['name']); - } - } - thisNg.delNetwork1 = thisNg.network[0]; - thisNg.delNetwork2 = thisNg.network[1]; - }); - - //External cloud connection, click on the right to expand the details - $('#tpContainer').on('click', '.cloudline', function () { - thisNg.isVisible = false; - thisNg.delBoxisVisible = true; - thisNg.delcloud = true; - - thisNg.delTp1 = $(this).attr('data-tp1'); - thisNg.delTp2 = $(this).attr('data-tp2'); - thisNg.delNode1 = $(this).attr('data-node1'); - thisNg.delNode2 = $(this).attr('data-node2'); - thisNg.delVersion = $(this).attr('data-version'); - thisNg.delNetwork1 = $(this).attr('data-network'); - thisNg.delNetwork2 = $(this).attr('data-cloudnetwork'); - thisNg.delcloudUrl = $(this).attr('data-url'); - thisNg.delLinkname = $(this).attr('data-link'); - thisNg.aaiId = $(this).attr('data-aaiid'); - thisNg.getCloudUrl(thisNg.aaiId); - }); - } - - addLinkDisabled = true; - nonetwork = false; - isVisible = false; - outCloudShow = false; - inputshow = false; - delBoxisVisible = false; - isSpinning = true; - - d3Data = [];//D3Render the required data - logicalLinks = [];//logicalLinks Existing connection data returned by the interface - linkName = null;//Linked name link-name - networkOption = [];//Form network drop-down box filled data - nodeOption1 = {};//Node drop-down box filled data - tpOption1 = [];//Node drop-down box filled data - tpOption2 = [];//Node drop-down box filled data - networkVal1 = null;//network1 Drop-down box default data - networkVal2 = null;//network2 Drop-down box default data - selectedNode1 = null;//node1 Drop-down box default data - selectedNode2 = null;//node2 Drop-down box default data - selecteTpName1 = null;//TP1 Drop-down box default data - selecteTpName2 = null;//TP2 Drop-down box default data - cloudUrl = null;//External cloud URL address - cloudNetwork = null;//External cloud network name - cloudNode = null;//External cloud Node name - cloudTp = null;//External cloud Tp name - - dataCloud = [];//External cloud information - dataCloudLink = []; - aaiId = ''; - - - //When the connection is deleted, the data displayed in the right frame - delLinkname = null; - delNetwork1 = null; - delNode1 = null; - delTp1 = null; - delcloudUrl = null; - delNetwork2 = null; - delNode2 = null; - delTp2 = null; - delVersion = null; - delLinkIndex = null; - network = []; - delcloud = false; - - winWidth = $('#tpContainer').width(); - winHeight = $('#tpContainer').height(); - charge = -300; - - imgmap = { - '1': './assets/images/cloud-county1.png', - '2': './assets/images/tp.png', - '3': './assets/images/cloud-out.png', - }; - tpoption = { - container: '#tpContainer', - data: '', - width: 1000, - height: this.winHeight - }; - - showForm(): void { - if (this.addLinkDisabled == false) { - this.isVisible = true; - this.delBoxisVisible = false; - } - } - - hideForm(): void { - this.isVisible = false; - this.delBoxisVisible = false; - this.linkName = null; - this.networkVal1 = null;//Initialize the default data of the network1 drop-down box - this.networkVal2 = null;//Initialize the network2 drop-down box default data - this.selectedNode1 = null;//Initialize the default data of the node1 drop-down box - this.selectedNode2 = null;//Initialize the default data of the node2 drop-down box - this.selecteTpName1 = null;//Initialize the default data of the TP1 drop-down box - this.selecteTpName2 = null;//Initialize the default data of the TP2 drop-down box - this.cloudUrl = null;//External cloud URL address - this.cloudNetwork = null;//External cloud network name - this.cloudNode = null;//External cloud Node name - this.cloudTp = null;//External cloud Tp name - } - - //Get cloud image data - getD3Data() { - this.isSpinning = true; - this.myhttp.getNetworkD3Data() - .subscribe((data) => { - this.isSpinning = false; - if (data.length == 0) { - this.addLinkDisabled = false; - this.nonetwork = true; - return; - } - this.nonetwork = false; - for (let ii = 0; ii < data.length; ii++) {//Determine if there is external cloud information in the data, and kick it out. - if (data[ii]['aaiId'] != null) { - this.dataCloud = data.splice(ii, 1); - } - } - - for (let i = 0; i < data.length; i++) { - let name1 = {}, name2 = {}; - let nodess = []; - name1['name'] = name2['network'] = data[i]['networkId']; - name1['type'] = '1'; - name1['source'] = i; - this.d3Data.push(name1); - for (let c = 0; c < data[i]["pnfs"].length; c++) { - nodess.push(data[i]['pnfs'][c]['pnfName']); - this.nodeOption1[name2['network']] = nodess; - } - this.networkOption.push(name2); - } - console.log(this.networkOption); - for (let i = 0; i < data.length; i++) { - let tp_length = data[i]['tps'].length; - for (let h = 0; h < tp_length; h++) { - let name2 = {}; - let interface_name = data[i]['tps'][h]['interface-name']; - name2['name'] = interface_name; - name2['type'] = '2'; - name2['source'] = i; - this.d3Data.push(name2); - } - } - for (let b = 0; b < this.d3Data.length; b++) { - this.d3Data[b]['target'] = b; - } - this.initPosition(this.d3Data); - setTimeout(this.render(this.d3Data, this.imgmap, this.dataCloud, this.charge, data), 0); - }, (err) => { - console.log(err); - }); - - } - - //Get the initial connection status of the cloud image getlogicalLinksData - getLinksData() { - this.myhttp.getLogicalLinksData() - .subscribe((data) => { - if (data["status"] == "FAILED") { - return; - } - for (let i = 0; i < data["logical-link"].length; i++) {//Determine whether there is an external cloud connection in the obtained connection, and kick it out. - if (data['logical-link'][i]['relationship-list']['relationship'].length > 2) { - this.dataCloudLink = data['logical-link'].splice(i, 1); - } - } - - for (let i = 0; i < data["logical-link"].length; i++) { - let textval = []; - textval[0] = data['logical-link'][i]['relationship-list']['relationship'][0]['relationship-data'][1]['relationship-value'];//tp1 - textval[1] = data['logical-link'][i]['relationship-list']['relationship'][1]['relationship-data'][1]['relationship-value'];//tp2 - textval[2] = data['logical-link'][i]['resource-version'];//version - textval[3] = data['logical-link'][i]['relationship-list']['relationship'][0]['relationship-data'][0]['relationship-value'];//node1 - textval[4] = data['logical-link'][i]['relationship-list']['relationship'][1]['relationship-data'][0]['relationship-value'];//node2 - textval[5] = data['logical-link'][i]['operational-status']; - textval[6] = data['logical-link'][i]['link-name']; - this.logicalLinks.push(textval); - this.chose(textval); - } - console.log(this.logicalLinks); - if (this.dataCloudLink.length > 0) { - this.getcloudLine(this.dataCloudLink); - } - }, (err) => { - console.log(err); - }); - } - - //D3Cloud rendering - render(nodes, imgmap, dataCloud, charge, dataD3) { - let thiss = this; - let _this = this.tpoption, - width = null, - height = _this.height; - if (_this.width > 800) { - width = _this.width; - } else { - width = 800; - } - if (dataD3.length <= 4) { - charge = -300; - } else if (dataD3.length > 4 && dataD3.length <= 6) { - charge = -160; - } else if (dataD3.length > 6 && dataD3.length <= 10) { - charge = -110; - } else { - charge = -100; - } - let svg = d3.select(_this.container).append('svg') - .attr('width', width) - .attr('height', height) - .attr('id', 'content-svg') - .style('pointer-events', 'all') - .style('position', 'absolute') - .style('top', '1%') - .style('right', '2%'), - graph = svg.append('g').attr('class', 'graph').attr('id', 'graph'), - - _g_nodes = graph.selectAll('g.node') - .data(nodes) - .enter() - .append('g') - .style('display', function (d) { - let display = 'block'; - switch (d.type) { - case '1': - display = 'none'; - break; - case '2': - display = 'none'; - break; - default: - break; - } - return display; - }) - .style('cursor', 'pointer') - .attr('class', 'node'), - - _g_lines = graph.selectAll('line.line') - .data(nodes) - .enter() - .append('g') - .style('display', 'none') - .attr('class', 'line'); - - - _g_lines.append('line') - .style('stroke', '#93c62d' - ) - .style('stroke-width', 2); - - _g_nodes.append('image') - .attr('width', function (d) { - let width = 40; - switch (d.type) { - case '1': - width = 4.4 * width; - break; - case '2': - width = 0.12 * width; - break; - default: - break; - } - return width; - }) - .attr('height', function (d) { - let height = 20; - switch (d.type) { - case '1': - height = 3.5 * height; - break; - case '2': - height = 0.2 * height; - break; - default: - break; - } - return height; - }) - .attr('xlink:href', function (d) { - return imgmap[d.type]; - }); - - _g_nodes.append('text') - .text(function (d) { - return d.name; - }) - .style('transform', function (d) { - let x = null; - let y = null; - switch (d.type) { - case '1': - x = 7; - y = -7; - break; - case '2': - x = 1; - y = -2; - break; - default: - break; - } - return 'translate(' + x + '%,' + y + '%)'; - }) - .style('font-size', function (d) { - let size = 14; - switch (d.type) { - case '1': - size = 14; - break; - case '2': - size = 12; - break; - default: - break; - } - return size; - }) - .style('fill', function (d) { - let color = '#666'; - switch (d.type) { - case '1': - color = '#666'; - break; - case '2': - color = '#666'; - break; - default: - break; - } - return color; - }) - .style('font-weight', '500'); - - - //Add custom attributes online - _g_lines.each(function (d, i) { - let _this = d3.select(this); - if (d.name) { - _this.attr('data-text', d.name); - } - }); - - let force = d3.layout.force() - .size([1000, this.winHeight]) - .linkDistance(5) - // .theta(0.6) - .charge(charge) - .nodes(nodes) - .links(nodes) - .start(); - - force.on('tick', function () { - if (force.alpha() <= 0.04) { - - _g_nodes.style('display', function (d) { - let display = 'block'; - switch (d.type) { - case '1': - display = 'block'; - break; - case '2': - display = 'none'; - break; - default: - break; - } - return display; - }); - - nodes.forEach(function (d, i) { - d.x = d.x - 25 < 0 ? 25 : d.x; - d.x = d.x + 25 > width ? width - 25 : d.x; - d.y = d.y - 15 < 0 ? 15 : d.y; - d.y = d.y + 15 > height ? height - 15 : d.y; - }); - - _g_nodes.attr('transform', function (d) { - - let image = d3.select(this).select('image')[0][0], - halfWidth = parseFloat(image.attributes[0]['value']) / 2, - halfHeight = parseFloat(image.attributes[1]['value']) / 2; - let xx = d.x - halfWidth, - yy = d.y - halfHeight; - return 'translate(' + xx + ',' + yy + ')'; - }); - - _g_lines.select('line') - .attr('x1', function (d) { - return d.source.x; - }) - .attr('y1', function (d) { - return d.source.y; - }) - .attr('x2', function (d) { - return d.target.x; - }) - .attr('y2', function (d) { - return d.target.y; - }); - - _g_nodes.select('text').attr('dy', function (d) { - let image = this.previousSibling, - height = parseFloat(image.attributes[1]['value']), - fontSize = 12; - return height + 1.5 * fontSize; - }); - } - }); - - force.on('end', function () { - force.stop(); - if (dataCloud.length > 0) { - thiss.getoutCloud(dataCloud, imgmap); - } - thiss.getLinksData(); - thiss.addLinkDisabled = false; - }); - - }; - - //Topology drag and drop effect - getDragBehavior(force) { - - return d3.behavior.drag() - .origin(function (d) { - return d; - }) - .on('dragstart', dragstart) - .on('drag', dragging) - .on('dragend', dragend); - - function dragstart(d) { - d3.event.sourceEvent.stopPropagation(); - d3.select(this).classed('dragging', true); - force.start(); - } - - function dragging(d) { - d.x = d3.event.x; - d.y = d3.event.y; - } - - function dragend(d) { - d3.select(this).classed('dragging', false); - } - - } - - //Initialize node location - initPosition(datas) { - let origin = [this.tpoption.width / 2, this.tpoption.height / 2]; - let points = this.getVertices(origin, Math.min(this.tpoption.width / 2, this.tpoption.height / 2), datas.length); - datas.forEach((item, i) => { - item.x = points[i].x; - item.y = points[i].y; - }); - } - - //Get anchor points based on polygons - getVertices(origin, r, n) { - if (typeof n !== 'number') return; - let ox = origin[0]; - let oy = origin[1]; - let angle = 30 * n / n; - let i = 0; - let points = []; - let tempAngle = 0; - while (i < n) { - tempAngle = (i * angle * Math.PI) / 180; - points.push({ - x: ox - r * Math.sin(tempAngle), - y: oy - r * Math.cos(tempAngle), - }); - i++; - } - return points; - } - - //Rendering an external cloud - getoutCloud(dataCloud, imgmap) { - let _this = this, - width; - let networkId = dataCloud[0]['networkId']; - if (_this.tpoption.width > 800) { - width = _this.tpoption.width; - } else { - width = 800; - } - let svg = d3.select('#content-svg'); - svg.append('g').attr('class', 'out').attr('id', 'out').style({ 'display': 'block' }).attr('transform', 'translate(' + (width - 200) + ',0)'); - let out = d3.select('#out'); - out.append('image').style('width', '200').style('height', '118').attr('xlink:href', imgmap['3']); - out.append('text').text(networkId) - .style('transform', 'translate(0，0)') - .style('font-size', '16') - .style('font-weight', '400') - .attr('dx', '40') - .attr('dy', '70') - .style('fill', '#666'); - } - - //External cloud connection - getcloudLine(dataCloudLink) { - let textval = []; - textval[0] = dataCloudLink[0]['relationship-list']['relationship'][0]['relationship-data'][1]['relationship-value'];//tp1 - textval[1] = dataCloudLink[0]['relationship-list']['relationship'][1]['relationship-data'][1]['relationship-value'];//tp2 - textval[2] = dataCloudLink[0]['resource-version'];//version - textval[3] = dataCloudLink[0]['relationship-list']['relationship'][0]['relationship-data'][0]['relationship-value'];//node1 - textval[4] = dataCloudLink[0]['relationship-list']['relationship'][1]['relationship-data'][0]['relationship-value'];//node2 - textval[5] = dataCloudLink[0]['operational-status'];//status - textval[6] = dataCloudLink[0]['relationship-list']['relationship'][2]['relationship-data'][0]['relationship-value'];//aaiId - textval[7] = this.dataCloud[0]['networkId']; - let dataD3 = this.d3Data; - let arr = [ - textval[0], - textval[1] - ]; - for (let p = 0; p < dataD3.length; p++) {//Determine which Domain network the two tp ports belong to - for (let pp = 0; pp < arr.length; pp++) {//Determine which Domain network the two tp ports belong to - if (dataD3[p]['name'] == arr[pp]) { - textval[8] = dataD3[p]['source']['name'];//network1 - } - } - } - textval[9] = dataCloudLink[0]['link-name']; - let lines_json = {}; - let _this = this, - width; - if (_this.tpoption.width > 800) { - width = _this.tpoption.width; - } else { - width = 800; - } - for (let i = 0; i < $(".node").length; i++) { - if ($('.node').eq(i).find('text').html() == textval[8]) { - //Get the x, y coordinates of the second level - let translates = $('.node').eq(i).css('transform'); - lines_json['x1'] = parseFloat(translates.substring(7).split(',')[4]); - lines_json['y1'] = parseFloat(translates.substring(7).split(',')[5]); - lines_json['x2'] = width - 100; - lines_json['y2'] = 100; - } - } - let x1 = lines_json['x1']; - let y1 = lines_json['y1']; - let x2 = lines_json['x2']; - let y2 = lines_json['y2']; - let color = '#14bb58'; - if (textval[5] == 'up') { - color = '#14bb58'; - } else { - color = 'red'; - } - let line = ''; - let svg = d3.select('#graph'); - $('.cloudline').remove(); - $('#graph').prepend(line); - $('.cloudline').attr({ - x1: x1 + 100, - y1: y1 + 10, - x2: x2, - y2: y2, - 'data-tp1': textval[0], - 'data-tp2': textval[1], - 'data-version': textval[2], - 'data-node1': textval[3], - 'data-node2': textval[4], - 'data-network': textval[8], - 'data-cloudnetwork': textval[7], - 'data-url': '', - 'data-aaiid': textval[6], - 'data-link': textval[9], - }); - svg.html(svg.html()); - this.getCloudUrl(textval[6]); - this.getExtAAIIdVersion(textval[6]); - } - - - //Query external cloud host url address - getCloudUrl(aaiId) { - this.myhttp.queryCloudUrl(aaiId) - .subscribe((data) => { - this.delcloudUrl = data['service-url']; - $('.cloudline').attr({ - 'data-url': data['service-url'] - }); - }, (err) => { - console.log(err); - }); - } - - //Query external cloud ext-aai-id resource-version - getExtAAIIdVersion(aaiId) { - this.myhttp.queryExtAAIIdVersion(aaiId) - .subscribe((data) => { - this.delVersion = data["resource-version"]; - $('.cloudline').attr({ - 'data-version': data["resource-version"], - }); - }, (err) => { - console.log(err); - }); - } - - - //The right form drop-down box data is filled with three levels of linkage - //Left Port - network1Change(value: string): void { - this.selectedNode1 = this.nodeOption1[value][0]; - this.getPInterfaces1(); - } - - node1Change(): void { - this.getPInterfaces1(); - } - - //Get the TP data under the specified node - getPInterfaces1() { - let params = { - pnfName: this.selectedNode1, - }; - this.myhttp.getPInterfacesData1(params) - .subscribe((data) => { - this.tpOption1 = []; - for (let i = 0; i < data.length; i++) { - let tpName = data[i]['interface-name']; - this.tpOption1.push(tpName); - } - this.selecteTpName1 = this.tpOption1[0]; - }, (err) => { - console.log(err); - }); - } - - //Right Port - network2Change(value: string): void { - this.selectedNode2 = this.nodeOption1[value][0]; - this.getPInterfaces2(); - } - - node2Change(): void { - this.getPInterfaces2(); - } - - //Get the TP data under the specified node - getPInterfaces2() { - let params = { - pnfName: this.selectedNode2, - }; - this.myhttp.getPInterfacesData2(params) - .subscribe((data) => { - this.tpOption2 = []; - for (let i = 0; i < data.length; i++) { - let tpName = data[i]['interface-name']; - this.tpOption2.push(tpName); - } - this.selecteTpName2 = this.tpOption2[0]; - }, (err) => { - console.log(err); - }); - } - - //Submit form, connect - submitForm(): void { - //When the page ONAP is not selected, the local cloud TP connection - let _thiss = this; - if (this.inputshow == false) { - if (this.linkName == null || this.networkVal1 == null || this.selectedNode1 == null || this.selecteTpName1 == null || this.networkVal2 == null || this.selectedNode2 == null || this.selecteTpName2 == null) { - alert('The service port cannot be empty. Please select the port information.'); - return; - } else if (this.networkVal1 == this.networkVal2) { - alert('The TP port under the same cloud service cannot be connected!'); - return; - } - let tp_links = [], - tp1 = this.selecteTpName1, - tp2 = this.selecteTpName2; - for (let i = 0; i < $(".line-port").length; i++) { - let data_text1 = $('.line-port').eq(i).attr('data-tp1'); - let data_text2 = $('.line-port').eq(i).attr('data-tp2'); - tp_links.push(data_text1); - tp_links.push(data_text2); - } - if (tp_links.indexOf(tp1) != -1 || tp_links.indexOf(tp2) != -1) { - alert('This port number connection already exists!'); - return; - } - this.createTpLinks(); - - } else { - //When the page ONAP is selected, the external cloud is created, and the connection is made. - if (this.linkName == null || this.networkVal1 == null || this.selectedNode1 == null || this.selecteTpName1 == null || this.cloudUrl == null || this.cloudNetwork == null || this.cloudNode == null || this.cloudTp == null) { - alert('The service port cannot be empty. Please fill in the complete port information.'); - return; - } - let tp_links = [], - tp1 = this.selecteTpName1; - for (let i = 0; i < $(".line-port").length; i++) { - let data_text1 = $('.line-port').eq(i).attr('data-tp1'); - tp_links.push(data_text1); - } - if (tp_links.indexOf(tp1) != -1) { - alert('This port number connection already exists!'); - return; - } - - let time = this.cloudNetwork + new Date().getTime();//Create aaiid for the external cloud, this identifier is unique and cannot be repeated - this.createCloudUrls(time) - } - } - - //Create tp connection call interface createLink - createTpLinks() { - let params = { - 'link-name': this.linkName, - 'link-type': 'cross-link', - 'operational-status': 'up', - 'relationship-list': { - 'relationship': [ - { - 'related-to': 'p-interface', - 'related-link': '/aai/v14/network/pnfs/pnf/' + this.selectedNode1 + '/p-interfaces/p-interface/' + this.selecteTpName1, - 'relationship-data': [ - { - 'relationship-key': 'pnf.pnf-id', - 'relationship-value': this.selectedNode1 - }, - { - 'relationship-key': 'p-interface.p-interface-id', - 'relationship-value': this.selecteTpName1, - } - ] - }, - { - 'related-to': 'p-interface', - 'related-link': '/aai/v14/network/pnfs/pnf/' + this.selectedNode2 + '/p-interfaces/p-interface/' + this.selecteTpName2, - 'relationship-data': [ - { - 'relationship-key': 'pnf.pnf-id', - 'relationship-value': this.selectedNode2 - }, - { - 'relationship-key': 'p-interface.p-interface-id', - 'relationship-value': this.selecteTpName2 - } - ] - } - ] - } - }; - this.myhttp.createLink(params) - .subscribe((data) => { - if (data['status'] == 'SUCCESS') { - this.queryAddLink(); - } - }, (err) => { - console.log(err); - console.log('Create connection interface call failed'); - }); - } - - //Query the newly added connection immediately after creating the tp cable - queryAddLink() { - let linkName = this.linkName, - selecteTpName1 = this.selecteTpName1, - selecteTpName2 = this.selecteTpName2, - selectedNode1 = this.selectedNode1, - selectedNode2 = this.selectedNode2; - let params = { - 'link-name': linkName, - }; - this.myhttp.querySpecificLinkInfo(params) - .subscribe((data) => { - let version = data['resource-version'], - operational_status = data['operational-status'], - linkname = data['link-name']; - let textval = [selecteTpName1, selecteTpName2, version, selectedNode1, selectedNode2, operational_status, linkname]; - this.hideForm(); - this.chose(textval); - }, (err) => { - console.log(err); - }); - } - - //Connection between two TP coordinates - chose(textval) { - let lines_json = {}; - lines_json['tp1'] = textval[0]; - lines_json['tp2'] = textval[1]; - lines_json['version'] = textval[2]; - lines_json['node1'] = textval[3]; - lines_json['node2'] = textval[4]; - lines_json['status'] = textval[5]; - lines_json['linkname'] = textval[6]; - for (let i = 0; i < $(".node").length; i++) { - if ($('.node').eq(i).find('text').html() == textval[0]) { - $('.node').eq(i).show(); - //Get the x, y coordinates of the second level - let translates = $('.node').eq(i).css('transform'); - lines_json['x1'] = parseFloat(translates.substring(7).split(',')[4]); - lines_json['y1'] = parseFloat(translates.substring(7).split(',')[5]); - } - if ($('.node').eq(i).find('text').html() == textval[1]) { - $('.node').eq(i).show(); - let translates = $('.node').eq(i).css('transform'); - lines_json['x2'] = parseFloat(translates.substring(7).split(',')[4]); - lines_json['y2'] = parseFloat(translates.substring(7).split(',')[5]); - } - } - this.addLine(lines_json); - } - - //Connection between two TPs - addLine(lines) { - let tp1 = lines.tp1; - let tp2 = lines.tp2; - let version = lines.version; - let node1 = lines.node1; - let node2 = lines.node2; - let status = lines.status; - let linkname = lines.linkname; - let x1 = lines.x1; - let y1 = lines.y1; - let x2 = lines.x2; - let y2 = lines.y2; - let color = '#14bb58'; - if (status == 'up') { - color = '#14bb58'; - } else { - color = 'red'; - } - let line = ''; - let svg = d3.select('#graph'); - $('#graph').prepend(line); - $('.line').first().attr({ - x1: x1, - y1: y1, - x2: x2, - y2: y2, - 'data-tp1': tp1, - 'data-tp2': tp2, - 'data-version': version, - 'data-node1': node1, - 'data-node2': node2, - 'data-link': linkname - }); - svg.html(svg.html()); - } - - //After creating an external cloud connection, query the connection immediately - queryOutCloudLink(time) { - let networkVal1 = this.networkVal1, - selectedNode1 = this.selectedNode1, - selecteTpName1 = this.selecteTpName1, - cloudUrl = this.cloudUrl, - cloudNetWork = this.cloudNetwork, - cloudNode = this.cloudNode, - cloudTp = this.cloudTp, - linkname = this.linkName; - let params = { - 'link-name': linkname, - }; - this.myhttp.querySpecificLinkInfo(params) - .subscribe((data) => { - let status = data['operational-status']; - let link_name = data['link-name']; - this.outCloudShow = true; - this.hideForm(); - this.outCloud(this.imgmap); - setTimeout(this.cloudLine(networkVal1, selectedNode1, selecteTpName1, cloudUrl, cloudNetWork, cloudNode, cloudTp, status, link_name, time), 0); - }, (err) => { - console.log(err); - }); - } - - //Add external cloud - outCloud(imgmap) { - let _this = this, - width; - if (_this.tpoption.width > 800) { - width = _this.tpoption.width; - } else { - width = 800; - } - let svg = d3.select('#content-svg'); - svg.append('g').attr('class', 'out').attr('id', 'out').style({ 'display': 'block' }).attr('transform', 'translate(' + (width - 200) + ',0)'); - let out = d3.select('#out'); - out.append('image').style('width', '200').style('height', '118').attr('xlink:href', imgmap['3']); - out.append('text').text('Partner Network') - .style('transform', 'translate(0，0)') - .style('font-size', '16') - .style('font-weight', 'bold') - .attr('dx', '40') - .attr('dy', '70') - .style('fill', '#fff'); - } - - //Add external cloud connection - cloudLine(networkVal1, selectedNode1, selecteTpName1, cloudUrl, cloudNetWork, cloudNode, cloudTp, status, link_name, time) { - let lines_json = {}; - let _this = this, - width; - if (_this.tpoption.width > 800) { - width = _this.tpoption.width; - } else { - width = 800; - } - for (let i = 0; i < $(".node").length; i++) { - if ($('.node').eq(i).find('text').html() == networkVal1) { - //Get the x, y coordinates of the second level - let translates = $('.node').eq(i).css('transform'); - lines_json['x1'] = parseFloat(translates.substring(7).split(',')[4]); - lines_json['y1'] = parseFloat(translates.substring(7).split(',')[5]); - lines_json['x2'] = width - 100; - lines_json['y2'] = 100; - } - } - let x1 = lines_json['x1']; - let y1 = lines_json['y1']; - let x2 = lines_json['x2']; - let y2 = lines_json['y2']; - let color = '#14bb58'; - if (status == 'up') { - color = '#14bb58'; - } else { - color = 'red'; - } - let line = ''; - let svg = d3.select('#graph'); - $('.cloudline').remove(); - $('#graph').prepend(line); - $('.cloudline').attr({ - x1: x1 + 100, - y1: y1 + 10, - x2: x2, - y2: y2, - 'data-tp1': selecteTpName1, - 'data-tp2': cloudTp, - 'data-node1': selectedNode1, - 'data-node2': cloudNode, - 'data-network': networkVal1, - 'data-cloudnetwork': cloudNetWork, - 'data-url': cloudUrl, - 'data-aaiid': time, - 'data-link': link_name - }); - svg.html(svg.html()); - this.getExtAAIIdVersion(time); - } - - //Create an external cloud, call the following 5 interfaces when connecting:createCloudNetwork,createPnfs,createCloudTp,createCloudLinks,createCloudUrls - createCloudNetwork(time) { - let _thiss = this; - let params = { - '-xmlns': 'http://org.onap.aai.inventory/v14', - 'in-maint': 'false', - "network-id": this.cloudNetwork, - "provider-id": "", - "client-id": "", - "te-topo-id": "", - "relationship-list": { - "relationship": [{ - "related-to": "ext-aai-network", - 'related-link': '/aai/v14/network/ext-aai-networks/ext-aai-network/' + time - }] - } - }; - - //Do some asynchronous operations - _thiss.myhttp.createNetwrok(params) - .subscribe((data) => { - if (data["status"] == "SUCCESS") { - _thiss.createPnfs(time) - } - }, (err) => { - console.log(err); - }); - - } - - createPnfs(time) { - let _thiss = this; - let params = { - "-xmlns": "http://org.onap.aai.inventory/v14", - "pnf-name": this.cloudNode, - "pnf-id": this.cloudNode, - "in-maint": "true", - "relationship-list": { - "relationship": [ - { - "related-to": "ext-aai-network", - "relationship-label": "org.onap.relationships.inventory.BelongsTo", - "related-link": "/aai/v14/network/ext-aai-networks/ext-aai-network/" + time, - "relationship-data": { - "relationship-key": "ext-aai-network.aai-id", - "relationship-value": time - } - }, - { - "related-to": "network-resource", - "relationship-label": "tosca.relationships.network.LinksTo", - "related-link": "/aai/v14/network/network-resources/network-resource/" + this.cloudNetwork - } - ] - } - }; - - //Do some asynchronous operations - _thiss.myhttp.createPnf(params) - .subscribe((data) => { - if (data["status"] == "SUCCESS") { - _thiss.createCloudTp(time) - } - }, (err) => { - console.log(err); - }); - } - - createCloudTp(time) { - let _thiss = this; - let params = { - "-xmlns": "http://org.onap.aai.inventory/v14", - "interface-name": this.cloudTp, - "speed-value": "1000000", - "in-maint": "true", - "network-ref": "", - "transparent": "true", - "operational-status": "up" - }; - - let cloudNodeName = this.cloudNode; - //Do some asynchronous operations - _thiss.myhttp.createTp(params, cloudNodeName) - .subscribe((data) => { - if (data["status"] == "SUCCESS") { - _thiss.createCloudLinks(time) - } - }, (err) => { - console.log(err); - }); - } - - createCloudLinks(time) { - let _thiss = this; - let params = { - "-xmlns": "http://org.onap.aai.inventory/v14", - "link-name": this.linkName, - "in-maint": "false", - "link-type": "cross-link", - "speed-value": "", - "operational-status": "up", - "relationship-list": { - "relationship": [ - { - "related-to": "p-interface", - "relationship-label": "tosca.relationships.network.LinksTo", - "related-link": "/aai/v14/network/pnfs/pnf/" + this.selectedNode1 + "/p-interfaces/p-interface/" + this.selecteTpName1, - "relationship-data": [ - { - "relationship-key": "pnf.pnf-name", - "relationship-value": this.selectedNode1 - }, - { - "relationship-key": "p-interface.interface-name", - "relationship-value": this.selecteTpName1 - } - ], - "related-to-property": [{ - "property-key": "p-interface.prov-status" - }] - }, - { - "related-to": "p-interface", - "relationship-label": "tosca.relationships.network.LinksTo", - "related-link": "/aai/v14/network/pnfs/pnf/" + this.cloudNode + "/p-interfaces/p-interface/" + this.cloudTp, - "relationship-data": [ - { - "relationship-key": "pnf.pnf-name", - "relationship-value": this.cloudNode - }, - { - "relationship-key": "p-interface.interface-name", - "relationship-value": this.cloudTp - } - ], - "related-to-property": [{ - "property-key": "p-interface.prov-status" - }] - }, - { - "related-to": "ext-aai-network", - "relationship-label": "org.onap.relationships.inventory.BelongsTo", - "related-link": "/aai/v14/network/ext-aai-networks/ext-aai-network/" + time, - "relationship-data": [ - { - "relationship-key": "ext-aai-network.aai-id", - "relationship-value": time - } - ] - } - ] - } - }; - - //Do some asynchronous operations - _thiss.myhttp.createCloudLink(params) - .subscribe((data) => { - // resolve(data['status']); - if (data["status"] == "SUCCESS") { - _thiss.queryOutCloudLink(time); - } - }, (err) => { - console.log(err); - }); - } - - createCloudUrls(time) { - let _thiss = this; - let params = { - '-xmlns': 'http://org.onap.aai.inventory/v14', - 'aai-id': time, - 'esr-system-info': { - 'esr-system-info-id': 'example-esr-system-info-id-val-0', - 'service-url': this.cloudUrl, - 'user-name': 'demo', - 'password': 'demo123456!', - 'system-type': 'ONAP' - } - }; - _thiss.myhttp.createCloudUrl(params) - .subscribe((data) => { - if (data['status'] == 'SUCCESS') { - _thiss.createCloudNetwork(time); - } - }, (err) => { - console.log(err); - }); - } - - //Local cloud TP port Delete connection Call interface deleteLink - delLink(): void { - let deltp1 = this.delTp1, - deltp2 = this.delTp2, - version = this.delVersion, - dellinkname = this.delLinkname, - delLinkIndex = this.delLinkIndex; - let params = { - 'logical-link': dellinkname, - 'resource-version': version, - }; - this.myhttp.deleteLink(params) - .subscribe((data) => { - if (data['status'] == 'SUCCESS') { - this.delLine(deltp1, deltp2); - delLinkIndex.remove(); - } - }, (err) => { - console.log(err); - console.log('Deleting a connection interface call failed'); - }); - } - - delLine(val1, val2) { - this.delBoxisVisible = false; - for (let i = 0; i < $(".node").length; i++) { - if ($('.node').eq(i).find('text').html() == val1) { - $('.node').eq(i).hide(); - } - if ($('.node').eq(i).find('text').html() == val2) { - $('.node').eq(i).hide(); - } - } - } - - - //External cloud Delete connection Call interface deleteCloudLink - delCloudLink(): void { - let deltp1 = this.delTp1, - deltp2 = this.delTp2, - version = this.delVersion, - aaiId = this.aaiId; - let params = { - "aaiId": aaiId, - "version": version, - }; - this.myhttp.deleteCloudLink(params) - .subscribe((data) => { - if (data['status'] == 'SUCCESS') { - this.delLine(deltp1, deltp2); - $('.cloudline').remove(); - $('#out').remove(); - } - }, (err) => { - console.log(err); - console.log('Deleting a connection interface call failed'); - }); - } - -} diff --git a/usecaseui-portal/src/app/components/charts/bar/bar.component.html b/usecaseui-portal/src/app/components/charts/bar/bar.component.html deleted file mode 100644 index 7c1eee6b..00000000 --- a/usecaseui-portal/src/app/components/charts/bar/bar.component.html +++ /dev/null @@ -1,22 +0,0 @@ - -
    - Bar Chart -
    diff --git a/usecaseui-portal/src/app/components/charts/bar/bar.component.less b/usecaseui-portal/src/app/components/charts/bar/bar.component.less deleted file mode 100644 index e69de29b..00000000 diff --git a/usecaseui-portal/src/app/components/charts/bar/bar.component.spec.ts b/usecaseui-portal/src/app/components/charts/bar/bar.component.spec.ts deleted file mode 100644 index d979ffb6..00000000 --- a/usecaseui-portal/src/app/components/charts/bar/bar.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { BarComponent } from './bar.component'; - -describe('BarComponent', () => { - let component: BarComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ BarComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(BarComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/usecaseui-portal/src/app/components/charts/bar/bar.component.ts b/usecaseui-portal/src/app/components/charts/bar/bar.component.ts deleted file mode 100644 index 609ce3ee..00000000 --- a/usecaseui-portal/src/app/components/charts/bar/bar.component.ts +++ /dev/null @@ -1,71 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -import { Component, OnInit, Input } from '@angular/core'; -import { SimpleChanges } from '@angular/core/src/metadata/lifecycle_hooks'; - -@Component({ - selector: 'app-bar', - templateUrl: './bar.component.html', - styleUrls: ['./bar.component.less'] -}) -export class BarComponent implements OnInit { - - // chart Data - @Input() chartData; - // init Data - @Input() initData; - - constructor() { } - - ngOnInit() { - this.initOpts = { - renderer: 'canvas', - height: this.initData.height, - width: this.initData.width, - - }; - this.barOption = { - tooltip: this.initData.option.tooltip, - grid: this.initData.option.grid, - xAxis: this.initData.option.xAxis, - yAxis: this.initData.option.yAxis, - series: this.initData.option.series - } - } - - ngOnChanges(changes: SimpleChanges) { - // Execute when there is an instance, which is equivalent to not executing the following method for the first time. - if (this.chartIntance) { - this.chartDataChange() - } - } - // Initialize the height of the graphic - initOpts: any; - // Line chart configuration - barOption: any; - // Instance object - chartIntance: any; - // Data change - updateOption: any; - chartDataChange() { - this.updateOption = this.chartData; - console.log(this.initData.customer) - } - chartInit(chart) { - this.chartIntance = chart; - } - -} diff --git a/usecaseui-portal/src/app/components/charts/line/line.component.html b/usecaseui-portal/src/app/components/charts/line/line.component.html deleted file mode 100644 index e032eb27..00000000 --- a/usecaseui-portal/src/app/components/charts/line/line.component.html +++ /dev/null @@ -1,22 +0,0 @@ - -
    - Line Chart -
    diff --git a/usecaseui-portal/src/app/components/charts/line/line.component.less b/usecaseui-portal/src/app/components/charts/line/line.component.less deleted file mode 100644 index e69de29b..00000000 diff --git a/usecaseui-portal/src/app/components/charts/line/line.component.spec.ts b/usecaseui-portal/src/app/components/charts/line/line.component.spec.ts deleted file mode 100644 index afe70654..00000000 --- a/usecaseui-portal/src/app/components/charts/line/line.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { LineComponent } from './line.component'; - -describe('LineComponent', () => { - let component: LineComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ LineComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(LineComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/usecaseui-portal/src/app/components/charts/line/line.component.ts b/usecaseui-portal/src/app/components/charts/line/line.component.ts deleted file mode 100644 index 25881699..00000000 --- a/usecaseui-portal/src/app/components/charts/line/line.component.ts +++ /dev/null @@ -1,105 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -import { Component, OnInit, Input } from '@angular/core'; -import { SimpleChanges } from '@angular/core/src/metadata/lifecycle_hooks'; - -@Component({ - selector: 'app-line', - templateUrl: './line.component.html', - styleUrls: ['./line.component.less'] -}) -export class LineComponent implements OnInit { - // chart Data - @Input() chartData; - // init Data - @Input() initData; - - constructor() { } - - ngOnInit() { - this.initOpts = { - renderer: 'canvas', - height: this.initData.height, - width: this.initData.width - }; - this.lineOption ={ - tooltip : this.initData.option.tooltip, - icon:'circle', - legend: this.initData.option.legend, - dataZoom: this.initData.option.dataZoom, - grid: { - left: '0%', - right: '3%', - top: '10%', - bottom: '18%', - containLabel: true - }, - xAxis: { - axisTick: { - show: false, - }, - axisLine:{ - show: false - }, - axisLabel:{ - color:"#3C4F8C" - }, - data: this.initData.option.xAxis.data - }, - yAxis: { - axisTick: { - show: false, - }, - axisLine:{ - show: false - }, - axisLabel:{ - color:"#3C4F8C" - }, - splitLine:{ - lineStyle:{ - type:"dashed", - } - } - }, - series : this.initData.option.series - } - } - - ngOnChanges(changes:SimpleChanges){ - // Execute when there is an instance, which is equivalent to not executing the following method for the first time. - if(this.chartIntance){ - this.chartDataChange() - } - } - // Initialize the height of the graphic - initOpts:any; - // Line chart configuration - lineOption:any; - // Instance object - chartIntance:any; - // Data change - updateOption:any; - chartDataChange(){ - this.updateOption = this.chartData; - } - chartInit(chart){ - this.chartIntance = chart; - } - - - -} diff --git a/usecaseui-portal/src/app/components/charts/pie/pie.component.html b/usecaseui-portal/src/app/components/charts/pie/pie.component.html deleted file mode 100644 index d063f22a..00000000 --- a/usecaseui-portal/src/app/components/charts/pie/pie.component.html +++ /dev/null @@ -1,24 +0,0 @@ - -
    - Pie Chart -
    \ No newline at end of file diff --git a/usecaseui-portal/src/app/components/charts/pie/pie.component.less b/usecaseui-portal/src/app/components/charts/pie/pie.component.less deleted file mode 100644 index e69de29b..00000000 diff --git a/usecaseui-portal/src/app/components/charts/pie/pie.component.spec.ts b/usecaseui-portal/src/app/components/charts/pie/pie.component.spec.ts deleted file mode 100644 index 528da25c..00000000 --- a/usecaseui-portal/src/app/components/charts/pie/pie.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { PieComponent } from './pie.component'; - -describe('PieComponent', () => { - let component: PieComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ PieComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(PieComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/usecaseui-portal/src/app/components/charts/pie/pie.component.ts b/usecaseui-portal/src/app/components/charts/pie/pie.component.ts deleted file mode 100644 index dc5c80a0..00000000 --- a/usecaseui-portal/src/app/components/charts/pie/pie.component.ts +++ /dev/null @@ -1,114 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -import { Component, OnInit, Input } from '@angular/core'; -import { SimpleChanges } from '@angular/core/src/metadata/lifecycle_hooks'; - -@Component({ - selector: 'app-pie', - templateUrl: './pie.component.html', - styleUrls: ['./pie.component.less'] -}) -export class PieComponent implements OnInit { - // chart Data - @Input() chartData; - // init Data - @Input() initData; - - constructor() { } - - ngOnInit() { - this.initOpts = { - renderer: 'canvas', - height: this.initData.height - }; - this.pieOption = { - backgroundColor:this.initData.option.backgroundColor, - legend: this.initData.option.legend, - color:this.initData.option.color, - tooltip: this.initData.option.tooltip || '', - series : [ - { - name: this.initData.option.series[0].name, - type: 'pie', - radius : this.initData.option.series[0].radius, - center:this.initData.option.series[0].center, - legendHoverLink: false, - hoverOffset: 3, - avoidLabelOverlap: false, - // minAngle:1, - label: this.initData.option.series[0].label, - data:[], - itemStyle: this.initData.option.series[0].itemStyle - } - ] - } - } - - ngOnChanges(changes:SimpleChanges){ - - // Execute when there is an instance, which is equivalent to not executing the following method for the first time. - if(this.chartIntance){ - this.chartDataChange() - } - } - - // Initialize the height of the graphic - initOpts:any; - // Alarm pie chart - pieOption:any; - // Instance object - chartIntance:any; - // Data change - updateOption:any; - chartDataChange(){ - this.updateOption = this.chartData; - // Wait until the updateOption is finished and then execute - this.chartIntance.on('finished',()=>{ - this.chartIntance.dispatchAction({ - type:'highlight', - seriesIndex: 0, - dataIndex:0 - }) - //Since all view changes are rendered, this event is logged out after the update - this.chartIntance.off('finished') - }) - } - - chartInit(chart){ - this.chartIntance = chart; - } - - pieMouseOver(e){ - this.chartIntance.dispatchAction({ - type:'downplay' - }) - this.chartIntance.dispatchAction({ - type:'highlight', - seriesIndex: 0, - dataIndex:e.dataIndex - }) - } - - pieMouseOut(e){ - this.chartIntance.dispatchAction({ - type:'highlight', - seriesIndex: 0, - dataIndex:e.dataIndex - }) - } - - -} diff --git a/usecaseui-portal/src/app/components/customer/customer.component.html b/usecaseui-portal/src/app/components/customer/customer.component.html deleted file mode 100644 index 04975e41..00000000 --- a/usecaseui-portal/src/app/components/customer/customer.component.html +++ /dev/null @@ -1,131 +0,0 @@ - -
    -
    -
    -

    {{"i18nTextDefine_Instance_Count_of_Customer" | translate}}

    - -
    No Service Instances
    - -
    -
    -

    {{"i18nTextDefine_Instance_Count_of_ServiceType" | translate}}

    - -
    - customerName - {{this.serviceInit["customer"]}} -
    -
    -
    -
    -
    -
    - {{"i18nTextDefine_Customer" | translate}} - -
    -
    -
    -
    - - -
    -
    -
      -
    • - - {{item.name}} - -
      • -
    -
    -
    -
    -
    -
    -
    - {{"i18nTextDefine_ServiceType" | translate}} - -
    -
    -
    -
    - - -
    -
    -
    -
    -
      -
    • - {{item.type}} - -
      • -
    -
    -
    -
    -
    - - -

    *  {{"i18nTextDefine_Input_Sure_deleteCustomer" | translate}}

    -
    -

    {{"i18nTextDefine_CustomerName" | translate}} :

    -
    {{thisdeleteCustomer["name"]}}
    -
    -
    -

    {{"i18nTextDefine_CustomerID" | translate}} :

    -
    {{thisdeleteCustomer["id"]}}
    -
    -     - -

    *  {{"i18nTextDefine_Input_Sure_deleteServiceType" | translate}}

    -
    -

    {{"i18nTextDefine_CustomerName" | translate}} :

    -
    {{selectCustomer.name}}
    -
    -
    -

    {{"i18nTextDefine_CustomerID" | translate}} :

    -
    {{selectCustomer.id}}
    -
    -
    -

    {{"i18nTextDefine_ServiceType" | translate}} :

    -
    {{thisdeleteServiceType["type"]}}
    -
    -     - - -
    -
    - - {{notificationAttributes.status}} - -
    - {{"i18nTextDefine_"+notificationAttributes.title | translate}}  - {{"i18nTextDefine_"+notificationAttributes.action | translate}}  {{"i18nTextDefine_"+notificationAttributes.status | translate}} -
    -
    -
    -

    {{"i18nTextDefine_"+notificationAttributes.title | translate}}:

    - {{ notificationAttributes.name }} -
    -
    -
    {{"i18nTextDefine_Close" | translate}}
    -
    -
    -     -
    \ No newline at end of file diff --git a/usecaseui-portal/src/app/components/customer/customer.component.less b/usecaseui-portal/src/app/components/customer/customer.component.less deleted file mode 100644 index 7d329230..00000000 --- a/usecaseui-portal/src/app/components/customer/customer.component.less +++ /dev/null @@ -1,254 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -.content { - display: flex; - - width: 100%; - height: 100%; - i.anticon { - cursor: pointer; - font-size: 18px; - padding: 2px; - &:hover{ - color: #0DA9E2; - } - } - li.active{ - &:hover{ - cursor: pointer; - color: #3C4F8C; - // background:linear-gradient(to right, #E5F6FF, #CFEEFA) - background-color: #e6f7ff; - } - } - .customer { - height: 100%; - overflow: hidden; - width: 32%; - margin-right: 1.5%; - border-radius: 5px; - background-color: #fff; - box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06); - display: inline-block; - vertical-align: top; - .customer_title { - line-height: 3.5em; - //height: 5%; - width: 100%; - border-bottom: 1px #07A9E1 solid; - .customers { - padding: 0 20px; - span { - color: #0DA9E2; - font-family:"ArialMT"; - } - img { - width: 30px; - height: 30px; - float: right; - margin-top: 7px; - } - } - } - .customer_detail { - height: 95%; - width: 100%; - overflow: auto; - border-top: 1px #07A9E1 solid; - .customer_add { - line-height: 3.5; - height: 50px; - width: 100%; - padding: 0 20px; - background-color: #F4F5F8; - .customer_name { - width: 52%; - font-size: 12px; - color: #CCCCCC; - font-family: ArialMT; - border-color: #3F9CFF; - } - .customer_addbut { - float: right; - margin-top: 9px; - width: 28%; - background-color: #0DA9E2; - } - } - .customer_list { - .active { - background:linear-gradient(to right, #E5F6FF, #CFEEFA); - color: #3C4F8C; - } - li { - display:flex; - align-items: center; - padding: 0 20px; - height: 50px; - line-height: 3.5; - width: 100%; - cursor: pointer; - color: rgba(60,79,140,0.5); - img { - width: 30px; - height: 30px; - } - span { - width: 70%; - padding-left: 10%; - display: inline-block; - } - } - } - } - - } - .services_type { - overflow: hidden; - height: 100%; - border-radius: 5px; - width: 32%; - background-color: #fff; - box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06); - display: inline-block; - vertical-align: top; - .services_type_title { - line-height: 3.5em; - //height: 5%; - width: 100%; - border-bottom: 1px #07A9E1 solid; - .servicess { - padding: 0 20px; - span { - color: #0DA9E2; - font-family:"ArialMT"; - } - img { - width: 40px; - height:40px; - float: right; - margin-right: -10px; - margin-top: 5px; - } - } - } - .services_type_detail { - height: 95%; - width: 100%; - overflow: auto; - border-top: 1px #07A9E1 solid; - .services_add { - line-height: 3.5; - height: 50px; - width: 100%; - padding: 0 20px; - background-color: #F4F5F8; - .services_name { - width: 52%; - font-size: 12px; - color: #CCCCCC; - font-family: ArialMT; - border-color: #3F9CFF; - } - .services_addbut { - float: right; - margin-top: 5px; - width: 28%; - clear: both; - background-color: #0DA9E2; - } - } - - .services_list { - background:linear-gradient(to right, #E5F6FF, #CFEEFA); - height: 100%; - .border_size{ - position: absolute; - margin-left: -8px; - width: 0; - height: 0; - border-top: 24px solid transparent; - border-bottom: 24px solid transparent; - border-right: 10px solid #E5F6FF; - } - li { - height: 50px; - line-height: 50px; - width: 100%; - vertical-align: middle; - border-bottom: 2px #FFFFFF dashed; - position: relative; - color: #3C4F8C; - i { - display: inline-block; - vertical-align: middle; - position: absolute; - width: 48px; - height: 48px; - top: 0; - right: -16px; - line-height: 46px; - } - } - } - - } - } - .chearts { - display: inline-block; - width: 32%; - margin-right: 1.5%; - vertical-align: top; - height: 100%; - >div{ - padding: 20px 20px; - } - .Cu { - height: 48%; - width: 100%; - margin-bottom: 7%; - margin-right: 2.5%; - border-radius: 5px; - background-color: #fff; - box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06); - p { - color :#0DA9E2; - font-family:"ArialMT"; - } - .legend { - height: 10px; - width: 10px; - display: inline-block; - background: linear-gradient(to right,#7DCEFB, #0DA9E2); - border-radius: 50%; - margin: 15px 4px 0 43%; - } - } - .type { - height: 48%; - width: 100%; - margin-right: 2.5%; - border-radius: 5px; - background-color: #fff; - box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06); - p { - color :#0DA9E2; - font-family:"ArialMT"; - - } - } - } -} \ No newline at end of file diff --git a/usecaseui-portal/src/app/components/customer/customer.component.spec.ts b/usecaseui-portal/src/app/components/customer/customer.component.spec.ts deleted file mode 100644 index f185e7a7..00000000 --- a/usecaseui-portal/src/app/components/customer/customer.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { CustomerComponent } from './customer.component'; - -describe('CustomerComponent', () => { - let component: CustomerComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ CustomerComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(CustomerComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/usecaseui-portal/src/app/components/customer/customer.component.ts b/usecaseui-portal/src/app/components/customer/customer.component.ts deleted file mode 100644 index d4d843ff..00000000 --- a/usecaseui-portal/src/app/components/customer/customer.component.ts +++ /dev/null @@ -1,552 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -import {Component, OnInit, TemplateRef} from '@angular/core'; -import { ManagemencsService } from '../../managemencs.service'; -import { NzNotificationService } from 'ng-zorro-antd'; -@Component({ - selector: 'app-customer', - templateUrl: './customer.component.html', - styleUrls: ['./customer.component.less'] -}) -export class CustomerComponent implements OnInit { - public chose = ''; - - constructor( - private managemencs: ManagemencsService, - private notification: NzNotificationService - ) { - } - - ngOnInit() { - this.getAllCustomers(); - } - - AllCustomersdata = []; - AllServiceTypes = []; - customerber = []; - // Get all customers - active; - selectCustomer = { - name:null, - id:null - }; - addNewCustomer = null; - addNewServiceType = null; - deleteCustomerModelVisible = false; - deleteServiceTypeModelVisible = false; - //2019.08.14 add - notificationAttributes = { - "title":"Customer", - "imgPath":"../../../../assets/images/execute-inproess.png", - "action":"Create", - "status":"InProgress", - "name":"" - }; - notificationModelShow(template: TemplateRef<{}>): void { - console.log(this.notificationAttributes,"notificationModelShow show"); - this.notification.template(template); - } - notificationSuccess(notificationModel){ - this.notificationAttributes.imgPath = "../../../assets/images/execute-success.png"; - this.notificationAttributes.status = "Success"; - this.notificationModelShow(notificationModel); - } - notificationFailed(notificationModel){ - this.notificationAttributes.imgPath = "../../../assets/images/execute-faild.png"; - this.notificationAttributes.status = "Failed"; - this.notificationModelShow(notificationModel); - } - getAllCustomers() { - this.managemencs.getAllCustomers().subscribe((data) => { - this.AllCustomersdata = data.map((item) => { - return {name: item["subscriber-name"], id: item["global-customer-id"]} - }); - this.active = this.selectCustomer = this.AllCustomersdata[0]; - this.serviceInit["customer"] = this.AllCustomersdata[0].name; - this.getCustomersPie(); - this.getServiceTypes(this.active); - this.getCustomersColumn(this.active); - }) - - } - - // Get all servicetype - getServiceTypes(item) { - this.managemencs.getServiceTypes(item).subscribe((data) => { - this.AllServiceTypes = data.map((item) => { - return {type: item["service-type"], id: item["global-customer-id"]} - }); - }) - } - - // Switch user data - choseCustomer(index, item) { - this.chose = index; - this.selectCustomer = item; - this.serviceInit["customer"] = this.selectCustomer.name; - this.getServiceTypes(item); - this.getCustomersColumn(item); - } - - customeradd = false; - servicesadd = false; - //Customer pie - CUChartData: Object; - CUChartInit: Object = { - height: 200, - option: { - color: ["#F2F6FD"], - series: [{ - type: 'pie', - name: "customer", - radius: '90%', - center: ['50%', '50%'], - data: [], - label: { - normal: { - position: 'center', - show: false, - formatter: ' {b|{b}：{c}} ', - backgroundColor: 'rgba(51,51,51,0.9)', - borderColor: 'rgba(51,51,51,0.9)', - borderWidth: 1, - borderRadius: 4, - rich: { - b: { - fontSize: 16, - color: '#fff', - lineHeight: 33 - } - } - }, - emphasis: { - show: true, - - } - }, - labelLine: { - normal: { - show: false - } - }, - itemStyle: { - normal: { - borderWidth: 3, - borderColor: '#ffffff', - }, - emphasis: { - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [{ - offset: 0, color: '#7DCEFB' - }, { - offset: 1, color: '#0DA9E2' - }], - global: false - }, - borderWidth: 0, - shadowBlur: 10, - shadowOffsetX: 0, - shadowColor: 'rgba(0, 10, 5, 0)' - } - } - }] - } - }; - - // get customers chart pie - Pie_name = []; - Pie_value = []; - serviceChart=true; - serviceNumber; - getCustomersPie() { - this.managemencs.getCustomersPie().subscribe((data) => { - this.serviceNumber = data.serviceTotalNum; - if (this.serviceNumber>0) { - this.serviceChart = true; - } else { - this.serviceChart = false; - } - this.CUChartData = { - series: [{ - data:data.customerServiceList - }] - } - console.log(this.CUChartData) - }, (err) => { - console.log(err); - }); - } - - // service bar - serviceData: Object; - serviceInit: Object = { - customer: '', - width: 280, - height: 190, - option: { - tooltip: { - show: true, - trigger: 'item', - formatter: "{c}" - }, - grid: { - top: '5%', - left: '5%', - bottom: '3%', - containLabel: true - }, - xAxis: [ - { - type: 'value', - splitLine: { - show: false, - }, - axisTick: { - show: false - }, - axisLine: { - lineStyle: { - color: "#EDEDED" - } - }, - axisLabel: { - color: "#3C4F8C" - } - } - - ], - yAxis: [ - { - type: 'category', - splitLine: { - show: false, - }, - axisTick: { - show: false - }, - axisLine: { - lineStyle: { - color: "#EDEDED" - } - }, - axisLabel: { - color: "#3C4F8C" - }, - data: [], - }, - - ], - series: [ - { - name: '', - barWidth: '40%', - type: 'bar', - data: [], - itemStyle: { - normal: { - color: function (params) { - // build a color map as your need. - var colorList = [ - { - type: 'bar', - colorStops: [{ - offset: 0, - color: '#FCCE2B' - }, { - offset: 1, - color: '#FEE956' - }], - globalCoord: false, - }, - { - type: 'bar', - colorStops: [{ - offset: 0, - color: '#F43A59' - }, { - offset: 1, - color: '#FA6C92' - }], - globalCoord: false, - }, - { - type: 'bar', - colorStops: [{ - offset: 0, - color: '#4F5B60' - }, { - offset: 1, - color: '#879499' - }], - globalCoord: false, - }, - { - type: 'bar', - colorStops: [{ - offset: 0, - color: '#31DAC3' - }, { - offset: 1, - color: '#5FEFE3' - }], - globalCoord: false, - }, - { - type: 'bar', - colorStops: [{ - offset: 0, - color: '#999999' - }, { - offset: 1, - color: '#C9C9C9' - }], - globalCoord: false, - } - ]; - return colorList[params.dataIndex] - }, - } - } - }, - { - name: 'Type4', - type: 'bar', - stack: '', - data: '', - - }, - { - name: 'Type1', - type: 'bar', - stack: '', - data: '' - }, - { - name: 'Type2', - type: 'bar', - stack: '', - data: '' - }, - { - name: 'Type3', - type: 'bar', - stack: '', - data: '' - }, - { - name: 'Other', - type: 'bar', - stack: '', - data: '', - - } - ] - } - }; - name_s = []; - value_s = []; - - getCustomersColumn(item) { - this.name_s = []; - this.value_s = []; - this.managemencs.getCustomersColumn(item).subscribe((data) => { - data.list.forEach((item) => { - this.name_s.push(item.name); - this.value_s.push(item.value); - }) - this.serviceData = { - yAxis: [{ - data: this.name_s - }], - series: [{ - data: this.value_s - }] - } - console.log(this.serviceData) - }) - } - - createNewCustomer(notificationModel) { - let createParams = { - customerId: this.addNewCustomer, - 'global-customer-id':this.addNewCustomer, - 'subscriber-name':this.addNewCustomer, - 'subscriber-type':'INFRA' - }; - this.notificationAttributes = { - "title":"Customer", - "imgPath":"../../../../assets/images/execute-inproess.png", - "action":"Create", - "status":"InProgress", - "name":this.addNewCustomer - }; - this.notificationModelShow(notificationModel); - this.managemencs.createCustomer(this.addNewCustomer, createParams).subscribe((data) => { - if (data["status"] == 'SUCCESS') { - this.notificationSuccess(notificationModel); - this.getAllCustomers(); - console.log(data, "Interface returned success") - } else { - this.notificationFailed(notificationModel); - console.log(data, "Interface returned error") - } - }) - } - - // Customer delete model - thisdeleteCustomer={ - name:null, - id:null - }; - deleteCustomerModel(itemCustomer) { - this.thisdeleteCustomer = itemCustomer; - this.deleteCustomerModelVisible = true; - } - deleteCustomerCancel() { - this.deleteCustomerModelVisible = false; - } - deleteCustomerOk(notificationModel) { - this.deleteCustomerModelVisible = false; - this.getCustomerVersion(this.thisdeleteCustomer,notificationModel); - this.notificationAttributes = { - "title":"Customer", - "imgPath":"../../../../assets/images/execute-inproess.png", - "action":"delete", - "status":"InProgress", - "name":this.thisdeleteCustomer.name - }; - this.notificationModelShow(notificationModel); - } - getCustomerVersion(thisdeleteCustomer,notificationModel){ - this.managemencs.getdeleteCustomerVersion(thisdeleteCustomer).subscribe((data) => { - if (data["status"] == 'SUCCESS') { - let params = { - customerId:thisdeleteCustomer.id, - version:data["result"]["resource-version"] - }; - this.deleteCustomer(params,notificationModel); - console.log(data, "Interface returned success") - } else { - console.log(data, "Interface returned error") - } - }) - } - deleteCustomer(params,notificationModel){ - this.managemencs.deleteSelectCustomer(params).subscribe((data) => { - if (data["status"] == 'SUCCESS') { - this.notificationSuccess(notificationModel); - this.getAllCustomers(); - console.log(data, "Interface returned success") - } else { - this.notificationFailed(notificationModel); - console.log(data, "Interface returned error") - } - }) - } - - createNewServiceType(notificationModel) { - let createParams = { - customer: this.selectCustomer, - ServiceType: this.addNewServiceType, - "service-type":this.addNewServiceType, - "temp-ub-sub-account-id":"sotnaccount" - }; - this.notificationAttributes = { - "title":"ServiceType", - "imgPath":"../../../../assets/images/execute-inproess.png", - "action":"Create", - "status":"InProgress", - "name":this.addNewServiceType - }; - this.notificationModelShow(notificationModel); - this.managemencs.createServiceType(createParams).subscribe((data) => { - if (data["status"] == 'SUCCESS') { - this.notificationSuccess(notificationModel); - this.getCustomersColumn(this.selectCustomer); - this.getAllCustomers(); - console.log(data, "Interface returned success") - } else { - this.notificationFailed(notificationModel); - console.log(data, "Interface returned error") - } - }) - } - - // ServiceType delete model - thisdeleteServiceType={ - type:null - }; - deleteServiceTypeModel(itemServiceType) { - this.thisdeleteServiceType = itemServiceType; - this.deleteServiceTypeModelVisible = true; - } - deleteServiceTypeCancel() { - this.deleteServiceTypeModelVisible = false; - } - deleteServiceTypeOk(notificationModel) { - this.deleteServiceTypeModelVisible = false; - this.getServiceTypeVersion(notificationModel); - } - getServiceTypeVersion(notificationModel) { - let paramss = { - customerId: this.selectCustomer, - ServiceType: this.thisdeleteServiceType["type"] - }; - this.notificationAttributes = { - "title":"ServiceType", - "imgPath":"../../../../assets/images/execute-inproess.png", - "action":"delete", - "status":"InProgress", - "name":this.thisdeleteServiceType["type"] - }; - this.notificationModelShow(notificationModel); - this.managemencs.getdeleteServiceTypeVersion(paramss).subscribe((data) => { - console.log(data) - if (data["status"] == 'SUCCESS') { - let params = { - customerId:this.selectCustomer, - ServiceType:this.thisdeleteServiceType["type"], - version:data["result"]["resource-version"] - }; - this.deleteServiceType(params,notificationModel); - console.log(data, "Interface returned success") - } else { - console.log(data, "Interface returned error") - } - }) - } - deleteServiceType(params,notificationModel){ - this.managemencs.deleteSelectServiceType(params).subscribe((data) => { - if (data["status"] == 'SUCCESS') { - this.notificationSuccess(notificationModel); - this.getServiceTypes(params.customerId); - this.getCustomersColumn(params.customerId); - this.getAllCustomers(); - console.log(data, "Interface returned success") - } else { - this.notificationFailed(notificationModel); - console.log(data, "Interface returned error") - } - }) - } - - -} diff --git a/usecaseui-portal/src/app/components/details/details.component.css b/usecaseui-portal/src/app/components/details/details.component.css deleted file mode 100644 index 0b5493d7..00000000 --- a/usecaseui-portal/src/app/components/details/details.component.css +++ /dev/null @@ -1,104 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -.content .header { - background-color: #fff; - border-radius: 5px; - padding: 30px 28px 0; - position: relative; - margin-bottom: 30px; - border: 1px solid #e4e4e4; -} -.content .header hr { - margin: 0; - border: none; - height: 1px; - background-color: #e4e4e4; -} -.content .header h2 { - font: 700 24px/18px 'Times New Roman'; - color: #3fa8eb; - text-align: center; - margin-bottom: 27px; -} -.content .header span.tildeimg { - position: absolute; - left: 50%; - top: 71px; - width: 60px; - height: 10px; - transform: translate(-30px, 0); - background: url(../../../assets/images/tildeimg.png) no-repeat center center; - background-color: #fff; -} -.content .header .headerlist { - display: flex; -} -.content .header .headerlist div { - width: 100%; -} -.content .header .headerlist div p { - font: 400 14px 'Arial'; - color: #323437; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - margin: 18px 0 15px; -} -.content .header .headerlist div p span { - display: inline-block; - width: 50%; - text-align: right; - font: 700 14px 'Arial'; - color: #3fa8eb; -} -.content hr { - margin: 0; - border: none; - height: 1px; - background-color: #e4e4e4; -} -.content button { - width: 88px; - height: 22px; - position: absolute; - left: 50%; - transform: translate(-44px, 0); - border: none; - outline: none; - cursor: pointer; - background-color: #fff; - background: url(../../../assets/images/open-close2.png) no-repeat center -22px; -} -.content button:hover { - background: url(../../../assets/images/open-close2.png) no-repeat center -66px; -} -.content .buttonActive { - transform: translate(-44px, -22px); - background: url(../../../assets/images/open-close2.png) no-repeat center 0px; -} -.content .buttonActive:hover { - background: url(../../../assets/images/open-close2.png) no-repeat center -44px; -} -.content h2.detailtitle { - font: 700 24px/18px 'Times New Roman'; - color: #3fa8eb; - text-align: center; - margin-bottom: 15px; - padding-top: 25px; -} -.content .detailInformatioin { - overflow: hidden; -} diff --git a/usecaseui-portal/src/app/components/details/details.component.html b/usecaseui-portal/src/app/components/details/details.component.html deleted file mode 100644 index 62770b60..00000000 --- a/usecaseui-portal/src/app/components/details/details.component.html +++ /dev/null @@ -1,68 +0,0 @@ - -
    -
    -

    HEADER INFORMATION

    -
    -
    -
    -

    Version :{{datailheaderdata.version}}

    -

    Domain :{{datailheaderdata.domain}}

    -

    Event Name :{{datailheaderdata.eventName}}

    -

    Event Id :{{datailheaderdata.eventId}}

    -

    EventType :{{datailheaderdata.eventType}}

    -

    NfcNamingCode :{{datailheaderdata.nfcNamingCode}}

    -

    NfNamingCode :{{datailheaderdata.nfNamingCode}}

    -

    SourceName :{{datailheaderdata.sourceName}}

    -

    SourceId :{{datailheaderdata.sourceId}}

    -

    ReportingEntityName :{{datailheaderdata.reportingEntityName}}

    -

    ReportingEntityId :{{datailheaderdata.reportingEntityId}}

    -
    -
    -

    Priority :{{datailheaderdata.priority}}

    -

    ReportTime :{{datailheaderdata.reportTime}}

    -

    ClearTime :{{datailheaderdata.clearTime}}

    -

    FaultFieldsVersion :{{datailheaderdata.faultFieldsVersion}}

    -

    Event Servrity :{{datailheaderdata.eventServrity}}

    -

    EventSourceType :{{datailheaderdata.eventSourceType}}

    -

    EventCategory :{{datailheaderdata.eventCategory}}

    -

    AlarmCondition :{{datailheaderdata.alarmCondition}}

    -

    SpecificProblem :{{datailheaderdata.specificProblem}}

    -

    Status : {{datailheaderdata.status}}

    -

    AlarmInterfaceA :{{datailheaderdata.alarmInterfaceA}}

    -
    -
    -
    -
    - -

    DETAIL INFORMATION

    -
    - - - - Item Name - Item Value - - - - - {{data.name}} - {{data.value}} - - - -
    -
    diff --git a/usecaseui-portal/src/app/components/details/details.component.less b/usecaseui-portal/src/app/components/details/details.component.less deleted file mode 100644 index a27357ef..00000000 --- a/usecaseui-portal/src/app/components/details/details.component.less +++ /dev/null @@ -1,111 +0,0 @@ - -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -.content { - .header { - background-color: #fff; - border-radius: 5px; - padding: 30px 28px 0; - position: relative; - margin-bottom: 30px; - border: 1px solid #e4e4e4; - hr { - margin: 0; - border: none; - height: 1px; - background-color: #e4e4e4; - } - h2 { - font: 700 24px/18px 'Times New Roman'; - color: #3fa8eb; - text-align: center; - margin-bottom: 27px; - } - span.tildeimg { - position: absolute; - left: 50%; - top: 71px; - width: 60px; - height: 10px; - transform: translate(-30px,0); - background: url(../../../assets/images/tildeimg.png) no-repeat center center; - background-color: #fff; - } - .headerlist { - display: flex; - div { - width: 100%; - p { - font: 400 14px 'Arial'; - color: #323437; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - margin: 18px 0 15px; - span { - display: inline-block; - width: 50%; - text-align: right; - font: 700 14px 'Arial'; - color: #3fa8eb; - } - } - } - } - } - hr { - margin: 0; - border: none; - height: 1px; - background-color: #e4e4e4; - } - button { - width: 88px; - height: 22px; - position: absolute; - left: 50%; - transform: translate(-44px,0); - border: none; - outline: none; - cursor: pointer; - background-color: #fff; - background: url(../../../assets/images/open-close2.png) no-repeat center -22px; - &:hover { - background: url(../../../assets/images/open-close2.png) no-repeat center -66px; - } - } - .buttonActive { - transform: translate(-44px,-22px); - background: url(../../../assets/images/open-close2.png) no-repeat center -0px; - &:hover { - background: url(../../../assets/images/open-close2.png) no-repeat center -44px; - } - } - h2.detailtitle { - font: 700 24px/18px 'Times New Roman'; - color: #3fa8eb; - text-align: center; - margin-bottom: 15px; - padding-top: 25px; - } - .detailInformatioin { - // transition: all 0.3s linear; - overflow: hidden; - } - .detailshow { - - } -} \ No newline at end of file diff --git a/usecaseui-portal/src/app/components/details/details.component.spec.ts b/usecaseui-portal/src/app/components/details/details.component.spec.ts deleted file mode 100644 index 1d5cbeb8..00000000 --- a/usecaseui-portal/src/app/components/details/details.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { DetailsComponent } from './details.component'; - -describe('DetailsComponent', () => { - let component: DetailsComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ DetailsComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(DetailsComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/usecaseui-portal/src/app/components/details/details.component.ts b/usecaseui-portal/src/app/components/details/details.component.ts deleted file mode 100644 index 5eed3daf..00000000 --- a/usecaseui-portal/src/app/components/details/details.component.ts +++ /dev/null @@ -1,59 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -import { Component, OnInit, Input } from '@angular/core'; -import { slideUpDown } from '../../animates'; -import { HomesService } from '../../homes.service'; - -@Component({ - selector: 'app-details', - templateUrl: './details.component.html', - styleUrls: ['./details.component.less'], - animations: [ slideUpDown ] -}) -export class DetailsComponent implements OnInit { - - constructor(private myhttp:HomesService) { } - - ngOnInit() { - } - - ngOnChanges(changes){ - this.getAlarmDetailData(this.detailId); - } - - datailheaderdata: any = { - - }; - dataillistdata: any = []; - getAlarmDetailData(id){ - if(id){ - this.myhttp.getAlarmDetailData(id).subscribe((data)=>{ - this.datailheaderdata = data.alarmsHeader; - this.dataillistdata = data.list; - }) - } - - } - // detail Show - moredetailShow = false; - @Input() detailId; - - state = 'up' - slideUpDown(){ - this.moredetailShow = !this.moredetailShow; - this.state = this.state === 'up' ? 'down' : 'up'; - } -} diff --git a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.css b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.css deleted file mode 100644 index 5dce6c92..00000000 --- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.css +++ /dev/null @@ -1,77 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -.title { - font: 700 18px/18px "思源黑体"; - color: #4c5e70; - margin-bottom: 18px; -} -hr { - border: none; - height: 2px; - background-color: #dce1e7; - margin-bottom: 10px; -} -.model { - background-color: #fff; - height: 90%; - overflow-y: auto; -} -.model .back { - position: absolute; - top: 10px; - right: 20px; -} -.model .creation { - position: relative; - width: 60%; - height: 100%; - overflow-y: auto; - border-radius: 5px; - padding: 20px; -} -.model .creation .baseparms h3 { - color: #3fa8eb; - font: 700 16px "Arial"; -} -.model .creation .baseparms h4 { - font: 700 16px "Arial"; -} -.model .creation .baseparms ul li { - margin: 3px 0; -} -.model .creation .baseparms ul li span { - display: inline-block; - width: 40%; - font: 700 14px "Arial"; - vertical-align: middle; - overflow: hidden; - text-overflow: ellipsis; - text-align: right; -} -.model .creation .baseparms ul li input { - width: 165px; -} -.model .creation .submit { - position: absolute; - top: 10px; - right: 20px; -} -.model .chart { - width: 40%; - padding: 10px; - height: 100%; - border-left: 10px solid #f3f3f3; -} diff --git a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.html b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.html deleted file mode 100644 index 49cba838..00000000 --- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.html +++ /dev/null @@ -1,138 +0,0 @@ - -
    - -
    -

    {{createParams.commonParams.templateType}} {{"i18nTextDefine_InstanceCreation" | translate}}

    -
    - - -
    -
    -
    -
    -
    -
    -

    {{"i18nTextDefine_Base" | translate}}

    -
      -
    • - Name: - -
      • -
    • - Description: - -
      • -
    • - COS: - -
      • -
    • - EBS: - -
      • -
    -
    -
    -

    {{"i18nTextDefine_templateInputs" | translate}}

    -
      -
    • - {{parameter.name}}: - - -
      id: {{parameter.name}} -
      - vf_location: - - - -
      • -
    -
    -
    -

    {{template.name}}

    -
      -
    • - {{input.name}}: - - -
      id: {{input.name}}
      - vf_location: - - - -
      • -
    -
    -
    - -
    -
    -

    {{"i18nTextDefine_Base" | translate}}

    -
      -
    • - Name: - -
      • -
    • - Description: - -
      • -
    -
    -
    -

    {{"i18nTextDefine_templateInputs" | translate}}

    -
      -
    • - {{parameter.name}}: - - -
      id: {{parameter.name}} -
      - vf_location: - - - -
      • -
    -
    -
    -

    vnfs Inputs

    -
      -
    • -
      id: {{vnf.vnf_id}}
      - vf_location: - - - -
      • -
    -
    -
    -
    -
    - -
    -
    - - -
    -
    -
    - -
    \ No newline at end of file diff --git a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.less b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.less deleted file mode 100644 index 35b91799..00000000 --- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.less +++ /dev/null @@ -1,159 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -.title { - font: 700 18px/18px "思源黑体"; - color: #4c5e70; - margin-bottom: 18px; -} -hr { - border: none; - height: 2px; - background-color: #dce1e7; - margin-bottom: 10px; -} -.model { - background-color: #F7F8FC; - height: 100%; - overflow-y: auto; - position: relative; - .top-title{ - width: 100%; - padding: 20px; - position: relative; - display: inline-block; - } - .submit{ - position: absolute; - width:84px; - height: 35px; - top: 10px; - right: 85px; - color: #fff; - font-size: 18px; - background:linear-gradient(90deg,rgba(99,194,246,1) 0%,rgba(62,155,255,1) 100%) !important; - border-radius:4px; - border: none!important; - border-color:rgba(0,0,0,0)!important; - } - .submit:hover{ - background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important; - border: none; - } - .back,.back:hover{ - position: absolute; - top: 10px; - right: 20px; - display: inline-block; - width: 35px; - height: 35px; - background:url("../../../assets/images/Return-icon.png") no-repeat!important; - background-size: 100%!important; - border-radius:4px; - color: #D7D7D7; - cursor: pointer; - } - .back:hover{ - background: url("../../../assets/images/Return-icon-active.png")!important; - background-size: 100%!important; - } - .top-title h3.title { - height: 35px; - width: 80%; - font-size:16px; - font-family:ArialMT; - color:#3C4F8C; - line-height:35px; - display: inline-block; - } - .e2ecreate-content{ - position: relative; - width: 98%; - height: 100%; - margin-left: 30px; - box-shadow:0px 10px 15px 2px rgba(222,222,222,0.5); - background: #fff; - border-radius:2px; - } - .creation{ - position: relative; - width: 58%; - height: 100%; - overflow-y: auto; - padding: 20px; - background: #fff; - .baseparms { - h3,h4{ - color: #06A7E2; - width: 96%; - height: 40px; - line-height: 35px; - font-size: 18px; - font-weight: 500; - margin: 10px auto; - border-bottom: 2px solid; - border-image: -webkit-linear-gradient(#07A9E1,#30D9C4) 100 100; - border-image: -moz-linear-gradient(#07A9E1,#30D9C4) 100 100; - border-image: linear-gradient(#07A9E1,#30D9C4) 100 100; - border-radius:2px; - } - h4 { - font: 700 16px "Arial"; - margin-left: 25px; - } - .vnf-box{ - clear: both; - } - ul{ - margin-left: 30px; - } - ul li { - margin: 10px 0; - width: 42%; - margin-right: 5%; - float: left; - text-align: left; - span { - display: inline-block; - width: 30%; - font: 700 14px "Arial"; - vertical-align: middle; - overflow: hidden; - text-align: left; - } - input,nz-select{ - width: 65%; - margin-left:3% - } - } - } - } - .dividing-line{ - width: 0; - height: 85%; - margin: 4% 0; - border-left: 1px #cccccc dashed; - } - .chart { - width: 38%; - padding: 10px; - height: 95%; - margin-right: 40px; - #createChart{ - height: 100%; - width: 100%; - } - } -} diff --git a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.spec.ts b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.spec.ts deleted file mode 100644 index de00c43f..00000000 --- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { E2eCreationComponent } from './e2e-creation.component'; - -describe('E2eCreationComponent', () => { - let component: E2eCreationComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ E2eCreationComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(E2eCreationComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts deleted file mode 100644 index 5446dc5f..00000000 --- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts +++ /dev/null @@ -1,354 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; -import { MyhttpService } from '../../myhttp.service'; -import * as d3 from 'd3'; - -@Component({ - selector: 'app-e2e-creation', - templateUrl: './e2e-creation.component.html', - styleUrls: ['./e2e-creation.component.less'] -}) -export class E2eCreationComponent implements OnInit { - - constructor( private myhttp:MyhttpService ) { } - - ngOnInit() { - this.gete2eTemParameters(this.e2e_ns_temParametersContent); - this.getVimInfo(); - this.getSdnControllers(); - } - - @Output() e2eCloseCreate = new EventEmitter(); - @Output() nsCloseCreate = new EventEmitter(); - @Input() createParams; - @Input() e2e_ns_temParametersContent; - - - // e2e serviceTemplateParameters - templateParameters = { - invariantUUID: "", - uuid: "", - name: "", - type: "", - version: "", - description: "", - category: "", - subcategory: "", - customizationUuid: "", - inputs:[], - nestedTemplates:[] - }; - // ns serviceTemplateParameters - nsTemplateParameters = { - inputs:{}, - inputs2:[], - vnfs:[] - }; - roote2e = { - "name": "e2e", - "type": "e2e", - "children": [] - }; - - rootns = { - "name": "ns", - "type": "ns", - "children": [] - }; - - imgmap = { - '1': './assets/images/create-e2e.png', - '2': './assets/images/create-ns.png', - '3': './assets/images/create-vnf.png', - }; - gete2eTemParameters(data) { //Get template parameters - let type = this.createParams.commonParams.templateType == "E2E Service" ? "e2e" : "ns"; - console.log(this.createParams); - console.log(data); - if(type == "e2e"){ - this.templateParameters = data; - this.templateParameters.nestedTemplates.forEach((item)=>{ - item.inputs = item.inputs.filter((input)=>{return input.type !== "sdn_controller"}); - }); - this.templateParameters.nestedTemplates.map((item,index) => { - let nsIndex={ - "name": "ns", - "type": "ns", - "children": [] - }; - nsIndex.children=item.nestedTemplates.map((item,index) => { - return { - "name": "vnf", - "type": "vnf", - } - }); - this.roote2e.children.push(nsIndex); - }); - console.log(this.templateParameters); - }else if(type == "ns"){ - if(data["model"]!=undefined && typeof data["model"]=='string'){ - this.nsTemplateParameters = JSON.parse(data["model"]); - }else{ - this.nsTemplateParameters = data; - } - this.nsTemplateParameters["inputs2"] = []; - let inputs = this.nsTemplateParameters.inputs; - for(let key in inputs){ - this.nsTemplateParameters["inputs2"].push({name:key,type:inputs[key].type,value:inputs[key].value}) - } - this.rootns.children=this.nsTemplateParameters.vnfs.map((item,index) => { - return { - "name": "vnf", - "type": "vnf", - } - }); - console.log(this.nsTemplateParameters); - } - - this.drawImage(type) - - } - vimInfos=[]; - getVimInfo() { - this.myhttp.getVimInfo() - .subscribe((data)=>{ - this.vimInfos = data.map((item)=>{return {name:item['cloud-owner'],id:item['cloud-region-id']}}); - }) - }; - sdnControllers=[]; - getSdnControllers(){ - this.myhttp.getSdnControllers() - .subscribe((data)=>{ - this.sdnControllers = data.map((item)=>{return {name:item['thirdparty-sdnc-id'],id:item['thirdparty-sdnc-id']}}); - }) - } - - // e2e requstbody - service = { - name: "", - description: "", - COS:"", - EBS:"", - serviceInvariantUuid: "", - serviceUuid: "", // uuid ?? - globalSubscriberId: "", // "customer.id", - serviceType: "", // "serviceType.value", - parameters: { - locationConstraints:[ - - ], - resources: [], - requestInputs: {}, - } - - } - - // ns requstbody - ns_service = { - csarId: "", - nsName: "", - description: "", - context: { - globalCustomerId: "", - serviceType: "" - } - }; - ns_service2 = { - locationConstraints: [ - - ], - additionalParamForNs: { - } - }; - submit(){ - let type = this.createParams.commonParams.templateType == "E2E Service" ? "e2e" : "ns"; - if(type == "e2e"){ - this.service.serviceInvariantUuid = this.templateParameters.invariantUUID; - this.service.serviceUuid = this.templateParameters.uuid; - this.service.globalSubscriberId = this.createParams.commonParams.customer.id; - this.service.serviceType = this.createParams.commonParams.serviceType.name; - - this.templateParameters.inputs.forEach((ipnut)=>{ - this.service.parameters.requestInputs[ipnut.name] = ipnut.value == undefined ? ipnut.defaultValue : ipnut.value; - }); - - this.templateParameters.nestedTemplates.forEach((item)=>{ - let nsService = { - resourceName: item.name, - resourceInvariantUuid: item.invariantUUID, - resourceUuid: item.uuid, - resourceCustomizationUuid: item.customizationUuid, - parameters: { - locationConstraints:[], - resources:[], - requestInputs:{} - } - }; - item.inputs.forEach((input)=>{ - if(input.type == "vf_location"){ - let location = { - vnfProfileId: input.name, - locationConstraints:{ - cloudOwner: input.value.name, - cloudRegionId:input.value.id - } - }; - nsService.parameters.locationConstraints.push(location); - }else{ - nsService.parameters.requestInputs[input.name] = input.value == undefined ? input.defaultValue : input.value; - } - }) - this.service.parameters.resources.push(nsService); - }) - console.log(this.service); - this.service.parameters.requestInputs['orchestrator'] = this.createParams.orchestrator.name; - if(this.createParams.isSol005Interface){ - this.service.parameters.requestInputs['isSol005Interface'] = this.createParams.isSol005Interface; - } - this.e2eCloseCreate.emit({service:this.service}); - - }else if(type == "ns"){ - //create ns instance - this.ns_service.csarId = this.createParams.template.id; - this.ns_service.context.globalCustomerId = this.createParams.commonParams.customer.id; - this.ns_service.context.serviceType = this.createParams.commonParams.serviceType.name; - - this.nsTemplateParameters.inputs2.forEach((input)=>{ - this.ns_service2.additionalParamForNs[input.name] = input.value == undefined ? input.defaultValue : input.value; - }) - this.nsTemplateParameters.vnfs.forEach((vnf)=>{ - let vnfparams = { - vnfProfileId: vnf.properties.id, - locationConstraints: { - cloudOwner: vnf.value.name, - cloudRegionId:vnf.value.id - } - } - this.ns_service2.locationConstraints.push(vnfparams); - }); - console.log(this.ns_service2); - - let requstbody = { - step1:this.ns_service, - step2:this.ns_service2 - }; - this.nsCloseCreate.emit(requstbody); - } - - } - goback(){ - this.e2eCloseCreate.emit(); - } - - - - drawImage(type) { - if (type == "e2e") { - this.render(this.roote2e, this.imgmap) - } else if (type == "ns") { - this.render(this.rootns, this.imgmap) - } - - - } - - // e2e or NS draw d3 topo - render(data, imgmap) { - let width = document.getElementById("createChart").clientWidth, - height = document.getElementById("createChart").clientHeight; - let cluster = d3.layout.tree() - .size([width, height]); - let diagonal = d3.svg.diagonal() - .projection(function (d) { - return [d.x-18, d.y+40]; - }); - let svg = d3.select("svg"); - - //marker - let marker = - svg.append("marker") - .attr("id", "resolved") - .attr("markerUnits", "strokeWidth") - .attr("markerUnits", "userSpaceOnUse") - .attr("viewBox", "0 -5 10 10") - .attr("refX", 22) - .attr("refY", 0) - .attr("markerWidth", 20) - .attr("markerHeight", 20) - .attr("orient", "auto") - .attr("stroke-width", 1) - .append("circle") - .attr("cx", 5) - .attr("cy", 0) - .attr("r", 2) - .attr("stroke-width", 1) - .style("stroke", "#2F8BF7") - .attr('fill', 'white'); - let i = 0; - let nodes = cluster.nodes(data).reverse(); - nodes.forEach(function (d) { - d.y = d.depth * 200+100; - - }); - - let links = cluster.links(nodes); - - let linkEnter = svg.selectAll("path.link") - .data(links); - - linkEnter.enter().append("path") - .attr("class", "link") - .attr("d", diagonal) - .style("stroke", "#2F8BF7") - .style('stroke-width', '1px') - .attr("marker-end", "url(#resolved)") - .style("fill", "none") - // .style("fill-opacity", 1) - .attr("id", function (d, i) { - return "mypath" + i; - }); - - let node = svg.selectAll(".node") - .data(nodes) - .enter() - .append("g") - .attr("class", "node") - .attr("transform", function (d) { - return "translate(" + (d.x + -50) + "," + (d.y) + ")"; - }); - - node.append('image') - .attr('xlink:href', function (d) { - if(d.type=="e2e"){ - return imgmap[1]; - }else if(d.type=="ns"){ - return imgmap[2]; - }else if(d.type=="vnf"){ - return imgmap[3]; - } - - }) - .style('width', '12%') - .style("cursor","pointer") - .attr("x", 0) - .attr("y", 0) - .attr("rx", 3); - - - } - -} diff --git a/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.html b/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.html deleted file mode 100644 index 0a753a30..00000000 --- a/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.html +++ /dev/null @@ -1,105 +0,0 @@ - - -
    - -
    -

    {{serviceInstanceName}} Instance Detail

    -
    - -
    -
    -
    - -
    -
    -

    {{"i18nTextDefine_Base" | translate}}

    -
      -
    • - Name: - {{service.name}} -
      • -
    • - Description: - {{service.description}} -
      • -
    -
    -
    -

    {{"i18nTextDefine_templateInputs" | translate}}

    -
      -
    • - {{key}}: - {{e2e_requestInputs[key]}} -
      • -
    -
    -
    -

    {{template.name}}

    -
      -
    • - vf_location: - {{input["vf_location"]}} -
      • -
    -
    -
    - -
    -
    -

    {{"i18nTextDefine_Base" | translate}}

    -
      -
    • - Name: - {{ns_service.name}} -
      • -
    • - Description: - {{ns_service.description}} -
      • -
    -
    -
    -

    {{"i18nTextDefine_templateInputs" | translate}}

    -
      -
    • - {{key}}: - {{ns_requestInputs[key]}} -
      • -
    -
    -
    -

    vnfs Inputs

    -
      -
    • -
      id: {{vnf.vnfInstanceId}}
      - vf_location: - {{vnf["vnfInstanceName"]}} -
      • -
    -
    -
    -
    - - -
    -
    - - -
    -
    - -
    \ No newline at end of file diff --git a/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.less b/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.less deleted file mode 100644 index 3f03af34..00000000 --- a/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.less +++ /dev/null @@ -1,139 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -.title { - font: 700 18px/18px "思源黑体"; - color: #4c5e70; - margin-bottom: 18px; -} -hr { - border: none; - height: 2px; - background-color: #dce1e7; - margin-bottom: 10px; -} -.creation-model{ - position: relative; -} -.model { - background-color: #F7F8FC; - height: 100%; - overflow-y: auto; - position: relative; - .top-title{ - width: 100%; - padding: 20px; - position: relative; - display: inline-block; - } - .back,.back:hover{ - position: absolute; - top: 10px; - right: 20px; - display: inline-block; - width: 35px; - height: 35px; - background:url("../../../assets/images/Return-icon.png") no-repeat!important; - background-size: 100%!important; - border-radius:4px; - color: #D7D7D7; - cursor: pointer; - } - .back:hover{ - background: url("../../../assets/images/Return-icon-active.png")!important; - background-size: 100%!important; - } - .top-title h3.title { - height: 35px; - width: 80%; - font-size:16px; - font-family:ArialMT; - color:#3C4F8C; - line-height:35px; - display: inline-block; - } - .detaildata{ - position: relative; - width: 58%; - height: 100%; - overflow-y: auto; - border-radius: 5px; - padding: 20px; - background: #fff; - margin-left: 30px; - box-shadow:0px 10px 15px 2px rgba(222,222,222,0.5); - .baseparms { - h3,h4{ - color: #06A7E2; - width: 96%; - height: 40px; - line-height: 35px; - font-size: 18px; - font-weight: 500; - margin: 10px auto; - border-bottom: 2px solid; - border-image: -webkit-linear-gradient(#07A9E1,#30D9C4) 100 100; - border-image: -moz-linear-gradient(#07A9E1,#30D9C4) 100 100; - border-image: linear-gradient(#07A9E1,#30D9C4) 100 100; - border-radius:2px; - } - h4 { - font: 700 16px "Arial"; - margin-left: 25px; - } - .vnf-box{ - clear: both; - } - ul{ - margin-left: 30px; - } - ul li { - margin: 10px 0; - width: 49%; - float: left; - text-align: left; - color:rgba(60,79,140,1); - font-size: 14px; - span { - display: inline-block; - width: 50%; - font: 700 14px "Arial"; - vertical-align: middle; - overflow: hidden; - text-align: left; - color:rgba(60,79,140,0.5); - } - span.input-content{ - width: 42%; - color: #3C4F8C; - margin-left: 5%; - } - } - } - } - .chart { - width: 35%; - padding: 10px; - height: 95%; - box-shadow: 0px 10px 35px 10px rgba(222, 222, 222, 0.5); - margin-right: 40px; - background:linear-gradient(180deg,rgba(183, 230, 247, 1) 0%,rgba(214, 240, 254, 1) 100%); - border-radius: 4px; - #createChart{ - height: 100%; - width: 100%; - } - } -} diff --git a/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.spec.ts b/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.spec.ts deleted file mode 100644 index ad24a477..00000000 --- a/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { E2eDetailComponent } from './e2e-detail.component'; - -describe('E2eDetailComponent', () => { - let component: E2eDetailComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ E2eDetailComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(E2eDetailComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.ts b/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.ts deleted file mode 100644 index 5affeb97..00000000 --- a/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.ts +++ /dev/null @@ -1,243 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ - -import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core'; -import {MyhttpService} from '../../myhttp.service'; -import * as d3 from 'd3'; - -@Component({ - selector: 'app-e2e-detail', - templateUrl: './e2e-detail.component.html', - styleUrls: ['./e2e-detail.component.less'] -}) -export class E2eDetailComponent implements OnInit { - - constructor(private myhttp: MyhttpService) { - } - - ngOnInit() { - this.dataInit(); - } - - @Input() detailParams; - - @Output() closeDetail = new EventEmitter(); - serviceInstanceName: any; - serviceType: any; - input_parameters: any; - - // e2e - service = { - name: "", - description: "", - }; - e2e_nestedTemplates = []; - e2e_requestInputs: any; - - ns_service = { - name:"", - description:"" - }; - ns_nestedTemplates = []; - ns_requestInputs = {}; - roote2e = { - "name": "e2e", - "type": "e2e", - "children": [] - }; - - rootns = { - "name": "ns", - "type": "ns", - "children": [] - }; - - imgmap = { - '1': './assets/images/create-e2e.png', - '2': './assets/images/create-ns.png', - '3': './assets/images/create-vnf.png', - }; - - getKeys(item) { - return Object.keys(item); - } - - dataInit() { - console.log(this.detailParams); - this.serviceInstanceName = this.detailParams['service-instance-name'] || this.detailParams["nsName"]; - if (this.detailParams.serviceDomain == 'E2E Service'){ - this.input_parameters = JSON.stringify(this.detailParams['input-parameters']); - this.input_parameters = JSON.parse(this.input_parameters); - console.log(this.input_parameters); - this.service = { - name:this.input_parameters.service.name, - description: this.input_parameters.service.description, - }; - if(this.input_parameters.service.parameters.requestInputs!=undefined && Object.keys(this.input_parameters.service.parameters.requestInputs).length>0){ - this.e2e_requestInputs = this.input_parameters.service.parameters.requestInputs; - } - if(this.input_parameters.service.parameters.resources!=undefined && this.input_parameters.service.parameters.resources.length>0){ - this.input_parameters.service.parameters.resources.map((item,i) => { - let nestedTemplates={ - name:null, - vnfs:[] - }; - nestedTemplates.name= item.resourceName; - item.parameters.locationConstraints.map((its,k) => { - nestedTemplates.vnfs.push({ - "vf_location":its.locationConstraints.cloudOwner - }) - }); - this.e2e_nestedTemplates.push(nestedTemplates); - - let nsIndex={ - "name": "ns", - "type": "ns", - "children": [] - }; - nsIndex.children=item.parameters.locationConstraints.map((itemits,index) => { - return { - "name": "vnf", - "type": "vnf", - } - }); - this.roote2e.children.push(nsIndex); - }); - console.log(this.e2e_nestedTemplates); - console.log(this.e2e_requestInputs); - } - }else if(this.detailParams.serviceDomain == 'Network Service'){ - this.ns_service = { - name:this.detailParams.name || this.detailParams['service-instance-name'], - description: this.detailParams.description || null - }; - if(this.detailParams.requestInputs!=undefined && Object.keys(this.detailParams.requestInputs).length>0){ - this.ns_requestInputs = this.detailParams.requestInputs; - } - this.ns_nestedTemplates = this.detailParams.childServiceInstances; - this.rootns.children=this.ns_nestedTemplates.map((item,index) => { - return { - "name": "vnf", - "type": "vnf" - } - }); - console.log(this.ns_nestedTemplates); - console.log(this.ns_requestInputs); - } - this.drawImage(this.detailParams.serviceDomain) - } - - goback() { - this.closeDetail.emit(); - } - - drawImage(type) { - if (type == "E2E Service") { - this.render(this.roote2e, this.imgmap) - } else if (type == "Network Service") { - this.render(this.rootns, this.imgmap) - } - - - } - - // draw d3 charts - render(data, imgmap) { - let width = document.getElementById("createChart").clientWidth, - height = document.getElementById("createChart").clientHeight; - let cluster = d3.layout.tree() - .size([width, height]); - let diagonal = d3.svg.diagonal() - .projection(function (d) { - return [d.x-18, d.y+40]; - }); - let svg = d3.select("svg"); - - //marker - let marker = - svg.append("marker") - .attr("id", "resolved") - .attr("markerUnits", "strokeWidth") - .attr("markerUnits", "userSpaceOnUse") - .attr("viewBox", "0 -5 10 10") - .attr("refX", 22) - .attr("refY", 0) - .attr("markerWidth", 20) - .attr("markerHeight", 20) - .attr("orient", "auto") - .attr("stroke-width", 1) - .append("circle") - .attr("cx", 5) - .attr("cy", 0) - .attr("r", 2) - .attr("stroke-width", 1) - .style("stroke", "#2F8BF7") - .attr('fill', 'white'); - let i = 0; - let nodes = cluster.nodes(data).reverse(); - nodes.forEach(function (d) { - d.y = d.depth * 200+100; - - }); - - let links = cluster.links(nodes); - - let linkEnter = svg.selectAll("path.link") - .data(links); - - linkEnter.enter().append("path") - .attr("class", "link") - .attr("d", diagonal) - .style("stroke", "#2F8BF7") - .style('stroke-width', '1px') - .attr("marker-end", "url(#resolved)") - .style("fill", "none") - // .style("fill-opacity", 1) - .attr("id", function (d, i) { - return "mypath" + i; - }); - - let node = svg.selectAll(".node") - .data(nodes) - .enter() - .append("g") - .attr("class", "node") - .attr("transform", function (d) { - return "translate(" + (d.x + -50) + "," + (d.y) + ")"; - }); - - node.append('image') - .attr('xlink:href', function (d) { - if(d.type=="e2e"){ - return imgmap[1]; - }else if(d.type=="ns"){ - return imgmap[2]; - }else if(d.type=="vnf"){ - return imgmap[3]; - } - - }) - .style('width', '12%') - .style("cursor","pointer") - .attr("x", 0) - .attr("y", 0) - .attr("rx", 3); - - - } - - -} diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.css b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.css deleted file mode 100644 index 2f6519c4..00000000 --- a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.css +++ /dev/null @@ -1,91 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -.content .title { - border-radius: 5px 5px 0 0; - background-color: #fff; - height: 106px; - border-bottom: 1px solid #f0f0f0; - margin-bottom: 0; -} -.content .title ul { - display: flex; - display: -webkit-flex; - justify-content: space-around; - align-items: center; - padding: 0; - margin: 0; - height: 100%; -} -.content .title ul li { - list-style: none; - padding-left: 32px; - width: 100%; - border-left: 1px solid #eceff4; -} -.content .title ul li h5 { - font: 500 14px "Arial"; - color: #3d4d65; -} -.content .title ul li p { - font: 500 24px "Arial"; - color: #3fa8eb; - margin-bottom: 0; -} -.content .title ul li:nth-child(1) { - border: none; -} -.content .chart { - position: relative; - border-radius: 5px; - margin-bottom: 20px; - height: 70px; -} -.content .chart .select { - padding: 20px 20px 20px 0px; - width: 70%; - float: left; -} -.content .chart .select span { - display: inline-block; - font: 700 14px "Arial"; - color: #4c5e70; -} -.content .chart .select .search { - margin-left: 20px; - height: 30px; - padding: 0 10px; -} -.content .chart .select .search span { - color: #fff; - font-weight: 400; -} -.content .tablelist { - background-color: #fff; - padding: 24px 10px 0px; - border-radius: 0 0 5px 5px; -} -.content .tablelist .action { - padding: 10px 0 0 20px; -} -.content .tablelist .action .details { - display: inline-block; - width: 16px; - height: 16px; - background: url(../../../assets/images/icon.png) center -113px; -} -.content .tablelist .action .details:hover { - background: url(../../../assets/images/icon.png) no-repeat center -128px; -} diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html deleted file mode 100644 index 317d48b0..00000000 --- a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html +++ /dev/null @@ -1,55 +0,0 @@ - -
    - -
    -
    - Report Time: - - - -
    -
    -
    - - - - NO - Source Name - Event Name - ReportingEntityName - Report Time - Action - - - - - - {{i+1}} - {{item.sourceName}} - {{item.eventName}} - {{item.reportingEntityName}} - {{item.startEpochMicrosec | date:'yyyy-MM-dd HH:mm:ss'}} - - - - - -
    -
    \ No newline at end of file diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.less b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.less deleted file mode 100644 index 24e92fbd..00000000 --- a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.less +++ /dev/null @@ -1,137 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -.content { - .title { - border-radius: 5px 5px 0 0; - background-color: #fff; - height: 106px; - border-bottom: 1px solid #f0f0f0; - margin-bottom: 0; - ul { - display: flex; - display: -webkit-flex; - justify-content: space-around; - align-items: center; - padding: 0; - margin: 0; - height: 100%; - li { - list-style: none; - padding-left: 32px; - width: 100%; - border-left: 1px solid #eceff4; - h5 { - font: 500 14px "Arial"; - color: #3d4d65; - } - p { - font: 500 24px "Arial"; - color: #3fa8eb; - margin-bottom: 0; - } - } - li:nth-child(1){ - border: none; - } - } - } - .chart { - // background-color: #fff; - position: relative; - border-radius: 5px; - margin-bottom: 20px; - height: 70px; - .select { - padding: 20px 20px 20px 0px; - width: 70%; - float: left; - span { - display: inline-block; - font: 700 14px "Arial"; - color: #4c5e70; - } - .search { - margin-left: 20px; - height: 30px; - padding: 0 10px; - span { - color: #fff; - font-weight: 400; - } - } - // nz-dropdown { - // margin-right: 20px; - // a { - // font: 700 12px "Arial"; - // color: #3d4d65; - // &:hover { - // color: #3fa8eb; - // } - // } - // } - } - // .AlarmChart { - // // height: 0px; - // // border-bottom: 1px solid #f5f5f5; - // // transition: all 0.3s linear; - // width: 25%; - // padding-top: 7px; - // float: left; - // } - // .alarmChart-active { - // height: 386px; - // } - // .open-close { - // width: 50px; - // height: 25px; - // position: absolute; - // left: 50%; - // bottom: 0px; - // transform: translate(-25px,0); - // border: none; - // outline: none; - // cursor: pointer; - // background-color: #fff; - // background: url(../../../assets/images/open-close.png) no-repeat center -27px; - // &:hover { - // background: url(../../../assets/images/open-close.png) no-repeat center -79px; - // } - // } - // .open-close-active { - // background: url(../../../assets/images/open-close.png) center -1px; - // &:hover { - // background: url(../../../assets/images/open-close.png) no-repeat center -53px; - // } - // } - } - .tablelist { - background-color: #fff; - padding: 24px 10px 0px; - border-radius: 0 0 5px 5px; - .action{ - padding: 10px 0 0 20px; - .details{ - display: inline-block; - width: 16px; - height: 16px; - background: url(../../../assets/images/icon.png) center -113px; - &:hover { - background: url(../../../assets/images/icon.png) no-repeat center -128px; - } - } - } - } -} \ No newline at end of file diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.spec.ts b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.spec.ts deleted file mode 100644 index 013db38a..00000000 --- a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { GraphiclistComponent } from './graphiclist.component'; - -describe('GraphiclistComponent', () => { - let component: GraphiclistComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ GraphiclistComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(GraphiclistComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts deleted file mode 100644 index ccffac08..00000000 --- a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts +++ /dev/null @@ -1,78 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core'; -import { HomesService } from '../../homes.service'; -import * as addDays from 'date-fns/add_days'; -import { DatePipe } from "@angular/common" - -@Component({ - selector: 'app-graphiclist', - templateUrl: './graphiclist.component.html', - styleUrls: ['./graphiclist.component.less'], - providers: [DatePipe] -}) -export class GraphiclistComponent implements OnInit { - public startTime: string =''; - public endTime: string = ''; - public currentPage: number = 1; - public pageSize: number = 10; - list: any; - constructor( private datePipe: DatePipe, - private myhttp: HomesService) { } - isVisibleMiddle = false; - - showModalMiddle(): void { - this.isVisibleMiddle = true; - } - handleOkMiddle(): void { - // console.log('click ok'); - this.isVisibleMiddle = false; - } - handleCancelMiddle(): void { - this.isVisibleMiddle = false; - } - - ngOnInit() { - } - ngOnChanges(changes){ - this.getPerformanceFormData(); - } - getPerformanceFormData() { - this.myhttp.getPerformanceFormData(this.currentPage, this.pageSize, this.vnfname, this.startTime, this.endTime).subscribe((data) => { - this.list = data.performances; - }) - } - // Date screening - dateRange = [ addDays(new Date(), -30), new Date() ]; - - onChange(result: Date): void { - this.startTime = this.datePipe.transform(result[0], 'yyyy-MM-dd HH:mm:ss'); - this.endTime = this.datePipe.transform(result[1], 'yyyy-MM-dd HH:mm:ss'); -} - sort(e){ - } - @Input () vnfname; - @Output() detailData = new EventEmitter(); - detailShow(id){ - let prems = { - id:id, - detailShow: true - } - this.detailData.emit(prems); - - } - -} diff --git a/usecaseui-portal/src/app/components/performance-details/performance-details.component.css b/usecaseui-portal/src/app/components/performance-details/performance-details.component.css deleted file mode 100644 index 0b5493d7..00000000 --- a/usecaseui-portal/src/app/components/performance-details/performance-details.component.css +++ /dev/null @@ -1,104 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -.content .header { - background-color: #fff; - border-radius: 5px; - padding: 30px 28px 0; - position: relative; - margin-bottom: 30px; - border: 1px solid #e4e4e4; -} -.content .header hr { - margin: 0; - border: none; - height: 1px; - background-color: #e4e4e4; -} -.content .header h2 { - font: 700 24px/18px 'Times New Roman'; - color: #3fa8eb; - text-align: center; - margin-bottom: 27px; -} -.content .header span.tildeimg { - position: absolute; - left: 50%; - top: 71px; - width: 60px; - height: 10px; - transform: translate(-30px, 0); - background: url(../../../assets/images/tildeimg.png) no-repeat center center; - background-color: #fff; -} -.content .header .headerlist { - display: flex; -} -.content .header .headerlist div { - width: 100%; -} -.content .header .headerlist div p { - font: 400 14px 'Arial'; - color: #323437; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - margin: 18px 0 15px; -} -.content .header .headerlist div p span { - display: inline-block; - width: 50%; - text-align: right; - font: 700 14px 'Arial'; - color: #3fa8eb; -} -.content hr { - margin: 0; - border: none; - height: 1px; - background-color: #e4e4e4; -} -.content button { - width: 88px; - height: 22px; - position: absolute; - left: 50%; - transform: translate(-44px, 0); - border: none; - outline: none; - cursor: pointer; - background-color: #fff; - background: url(../../../assets/images/open-close2.png) no-repeat center -22px; -} -.content button:hover { - background: url(../../../assets/images/open-close2.png) no-repeat center -66px; -} -.content .buttonActive { - transform: translate(-44px, -22px); - background: url(../../../assets/images/open-close2.png) no-repeat center 0px; -} -.content .buttonActive:hover { - background: url(../../../assets/images/open-close2.png) no-repeat center -44px; -} -.content h2.detailtitle { - font: 700 24px/18px 'Times New Roman'; - color: #3fa8eb; - text-align: center; - margin-bottom: 15px; - padding-top: 25px; -} -.content .detailInformatioin { - overflow: hidden; -} diff --git a/usecaseui-portal/src/app/components/performance-details/performance-details.component.html b/usecaseui-portal/src/app/components/performance-details/performance-details.component.html deleted file mode 100644 index a5d44a7f..00000000 --- a/usecaseui-portal/src/app/components/performance-details/performance-details.component.html +++ /dev/null @@ -1,61 +0,0 @@ - -
    -
    -

    HEADER INFORMATION

    -
    -
    -
    -

    Version :{{datailheaderdata.version}}

    -

    Domain :{{datailheaderdata.domain}}

    -

    EventType :{{datailheaderdata.eventType}}

    -

    Event Name :{{datailheaderdata.eventName}}

    -

    Event Id :{{datailheaderdata.eventId}}

    -

    NfcNamingCode :{{datailheaderdata.nfcNamingCode}}

    - - -
    -
    -

    NfNamingCode :{{datailheaderdata.nfNamingCode}}

    -

    SourceName :{{datailheaderdata.sourceName}}

    -

    SourceId :{{datailheaderdata.sourceId}}

    -

    ReportingEntityName :{{datailheaderdata.reportingEntityName}}

    -

    ReportingEntityId :{{datailheaderdata.reportingEntityId}}

    -

    ReportTime :{{datailheaderdata.reportTime}}

    -
    -
    -
    -
    - -

    DETAIL INFORMATION

    -
    - - - - Item Name - Item Value - - - - - {{data.name}} - {{data.value}} - - - -
    -
    - \ No newline at end of file diff --git a/usecaseui-portal/src/app/components/performance-details/performance-details.component.less b/usecaseui-portal/src/app/components/performance-details/performance-details.component.less deleted file mode 100644 index c1ca74f5..00000000 --- a/usecaseui-portal/src/app/components/performance-details/performance-details.component.less +++ /dev/null @@ -1,110 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -.content { - .header { - background-color: #fff; - border-radius: 5px; - padding: 30px 28px 0; - position: relative; - margin-bottom: 30px; - border: 1px solid #e4e4e4; - hr { - margin: 0; - border: none; - height: 1px; - background-color: #e4e4e4; - } - h2 { - font: 700 24px/18px 'Times New Roman'; - color: #3fa8eb; - text-align: center; - margin-bottom: 27px; - } - span.tildeimg { - position: absolute; - left: 50%; - top: 71px; - width: 60px; - height: 10px; - transform: translate(-30px,0); - background: url(../../../assets/images/tildeimg.png) no-repeat center center; - background-color: #fff; - } - .headerlist { - display: flex; - div { - width: 100%; - p { - font: 400 14px 'Arial'; - color: #323437; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - margin: 18px 0 15px; - span { - display: inline-block; - width: 50%; - text-align: right; - font: 700 14px 'Arial'; - color: #3fa8eb; - } - } - } - } - } - hr { - margin: 0; - border: none; - height: 1px; - background-color: #e4e4e4; - } - button { - width: 88px; - height: 22px; - position: absolute; - left: 50%; - transform: translate(-44px,0); - border: none; - outline: none; - cursor: pointer; - background-color: #fff; - background: url(../../../assets/images/open-close2.png) no-repeat center -22px; - &:hover { - background: url(../../../assets/images/open-close2.png) no-repeat center -66px; - } - } - .buttonActive { - transform: translate(-44px,-22px); - background: url(../../../assets/images/open-close2.png) no-repeat center -0px; - &:hover { - background: url(../../../assets/images/open-close2.png) no-repeat center -44px; - } - } - h2.detailtitle { - font: 700 24px/18px 'Times New Roman'; - color: #3fa8eb; - text-align: center; - margin-bottom: 15px; - padding-top: 25px; - } - .detailInformatioin { - // transition: all 0.3s linear; - overflow: hidden; - } - .detailshow { - - } -} \ No newline at end of file diff --git a/usecaseui-portal/src/app/components/performance-details/performance-details.component.spec.ts b/usecaseui-portal/src/app/components/performance-details/performance-details.component.spec.ts deleted file mode 100644 index 11f4abd2..00000000 --- a/usecaseui-portal/src/app/components/performance-details/performance-details.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { PerformanceDetailsComponent } from './performance-details.component'; - -describe('PerformanceDetailsComponent', () => { - let component: PerformanceDetailsComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ PerformanceDetailsComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(PerformanceDetailsComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/usecaseui-portal/src/app/components/performance-details/performance-details.component.ts b/usecaseui-portal/src/app/components/performance-details/performance-details.component.ts deleted file mode 100644 index b8835739..00000000 --- a/usecaseui-portal/src/app/components/performance-details/performance-details.component.ts +++ /dev/null @@ -1,57 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -import { Component, OnInit, Input } from '@angular/core'; -import { slideUpDown } from '../../animates'; -import { HomesService } from '../../homes.service'; - -@Component({ - selector: 'app-performance-details', - templateUrl: './performance-details.component.html', - styleUrls: ['./performance-details.component.less'], - animations: [ slideUpDown ] -}) -export class PerformanceDetailsComponent implements OnInit { - - - constructor(private myhttp:HomesService) { } - - ngOnInit() { - - } - - ngOnChanges(changes){ - console.log(this.detailId) - this.getPerformanceHeaderDetail(this.detailId); - } - datailheaderdata: any = {}; - dataillistdata: any = []; - getPerformanceHeaderDetail(id){ - if(id){ - this.myhttp.getPerformanceHeaderDetail(id).subscribe((data)=>{ - console.log(data) - this.datailheaderdata = data.performanceHeader; - this.dataillistdata = data.list; - }) - } - } - moredetailShow = false; - @Input() detailId; - state = 'up' - slideUpDown(){ - this.moredetailShow = !this.moredetailShow; - this.state = this.state === 'up' ? 'down' : 'up'; - } -} diff --git a/usecaseui-portal/src/app/core/models/dataInterface.ts b/usecaseui-portal/src/app/core/models/dataInterface.ts new file mode 100644 index 00000000..e092bd03 --- /dev/null +++ b/usecaseui-portal/src/app/core/models/dataInterface.ts @@ -0,0 +1,57 @@ +enum baseUrl{ + baseUrl = '/api/usecaseui-server/v1' //online + // baseUrl = 'http://172.19.44.223/api/usecaseui-server/v1' //local one + // baseUrl = 'http://10.73.191.100:8082' //local two +} +interface homeData { + services:{ + number:number, + chartdata:Object[] + }, + performance:{ + per_Vnf:number, + per_VmPm:number + }, + alarm:{ + chartdata:Object[] + }, + Vm_performance:{ + names:string[] + } +}; + +interface homeVmLineData { + CPU:number[], + Memory:number[] +} + +interface servicesSelectData { + customer:string[], + serviceType:string[] +} + +interface servicesTableData { + total:number, + tableList:string[] +} + +interface creatensData { + total:number, + tableList:string[] +} + +interface onboardTableData { + total:number, + tableList:string[] +} + +interface onboardDataVNF { + total:number, + tableList:string[] +} + +interface onboardDataPNF { + total:number, + tableList:string[] +} +export {homeData, homeVmLineData, servicesSelectData, servicesTableData, creatensData, onboardTableData, onboardDataVNF, onboardDataPNF , baseUrl} diff --git a/usecaseui-portal/src/app/core/services/homes.service.spec.ts b/usecaseui-portal/src/app/core/services/homes.service.spec.ts new file mode 100644 index 00000000..9c03dcb2 --- /dev/null +++ b/usecaseui-portal/src/app/core/services/homes.service.spec.ts @@ -0,0 +1,15 @@ +import { TestBed, inject } from '@angular/core/testing'; + +import { HomesService } from './homes.service'; + +describe('HomesService', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [HomesService] + }); + }); + + it('should be created', inject([HomesService], (service: HomesService) => { + expect(service).toBeTruthy(); + })); +}); diff --git a/usecaseui-portal/src/app/core/services/homes.service.ts b/usecaseui-portal/src/app/core/services/homes.service.ts new file mode 100644 index 00000000..8d3f4684 --- /dev/null +++ b/usecaseui-portal/src/app/core/services/homes.service.ts @@ -0,0 +1,131 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { Injectable } from '@angular/core'; +import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http'; +import { Observable } from 'rxjs/Observable'; +import { homeData, homeVmLineData, servicesSelectData, servicesTableData, creatensData, onboardTableData, onboardDataVNF, onboardDataPNF, baseUrl } from '../models/dataInterface'; + +@Injectable() +export class HomesService { + + constructor(private http: HttpClient) { } + baseUrl = baseUrl.baseUrl; + baseUrlbar = baseUrl.baseUrl + "/uui-lcm/"; + url = { + home_serviceData: this.baseUrl + "/uui-lcm/serviceNumByCustomer", + home_performanceData: this.baseUrl + "/performance/queryAllSourceNames", + home_alarmData: this.baseUrl + "/alarm/statusCount", + home_alarmChartData: this.baseUrl + "/alarm/diagram", + home_servicebarData: this.baseUrl + "", + home_servicebarnsData: this.baseUrlbar + "ns-packages", + home_servicebarvnfData: this.baseUrlbar + "vnf-packages", + home_servicebarpnfData: this.baseUrlbar + "pnf-packages", + sourceNames: this.baseUrl + "/alarm/getSourceNames", + listSortMasters: this.baseUrl + "/listSortMasters", + currentLanguage: "/api/portal-auxapi/languageSetting/user/", + } + + // Time formatting milliseconds to normal + dateformater(vmstime) { + if (!vmstime) { + return '' + } + let mstime = Number((vmstime + '').slice(0, 13)); + let time = new Date(mstime); + let year = time.getFullYear(); + let month = time.getMonth() + 1; + let day = time.getDate(); + let hours = time.getHours(); + let minutes = time.getMinutes(); + let seconds = time.getSeconds(); + let formattime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds; + return formattime; + } + + + // home + getHomeServiceData() { + return this.http.get(this.url.home_serviceData); + } + getHomePerformanceData() { + return this.http.get(this.url.home_performanceData); + } + getHomeAlarmData() { + return this.http.get(this.url.home_alarmData); + } + getHomeAlarmChartData(paramsObj) { + let params = new HttpParams({ fromObject: paramsObj }); + return this.http.get(this.url.home_alarmChartData, { params }); + } + + getHomeServiceBarData() { + return this.http.get(this.url.home_servicebarData); + } + getHomeServiceBarNsData() { + return this.http.get(this.url.home_servicebarnsData); + } + getHomeServiceBarVnfData() { + return this.http.get(this.url.home_servicebarvnfData); + } + getHomeServiceBarPnfData() { + return this.http.get(this.url.home_servicebarpnfData); + } + + // alarm data + getAlarmFormData(currentPage: number, pageSize: number, sourceName?: string, priority?: string, startTime?: string, endTime?: string, vfStatus?: string) { + return this.http.get(this.baseUrl + '/alarm/' + '/' + currentPage + '/' + pageSize + '?sourceName=' + sourceName + '&priority=' + priority + '&startTime=' + startTime + '&endTime=' + endTime + '&vfStatus=' + vfStatus); + } + + getSourceNames() { + return this.http.get(this.baseUrl + '/alarm/getSourceNames/'); + } + + getstatuscount() { + let httpurl = this.baseUrl + '/alarm/statusCount'; + return this.http.get(httpurl); + } + getAlarmDetailData(id) { + let httpurl = this.baseUrl + '/alarm/getAlarmsHeaderDetail/' + id; + return this.http.get(httpurl); + } + + // performance data + getqueryAllSourceNames() { + let httpurl = this.baseUrl + "/performance/queryAllSourceNames"; + return this.http.get(httpurl); + } + getperformanceSourceNames(currentPage: number, pageSize: number, sourceName: string) { + let httpurl = this.baseUrl + "/performanceSsourceNames" + "/" + currentPage + "/" + pageSize + "?sourceName=" + sourceName; + return this.http.get(httpurl); + } + getPerformanceFormData(currentPage: number, pageSize: number, sourceName?: string, startTime?: string, endTime?: string) { + return this.http.get(this.baseUrl + '/performance' + '/' + currentPage + '/' + pageSize + '?sourceName=' + sourceName + '&startTime=' + startTime + '&endTime=' + endTime); + } + getPerformanceHeaderDetail(id) { + let httpurl = this.baseUrl + '/performance/getPerformanceHeaderDetail/' + id; + return this.http.get(httpurl); + } + + + getListSortMasters() { + return this.http.get(this.url.listSortMasters); + } + + getCurrentLanguage(currentloginId) { + let url = this.url.currentLanguage + currentloginId; + return this.http.get(url); + } +} diff --git a/usecaseui-portal/src/app/core/services/managemencs.service.ts b/usecaseui-portal/src/app/core/services/managemencs.service.ts new file mode 100644 index 00000000..a28885d8 --- /dev/null +++ b/usecaseui-portal/src/app/core/services/managemencs.service.ts @@ -0,0 +1,91 @@ +import { Injectable } from '@angular/core'; +import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http'; +import { Observable } from 'rxjs/Observable'; +import { baseUrl } from '../models/dataInterface'; + + +@Injectable() +export class ManagemencsService { + + constructor(private http: HttpClient) { } + baseUrl = baseUrl.baseUrl; + + + + + /* line up */ + url = { + customers: this.baseUrl + "/uui-lcm/customers", /* get */ + serviceType: this.baseUrl + "/uui-lcm/customers/" + "*_*" + "/service-subscriptions", /* get */ + CustomersPir: this.baseUrl + "/uui-lcm/serviceNumByCustomer", /* get */ + CustomersColumn: this.baseUrl + "/uui-lcm/serviceNumByServiceType/" + "*_*", /* get */ + createCustomer: this.baseUrl + "/uui-lcm/customers/", /* put */ + createServiceType: this.baseUrl + "/uui-lcm/customers/*_*/service-subscriptions/*+*", /* put */ + getCustomerresourceVersion: this.baseUrl + "/uui-lcm/customers/*_*", /* put */ + deleteCustomer: this.baseUrl + "/uui-lcm/customers?customerId=*_*&resourceVersion=*+*", + getServiceTypeResourceVersion: this.baseUrl + "/uui-lcm/customers/*_*/service-subscriptions/*+*", + deleteServiceType: this.baseUrl + "/uui-lcm/customers/*_*/service-subscriptions/*+*?resourceVersion=*@* ", + }; + + + // Get all customers + getAllCustomers() { + return this.http.get(this.url.customers); + } + // get all servicetype + getServiceTypes(customer) { + let url = this.url.serviceType.replace("*_*", customer.id); + console.log(url) + return this.http.get(url); + } + // get Customer Pir + getCustomersPie() { + return this.http.get(this.url.CustomersPir); + } + // get Customer ber + getCustomersColumn(customer) { + let url = this.url.CustomersColumn.replace("*_*", customer.id); + return this.http.get(url); + } + // create New Customer + createCustomer(customer, createParams) { + let url = this.url.createCustomer + customer; + // return this.http.get(url, createParams);//location + return this.http.put(url, createParams);//online + } + + createServiceType(createParams) { + let customerId = createParams.customer.id, + ServiceType = createParams.ServiceType; + let url = this.url.createServiceType.replace("*_*", customerId).replace("*+*", ServiceType); + // return this.http.get(url,createParams);//location + return this.http.put(url, createParams);//online + } + + getdeleteCustomerVersion(thisdeleteCustomer) { + let url = this.url.getCustomerresourceVersion.replace("*_*", thisdeleteCustomer.id); + return this.http.get(url); + } + + deleteSelectCustomer(params) { + let customerId = params.customerId, + version = params.version; + let url = this.url.deleteCustomer.replace("*_*", customerId).replace("*+*", version); + return this.http.delete(url); + } + + getdeleteServiceTypeVersion(params) { + let customerId = params.customerId.id, + ServiceType = params.ServiceType; + let url = this.url.getServiceTypeResourceVersion.replace("*_*", customerId).replace("*+*", ServiceType); + return this.http.get(url); + } + + deleteSelectServiceType(params) { + let customerId = params.customerId.id, + ServiceType = params.ServiceType, + version = params.version; + let url = this.url.deleteServiceType.replace("*_*", customerId).replace("*+*", ServiceType).replace("*@*", version); + return this.http.delete(url); + } +} diff --git a/usecaseui-portal/src/app/core/services/myhttp.service.ts b/usecaseui-portal/src/app/core/services/myhttp.service.ts new file mode 100644 index 00000000..9ed75b00 --- /dev/null +++ b/usecaseui-portal/src/app/core/services/myhttp.service.ts @@ -0,0 +1,235 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { Injectable } from '@angular/core'; +import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http'; +import { Observable } from 'rxjs/Observable'; +import { homeData, homeVmLineData, servicesSelectData, servicesTableData, creatensData, onboardTableData, onboardDataVNF, onboardDataPNF, baseUrl } from '../models/dataInterface'; + +@Injectable() +export class MyhttpService { + + constructor(private http: HttpClient) { } + baseUrl = baseUrl.baseUrl; + url = { + listSortMasters: this.baseUrl + "/listSortMasters", + customers: this.baseUrl + "/uui-lcm/customers", + orchestrators: this.baseUrl + "/uui-lcm/orchestrators", + serviceType: this.baseUrl + "/uui-lcm/customers/" + "*_*" + "/service-subscriptions", + servicesTableData: this.baseUrl + '/uui-lcm/service-instances', + serviceTemplates: this.baseUrl + "/uui-lcm/service-templates", + templateParameters: this.baseUrl + "/uui-lcm/fetchCCVPNTemplateData/*_*", + e2etemplateParameters: this.baseUrl + "/uui-lcm/service-templates/" + "*_*" + "?toscaModelPath=", + nstemplateParameters: this.baseUrl + "/uui-lcm/fetchNsTemplateData", + vimInfo: this.baseUrl + "/uui-lcm/locations/", + sdnControllers: this.baseUrl + "/uui-lcm/sdnc-controllers/", + addressData: this.baseUrl + "/uui-sotn/getOssInvenory", + createService: this.baseUrl + "/uui-lcm/services", + ns_createService: this.baseUrl + "/uui-lcm/createNetworkServiceInstance", + ns_createService2: this.baseUrl + "/uui-lcm/instantiateNetworkServiceInstance", + deleteService: this.baseUrl + "/uui-lcm/services/", + ns_deleteService: this.baseUrl + "/uui-lcm/deleteNetworkServiceInstance?ns_instance_id=", + ns_stopService: this.baseUrl + "/uui-lcm/terminateNetworkServiceInstance?ns_instance_id=", + ns_healService: this.baseUrl + "/uui-lcm/healNetworkServiceInstance?ns_instance_id=", + vnfInfo: this.baseUrl + "/uui-lcm/VnfInfo/", + progress: this.baseUrl + "/uui-lcm/services/" + "*_*" + "/operations/", + nsProgress: this.baseUrl + "/uui-lcm/jobs/getNsLcmJobStatus/" + "*_*" + "?responseId=0&serviceInstanceId=", + e2eScale: this.baseUrl + "/services/scaleServices/", + e2e_nsdata: this.baseUrl + "/getServiceInstanceById/customerId/", + updateccvpn: this.baseUrl + "/uui-lcm/services/updateService/", + + allottedResource: this.baseUrl + "/uui-sotn/getAllottedResources", + pnfDetail: this.baseUrl + "/uui-sotn/getPnfInfo/", + connectivity: this.baseUrl + "/uui-sotn/getConnectivityInfo/", + vpnBinding: this.baseUrl + "/uui-sotn/getPinterfaceByVpnId/", + } + + // serviceTable list + getServicesTableData(paramsObj): Observable> { + let params = new HttpParams({ fromObject: paramsObj }); + return this.http.get(this.url.servicesTableData, { observe: 'response', params }); + } + + //--------------------------------------------------------------------------------- + + // Get all customers + getAllCustomers() { + return this.http.get(this.url.customers); + } + + // Get all Orchestrators + getAllOrchestrators() { + return this.http.get(this.url.orchestrators); + } + + // Get relevant serviceType + getServiceTypes(customer) { + let url = this.url.serviceType.replace("*_*", customer.id); + return this.http.get(url); + } + + + // Get all template types + getAllServiceTemplates(type) { + if (type == "Network Service") { + let nsUrl = this.url.serviceTemplates.replace("service-templates", "listNsTemplates").replace("serviceTemplates2", "serviceTemplates-ns"); + console.log(nsUrl); + return this.http.get(nsUrl); + } + return this.http.get(this.url.serviceTemplates); + } + + + //Get template input parameters + getTemplateParameters(type, template) { + // let url = this.url.templateParameters.replace("*_*",type) + template.toscaModelURL; //Local simulation + if (type == "ns") { + let body = { + csarId: template.id, + inputs: "" + }; + return this.http.post(this.url.nstemplateParameters, body); + } else if (type == "e2e") { + let url = this.url.e2etemplateParameters.replace("*_*", template.uuid) + template.toscaModelURL; + return this.http.get(url); + } else { + let body = { + csarId: template.uuid, + packageType: "Service", + inputs: "" + }; + let url = this.url.templateParameters.replace("*_*", template.uuid); + return this.http.post(url, body); + } + } + + getVimInfo() { + return this.http.get(this.url.vimInfo); + }; + getSdnControllers() { + return this.http.get(this.url.sdnControllers); + } + + // Create interface + createInstance(requestBody, createParams) { + // return this.http.get(this.url.createService + createParams); //Local simulation + return this.http.post(this.url.createService + createParams, requestBody); + } + nsCreateInstance(requestBody) { + // return this.http.get(this.url.ns_createService); //Local simulation + return this.http.post(this.url.ns_createService, requestBody); + } + nsCreateInstance2(params, requestBody) { + // return this.http.get(this.url.ns_createService2 + params); //Local simulation + return this.http.post(this.url.ns_createService2 + params, requestBody); + } + + updateccvpn(id, requestBody) { + console.log(id); + console.log(requestBody); + //return this.http.get(this.url.updateccvpn + id); //local + return this.http.put(this.url.updateccvpn + id, requestBody);// online + } + // Delete interface + deleteInstance(obj) { + let httpOptions = { + headers: new HttpHeaders({ + 'Content-Type': 'application/json', + 'Accept': 'application/json', + 'Authorization': 'Basic SW5mcmFQb3J0YWxDbGllbnQ6cGFzc3dvcmQxJA==' + }), + body: { + 'globalSubscriberId': obj.globalSubscriberId, + 'serviceType': obj.serviceType.name + } + }; + // return this.http.get(this.url.deleteService); //Local simulation + return this.http.delete(this.url.deleteService + obj.serviceInstanceId, httpOptions); + } + nsDeleteInstance(id) { + // return this.http.get(this.url.ns_deleteService); //Local simulation + return this.http.delete(this.url.ns_deleteService + id); + } + stopNsService(id, requestBody) { //You need to terminate before deleting + // return this.http.get(this.url.ns_stopService); //Local simulation + return this.http.post(this.url.ns_stopService + id, requestBody); + } + + getVnfInfo(id) { + return this.http.get(this.url.vnfInfo + id); + } + healNsService(id, requestBody) { + // return this.http.get(this.url.ns_healService); //Local simulation + return this.http.post(this.url.ns_healService + id, requestBody); + } + + // scale + scaleE2eService(id, requestBody) { + // return this.http.get(this.url.e2eScale + id); + return this.http.post(this.url.e2eScale + id, requestBody); + } + getE2e_nsData(paramsObj) { + let params = new HttpParams({ fromObject: paramsObj }); + return this.http.get(this.url.e2e_nsdata, { params }); + } + + // Query progress interface + getProgress(obj) { + let url = this.url.progress.replace("*_*", obj.serviceId) + obj.operationId + "?operationType=" + obj.operationType; + return this.http.get(url); + } + getNsProgress(jobid, serviceId, operationType) { + let url = this.url.nsProgress.replace("*_*", jobid) + serviceId + "&operationType=" + operationType; + return this.http.get(url); + } + + // Get allotted-resource to get tp and pnf values + getAllottedResource(obj) { + let params = new HttpParams({ fromObject: obj }); + let url = this.url.allottedResource; + return this.http.get(url, { params }); + } + //Get the corresponding domain (network-resource) by pnf value + getPnfDetail(name) { + let url = this.url.pnfDetail + name; + return this.http.get(url); + } + //Get connectivity by sotn, find vpn-id + getSotnConnectivity(id) { + let url = this.url.connectivity + id; + return this.http.get(url); + } + //Find tp and pnf by vpn-id + getVpnBinding(id) { + let url = this.url.vpnBinding + id; + return this.http.get(url); + } + // Time formatting milliseconds to normal + dateformater(vmstime) { + if (!vmstime) { + return '' + } + let mstime = Number((vmstime + '').slice(0, 13)); + let time = new Date(mstime); + let year = time.getFullYear(); + let month = time.getMonth() + 1; + let day = time.getDate(); + let hours = time.getHours(); + let minutes = time.getMinutes(); + let seconds = time.getSeconds(); + let formattime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds; + return formattime; + } +} diff --git a/usecaseui-portal/src/app/core/services/networkHttpservice.service.ts b/usecaseui-portal/src/app/core/services/networkHttpservice.service.ts new file mode 100644 index 00000000..8af6d292 --- /dev/null +++ b/usecaseui-portal/src/app/core/services/networkHttpservice.service.ts @@ -0,0 +1,122 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { Injectable } from '@angular/core'; +import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http'; +import { baseUrl } from '../models/dataInterface'; + + +@Injectable() +export class networkHttpservice { + + constructor(private http: HttpClient) { } + + // baseUrl = "./assets/json/";//Local environment + // url={ + // "getNetworkD3Data":this.baseUrl + "netWorkD3Data.json", + // "getLogicalLinksData":this.baseUrl + "LogicalLinksData.json", + // "getPInterfacesData1":this.baseUrl + "netWorkD3Data.json", + // "getPInterfacesData2":this.baseUrl + "p_interfaces1.json", + // "createLink":this.baseUrl + "status.json", + // "querySpecificLinkInfo":this.baseUrl + "specific_link _nfo.json", + // "queryCloudUrl":this.baseUrl + "url.json", + // "createNetwrok":this.baseUrl + "status.json", + // "createPnf":this.baseUrl + "status.json", + // "createTp":this.baseUrl + "status.json", + // "createCloudLink":this.baseUrl + "status.json", + // "createCloudUrl":this.baseUrl + "status.json", + // "deleteLink":this.baseUrl + "status.json", + // }; + // baseUrl = "http://10.73.242.244:8082/uui-sotn/";//Online environment + // baseUrl = "http://172.19.44.223/api/usecaseui-server/v1/uui-sotn/";//Online environment + baseUrl = baseUrl.baseUrl + "/uui-sotn/";//Online environment + url = { + "getNetworkD3Data": this.baseUrl + "getNetWorkResources", + "getLogicalLinksData": this.baseUrl + "getLogicalLinks", + "getPInterfacesData1": this.baseUrl + "getPinterfaceByPnfName/", + "getPInterfacesData2": this.baseUrl + "getPinterfaceByPnfName/", + "createLink": this.baseUrl + "createLink/", + "querySpecificLinkInfo": this.baseUrl + "getSpecificLogicalLink/", + "queryCloudUrl": this.baseUrl + "getHostUrl/", + "queryExtAAIIdVersion": this.baseUrl + "getExtAaiId/", + "createNetwrok": this.baseUrl + "createTopoNetwork/", + "createPnf": this.baseUrl + "createPnf/", + "createTp": this.baseUrl + "pnf/", + "createCloudLink": this.baseUrl + "createLink/", + "createCloudUrl": this.baseUrl + "createHostUrl/", + "deleteLink": this.baseUrl + "deleteLink/", + "deleteCloud": this.baseUrl + "deleteExtNetWork" + }; + //d3data + getNetworkD3Data() { + return this.http.get(this.url["getNetworkD3Data"]); + } + //Initialize the connection logical-links + getLogicalLinksData() { + return this.http.get(this.url["getLogicalLinksData"]); + } + //Query the tp data corresponding to the specified node + getPInterfacesData1(paramsObj) { + return this.http.get(this.url['getPInterfacesData1'] + paramsObj["pnfName"]); + } + getPInterfacesData2(paramsObj) { + return this.http.get(this.url["getPInterfacesData2"] + paramsObj["pnfName"]); + } + //Create a connection interface + createLink(paramsObj) { + return this.http.put(this.url["createLink"] + paramsObj["link-name"], paramsObj); + } + //Query the specified single cable interface + querySpecificLinkInfo(paramsObj) { + return this.http.get(this.url["querySpecificLinkInfo"] + paramsObj["link-name"]); + } + //Query external cloud host this.url address interface + queryCloudUrl(aaiId) { + return this.http.get(this.url["queryCloudUrl"] + aaiId); + } + queryExtAAIIdVersion(aaiId) { + return this.http.get(this.url["queryExtAAIIdVersion"] + aaiId); + } + //Create an external cloud newwork interface + createNetwrok(paramsObj) { + return this.http.put(this.url["createNetwrok"] + paramsObj["network-id"], paramsObj); + } + //Create an external cloud pnf interface + createPnf(paramsObj) { + return this.http.put(this.url["createPnf"] + paramsObj["pnf-name"], paramsObj); + } + //Create an external cloud Tp interface + createTp(paramsObj, cloudNodeName) { + let str = cloudNodeName + "/p-interfaces/p-interface/" + paramsObj["interface-name"] + "/createTerminationPoint"; + return this.http.put(this.url["createTp"] + str, paramsObj); + } + //Create an external cloud link interface + createCloudLink(paramsObj) { + return this.http.put(this.url["createCloudLink"] + paramsObj["link-name"], paramsObj); + } + //Create an external cloud host url interface + createCloudUrl(paramsObj) { + return this.http.put(this.url["createCloudUrl"] + paramsObj["aai-id"], paramsObj); + } + //Delete connection + deleteLink(paramsObj) { + let str = paramsObj["logical-link"] + "/" + paramsObj["resource-version"]; + return this.http.delete((this.url["deleteLink"] + str)); + } + deleteCloudLink(paramsObj) { + let str = "?extNetworkId=" + paramsObj["aaiId"] + "&resourceVersion=" + paramsObj["version"]; + return this.http.delete((this.url["deleteCloud"] + str)); + } +} diff --git a/usecaseui-portal/src/app/core/services/onboard.service.ts b/usecaseui-portal/src/app/core/services/onboard.service.ts new file mode 100644 index 00000000..fb5107b4 --- /dev/null +++ b/usecaseui-portal/src/app/core/services/onboard.service.ts @@ -0,0 +1,182 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { Injectable } from '@angular/core'; +import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http'; +import { Observable } from 'rxjs/Observable'; +import { onboardTableData, onboardDataVNF, onboardDataPNF, baseUrl } from '../models/dataInterface'; + +@Injectable() +export class onboardService { + constructor(private http: HttpClient) { } + /* location */ + // baseUrl = "./assets/json"; + // url = { + // // list data + // onboardTableData: this.baseUrl + "/onboard-vnf-mf/onboardTableData.json", + // onboardDataVNF: this.baseUrl + "/onboard-vnf-mf/onboardDataVNF.json", + // onboardDataPNF: this.baseUrl + "/onboard-vnf-mf/onboardDataPNF.json", + // //ns sdc + // sdc_nsListData: this.baseUrl + "/onboard-vnf-mf/listData/SDC_NS.json", + // // vnf sdc + // sdc_vnfListData: this.baseUrl + "/onboard-vnf-mf/listData/SDC_VNF.json", + + + // //create nspackages + // creatensData: this.baseUrl + "/onboard-vnf-mf/_jsonData.json", + + // //onboard ns sdc data + // onboardNs: this.baseUrl + "/onboard-vnf-mf/listData/onboardNs.json", + // //onboard VNF sdc data + // onboardVNF: this.baseUrl + "/onboard-vnf-mf/listData/onboardVNF.json", + + // // Delete ns package + // deleteNspack: this.baseUrl + "/onboard-vnf-mf/listData/deleteNspack.json", + // // Delete ns sdc package + // // deleteNssdcData: this.baseUrl + "/onboard-vnf-mf/listData/deleteNssdcData.json", + + // // Delete Vnf vfc package + // deleteVnfPack: this.baseUrl + "/onboard-vnf-mf/listData/deleteVnfPack.json", + // // Delete Vnf sdc package + // // deleteVnfsdcData: this.baseUrl + "/onboard-vnf-mf/listData/deleteVnfsdcData.json", + + // // Delete Pnf package + // deletePnfPack: this.baseUrl + "/onboard-vnf-mf/listData/deletePnfPack.json", + + // // // download ns package + // // downloadNsData: this.baseUrl + "/downloadData.json", + // // //download vnf package + // // downloadVnfData: this.baseUrl + "/listData/downloadVnfData.json" + + // } + + //--------------------------------------------------------------------------------------- + /* line up*/ + baseUrl = baseUrl.baseUrl + "/uui-lcm/"; + url = { + // list Data + onboardTableData: this.baseUrl + "ns-packages", + onboardDataVNF: this.baseUrl + "vnf-packages", + onboardDataPNF: this.baseUrl + "pnf-packages", + //ns sdc + sdc_nsListData: this.baseUrl + "sdc-ns-packages", // GET + // vnf sdc + sdc_vnfListData: this.baseUrl + "sdc-vf-packages", // GET + + // createnspackages ? TODO + creatensData: this.baseUrl + "_jsonData", //POST + + // onboard ns sdc data + onboardNs: this.baseUrl + "ns-packages", //POST + //onboard VNF sdc data + onboardVNF: this.baseUrl + "vf-packages", //POST + + //Delete ns package + deleteNspack: this.baseUrl + "deleteNsdPackage?nsdInfoId=", + // Delete Vnf vfc package + deleteVnfPack: this.baseUrl + "deleteVnfPackage?vnfPkgId=", + // Delete Pnf package + deletePnfPack: this.baseUrl + "deletePnfPackage?pnfdInfoId=", + + //Progress interface + progress: this.baseUrl + "jobs/" + "_jobId" + "?responseId=" + + + // // download ns package + // downloadNsData: this.baseUrl + "downLoadNsPackage?nsdInfoId=XXXXX", + // //download vnf package + // downloadVnfData: this.baseUrl + "downLoadVnfPackage?vnfPkgId=XXXXX" + + } + + //-----------------------------------Function-local-start------------------------------------------------------ + /* Query data list */ + // NS Data + getOnboardTableData() { + // return this.http.get(this.url.onboardTableData); + return this.http.get(this.url["onboardTableData"]); + } + // NS SDC Data + getSDC_NSTableData() { + // return this.http.get(this.url.sdc_nsListData); + return this.http.get(this.url["sdc_nsListData"]); + } + // VNF Data + getOnboardTableVnfData() { + return this.http.get(this.url.onboardDataVNF); + } + // onboard VNF sdc Data + getSDC_VNFTableData() { + return this.http.get(this.url["sdc_vnfListData"]); + } + + // PNF Data + getOnboardTablePnfData() { + return this.http.get(this.url.onboardDataPNF); + } + //------------------------------------------------------------------------------------- + + //create--Get the id after dragging the file before uploading //on-line post + getCreatensData(url_upId, requestBody) { + return this.http.post(this.url.creatensData.replace("_jsonData", url_upId), requestBody); //on-line + } + + //create--Get the id after dragging the file before uploading //local json get + // getCreatensData(url_upId) { + // return this.http.get(this.url.creatensData.replace("_jsonData", url_upId)); + // } + + //------------------------------------------------------------------------------ + //onboard sdc ns + getNsonboard(requestBody) { + return this.http.post(this.url["onboardNs"], requestBody); + } + //onboard sdc vnf + getVnfonboard(requestBody) { + return this.http.post(this.url["onboardVNF"], requestBody); + } + + //onboard progress + getProgress(jobid, responseId) { + let url = this.url.progress.replace("_jobId", jobid) + responseId; + return this.http.get(url); + } + //-------------------------------------------------------------------------- + // Delete ns vfc package + deleteNsIdData(paramsObj) { + // local test + // return this.http.get(this.url.deleteNspack); + // Online test + return this.http.delete(this.url.deleteNspack + paramsObj); + } + + // Delete Vnf vfc package + deleteVnfIdData(paramsObj) { + // return this.http.get(this.url.deleteVnfPack); + //online test + return this.http.delete(this.url.deleteVnfPack + paramsObj); + } + + // Delete Pnf package + deletePnfIdData(paramsObj) { + //Local test + // return this.http.get(this.url.deletePnfPack); + //online test + return this.http.delete(this.url.deletePnfPack + paramsObj); + } + + //---------------------------------Function-end------------------------------------------- + +} diff --git a/usecaseui-portal/src/app/core/services/text.service.spec.ts b/usecaseui-portal/src/app/core/services/text.service.spec.ts new file mode 100644 index 00000000..7b4d9efc --- /dev/null +++ b/usecaseui-portal/src/app/core/services/text.service.spec.ts @@ -0,0 +1,15 @@ +import { TestBed, inject } from '@angular/core/testing'; + +import { TextService } from './text.service'; + +describe('TextService', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [TextService] + }); + }); + + it('should be created', inject([TextService], (service: TextService) => { + expect(service).toBeTruthy(); + })); +}); diff --git a/usecaseui-portal/src/app/core/services/text.service.ts b/usecaseui-portal/src/app/core/services/text.service.ts new file mode 100644 index 00000000..26a2caad --- /dev/null +++ b/usecaseui-portal/src/app/core/services/text.service.ts @@ -0,0 +1,43 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; + +@Injectable() +export class TextService { + constructor(private http: HttpClient) { } + //--------------------------------------------------------------------------------------- + /* line up*/ + baseUrl = "/api"; + url = { + textInterface: this.baseUrl + "/user/login", + singleInterface: this.baseUrl + "/home", + doubleInterface: this.baseUrl + "/customer/info", + multipleInterface: this.baseUrl + "/alarm/formdata/multiple", + jsonInterface: this.baseUrl + "/xuran/test/data", + } + + //-----------------------------------Function-local-start------------------------------------------------------ + /* Query data list */ + getfakeData() { + return this.http.get(this.url["singleInterface"]); + } + getjsonData() { + return this.http.get(this.url["jsonInterface"]); + } + //------------------------------------------------------------------------------------- + +} diff --git a/usecaseui-portal/src/app/dataInterface.ts b/usecaseui-portal/src/app/dataInterface.ts deleted file mode 100644 index e092bd03..00000000 --- a/usecaseui-portal/src/app/dataInterface.ts +++ /dev/null @@ -1,57 +0,0 @@ -enum baseUrl{ - baseUrl = '/api/usecaseui-server/v1' //online - // baseUrl = 'http://172.19.44.223/api/usecaseui-server/v1' //local one - // baseUrl = 'http://10.73.191.100:8082' //local two -} -interface homeData { - services:{ - number:number, - chartdata:Object[] - }, - performance:{ - per_Vnf:number, - per_VmPm:number - }, - alarm:{ - chartdata:Object[] - }, - Vm_performance:{ - names:string[] - } -}; - -interface homeVmLineData { - CPU:number[], - Memory:number[] -} - -interface servicesSelectData { - customer:string[], - serviceType:string[] -} - -interface servicesTableData { - total:number, - tableList:string[] -} - -interface creatensData { - total:number, - tableList:string[] -} - -interface onboardTableData { - total:number, - tableList:string[] -} - -interface onboardDataVNF { - total:number, - tableList:string[] -} - -interface onboardDataPNF { - total:number, - tableList:string[] -} -export {homeData, homeVmLineData, servicesSelectData, servicesTableData, creatensData, onboardTableData, onboardDataVNF, onboardDataPNF , baseUrl} diff --git a/usecaseui-portal/src/app/fcaps/fcaps.component.html b/usecaseui-portal/src/app/fcaps/fcaps.component.html deleted file mode 100644 index edd2111a..00000000 --- a/usecaseui-portal/src/app/fcaps/fcaps.component.html +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/usecaseui-portal/src/app/fcaps/fcaps.component.less b/usecaseui-portal/src/app/fcaps/fcaps.component.less deleted file mode 100644 index e69de29b..00000000 diff --git a/usecaseui-portal/src/app/fcaps/fcaps.component.spec.ts b/usecaseui-portal/src/app/fcaps/fcaps.component.spec.ts deleted file mode 100644 index 42bdbc0f..00000000 --- a/usecaseui-portal/src/app/fcaps/fcaps.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { FcapsComponent } from './fcaps.component'; - -describe('FcapsComponent', () => { - let component: FcapsComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ FcapsComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(FcapsComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/usecaseui-portal/src/app/fcaps/fcaps.component.ts b/usecaseui-portal/src/app/fcaps/fcaps.component.ts deleted file mode 100644 index 7f9ab7f4..00000000 --- a/usecaseui-portal/src/app/fcaps/fcaps.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-fcaps', - templateUrl: './fcaps.component.html', - styleUrls: ['./fcaps.component.less'] -}) -export class FcapsComponent implements OnInit { - - constructor() { } - - ngOnInit() { - } - -} diff --git a/usecaseui-portal/src/app/home/home.component.css b/usecaseui-portal/src/app/home/home.component.css deleted file mode 100644 index 41b3f5fe..00000000 --- a/usecaseui-portal/src/app/home/home.component.css +++ /dev/null @@ -1,158 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -.title { - font: 700 18px/18px "思源黑体"; - color: #4c5e70; - margin-bottom: 18px; -} -hr { - border: none; - height: 2px; - background-color: #dce1e7; - margin-bottom: 20px; -} -.content .services { - float: left; - background-color: #fff; - width: 30%; - height: 628px; - border-radius: 5px; - padding: 28px 22px; -} -.content .services h4 { - font: 600 16px/16px "Arial"; - color: #3d4d65; - margin-bottom: 58px; -} -.content .services h3 { - font: 400 48px/48px "Arial"; - color: #3fa8eb; - text-align: center; -} -.content .services h3 span { - font-size: 14px; -} -.content .services p { - font: 400 14px/14px "Arial"; - color: #54657e; - text-align: center; - margin-bottom: 48px; -} -.content .services .tip { - background-color: #eceff4; - color: #3d4d65; - font-size: 16px; - margin: 0 20px; - height: 35px; - line-height: 35px; - border-radius: 5px; -} -.content .rightcontent { - float: left; - padding-left: 15px; - width: 70%; -} -.content .rightcontent .rt-content { - height: 220px; - margin-bottom: 18px; -} -.content .rightcontent .rt-content .poerformance { - float: left; - margin-left: 2%; - background-color: #fff; - height: 100%; - width: 50%; - border-radius: 5px; - padding: 28px 26px; -} -.content .rightcontent .rt-content .poerformance h4 { - font: 600 16px/16px "Arial"; - color: #3d4d65; - margin-bottom: 34px; -} -.content .rightcontent .rt-content .poerformance div { - height: 57px; - position: relative; - margin-bottom: 10px; -} -.content .rightcontent .rt-content .poerformance div h3 { - font: 600 25px/25px "Arial"; - color: #3d4d65; - margin-bottom: 10px; -} -.content .rightcontent .rt-content .poerformance div p { - font: 400 12px/12px "Arial"; - color: #54657e; -} -.content .rightcontent .rt-content .poerformance div img { - position: absolute; - top: 0; - right: 0; -} -.content .rightcontent .rt-content .alarm { - float: left; - background-color: #fff; - height: 100%; - width: 48%; - margin-left: 2%; - border-radius: 5px; - position: relative; - padding: 28px 26px; -} -.content .rightcontent .rt-content .alarm h4 { - position: absolute; - font: 600 16px/16px "Arial"; - color: #3d4d65; -} -.content .rightcontent .rb-content { - height: 390px; - background-color: #fff; - border-radius: 5px; - padding: 24px 30px; - position: relative; -} -.content .rightcontent .rb-content h4 { - font: 600 16px/16px "Arial"; - color: #3d4d65; -} -.content .rightcontent .rb-content nz-dropdown { - position: absolute; - top: 24px; - right: 30px; -} -.content .rightcontent .rb-content nz-dropdown button { - width: 170px; - height: 35px; - background-color: #eceff4; - text-align: left; - border-color: #cad3df; -} -.content .rightcontent .rb-content nz-dropdown button span { - display: inline-block; - width: 120px; - overflow: hidden; - text-overflow: ellipsis; - font-size: 14px; -} -.content .rightcontent .rb-content nz-dropdown button i { - position: absolute; - top: 12px; - right: 12px; -} -.content .rightcontent .rb-content #pfVmChartLine { - width: 100%; - height: 318px; -} diff --git a/usecaseui-portal/src/app/home/home.component.html b/usecaseui-portal/src/app/home/home.component.html deleted file mode 100644 index 4126f241..00000000 --- a/usecaseui-portal/src/app/home/home.component.html +++ /dev/null @@ -1,102 +0,0 @@ - - - -
    -
    -
    -

    {{"i18nTextDefine_SERVICES" | translate}}

    - - -
    No Service Instances
    - -
    -
    {{"i18nTextDefine_Total" | translate}}: {{serviceNumber}} - {{"i18nTextDefine_cutomers_and" | translate}} {{serviceNumber}} - {{"i18nTextDefine_service_instance" | translate}}
    -
    -

    - {{"i18nTextDefine_ViewDetails" | translate}} -

    -
    -
    -

    {{"i18nTextDefine_PACKAGE" | translate}}

    -
    -
  • -
    -
    NS
    -
    - -
    -
    {{NSdata}}
    -
    -
    • -
  • -
    -
    VNF
    -
    - -
    -
    {{Vnfdata}}
    -
    -
    • -
  • -
    -
    PNF
    -
    - -
    -
    {{PnfData}}
    -
    -
    • -
    -

    - {{"i18nTextDefine_ViewDetails" | translate}} -

    -
    -
    -
    -
    -
    -

    {{"i18nTextDefine_ALARM" | translate}}

    - -

    {{"i18nTextDefine_VNF_Alarm" | translate}}

    -
    -
    - -

    {{"i18nTextDefine_VM_Alarm" | translate}}

    -

    - {{"i18nTextDefine_ViewDetails" | translate}} -

    -
    -
    -
    -

    {{"i18nTextDefine_VM_Performance" | translate}}

    - - - - - -
    -
    -
    diff --git a/usecaseui-portal/src/app/home/home.component.less b/usecaseui-portal/src/app/home/home.component.less deleted file mode 100644 index 9e768cf7..00000000 --- a/usecaseui-portal/src/app/home/home.component.less +++ /dev/null @@ -1,265 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -// .title { -// font: 700 18px/18px "思源黑体"; -// color: #4c5e70; -// margin-bottom: 18px; -// } -// hr { -// border: none; -// height: 2px; -// background-color: #dce1e7; -// margin-bottom: 20px; -// } -.content { - padding: 20px 20px; - overflow: hidden; - .left-content{ - float: left; - width:30%; - // height:96vh; - .services,.PACKAGE{ - width: 100%; - background:rgba(255,255,255,1); - box-shadow:0px 10px 10px 2px rgba(222,222,222,0.5); - border-radius:6px; - padding: 28px 22px; - h4{ - font: 600 16px/16px "Arial Bold"; - color: #0DA9E2; - } - .tip { - float: right; - width: 110px; - line-height: 35px; - border-radius: 5px; - background-color: #eceff4; - font-size: 16px; - color: #3C4F8C; - margin-top: 20px; - margin-bottom: 0!important; - } - } - .services{ - height:466px; - h4{ - margin-bottom: 20px; - } - h5 { - font: 500 18px/18px "ArialMT"; - color:#0DA9E2; - margin: -2em 0 1em 0 ; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - overflow: hidden; - span { - font-size: 14px; - font-family: "Arial"; - color:#3C4F8C; - } - span:first-child { - font-size: 18px; - padding: 0 4PX 0 4px; - } - span:last-child { - padding-left: 4px; - } - - } - } - .PACKAGE{ - height:422px; - margin-top: 20px; - h4{ - margin-bottom: 50px; - } - .details { - .detailstoplinContent{ - border-bottom:0.5px solid rgba(237,237,237,1); - border-radius:4px; - line-height: 45px; - font-size: 14px; - color: #3C4F8C; - font-family:"ArialMT"; - .detailstoplin { - width: 100%; - height: 50px; - border-top: 0.5px solid #ededed; - border-radius: 4px; - div:first-child{ - width: 20%; - float: left; - } - div:nth-child(2){ - width: 65%; - float: left; - } - div:last-child { - width: 13%; - float: right; - font-size:12px; - font-weight: 500; - color:rgba(60,79,140,0.5); - } - } - } - } - - } - } - .services,.PACKAGE{ - h3 { - font: 400 48px/48px "Arial"; - color: #3fa8eb; - text-align: center; - span { - font-size: 14px; - } - } - - p { - font: 400 14px/14px "Arial"; - color: #54657e; - text-align: center; - margin-bottom: 48px; - } - } - .rightcontent { - float: left; - padding-left: 15px; - width: 70%; - .rt-content { - height: 40%; - margin-bottom: 18px; - background:rgba(255,255,255,1); - box-shadow:0px 10px 10px 2px rgba(222,222,222,0.5); - border-radius:6px; - .poerformance { - float: left; - background-color: #fff; - height: 100%; - width: 50%; - border-radius: 5px; - padding: 28px 26px; - .pfVmPm { - h3 { - color:#BD57E5; - } - } - h4 { - font: 600 16px/16px "Arial Bold"; - color: #0DA9E2; - margin-bottom: 34px; - } - - div { - height: 57px; - position: relative; - margin-bottom: 10px; - h3 { - font: 600 25px/25px "Arial"; - color: #2F6AEF; - margin-bottom: 10px; - padding-left: 50%; - } - p { - font: 400 12px/12px "Arial"; - color:rgba(60,79,140,0.5); - padding-left: 50%; - - } - img { - position: absolute; - top: 0; - left: 0; - } - } - } - .alarm { - float: left; - background-color: #fff; - height: 100%; - width: 48%; - border-radius: 5px; - position: relative; - padding: 28px 26px; - h4 { - position: absolute; - font: 600 16px/16px "Arial Bold"; - color: #0DA9E2; - } - } - .alarm-name{ - text-align: center; - margin-top: 15px; - } - .tip{ - width: 110px; - background-color: #eceff4; - color: #3C4F8C; - font-size: 16px; - float: right; - margin-top: 20px; - margin-bottom: 0!important; - line-height: 35px; - border-radius: 5px; - text-align: center; - } - } - .rb-content { - position: relative; - height: 58%; - background-color: #fff; - padding: 24px 30px; - box-shadow:0px 10px 15px 2px rgba(222,222,222,0.5); - border-radius:6px; - h4 { - font: 600 16px/16px "Arial Bold"; - color: #0DA9E2; - } - nz-dropdown { - position: absolute; - top: 24px; - right: 30px; - button { - width: 170px; - height: 35px; - background-color: #eceff4; - text-align: left; - border-color: #cad3df; - span { - display: inline-block; - width: 120px; - overflow: hidden; - text-overflow: ellipsis; - font-size: 14px; - } - i { - position: absolute; - top: 12px; - right: 12px; - } - } - //下拉框中的样式在style.less中，下拉框是在body中额外临时生成的 - } - #pfVmChartLine { - width: 100%; - height: 318px; - } - } - } -} \ No newline at end of file diff --git a/usecaseui-portal/src/app/home/home.component.spec.ts b/usecaseui-portal/src/app/home/home.component.spec.ts deleted file mode 100644 index 9e463e65..00000000 --- a/usecaseui-portal/src/app/home/home.component.spec.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { TranslateModule, TranslateLoader, TranslateService, TranslateFakeLoader} from '@ngx-translate/core'; -import { NgZorroAntdModule } from 'ng-zorro-antd'; -import { NgxEchartsModule } from 'ngx-echarts'; -import { HttpClientModule } from '@angular/common/http'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { RouterTestingModule } from '@angular/router/testing'; - -import { HomeComponent } from './home.component'; -import { PieComponent } from '../components/charts/pie/pie.component'; -import { BarComponent } from '../components/charts/bar/bar.component'; -import { LineComponent } from '../components/charts/line/line.component'; -import { HomesService } from '../homes.service'; - -describe('HomeComponent', () => { - let component: HomeComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ HomeComponent, PieComponent, BarComponent, LineComponent ], - imports: [TranslateModule.forRoot({loader: { provide: TranslateLoader, useClass: TranslateFakeLoader }}), - NgZorroAntdModule, - NgxEchartsModule, - HttpClientModule, - BrowserAnimationsModule, - RouterTestingModule], - providers: [HomesService, TranslateService] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(HomeComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/usecaseui-portal/src/app/home/home.component.ts b/usecaseui-portal/src/app/home/home.component.ts deleted file mode 100644 index 2b1f6765..00000000 --- a/usecaseui-portal/src/app/home/home.component.ts +++ /dev/null @@ -1,531 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core'; -import { HomesService } from '../homes.service'; -import { slideToRight } from '../animates'; -import { TranslateService } from "@ngx-translate/core"; -import { Router } from '@angular/router'; - -@Component({ - selector: 'app-home', - templateUrl: './home.component.html', - styleUrls: ['./home.component.less'], - animations: [slideToRight] -}) -export class HomeComponent implements OnInit { - @HostBinding('@routerAnimate') routerAnimateState; - - constructor(private myhttp: HomesService, private router: Router) { } - - ngOnInit() { - this.getListSortMasters(); - this.getSourceNames(); - this.getHomeServiceData(); - this.getHomeAlarmData(); - this.getHomeAlarmChartData(); - this.getHomeServiceBarNsData(); - this.getHomeServiceBarVnfData(); - this.getHomeServiceBarPnfData(); - } - - - // services - serviceNumber: number = 0; - serviceChartData: Object; - serviceChartInit: Object = { - backgroundColor: '#fff', - height: 200, - option: { - legend: { - orient: 'vertical', - left: '0px', - bottom: '0px', - data: ['Active', 'Closed'] - }, - color: ["#7AC0EF", "#6A86D8", "#748CDC", "#7277D4", "#7067CE", "#B9B0F7", "#7DCFF5"], - series: [ - { - name: "服务信息", - radius: ['50%', '70%'], - center: ['50%', '45%'], - avoidLabelOverlap: false, - label: { - normal: { - show: false, - position: 'center' - }, - emphasis: { - show: true, - formatter: '{b}\n{c}', - textStyle: { - fontSize: '18', - fontWeight: 'bold' - } - } - }, - labelLine: { - normal: { - show: false - } - }, - itemStyle: { - normal: { - borderWidth: 4, - borderColor: "#fff" - }, - emphasis: { - borderWidth: 0 - } - }, - } - ] - } - }; - // gethomeServiceData - serviceChart = true; - getHomeServiceData() { - this.myhttp.getHomeServiceData() - .subscribe( - (data) => { - this.serviceNumber = data.serviceTotalNum; - if (this.serviceNumber > 0) { - this.serviceChart = true; - } else { - this.serviceChart = false; - } - this.serviceChartData = { - series: [{ data: data.customerServiceList }] - }; - }, - (err) => { - console.log(err); - } - ) - } - - // VM alarm - VMAlarmChartData: Object; - VMAlarmChartInit: Object = { - height: 180, - option: { - tooltip: { - trigger: 'item', - formatter: '{b}\n{c},{d}%' - }, - color: [ - { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [{ - offset: 0, color: '#FB93C2' // 0% color - }, { - offset: 1, color: '#FB7788' // 100% color - }], - globalCoord: false - }, { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [{ - offset: 0, color: '#A6BFE4' // 0% color - }, { - offset: 1, color: '#7A8BAE' // 100% color - }], - globalCoord: false - }], - series: [{ - name: "告警信息", - radius: ['50%', '70%'], - center: ['50%', '45%'], - label: { - normal: { - show: false, - }, - emphasis: { - show: true, - formatter: '{b}\n{c},{d}%', - color: "#3C4F8C" - } - }, - - }] - } - }; - - // alarm bar - alarmChartData: Object; - alarmChartInit: Object = { - height: 180, - option: { - tooltip: { - trigger: 'item', - formatter: '{b}\n{c},{d}%' - }, - legend: { - orient: 'vertical', - left: '0px', - bottom: '0px', - itemWidth: 10, - itemHeight: 10, - textStyle: { - color: "#3C4F8C" - }, - data: ['Active', 'Fixed'] - }, - color: [ - { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [{ - offset: 0, color: '#FB93C2' // 0% color - }, { - offset: 1, color: '#FB7788' // 100% color - }], - globalCoord: false - }, { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [{ - offset: 0, color: '#A6BFE4' // 0% - }, { - offset: 1, color: '#7A8BAE' // 100% - }], - globalCoord: false - }], - series: [{ - name: "告警信息", - radius: '55%', - center: ['50%', '45%'], - label: { - normal: { - show: false, - }, - emphasis: { - show: true, - formatter: '{b}\n{c},{d}%', - color: "#3C4F8C" - } - } - }] - } - }; - - getHomeAlarmData() { - this.myhttp.getHomeAlarmData() - .subscribe((data) => { - this.alarmChartData = { - series: [{ - data: [{name: "Active", value: data[0]}, {name: "Fixed", value: data[1]}] - }] - }; - this.VMAlarmChartData = { - series: [{ - data: [{name: "Active", value: data[0]}, {name: "Fixed", value: data[1]}] - }] - }; - }) - } - - // alarm line - alarmLineChartData: Object; - alarmLineChartInit: Object = { - height: 320, - option: { - legend: { - bottom: '0px', - data: ['CPU', 'Memory', 'Disk'] - }, - xAxis: { - data: [] - }, - series: [ - { - name: 'CPU', - type: 'line', - itemStyle: { - color: "#70ACEC" - }, - data: [] - }, - { - name: 'Memory', - type: 'line', - itemStyle: { - color: "#3BCD79" - }, - data: [] - }, - { - name: 'Disk', - type: 'line', - itemStyle: { - color: "#FDC288" - }, - data: [] - } - ] - } - }; - - // services - servicesBarChartData: Object; - servicesBarChartData1: Object; - servicesBarChartData2: Object; - serviceBarChartInit: Object = { - height: 40, - width: 160, - option: { - tooltip: { - - }, - grid: { - - }, - xAxis: { - type: 'value', - show: false, - min: 0, - max: 100, - axisTick: { - show: false - }, - }, - yAxis: { - type: 'category', - show: false, - axisTick: { - show: false - } - }, - series: [{ - type: 'bar', - name: 'a', - silent: true, - animation: false, - data: [], - stack: 'income', - barWidth: 12, - itemStyle: { - normal: {} - }, - }, { - type: 'bar', - name: '', - animation: false, - silent: true, - data: [100], - tooltip: { - show: false - }, - stack: 'income', - barWidth: 12, - itemStyle: { - normal: { - color: '#fff', - barBorderRadius: [10, 10, 10, 10] - } - }, - label: { - normal: { - show: false, - } - }, - } - ] - } - } - - - NSdata: number; - Vnfdata: number; - PnfData: number; - getHomeServiceBarNsData() { - this.myhttp.getHomeServiceBarNsData() - .subscribe((data) => { - this.NSdata = data.length; - this.servicesBarChartData = { - series: [ - { - data: [this.NSdata], - itemStyle: { - normal: { - color: { - type: 'bar', - colorStops: [{ - offset: 0, - color: '#FDAC63' - }, { - offset: 1, - color: '#FECE72' - }], - globalCoord: false, - }, - barBorderRadius: [10, 10, 10, 10] - } - }, - }, - { data: [100] }, - - ] - } - }, (err) => { - console.log(err); - }) - } - - getHomeServiceBarVnfData() { - this.myhttp.getHomeServiceBarVnfData() - .subscribe((data) => { - this.Vnfdata = data.length; - this.servicesBarChartData1 = { - series: [ - { - data: [this.Vnfdata], - itemStyle: { - normal: { - color: { - type: 'bar', - colorStops: [{ - offset: 0, - color: '#9AD09F' - }, { - offset: 1, - color: '#BCECB8' - }], - globalCoord: false, - - }, - barBorderRadius: [10, 10, 10, 10] - } - }, - }, - { data: [100] }, - ] - } - }, (err) => { - console.log(err); - }) - } - - getHomeServiceBarPnfData() { - this.myhttp.getHomeServiceBarPnfData() - .subscribe((data) => { - this.PnfData = data.length; - this.servicesBarChartData2 = { - series: [ - { - data: [this.PnfData], - itemStyle: { - normal: { - color: { - type: 'bar', - colorStops: [{ - offset: 0, - color: '#71ADEF' - }, { - offset: 1, - color: '#ACCAF4' - }], - globalCoord: false, - - }, - barBorderRadius: [10, 10, 10, 10] - } - }, - }, - { data: [100] }, - ] - } - }, (err) => { - console.log(err); - }) - } - // sourceName - sourceNameList = ['performanceNameOne']; - sourceNameSelected = null; - - - listSortMasters = null; - - getListSortMasters() { - if (sessionStorage.getItem("DefaultLang") == undefined) { - sessionStorage.setItem("DefaultLang", "en"); - } - this.myhttp.getListSortMasters() - .subscribe((data) => { - this.listSortMasters = JSON.stringify(data); - sessionStorage.setItem('listSortMasters', this.listSortMasters) - }) - } - - getSourceNames() { - this.myhttp.getSourceNames() - .subscribe((data) => { - this.sourceNameList = data; - }) - } - sourceNameSelect(item) { - if (this.sourceNameSelected != item) { - this.sourceNameSelected = item; - this.getHomeAlarmChartData() - } - } - getHomeAlarmChartData() { - let nowTime = this.myhttp.dateformater(Date.now()); - let startTime = this.myhttp.dateformater(Date.now() - 30 * 24 * 60 * 60 * 1000); - let obj = { - sourceName: this.sourceNameSelected, - startTime: startTime, - endTime: nowTime, - format: "day" - } - - this.myhttp.getHomeAlarmChartData(obj) - .subscribe((data) => { - this.alarmLineChartData = { - xAxis: { - data: data.dataList - }, - series: [ - { data: data.allList }, - { data: data.ActiveList }, - { data: data.closedList } - ] - } - }, (err) => { - console.log(err); - }) - } - - goback_services() { - this.router.navigateByUrl('/services/services-list'); - } - goback_onboard() { - this.router.navigateByUrl('/services/onboard-vnf-vm'); - } - -} diff --git a/usecaseui-portal/src/app/homes.service.spec.ts b/usecaseui-portal/src/app/homes.service.spec.ts deleted file mode 100644 index 9c03dcb2..00000000 --- a/usecaseui-portal/src/app/homes.service.spec.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { TestBed, inject } from '@angular/core/testing'; - -import { HomesService } from './homes.service'; - -describe('HomesService', () => { - beforeEach(() => { - TestBed.configureTestingModule({ - providers: [HomesService] - }); - }); - - it('should be created', inject([HomesService], (service: HomesService) => { - expect(service).toBeTruthy(); - })); -}); diff --git a/usecaseui-portal/src/app/homes.service.ts b/usecaseui-portal/src/app/homes.service.ts deleted file mode 100644 index b9b9d5bf..00000000 --- a/usecaseui-portal/src/app/homes.service.ts +++ /dev/null @@ -1,132 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -import { Injectable } from '@angular/core'; -import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http'; -import { Observable } from 'rxjs/Observable'; -import { homeData, homeVmLineData, servicesSelectData, servicesTableData, creatensData, onboardTableData, onboardDataVNF, onboardDataPNF , baseUrl} from './dataInterface'; - -@Injectable() -export class HomesService { - - constructor(private http: HttpClient) { } - baseUrl = baseUrl.baseUrl; - baseUrlbar = baseUrl.baseUrl + "/uui-lcm/"; - url = { - home_serviceData: this.baseUrl + "/uui-lcm/serviceNumByCustomer", - home_performanceData: this.baseUrl + "/performance/queryAllSourceNames", - home_alarmData: this.baseUrl + "/alarm/statusCount", - home_alarmChartData: this.baseUrl + "/alarm/diagram", - home_servicebarData:this.baseUrl + "", - home_servicebarnsData: this.baseUrlbar + "ns-packages", - home_servicebarvnfData: this.baseUrlbar + "vnf-packages", - home_servicebarpnfData: this.baseUrlbar + "pnf-packages", - sourceNames: this.baseUrl + "/alarm/getSourceNames", - listSortMasters:this.baseUrl+"/listSortMasters", - currentLanguage:"/api/portal-auxapi/languageSetting/user/", - - } - - // Time formatting milliseconds to normal - dateformater(vmstime) { - if (!vmstime) { - return '' - } - let mstime = Number((vmstime + '').slice(0, 13)); - let time = new Date(mstime); - let year = time.getFullYear(); - let month = time.getMonth() + 1; - let day = time.getDate(); - let hours = time.getHours(); - let minutes = time.getMinutes(); - let seconds = time.getSeconds(); - let formattime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds; - return formattime; - } - - - // home - getHomeServiceData() { - return this.http.get(this.url.home_serviceData); - } - getHomePerformanceData() { - return this.http.get(this.url.home_performanceData); - } - getHomeAlarmData() { - return this.http.get(this.url.home_alarmData); - } - getHomeAlarmChartData(paramsObj) { - let params = new HttpParams({ fromObject: paramsObj }); - return this.http.get(this.url.home_alarmChartData, { params }); - } - - getHomeServiceBarData(){ - return this.http.get(this.url.home_servicebarData); - } - getHomeServiceBarNsData(){ - return this.http.get(this.url.home_servicebarnsData); - } - getHomeServiceBarVnfData(){ - return this.http.get(this.url.home_servicebarvnfData); - } - getHomeServiceBarPnfData(){ - return this.http.get(this.url.home_servicebarpnfData); - } - - // alarm data - getAlarmFormData(currentPage: number, pageSize: number, sourceName?: string, priority?: string, startTime?: string, endTime?: string, vfStatus?: string) { - return this.http.get(this.baseUrl + '/alarm/' + '/' + currentPage + '/' + pageSize + '?sourceName=' + sourceName + '&priority=' + priority + '&startTime=' + startTime + '&endTime=' + endTime + '&vfStatus=' + vfStatus); - } - - getSourceNames() { - return this.http.get(this.baseUrl + '/alarm/getSourceNames/'); - } - - getstatuscount() { - let httpurl = this.baseUrl + '/alarm/statusCount'; - return this.http.get(httpurl); - } - getAlarmDetailData(id) { - let httpurl = this.baseUrl + '/alarm/getAlarmsHeaderDetail/' + id; - return this.http.get(httpurl); - } - - // performance data - getqueryAllSourceNames() { - let httpurl = this.baseUrl + "/performance/queryAllSourceNames"; - return this.http.get(httpurl); - } - getperformanceSourceNames(currentPage: number, pageSize: number, sourceName: string) { - let httpurl = this.baseUrl + "/performanceSsourceNames" + "/" + currentPage + "/" + pageSize + "?sourceName=" + sourceName; - return this.http.get(httpurl); - } - getPerformanceFormData(currentPage: number, pageSize: number, sourceName?: string, startTime?: string, endTime?: string) { - return this.http.get(this.baseUrl + '/performance' + '/' + currentPage + '/' + pageSize + '?sourceName=' + sourceName + '&startTime=' + startTime + '&endTime=' + endTime); - } - getPerformanceHeaderDetail(id) { - let httpurl = this.baseUrl + '/performance/getPerformanceHeaderDetail/' + id; - return this.http.get(httpurl); - } - - - getListSortMasters(){ - return this.http.get(this.url.listSortMasters); - } - - getCurrentLanguage(currentloginId){ - let url=this.url.currentLanguage+currentloginId; - return this.http.get(url); - } -} diff --git a/usecaseui-portal/src/app/managemencs.service.ts b/usecaseui-portal/src/app/managemencs.service.ts deleted file mode 100644 index 03ddb2e2..00000000 --- a/usecaseui-portal/src/app/managemencs.service.ts +++ /dev/null @@ -1,91 +0,0 @@ -import { Injectable } from '@angular/core'; -import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http'; -import { Observable } from 'rxjs/Observable'; -import {baseUrl} from './dataInterface'; - - -@Injectable() -export class ManagemencsService { - - constructor(private http: HttpClient) { } - baseUrl = baseUrl.baseUrl; - - - - - /* line up */ - url = { - customers:this.baseUrl + "/uui-lcm/customers", /* get */ - serviceType:this.baseUrl + "/uui-lcm/customers/"+"*_*"+"/service-subscriptions", /* get */ - CustomersPir:this.baseUrl + "/uui-lcm/serviceNumByCustomer", /* get */ - CustomersColumn:this.baseUrl + "/uui-lcm/serviceNumByServiceType/"+"*_*", /* get */ - createCustomer:this.baseUrl+"/uui-lcm/customers/", /* put */ - createServiceType:this.baseUrl+"/uui-lcm/customers/*_*/service-subscriptions/*+*", /* put */ - getCustomerresourceVersion:this.baseUrl+"/uui-lcm/customers/*_*", /* put */ - deleteCustomer:this.baseUrl+"/uui-lcm/customers?customerId=*_*&resourceVersion=*+*", - getServiceTypeResourceVersion:this.baseUrl+"/uui-lcm/customers/*_*/service-subscriptions/*+*", - deleteServiceType:this.baseUrl+"/uui-lcm/customers/*_*/service-subscriptions/*+*?resourceVersion=*@* ", - }; - - - // Get all customers - getAllCustomers() { - return this.http.get(this.url.customers); - } - // get all servicetype - getServiceTypes(customer) { - let url = this.url.serviceType.replace("*_*", customer.id); - console.log(url) - return this.http.get(url); - } - // get Customer Pir - getCustomersPie(){ - return this.http.get(this.url.CustomersPir); - } - // get Customer ber - getCustomersColumn(customer){ - let url = this.url.CustomersColumn.replace("*_*", customer.id); - return this.http.get(url); - } - // create New Customer - createCustomer(customer, createParams) { - let url = this.url.createCustomer + customer; - // return this.http.get(url, createParams);//location - return this.http.put(url,createParams);//online - } - - createServiceType(createParams) { - let customerId = createParams.customer.id, - ServiceType = createParams.ServiceType; - let url = this.url.createServiceType.replace("*_*", customerId).replace("*+*", ServiceType); - // return this.http.get(url,createParams);//location - return this.http.put(url, createParams);//online - } - - getdeleteCustomerVersion(thisdeleteCustomer) { - let url = this.url.getCustomerresourceVersion.replace("*_*", thisdeleteCustomer.id); - return this.http.get(url); - } - - deleteSelectCustomer(params) { - let customerId = params.customerId, - version = params.version; - let url = this.url.deleteCustomer.replace("*_*", customerId).replace("*+*", version); - return this.http.delete(url); - } - - getdeleteServiceTypeVersion(params) { - let customerId = params.customerId.id, - ServiceType = params.ServiceType; - let url = this.url.getServiceTypeResourceVersion.replace("*_*", customerId).replace("*+*", ServiceType); - return this.http.get(url); - } - - deleteSelectServiceType(params) { - let customerId = params.customerId.id, - ServiceType = params.ServiceType, - version = params.version; - let url = this.url.deleteServiceType.replace("*_*", customerId).replace("*+*", ServiceType).replace("*@*", version); - return this.http.delete(url); - } -} diff --git a/usecaseui-portal/src/app/management/management.component.html b/usecaseui-portal/src/app/management/management.component.html deleted file mode 100644 index 2efa3f8e..00000000 --- a/usecaseui-portal/src/app/management/management.component.html +++ /dev/null @@ -1,36 +0,0 @@ - -
    -
    -
    -

    {{"i18nTextDefine_Create_initial_customer" | translate}}

    - {{"i18nTextDefine_Customer_not_in_ONAP" | translate}} - {{"i18nTextDefine_CreateCustomer" | translate}} - - -
    - - -
    -
    -
    - -
    -
    -
    - -
    -
    diff --git a/usecaseui-portal/src/app/management/management.component.less b/usecaseui-portal/src/app/management/management.component.less deleted file mode 100644 index 5a3a0f42..00000000 --- a/usecaseui-portal/src/app/management/management.component.less +++ /dev/null @@ -1,79 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -.content { - .management { - width: 100%; - .title { - width: 50%; - vertical-align:top; - display: inline-block; - font-family: "Arial"; - p { - font-size: 33px; - color: #3C4F8C; - margin-bottom: 0.5em; - } - span { - font-size: 18px; - color: rgba(60,79,140,0.5); - display: block; - } - img { - padding-top: 8%; - width: 55%; - margin-left: 20%; - margin-bottom: 5%; - } - input { - width: 50%; - margin: 0 auto; - margin-bottom: 5%; - display: block; - - } - .action{ - width: 50%; - height: 40px; - margin: 0 auto; - } - .action button{ - width: 40%; - height: 40px; - margin: 0 4%; - } - .cancel{ - background-color: #eee; - border-color: #eee; - color: #9DA7C5; - } - .add { - color: #fff; - background:linear-gradient(310deg,rgba(30,158,255,1) 0%,rgba(99,200,255,1) 100%); - border-color: #1890ff; - } - } - .image { - width: 49%; - vertical-align:top; - display: inline-block; - img { - width: 85%; - margin-top: 41%; - } - } - } - -} \ No newline at end of file diff --git a/usecaseui-portal/src/app/management/management.component.spec.ts b/usecaseui-portal/src/app/management/management.component.spec.ts deleted file mode 100644 index f6152432..00000000 --- a/usecaseui-portal/src/app/management/management.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ManagementComponent } from './management.component'; - -describe('ManagementComponent', () => { - let component: ManagementComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ ManagementComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(ManagementComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/usecaseui-portal/src/app/management/management.component.ts b/usecaseui-portal/src/app/management/management.component.ts deleted file mode 100644 index 0a5bfd2e..00000000 --- a/usecaseui-portal/src/app/management/management.component.ts +++ /dev/null @@ -1,68 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -import { Component, OnInit , HostBinding} from '@angular/core'; -import { showHideAnimate, slideToRight } from '../animates'; -import { ManagemencsService } from '../managemencs.service'; - -@Component({ - selector: 'app-management', - templateUrl: './management.component.html', - styleUrls: ['./management.component.less'], - animations: [ - showHideAnimate, slideToRight - ] -}) -export class ManagementComponent implements OnInit { - @HostBinding('@routerAnimate') routerAnimateState; //Routing animation - - constructor(private managemencs: ManagemencsService) { } - - ngOnInit() { - this.getAllCustomers(); - } - - nocuster = true; - firstCustomer = null; - AllCustomersdata = []; - - // Get all customers - getAllCustomers() { - this.managemencs.getAllCustomers().subscribe((data) => { - if (data.length > 0) { - this.nocuster = false; - } else { - this.nocuster = true; - } - }) - } - - createNewCustomer(customer) { - let createParams = { - customerId: customer - }; - this.managemencs.createCustomer(customer, createParams).subscribe((data) => { - if (data["status"] == 'SUCCESS') { - this.nocuster = false; - } else { - this.nocuster = true; - console.log(data, "Interface returned error") - } - }) - } - clearCustomerInput(){ - this.firstCustomer=null; - } -} diff --git a/usecaseui-portal/src/app/mock/fakedata.js b/usecaseui-portal/src/app/mock/fakedata.js new file mode 100644 index 00000000..a008c14a --- /dev/null +++ b/usecaseui-portal/src/app/mock/fakedata.js @@ -0,0 +1,24 @@ +const faker = require("faker"); +const _ = require("lodash"); +faker.locale = "en"; + +module.exports = { + customer: _.times(20, function (n) { + return { + id: n, + name: faker.name.findName(), + phone: faker.phone.phoneNumber(), + address: faker.address.streetAddress(), + avatar: faker.internet.avatar() + } + }), + home: _.times(10, function (n) { + return { + id: n, + name: faker.name.findName(), + phone: faker.phone.phoneNumber(), + address: faker.address.streetAddress(), + avatar: faker.internet.avatar() + } + }), +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/mock/json/LogicalLinksData.json b/usecaseui-portal/src/app/mock/json/LogicalLinksData.json new file mode 100644 index 00000000..99487f9d --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/LogicalLinksData.json @@ -0,0 +1,168 @@ +{ + "logical-link": [ + { + "link-name": "cross-link-1", + "in-maint": false, + "link-type": "cross-link", + "resource-version": "1536029865021", + "operational-status": "up", + "relationship-list": { + "relationship": [ + { + "related-to": "p-interface", + "relationship-label": "tosca.relationships.network.LinksTo", + "related-link": "/aai/v13/network/pnfs/pnf/pnf2000/p-interfaces/p-interface/nodeId-78.78.78.78-ltpId-1", + "relationship-data": [ + { + "relationship-key": "pnf.pnf-name", + "relationship-value": "pnf2000" + }, + { + "relationship-key": "p-interface.interface-name", + "relationship-value": "nodeId-78.78.78.78-ltpId-1" + } + ], + "related-to-property": [ + { + "property-key": "p-interface.prov-status" + } + ] + }, + { + "related-to": "p-interface", + "relationship-label": "tosca.relationships.network.LinksTo", + "related-link": "/aai/v13/network/pnfs/pnf/pnf1000/p-interfaces/p-interface/nodeId-79.79.79.79-ltpId-1", + "relationship-data": [ + { + "relationship-key": "pnf.pnf-name", + "relationship-value": "pnf1000" + }, + { + "relationship-key": "p-interface.interface-name", + "relationship-value": "nodeId-79.79.79.79-ltpId-1" + } + ], + "related-to-property": [ + { + "property-key": "p-interface.prov-status" + } + ] + } + ] + } + }, + { + "link-name": "cross-link-3", + "in-maint": false, + "link-type": "cross-link", + "resource-version": "1536029865021", + "operational-status": "up", + "relationship-list": { + "relationship": [ + { + "related-to": "p-interface", + "relationship-label": "tosca.relationships.network.LinksTo", + "related-link": "/aai/v13/network/pnfs/pnf/pnf2000/p-interfaces/p-interface/nodeId-78.78.78.78-ltpId-3", + "relationship-data": [ + { + "relationship-key": "pnf.pnf-name", + "relationship-value": "pnf2000" + }, + { + "relationship-key": "p-interface.interface-name", + "relationship-value": "nodeId-78.78.78.78-ltpId-3" + } + ], + "related-to-property": [ + { + "property-key": "p-interface.prov-status" + } + ] + }, + { + "related-to": "p-interface", + "relationship-label": "tosca.relationships.network.LinksTo", + "related-link": "/aai/v13/network/pnfs/pnf/pnf1000/p-interfaces/p-interface/nodeId-79.79.79.79-ltpId-3", + "relationship-data": [ + { + "relationship-key": "pnf.pnf-name", + "relationship-value": "pnf1000" + }, + { + "relationship-key": "p-interface.interface-name", + "relationship-value": "nodeId-79.79.79.79-ltpId-3" + } + ], + "related-to-property": [ + { + "property-key": "p-interface.prov-status" + } + ] + } + ] + } + }, + { + "link-name": "cross-link-2", + "in-maint": false, + "link-type": "cross-link", + "resource-version": "1536029865021", + "operational-status": "up", + "relationship-list": { + "relationship": [ + { + "related-to": "p-interface", + "relationship-label": "tosca.relationships.network.LinksTo", + "related-link": "/aai/v13/network/pnfs/pnf/pnf3000/p-interfaces/p-interface/nodeId-80.80.80.80-ltpId-1", + "relationship-data": [ + { + "relationship-key": "pnf.pnf-name", + "relationship-value": "pnf3000" + }, + { + "relationship-key": "p-interface.interface-name", + "relationship-value": "nodeId-80.80.80.80-ltpId-1" + } + ], + "related-to-property": [ + { + "property-key": "p-interface.prov-status" + } + ] + }, + { + "related-to": "p-interface", + "relationship-label": "tosca.relationships.network.LinksTo", + "related-link": "/aai/v13/network/pnfs/pnf/pnf-cloud/p-interfaces/p-interface/cloud-tp", + "relationship-data": [ + { + "relationship-key": "pnf.pnf-name", + "relationship-value": "pnf-cloud" + }, + { + "relationship-key": "p-interface.interface-name", + "relationship-value": "cloud-tp" + } + ], + "related-to-property": [ + { + "property-key": "p-interface.prov-status" + } + ] + }, + { + "related-to": "ext-aai-network", + "relationship-label": "org.onap.relationships.inventory.BelongsTo", + "related-link": "/aai/v13/network/ext-aai-networks/ext-aai-network/gongjie666", + "relationship-data": [ + { + "relationship-key": "ext-aai-network.aai-id", + "relationship-value": "gongjie666" + } + ] + } + ] + } + } + ] +} diff --git a/usecaseui-portal/src/app/mock/json/alarmFormData.json b/usecaseui-portal/src/app/mock/json/alarmFormData.json new file mode 100644 index 00000000..fc97ae0c --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/alarmFormData.json @@ -0,0 +1,371 @@ +{ + "totalRecolds": 22, + "list": [ + { + "id": 11, + "version": "3", + "eventName": "Fault_MultiCloud_VMFailureCleared", + "domain": "fault", + "eventId": "ab305d54-85b4-a31b-7db2-fb6b9e546015", + "eventType": null, + "nfcNamingCode": null, + "nfNamingCode": null, + "sourceId": "shentao-test-1001", + "sourceName": "shentao-test-1001", + "reportingEntityId": null, + "reportingEntityName": "Multi-Cloud", + "priority": "High", + "startEpochMicrosec": "1513630880000000", + "lastEpochMicroSec": "1513630880000000", + "startEpochMicrosecCleared": "112", + "lastEpochMicroSecCleared": "112", + "sequence": "0", + "faultFieldsVersion": "2", + "eventServrity": "CRITICAL", + "eventSourceType": "other", + "eventCategory": null, + "alarmCondition": "Guest_Os_Failure", + "specificProblem": "Fault_MultiCloud_VMFailure", + "vfStatus": "Active", + "alarmInterfaceA": "aaaa", + "status": "active" + }, + { + "id": 12, + "version": "3", + "eventName": "Fault_MultiCloud_VMFailureCleared", + "domain": "fault", + "eventId": "ab305d54-85b4-a31b-7db2-fb6b9e546015", + "eventType": null, + "nfcNamingCode": null, + "nfNamingCode": null, + "sourceId": "shentao-test-1002", + "sourceName": "shentao-test-1002", + "reportingEntityId": null, + "reportingEntityName": "Multi-Cloud", + "priority": "High", + "startEpochMicrosec": "1513630880000000", + "lastEpochMicroSec": "1513630880000000", + "startEpochMicrosecCleared": "112", + "lastEpochMicroSecCleared": "112", + "sequence": "0", + "faultFieldsVersion": "2", + "eventServrity": "CRITICAL", + "eventSourceType": "other", + "eventCategory": null, + "alarmCondition": "Guest_Os_Failure", + "specificProblem": "Fault_MultiCloud_VMFailure", + "vfStatus": "Active", + "alarmInterfaceA": "aaaa", + "status": "active" + }, + { + "id": 13, + "version": "3", + "eventName": "Fault_MultiCloud_VMFailureCleared", + "domain": "fault", + "eventId": "ab305d54-85b4-a31b-7db2-fb6b9e546015", + "eventType": null, + "nfcNamingCode": null, + "nfNamingCode": null, + "sourceId": "shentao-test-1003", + "sourceName": "shentao-test-1003", + "reportingEntityId": null, + "reportingEntityName": "Multi-Cloud", + "priority": "High", + "startEpochMicrosec": "1513630880000000", + "lastEpochMicroSec": "1513630880000000", + "startEpochMicrosecCleared": "112", + "lastEpochMicroSecCleared": "112", + "sequence": "0", + "faultFieldsVersion": "2", + "eventServrity": "CRITICAL", + "eventSourceType": "other", + "eventCategory": null, + "alarmCondition": "Guest_Os_Failure", + "specificProblem": "Fault_MultiCloud_VMFailure", + "vfStatus": "Active", + "alarmInterfaceA": "aaaa", + "status": "active" + }, + { + "id": 14, + "version": "3", + "eventName": "Fault_MultiCloud_VMFailureCleared", + "domain": "fault", + "eventId": "ab305d54-85b4-a31b-7db2-fb6b9e546015", + "eventType": null, + "nfcNamingCode": null, + "nfNamingCode": null, + "sourceId": "shentao-test-2001", + "sourceName": "shentao-test-2001", + "reportingEntityId": null, + "reportingEntityName": "Multi-Cloud", + "priority": "High", + "startEpochMicrosec": "1513630880000000", + "lastEpochMicroSec": "1513630880000000", + "startEpochMicrosecCleared": "112", + "lastEpochMicroSecCleared": "112", + "sequence": "0", + "faultFieldsVersion": "2", + "eventServrity": "CRITICAL", + "eventSourceType": "other", + "eventCategory": null, + "alarmCondition": "Guest_Os_Failure", + "specificProblem": "Fault_MultiCloud_VMFailure", + "vfStatus": "Active", + "alarmInterfaceA": "aaaa", + "status": "active" + }, + { + "id": 15, + "version": "3", + "eventName": "Fault_MultiCloud_VMFailureCleared", + "domain": "fault", + "eventId": "ab305d54-85b4-a31b-7db2-fb6b9e546015", + "eventType": null, + "nfcNamingCode": null, + "nfNamingCode": null, + "sourceId": "shentao-test-2002", + "sourceName": "shentao-test-2002", + "reportingEntityId": null, + "reportingEntityName": "Multi-Cloud", + "priority": "High", + "startEpochMicrosec": "1513630880000000", + "lastEpochMicroSec": "1513630880000000", + "startEpochMicrosecCleared": "112", + "lastEpochMicroSecCleared": "112", + "sequence": "0", + "faultFieldsVersion": "2", + "eventServrity": "CRITICAL", + "eventSourceType": "other", + "eventCategory": null, + "alarmCondition": "Guest_Os_Failure", + "specificProblem": "Fault_MultiCloud_VMFailure", + "vfStatus": "Active", + "alarmInterfaceA": "aaaa", + "status": "active" + }, + { + "id": 16, + "version": "3", + "eventName": "Fault_MultiCloud_VMFailureCleared", + "domain": "fault", + "eventId": "ab305d54-85b4-a31b-7db2-fb6b9e546015", + "eventType": null, + "nfcNamingCode": null, + "nfNamingCode": null, + "sourceId": "shentao-test-2003", + "sourceName": "shentao-test-2003", + "reportingEntityId": null, + "reportingEntityName": "Multi-Cloud", + "priority": "High", + "startEpochMicrosec": "1513630880000000", + "lastEpochMicroSec": "1513630880000000", + "startEpochMicrosecCleared": "112", + "lastEpochMicroSecCleared": "112", + "sequence": "0", + "faultFieldsVersion": "2", + "eventServrity": "CRITICAL", + "eventSourceType": "other", + "eventCategory": null, + "alarmCondition": "Guest_Os_Failure", + "specificProblem": "Fault_MultiCloud_VMFailure", + "vfStatus": "Active", + "alarmInterfaceA": "aaaa", + "status": "active" + }, + { + "id": 17, + "version": "3", + "eventName": "Fault_MultiCloud_VMFailureCleared", + "domain": "fault", + "eventId": "ab305d54-85b4-a31b-7db2-fb6b9e546015", + "eventType": null, + "nfcNamingCode": null, + "nfNamingCode": null, + "sourceId": "shentao-test-2004", + "sourceName": "vnf_a_1", + "reportingEntityId": null, + "reportingEntityName": "Multi-Cloud", + "priority": "High", + "startEpochMicrosec": "1516784364860", + "lastEpochMicroSec": "1516784364860", + "startEpochMicrosecCleared": "112", + "lastEpochMicroSecCleared": "112", + "sequence": "0", + "faultFieldsVersion": "2", + "eventServrity": "CRITICAL", + "eventSourceType": "other", + "eventCategory": null, + "alarmCondition": "Guest_Os_Failure", + "specificProblem": "Fault_MultiCloud_VMFailure", + "vfStatus": "Active", + "alarmInterfaceA": "aaaa", + "status": "active" + }, + { + "id": 18, + "version": "3", + "eventName": "Fault_MultiCloud_VMFailureCleared", + "domain": "fault", + "eventId": "ab305d54-85b4-a31b-7db2-fb6b9e546015", + "eventType": null, + "nfcNamingCode": null, + "nfNamingCode": null, + "sourceId": "shentao-test-2005", + "sourceName": "shentao-test-2005", + "reportingEntityId": null, + "reportingEntityName": "Multi-Cloud", + "priority": "High", + "startEpochMicrosec": "1516784364860", + "lastEpochMicroSec": "1516784364860", + "startEpochMicrosecCleared": "112", + "lastEpochMicroSecCleared": "112", + "sequence": "0", + "faultFieldsVersion": "2", + "eventServrity": "CRITICAL", + "eventSourceType": "other", + "eventCategory": null, + "alarmCondition": "Guest_Os_Failure", + "specificProblem": "Fault_MultiCloud_VMFailure", + "vfStatus": "Active", + "alarmInterfaceA": "aaaa", + "status": "active" + }, + { + "id": 19, + "version": "3", + "eventName": "Fault_MultiCloud_VMFailureCleared", + "domain": "fault", + "eventId": "ab305d54-85b4-a31b-7db2-fb6b9e546015", + "eventType": null, + "nfcNamingCode": null, + "nfNamingCode": null, + "sourceId": "shentao-test-3001", + "sourceName": "shentao-test-3001", + "reportingEntityId": null, + "reportingEntityName": "Multi-Cloud", + "priority": "High", + "startEpochMicrosec": "1516784364860", + "lastEpochMicroSec": "1516784364860", + "startEpochMicrosecCleared": "112", + "lastEpochMicroSecCleared": "112", + "sequence": "0", + "faultFieldsVersion": "2", + "eventServrity": "CRITICAL", + "eventSourceType": "other", + "eventCategory": null, + "alarmCondition": "Guest_Os_Failure", + "specificProblem": "Fault_MultiCloud_VMFailure", + "vfStatus": "Active", + "alarmInterfaceA": "aaaa", + "status": "active" + }, + { + "id": 20, + "version": "3", + "eventName": "Fault_MultiCloud_VMFailureCleared", + "domain": "fault", + "eventId": "ab305d54-85b4-a31b-7db2-fb6b9e546015", + "eventType": null, + "nfcNamingCode": null, + "nfNamingCode": null, + "sourceId": "shentao-test-3003", + "sourceName": "vnf_a_3", + "reportingEntityId": null, + "reportingEntityName": "Multi-Cloud", + "priority": "High", + "startEpochMicrosec": "1516784364860", + "lastEpochMicroSec": "1516784364860", + "startEpochMicrosecCleared": "112", + "lastEpochMicroSecCleared": "112", + "sequence": "0", + "faultFieldsVersion": "2", + "eventServrity": "CRITICAL", + "eventSourceType": "other", + "eventCategory": null, + "alarmCondition": "Guest_Os_Failure", + "specificProblem": "Fault_MultiCloud_VMFailure", + "vfStatus": "Active", + "alarmInterfaceA": "aaaa", + "status": "active" + }, + { + "id": 21, + "version": "3", + "eventName": "Fault_MultiCloud_VMFailureCleared", + "domain": "fault", + "eventId": "ab305d54-85b4-a31b-7db2-fb6b9e546015", + "eventType": null, + "nfcNamingCode": null, + "nfNamingCode": null, + "sourceId": "shentao-test-3004", + "sourceName": "vnf_a_3", + "reportingEntityId": null, + "reportingEntityName": "Multi-Cloud", + "priority": "High", + "startEpochMicrosec": "1516784364860", + "lastEpochMicroSec": "1516784364860", + "startEpochMicrosecCleared": "112", + "lastEpochMicroSecCleared": "112", + "sequence": "0", + "faultFieldsVersion": "2", + "eventServrity": "CRITICAL", + "eventSourceType": "other", + "eventCategory": null, + "alarmCondition": "Guest_Os_Failure", + "specificProblem": "Fault_MultiCloud_VMFailure", + "vfStatus": "Active", + "alarmInterfaceA": "aaaa", + "status": "active" + }, + { + "id": 22, + "version": "3", + "eventName": "Fault_MultiCloud_VMFailure", + "domain": "fault", + "eventId": "ab305d54-85b4-a31b-7db2-fb6b9e546015", + "eventType": null, + "nfcNamingCode": null, + "nfNamingCode": null, + "sourceId": "vnf_a_20180205_2", + "sourceName": "vnf_b_3", + "reportingEntityId": null, + "reportingEntityName": "vnf_a_20180205_2", + "priority": "High", + "startEpochMicrosec": "1516784364860", + "lastEpochMicroSec": "1516784364860", + "startEpochMicrosecCleared": "", + "lastEpochMicroSecCleared": "", + "sequence": "0", + "faultFieldsVersion": "2", + "eventServrity": "CRITICAL", + "eventSourceType": "other", + "eventCategory": null, + "alarmCondition": "Guest_Os_Failure", + "specificProblem": "Fault_MultiCloud_VMFailure", + "vfStatus": "Active", + "alarmInterfaceA": "aaaa", + "status": "active" + } + ], + "countActive": 12, + "reportingEntityNameList": [ + "vnf_a_20180205_2", + "Multi-Cloud" + ], + "sourceNameList": [ + "shentao-test-2001", + "shentao-test-3001", + "shentao-test-1001", + "shentao-test-2002", + "vnf_a_3", + "shentao-test-1002", + "shentao-test-2003", + "vnf_b_3", + "shentao-test-1003", + "vnf_a_1", + "shentao-test-2005" + ] +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/mock/json/allotted-resources2.json b/usecaseui-portal/src/app/mock/json/allotted-resources2.json new file mode 100644 index 00000000..29262e5d --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/allotted-resources2.json @@ -0,0 +1 @@ +{"allotted-resource":[{"id":"8beee9a7-abf0-4c98-8073-1d4d03e50033","description":"sdwan-attachment","selflink":"","model-invariant-id":"3d369bb8-5546-41d4-a3e7-a2557295ae40","model-version-id":"78ed8099-90a5-49b4-a400-89f38a7cbe6e","resource-version":"1537857961665","orchestration-status":"","operational-status":"","type":"","role":"spoke","allotted-resource-name":"sdwan ar","access-provider-id":"","access-client-id":"","access-topology-id":"","access-node-id":"","access-ltp-id":"","cvlan":"","vpn-name":"SDWANVPNInfra","relationship-list":{"relationship":[{"related-to":"service-instance","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/15e88f8e-473f-4d88-92f8-6739a42baa2g","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"15e88f8e-473f-4d88-92f8-6739a42baa2g"}],"related-to-property":[{"property-key":"service-instance.service-instance-name","property-value":"SDWANVPNInfra"}]}]}},{"id":"28f2b69e-c489-48fa-b974-166104eb15c9","description":"sotn-attachment","selflink":"","model-invariant-id":"d92ce7ca-ca87-4830-972e-83ae9857ded7","model-version-id":"3704879e-b07e-4a15-b8fd-f047f966a261","resource-version":"1537858263268","orchestration-status":"","operational-status":"","type":"","role":"spoke","allotted-resource-name":"sotn ar","access-provider-id":"","access-client-id":"","access-topology-id":"","access-node-id":"","access-ltp-id":"","cvlan":"","vpn-name":"SOTNVPNInfra","relationship-list":{"relationship":[{"related-to":"service-instance","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0"}],"related-to-property":[{"property-key":"service-instance.service-instance-name","property-value":"SOTNVPNInfra"}]},{"related-to":"p-interface","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/network/pnfs/pnf/11.11.11.11/p-interfaces/p-interface/nodeId-11.11.11.11-ltpId-36","relationship-data":[{"relationship-key":"pnf.pnf-name","relationship-value":"11.11.11.11"},{"relationship-key":"p-interface.interface-name","relationship-value":"nodeId-79.79.79.79-ltpId-2"}],"related-to-property":[{"property-key":"p-interface.prov-status"}]}]}}]} \ No newline at end of file diff --git a/usecaseui-portal/src/app/mock/json/createService.json b/usecaseui-portal/src/app/mock/json/createService.json new file mode 100644 index 00000000..f1d64485 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/createService.json @@ -0,0 +1,7 @@ + +{ + "service":{ + "serviceId":"044377e5-3dd4-4f84-86a0-02dab3c43bc5", + "operationId":"1e606677-7864-4bec-b50c-adcd858e4cd8" + } +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/mock/json/customers.json b/usecaseui-portal/src/app/mock/json/customers.json new file mode 100644 index 00000000..9c66eff4 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/customers.json @@ -0,0 +1,82 @@ + + +[ + { + "global-customer-id": "Democcy", + "subscriber-name": "Democcy", + "subscriber-type": "INFRA", + "resource-version": "1535601196964" + }, + { + "global-customer-id": "support", + "subscriber-name": "testccccccccsssssssssseeeeeeeeeee", + "subscriber-type": "CUST", + "resource-version": "1536069070995" + }, + { + "global-customer-id": "Demonstration", + "subscriber-name": "Demonstration", + "subscriber-type": "INFRA", + "resource-version": "1535080521665" + }, + { + "global-customer-id": "Orange", + "subscriber-name": "test", + "subscriber-type": "CUST", + "resource-version": "1535865156826" + }, + { + "global-customer-id": "Orange5", + "subscriber-name": "test", + "subscriber-type": "CUST", + "resource-version": "1529978907607" + }, + { + "global-customer-id": "wale", + "subscriber-name": "test", + "subscriber-type": "CUST", + "resource-version": "1536058660948" + }, + { + "global-customer-id": "kiwi", + "subscriber-name": "test", + "subscriber-type": "CUST", + "resource-version": "1536042103511" + }, + { + "global-customer-id": "Apple", + "subscriber-name": "test", + "subscriber-type": "CUST", + "resource-version": "1535971300786" + }, + { + "global-customer-id": "Tiger", + "subscriber-name": "test", + "subscriber-type": "CUST", + "resource-version": "1535977578133" + }, + { + "global-customer-id": "Deer", + "subscriber-name": "test", + "subscriber-type": "CUST", + "resource-version": "1535988232470" + }, + { + "global-customer-id": "Bear", + "subscriber-name": "test", + "subscriber-type": "CUST", + "resource-version": "1536041229105" + }, + { + "global-customer-id": "Panda", + "subscriber-name": "test", + "subscriber-type": "CUST", + "resource-version": "1536038628045" + }, + { + "global-customer-id": "Lion", + "subscriber-name": "test", + "subscriber-type": "CUST", + "resource-version": "1535986050695" + } +] diff --git a/usecaseui-portal/src/app/mock/json/deleteService.json b/usecaseui-portal/src/app/mock/json/deleteService.json new file mode 100644 index 00000000..19a7ab5e --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/deleteService.json @@ -0,0 +1,4 @@ + +{ + "operationId":"1e606677-7864-4bec-b50c-adcd858e4cd8" +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/mock/json/detailsData.json b/usecaseui-portal/src/app/mock/json/detailsData.json new file mode 100644 index 00000000..41ee87b8 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/detailsData.json @@ -0,0 +1,19 @@ +{ + "sotnVpnInfo":{ + "name":"xdwgwe","description":"hahahah", + "startTime":"2017-07-03","endTime":"2018-07-05", + "COS":"premium","reroute":"Yes", + "SLS":"sfsadf","dualLink":"Yes", + "CIR":"dafdafd","EIR":"sddddddd", + "CBS":"dafdaf","EBS":"qqqqqqqwwwwwww", + "colorAware":"Yes","couplingFlag":"No" + }, + "siteList":[ + {"name":"xiaoming","description":"congming","postcode":"xxxx","address":"beijing","sotnVpnName":"buzhid","vlan":"aaa"}, + {"name":"xiaogang","description":"congming","postcode":"xxxx","address":"guangzhou","sotnVpnName":"buzhid","vlan":"aaa"} + ], + "siteGroupList":[ + {"id":"123","name":"sssiy","topology":"hahahha","sites":"xxxxx","rloe":"eeexxxx"}, + {"id":"3333","name":"sssiy","topology":"hahahha","sites":"xxxxx","rloe":"eeexxxx"} + ] +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/mock/json/e2eServiceTemplateParameters.json b/usecaseui-portal/src/app/mock/json/e2eServiceTemplateParameters.json new file mode 100644 index 00000000..5ad5b102 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/e2eServiceTemplateParameters.json @@ -0,0 +1,71 @@ +{ + "templateParameters": { + "inputs": [ + { + "name": "11111", + "type": "string", + "description": "3333333", + "defaultValue": "44444444", + "isRequired": "", + "readonly": "" + }, + { + "name": "22222", + "type": "boolean", + "description": "3333333", + "defaultValue": "44444444", + "isRequired": "", + "readonly": "" + }, + { + "name": "33333", + "type": "integer", + "description": "3333333", + "defaultValue": "44444444", + "isRequired": "", + "readonly": "" + }, + { + "name": "44444", + "type": "vf_location", + "description": "3333333", + "defaultValue": "44444444", + "isRequired": "", + "readonly": "" + }, + { + "name": "55555", + "type": "sdn_controller", + "description": "3333333", + "defaultValue": "44444444", + "isRequired": "", + "readonly": "" + } + ], + "nestedTemplate": [ + { + "name": "demo_vims_e2e_zte", + "invariantUUID": "1", + "uuid": "1", + "type": "", + "parameters": "", + "inputs": [ + { + "type": "vf_location", + "description": "", + "name": "r1_spgw_zte*", + "isRequired": "", + "value": "1111" + }, + { + "type": "sdn_controller", + "description": "", + "name": "sdncontroller*", + "isRequired": "", + "value": "22222" + } + ] + } + ] + } +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/mock/json/homeAllData.json b/usecaseui-portal/src/app/mock/json/homeAllData.json new file mode 100644 index 00000000..ce4e5d6e --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/homeAllData.json @@ -0,0 +1,23 @@ +{ + "services":{ + "number":200, + "chartdata":[ + {"value":125, "name":"user1"}, + {"value":290, "name":"user2"}, + {"value":220, "name":"user3"} + ] + }, + "performance":{ + "per_Vnf":154, + "per_VmPm":325 + }, + "alarm":{ + "chartdata":[ + {"value":325,"name":"Active"}, + {"value":200,"name":"Closed"} + ] + }, + "Vm_performance":{ + "names":["aaaaa","bbbbb","ccccc","ddddd","eeeee"] + } +} diff --git a/usecaseui-portal/src/app/mock/json/homePerformanceChartData.json b/usecaseui-portal/src/app/mock/json/homePerformanceChartData.json new file mode 100644 index 00000000..c3848893 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/homePerformanceChartData.json @@ -0,0 +1,4 @@ +{ + "CPU":[30,43,24,32,34,35,42,62,52,35,34,33,43], + "Memory":[24,23,24,12,34,15,22,22,32,15,24,13,23] +} diff --git a/usecaseui-portal/src/app/mock/json/instanceTableData.json b/usecaseui-portal/src/app/mock/json/instanceTableData.json new file mode 100644 index 00000000..73f12873 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/instanceTableData.json @@ -0,0 +1,505 @@ +{ + "service-instance": [ + { + "service-instance-id": "35e88f8e-473f-4d88-92f8-6739a42baa23", + "service-instance-name": "SDWANVPNInfra1", + "service-type": "E2E Service", + "service-role": "E2E Service", + "model-invariant-id": "88dcb2f0-085b-4548-8b93-0882e37d25d8", + "model-version-id": "462f84e5-f0e5-44c5-ab95-38fb4bf77064", + "resource-version": "1535687551051", + "input-parameters": "{\n \"service\":{\n \"name\":\"SDWANVPNInfra\",\n \"description\":\"SDWANVPNInfra\",\n \"serviceInvariantUuid\":\"88dcb2f0-085b-4548-8b93-0882e37d25d8\",\n \"serviceUuid\":\"462f84e5-f0e5-44c5-ab95-38fb4bf77064\",\n \"globalSubscriberId\":\"Demonstration\",\n \"serviceType\":\"CCVPN\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SDWANConnectivity 0\",\n \"resourceInvariantUuid\":\"f99a9a23-c88e-44ff-a4dc-22b88675d278\",\n \"resourceUuid\":\"7baa7742-3a13-4288-8330-868015adc340\",\n \"resourceCustomizationUuid\":\"94ec574b-2306-4cbd-8214-09662b040f73\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF 0\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"a7baba5d-6ac3-42b5-b47d-070841303ab1\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"sdwanconnectivity0_name\":\"CMCCVPN\",\n \"sdwanconnectivity0_topology\":\"hub-spoke\"\n }\n }\n }\n}", + "relationship-list": { + "relationship": [ + { + "related-to": "sdwan-vpn", + "relationship-label": "org.onap.relationships.inventory.PartOf", + "related-link": "/aai/v13/network/sdwan-vpns/sdwan-vpn/4efe6dff-acfc-4d13-a3fd-1177d3c08e89", + "relationship-data": [ + { + "relationship-key": "sdwan-vpn.sdwan-vpn-id", + "relationship-value": "4efe6dff-acfc-4d13-a3fd-1177d3c08e89" + } + ], + "related-to-property": [ + { + "property-key": "sdwan-vpn.sdwan-vpn-name", + "property-value": "vdfvpn" + } + ] + }, + { + "related-to": "sp-partner", + "relationship-label": "org.onap.relationships.inventory.PartOf", + "related-link": "/aai/v13/business/sp-partners/sp-partner/1b9c677d-fddf-4b70-938b-925a7fa57d00", + "relationship-data": [ + { + "relationship-key": "sp-partner.sp-partner-id", + "relationship-value": "1b9c677d-fddf-4b70-938b-925a7fa57d00" + } + ], + "related-to-property": [ + { + "property-key": "sp-partner.sp-partner-id", + "property-value": "1b9c677d-fddf-4b70-938b-925a7fa57d00" + } + ] + }, + { + "related-to": "allotted-resource", + "relationship-label": "org.onap.relationships.inventory.Uses", + "related-link": "/aai/v13/business/customers/customer/Democcy/service-subscriptions/service-subscription/CCVPN/service-instances/service-instance/189b87a5-72fe-4197-a307-6929c3831f81/allotted-resources/allotted-resource/2214feec-1aef-4890-abba-f8f3a906935f", + "relationship-data": [ + { + "relationship-key": "customer.global-customer-id", + "relationship-value": "Democcy" + }, + { + "relationship-key": "service-subscription.service-type", + "relationship-value": "CCVPN" + }, + { + "relationship-key": "service-instance.service-instance-id", + "relationship-value": "189b87a5-72fe-4197-a307-6929c3831f81" + }, + { + "relationship-key": "allotted-resource.id", + "relationship-value": "2214feec-1aef-4890-abba-f8f3a906935f" + } + ], + "related-to-property": [ + { + "property-key": "allotted-resource.description", + "property-value": "2214feec-1aef-4890-abba-f8f3a906935f" + }, + { + "property-key": "allotted-resource.allotted-resource-name", + "property-value": "sdwan ar" + } + ] + }, + { + "related-to": "allotted-resource", + "relationship-label": "org.onap.relationships.inventory.Uses", + "related-link": "/aai/v13/business/customers/customer/Democcy/service-subscriptions/service-subscription/CCVPN/service-instances/service-instance/089b87a5-72fe-4197-a307-6929c3831f80/allotted-resources/allotted-resource/1114feec-1aef-4890-abba-f8f3a906935f", + "relationship-data": [ + { + "relationship-key": "customer.global-customer-id", + "relationship-value": "Democcy" + }, + { + "relationship-key": "service-subscription.service-type", + "relationship-value": "CCVPN" + }, + { + "relationship-key": "service-instance.service-instance-id", + "relationship-value": "089b87a5-72fe-4197-a307-6929c3831f80" + }, + { + "relationship-key": "allotted-resource.id", + "relationship-value": "1114feec-1aef-4890-abba-f8f3a906935f" + } + ], + "related-to-property": [ + { + "property-key": "allotted-resource.description", + "property-value": "1114feec-1aef-4890-abba-f8f3a906935f" + }, + { + "property-key": "allotted-resource.allotted-resource-name", + "property-value": "sdwan ar" + } + ] + } + ] + } + }, + { + "service-instance-id": "15e88f8e-473f-4d88-92f8-6739a42baa2g", + "service-instance-name": "SDWANVPNInfra", + "service-type": "E2E Service", + "service-role": "E2E Service", + "model-invariant-id": "88dcb2f0-085b-4548-8b93-0882e37d25d8", + "model-version-id": "462f84e5-f0e5-44c5-ab95-38fb4bf77064", + "resource-version": "1535687578298", + "input-parameters": "{\n \"service\":{\n \"name\":\"SDWANVPNInfra\",\n \"description\":\"SDWANVPNInfra\",\n \"serviceInvariantUuid\":\"88dcb2f0-085b-4548-8b93-0882e37d25d8\",\n \"serviceUuid\":\"462f84e5-f0e5-44c5-ab95-38fb4bf77064\",\n \"globalSubscriberId\":\"Demonstration\",\n \"serviceType\":\"CCVPN\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SDWANConnectivity 0\",\n \"resourceInvariantUuid\":\"f99a9a23-c88e-44ff-a4dc-22b88675d278\",\n \"resourceUuid\":\"7baa7742-3a13-4288-8330-868015adc340\",\n \"resourceCustomizationUuid\":\"94ec574b-2306-4cbd-8214-09662b040f73\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF 0\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"a7baba5d-6ac3-42b5-b47d-070841303ab1\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"sdwanconnectivity0_name\":\"CMCCVPN\",\n \"sdwanconnectivity0_topology\":\"hub-spoke\"\n }\n }\n }\n}", + "relationship-list": { + "relationship": [ + { + "related-to": "sdwan-vpn", + "relationship-label": "org.onap.relationships.inventory.PartOf", + "related-link": "/aai/v13/network/sdwan-vpns/sdwan-vpn/4efe6dff-acfc-4d13-a3fd-1177d3c08e86", + "relationship-data": [ + { + "relationship-key": "sdwan-vpn.sdwan-vpn-id", + "relationship-value": "4efe6dff-acfc-4d13-a3fd-1177d3c08e86" + } + ], + "related-to-property": [ + { + "property-key": "sdwan-vpn.sdwan-vpn-name", + "property-value": "cmccvpn" + } + ] + }, + { + "related-to": "sp-partner", + "relationship-label": "org.onap.relationships.inventory.PartOf", + "related-link": "/aai/v13/business/sp-partners/sp-partner/1b9c677d-fddf-4b70-938b-925a7fa57d11", + "relationship-data": [ + { + "relationship-key": "sp-partner.sp-partner-id", + "relationship-value": "1b9c677d-fddf-4b70-938b-925a7fa57d11" + } + ], + "related-to-property": [ + { + "property-key": "sp-partner.sp-partner-id", + "property-value": "1b9c677d-fddf-4b70-938b-925a7fa57d11" + } + ] + } + ] + } + }, + { + "service-instance-id": "089b87a5-72fe-4197-a307-6929c3831f80", + "service-instance-name": "SiteBeijing", + "service-type": "E2E Service", + "service-role": "E2E Service", + "model-invariant-id": "5c13f3fb-2744-4635-9f1f-c59c92dc8f70", + "model-version-id": "3a76b1f5-fb0d-4b6b-82d5-0e8a4ebc3838", + "resource-version": "1535686434430", + "input-parameters": "{\n \"service\":{\n \"name\":\"SiteService\",\n \"description\":\"SiteService\",\n \"serviceInvariantUuid\":\"5c13f3fb-2744-4635-9f1f-c59c92dc8f70\",\n \"serviceUuid\":\"3a76b1f5-fb0d-4b6b-82d5-0e8a4ebc3838\",\n \"globalSubscriberId\":\"Demonstration\",\n \"serviceType\":\"CCVPN\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SiteVF\",\n \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"mpls\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"deviceVF\",\n \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sdwanvpnattachmentVF\",\n \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"internet\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sotnvpnattachmentvF\",\n \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"devicevf_device_class\":\"PNF\",\n \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n \"devicevf_device_name\":\"50.47\",\n \"devicevf_device_systemIp\":\"192.168.1.47\",\n \"devicevf_device_type\":\"AR161EW\",\n \"devicevf_device_vendor\":\"huawei\",\n \"devicevf_device_version\":\"1.0\",\n \"internet_sitewanport_description\":\"internet\",\n \"internet_sitewanport_deviceName\":\"50.47\",\n \"internet_sitewanport_inputBandwidth\":\"100\",\n \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n \"internet_sitewanport_name\":\"internet\",\n \"internet_sitewanport_outputBandwidth\":\"100\",\n \"internet_sitewanport_portNumber\":\"0/0/2\",\n \"internet_sitewanport_portType\":\"GE\",\n \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n \"internet_sitewanport_transportNetworkName\":\"internet\",\n \"mpls_sitewanport_description\":\"mpls\",\n \"mpls_sitewanport_deviceName\":\"50.47\",\n \"mpls_sitewanport_inputBandwidth\":\"100\",\n \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n \"mpls_sitewanport_name\":\"mpls\",\n \"mpls_sitewanport_outputBandwidth\":\"100\",\n \"mpls_sitewanport_portNumber\":\"0/0/1\",\n \"mpls_sitewanport_portType\":\"GE\",\n \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n \"mpls_sitewanport_transportNetworkName\":\"internet\",\n \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"CMCCVPN\",\n \"sitevf_site_address\":\"beijing beiqing road\",\n \"sitevf_site_controlPoint\":\"CMCC_VCPE\",\n \"sitevf_site_description\":\"CMCC_CPE\",\n \"sitevf_site_emails\":\"\",\n \"sitevf_site_latitude\":\"\",\n \"sitevf_site_longitude\":\"\",\n \"sitevf_site_name\":\"CMCC_CPE1\",\n \"sitevf_site_postcode\":\"100095\",\n \"sitevf_site_role\":\"sd-wan-edge\",\n \"sitevf_site_type\":\"single-gateway\",\n \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n }\n }\n }\n}", + "relationship-list": { + "relationship": [ + { + "related-to": "sp-partner", + "relationship-label": "org.onap.relationships.inventory.PartOf", + "related-link": "/aai/v13/business/sp-partners/sp-partner/1b9c677d-fddf-4b70-938b-925a7fa57d22", + "relationship-data": [ + { + "relationship-key": "sp-partner.sp-partner-id", + "relationship-value": "1b9c677d-fddf-4b70-938b-925a7fa57d22" + } + ], + "related-to-property": [ + { + "property-key": "sp-partner.sp-partner-id", + "property-value": "1b9c677d-fddf-4b70-938b-925a7fa57d22" + } + ] + }, + { + "related-to": "device", + "relationship-label": "org.onap.relationships.inventory.PartOf", + "related-link": "/aai/v13/network/devices/device/6e0d83f3-f4f5-4a24-9462-712b52ac6700", + "relationship-data": [ + { + "relationship-key": "device.device-id", + "relationship-value": "6e0d83f3-f4f5-4a24-9462-712b52ac6700" + } + ], + "related-to-property": [ + { + "property-key": "device.device-name" + } + ] + }, + { + "related-to": "wan-port-config", + "relationship-label": "org.onap.relationships.inventory.PartOf", + "related-link": "/aai/v13/network/wan-port-configs/wan-port-config/aaa3e552-08c4-4697-aeeb-d8d3e09ce58e", + "relationship-data": [ + { + "relationship-key": "wan-port-config.wan-port-config-id", + "relationship-value": "aaa3e552-08c4-4697-aeeb-d8d3e09ce58e" + } + ], + "related-to-property": [ + { + "property-key": "wan-port-config.wan-port-config-name", + "property-value": "mpls" + } + ] + }, + { + "related-to": "site-resource", + "relationship-label": "org.onap.relationships.inventory.PartOf", + "related-link": "/aai/v13/network/site-resources/site-resource/aa2de9d8-d76b-4134-b5f1-41e79056adbe", + "relationship-data": [ + { + "relationship-key": "site-resource.site-resource-id", + "relationship-value": "aa2de9d8-d76b-4134-b5f1-41e79056adbe" + } + ], + "related-to-property": [ + { + "property-key": "site-resource.site-resource-name", + "property-value": "cmcc-spokesite" + } + ] + } + ] + } + }, + { + "service-instance-id": "189b87a5-72fe-4197-a307-6929c3831f81", + "service-instance-name": "SiteBeijingDC", + "service-type": "E2E Service", + "service-role": "E2E Service", + "model-invariant-id": "5c13f3fb-2744-4635-9f1f-c59c92dc8f70", + "model-version-id": "3a76b1f5-fb0d-4b6b-82d5-0e8a4ebc3838", + "resource-version": "1535686458510", + "input-parameters": "{\n \"service\":{\n \"name\":\"SiteService\",\n \"description\":\"SiteService\",\n \"serviceInvariantUuid\":\"5c13f3fb-2744-4635-9f1f-c59c92dc8f70\",\n \"serviceUuid\":\"3a76b1f5-fb0d-4b6b-82d5-0e8a4ebc3838\",\n \"globalSubscriberId\":\"Demonstration\",\n \"serviceType\":\"CCVPN\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SiteVF\",\n \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"mpls\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"deviceVF\",\n \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sdwanvpnattachmentVF\",\n \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"internet\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sotnvpnattachmentvF\",\n \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"devicevf_device_class\":\"PNF\",\n \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n \"devicevf_device_name\":\"50.47\",\n \"devicevf_device_systemIp\":\"192.168.1.47\",\n \"devicevf_device_type\":\"AR161EW\",\n \"devicevf_device_vendor\":\"huawei\",\n \"devicevf_device_version\":\"1.0\",\n \"internet_sitewanport_description\":\"internet\",\n \"internet_sitewanport_deviceName\":\"50.47\",\n \"internet_sitewanport_inputBandwidth\":\"100\",\n \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n \"internet_sitewanport_name\":\"internet\",\n \"internet_sitewanport_outputBandwidth\":\"100\",\n \"internet_sitewanport_portNumber\":\"0/0/2\",\n \"internet_sitewanport_portType\":\"GE\",\n \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n \"internet_sitewanport_transportNetworkName\":\"internet\",\n \"mpls_sitewanport_description\":\"mpls\",\n \"mpls_sitewanport_deviceName\":\"50.47\",\n \"mpls_sitewanport_inputBandwidth\":\"100\",\n \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n \"mpls_sitewanport_name\":\"mpls\",\n \"mpls_sitewanport_outputBandwidth\":\"100\",\n \"mpls_sitewanport_portNumber\":\"0/0/1\",\n \"mpls_sitewanport_portType\":\"GE\",\n \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n \"mpls_sitewanport_transportNetworkName\":\"internet\",\n \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"CMCCVPN\",\n \"sitevf_site_address\":\"beijing beiqing road\",\n \"sitevf_site_controlPoint\":\"CMCC_VCPE\",\n \"sitevf_site_description\":\"CMCC_CPE\",\n \"sitevf_site_emails\":\"\",\n \"sitevf_site_latitude\":\"\",\n \"sitevf_site_longitude\":\"\",\n \"sitevf_site_name\":\"CMCC_CPE2\",\n \"sitevf_site_postcode\":\"100095\",\n \"sitevf_site_role\":\"sd-wan-edge\",\n \"sitevf_site_type\":\"single-gateway\",\n \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n }\n }\n }\n}", + "relationship-list": { + "relationship": [ + { + "related-to": "sp-partner", + "relationship-label": "org.onap.relationships.inventory.PartOf", + "related-link": "/aai/v13/business/sp-partners/sp-partner/1b9c677d-fddf-4b70-938b-925a7fa57d33", + "relationship-data": [ + { + "relationship-key": "sp-partner.sp-partner-id", + "relationship-value": "1b9c677d-fddf-4b70-938b-925a7fa57d33" + } + ], + "related-to-property": [ + { + "property-key": "sp-partner.sp-partner-id", + "property-value": "1b9c677d-fddf-4b70-938b-925a7fa57d33" + } + ] + }, + { + "related-to": "site-resource", + "relationship-label": "org.onap.relationships.inventory.PartOf", + "related-link": "/aai/v13/network/site-resources/site-resource/bb2de9d8-d76b-4134-b5f1-41e79056adbe", + "relationship-data": [ + { + "relationship-key": "site-resource.site-resource-id", + "relationship-value": "bb2de9d8-d76b-4134-b5f1-41e79056adbe" + } + ], + "related-to-property": [ + { + "property-key": "site-resource.site-resource-name", + "property-value": "cmcc-hubsite" + } + ] + }, + { + "related-to": "device", + "relationship-label": "org.onap.relationships.inventory.PartOf", + "related-link": "/aai/v13/network/devices/device/6e0d83f3-f4f5-4a24-9462-712b52ac6711", + "relationship-data": [ + { + "relationship-key": "device.device-id", + "relationship-value": "6e0d83f3-f4f5-4a24-9462-712b52ac6711" + } + ], + "related-to-property": [ + { + "property-key": "device.device-name", + "property-value": "cmcc_hub" + } + ] + }, + { + "related-to": "wan-port-config", + "relationship-label": "org.onap.relationships.inventory.PartOf", + "related-link": "/aai/v13/network/wan-port-configs/wan-port-config/bba3e552-08c4-4697-aeeb-d8d3e09ce58e", + "relationship-data": [ + { + "relationship-key": "wan-port-config.wan-port-config-id", + "relationship-value": "bba3e552-08c4-4697-aeeb-d8d3e09ce58e" + } + ], + "related-to-property": [ + { + "property-key": "wan-port-config.wan-port-config-name", + "property-value": "mpls" + } + ] + } + ] + } + }, + { + "service-instance-id": "289b87a5-72fe-4197-a307-6929c3831f82", + "service-instance-name": "SiteLondonDC", + "service-type": "E2E Service", + "service-role": "E2E Service", + "model-invariant-id": "5c13f3fb-2744-4635-9f1f-c59c92dc8f70", + "model-version-id": "3a76b1f5-fb0d-4b6b-82d5-0e8a4ebc3838", + "resource-version": "1535686481928", + "input-parameters": "{\n \"service\":{\n \"name\":\"SiteService\",\n \"description\":\"SiteService\",\n \"serviceInvariantUuid\":\"5c13f3fb-2744-4635-9f1f-c59c92dc8f70\",\n \"serviceUuid\":\"3a76b1f5-fb0d-4b6b-82d5-0e8a4ebc3838\",\n \"globalSubscriberId\":\"Demonstration\",\n \"serviceType\":\"CCVPN\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SiteVF\",\n \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"mpls\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"deviceVF\",\n \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sdwanvpnattachmentVF\",\n \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"internet\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sotnvpnattachmentvF\",\n \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"devicevf_device_class\":\"PNF\",\n \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n \"devicevf_device_name\":\"50.47\",\n \"devicevf_device_systemIp\":\"192.168.1.47\",\n \"devicevf_device_type\":\"AR161EW\",\n \"devicevf_device_vendor\":\"huawei\",\n \"devicevf_device_version\":\"1.0\",\n \"internet_sitewanport_description\":\"internet\",\n \"internet_sitewanport_deviceName\":\"50.47\",\n \"internet_sitewanport_inputBandwidth\":\"100\",\n \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n \"internet_sitewanport_name\":\"internet\",\n \"internet_sitewanport_outputBandwidth\":\"100\",\n \"internet_sitewanport_portNumber\":\"0/0/2\",\n \"internet_sitewanport_portType\":\"GE\",\n \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n \"internet_sitewanport_transportNetworkName\":\"internet\",\n \"mpls_sitewanport_description\":\"mpls\",\n \"mpls_sitewanport_deviceName\":\"50.47\",\n \"mpls_sitewanport_inputBandwidth\":\"100\",\n \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n \"mpls_sitewanport_name\":\"mpls\",\n \"mpls_sitewanport_outputBandwidth\":\"100\",\n \"mpls_sitewanport_portNumber\":\"0/0/1\",\n \"mpls_sitewanport_portType\":\"GE\",\n \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n \"mpls_sitewanport_transportNetworkName\":\"internet\",\n \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"CMCCVPN\",\n \"sitevf_site_address\":\"beijing beiqing road\",\n \"sitevf_site_controlPoint\":\"CMCC_VCPE\",\n \"sitevf_site_description\":\"CMCC_CPE\",\n \"sitevf_site_emails\":\"\",\n \"sitevf_site_latitude\":\"\",\n \"sitevf_site_longitude\":\"\",\n \"sitevf_site_name\":\"CMCC_CPE3\",\n \"sitevf_site_postcode\":\"100095\",\n \"sitevf_site_role\":\"sd-wan-edge\",\n \"sitevf_site_type\":\"single-gateway\",\n \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n }\n }\n }\n}", + "relationship-list": { + "relationship": [ + { + "related-to": "sp-partner", + "relationship-label": "org.onap.relationships.inventory.PartOf", + "related-link": "/aai/v13/business/sp-partners/sp-partner/1b9c677d-fddf-4b70-938b-925a7fa57d44", + "relationship-data": [ + { + "relationship-key": "sp-partner.sp-partner-id", + "relationship-value": "1b9c677d-fddf-4b70-938b-925a7fa57d44" + } + ], + "related-to-property": [ + { + "property-key": "sp-partner.sp-partner-id", + "property-value": "1b9c677d-fddf-4b70-938b-925a7fa57d44" + } + ] + } + ] + } + }, + { + "service-instance-id": "389b87a5-72fe-4197-a307-6929c3831f83", + "service-instance-name": "SiteLondon", + "service-type": "E2E Service", + "service-role": "E2E Service", + "model-invariant-id": "5c13f3fb-2744-4635-9f1f-c59c92dc8f70", + "model-version-id": "3a76b1f5-fb0d-4b6b-82d5-0e8a4ebc3838", + "resource-version": "1535686521672", + "input-parameters": "{\n \"service\":{\n \"name\":\"SiteService\",\n \"description\":\"SiteService\",\n \"serviceInvariantUuid\":\"5c13f3fb-2744-4635-9f1f-c59c92dc8f70\",\n \"serviceUuid\":\"3a76b1f5-fb0d-4b6b-82d5-0e8a4ebc3838\",\n \"globalSubscriberId\":\"Demonstration\",\n \"serviceType\":\"CCVPN\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SiteVF\",\n \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"mpls\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"deviceVF\",\n \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sdwanvpnattachmentVF\",\n \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"internet\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sotnvpnattachmentvF\",\n \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"devicevf_device_class\":\"PNF\",\n \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n \"devicevf_device_name\":\"50.47\",\n \"devicevf_device_systemIp\":\"192.168.1.47\",\n \"devicevf_device_type\":\"AR161EW\",\n \"devicevf_device_vendor\":\"huawei\",\n \"devicevf_device_version\":\"1.0\",\n \"internet_sitewanport_description\":\"internet\",\n \"internet_sitewanport_deviceName\":\"50.47\",\n \"internet_sitewanport_inputBandwidth\":\"100\",\n \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n \"internet_sitewanport_name\":\"internet\",\n \"internet_sitewanport_outputBandwidth\":\"100\",\n \"internet_sitewanport_portNumber\":\"0/0/2\",\n \"internet_sitewanport_portType\":\"GE\",\n \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n \"internet_sitewanport_transportNetworkName\":\"internet\",\n \"mpls_sitewanport_description\":\"mpls\",\n \"mpls_sitewanport_deviceName\":\"50.47\",\n \"mpls_sitewanport_inputBandwidth\":\"100\",\n \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n \"mpls_sitewanport_name\":\"mpls\",\n \"mpls_sitewanport_outputBandwidth\":\"100\",\n \"mpls_sitewanport_portNumber\":\"0/0/1\",\n \"mpls_sitewanport_portType\":\"GE\",\n \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n \"mpls_sitewanport_transportNetworkName\":\"internet\",\n \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"CMCCVPN\",\n \"sitevf_site_address\":\"beijing beiqing road\",\n \"sitevf_site_controlPoint\":\"CMCC_VCPE\",\n \"sitevf_site_description\":\"CMCC_CPE\",\n \"sitevf_site_emails\":\"\",\n \"sitevf_site_latitude\":\"\",\n \"sitevf_site_longitude\":\"\",\n \"sitevf_site_name\":\"CMCC_CPE4\",\n \"sitevf_site_postcode\":\"100095\",\n \"sitevf_site_role\":\"sd-wan-edge\",\n \"sitevf_site_type\":\"single-gateway\",\n \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n }\n }\n }\n}", + "relationship-list": { + "relationship": [ + { + "related-to": "sp-partner", + "relationship-label": "org.onap.relationships.inventory.PartOf", + "related-link": "/aai/v13/business/sp-partners/sp-partner/1b9c677d-fddf-4b70-938b-925a7fa57d55", + "relationship-data": [ + { + "relationship-key": "sp-partner.sp-partner-id", + "relationship-value": "1b9c677d-fddf-4b70-938b-925a7fa57d55" + } + ], + "related-to-property": [ + { + "property-key": "sp-partner.sp-partner-id", + "property-value": "1b9c677d-fddf-4b70-938b-925a7fa57d55" + } + ] + } + ] + } + }, + { + "service-instance-id": "32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0", + "service-instance-name": "SOTNVPNInfra", + "service-type": "E2E Service", + "service-role": "E2E Service", + "model-invariant-id": "21886a96-0664-47a3-beae-766952f2059f", + "model-version-id": "54836196-c411-4690-af98-900c1c3aadd7", + "resource-version": "1535685742159", + "input-parameters": "{\n \"service\":{\n \"name\":\"SOTNVPNInfra\",\n \"description\":\"SOTNVPNInfra\",\n \"serviceInvariantUuid\":\"21886a96-0664-47a3-beae-766952f2059f\",\n \"serviceUuid\":\"54836196-c411-4690-af98-900c1c3aadd7\",\n \"globalSubscriberId\":\"Demonstration\",\n \"serviceType\":\"CCVPN\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SOTNConnectivity 0\",\n \"resourceInvariantUuid\":\"1b9c677d-fddf-4b70-938b-925a7fa57d43\",\n \"resourceUuid\":\"218df3c3-50dd-4c26-9e36-4771387bb771\",\n \"resourceCustomizationUuid\":\"b44071c8-04fd-4d6b-b6af-772cbfaa1129\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF 0\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"c3612284-6c67-4d8c-8b41-b699cc90e76d\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"sotnconnectivity0_eir\":\"1000\",\n \"sotnconnectivity0_cir\":\"1000\",\n \"sotnconnectivity0_endTime\":\"2018-8-8 10:00\",\n \"sotnconnectivity0_ebs\":\"1000\",\n \"sotnconnectivity0_startTime\":\"2018-8-1 10:00\",\n \"sotnconnectivity0_dualLink\":\"true\",\n \"sotnconnectivity0_reroute\":\"false\",\n \"sotnconnectivity0_cbs\":\"1000\",\n \"sotnconnectivity0_name\":\"SOTN L2\",\n \"sotnconnectivity0_SLS\":\"\",\n \"sotnconnectivity0_description\":\"\",\n \"sotnconnectivity0_couplingFlag\":\"\",\n \"sotnconnectivity0_colorAware\":\"\",\n \"sotnconnectivity0_COS\":\"standard\"\n }\n }\n }\n}", + "relationship-list": { + "relationship": [ + { + "related-to": "sp-partner", + "relationship-label": "org.onap.relationships.inventory.PartOf", + "related-link": "/aai/v13/business/sp-partners/sp-partner/1b9c677d-fddf-4b70-938b-925a7fa57d99", + "relationship-data": [ + { + "relationship-key": "sp-partner.sp-partner-id", + "relationship-value": "1b9c677d-fddf-4b70-938b-925a7fa57d99" + } + ], + "related-to-property": [ + { + "property-key": "sp-partner.sp-partner-id", + "property-value": "1b9c677d-fddf-4b70-938b-925a7fa57d99" + } + ] + }, + { + "related-to": "connectivity", + "relationship-label": "org.onap.relationships.inventory.PartOf", + "related-link": "/aai/v13/network/connectivities/connectivity/4efe6dff-acfc-4d13-a3fd-1177d3c08e84", + "relationship-data": [ + { + "relationship-key": "connectivity.connectivity-id", + "relationship-value": "4efe6dff-acfc-4d13-a3fd-1177d3c08e84" + } + ], + "related-to-property": [ + { + "property-key": "connectivity.etht-svc-name", + "property-value": "SOTNVPNInfra" + } + ] + }, + { + "related-to": "allotted-resource", + "relationship-label": "org.onap.relationships.inventory.Uses", + "related-link": "/aai/v13/business/customers/customer/Democcy/service-subscriptions/service-subscription/CCVPN/service-instances/service-instance/189b87a5-72fe-4197-a307-6929c3831f81/allotted-resources/allotted-resource/bb14feec-1aef-4890-abba-f8f3a906935f", + "relationship-data": [ + { + "relationship-key": "customer.global-customer-id", + "relationship-value": "Democcy" + }, + { + "relationship-key": "service-subscription.service-type", + "relationship-value": "CCVPN" + }, + { + "relationship-key": "service-instance.service-instance-id", + "relationship-value": "189b87a5-72fe-4197-a307-6929c3831f81" + }, + { + "relationship-key": "allotted-resource.id", + "relationship-value": "bb14feec-1aef-4890-abba-f8f3a906935f" + } + ], + "related-to-property": [ + { + "property-key": "allotted-resource.description", + "property-value": "bb14feec-1aef-4890-abba-f8f3a906935f" + }, + { + "property-key": "allotted-resource.allotted-resource-name", + "property-value": "ston ar" + } + ] + }, + { + "related-to": "allotted-resource", + "relationship-label": "org.onap.relationships.inventory.Uses", + "related-link": "/aai/v13/business/customers/customer/Democcy/service-subscriptions/service-subscription/CCVPN/service-instances/service-instance/089b87a5-72fe-4197-a307-6929c3831f80/allotted-resources/allotted-resource/aa14feec-1aef-4890-abba-f8f3a906935f", + "relationship-data": [ + { + "relationship-key": "customer.global-customer-id", + "relationship-value": "Democcy" + }, + { + "relationship-key": "service-subscription.service-type", + "relationship-value": "CCVPN" + }, + { + "relationship-key": "service-instance.service-instance-id", + "relationship-value": "089b87a5-72fe-4197-a307-6929c3831f80" + }, + { + "relationship-key": "allotted-resource.id", + "relationship-value": "aa14feec-1aef-4890-abba-f8f3a906935f" + } + ], + "related-to-property": [ + { + "property-key": "allotted-resource.description", + "property-value": "aa14feec-1aef-4890-abba-f8f3a906935f" + }, + { + "property-key": "allotted-resource.allotted-resource-name", + "property-value": "ston ar" + } + ] + } + ] + } + } + ] +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/mock/json/instanceTableData2.json b/usecaseui-portal/src/app/mock/json/instanceTableData2.json new file mode 100644 index 00000000..d29f5f59 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/instanceTableData2.json @@ -0,0 +1,388 @@ +{ + "results": [ + { + "service-subscription": { + "service-type": "{service-type}", + "temp-ub-sub-account-id": "some sub account", + "service-type-id":"sotn", + "service-instances": { + "service-instance": [ + { + "service-instance-id": "uuidxxx", + "service-instance-name": "dddd1", + "environment-context": "some context 1", + "workload-context": "some workload 1", + "input-parameters": "request parameters 1", + "relationship-list": { + "relationship" : [ + ] + } + }, + { + "service-instance-id": "some id 2", + "service-instance-name": "some name 2", + "environment-context": "some context 2", + "workload-context": "some workload 2", + "input-parameters": "request parameters 2", + "relationship-list": { + "relationship" : [ + ] + } + }, + { + "service-instance-id": "some id 3", + "service-instance-name": "some name 3", + "environment-context": "some context 3", + "workload-context": "some workload 3", + "input-parameters": "request parameters 3", + "relationship-list": { + "relationship" : [ + ] + } + } + ] + }, + "relationship-list": { + "relationship" : [ + ] + } + } + }, + { + "service-subscription": { + "service-type": "{service-type}", + "temp-ub-sub-account-id": "some sub account", + "service-type-id":"sotn", + "service-instances": { + "service-instance": [ + { + "service-instance-id": "some id 1", + "service-instance-name": "some name 1", + "environment-context": "some context 1", + "workload-context": "some workload 1", + "input-parameters": "request parameters 1", + "relationship-list": { + "relationship" : [ + ] + } + }, + { + "service-instance-id": "some id 2", + "service-instance-name": "some name 2", + "environment-context": "some context 2", + "workload-context": "some workload 2", + "input-parameters": "request parameters 2", + "relationship-list": { + "relationship" : [ + ] + } + }, + { + "service-instance-id": "some id 3", + "service-instance-name": "some name 3", + "environment-context": "some context 3", + "workload-context": "some workload 3", + "input-parameters": "request parameters 3", + "relationship-list": { + "relationship" : [ + ] + } + } + ] + }, + "relationship-list": { + "relationship" : [ + ] + } + } + }, + { + "service-subscription": { + "service-type": "{service-type}", + "temp-ub-sub-account-id": "some sub account", + "service-type-id":"sotn", + "service-instances": { + "service-instance": [ + { + "service-instance-id": "some id 1", + "service-instance-name": "some name 1", + "environment-context": "some context 1", + "workload-context": "some workload 1", + "input-parameters": "request parameters 1", + "relationship-list": { + "relationship" : [ + ] + } + }, + { + "service-instance-id": "uuidaaaa", + "service-instance-name": "dddd6", + "environment-context": "some context 2", + "workload-context": "some workload 2", + "input-parameters": "request parameters 2", + "relationship-list": { + "relationship" : [ + ] + } + }, + { + "service-instance-id": "some id 3", + "service-instance-name": "some name 3", + "environment-context": "some context 3", + "workload-context": "some workload 3", + "input-parameters": "request parameters 3", + "relationship-list": { + "relationship" : [ + ] + } + } + ] + }, + "relationship-list": { + "relationship" : [ + ] + } + } + }, + { + "service-subscription": { + "service-type": "{service-type}", + "temp-ub-sub-account-id": "some sub account", + "service-type-id":"ccvpn", + "service-instances": { + "service-instance": [ + { + "service-instance-id": "some id 1", + "service-instance-name": "some name 1", + "environment-context": "some context 1", + "workload-context": "some workload 1", + "input-parameters": "request parameters 1", + "relationship-list": { + "relationship" : [ + ] + } + }, + { + "service-instance-id": "some id 2", + "service-instance-name": "some name 2", + "environment-context": "some context 2", + "workload-context": "some workload 2", + "input-parameters": "request parameters 2", + "relationship-list": { + "relationship" : [ + ] + } + }, + { + "service-instance-id": "some id 3", + "service-instance-name": "some name 3", + "environment-context": "some context 3", + "workload-context": "some workload 3", + "input-parameters": "request parameters 3", + "relationship-list": { + "relationship" : [ + ] + } + } + ] + }, + "relationship-list": { + "relationship" : [ + ] + } + } + }, + { + "service-subscription": { + "service-type": "{service-type}", + "temp-ub-sub-account-id": "some sub account", + "service-type-id":"ccvpn", + "service-instances": { + "service-instance": [ + { + "service-instance-id": "some id 1", + "service-instance-name": "some name 1", + "environment-context": "some context 1", + "workload-context": "some workload 1", + "input-parameters": "request parameters 1", + "relationship-list": { + "relationship" : [ + ] + } + }, + { + "service-instance-id": "some id 2", + "service-instance-name": "some name 2", + "environment-context": "some context 2", + "workload-context": "some workload 2", + "input-parameters": "request parameters 2", + "relationship-list": { + "relationship" : [ + ] + } + }, + { + "service-instance-id": "some id 3", + "service-instance-name": "some name 3", + "environment-context": "some context 3", + "workload-context": "some workload 3", + "input-parameters": "request parameters 3", + "relationship-list": { + "relationship" : [ + ] + } + } + ] + }, + "relationship-list": { + "relationship" : [ + ] + } + } + }, + { + "service-subscription": { + "service-type": "{service-type}", + "temp-ub-sub-account-id": "some sub account", + "service-type-id":"ccvpn", + "service-instances": { + "service-instance": [ + { + "service-instance-id": "some id 1", + "service-instance-name": "some name 1", + "environment-context": "some context 1", + "workload-context": "some workload 1", + "input-parameters": "request parameters 1", + "relationship-list": { + "relationship" : [ + ] + } + }, + { + "service-instance-id": "some id 2", + "service-instance-name": "some name 2", + "environment-context": "some context 2", + "workload-context": "some workload 2", + "input-parameters": "request parameters 2", + "relationship-list": { + "relationship" : [ + ] + } + }, + { + "service-instance-id": "some id 3", + "service-instance-name": "some name 3", + "environment-context": "some context 3", + "workload-context": "some workload 3", + "input-parameters": "request parameters 3", + "relationship-list": { + "relationship" : [ + ] + } + } + ] + }, + "relationship-list": { + "relationship" : [ + ] + } + } + }, + { + "service-subscription": { + "service-type": "{service-type}", + "temp-ub-sub-account-id": "some sub account", + "service-type-id":"ccvpn", + "service-instances": { + "service-instance": [ + { + "service-instance-id": "some id 1", + "service-instance-name": "some name 1", + "environment-context": "some context 1", + "workload-context": "some workload 1", + "input-parameters": "request parameters 1", + "relationship-list": { + "relationship" : [ + ] + } + }, + { + "service-instance-id": "some id 2", + "service-instance-name": "some name 2", + "environment-context": "some context 2", + "workload-context": "some workload 2", + "input-parameters": "request parameters 2", + "relationship-list": { + "relationship" : [ + ] + } + }, + { + "service-instance-id": "some id 3", + "service-instance-name": "some name 3", + "environment-context": "some context 3", + "workload-context": "some workload 3", + "input-parameters": "request parameters 3", + "relationship-list": { + "relationship" : [ + ] + } + } + ] + }, + "relationship-list": { + "relationship" : [ + ] + } + } + }, + { + "service-subscription": { + "service-type": "{service-type}", + "temp-ub-sub-account-id": "some sub account", + "service-type-id":"ccvpn", + "service-instances": { + "service-instance": [ + { + "service-instance-id": "some id 1", + "service-instance-name": "some name 1", + "environment-context": "some context 1", + "workload-context": "some workload 1", + "input-parameters": "request parameters 1", + "relationship-list": { + "relationship" : [ + ] + } + }, + { + "service-instance-id": "some id 2", + "service-instance-name": "some name 2", + "environment-context": "some context 2", + "workload-context": "some workload 2", + "input-parameters": "request parameters 2", + "relationship-list": { + "relationship" : [ + ] + } + }, + { + "service-instance-id": "some id 3", + "service-instance-name": "some name 3", + "environment-context": "some context 3", + "workload-context": "some workload 3", + "input-parameters": "request parameters 3", + "relationship-list": { + "relationship" : [ + ] + } + } + ] + }, + "relationship-list": { + "relationship" : [ + ] + } + } + } + ] +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/mock/json/instanceTableData3.json b/usecaseui-portal/src/app/mock/json/instanceTableData3.json new file mode 100644 index 00000000..98777289 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/instanceTableData3.json @@ -0,0 +1,2 @@ + +{"service-instance":[{"service-instance-id":"8e07f832-3f50-4657-9b44-010049e8b488","service-instance-name":"SOTNVPNInfra","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"bafa365f-4056-4ad3-a039-d6b3e3e0fd35","model-version-id":"fdbb8ddd-3325-4840-a156-9ad601b9366c","resource-version":"1537769390960","input-parameters":"{\n \"service\":{\n \"name\":\"SOTNVPNInfra\",\n \"description\":\"SOTNVPNInfra\",\n \"serviceInvariantUuid\":\"bafa365f-4056-4ad3-a039-d6b3e3e0fd35\",\n \"serviceUuid\":\"fdbb8ddd-3325-4840-a156-9ad601b9366c\",\n \"globalSubscriberId\":\"demo\",\n \"serviceType\":\"ccvpn\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SOTNConnectivity 0\",\n \"resourceInvariantUuid\":\"1b9c677d-fddf-4b70-938b-925a7fa57d43\",\n \"resourceUuid\":\"218df3c3-50dd-4c26-9e36-4771387bb771\",\n \"resourceCustomizationUuid\":\"b44071c8-04fd-4d6b-b6af-772cbfaa1129\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF 0\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"c3612284-6c67-4d8c-8b41-b699cc90e76d\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"sotnconnectivity0_eir\":\"1000\",\n \"sotnconnectivity0_cir\":\"1000\",\n \"sotnconnectivity0_endTime\":\"2018-8-8 10:00\",\n \"sotnconnectivity0_ebs\":\"1000\",\n \"sotnconnectivity0_startTime\":\"2018-8-1 10:00\",\n \"sotnconnectivity0_dualLink\":\"true\",\n \"sotnconnectivity0_reroute\":\"false\",\n \"sotnconnectivity0_cbs\":\"1000\",\n \"sotnconnectivity0_name\":\"SOTN L2\",\n \"sotnconnectivity0_SLS\":\"\",\n \"sotnconnectivity0_description\":\"\",\n \"sotnconnectivity0_couplingFlag\":\"\",\n \"sotnconnectivity0_colorAware\":\"\",\n \"sotnconnectivity0_COS\":\"standard\"\n }\n }\n }\n}","relationship-list":{"relationship":[{"related-to":"connectivity","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/connectivities/connectivity/2e359c75-2af3-4fea-9550-a893edeab8b5","relationship-data":[{"relationship-key":"connectivity.connectivity-id","relationship-value":"2e359c75-2af3-4fea-9550-a893edeab8b5"}],"related-to-property":[{"property-key":"connectivity.etht-svc-name","property-value":"vpn1"}]},{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0"}]}]}},{"service-instance-id":"a6d69c62-75b5-4f04-8cd7-9ca5dfcc4205","service-instance-name":"DcLondon","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"499e5e60-c8b2-4ea6-8c4e-7739420673a9","model-version-id":"8ec97da1-1e0a-4198-9c9a-3da2c60d7974","resource-version":"1537769721422","input-parameters":"{\n \"service\":{\n \"name\":\"DcLondon\",\n \"description\":\"SiteService\",\n \"serviceInvariantUuid\":\"499e5e60-c8b2-4ea6-8c4e-7739420673a9\",\n \"serviceUuid\":\"8ec97da1-1e0a-4198-9c9a-3da2c60d7974\",\n \"globalSubscriberId\":\"demo\",\n \"serviceType\":\"ccvpn\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SiteVF\",\n \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"mpls\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"deviceVF\",\n \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sdwanvpnattachmentVF\",\n \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"internet\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sotnvpnattachmentvF\",\n \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"devicevf_device_class\":\"PNF\",\n \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n \"devicevf_device_name\":\"50.47\",\n \"devicevf_device_systemIp\":\"192.168.1.47\",\n \"devicevf_device_type\":\"AR161EW\",\n \"devicevf_device_vendor\":\"huawei\",\n \"devicevf_device_version\":\"1.0\",\n \"internet_sitewanport_description\":\"internet\",\n \"internet_sitewanport_deviceName\":\"50.47\",\n \"internet_sitewanport_inputBandwidth\":\"100\",\n \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n \"internet_sitewanport_name\":\"internet\",\n \"internet_sitewanport_outputBandwidth\":\"100\",\n \"internet_sitewanport_portNumber\":\"0/0/2\",\n \"internet_sitewanport_portType\":\"GE\",\n \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n \"internet_sitewanport_transportNetworkName\":\"internet\",\n \"mpls_sitewanport_description\":\"mpls\",\n \"mpls_sitewanport_deviceName\":\"50.47\",\n \"mpls_sitewanport_inputBandwidth\":\"100\",\n \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n \"mpls_sitewanport_name\":\"mpls\",\n \"mpls_sitewanport_outputBandwidth\":\"100\",\n \"mpls_sitewanport_portNumber\":\"0/0/1\",\n \"mpls_sitewanport_portType\":\"GE\",\n \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n \"mpls_sitewanport_transportNetworkName\":\"internet\",\n \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"CMCCVPN\",\n \"sitevf_site_address\":\"beijing beiqing road\",\n \"sitevf_site_controlPoint\":\"CMCC_VCPE\",\n \"sitevf_site_description\":\"CMCC_CPE\",\n \"sitevf_site_emails\":\"\",\n \"sitevf_site_latitude\":\"\",\n \"sitevf_site_longitude\":\"\",\n \"sitevf_site_name\":\"CMCC_CPE\",\n \"sitevf_site_postcode\":\"100095\",\n \"sitevf_site_role\":\"sd-wan-edge\",\n \"sitevf_site_type\":\"single-gateway\",\n \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n }\n }\n }\n}","relationship-list":{"relationship":[{"related-to":"device","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/devices/device/2cacf49c-7c09-4155-b18a-4468dce34083","relationship-data":[{"relationship-key":"device.device-id","relationship-value":"2cacf49c-7c09-4155-b18a-4468dce34083"}],"related-to-property":[{"property-key":"device.device-name","property-value":"TravelDevice"}]},{"related-to":"site-resource","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/site-resources/site-resource/f288d54e-be09-46d3-bb1f-38729ec74bb5","relationship-data":[{"relationship-key":"site-resource.site-resource-id","relationship-value":"f288d54e-be09-46d3-bb1f-38729ec74bb5"}],"related-to-property":[{"property-key":"site-resource.site-resource-name","property-value":"travelSite"}]},{"related-to":"wan-port-config","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/wan-port-configs/wan-port-config/99866f05-9749-456e-8909-61eebf08373e","relationship-data":[{"relationship-key":"wan-port-config.wan-port-config-id","relationship-value":"99866f05-9749-456e-8909-61eebf08373e"}],"related-to-property":[{"property-key":"wan-port-config.wan-port-config-name","property-value":"intenet"}]},{"related-to":"wan-port-config","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/wan-port-configs/wan-port-config/afab2cc0-28c9-4fd3-bf03-01c8034f8191","relationship-data":[{"relationship-key":"wan-port-config.wan-port-config-id","relationship-value":"afab2cc0-28c9-4fd3-bf03-01c8034f8191"}],"related-to-property":[{"property-key":"wan-port-config.wan-port-config-name","property-value":"mpls"}]},{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/167a285b-0875-41ff-8ed1-1178db6f3133","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"167a285b-0875-41ff-8ed1-1178db6f3133"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"167a285b-0875-41ff-8ed1-1178db6f3133"}]},{"related-to":"allotted-resource","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/0ea94797-3772-40ff-b6fb-69f06c533be3/allotted-resources/allotted-resource/d519761d-c89c-4164-86c7-8f74952eea65","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"0ea94797-3772-40ff-b6fb-69f06c533be3"},{"relationship-key":"allotted-resource.id","relationship-value":"d519761d-c89c-4164-86c7-8f74952eea65"}],"related-to-property":[{"property-key":"allotted-resource.description","property-value":"sdwan-attachment"},{"property-key":"allotted-resource.allotted-resource-name","property-value":"sdwan ar"}]},{"related-to":"allotted-resource","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/8e07f832-3f50-4657-9b44-010049e8b488/allotted-resources/allotted-resource/65f21c28-8b19-4769-8f08-174e2afa5488","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"8e07f832-3f50-4657-9b44-010049e8b488"},{"relationship-key":"allotted-resource.id","relationship-value":"65f21c28-8b19-4769-8f08-174e2afa5488"}],"related-to-property":[{"property-key":"allotted-resource.description","property-value":"sotn attachment"},{"property-key":"allotted-resource.allotted-resource-name","property-value":"ston ar"}]}]}},{"service-instance-id":"0ea94797-3772-40ff-b6fb-69f06c533be3","service-instance-name":"SDWANVPNInfra","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"e2b217d6-7cac-4156-9f44-f9b010b350a6","model-version-id":"20d9e7dc-f030-4230-af79-ba0bde7cbe2e","resource-version":"1537769801383","input-parameters":"{\n \"service\":{\n \"name\":\"SDWANVPNInfra\",\n \"description\":\"SDWANVPNInfra\",\n \"serviceInvariantUuid\":\"e2b217d6-7cac-4156-9f44-f9b010b350a6\",\n \"serviceUuid\":\"20d9e7dc-f030-4230-af79-ba0bde7cbe2e\",\n \"globalSubscriberId\":\"demo\",\n \"serviceType\":\"ccvpn\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SDWANConnectivity 0\",\n \"resourceInvariantUuid\":\"f99a9a23-c88e-44ff-a4dc-22b88675d278\",\n \"resourceUuid\":\"7baa7742-3a13-4288-8330-868015adc340\",\n \"resourceCustomizationUuid\":\"94ec574b-2306-4cbd-8214-09662b040f73\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF 0\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"a7baba5d-6ac3-42b5-b47d-070841303ab1\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"sdwanconnectivity0_name\":\"CMCCVPN\",\n \"sdwanconnectivity0_topology\":\"hub-spoke\"\n }\n }\n }\n}","relationship-list":{"relationship":[{"related-to":"sdwan-vpn","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/sdwan-vpns/sdwan-vpn/0d8707cd-9d27-4503-a0b0-e9b1b1a83b1e","relationship-data":[{"relationship-key":"sdwan-vpn.sdwan-vpn-id","relationship-value":"0d8707cd-9d27-4503-a0b0-e9b1b1a83b1e"}],"related-to-property":[{"property-key":"sdwan-vpn.sdwan-vpn-name"}]},{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/15e88f8e-473f-4d88-92f8-6739a42baa2g","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"15e88f8e-473f-4d88-92f8-6739a42baa2g"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"15e88f8e-473f-4d88-92f8-6739a42baa2g"}]}]}},{"service-instance-id":"f08067b8-a07b-4c41-b750-5f9b35281e67","service-instance-name":"siteFangshanQu","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"499e5e60-c8b2-4ea6-8c4e-7739420673a9","model-version-id":"8ec97da1-1e0a-4198-9c9a-3da2c60d7974","resource-version":"1537779181775","selflink":"restconf/config/GENERIC-RESOURCE-API:services/service/506b87a5-72fe-4197-a307-6929c3871ab2/service-data/service-topology/","input-parameters":"{\n \"service\":{\n \"name\":\"siteFangshanQu\",\n \"description\":\"SiteService\",\n \"serviceInvariantUuid\":\"499e5e60-c8b2-4ea6-8c4e-7739420673a9\",\n \"serviceUuid\":\"8ec97da1-1e0a-4198-9c9a-3da2c60d7974\",\n \"globalSubscriberId\":\"demo\",\n \"serviceType\":\"ccvpn\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SiteVF\",\n \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"mpls\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"deviceVF\",\n \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sdwanvpnattachmentVF\",\n \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"internet\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sotnvpnattachmentvF\",\n \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"devicevf_device_class\":\"PNF\",\n \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n \"devicevf_device_name\":\"50.47\",\n \"devicevf_device_systemIp\":\"192.168.1.47\",\n \"devicevf_device_type\":\"AR161EW\",\n \"devicevf_device_vendor\":\"huawei\",\n \"devicevf_device_version\":\"1.0\",\n \"internet_sitewanport_description\":\"internet\",\n \"internet_sitewanport_deviceName\":\"50.47\",\n \"internet_sitewanport_inputBandwidth\":\"100\",\n \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n \"internet_sitewanport_name\":\"internet\",\n \"internet_sitewanport_outputBandwidth\":\"100\",\n \"internet_sitewanport_portNumber\":\"0/0/2\",\n \"internet_sitewanport_portType\":\"GE\",\n \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n \"internet_sitewanport_transportNetworkName\":\"internet\",\n \"mpls_sitewanport_description\":\"mpls\",\n \"mpls_sitewanport_deviceName\":\"50.47\",\n \"mpls_sitewanport_inputBandwidth\":\"100\",\n \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n \"mpls_sitewanport_name\":\"mpls\",\n \"mpls_sitewanport_outputBandwidth\":\"100\",\n \"mpls_sitewanport_portNumber\":\"0/0/1\",\n \"mpls_sitewanport_portType\":\"GE\",\n \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n \"mpls_sitewanport_transportNetworkName\":\"internet\",\n \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"CMCCVPN\",\n \"sitevf_site_address\":\"beijing beiqing road\",\n \"sitevf_site_controlPoint\":\"CMCC_VCPE\",\n \"sitevf_site_description\":\"CMCC_CPE\",\n \"sitevf_site_emails\":\"\",\n \"sitevf_site_latitude\":\"\",\n \"sitevf_site_longitude\":\"\",\n \"sitevf_site_name\":\"CMCC_CPE\",\n \"sitevf_site_postcode\":\"100095\",\n \"sitevf_site_role\":\"sd-wan-edge\",\n \"sitevf_site_type\":\"single-gateway\",\n \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n }\n }\n }\n}","relationship-list":{"relationship":[{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/506b87a5-72fe-4197-a307-6929c3871ab2","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"506b87a5-72fe-4197-a307-6929c3871ab2"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"506b87a5-72fe-4197-a307-6929c3871ab2"}]}]}},{"service-instance-id":"6a6478d1-f62f-439c-8f16-6038a44af8c3","service-instance-name":"SDWANVPNInfra-2","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"e2b217d6-7cac-4156-9f44-f9b010b350a6","model-version-id":"20d9e7dc-f030-4230-af79-ba0bde7cbe2e","resource-version":"1537779569094","input-parameters":"{\n \"service\":{\n \"name\":\"SDWANVPNInfra-2\",\n \"description\":\"SDWANVPNInfra\",\n \"serviceInvariantUuid\":\"e2b217d6-7cac-4156-9f44-f9b010b350a6\",\n \"serviceUuid\":\"20d9e7dc-f030-4230-af79-ba0bde7cbe2e\",\n \"globalSubscriberId\":\"demo\",\n \"serviceType\":\"ccvpn\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SDWANConnectivity 0\",\n \"resourceInvariantUuid\":\"f99a9a23-c88e-44ff-a4dc-22b88675d278\",\n \"resourceUuid\":\"7baa7742-3a13-4288-8330-868015adc340\",\n \"resourceCustomizationUuid\":\"94ec574b-2306-4cbd-8214-09662b040f73\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF 0\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"a7baba5d-6ac3-42b5-b47d-070841303ab1\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"sdwanconnectivity0_name\":\"CMCCVPN\",\n \"sdwanconnectivity0_topology\":\"hub-spoke\"\n }\n }\n }\n}","relationship-list":{"relationship":[{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/de888731-eac8-454c-bbb2-927a85ba2d1c","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"de888731-eac8-454c-bbb2-927a85ba2d1c"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"de888731-eac8-454c-bbb2-927a85ba2d1c"}]}]}},{"service-instance-id":"fd0b9f0a-0d5c-4f69-a3dc-fb9cabde9db8","service-instance-name":"DcXichengQuBeijing","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"499e5e60-c8b2-4ea6-8c4e-7739420673a9","model-version-id":"8ec97da1-1e0a-4198-9c9a-3da2c60d7974","resource-version":"1537779392307","selflink":"restconf/config/GENERIC-RESOURCE-API:services/service/289b87a5-72fe-4197-a307-6929c3831f82/service-data/service-topology/","input-parameters":"{\n \"service\":{\n \"name\":\"DcXichengQuBeijing\",\n \"description\":\"SiteService\",\n \"serviceInvariantUuid\":\"499e5e60-c8b2-4ea6-8c4e-7739420673a9\",\n \"serviceUuid\":\"8ec97da1-1e0a-4198-9c9a-3da2c60d7974\",\n \"globalSubscriberId\":\"demo\",\n \"serviceType\":\"ccvpn\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SiteVF\",\n \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"mpls\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"deviceVF\",\n \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sdwanvpnattachmentVF\",\n \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"internet\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sotnvpnattachmentvF\",\n \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"devicevf_device_class\":\"PNF\",\n \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n \"devicevf_device_name\":\"50.47\",\n \"devicevf_device_systemIp\":\"192.168.1.47\",\n \"devicevf_device_type\":\"AR161EW\",\n \"devicevf_device_vendor\":\"huawei\",\n \"devicevf_device_version\":\"1.0\",\n \"internet_sitewanport_description\":\"internet\",\n \"internet_sitewanport_deviceName\":\"50.47\",\n \"internet_sitewanport_inputBandwidth\":\"100\",\n \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n \"internet_sitewanport_name\":\"internet\",\n \"internet_sitewanport_outputBandwidth\":\"100\",\n \"internet_sitewanport_portNumber\":\"0/0/2\",\n \"internet_sitewanport_portType\":\"GE\",\n \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n \"internet_sitewanport_transportNetworkName\":\"internet\",\n \"mpls_sitewanport_description\":\"mpls\",\n \"mpls_sitewanport_deviceName\":\"50.47\",\n \"mpls_sitewanport_inputBandwidth\":\"100\",\n \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n \"mpls_sitewanport_name\":\"mpls\",\n \"mpls_sitewanport_outputBandwidth\":\"100\",\n \"mpls_sitewanport_portNumber\":\"0/0/1\",\n \"mpls_sitewanport_portType\":\"GE\",\n \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n \"mpls_sitewanport_transportNetworkName\":\"internet\",\n \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"CMCCVPN\",\n \"sitevf_site_address\":\"beijing beiqing road\",\n \"sitevf_site_controlPoint\":\"CMCC_VCPE\",\n \"sitevf_site_description\":\"CMCC_CPE\",\n \"sitevf_site_emails\":\"\",\n \"sitevf_site_latitude\":\"\",\n \"sitevf_site_longitude\":\"\",\n \"sitevf_site_name\":\"CMCC_CPE\",\n \"sitevf_site_postcode\":\"100095\",\n \"sitevf_site_role\":\"sd-wan-edge\",\n \"sitevf_site_type\":\"single-gateway\",\n \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n }\n }\n }\n}","relationship-list":{"relationship":[{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/289b87a5-72fe-4197-a307-6929c3831f82","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"289b87a5-72fe-4197-a307-6929c3831f82"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"289b87a5-72fe-4197-a307-6929c3831f82"}]}]}},{"service-instance-id":"2d55a540-f6d3-4108-9bb4-290574b87a6c","service-instance-name":"siteLondon","service-type":"E2E Service","service-role":"E2E Service","model-invariant-id":"499e5e60-c8b2-4ea6-8c4e-7739420673a9","model-version-id":"8ec97da1-1e0a-4198-9c9a-3da2c60d7974","resource-version":"1537770265132","input-parameters":"{\n \"service\":{\n \"name\":\"siteLondon\",\n \"description\":\"SiteService\",\n \"serviceInvariantUuid\":\"499e5e60-c8b2-4ea6-8c4e-7739420673a9\",\n \"serviceUuid\":\"8ec97da1-1e0a-4198-9c9a-3da2c60d7974\",\n \"globalSubscriberId\":\"demo\",\n \"serviceType\":\"ccvpn\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SiteVF\",\n \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"mpls\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"deviceVF\",\n \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sdwanvpnattachmentVF\",\n \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"internet\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sotnvpnattachmentvF\",\n \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"devicevf_device_class\":\"PNF\",\n \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n \"devicevf_device_name\":\"50.47\",\n \"devicevf_device_systemIp\":\"192.168.1.47\",\n \"devicevf_device_type\":\"AR161EW\",\n \"devicevf_device_vendor\":\"huawei\",\n \"devicevf_device_version\":\"1.0\",\n \"internet_sitewanport_description\":\"internet\",\n \"internet_sitewanport_deviceName\":\"50.47\",\n \"internet_sitewanport_inputBandwidth\":\"100\",\n \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n \"internet_sitewanport_name\":\"internet\",\n \"internet_sitewanport_outputBandwidth\":\"100\",\n \"internet_sitewanport_portNumber\":\"0/0/2\",\n \"internet_sitewanport_portType\":\"GE\",\n \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n \"internet_sitewanport_transportNetworkName\":\"internet\",\n \"mpls_sitewanport_description\":\"mpls\",\n \"mpls_sitewanport_deviceName\":\"50.47\",\n \"mpls_sitewanport_inputBandwidth\":\"100\",\n \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n \"mpls_sitewanport_name\":\"mpls\",\n \"mpls_sitewanport_outputBandwidth\":\"100\",\n \"mpls_sitewanport_portNumber\":\"0/0/1\",\n \"mpls_sitewanport_portType\":\"GE\",\n \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n \"mpls_sitewanport_transportNetworkName\":\"internet\",\n \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"CMCCVPN\",\n \"sitevf_site_address\":\"beijing beiqing road\",\n \"sitevf_site_controlPoint\":\"CMCC_VCPE\",\n \"sitevf_site_description\":\"CMCC_CPE\",\n \"sitevf_site_emails\":\"\",\n \"sitevf_site_latitude\":\"\",\n \"sitevf_site_longitude\":\"\",\n \"sitevf_site_name\":\"CMCC_CPE\",\n \"sitevf_site_postcode\":\"100095\",\n \"sitevf_site_role\":\"sd-wan-edge\",\n \"sitevf_site_type\":\"single-gateway\",\n \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n }\n }\n }\n}","relationship-list":{"relationship":[{"related-to":"wan-port-config","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/wan-port-configs/wan-port-config/52ae7944-12b3-4766-848e-e43088947af9","relationship-data":[{"relationship-key":"wan-port-config.wan-port-config-id","relationship-value":"52ae7944-12b3-4766-848e-e43088947af9"}],"related-to-property":[{"property-key":"wan-port-config.wan-port-config-name","property-value":"intenet"}]},{"related-to":"site-resource","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/site-resources/site-resource/a22193fc-d1b5-41a7-9033-14339838b0c5","relationship-data":[{"relationship-key":"site-resource.site-resource-id","relationship-value":"a22193fc-d1b5-41a7-9033-14339838b0c5"}],"related-to-property":[{"property-key":"site-resource.site-resource-name","property-value":"travelSite"}]},{"related-to":"wan-port-config","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/wan-port-configs/wan-port-config/9fc7c231-1b71-49e6-8390-e92b707e7615","relationship-data":[{"relationship-key":"wan-port-config.wan-port-config-id","relationship-value":"9fc7c231-1b71-49e6-8390-e92b707e7615"}],"related-to-property":[{"property-key":"wan-port-config.wan-port-config-name","property-value":"mpls"}]},{"related-to":"device","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/devices/device/f0cf1e06-7be8-4602-83cb-60d87d8e7ef3","relationship-data":[{"relationship-key":"device.device-id","relationship-value":"f0cf1e06-7be8-4602-83cb-60d87d8e7ef3"}],"related-to-property":[{"property-key":"device.device-name","property-value":"CentSpokeDevice"}]},{"related-to":"sp-partner","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/sp-partners/sp-partner/3addd6b9-b05f-4841-881c-1ce2c753513f","relationship-data":[{"relationship-key":"sp-partner.sp-partner-id","relationship-value":"3addd6b9-b05f-4841-881c-1ce2c753513f"}],"related-to-property":[{"property-key":"sp-partner.sp-partner-id","property-value":"3addd6b9-b05f-4841-881c-1ce2c753513f"}]},{"related-to":"allotted-resource","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/0ea94797-3772-40ff-b6fb-69f06c533be3/allotted-resources/allotted-resource/f1523ca9-6b56-482e-b3a4-a2f8dcbfba12","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"0ea94797-3772-40ff-b6fb-69f06c533be3"},{"relationship-key":"allotted-resource.id","relationship-value":"f1523ca9-6b56-482e-b3a4-a2f8dcbfba12"}],"related-to-property":[{"property-key":"allotted-resource.description","property-value":"sdwan-attachment"},{"property-key":"allotted-resource.allotted-resource-name","property-value":"sdwan ar"}]},{"related-to":"allotted-resource","relationship-label":"org.onap.relationships.inventory.Uses","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/8e07f832-3f50-4657-9b44-010049e8b488/allotted-resources/allotted-resource/d1a6b573-0595-4468-bab9-02465c295618","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"8e07f832-3f50-4657-9b44-010049e8b488"},{"relationship-key":"allotted-resource.id","relationship-value":"d1a6b573-0595-4468-bab9-02465c295618"}],"related-to-property":[{"property-key":"allotted-resource.description","property-value":"sotn attachment"},{"property-key":"allotted-resource.allotted-resource-name","property-value":"sotn ar"}]}]}}]} \ No newline at end of file diff --git a/usecaseui-portal/src/app/mock/json/instanceTableData4.json b/usecaseui-portal/src/app/mock/json/instanceTableData4.json new file mode 100644 index 00000000..d952af97 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/instanceTableData4.json @@ -0,0 +1,656 @@ +{ + "service-instance": [ + { + "service-instance-id": "8e07f832-3f50-4657-9b44-010049e8b488", + "service-instance-name": "SOTNVPNInfra", + "service-type": "E2E Service", + "service-role": "E2E Service", + "model-invariant-id": "bafa365f-4056-4ad3-a039-d6b3e3e0fd35", + "model-version-id": "fdbb8ddd-3325-4840-a156-9ad601b9366c", + "resource-version": "1537769390960", + "input-parameters": "{\n \"service\":{\n \"name\":\"SOTNVPNInfra\",\n \"description\":\"SOTNVPNInfra\",\n \"serviceInvariantUuid\":\"bafa365f-4056-4ad3-a039-d6b3e3e0fd35\",\n \"serviceUuid\":\"fdbb8ddd-3325-4840-a156-9ad601b9366c\",\n \"globalSubscriberId\":\"demo\",\n \"serviceType\":\"ccvpn\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SOTNConnectivity 0\",\n \"resourceInvariantUuid\":\"1b9c677d-fddf-4b70-938b-925a7fa57d43\",\n \"resourceUuid\":\"218df3c3-50dd-4c26-9e36-4771387bb771\",\n \"resourceCustomizationUuid\":\"b44071c8-04fd-4d6b-b6af-772cbfaa1129\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF 0\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"c3612284-6c67-4d8c-8b41-b699cc90e76d\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"sotnconnectivity0_eir\":\"1000\",\n \"sotnconnectivity0_cir\":\"1000\",\n \"sotnconnectivity0_endTime\":\"2018-8-8 10:00\",\n \"sotnconnectivity0_ebs\":\"1000\",\n \"sotnconnectivity0_startTime\":\"2018-8-1 10:00\",\n \"sotnconnectivity0_dualLink\":\"true\",\n \"sotnconnectivity0_reroute\":\"false\",\n \"sotnconnectivity0_cbs\":\"1000\",\n \"sotnconnectivity0_name\":\"SOTN L2\",\n \"sotnconnectivity0_SLS\":\"\",\n \"sotnconnectivity0_description\":\"\",\n \"sotnconnectivity0_couplingFlag\":\"\",\n \"sotnconnectivity0_colorAware\":\"\",\n \"sotnconnectivity0_COS\":\"standard\"\n }\n }\n }\n}", + "relationship-list": { + "relationship": [ + { + "related-to": "connectivity", + "relationship-label": "org.onap.relationships.inventory.PartOf", + "related-link": "/aai/v13/network/connectivities/connectivity/2e359c75-2af3-4fea-9550-a893edeab8b5", + "relationship-data": [ + { + "relationship-key": "connectivity.connectivity-id", + "relationship-value": "2e359c75-2af3-4fea-9550-a893edeab8b5" + } + ], + "related-to-property": [ + { + "property-key": "connectivity.etht-svc-name", + "property-value": "vpn1" + } + ] + }, + { + "related-to": "sp-partner", + "relationship-label": "org.onap.relationships.inventory.PartOf", + "related-link": "/aai/v13/business/sp-partners/sp-partner/32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0", + "relationship-data": [ + { + "relationship-key": "sp-partner.sp-partner-id", + "relationship-value": "32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0" + } + ], + "related-to-property": [ + { + "property-key": "sp-partner.sp-partner-id", + "property-value": "32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0" + } + ] + }, + { + "related-to": "allotted-resource", + "relationship-label": "org.onap.relationships.inventory.Uses", + "related-link": "/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/2d55a540-f6d3-4108-9bb4-290574b87a6c/allotted-resources/allotted-resource/666085a7-132e-4a32-b9de-e58ecea3476a", + "relationship-data": [ + { + "relationship-key": "customer.global-customer-id", + "relationship-value": "demo" + }, + { + "relationship-key": "service-subscription.service-type", + "relationship-value": "ccvpn" + }, + { + "relationship-key": "service-instance.service-instance-id", + "relationship-value": "2d55a540-f6d3-4108-9bb4-290574b87a6c" + }, + { + "relationship-key": "allotted-resource.id", + "relationship-value": "666085a7-132e-4a32-b9de-e58ecea3476a" + } + ], + "related-to-property": [ + { + "property-key": "allotted-resource.description", + "property-value": "sotn-attachment" + }, + { + "property-key": "allotted-resource.allotted-resource-name", + "property-value": "sotn ar" + } + ] + }, + { + "related-to": "allotted-resource", + "relationship-label": "org.onap.relationships.inventory.Uses", + "related-link": "/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/a6d69c62-75b5-4f04-8cd7-9ca5dfcc4205/allotted-resources/allotted-resource/562adc96-7fbe-435e-bd6d-ff4b8a0a7920", + "relationship-data": [ + { + "relationship-key": "customer.global-customer-id", + "relationship-value": "demo" + }, + { + "relationship-key": "service-subscription.service-type", + "relationship-value": "ccvpn" + }, + { + "relationship-key": "service-instance.service-instance-id", + "relationship-value": "a6d69c62-75b5-4f04-8cd7-9ca5dfcc4205" + }, + { + "relationship-key": "allotted-resource.id", + "relationship-value": "562adc96-7fbe-435e-bd6d-ff4b8a0a7920" + } + ], + "related-to-property": [ + { + "property-key": "allotted-resource.description", + "property-value": "sotn-attachment" + }, + { + "property-key": "allotted-resource.allotted-resource-name", + "property-value": "sotn ar" + } + ] + } + ] + } + }, + { + "service-instance-id": "a6d69c62-75b5-4f04-8cd7-9ca5dfcc4205", + "service-instance-name": "DcLondon", + "service-type": "E2E Service", + "service-role": "E2E Service", + "model-invariant-id": "499e5e60-c8b2-4ea6-8c4e-7739420673a9", + "model-version-id": "8ec97da1-1e0a-4198-9c9a-3da2c60d7974", + "resource-version": "1537866016457", + "input-parameters": "{\n \"service\":{\n \"name\":\"DcLondon\",\n \"description\":\"SiteService\",\n \"serviceInvariantUuid\":\"499e5e60-c8b2-4ea6-8c4e-7739420673a9\",\n \"serviceUuid\":\"8ec97da1-1e0a-4198-9c9a-3da2c60d7974\",\n \"globalSubscriberId\":\"demo\",\n \"serviceType\":\"ccvpn\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SiteVF\",\n \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"mpls\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"deviceVF\",\n \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sdwanvpnattachmentVF\",\n \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"internet\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sotnvpnattachmentvF\",\n \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"devicevf_device_class\":\"PNF\",\n \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n \"devicevf_device_name\":\"50.47\",\n \"devicevf_device_systemIp\":\"192.168.1.47\",\n \"devicevf_device_type\":\"AR161EW\",\n \"devicevf_device_vendor\":\"huawei\",\n \"devicevf_device_version\":\"1.0\",\n \"internet_sitewanport_description\":\"internet\",\n \"internet_sitewanport_deviceName\":\"50.47\",\n \"internet_sitewanport_inputBandwidth\":\"100\",\n \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n \"internet_sitewanport_name\":\"internet\",\n \"internet_sitewanport_outputBandwidth\":\"100\",\n \"internet_sitewanport_portNumber\":\"0/0/2\",\n \"internet_sitewanport_portType\":\"GE\",\n \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n \"internet_sitewanport_transportNetworkName\":\"internet\",\n \"mpls_sitewanport_description\":\"mpls\",\n \"mpls_sitewanport_deviceName\":\"50.47\",\n \"mpls_sitewanport_inputBandwidth\":\"100\",\n \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n \"mpls_sitewanport_name\":\"mpls\",\n \"mpls_sitewanport_outputBandwidth\":\"100\",\n \"mpls_sitewanport_portNumber\":\"0/0/1\",\n \"mpls_sitewanport_portType\":\"GE\",\n \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n \"mpls_sitewanport_transportNetworkName\":\"internet\",\n \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"SDWANVPNInfra\",\n \"sitevf_site_address\":\"University College London,Gower Street,London\",\n \"sitevf_site_controlPoint\":\"VDF_VCPE\",\n \"sitevf_site_description\":\"VDF_vGW\",\n \"sitevf_site_emails\":\"\",\n \"sitevf_site_latitude\":\"\",\n \"sitevf_site_longitude\":\"\",\n \"sitevf_site_name\":\"DcLondon\",\n \"sitevf_site_postcode\":\"N200095\",\n \"sitevf_site_role\":\"sd-wan-edge\",\n \"sitevf_site_type\":\"single-gateway\",\n \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n }\n }\n }\n}", + "relationship-list": { + "relationship": [ + { + "related-to": "device", + "relationship-label": "org.onap.relationships.inventory.PartOf", + "related-link": "/aai/v13/network/devices/device/2cacf49c-7c09-4155-b18a-4468dce34083", + "relationship-data": [ + { + "relationship-key": "device.device-id", + "relationship-value": "2cacf49c-7c09-4155-b18a-4468dce34083" + } + ], + "related-to-property": [ + { + "property-key": "device.device-name", + "property-value": "TravelDevice" + } + ] + }, + { + "related-to": "site-resource", + "relationship-label": "org.onap.relationships.inventory.PartOf", + "related-link": "/aai/v13/network/site-resources/site-resource/f288d54e-be09-46d3-bb1f-38729ec74bb5", + "relationship-data": [ + { + "relationship-key": "site-resource.site-resource-id", + "relationship-value": "f288d54e-be09-46d3-bb1f-38729ec74bb5" + } + ], + "related-to-property": [ + { + "property-key": "site-resource.site-resource-name", + "property-value": "travelSite" + } + ] + }, + { + "related-to": "wan-port-config", + "relationship-label": "org.onap.relationships.inventory.PartOf", + "related-link": "/aai/v13/network/wan-port-configs/wan-port-config/99866f05-9749-456e-8909-61eebf08373e", + "relationship-data": [ + { + "relationship-key": "wan-port-config.wan-port-config-id", + "relationship-value": "99866f05-9749-456e-8909-61eebf08373e" + } + ], + "related-to-property": [ + { + "property-key": "wan-port-config.wan-port-config-name", + "property-value": "intenet" + } + ] + }, + { + "related-to": "wan-port-config", + "relationship-label": "org.onap.relationships.inventory.PartOf", + "related-link": "/aai/v13/network/wan-port-configs/wan-port-config/afab2cc0-28c9-4fd3-bf03-01c8034f8191", + "relationship-data": [ + { + "relationship-key": "wan-port-config.wan-port-config-id", + "relationship-value": "afab2cc0-28c9-4fd3-bf03-01c8034f8191" + } + ], + "related-to-property": [ + { + "property-key": "wan-port-config.wan-port-config-name", + "property-value": "mpls" + } + ] + }, + { + "related-to": "sp-partner", + "relationship-label": "org.onap.relationships.inventory.PartOf", + "related-link": "/aai/v13/business/sp-partners/sp-partner/167a285b-0875-41ff-8ed1-1178db6f3133", + "relationship-data": [ + { + "relationship-key": "sp-partner.sp-partner-id", + "relationship-value": "167a285b-0875-41ff-8ed1-1178db6f3133" + } + ], + "related-to-property": [ + { + "property-key": "sp-partner.sp-partner-id", + "property-value": "167a285b-0875-41ff-8ed1-1178db6f3133" + } + ] + }, + { + "related-to": "allotted-resource", + "relationship-label": "org.onap.relationships.inventory.Uses", + "related-link": "/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/0ea94797-3772-40ff-b6fb-69f06c533be3/allotted-resources/allotted-resource/d519761d-c89c-4164-86c7-8f74952eea65", + "relationship-data": [ + { + "relationship-key": "customer.global-customer-id", + "relationship-value": "demo" + }, + { + "relationship-key": "service-subscription.service-type", + "relationship-value": "ccvpn" + }, + { + "relationship-key": "service-instance.service-instance-id", + "relationship-value": "0ea94797-3772-40ff-b6fb-69f06c533be3" + }, + { + "relationship-key": "allotted-resource.id", + "relationship-value": "d519761d-c89c-4164-86c7-8f74952eea65" + } + ], + "related-to-property": [ + { + "property-key": "allotted-resource.description", + "property-value": "sdwan-attachment" + }, + { + "property-key": "allotted-resource.allotted-resource-name", + "property-value": "sdwan ar" + } + ] + }, + { + "related-to": "allotted-resource", + "relationship-label": "org.onap.relationships.inventory.Uses", + "related-link": "/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/8e07f832-3f50-4657-9b44-010049e8b488/allotted-resources/allotted-resource/65f21c28-8b19-4769-8f08-174e2afa5488", + "relationship-data": [ + { + "relationship-key": "customer.global-customer-id", + "relationship-value": "demo" + }, + { + "relationship-key": "service-subscription.service-type", + "relationship-value": "ccvpn" + }, + { + "relationship-key": "service-instance.service-instance-id", + "relationship-value": "8e07f832-3f50-4657-9b44-010049e8b488" + }, + { + "relationship-key": "allotted-resource.id", + "relationship-value": "65f21c28-8b19-4769-8f08-174e2afa5488" + } + ], + "related-to-property": [ + { + "property-key": "allotted-resource.description", + "property-value": "sotn attachment" + }, + { + "property-key": "allotted-resource.allotted-resource-name", + "property-value": "ston ar" + } + ] + } + ] + } + }, + { + "service-instance-id": "0ea94797-3772-40ff-b6fb-69f06c533be3", + "service-instance-name": "SDWANVPNInfra", + "service-type": "E2E Service", + "service-role": "E2E Service", + "model-invariant-id": "e2b217d6-7cac-4156-9f44-f9b010b350a6", + "model-version-id": "20d9e7dc-f030-4230-af79-ba0bde7cbe2e", + "resource-version": "1537864894560", + "input-parameters": "{\n \"service\":{\n \"name\":\"SDWANVPNInfra\",\n \"description\":\"SDWANVPNInfra\",\n \"serviceInvariantUuid\":\"e2b217d6-7cac-4156-9f44-f9b010b350a6\",\n \"serviceUuid\":\"20d9e7dc-f030-4230-af79-ba0bde7cbe2e\",\n \"globalSubscriberId\":\"demo\",\n \"serviceType\":\"ccvpn\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SDWANConnectivity 0\",\n \"resourceInvariantUuid\":\"f99a9a23-c88e-44ff-a4dc-22b88675d278\",\n \"resourceUuid\":\"7baa7742-3a13-4288-8330-868015adc340\",\n \"resourceCustomizationUuid\":\"94ec574b-2306-4cbd-8214-09662b040f73\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF 0\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"a7baba5d-6ac3-42b5-b47d-070841303ab1\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"sdwanconnectivity0_name\":\"SDWANVPNInfra\",\n \"sdwanconnectivity0_topology\":\"hub-spoke\"\n }\n }\n }\n}", + "relationship-list": { + "relationship": [ + { + "related-to": "sdwan-vpn", + "relationship-label": "org.onap.relationships.inventory.PartOf", + "related-link": "/aai/v13/network/sdwan-vpns/sdwan-vpn/0d8707cd-9d27-4503-a0b0-e9b1b1a83b1e", + "relationship-data": [ + { + "relationship-key": "sdwan-vpn.sdwan-vpn-id", + "relationship-value": "0d8707cd-9d27-4503-a0b0-e9b1b1a83b1e" + } + ], + "related-to-property": [ + { + "property-key": "sdwan-vpn.sdwan-vpn-name" + } + ] + }, + { + "related-to": "sp-partner", + "relationship-label": "org.onap.relationships.inventory.PartOf", + "related-link": "/aai/v13/business/sp-partners/sp-partner/15e88f8e-473f-4d88-92f8-6739a42baa2g", + "relationship-data": [ + { + "relationship-key": "sp-partner.sp-partner-id", + "relationship-value": "15e88f8e-473f-4d88-92f8-6739a42baa2g" + } + ], + "related-to-property": [ + { + "property-key": "sp-partner.sp-partner-id", + "property-value": "15e88f8e-473f-4d88-92f8-6739a42baa2g" + } + ] + }, + { + "related-to": "allotted-resource", + "relationship-label": "org.onap.relationships.inventory.Uses", + "related-link": "/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/2d55a540-f6d3-4108-9bb4-290574b87a6c/allotted-resources/allotted-resource/c797bba9-eb90-4825-b1c2-adbd1a31101f", + "relationship-data": [ + { + "relationship-key": "customer.global-customer-id", + "relationship-value": "demo" + }, + { + "relationship-key": "service-subscription.service-type", + "relationship-value": "ccvpn" + }, + { + "relationship-key": "service-instance.service-instance-id", + "relationship-value": "2d55a540-f6d3-4108-9bb4-290574b87a6c" + }, + { + "relationship-key": "allotted-resource.id", + "relationship-value": "c797bba9-eb90-4825-b1c2-adbd1a31101f" + } + ], + "related-to-property": [ + { + "property-key": "allotted-resource.description", + "property-value": "sdwan-attachment" + }, + { + "property-key": "allotted-resource.allotted-resource-name", + "property-value": "sdwan ar" + } + ] + }, + { + "related-to": "allotted-resource", + "relationship-label": "org.onap.relationships.inventory.Uses", + "related-link": "/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/a6d69c62-75b5-4f04-8cd7-9ca5dfcc4205/allotted-resources/allotted-resource/9a7329e6-8961-4008-9dbe-adeacfcd20da", + "relationship-data": [ + { + "relationship-key": "customer.global-customer-id", + "relationship-value": "demo" + }, + { + "relationship-key": "service-subscription.service-type", + "relationship-value": "ccvpn" + }, + { + "relationship-key": "service-instance.service-instance-id", + "relationship-value": "a6d69c62-75b5-4f04-8cd7-9ca5dfcc4205" + }, + { + "relationship-key": "allotted-resource.id", + "relationship-value": "9a7329e6-8961-4008-9dbe-adeacfcd20da" + } + ], + "related-to-property": [ + { + "property-key": "allotted-resource.description", + "property-value": "sdwan-attachment" + }, + { + "property-key": "allotted-resource.allotted-resource-name", + "property-value": "sdwan ar" + } + ] + } + ] + } + }, + { + "service-instance-id": "f08067b8-a07b-4c41-b750-5f9b35281e67", + "service-instance-name": "siteFangshanQu", + "service-type": "E2E Service", + "service-role": "E2E Service", + "model-invariant-id": "499e5e60-c8b2-4ea6-8c4e-7739420673a9", + "model-version-id": "8ec97da1-1e0a-4198-9c9a-3da2c60d7974", + "resource-version": "1537867265890", + "selflink": "restconf/config/GENERIC-RESOURCE-API:services/service/506b87a5-72fe-4197-a307-6929c3871ab2/service-data/service-topology/", + "input-parameters": "{\n \"service\":{\n \"name\":\"siteFangshanQu\",\n \"description\":\"SiteService\",\n \"serviceInvariantUuid\":\"499e5e60-c8b2-4ea6-8c4e-7739420673a9\",\n \"serviceUuid\":\"8ec97da1-1e0a-4198-9c9a-3da2c60d7974\",\n \"globalSubscriberId\":\"demo\",\n \"serviceType\":\"ccvpn\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SiteVF\",\n \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"mpls\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"deviceVF\",\n \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sdwanvpnattachmentVF\",\n \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"internet\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sotnvpnattachmentvF\",\n \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"devicevf_device_class\":\"PNF\",\n \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n \"devicevf_device_name\":\"50.47\",\n \"devicevf_device_systemIp\":\"192.168.1.47\",\n \"devicevf_device_type\":\"AR161EW\",\n \"devicevf_device_vendor\":\"huawei\",\n \"devicevf_device_version\":\"1.0\",\n \"internet_sitewanport_description\":\"internet\",\n \"internet_sitewanport_deviceName\":\"50.47\",\n \"internet_sitewanport_inputBandwidth\":\"100\",\n \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n \"internet_sitewanport_name\":\"internet\",\n \"internet_sitewanport_outputBandwidth\":\"100\",\n \"internet_sitewanport_portNumber\":\"0/0/2\",\n \"internet_sitewanport_portType\":\"GE\",\n \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n \"internet_sitewanport_transportNetworkName\":\"internet\",\n \"mpls_sitewanport_description\":\"mpls\",\n \"mpls_sitewanport_deviceName\":\"50.47\",\n \"mpls_sitewanport_inputBandwidth\":\"100\",\n \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n \"mpls_sitewanport_name\":\"mpls\",\n \"mpls_sitewanport_outputBandwidth\":\"100\",\n \"mpls_sitewanport_portNumber\":\"0/0/1\",\n \"mpls_sitewanport_portType\":\"GE\",\n \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n \"mpls_sitewanport_transportNetworkName\":\"internet\",\n \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"SDWANVPNInfra-2\",\n \"sitevf_site_address\":\"CMCC International Data Center,Hongkong\",\n \"sitevf_site_controlPoint\":\"CMCC_VCPE\",\n \"sitevf_site_description\":\"CMCC_vGW\",\n \"sitevf_site_emails\":\"\",\n \"sitevf_site_latitude\":\"\",\n \"sitevf_site_longitude\":\"\",\n \"sitevf_site_name\":\"siteFangshanQu\",\n \"sitevf_site_postcode\":\"999077\",\n \"sitevf_site_role\":\"sd-wan-edge\",\n \"sitevf_site_type\":\"single-gateway\",\n \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n }\n }\n }\n}", + "relationship-list": { + "relationship": [ + { + "related-to": "sp-partner", + "relationship-label": "org.onap.relationships.inventory.PartOf", + "related-link": "/aai/v13/business/sp-partners/sp-partner/506b87a5-72fe-4197-a307-6929c3871ab2", + "relationship-data": [ + { + "relationship-key": "sp-partner.sp-partner-id", + "relationship-value": "506b87a5-72fe-4197-a307-6929c3871ab2" + } + ], + "related-to-property": [ + { + "property-key": "sp-partner.sp-partner-id", + "property-value": "506b87a5-72fe-4197-a307-6929c3871ab2" + } + ] + } + ] + } + }, + { + "service-instance-id": "6a6478d1-f62f-439c-8f16-6038a44af8c3", + "service-instance-name": "SDWANVPNInfra-2", + "service-type": "E2E Service", + "service-role": "E2E Service", + "model-invariant-id": "e2b217d6-7cac-4156-9f44-f9b010b350a6", + "model-version-id": "20d9e7dc-f030-4230-af79-ba0bde7cbe2e", + "resource-version": "1537779569094", + "input-parameters": "{\n \"service\":{\n \"name\":\"SDWANVPNInfra-2\",\n \"description\":\"SDWANVPNInfra\",\n \"serviceInvariantUuid\":\"e2b217d6-7cac-4156-9f44-f9b010b350a6\",\n \"serviceUuid\":\"20d9e7dc-f030-4230-af79-ba0bde7cbe2e\",\n \"globalSubscriberId\":\"demo\",\n \"serviceType\":\"ccvpn\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SDWANConnectivity 0\",\n \"resourceInvariantUuid\":\"f99a9a23-c88e-44ff-a4dc-22b88675d278\",\n \"resourceUuid\":\"7baa7742-3a13-4288-8330-868015adc340\",\n \"resourceCustomizationUuid\":\"94ec574b-2306-4cbd-8214-09662b040f73\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF 0\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"a7baba5d-6ac3-42b5-b47d-070841303ab1\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"sdwanconnectivity0_name\":\"CMCCVPN\",\n \"sdwanconnectivity0_topology\":\"hub-spoke\"\n }\n }\n }\n}", + "relationship-list": { + "relationship": [ + { + "related-to": "sp-partner", + "relationship-label": "org.onap.relationships.inventory.PartOf", + "related-link": "/aai/v13/business/sp-partners/sp-partner/de888731-eac8-454c-bbb2-927a85ba2d1c", + "relationship-data": [ + { + "relationship-key": "sp-partner.sp-partner-id", + "relationship-value": "de888731-eac8-454c-bbb2-927a85ba2d1c" + } + ], + "related-to-property": [ + { + "property-key": "sp-partner.sp-partner-id", + "property-value": "de888731-eac8-454c-bbb2-927a85ba2d1c" + } + ] + } + ] + } + }, + { + "service-instance-id": "fd0b9f0a-0d5c-4f69-a3dc-fb9cabde9db8", + "service-instance-name": "DcXichengQuBeijing", + "service-type": "E2E Service", + "service-role": "E2E Service", + "model-invariant-id": "499e5e60-c8b2-4ea6-8c4e-7739420673a9", + "model-version-id": "8ec97da1-1e0a-4198-9c9a-3da2c60d7974", + "resource-version": "1537867379064", + "selflink": "restconf/config/GENERIC-RESOURCE-API:services/service/289b87a5-72fe-4197-a307-6929c3831f82/service-data/service-topology/", + "input-parameters": "{\n \"service\":{\n \"name\":\"DcXichengQuBeijing\",\n \"description\":\"SiteService\",\n \"serviceInvariantUuid\":\"499e5e60-c8b2-4ea6-8c4e-7739420673a9\",\n \"serviceUuid\":\"8ec97da1-1e0a-4198-9c9a-3da2c60d7974\",\n \"globalSubscriberId\":\"demo\",\n \"serviceType\":\"ccvpn\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SiteVF\",\n \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"mpls\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"deviceVF\",\n \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sdwanvpnattachmentVF\",\n \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"internet\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sotnvpnattachmentvF\",\n \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"devicevf_device_class\":\"PNF\",\n \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n \"devicevf_device_name\":\"50.47\",\n \"devicevf_device_systemIp\":\"192.168.1.47\",\n \"devicevf_device_type\":\"AR161EW\",\n \"devicevf_device_vendor\":\"huawei\",\n \"devicevf_device_version\":\"1.0\",\n \"internet_sitewanport_description\":\"internet\",\n \"internet_sitewanport_deviceName\":\"50.47\",\n \"internet_sitewanport_inputBandwidth\":\"100\",\n \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n \"internet_sitewanport_name\":\"internet\",\n \"internet_sitewanport_outputBandwidth\":\"100\",\n \"internet_sitewanport_portNumber\":\"0/0/2\",\n \"internet_sitewanport_portType\":\"GE\",\n \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n \"internet_sitewanport_transportNetworkName\":\"internet\",\n \"mpls_sitewanport_description\":\"mpls\",\n \"mpls_sitewanport_deviceName\":\"50.47\",\n \"mpls_sitewanport_inputBandwidth\":\"100\",\n \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n \"mpls_sitewanport_name\":\"mpls\",\n \"mpls_sitewanport_outputBandwidth\":\"100\",\n \"mpls_sitewanport_portNumber\":\"0/0/1\",\n \"mpls_sitewanport_portType\":\"GE\",\n \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n \"mpls_sitewanport_transportNetworkName\":\"internet\",\n \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"SDWANVPNInfra\",\n \"sitevf_site_address\":\"Chuangxin Building,Tianningsi,Xicheng,Beijing\",\n \"sitevf_site_controlPoint\":\"CMCC_VCPE\",\n \"sitevf_site_description\":\"CMCC_vGW\",\n \"sitevf_site_emails\":\"\",\n \"sitevf_site_latitude\":\"\",\n \"sitevf_site_longitude\":\"\",\n \"sitevf_site_name\":\"DcXichengQuBeijing\",\n \"sitevf_site_postcode\":\"100095\",\n \"sitevf_site_role\":\"sd-wan-edge\",\n \"sitevf_site_type\":\"single-gateway\",\n \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n }\n }\n }\n}", + "relationship-list": { + "relationship": [ + { + "related-to": "sp-partner", + "relationship-label": "org.onap.relationships.inventory.PartOf", + "related-link": "/aai/v13/business/sp-partners/sp-partner/289b87a5-72fe-4197-a307-6929c3831f82", + "relationship-data": [ + { + "relationship-key": "sp-partner.sp-partner-id", + "relationship-value": "289b87a5-72fe-4197-a307-6929c3831f82" + } + ], + "related-to-property": [ + { + "property-key": "sp-partner.sp-partner-id", + "property-value": "289b87a5-72fe-4197-a307-6929c3831f82" + } + ] + } + ] + } + }, + { + "service-instance-id": "2d55a540-f6d3-4108-9bb4-290574b87a6c", + "service-instance-name": "siteLondon", + "service-type": "E2E Service", + "service-role": "E2E Service", + "model-invariant-id": "499e5e60-c8b2-4ea6-8c4e-7739420673a9", + "model-version-id": "8ec97da1-1e0a-4198-9c9a-3da2c60d7974", + "resource-version": "1537866122803", + "input-parameters": "{\n \"service\":{\n \"name\":\"siteLondon\",\n \"description\":\"SiteService\",\n \"serviceInvariantUuid\":\"499e5e60-c8b2-4ea6-8c4e-7739420673a9\",\n \"serviceUuid\":\"8ec97da1-1e0a-4198-9c9a-3da2c60d7974\",\n \"globalSubscriberId\":\"demo\",\n \"serviceType\":\"ccvpn\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n {\n \"resourceName\":\"SiteVF\",\n \"resourceInvariantUuid\":\"0c0e1cbe-6e01-4f9e-8c45-a9700ebc14df\",\n \"resourceUuid\":\"4ad2d390-5c51-45f5-9710-b467a4ec7a73\",\n \"resourceCustomizationUuid\":\"66590e07-0777-415c-af44-36347cf3ddd3\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"mpls\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"205456e7-3dc0-40c4-8cb0-28e6c1877042\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"deviceVF\",\n \"resourceInvariantUuid\":\"c726490a-0ce2-4bc7-abea-dade66bfb13d\",\n \"resourceUuid\":\"0e2de9d8-d76b-4134-b5f1-41e79056adbe\",\n \"resourceCustomizationUuid\":\"5bc1373e-9a36-4a00-8c62-784e0bc417ad\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sdwanvpnattachmentVF\",\n \"resourceInvariantUuid\":\"f714feec-1aef-4890-abba-f8f3a906935f\",\n \"resourceUuid\":\"709919b7-75fd-4e49-8398-67853323ff55\",\n \"resourceCustomizationUuid\":\"debd988f-fe04-4940-a5cb-37f61d84eab4\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"internet\",\n \"resourceInvariantUuid\":\"97a3e552-08c4-4697-aeeb-d8d3e09ce58e\",\n \"resourceUuid\":\"63d8e1af-32dc-4c71-891d-e3f7b6a976d2\",\n \"resourceCustomizationUuid\":\"64b8e8ba-62b9-4db6-b420-1ca7067d63e0\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"sotnvpnattachmentvF\",\n \"resourceInvariantUuid\":\"97c4a3c6-2943-41af-8717-2f3183f944be\",\n \"resourceUuid\":\"44b777ee-9793-465d-8053-d8e86d2e2362\",\n \"resourceCustomizationUuid\":\"37aeb073-c75d-4cf6-a7fa-a1af862ef58a\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n },\n {\n \"resourceName\":\"SPPartnerVF\",\n \"resourceInvariantUuid\":\"072f9238-15b0-4bc5-a5f5-f18548739470\",\n \"resourceUuid\":\"81b9430b-8abe-45d6-8bf9-f41a8f5c735f\",\n \"resourceCustomizationUuid\":\"cd0b4b9c-66c6-49c5-b346-7580e4b6c394\",\n \"parameters\":{\n \"locationConstraints\":[\n\n ],\n \"resources\":[\n\n ],\n \"requestInputs\":{\n\n }\n }\n }\n ],\n \"requestInputs\":{\n \"devicevf_device_class\":\"PNF\",\n \"devicevf_device_esn\":\"2102351BTJ10HB000075\",\n \"devicevf_device_name\":\"50.47\",\n \"devicevf_device_systemIp\":\"192.168.1.47\",\n \"devicevf_device_type\":\"AR161EW\",\n \"devicevf_device_vendor\":\"huawei\",\n \"devicevf_device_version\":\"1.0\",\n \"internet_sitewanport_description\":\"internet\",\n \"internet_sitewanport_deviceName\":\"50.47\",\n \"internet_sitewanport_inputBandwidth\":\"100\",\n \"internet_sitewanport_ipAddress\":\"100.2.30.9\",\n \"internet_sitewanport_name\":\"internet\",\n \"internet_sitewanport_outputBandwidth\":\"100\",\n \"internet_sitewanport_portNumber\":\"0/0/2\",\n \"internet_sitewanport_portType\":\"GE\",\n \"internet_sitewanport_providerIpAddress\":\"100.2.30.10\",\n \"internet_sitewanport_transportNetworkName\":\"internet\",\n \"mpls_sitewanport_description\":\"mpls\",\n \"mpls_sitewanport_deviceName\":\"50.47\",\n \"mpls_sitewanport_inputBandwidth\":\"100\",\n \"mpls_sitewanport_ipAddress\":\"10.2.30.7\",\n \"mpls_sitewanport_name\":\"mpls\",\n \"mpls_sitewanport_outputBandwidth\":\"100\",\n \"mpls_sitewanport_portNumber\":\"0/0/1\",\n \"mpls_sitewanport_portType\":\"GE\",\n \"mpls_sitewanport_providerIpAddress\":\"10.2.30.8\",\n \"mpls_sitewanport_transportNetworkName\":\"internet\",\n \"sdwanvpnattachmentvf_sdwancondition_role\":\"spoke\",\n \"sdwanvpnattachmentvf_sdwancondition_sdwanVpnName\":\"SDWANVPNInfra-2\",\n \"sitevf_site_address\":\"VDF International Data Center,Hongkong\",\n \"sitevf_site_controlPoint\":\"VDF_VCPE\",\n \"sitevf_site_description\":\"VDF_vGW\",\n \"sitevf_site_emails\":\"\",\n \"sitevf_site_latitude\":\"\",\n \"sitevf_site_longitude\":\"\",\n \"sitevf_site_name\":\"siteLondon\",\n \"sitevf_site_postcode\":\"999077\",\n \"sitevf_site_role\":\"sd-wan-edge\",\n \"sitevf_site_type\":\"single-gateway\",\n \"sotnvpnattachmentvf_sotncondition_clientSignal\":\"\",\n \"sotnvpnattachmentvf_sotncondition_cVLAN\":\"\",\n \"sotnvpnattachmentvf_sotncondition_sotnVpnName\":\"SOTN L2\"\n }\n }\n }\n}", + "relationship-list": { + "relationship": [ + { + "related-to": "wan-port-config", + "relationship-label": "org.onap.relationships.inventory.PartOf", + "related-link": "/aai/v13/network/wan-port-configs/wan-port-config/52ae7944-12b3-4766-848e-e43088947af9", + "relationship-data": [ + { + "relationship-key": "wan-port-config.wan-port-config-id", + "relationship-value": "52ae7944-12b3-4766-848e-e43088947af9" + } + ], + "related-to-property": [ + { + "property-key": "wan-port-config.wan-port-config-name", + "property-value": "intenet" + } + ] + }, + { + "related-to": "site-resource", + "relationship-label": "org.onap.relationships.inventory.PartOf", + "related-link": "/aai/v13/network/site-resources/site-resource/a22193fc-d1b5-41a7-9033-14339838b0c5", + "relationship-data": [ + { + "relationship-key": "site-resource.site-resource-id", + "relationship-value": "a22193fc-d1b5-41a7-9033-14339838b0c5" + } + ], + "related-to-property": [ + { + "property-key": "site-resource.site-resource-name", + "property-value": "travelSite" + } + ] + }, + { + "related-to": "wan-port-config", + "relationship-label": "org.onap.relationships.inventory.PartOf", + "related-link": "/aai/v13/network/wan-port-configs/wan-port-config/9fc7c231-1b71-49e6-8390-e92b707e7615", + "relationship-data": [ + { + "relationship-key": "wan-port-config.wan-port-config-id", + "relationship-value": "9fc7c231-1b71-49e6-8390-e92b707e7615" + } + ], + "related-to-property": [ + { + "property-key": "wan-port-config.wan-port-config-name", + "property-value": "mpls" + } + ] + }, + { + "related-to": "device", + "relationship-label": "org.onap.relationships.inventory.PartOf", + "related-link": "/aai/v13/network/devices/device/f0cf1e06-7be8-4602-83cb-60d87d8e7ef3", + "relationship-data": [ + { + "relationship-key": "device.device-id", + "relationship-value": "f0cf1e06-7be8-4602-83cb-60d87d8e7ef3" + } + ], + "related-to-property": [ + { + "property-key": "device.device-name", + "property-value": "CentSpokeDevice" + } + ] + }, + { + "related-to": "sp-partner", + "relationship-label": "org.onap.relationships.inventory.PartOf", + "related-link": "/aai/v13/business/sp-partners/sp-partner/3addd6b9-b05f-4841-881c-1ce2c753513f", + "relationship-data": [ + { + "relationship-key": "sp-partner.sp-partner-id", + "relationship-value": "3addd6b9-b05f-4841-881c-1ce2c753513f" + } + ], + "related-to-property": [ + { + "property-key": "sp-partner.sp-partner-id", + "property-value": "3addd6b9-b05f-4841-881c-1ce2c753513f" + } + ] + }, + { + "related-to": "allotted-resource", + "relationship-label": "org.onap.relationships.inventory.Uses", + "related-link": "/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/0ea94797-3772-40ff-b6fb-69f06c533be3/allotted-resources/allotted-resource/f1523ca9-6b56-482e-b3a4-a2f8dcbfba12", + "relationship-data": [ + { + "relationship-key": "customer.global-customer-id", + "relationship-value": "demo" + }, + { + "relationship-key": "service-subscription.service-type", + "relationship-value": "ccvpn" + }, + { + "relationship-key": "service-instance.service-instance-id", + "relationship-value": "0ea94797-3772-40ff-b6fb-69f06c533be3" + }, + { + "relationship-key": "allotted-resource.id", + "relationship-value": "f1523ca9-6b56-482e-b3a4-a2f8dcbfba12" + } + ], + "related-to-property": [ + { + "property-key": "allotted-resource.description", + "property-value": "sdwan-attachment" + }, + { + "property-key": "allotted-resource.allotted-resource-name", + "property-value": "sdwan ar" + } + ] + }, + { + "related-to": "allotted-resource", + "relationship-label": "org.onap.relationships.inventory.Uses", + "related-link": "/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/8e07f832-3f50-4657-9b44-010049e8b488/allotted-resources/allotted-resource/d1a6b573-0595-4468-bab9-02465c295618", + "relationship-data": [ + { + "relationship-key": "customer.global-customer-id", + "relationship-value": "demo" + }, + { + "relationship-key": "service-subscription.service-type", + "relationship-value": "ccvpn" + }, + { + "relationship-key": "service-instance.service-instance-id", + "relationship-value": "8e07f832-3f50-4657-9b44-010049e8b488" + }, + { + "relationship-key": "allotted-resource.id", + "relationship-value": "d1a6b573-0595-4468-bab9-02465c295618" + } + ], + "related-to-property": [ + { + "property-key": "allotted-resource.description", + "property-value": "sotn attachment" + }, + { + "property-key": "allotted-resource.allotted-resource-name", + "property-value": "sotn ar" + } + ] + } + ] + } + } + ] +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/mock/json/netWorkD3Data.json b/usecaseui-portal/src/app/mock/json/netWorkD3Data.json new file mode 100644 index 00000000..0dbfd939 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/netWorkD3Data.json @@ -0,0 +1,94 @@ +[ + { + "networkId": "1000", + "pnfs": [ + { + "pnfName": "pnf1000" + } + ], + "tps": [ + { + "interface-name": "nodeId-78.78.78.78-ltpId-5" + }, + { + "interface-name": "nodeId-78.78.78.78-ltpId-4" + }, + { + "interface-name": "nodeId-78.78.78.78-ltpId-1" + }, + { + "interface-name": "nodeId-78.78.78.78-ltpId-3" + }, + { + "interface-name": "nodeId-78.78.78.78-ltpId-2" + } + ], + "aaiId":"" + }, + { + "networkId": "2000", + "pnfs": [ + { + "pnfName": "pnf2000" + } + ], + "tps": [ + { + "interface-name": "nodeId-79.79.79.79-ltpId-5" + }, + { + "interface-name": "nodeId-79.79.79.79-ltpId-4" + }, + { + "interface-name": "nodeId-79.79.79.79-ltpId-1" + }, + { + "interface-name": "nodeId-79.79.79.79-ltpId-3" + }, + { + "interface-name": "nodeId-79.79.79.79-ltpId-2" + } + ], + "aaiId":"" + }, + { + "networkId": "3000", + "pnfs": [ + { + "pnfName": "pnf3000" + } + ], + "tps": [ + { + "interface-name": "nodeId-80.80.80.80-ltpId-5" + }, + { + "interface-name": "nodeId-80.80.80.80-ltpId-4" + }, + { + "interface-name": "nodeId-80.80.80.80-ltpId-1" + }, + { + "interface-name": "nodeId-80.80.80.80-ltpId-3" + }, + { + "interface-name": "nodeId-80.80.80.80-ltpId-2" + } + ], + "aaiId":"" + }, + { + "networkId": "cloud-network", + "pnfs": [ + { + "pnfName": "pnf-cloud" + } + ], + "tps": [ + { + "interface-name": "cloud-tp" + } + ], + "aaiId":"gongjie666" + } +] diff --git a/usecaseui-portal/src/app/mock/json/netWorkD3Data2.json b/usecaseui-portal/src/app/mock/json/netWorkD3Data2.json new file mode 100644 index 00000000..1ab07822 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/netWorkD3Data2.json @@ -0,0 +1,246 @@ +[ + { + "network-resource": { + "network-id": "成都市", + "pnfs": { + "pnf": [ + { + "pnf-name": "双流区" + }, + { + "pnf-name": "武侯区" + }, + { + "pnf-name": "金牛区" + } + ] + }, + "tp": [ + { + "p-interface": { + "interface-name": "东升街", + "network-ref": "some ref", + "transparent": "some value", + "speed-value": "some speed", + "relationship-list": { + "relationship": [ + { + "related-to": "logical-link", + "related-link": "url of logical-link", + "relationship-data": { + "relationship-key": "logical-link.link-name", + "relationship-value": "some name" + } + } + ] + } + } + }, + { + "p-interface": { + "interface-name": "浆洗街", + "network-ref": "some ref", + "transparent": "some value", + "speed-value": "some speed", + "relationship-list": { + "relationship": [ + { + "related-to": "logical-link", + "related-link": "url of logical-link", + "relationship-data": { + "relationship-key": "logical-link.link-name", + "relationship-value": "some name" + } + } + ] + } + } + }, + { + "p-interface": { + "interface-name": "抚琴街", + "network-ref": "some ref", + "transparent": "some value", + "speed-value": "some speed", + "relationship-list": { + "relationship": [ + { + "related-to": "logical-link", + "related-link": "url of logical-link", + "relationship-data": { + "relationship-key": "logical-link.link-name", + "relationship-value": "some name" + } + } + ] + } + } + } + ], + "relationship-list": { + "relationship": [ + { + "related-to": "vpn-binding", + "related-link": "url of vpn-binding", + "relationship-data": { + "relationship-key": "vpn-binding.vpn-id", + "relationship-value": "some id" + } + } + ] + } + } + }, + { + "network-resource": { + "network-id": "重庆市", + "pnfs": { + "pnf": [ + { + "pnf-name": "沙坪坝区" + }, + { + "pnf-name": "南岸区" + }, + { + "pnf-name": "江北区" + } + ] + }, + "tp": [ + { + "p-interface": { + "interface-name": "万州", + "network-ref": "some ref", + "transparent": "some value", + "speed-value": "some speed", + "relationship-list": { + "relationship": [ + { + "related-to": "logical-link", + "related-link": "url of logical-link", + "relationship-data": { + "relationship-key": "logical-link.link-name", + "relationship-value": "some name" + } + } + ] + } + } + }, + { + "p-interface": { + "interface-name": "南川", + "network-ref": "some ref", + "transparent": "some value", + "speed-value": "some speed", + "relationship-list": { + "relationship": [ + { + "related-to": "logical-link", + "related-link": "url of logical-link", + "relationship-data": { + "relationship-key": "logical-link.link-name", + "relationship-value": "some name" + } + } + ] + } + } + }, + { + "p-interface": { + "interface-name": "武隆", + "network-ref": "some ref", + "transparent": "some value", + "speed-value": "some speed", + "relationship-list": { + "relationship": [ + { + "related-to": "logical-link", + "related-link": "url of logical-link", + "relationship-data": { + "relationship-key": "logical-link.link-name", + "relationship-value": "some name" + } + } + ] + } + } + }, + { + "p-interface": { + "interface-name": "江津", + "network-ref": "some ref", + "transparent": "some value", + "speed-value": "some speed", + "relationship-list": { + "relationship": [ + { + "related-to": "logical-link", + "related-link": "url of logical-link", + "relationship-data": { + "relationship-key": "logical-link.link-name", + "relationship-value": "some name" + } + } + ] + } + } + }, + { + "p-interface": { + "interface-name": "合川", + "network-ref": "some ref", + "transparent": "some value", + "speed-value": "some speed", + "relationship-list": { + "relationship": [ + { + "related-to": "logical-link", + "related-link": "url of logical-link", + "relationship-data": { + "relationship-key": "logical-link.link-name", + "relationship-value": "some name" + } + } + ] + } + } + }, + { + "p-interface": { + "interface-name": "巫山", + "network-ref": "some ref", + "transparent": "some value", + "speed-value": "some speed", + "relationship-list": { + "relationship": [ + { + "related-to": "logical-link", + "related-link": "url of logical-link", + "relationship-data": { + "relationship-key": "logical-link.link-name", + "relationship-value": "some name" + } + } + ] + } + } + } + ], + "relationship-list": { + "relationship": [ + { + "related-to": "vpn-binding", + "related-link": "url of vpn-binding", + "relationship-data": { + "relationship-key": "vpn-binding.vpn-id", + "relationship-value": "some id" + } + } + ] + } + } + } + ] diff --git a/usecaseui-portal/src/app/mock/json/nsServiceTemplateParameters.json b/usecaseui-portal/src/app/mock/json/nsServiceTemplateParameters.json new file mode 100644 index 00000000..b6dfbd86 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/nsServiceTemplateParameters.json @@ -0,0 +1,354 @@ +{ + "vnffgs": [ + { + "vnffg_id": "vnffg1", + "description": "", + "members": [ + "path1", + "path2" + ], + "properties": { + "vendor": "zte", + "connection_point": [ + "m6000_data_in", + "m600_tunnel_cp", + "m6000_data_out" + ], + "version": "1.0", + "constituent_vnfs": [ + "VFW", + "VNAT" + ], + "number_of_endpoints": 3, + "dependent_virtual_link": [ + "sfc_data_network", + "ext_datanet_net", + "ext_mnet_net" + ] + } + } + ], + "inputs": { + "sfc_data_network": { + "type": "string", + "value": "sfc_data_network" + }, + "externalDataNetworkName": { + "type": "string", + "value": "vlan_4004_tunnel_net" + }, + "externalManageNetworkName": { + "type": "string", + "value": "vlan_4008_mng_net" + }, + "NatIpRange": { + "type": "string", + "value": "192.167.0.10-192.168.0.20" + }, + "externalPluginManageNetworkName": { + "type": "string", + "value": "vlan_4007_plugin_net" + } + }, + "pnfs": [ + { + "pnf_id": "m6000_s", + "cps": [], + "description": "", + "properties": { + "vendor": "zte", + "request_reclassification": " False", + "pnf_type": "m6000s", + "version": "1.0", + "management_address": "111111", + "id": "m6000_s", + "nsh_aware": "False" + } + } + ], + "fps": [ + { + "properties": { + "symmetric": "False", + "policy": { + "type": "ACL", + "criteria": { + "dest_port_range": "1-100", + "ip_protocol": "tcp", + "source_ip_range": [ + "119.1.1.1-119.1.1.10" + ], + "dest_ip_range": [ + { + "get_input": "NatIpRange" + } + ], + "dscp": 0, + "source_port_range": "1-100" + } + } + }, + "forwarder_list": [ + { + "capability": "", + "type": "cp", + "node_name": "m6000_data_out" + }, + { + "capability": "", + "type": "cp", + "node_name": "m600_tunnel_cp" + }, + { + "capability": "vnat_fw_inout", + "type": "vnf", + "node_name": "VNAT" + } + ], + "description": "", + "fp_id": "path2" + }, + { + "properties": { + "symmetric": "True", + "policy": { + "type": "ACL", + "criteria": { + "dest_port_range": "1-100", + "ip_protocol": "tcp", + "source_ip_range": [ + "1-100" + ], + "dest_ip_range": [ + "1-100" + ], + "dscp": 4, + "source_port_range": "1-100" + } + } + }, + "forwarder_list": [ + { + "capability": "", + "type": "cp", + "node_name": "m6000_data_in" + }, + { + "capability": "", + "type": "cp", + "node_name": "m600_tunnel_cp" + }, + { + "capability": "vfw_fw_inout", + "type": "vnf", + "node_name": "VFW" + }, + { + "capability": "vnat_fw_inout", + "type": "vnf", + "node_name": "VNAT" + }, + { + "capability": "", + "type": "cp", + "node_name": "m600_tunnel_cp" + }, + { + "capability": "", + "type": "cp", + "node_name": "m6000_data_out" + } + ], + "description": "", + "fp_id": "path1" + } + ], + "routers": [], + "vnfs": [ + { + "vnf_id": "VFW", + "description": "", + "properties": { + "plugin_info": "vbrasplugin_1.0", + "vendor": "zte", + "is_shared": "False", + "adjust_vnf_capacity": "True", + "name": "VFW", + "vnf_extend_type": "driver", + "csarVersion": "v1.0", + "csarType": "NFAR", + "csarProvider": "ZTE", + "version": "1.0", + "nsh_aware": "True", + "cross_dc": "False", + "vnf_type": "VFW", + "vmnumber_overquota_alarm": "True", + "vnfd_version": "1.0.0", + "externalPluginManageNetworkName": "vlan_4007_plugin_net", + "id": "vcpe_vfw_zte_1_0", + "request_reclassification": "False" + }, + "dependencies": [ + { + "key_name": "vfw_ctrl_by_manager_cp", + "vl_id": "ext_mnet_net" + }, + { + "key_name": "vfw_data_cp", + "vl_id": "sfc_data_network" + } + ], + "type": "tosca.nodes.nfv.ext.zte.VNF.VFW", + "networks": [] + } + ], + "ns_exposed": { + "external_cps": [], + "forward_cps": [] + }, + "policies": [ + { + "file_url": "policies/abc.drl", + "name": "aaa" + } + ], + "vls": [ + { + "route_id": "", + "vl_id": "ext_mnet_net", + "route_external": "False", + "description": "", + "properties": { + "name": "vlan_4008_mng_net", + "mtu": 1500, + "location_info": { + "tenant": "admin", + "vimid": 2, + "availability_zone": "nova" + }, + "ip_version": 4, + "dhcp_enabled": "True", + "network_name": "vlan_4008_mng_net", + "network_type": "vlan" + } + }, + { + "route_id": "", + "vl_id": "ext_datanet_net", + "route_external": "False", + "description": "", + "properties": { + "name": "vlan_4004_tunnel_net", + "mtu": 1500, + "location_info": { + "tenant": "admin", + "vimid": 2, + "availability_zone": "nova" + }, + "ip_version": 4, + "dhcp_enabled": "True", + "network_name": "vlan_4004_tunnel_net", + "network_type": "vlan" + } + }, + { + "route_id": "", + "vl_id": "sfc_data_network", + "route_external": "False", + "description": "", + "properties": { + "name": "sfc_data_network", + "dhcp_enabled": "True", + "is_predefined": "False", + "location_info": { + "tenant": "admin", + "vimid": 2, + "availability_zone": "nova" + }, + "ip_version": 4, + "mtu": 1500, + "network_name": "sfc_data_network", + "network_type": "vlan" + } + } + ], + "cps": [ + { + "pnf_id": "m6000_s", + "vl_id": "path2", + "description": "", + "cp_id": "m6000_data_out", + "properties": { + "direction": "bidirectional", + "vnic_type": "normal", + "bandwidth": 0, + "mac_address": "11-22-33-22-11-44", + "interface_name": "xgei-0/4/1/5", + "ip_address": "176.1.1.2", + "order": 0, + "sfc_encapsulation": "mac" + } + }, + { + "pnf_id": "m6000_s", + "vl_id": "ext_datanet_net", + "description": "", + "cp_id": "m600_tunnel_cp", + "properties": { + "direction": "bidirectional", + "vnic_type": "normal", + "bandwidth": 0, + "mac_address": "00-11-00-22-33-00", + "interface_name": "gei-0/4/0/13", + "ip_address": "191.167.100.5", + "order": 0, + "sfc_encapsulation": "mac" + } + }, + { + "pnf_id": "m6000_s", + "vl_id": "path2", + "description": "", + "cp_id": "m6000_data_in", + "properties": { + "direction": "bidirectional", + "vnic_type": "normal", + "bandwidth": 0, + "mac_address": "11-22-33-22-11-41", + "interface_name": "gei-0/4/0/7", + "ip_address": "1.1.1.1", + "order": 0, + "sfc_encapsulation": "mac", + "bond": "none" + } + }, + { + "pnf_id": "m6000_s", + "vl_id": "ext_mnet_net", + "description": "", + "cp_id": "m600_mnt_cp", + "properties": { + "direction": "bidirectional", + "vnic_type": "normal", + "bandwidth": 0, + "mac_address": "00-11-00-22-33-11", + "interface_name": "gei-0/4/0/1", + "ip_address": "10.46.244.51", + "order": 0, + "sfc_encapsulation": "mac", + "bond": "none" + } + } + ], + "metadata": { + "invariant_id": "vcpe_ns_sff_1", + "name": "VCPE_NS", + "csarVersion": "v1.0", + "csarType": "NSAR", + "csarProvider": "ZTE", + "version": 1, + "vendor": "ZTE", + "id": "VCPE_NS", + "description": "vcpe_ns" + } +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/mock/json/onboardTableData.json b/usecaseui-portal/src/app/mock/json/onboardTableData.json new file mode 100644 index 00000000..56e5b323 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/onboardTableData.json @@ -0,0 +1,103 @@ +{ + "total":245, + "tableList":[ + { + "name":"Demo_vims_zte", + "type":"NS", + "version":"1.0", + "status":"Onboarding", + "progress": 35 + }, + { + "name":"Demo_vims_zte", + "type":"NS", + "version":"1.0", + "status":"Onboarding", + "progress": 86 + }, + { + "name":"Demo_vims_zte", + "type":"NS", + "version":"1.0", + "status":"Invalid", + "progress": 100 + }, + { + "name":"Demo_vims_zte", + "type":"NS", + "version":"1.0", + "status":"Onboarded", + "progress": 100 + }, + { + "name":"Demo_vims_zte", + "type":"NS", + "version":"1.0", + "status":"Onboarded", + "progress": 100 + }, + { + "name":"Demo_vims_zte", + "type":"NS", + "version":"1.0", + "status":"Invalid", + "progress": 100 + }, + { + "name":"Demo_vims_zte", + "type":"NS", + "version":"1.0", + "status":"Invalid", + "progress": 100 + }, + { + "name":"Demo_vims_zte", + "type":"NS", + "version":"1.0", + "status":"Invalid", + "progress": 100 + }, + { + "name":"Demo_vims_zte", + "type":"NS", + "version":"1.0", + "status":"Invalid", + "progress": 100 + }, + { + "name":"Demo_vims_zte", + "type":"NS", + "version":"1.0", + "status":"Invalid", + "progress": 100 + }, + { + "name":"Demo_vims_zte", + "type":"NS", + "version":"1.0", + "status":"Invalid", + "progress": 100 + }, + { + "name":"Demo_vims_zte", + "type":"NS", + "version":"1.0", + "status":"Invalid", + "progress": 100 + }, + { + "name":"Demo_vims_zte", + "type":"NS", + "version":"1.0", + "status":"Invalid", + "progress": 100 + }, + { + "name":"Demo_vims_zte", + "type":"NS", + "version":"1.0", + "status":"Invalid", + "progress": 100 + } + ] +} diff --git a/usecaseui-portal/src/app/mock/json/p_interfaces1.json b/usecaseui-portal/src/app/mock/json/p_interfaces1.json new file mode 100644 index 00000000..399c21b9 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/p_interfaces1.json @@ -0,0 +1,17 @@ +[ + { + "interface-name": "nodeId-78.78.78.78-ltpId-5" + }, + { + "interface-name": "nodeId-78.78.78.78-ltpId-4" + }, + { + "interface-name": "nodeId-78.78.78.78-ltpId-3" + }, + { + "interface-name": "nodeId-78.78.78.78-ltpId-2" + }, + { + "interface-name": "nodeId-78.78.78.78-ltpId-1" + } +] diff --git a/usecaseui-portal/src/app/mock/json/p_interfaces2.json b/usecaseui-portal/src/app/mock/json/p_interfaces2.json new file mode 100644 index 00000000..4baf8b85 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/p_interfaces2.json @@ -0,0 +1,17 @@ +[ + { + "interface-name": "nodeId-79.79.79.79-ltpId-5" + }, + { + "interface-name": "nodeId-79.79.79.79-ltpId-4" + }, + { + "interface-name": "nodeId-79.79.79.79-ltpId-3" + }, + { + "interface-name": "nodeId-79.79.79.79-ltpId-2" + }, + { + "interface-name": "nodeId-79.79.79.79-ltpId-1" + } +] diff --git a/usecaseui-portal/src/app/mock/json/pnfdetail-domain.json b/usecaseui-portal/src/app/mock/json/pnfdetail-domain.json new file mode 100644 index 00000000..c337bd97 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/pnfdetail-domain.json @@ -0,0 +1,29 @@ +{ + "pnf-name": "pnf1000", + "pnf-id": "79.79.79.79", + "in-maint": true, + "resource-version": "1536028638695", + "admin-status": "up", + "operational-status": "up", + "relationship-list": { + "relationship": [ + { + "related-to": "network-resource", + "relationship-label": "tosca.relationships.network.LinksTo", + "related-link": "/aai/v13/network/network-resources/network-resource/1000", + "relationship-data": [ + { + "relationship-key": "network-resource.network-id", + "relationship-value": "1000" + } + ], + "related-to-property": [ + { + "property-key": "network-resource.network-id", + "property-value": "1000" + } + ] + } + ] + } +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/mock/json/progress.json b/usecaseui-portal/src/app/mock/json/progress.json new file mode 100644 index 00000000..1a36c1e2 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/progress.json @@ -0,0 +1,13 @@ +{ + "operationStatus":{ + "operationId": "XXXXXX", + "operation": "create|delete|update|scale", + "result": "finished|error|processing", + "reason": "", + "userId": "", + "operationContent": "Be creating pop.", + "progress": 0, + "operateAt": "", + "finishedAt": "" + } +} diff --git a/usecaseui-portal/src/app/mock/json/sdwanvpnServiceTemplateParameters.json b/usecaseui-portal/src/app/mock/json/sdwanvpnServiceTemplateParameters.json new file mode 100644 index 00000000..cabf0e12 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/sdwanvpnServiceTemplateParameters.json @@ -0,0 +1,57 @@ +{ + "invariantUUID": "88dcb2f0-085b-4548-8b93-0882e37d25d8", + "uuid": "462f84e5-f0e5-44c5-ab95-38fb4bf77064", + "name": "SDWANVPNInfraService", + "type": "Service", + "version": "null", + "description": "SDWAN VPN Infra", + "category": "E2E Service", + "subcategory": "null", + "customizationUuid": "null", + "inputs": [ + { + "name": "sdwanconnectivity0_topology", + "type": "string", + "description": "full mesh, hub-spoke", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sdwanconnectivity0_name", + "type": "string", + "description": "the name of this VPM object", + "isRequired": "true", + "defaultValue": "null" + } + ], + "nestedTemplates": [ + { + "invariantUUID": "f99a9a23-c88e-44ff-a4dc-22b88675d278", + "uuid": "7baa7742-3a13-4288-8330-868015adc340", + "name": "SDWANConnectivity", + "type": "VL", + "version": "1.0", + "description": "Represents SDWAN Connectivity.", + "category": "Generic", + "subcategory": "Infrastructure", + "customizationUuid": "94ec574b-2306-4cbd-8214-09662b040f73", + "inputs": [ + { + "name": "sdwanconnectivity0_topology", + "type": "string", + "description": "full mesh, hub-spoke", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sdwanconnectivity0_name", + "type": "string", + "description": "the name of this VPM object", + "isRequired": "true", + "defaultValue": "null" + } + ], + "nestedTemplates": [] + } + ] +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/mock/json/serviceTemplates.json b/usecaseui-portal/src/app/mock/json/serviceTemplates.json new file mode 100644 index 00000000..8de26a7d --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/serviceTemplates.json @@ -0,0 +1,19 @@ + +[ + {"name":"template1","uuid":"uuidxxx","invariantUUID":"dddd1","version":"1.20"}, + {"name":"template2","uuid":"uuidxxx","invariantUUID":"dddd2","version":"1.20"}, + {"name":"template3","uuid":"uuidxxxx","invariantUUID":"dddd3","version":"1.20"}, + {"name":"template4","uuid":"uuidaaa","invariantUUID":"dddd4","version":"1.20"}, + {"name":"template5","uuid":"uuidaaa","invariantUUID":"dddd5","version":"1.20"}, + {"name":"template6","uuid":"uuidaaaa","invariantUUID":"dddd6","version":"1.20"}, + {"name":"template7","uuid":"uuidbbb","invariantUUID":"dddd7","version":"1.20"}, + {"name":"template8","uuid":"uuidbbb","invariantUUID":"dddd8","version":"1.20"}, + {"name":"template9","uuid":"uuidbbbb","invariantUUID":"dddd9","version":"1.20"}, + {"name":"template10","uuid":"uuidaaaa","invariantUUID":"dddd10","version":"1.20"}, + {"name":"template11","uuid":"uuidxxx","invariantUUID":"dddd11","version":"1.20"}, + {"name":"template12","uuid":"uuidccc","invariantUUID":"dddd12","version":"1.20"}, + {"name":"template13","uuid":"uuidccc","invariantUUID":"dddd13","version":"1.20"}, + {"name":"template14","uuid":"uuidccc","invariantUUID":"dddd14","version":"1.20"}, + {"name":"template15","uuid":"uuidxxx","invariantUUID":"dddd15","version":"1.20"}, + {"name":"template16","uuid":"uuidbbbb","invariantUUID":"dddd16","version":"1.20"} +] diff --git a/usecaseui-portal/src/app/mock/json/serviceTemplates2.json b/usecaseui-portal/src/app/mock/json/serviceTemplates2.json new file mode 100644 index 00000000..93202786 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/serviceTemplates2.json @@ -0,0 +1,43 @@ + +[ + { + "uuid": "d0a4af63-570c-40b3-a26f-ef11366f0a03", + "invariantUUID": "88dcb2f0-085b-4548-8b93-0882e37d25d8", + "name": "SDWANVPNInfraService", + "version": "2.0", + "toscaModelURL": "/sdc/v1/catalog/services/d0a4af63-570c-40b3-a26f-ef11366f0a03/toscaModel", + "category": "E2E Service" + }, + { + "uuid": "4ca96a53-2e18-4297-8dc7-5776fdf6871b", + "invariantUUID": "21886a96-0664-47a3-beae-766952f2059f", + "name": "SOTNVPNInfraService", + "version": "2.0", + "toscaModelURL": "/sdc/v1/catalog/services/4ca96a53-2e18-4297-8dc7-5776fdf6871b/toscaModel", + "category": "E2E Service" + }, + { + "uuid": "ea8bb4d2-00ea-4aeb-ad76-20ac8cb1c99c", + "invariantUUID": "342ff5e8-5592-4455-a537-a81172c9d541", + "name": "sowsiteservice", + "version": "3.0", + "toscaModelURL": "/sdc/v1/catalog/services/ea8bb4d2-00ea-4aeb-ad76-20ac8cb1c99c/toscaModel", + "category": "E2E Service" + }, + { + "uuid": "cb756ffb-8d91-49fb-86f7-12ceb2b13158", + "invariantUUID": "a7029145-4294-4664-b619-00dc959a1ff6", + "name": "SiteServiceV3", + "version": "1.0", + "toscaModelURL": "/sdc/v1/catalog/services/cb756ffb-8d91-49fb-86f7-12ceb2b13158/toscaModel", + "category": "E2E Service" + }, + { + "uuid": "4b4b3ef8-6747-4111-b9e0-81cf251c0068", + "invariantUUID": "5c13f3fb-2744-4635-9f1f-c59c92dc8f70", + "name": "SiteService", + "version": "2.0", + "toscaModelURL": "/sdc/v1/catalog/services/4b4b3ef8-6747-4111-b9e0-81cf251c0068/toscaModel", + "category": "E2E Service" + } +] diff --git a/usecaseui-portal/src/app/mock/json/serviceTypes.json b/usecaseui-portal/src/app/mock/json/serviceTypes.json new file mode 100644 index 00000000..cb1c20a5 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/serviceTypes.json @@ -0,0 +1,18 @@ + +[ + { + "service-type": "CCVPN", + "temp-ub-sub-account-id": "sotnaccount", + "resource-version": "1535601345780" + }, + { + "service-type": "SOTN", + "temp-ub-sub-account-id": "sotnaccount", + "resource-version": "1535601330040" + }, + { + "service-type": "CCVPN1", + "temp-ub-sub-account-id": "sotnaccount", + "resource-version": "1536111036667" + } +] \ No newline at end of file diff --git a/usecaseui-portal/src/app/mock/json/servicesList.json b/usecaseui-portal/src/app/mock/json/servicesList.json new file mode 100644 index 00000000..61ddb7a5 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/servicesList.json @@ -0,0 +1,4 @@ +{ + "customer":["aaaaa","bbbbb","ccccc","ddddd"], + "serviceType":["aaaaa","bbbbbb","cccc","ddddddd"] +} diff --git a/usecaseui-portal/src/app/mock/json/servicesTableData.json b/usecaseui-portal/src/app/mock/json/servicesTableData.json new file mode 100644 index 00000000..07d4cbe2 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/servicesTableData.json @@ -0,0 +1,127 @@ +{ + "total":365, + "tableList":[ + { + "serviceId":"foeigiaaegaf", + "name":"demo-test5", + "type":"voLTE type", + "status":"Active", + "progress": 100, + "expand": false, + "children":[ + {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"}, + {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"} + ] + }, + { + "serviceId":"foeigiaaegaf", + "name":"demo-test5", + "type":"voLTE type", + "status":"Closed", + "progress": 100, + "expand" : false, + "children":[ + {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"}, + {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"}, + {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"} + ] + }, + { + "serviceId":"foeigiaaegaf", + "name":"demo-test5", + "type":"voLTE type", + "status":"Onboarding", + "progress": 50, + "expand" : false, + "children":[ + {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"}, + {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"}, + {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"}, + {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"} + ] + }, + { + "serviceId":"foeigiaaegaf", + "name":"demo-test5", + "type":"voLTE type", + "status":"Deleting", + "progress": 25, + "expand": false, + "children":[ + {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"}, + {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"} + ] + }, + { + "serviceId":"foeigiaaegaf", + "name":"demo-test5", + "type":"voLTE type", + "status":"Updating", + "progress": 45, + "expand": false, + "children":[ + + ] + }, + { + "serviceId":"foeigiaaegaf", + "name":"demo-test5", + "type":"voLTE type", + "status":"Creating", + "progress": 60, + "expand": false, + "children":[ + {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"}, + {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"} + ] + }, + { + "serviceId":"foeigiaaegaf", + "name":"demo-test5", + "type":"voLTE type", + "status":"Creating", + "progress": 60, + "expand": false, + "children":[ + {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"}, + {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"} + ] + }, + { + "serviceId":"foeigiaaegaf", + "name":"demo-test5", + "type":"voLTE type", + "status":"Creating", + "progress": 60, + "expand": false, + "children":[ + {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"}, + {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"} + ] + }, + { + "serviceId":"foeigiaaegaf", + "name":"demo-test5", + "type":"voLTE type", + "status":"Creating", + "progress": 60, + "expand": false, + "children":[ + {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"}, + {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"} + ] + }, + { + "serviceId":"foeigiaaegaf", + "name":"demo-test5", + "type":"voLTE type", + "status":"Creating", + "progress": 60, + "expand": false, + "children":[ + {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"}, + {"serviceId":"aaasageafefdafda","name":"demo-test5","type":"Network Service"} + ] + } + ] +} diff --git a/usecaseui-portal/src/app/mock/json/siteAddressData.json b/usecaseui-portal/src/app/mock/json/siteAddressData.json new file mode 100644 index 00000000..4b080f50 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/siteAddressData.json @@ -0,0 +1,39 @@ +[ + { + "location" : "Chuangxin Building,Tianningsi,Xicheng,Beijing", + "access-provider-id": "3333", + "access-client-id": "4444", + "access-topology-id": "11", + "access-node-id": "10.10.10.10", + "access-ltp-id": "1", + "host" : "" + }, + { + "location" : "CMCC International Data Center,Hongkong", + "access-provider-id": "3333", + "access-client-id": "4444", + "access-topology-id": "11", + "access-node-id": "10.10.10.10", + "access-ltp-id": "2", + "host" : "" + }, + { + "location" : "VDF International Data Center,Hongkong", + "access-provider-id": "pid000", + "access-client-id": "cid000", + "access-topology-id": "tid000", + "access-node-id": "11.11.11.11", + "access-ltp-id": "2", + "host" : "http://10.10.10.10" + }, + { + "location" : "University College London,Gower Street,London", + "access-provider-id": "5555", + "access-client-id": "6666", + "access-topology-id": "22", + "access-node-id": "11.11.11.11", + "access-ltp-id": "2", + "host" : "http://10.10.10.10" + } +] + diff --git a/usecaseui-portal/src/app/mock/json/siteServiceTemplateParameters.json b/usecaseui-portal/src/app/mock/json/siteServiceTemplateParameters.json new file mode 100644 index 00000000..53368e32 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/siteServiceTemplateParameters.json @@ -0,0 +1,308 @@ +{ + "invariantUUID": "5c13f3fb-2744-4635-9f1f-c59c92dc8f70", + "uuid": "3a76b1f5-fb0d-4b6b-82d5-0e8a4ebc3838", + "name": "SiteService", + "type": "Service", + "version": "null", + "description": "Site Service", + "category": "E2E Service", + "subcategory": "null", + "customizationUuid": "null", + "inputs": [ + { + "name": "internet_sitewanport_deviceName", + "type": "string", + "description": "The device name in the site", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "mpls_sitewanport_description", + "type": "string", + "description": "The description of the WAN port", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sitevf_site_type", + "type": "string", + "description": "The gateway option is used for SDWAN connectivity", + "isRequired": "true", + "defaultValue": "Single Gateway" + }, + { + "name": "sitevf_site_longitude", + "type": "string", + "description": "The longitude of the site", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "mpls_sitewanport_outputBandwidth", + "type": "string", + "description": "The output bandwidth of the WAN port", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "devicevf_device_esn", + "type": "string", + "description": "Device serial number", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sitevf_site_role", + "type": "string", + "description": "This is used for SDWAN only", + "isRequired": "true", + "defaultValue": "dsvpn-hub" + }, + { + "name": "internet_sitewanport_providerIpAddress", + "type": "string", + "description": "The provider IP address of the provider CE", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sotnvpnattachmentvf_sotncondition_cVLAN", + "type": "string", + "description": "The cvlan for the site used for ethernet type connectivity.", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sitevf_site_address", + "type": "string", + "description": "the address of this site", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "mpls_sitewanport_portType", + "type": "string", + "description": "the port type of the device.1 GE, 2 FE, 3 XGE, 4 LTE, 5 xDSL(ATM), 6 xSDL(PTM)", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "mpls_sitewanport_transportNetworkName", + "type": "string", + "description": "The transport network of the WAN port", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "internet_sitewanport_inputBandwidth", + "type": "string", + "description": "The input bandwidth of the WAN port", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "mpls_sitewanport_portNumber", + "type": "string", + "description": "the port number of the device", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "internet_sitewanport_description", + "type": "string", + "description": "The description of the WAN port", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "internet_sitewanport_transportNetworkName", + "type": "string", + "description": "The transport network of the WAN port", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sitevf_site_latitude", + "type": "string", + "description": "The latitude of the site", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sitevf_site_controlPoint", + "type": "string", + "description": "The control point of the site,only for sd-wan-edge", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "internet_sitewanport_outputBandwidth", + "type": "string", + "description": "The output bandwidth of the WAN port", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sitevf_site_name", + "type": "string", + "description": "the name of this site", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sitevf_site_description", + "type": "string", + "description": "The description of the site", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sotnvpnattachmentvf_sotncondition_clientSignal", + "type": "string", + "description": "The client signal for the site used for client type connectivity.", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "internet_sitewanport_portType", + "type": "string", + "description": "the port type of the device.1 GE, 2 FE, 3 XGE, 4 LTE, 5 xDSL(ATM), 6 xSDL(PTM)", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "internet_sitewanport_name", + "type": "string", + "description": "The name of the WAN port", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "mpls_sitewanport_deviceName", + "type": "string", + "description": "The device name in the site", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "mpls_sitewanport_providerIpAddress", + "type": "string", + "description": "The provider IP address of the provider CE", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "mpls_sitewanport_inputBandwidth", + "type": "string", + "description": "The input bandwidth of the WAN port", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sitevf_site_emails", + "type": "string", + "description": "the emails of this site", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "devicevf_device_class", + "type": "string", + "description": "The class should be VNF/PNF", + "isRequired": "true", + "defaultValue": "PNF" + }, + { + "name": "sdwanvpnattachmentvf_sdwancondition_role", + "type": "string", + "description": "the role of the site.hub/spoke.", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "mpls_sitewanport_ipAddress", + "type": "string", + "description": "The public IP of the WAN Port", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "devicevf_device_name", + "type": "string", + "description": "the name of the device", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sdwanvpnattachmentvf_sdwancondition_sdwanVpnName", + "type": "string", + "description": "The device Id of the site", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "internet_sitewanport_portNumber", + "type": "string", + "description": "the port number of the device", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sotnvpnattachmentvf_sotncondition_sotnVpnName", + "type": "string", + "description": "References the SOTN VPN Infra service", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "devicevf_device_type", + "type": "string", + "description": "The type of the device", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sitevf_site_postcode", + "type": "string", + "description": "The postcode of the site", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "devicevf_device_version", + "type": "string", + "description": "The version of the device", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "devicevf_device_vendor", + "type": "string", + "description": "The vendor of the device", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "mpls_sitewanport_name", + "type": "string", + "description": "The name of the WAN port", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "devicevf_device_systemIp", + "type": "string", + "description": "The system ip of the device", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "internet_sitewanport_ipAddress", + "type": "string", + "description": "The public IP of the WAN Port", + "isRequired": "true", + "defaultValue": "null" + } + ], + "nestedTemplates": [] +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/mock/json/sotn-connectivity.json b/usecaseui-portal/src/app/mock/json/sotn-connectivity.json new file mode 100644 index 00000000..6ac0a453 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/sotn-connectivity.json @@ -0,0 +1,94 @@ +{ + "connectivity": [ + { + "connectivity-id": "4efe6dff-acfc-4d13-a3fd-1177d3c08e84", + "bandwidth-profile-name": "vpn1", + "vpn-type": "ethernet", + "color-aware": "c1", + "coupling-flag": "c2", + "etht-svc-name": "SOTNVPNInfra", + "access-provider-id": "10", + "access-client-id": "10", + "access-topology-id": "10", + "access-node-id": "10.10.10.10", + "access-ltp-id": "14", + "connectivity-selflink": "restconf/config/GENERIC-RESOURCE-API:services/service/10/service-data/networks/network/3efe6dff-acfc-4d13-a3fd-1177d3c08e88/network-data/", + "operational-status": "Created", + "model-customization-id": "b44071c8-04fd-4d6b-b6af-772cbfaa1129", + "model-invariant-id": "1b9c677d-fddf-4b70-938b-925a7fa57d43", + "model-version-id": "218df3c3-50dd-4c26-9e36-4771387bb771", + "resource-version": "1535684533349", + "relationship-list": { + "relationship": [ + { + "related-to": "vpn-binding", + "relationship-label": "org.onap.relationships.inventory.PartOf", + "related-link": "/aai/v13/network/vpn-bindings/vpn-binding/pnf1000-vpn1", + "relationship-data": [ + { + "relationship-key": "vpn-binding.vpn-id", + "relationship-value": "pnf1000-vpn1" + } + ], + "related-to-property": [ + { + "property-key": "vpn-binding.vpn-name", + "property-value": "pnf1000-vpn1" + }, + { + "property-key": "vpn-binding.vpn-type", + "property-value": "ethernet" + } + ] + }, + { + "related-to": "service-instance", + "relationship-label": "org.onap.relationships.inventory.PartOf", + "related-link": "/aai/v13/business/customers/customer/Democcy/service-subscriptions/service-subscription/CCVPN/service-instances/service-instance/32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0", + "relationship-data": [ + { + "relationship-key": "customer.global-customer-id", + "relationship-value": "Democcy" + }, + { + "relationship-key": "service-subscription.service-type", + "relationship-value": "CCVPN" + }, + { + "relationship-key": "service-instance.service-instance-id", + "relationship-value": "32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0" + } + ], + "related-to-property": [ + { + "property-key": "service-instance.service-instance-name", + "property-value": "SOTNVPNInfra" + } + ] + }, + { + "related-to": "vpn-binding", + "relationship-label": "org.onap.relationships.inventory.PartOf", + "related-link": "/aai/v13/network/vpn-bindings/vpn-binding/pnf2000-vpn1", + "relationship-data": [ + { + "relationship-key": "vpn-binding.vpn-id", + "relationship-value": "pnf2000-vpn1" + } + ], + "related-to-property": [ + { + "property-key": "vpn-binding.vpn-name", + "property-value": "pnf2000-vpn1" + }, + { + "property-key": "vpn-binding.vpn-type", + "property-value": "ethernet" + } + ] + } + ] + } + } + ] +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/mock/json/sotn-connectivity2.json b/usecaseui-portal/src/app/mock/json/sotn-connectivity2.json new file mode 100644 index 00000000..7bd55bf0 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/sotn-connectivity2.json @@ -0,0 +1 @@ +{"connectivity":[{"connectivity-id":"4424ea5a-3603-4040-baa9-4046ed533fe5","bandwidth-profile-name":"vpn1","vpn-type":"ethernet","color-aware":"true","coupling-flag":"true","etht-svc-name":"vpn1","access-provider-id":"","access-client-id":"","access-topology-id":"","access-node-id":"","access-ltp-id":"","connectivity-selflink":"restconf/config/GENERIC-RESOURCE-API:services/service/32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0/service-data/networks/network/4424ea5a-3603-4040-baa9-4046ed533fe5/network-data/","operational-status":"Active","model-customization-id":"2bafc8aa-c60c-4a17-a658-db4cbca07fac","model-invariant-id":"5d0ada6b-de04-4624-9410-3baab839cd6f","model-version-id":"15e21930-3248-4148-b071-a2a9be1f9889","resource-version":"1537623789475","relationship-list":{"relationship":[{"related-to":"vpn-binding","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/vpn-bindings/vpn-binding/11.11.11.11-vpn1","relationship-data":[{"relationship-key":"vpn-binding.vpn-id","relationship-value":"11.11.11.11-vpn1"}],"related-to-property":[{"property-key":"vpn-binding.vpn-name","property-value":"11.11.11.11-vpn1"},{"property-key":"vpn-binding.vpn-type","property-value":"ethernet"}]},{"related-to":"service-instance","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/business/customers/customer/demo/service-subscriptions/service-subscription/ccvpn/service-instances/service-instance/32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0","relationship-data":[{"relationship-key":"customer.global-customer-id","relationship-value":"demo"},{"relationship-key":"service-subscription.service-type","relationship-value":"ccvpn"},{"relationship-key":"service-instance.service-instance-id","relationship-value":"32cd906f-ee7a-4ecf-b1c3-2fce4d59f8c0"}],"related-to-property":[{"property-key":"service-instance.service-instance-name","property-value":"SOTNVPNInfra"}]},{"related-to":"vpn-binding","relationship-label":"org.onap.relationships.inventory.PartOf","related-link":"/aai/v13/network/vpn-bindings/vpn-binding/12.12.12.12-vpn1","relationship-data":[{"relationship-key":"vpn-binding.vpn-id","relationship-value":"12.12.12.12-vpn1"}],"related-to-property":[{"property-key":"vpn-binding.vpn-name","property-value":"12.12.12.12-vpn1"},{"property-key":"vpn-binding.vpn-type","property-value":"ethernet"}]}]}}]} \ No newline at end of file diff --git a/usecaseui-portal/src/app/mock/json/sotnvpnServiceTemplateParameters.json b/usecaseui-portal/src/app/mock/json/sotnvpnServiceTemplateParameters.json new file mode 100644 index 00000000..21abcda1 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/sotnvpnServiceTemplateParameters.json @@ -0,0 +1,225 @@ +{ + "invariantUUID": "21886a96-0664-47a3-beae-766952f2059f", + "uuid": "54836196-c411-4690-af98-900c1c3aadd7", + "name": "SOTNVPNInfraService", + "type": "Service", + "version": "null", + "description": "SOTN VPN Infra Service", + "category": "E2E Service", + "subcategory": "null", + "customizationUuid": "null", + "inputs": [ + { + "name": "sotnconnectivity0_eir", + "type": "string", + "description": "The eir for SOTN connectivity. Only for Ethernet type", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sotnconnectivity0_cir", + "type": "string", + "description": "The cir for SOTN connectivity. Only for Ethernet type", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sotnconnectivity0_endTime", + "type": "string", + "description": "End Time", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sotnconnectivity0_ebs", + "type": "string", + "description": "The ebs for SOTN connectivity. Only for Ethernet type", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sotnconnectivity0_startTime", + "type": "string", + "description": "Start Time", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sotnconnectivity0_dualLink", + "type": "boolean", + "description": "is Active/standby enabled", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sotnconnectivity0_reroute", + "type": "boolean", + "description": "Whether to support automatic rerouting", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sotnconnectivity0_cbs", + "type": "string", + "description": "The cbs for SOTN connectivity. Only for Ethernet type", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sotnconnectivity0_name", + "type": "string", + "description": "the name of the SOTN connectivity", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sotnconnectivity0_SLS", + "type": "string", + "description": "Business Service Level", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sotnconnectivity0_description", + "type": "string", + "description": "The description of the SOTN connectivity", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sotnconnectivity0_couplingFlag", + "type": "boolean", + "description": "The couplingFlag for SOTN connectivity. Only for Ethernet type", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sotnconnectivity0_colorAware", + "type": "boolean", + "description": "The colorAware of the SOTN connectivity. Only for Ethernet type", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sotnconnectivity0_COS", + "type": "string", + "description": "Business Class of Service of VPN", + "isRequired": "true", + "defaultValue": "standard" + } + ], + "nestedTemplates": [ + { + "invariantUUID": "1b9c677d-fddf-4b70-938b-925a7fa57d43", + "uuid": "218df3c3-50dd-4c26-9e36-4771387bb771", + "name": "SOTNConnectivity", + "type": "VL", + "version": "1.0", + "description": "Represents a sotn Connectivity", + "category": "Generic", + "subcategory": "Infrastructure", + "customizationUuid": "b44071c8-04fd-4d6b-b6af-772cbfaa1129", + "inputs": [ + { + "name": "sotnconnectivity0_eir", + "type": "string", + "description": "The eir for SOTN connectivity. Only for Ethernet type", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sotnconnectivity0_cir", + "type": "string", + "description": "The cir for SOTN connectivity. Only for Ethernet type", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sotnconnectivity0_endTime", + "type": "string", + "description": "End Time", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sotnconnectivity0_ebs", + "type": "string", + "description": "The ebs for SOTN connectivity. Only for Ethernet type", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sotnconnectivity0_startTime", + "type": "string", + "description": "Start Time", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sotnconnectivity0_dualLink", + "type": "boolean", + "description": "is Active/standby enabled", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sotnconnectivity0_reroute", + "type": "boolean", + "description": "Whether to support automatic rerouting", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sotnconnectivity0_cbs", + "type": "string", + "description": "The cbs for SOTN connectivity. Only for Ethernet type", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sotnconnectivity0_name", + "type": "string", + "description": "the name of the SOTN connectivity", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sotnconnectivity0_SLS", + "type": "string", + "description": "Business Service Level", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sotnconnectivity0_description", + "type": "string", + "description": "The description of the SOTN connectivity", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sotnconnectivity0_couplingFlag", + "type": "boolean", + "description": "The couplingFlag for SOTN connectivity. Only for Ethernet type", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sotnconnectivity0_colorAware", + "type": "boolean", + "description": "The colorAware of the SOTN connectivity. Only for Ethernet type", + "isRequired": "true", + "defaultValue": "null" + }, + { + "name": "sotnconnectivity0_COS", + "type": "string", + "description": "Business Class of Service of VPN", + "isRequired": "true", + "defaultValue": "standard" + } + ], + "nestedTemplates": [] + } + ] +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/mock/json/specific_link_nfo.json b/usecaseui-portal/src/app/mock/json/specific_link_nfo.json new file mode 100644 index 00000000..e9911409 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/specific_link_nfo.json @@ -0,0 +1,52 @@ +{ + "link-name": "nodeId-79.79.79.79-ltpId-4_nodeId-78.78.78.78-ltpId-4", + "in-maint": false, + "link-type": "some type", + "speed-value": "some speed", + "resource-version": "1536212883031", + "operational-status": "up", + "relationship-list": { + "relationship": [ + { + "related-to": "p-interface", + "relationship-label": "tosca.relationships.network.LinksTo", + "related-link": "/aai/v13/network/pnfs/pnf/pnf1000/p-interfaces/p-interface/nodeId-79.79.79.79-ltpId-4", + "relationship-data": [ + { + "relationship-key": "pnf.pnf-name", + "relationship-value": "pnf1000" + }, + { + "relationship-key": "p-interface.interface-name", + "relationship-value": "nodeId-79.79.79.79-ltpId-4" + } + ], + "related-to-property": [ + { + "property-key": "p-interface.prov-status" + } + ] + }, + { + "related-to": "p-interface", + "relationship-label": "tosca.relationships.network.LinksTo", + "related-link": "/aai/v13/network/pnfs/pnf/pnf2000/p-interfaces/p-interface/nodeId-78.78.78.78-ltpId-4", + "relationship-data": [ + { + "relationship-key": "pnf.pnf-name", + "relationship-value": "pnf2000" + }, + { + "relationship-key": "p-interface.interface-name", + "relationship-value": "nodeId-78.78.78.78-ltpId-4" + } + ], + "related-to-property": [ + { + "property-key": "p-interface.prov-status" + } + ] + } + ] + } +} diff --git a/usecaseui-portal/src/app/mock/json/status.json b/usecaseui-portal/src/app/mock/json/status.json new file mode 100644 index 00000000..eeff6f35 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/status.json @@ -0,0 +1,3 @@ +{ + "status":"SUCCESS" +} diff --git a/usecaseui-portal/src/app/mock/json/status2.json b/usecaseui-portal/src/app/mock/json/status2.json new file mode 100644 index 00000000..2932063e --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/status2.json @@ -0,0 +1,3 @@ +{ + "status": "fail" +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/mock/json/url.json b/usecaseui-portal/src/app/mock/json/url.json new file mode 100644 index 00000000..e84b42d8 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/url.json @@ -0,0 +1,8 @@ +{ + "esr-system-info-id": "gongjie666", + "service-url": "http://10.10.10.10:8080/", + "user-name": "demo", + "password": "demo123456!", + "system-type": "ONAP", + "resource-version": "1536221798873" +} diff --git a/usecaseui-portal/src/app/mock/json/vpnbinding.json b/usecaseui-portal/src/app/mock/json/vpnbinding.json new file mode 100644 index 00000000..04ff2a6d --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/vpnbinding.json @@ -0,0 +1,82 @@ +{ + "vpn-binding": [ + { + "vpn-id": "pnf1000-vpn1", + "vpn-name": "pnf1000-vpn1", + "vpn-type": "ethernet", + "access-provider-id": "5555", + "access-client-id": "6666", + "access-topology-id": "100", + "src-access-node-id": "10.10.10.10", + "src-access-ltp-id": "14", + "dst-access-node-id": "10.10.10.10", + "dst-access-ltp-id": "2", + "operational-status": "Created", + "model-customization-id": "", + "model-invariant-id": "", + "model-version-id": "", + "resource-version": "1536135677693", + "relationship-list": { + "relationship": [ + { + "related-to": "connectivity", + "relationship-label": "org.onap.relationships.inventory.PartOf", + "related-link": "/aai/v13/network/connectivities/connectivity/4efe6dff-acfc-4d13-a3fd-1177d3c08e84", + "relationship-data": [ + { + "relationship-key": "connectivity.connectivity-id", + "relationship-value": "4efe6dff-acfc-4d13-a3fd-1177d3c08e84" + } + ], + "related-to-property": [ + { + "property-key": "connectivity.etht-svc-name", + "property-value": "SOTNVPNInfra" + } + ] + }, + { + "related-to": "p-interface", + "relationship-label": "org.onap.relationships.inventory.BindsTo", + "related-link": "/aai/v13/network/pnfs/pnf/pnf1000/p-interfaces/p-interface/nodeId-79.79.79.79-ltpId-2", + "relationship-data": [ + { + "relationship-key": "pnf.pnf-name", + "relationship-value": "pnf1000" + }, + { + "relationship-key": "p-interface.interface-name", + "relationship-value": "nodeId-79.79.79.79-ltpId-2" + } + ], + "related-to-property": [ + { + "property-key": "p-interface.prov-status" + } + ] + }, + { + "related-to": "p-interface", + "relationship-label": "org.onap.relationships.inventory.BindsTo", + "related-link": "/aai/v13/network/pnfs/pnf/pnf1000/p-interfaces/p-interface/nodeId-79.79.79.79-ltpId-1", + "relationship-data": [ + { + "relationship-key": "pnf.pnf-name", + "relationship-value": "pnf1000" + }, + { + "relationship-key": "p-interface.interface-name", + "relationship-value": "nodeId-79.79.79.79-ltpId-1" + } + ], + "related-to-property": [ + { + "property-key": "p-interface.prov-status" + } + ] + } + ] + } + } + ] +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/mock/json/xuran_test_data.json b/usecaseui-portal/src/app/mock/json/xuran_test_data.json new file mode 100644 index 00000000..1e6321b1 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/xuran_test_data.json @@ -0,0 +1,8 @@ +{ + "esr-system-info-id": "xuran", + "service-url": "http://10.10.10.10:8080/", + "user-name": "demo", + "password": "demo123456!", + "system-type": "ONAP", + "resource-version": "1536221798873" +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/mock/mock.js b/usecaseui-portal/src/app/mock/mock.js new file mode 100644 index 00000000..2864d4c5 --- /dev/null +++ b/usecaseui-portal/src/app/mock/mock.js @@ -0,0 +1,7 @@ +const fakeData = require('./fakedata.js'); +module.exports = { + //Mock json + 'customer_info': fakeData.customer, + 'alarm_formdata_multiple': fakeData, + 'home': fakeData.home, +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/mock/server.js b/usecaseui-portal/src/app/mock/server.js new file mode 100644 index 00000000..45d6b2b5 --- /dev/null +++ b/usecaseui-portal/src/app/mock/server.js @@ -0,0 +1,87 @@ +const jsonServer = require('json-server'); +const server = jsonServer.create(); +const middlewares = jsonServer.defaults(); + +// Set default middlewares (logger, static, cors and no-cache) +server.use(middlewares); + +// Get mock data +const fs = require('fs'); +const path = require('path'); + +let localJsonDb = {}; //import mock datas +const fakeoriginalData = require('./mock.js'); //import datas created in fakedata.js +const mockFolder = './src/app/mock/json'; //mock json path folder +const filePath = path.resolve(mockFolder); + +fileDisplay(filePath); + +function fileDisplay(filePath) { + let fileList = []; + let originPath = []; + let rewriter = {}; + // Return filelist on based of filePath + const files = fs.readdirSync(filePath); + files.forEach((filename) => { + // Get filename's absolute path + let filedir = path.join(filePath, filename); + // Get the file information according to the file path and return an fs.Stats object + fs.stat(filedir, (err, stats) => { + if (err) { + console.warn('Get files failed......'); + } else { + let isFile = stats.isFile(); // files + let isDir = stats.isDirectory(); //files folder + if (isFile) { + fileList.push(path.basename(filedir, '.json')); + fileList.forEach(item => { + let paser = item.split("_").join("/"); + originPath.push({ route: `/${paser}`, origin: `/${item}` }) + originPath.map(route => { + rewriter[route.route] = route.origin; + }) + localJsonDb[item] = getjsonContent(item); + }) + } + if (isDir) { + console.warn("=====> DO NOT support mock data in folder"); + fileDisplay(filedir); + } + Object.keys(fakeoriginalData).map(item => { + localJsonDb[item] = fakeoriginalData[item]; + }) + } + }) + }) + setTimeout(() => { + // console.log(rewriter, "===rewriter", localJsonDb, "===localJsonDb", fileList, "===fileList"); + // console.log(localJsonDb, "===localJsonDb"); + serverRewrite(rewriter); + runServer(localJsonDb); + }, 100) +} +function getjsonContent(path) { + let newpath = `./src/app/mock/json/${path}.json`; + let result = JSON.parse(fs.readFileSync(newpath)); + return result; +} + +//only multi router data needs jsonServer.rewriter +function serverRewrite(routerpath) { + let routerpathArr = routerpath; + //rewrite mock multiple routers here + Object.keys(fakeoriginalData).map(item => { + let newPath = item.split("_").join("/") + routerpathArr[`/${newPath}`] = `/${item}`; + }) + //start to rewrite routers + server.use(jsonServer.rewriter(routerpathArr)); +} + +function runServer(db) { + server.use(jsonServer.router(db)); +} + +server.listen(3004, () => { + console.log('Mock Server is successfully running on port 3004 😁') +}); diff --git a/usecaseui-portal/src/app/myhttp.service.ts b/usecaseui-portal/src/app/myhttp.service.ts index 778b739c..d85076fa 100644 --- a/usecaseui-portal/src/app/myhttp.service.ts +++ b/usecaseui-portal/src/app/myhttp.service.ts @@ -16,7 +16,7 @@ import { Injectable } from '@angular/core'; import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http'; import { Observable } from 'rxjs/Observable'; -import { homeData, homeVmLineData, servicesSelectData, servicesTableData, creatensData, onboardTableData, onboardDataVNF, onboardDataPNF , baseUrl} from './dataInterface'; +import { homeData, homeVmLineData, servicesSelectData, servicesTableData, creatensData, onboardTableData, onboardDataVNF, onboardDataPNF, baseUrl } from './core/models/dataInterface'; @Injectable() export class MyhttpService { @@ -24,7 +24,7 @@ export class MyhttpService { constructor(private http: HttpClient) { } baseUrl = baseUrl.baseUrl; url = { - listSortMasters:this.baseUrl+"/listSortMasters", + listSortMasters: this.baseUrl + "/listSortMasters", customers: this.baseUrl + "/uui-lcm/customers", orchestrators: this.baseUrl + "/uui-lcm/orchestrators", serviceType: this.baseUrl + "/uui-lcm/customers/" + "*_*" + "/service-subscriptions", @@ -47,7 +47,7 @@ export class MyhttpService { nsProgress: this.baseUrl + "/uui-lcm/jobs/getNsLcmJobStatus/" + "*_*" + "?responseId=0&serviceInstanceId=", e2eScale: this.baseUrl + "/services/scaleServices/", e2e_nsdata: this.baseUrl + "/getServiceInstanceById/customerId/", - updateccvpn:this.baseUrl + "/uui-lcm/services/updateService/", + updateccvpn: this.baseUrl + "/uui-lcm/services/updateService/", //The following api is about ccvpn details topology allottedResource: this.baseUrl + "/uui-sotn/getAllottedResources", @@ -100,17 +100,17 @@ export class MyhttpService { inputs: "" }; return this.http.post(this.url.nstemplateParameters, body); - }else if(type == "e2e"){ - let url = this.url.e2etemplateParameters.replace("*_*", template.uuid) + template.toscaModelURL; - return this.http.get(url); - }else { - let body = { - csarId: template.uuid, - packageType: "Service", - inputs: "" - }; - let url = this.url.templateParameters.replace("*_*", template.uuid); - return this.http.post(url, body); + } else if (type == "e2e") { + let url = this.url.e2etemplateParameters.replace("*_*", template.uuid) + template.toscaModelURL; + return this.http.get(url); + } else { + let body = { + csarId: template.uuid, + packageType: "Service", + inputs: "" + }; + let url = this.url.templateParameters.replace("*_*", template.uuid); + return this.http.post(url, body); } } @@ -135,8 +135,8 @@ export class MyhttpService { return this.http.post(this.url.ns_createService2 + params, requestBody); } - updateccvpn(id,requestBody){ - return this.http.put(this.url.updateccvpn + id,requestBody);// online + updateccvpn(id, requestBody) { + return this.http.put(this.url.updateccvpn + id, requestBody);// online } // Delete interface deleteInstance(obj) { @@ -178,11 +178,11 @@ export class MyhttpService { // Query progress interface getProgress(obj) { - let url = this.url.progress.replace("*_*", obj.serviceId) + obj.operationId + "?operationType="+obj.operationType; + let url = this.url.progress.replace("*_*", obj.serviceId) + obj.operationId + "?operationType=" + obj.operationType; return this.http.get(url); } - getNsProgress(jobid,serviceId,operationType){ - let url = this.url.nsProgress.replace("*_*",jobid) + serviceId + "&operationType="+operationType; + getNsProgress(jobid, serviceId, operationType) { + let url = this.url.nsProgress.replace("*_*", jobid) + serviceId + "&operationType=" + operationType; return this.http.get(url); } diff --git a/usecaseui-portal/src/app/networkHttpservice.service.ts b/usecaseui-portal/src/app/networkHttpservice.service.ts deleted file mode 100644 index d09f0025..00000000 --- a/usecaseui-portal/src/app/networkHttpservice.service.ts +++ /dev/null @@ -1,122 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -import { Injectable } from '@angular/core'; -import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http'; -import { baseUrl} from './dataInterface'; - - -@Injectable() -export class networkHttpservice { - - constructor(private http:HttpClient) { } - - // baseUrl = "./assets/json/";//Local environment - // url={ - // "getNetworkD3Data":this.baseUrl + "netWorkD3Data.json", - // "getLogicalLinksData":this.baseUrl + "LogicalLinksData.json", - // "getPInterfacesData1":this.baseUrl + "netWorkD3Data.json", - // "getPInterfacesData2":this.baseUrl + "p_interfaces1.json", - // "createLink":this.baseUrl + "status.json", - // "querySpecificLinkInfo":this.baseUrl + "specific_link _nfo.json", - // "queryCloudUrl":this.baseUrl + "url.json", - // "createNetwrok":this.baseUrl + "status.json", - // "createPnf":this.baseUrl + "status.json", - // "createTp":this.baseUrl + "status.json", - // "createCloudLink":this.baseUrl + "status.json", - // "createCloudUrl":this.baseUrl + "status.json", - // "deleteLink":this.baseUrl + "status.json", - // }; - // baseUrl = "http://10.73.242.244:8082/uui-sotn/";//Online environment - // baseUrl = "http://172.19.44.223/api/usecaseui-server/v1/uui-sotn/";//Online environment - baseUrl = baseUrl.baseUrl + "/uui-sotn/";//Online environment - url={ - "getNetworkD3Data":this.baseUrl + "getNetWorkResources", - "getLogicalLinksData":this.baseUrl + "getLogicalLinks", - "getPInterfacesData1":this.baseUrl + "getPinterfaceByPnfName/", - "getPInterfacesData2":this.baseUrl + "getPinterfaceByPnfName/", - "createLink":this.baseUrl + "createLink/", - "querySpecificLinkInfo":this.baseUrl + "getSpecificLogicalLink/", - "queryCloudUrl":this.baseUrl + "getHostUrl/", - "queryExtAAIIdVersion":this.baseUrl + "getExtAaiId/", - "createNetwrok":this.baseUrl + "createTopoNetwork/", - "createPnf":this.baseUrl + "createPnf/", - "createTp":this.baseUrl + "pnf/", - "createCloudLink":this.baseUrl + "createLink/", - "createCloudUrl":this.baseUrl + "createHostUrl/", - "deleteLink":this.baseUrl + "deleteLink/", - "deleteCloud":this.baseUrl+"deleteExtNetWork" - }; - //d3data - getNetworkD3Data(){ - return this.http.get(this.url["getNetworkD3Data"]); - } - //Initialize the connection logical-links - getLogicalLinksData(){ - return this.http.get(this.url["getLogicalLinksData"]); - } - //Query the tp data corresponding to the specified node - getPInterfacesData1(paramsObj){ - return this.http.get(this.url['getPInterfacesData1']+paramsObj["pnfName"]); - } - getPInterfacesData2(paramsObj){ - return this.http.get(this.url["getPInterfacesData2"]+paramsObj["pnfName"]); - } - //Create a connection interface - createLink(paramsObj){ - return this.http.put(this.url["createLink"]+paramsObj["link-name"],paramsObj); - } - //Query the specified single cable interface - querySpecificLinkInfo(paramsObj){ - return this.http.get(this.url["querySpecificLinkInfo"]+paramsObj["link-name"]); - } - //Query external cloud host this.url address interface - queryCloudUrl(aaiId){ - return this.http.get(this.url["queryCloudUrl"]+aaiId); - } - queryExtAAIIdVersion(aaiId){ - return this.http.get(this.url["queryExtAAIIdVersion"]+aaiId); - } - //Create an external cloud newwork interface - createNetwrok(paramsObj){ - return this.http.put(this.url["createNetwrok"]+paramsObj["network-id"],paramsObj); - } - //Create an external cloud pnf interface - createPnf(paramsObj){ - return this.http.put(this.url["createPnf"]+paramsObj["pnf-name"],paramsObj); - } - //Create an external cloud Tp interface - createTp(paramsObj,cloudNodeName){ - let str=cloudNodeName+"/p-interfaces/p-interface/"+paramsObj["interface-name"]+"/createTerminationPoint"; - return this.http.put(this.url["createTp"]+str,paramsObj); - } - //Create an external cloud link interface - createCloudLink(paramsObj){ - return this.http.put(this.url["createCloudLink"]+paramsObj["link-name"],paramsObj); - } - //Create an external cloud host url interface - createCloudUrl(paramsObj){ - return this.http.put(this.url["createCloudUrl"]+paramsObj["aai-id"],paramsObj); - } - //Delete connection - deleteLink(paramsObj){ - let str=paramsObj["logical-link"]+"/"+paramsObj["resource-version"]; - return this.http.delete((this.url["deleteLink"]+str)); - } - deleteCloudLink(paramsObj){ - let str="?extNetworkId="+paramsObj["aaiId"]+"&resourceVersion="+paramsObj["version"]; - return this.http.delete((this.url["deleteCloud"]+str)); - } -} diff --git a/usecaseui-portal/src/app/onboard.service.ts b/usecaseui-portal/src/app/onboard.service.ts deleted file mode 100644 index 1c3778a4..00000000 --- a/usecaseui-portal/src/app/onboard.service.ts +++ /dev/null @@ -1,182 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -import { Injectable } from '@angular/core'; -import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http'; -import { Observable } from 'rxjs/Observable'; -import { onboardTableData, onboardDataVNF, onboardDataPNF , baseUrl} from './dataInterface'; - -@Injectable() -export class onboardService { - constructor(private http: HttpClient) { } - /* location */ - // baseUrl = "./assets/json"; - // url = { - // // list data - // onboardTableData: this.baseUrl + "/onboard-vnf-mf/onboardTableData.json", - // onboardDataVNF: this.baseUrl + "/onboard-vnf-mf/onboardDataVNF.json", - // onboardDataPNF: this.baseUrl + "/onboard-vnf-mf/onboardDataPNF.json", - // //ns sdc - // sdc_nsListData: this.baseUrl + "/onboard-vnf-mf/listData/SDC_NS.json", - // // vnf sdc - // sdc_vnfListData: this.baseUrl + "/onboard-vnf-mf/listData/SDC_VNF.json", - - - // //create nspackages - // creatensData: this.baseUrl + "/onboard-vnf-mf/_jsonData.json", - - // //onboard ns sdc data - // onboardNs: this.baseUrl + "/onboard-vnf-mf/listData/onboardNs.json", - // //onboard VNF sdc data - // onboardVNF: this.baseUrl + "/onboard-vnf-mf/listData/onboardVNF.json", - - // // Delete ns package - // deleteNspack: this.baseUrl + "/onboard-vnf-mf/listData/deleteNspack.json", - // // Delete ns sdc package - // // deleteNssdcData: this.baseUrl + "/onboard-vnf-mf/listData/deleteNssdcData.json", - - // // Delete Vnf vfc package - // deleteVnfPack: this.baseUrl + "/onboard-vnf-mf/listData/deleteVnfPack.json", - // // Delete Vnf sdc package - // // deleteVnfsdcData: this.baseUrl + "/onboard-vnf-mf/listData/deleteVnfsdcData.json", - - // // Delete Pnf package - // deletePnfPack: this.baseUrl + "/onboard-vnf-mf/listData/deletePnfPack.json", - - // // // download ns package - // // downloadNsData: this.baseUrl + "/downloadData.json", - // // //download vnf package - // // downloadVnfData: this.baseUrl + "/listData/downloadVnfData.json" - - // } - - //--------------------------------------------------------------------------------------- - /* line up*/ - baseUrl = baseUrl.baseUrl + "/uui-lcm/"; - url = { - // list Data - onboardTableData: this.baseUrl + "ns-packages", - onboardDataVNF: this.baseUrl + "vnf-packages", - onboardDataPNF: this.baseUrl + "pnf-packages", - //ns sdc - sdc_nsListData: this.baseUrl + "sdc-ns-packages", // GET - // vnf sdc - sdc_vnfListData: this.baseUrl + "sdc-vf-packages", // GET - - // createnspackages ? TODO - creatensData: this.baseUrl + "_jsonData", //POST - - // onboard ns sdc data - onboardNs: this.baseUrl + "ns-packages", //POST - //onboard VNF sdc data - onboardVNF: this.baseUrl + "vf-packages", //POST - - //Delete ns package - deleteNspack: this.baseUrl + "deleteNsdPackage?nsdInfoId=", - // Delete Vnf vfc package - deleteVnfPack: this.baseUrl + "deleteVnfPackage?vnfPkgId=", - // Delete Pnf package - deletePnfPack: this.baseUrl + "deletePnfPackage?pnfdInfoId=", - - //Progress interface - progress: this.baseUrl + "jobs/" + "_jobId" + "?responseId=" - - - // // download ns package - // downloadNsData: this.baseUrl + "downLoadNsPackage?nsdInfoId=XXXXX", - // //download vnf package - // downloadVnfData: this.baseUrl + "downLoadVnfPackage?vnfPkgId=XXXXX" - - } - - //-----------------------------------Function-local-start------------------------------------------------------ - /* Query data list */ - // NS Data - getOnboardTableData() { - // return this.http.get(this.url.onboardTableData); - return this.http.get(this.url["onboardTableData"]); - } - // NS SDC Data - getSDC_NSTableData(){ - // return this.http.get(this.url.sdc_nsListData); - return this.http.get(this.url["sdc_nsListData"]); - } - // VNF Data - getOnboardTableVnfData() { - return this.http.get(this.url.onboardDataVNF); - } - // onboard VNF sdc Data - getSDC_VNFTableData() { - return this.http.get(this.url["sdc_vnfListData"]); - } - - // PNF Data - getOnboardTablePnfData() { - return this.http.get(this.url.onboardDataPNF); - } - //------------------------------------------------------------------------------------- - - //create--Get the id after dragging the file before uploading //on-line post - getCreatensData(url_upId,requestBody) { - return this.http.post(this.url.creatensData.replace("_jsonData",url_upId),requestBody); //on-line - } - - //create--Get the id after dragging the file before uploading //local json get - // getCreatensData(url_upId) { - // return this.http.get(this.url.creatensData.replace("_jsonData", url_upId)); - // } - - //------------------------------------------------------------------------------ - //onboard sdc ns - getNsonboard(requestBody) { - return this.http.post(this.url["onboardNs"], requestBody); - } - //onboard sdc vnf - getVnfonboard(requestBody) { - return this.http.post(this.url["onboardVNF"], requestBody); - } - - //onboard progress - getProgress(jobid, responseId) { - let url = this.url.progress.replace("_jobId", jobid) + responseId; - return this.http.get(url); - } - //-------------------------------------------------------------------------- - // Delete ns vfc package - deleteNsIdData(paramsObj) { - // local test - // return this.http.get(this.url.deleteNspack); - // Online test - return this.http.delete(this.url.deleteNspack + paramsObj); - } - - // Delete Vnf vfc package - deleteVnfIdData(paramsObj) { - // return this.http.get(this.url.deleteVnfPack); - //online test - return this.http.delete(this.url.deleteVnfPack + paramsObj); - } - - // Delete Pnf package - deletePnfIdData(paramsObj){ - //Local test - // return this.http.get(this.url.deletePnfPack); - //online test - return this.http.delete(this.url.deletePnfPack + paramsObj); - } - - //---------------------------------Function-end------------------------------------------- - -} diff --git a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.css b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.css deleted file mode 100644 index e9631957..00000000 --- a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.css +++ /dev/null @@ -1,75 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -.title { - font: 700 18px/18px "思源黑体"; - color: #4c5e70; - margin-bottom: 18px; -} -hr { - border: none; - height: 2px; - background-color: #dce1e7; - margin-bottom: 20px; -} -.select { - margin-bottom: 20px; -} -.select span { - display: inline-block; - font: 700 14px "Arial"; - color: #4c5e70; -} -.select nz-dropdown { - vertical-align: middle; -} -.select nz-dropdown :hover { - border-color: #147dc2; -} -.select nz-dropdown button { - width: 165px; - height: 30px; - background-color: #eceff4; - text-align: left; - border-color: #9fa9ab; -} -.select nz-dropdown button span { - font-weight: 400; - display: inline-block; - width: 120px; - overflow: hidden; - text-overflow: ellipsis; - padding-top: 2px; -} -.select nz-dropdown button i { - position: absolute; - top: 10px; - right: 10px; -} -.select .submit { - margin-left: 20px; - vertical-align: middle; - height: 30px; - padding: 0 10px; -} -.select .submit span { - color: #fff; - font-weight: 400; -} -.content { - background-color: #fff; - border-radius: 5px; - padding: 12px; -} diff --git a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.html b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.html deleted file mode 100644 index 06d84353..00000000 --- a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.html +++ /dev/null @@ -1,79 +0,0 @@ - - - - - - diff --git a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.less b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.less deleted file mode 100644 index 31623dcf..00000000 --- a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.less +++ /dev/null @@ -1,76 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -.title { - font: 700 18px/18px "思源黑体"; - color: #4c5e70; - margin-bottom: 18px; -} -hr { - border: none; - height: 2px; - background-color: #dce1e7; - margin-bottom: 20px; -} -.select { - margin-bottom: 20px; - span { - display: inline-block; - font: 700 14px "Arial"; - color: #4c5e70; - } - nz-dropdown { - vertical-align: middle; - :hover{ - border-color: #147dc2; - } - button { - width: 165px; - height: 30px; - background-color: #eceff4; - text-align: left; - border-color: #9fa9ab; - span { - font-weight: 400; - display: inline-block; - width: 120px; - overflow: hidden; - text-overflow: ellipsis; - padding-top: 2px; - } - i { - position: absolute; - top: 10px; - right: 10px; - } - } - //下拉框中的样式在style.less中，下拉框是在body中额外临时生成的 - } - .submit { - margin-left: 20px; - vertical-align: middle; - height: 30px; - padding: 0 10px; - span { - color: #fff; - font-weight: 400; - } - } -} -.content { - background-color: #fff; - border-radius: 5px; - padding: 12px; -} \ No newline at end of file diff --git a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.spec.ts b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.spec.ts deleted file mode 100644 index b66b2ea0..00000000 --- a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.spec.ts +++ /dev/null @@ -1,68 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; - -import { PerformanceVmComponent } from './performance-vm.component'; - -describe('PerformanceVmComponent', () => { - let component: PerformanceVmComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ PerformanceVmComponent ], - imports: [ - BrowserAnimationsModule - ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(PerformanceVmComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); - - it('should test performanceShow method to set proper values', () => { - component.performanceShow(); - expect(component.state).toBe('show'); - expect(component.state2).toBe('hide'); - expect(component.state3).toBe('hide'); - expect(component.graphicshow).toBe(false); - expect(component.detailshow).toBe(false); - }); - - it('should test graphicShow method to set proper values', () => { - component.graphicShow(); - expect(component.state).toBe('hide'); - expect(component.state2).toBe('show'); - expect(component.state3).toBe('hide'); - expect(component.graphicshow).toBe(true); - expect(component.detailshow).toBe(false); - }); - - it('should test detailShow method to set proper values', () => { - component.detailShow({id:1}); - expect(component.state).toBe('hide'); - expect(component.state2).toBe('hide'); - expect(component.state3).toBe('show'); - expect(component.graphicshow).toBe(true); - expect(component.detailshow).toBe(true); - expect(component.detailId).toBe(1); - }); - - it('should test choseSourceName method', () => { - component.choseSourceName('bbbb'); - expect(component.sourceNameSelected).toBe('bbbb'); - }); - - it('should test choseSourceName method', () => { - component.choseReportingEntityName('bbbb'); - expect(component.ReportingEntityNameSelected).toBe('bbbb'); - }); - -}); diff --git a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.ts b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.ts deleted file mode 100644 index 73e77c52..00000000 --- a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.ts +++ /dev/null @@ -1,159 +0,0 @@ -import { Component, OnInit, HostBinding } from '@angular/core'; -import { slideToRight, showHideAnimate } from '../../animates'; - -@Component({ - selector: 'app-performance-vm', - templateUrl: './performance-vm.component.html', - styleUrls: ['./performance-vm.component.less'], - animations: [ slideToRight, showHideAnimate ] -}) -export class PerformanceVmComponent implements OnInit { - @HostBinding('@routerAnimate') routerAnimateState; - constructor() { } - - ngOnInit() { - } - - // Filter box (drop-down box) - sourceNameList = ['aaaa','bbbb','cccc','dddddDDDDDDDDDDDDDDD']; - sourceNameSelected = this.sourceNameList[0]; - ReportingEntityNameList = ['aaaa','bbbb','cccc','ddddd']; - ReportingEntityNameSelected = this.ReportingEntityNameList[0]; - choseSourceName(item){ - console.log(item); - this.sourceNameSelected = item; - } - choseReportingEntityName(item){ - console.log(item); - this.ReportingEntityNameSelected = item; - } - - //Tabular data - dataSet = [ - { - name : 'John Brown', - age : 32, - expand : false, - address : 'New York No. 1', - description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.' - }, - { - name : 'Aim Green', - age : 42, - expand : false, - address : 'London No. 1', - description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' - }, - { - name : 'Bim Green', - age : 42, - expand : false, - address : 'London No. 1', - description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' - }, - { - name : 'Cim Green', - age : 42, - expand : false, - address : 'London No. 1', - description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' - }, - { - name : 'Jim Green', - age : 42, - expand : false, - address : 'London No. 1', - description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' - }, - { - name : 'Xim Green', - age : 42, - expand : false, - address : 'London No. 1', - description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' - }, - { - name : 'Jim Green', - age : 42, - expand : false, - address : 'London No. 1', - description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' - }, - { - name : 'Jim Green', - age : 42, - expand : false, - address : 'London No. 1', - description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' - }, - { - name : 'Jim Green', - age : 42, - expand : false, - address : 'London No. 1', - description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' - }, - { - name : 'Jim Green', - age : 42, - expand : false, - address : 'London No. 1', - description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' - }, - { - name : 'cim Green', - age : 42, - expand : false, - address : 'London No. 1', - description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' - }, - { - name : 'bim Green', - age : 42, - expand : false, - address : 'London No. 1', - description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' - }, - { - name : 'aoe Black', - age : 32, - expand : false, - address : 'Sidney No. 1', - description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.' - } - ]; - - //Detail page title display - graphicshow = false; - detailshow = false; - // Show hidden animation - state = "show"; - state2 = "hide"; - state3 = "hide"; - performanceShow() { - this.state = 'show'; - this.state2 = 'hide'; - this.state3 = 'hide'; - this.graphicshow = false; - this.detailshow = false; - } - graphicShow() { - this.state = 'hide'; - this.state2 = 'show'; - this.state3 = 'hide'; - this.graphicshow = true; - this.detailshow = false; - } - // Selected id - detailId:number; - detailShow(prems) { - this.state = 'hide'; - this.state2 = 'hide'; - this.state3 = 'show'; - this.graphicshow = true; - this.detailshow = true; - console.log(prems); - this.detailId = prems.id; - } - -} diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.css b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.css deleted file mode 100644 index 269af7a9..00000000 --- a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.css +++ /dev/null @@ -1,126 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -.title { - font: 700 18px/18px "思源黑体"; - color: #4c5e70; - margin-bottom: 18px; -} -hr { - border: none; - height: 2px; - background-color: #dce1e7; - margin-bottom: 20px; -} -.select { - margin-bottom: 20px; -} -.select span { - display: inline-block; - font: 700 14px "Arial"; - color: #4c5e70; -} -.select nz-dropdown { - vertical-align: middle; -} -.select nz-dropdown :hover { - border-color: #147dc2; -} -.select nz-dropdown button { - width: 165px; - height: 30px; - background-color: #eceff4; - text-align: left; - border-color: #9fa9ab; -} -.select nz-dropdown button span { - font-weight: 400; - display: inline-block; - width: 120px; - overflow: hidden; - text-overflow: ellipsis; - padding-top: 2px; -} -.select nz-dropdown button i { - position: absolute; - top: 10px; - right: 10px; -} -.select .search { - margin-left: 20px; - vertical-align: middle; - height: 30px; - padding: 0 10px; -} -.select .search span { - color: #fff; - font-weight: 400; -} -.content { - background-color: #fff; - border-radius: 5px; - padding: 12px; -} -.content .vnfs { - display: flex; - flex-wrap: wrap; - justify-content: space-around; -} -.content .vnfs .vnf { - width: 18%; - height: 200px; - margin: 5px; - padding: 20px; - border-radius: 2px; - text-align: center; - cursor: pointer; - transition: all 0.3s linear; -} -.content .vnfs .vnf:hover { - background-color: #f5f5f5; - transform: scale(1.02); -} -.content .vnfs .vnf h3 { - font-size: 14px; - color: #3fa8eb; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - margin-bottom: 0; -} -.content .vnfs .vnf .intro { - text-align: left; - font-size: 12px; - overflow: hidden; - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - word-wrap: break-word; - word-break: break-all; -} -.content .vnfs .empty { - width: 18%; - height: 200px; - margin: 5px; - border-radius: 2px; -} -.content .pages { - height: 25px; - margin: 20px 10px; - position: relative; -} -.content .pages nz-pagination { - float: right; -} diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html deleted file mode 100644 index f151ef33..00000000 --- a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html +++ /dev/null @@ -1,60 +0,0 @@ - -

    - Performance VNF - / Graphic list - / Details -

    -
    - Source Name: - - - - - - -
    -
    -
    -
    - - -
    - {{item.name}} -
    -
    -
    - PNF -
    - {{item.name}} -
    -
    -
    -
    -
    - -
    -
    -
    - -
    -
    - -
    diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.less b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.less deleted file mode 100644 index cc4e1ca5..00000000 --- a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.less +++ /dev/null @@ -1,136 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -.title { - font: 500 14px/18px "ArialMT"; - color: #3C4F8C; - padding: 20px 0 0 20px; -} -.select { - height: 70px; - background-color: #fff; - margin-top: -30px; - padding-left: 20px; - box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06); - line-height: 5; - span { - display: inline-block; - font: 400 14px "ArialMT"; - color: #3C4F8C; - } - nz-dropdown { - vertical-align: middle; - :hover{ - border-color: #147dc2; - } - button { - width: 165px; - height: 30px; - background-color: #fff; - text-align: left; - border-color: #E5E8F2; - span { - font-weight: 400; - display: inline-block; - width: 120px; - overflow: hidden; - text-overflow: ellipsis; - padding-top: 2px; - } - i { - position: absolute; - top: 10px; - right: 10px; - } - } - :hover { - border-color: #48C6EF; - } - //下拉框中的样式在style.less中，下拉框是在body中额外临时生成的 - } - .search { - margin-left: 20px; - margin-top: -6px; - vertical-align: middle; - height: 30px; - padding: 0 10px; - span { - color: #fff; - font-weight: 400; - } - } -} - -.content { - // background-color: #fff; - border-radius: 5px; - padding: 12px; - .vnfs { - display: flex; - flex-wrap: wrap; - justify-content: space-around; - .vnf { - // width: 180px; - background-color: #fff; - width: 18%; - height: 200px; - margin: 5px; - padding: 20px; - border-radius: 2px; - text-align: center; - cursor: pointer; - transition: all 0.3s linear; - &:hover { - background-color: #fff; - transform: scale(1.02); - color: #3F9CFF; - } - h3 { - font-size: 14px; - color: #3fa8eb; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - margin-bottom: 0; - } - .intro { - text-align: left; - font-size: 12px; - overflow: hidden; - padding-top: 25px; - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - word-wrap:break-word; - word-break:break-all; - } - } - .empty { - // width: 180px; - width: 18%; - height: 200px; - margin: 5px; - border-radius: 2px; - } - } - .pages { - height: 25px; - margin: 20px 10px; - position: relative; - nz-pagination { - float: right; - } - } -} \ No newline at end of file diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.spec.ts b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.spec.ts deleted file mode 100644 index 18526cdd..00000000 --- a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.spec.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { NO_ERRORS_SCHEMA,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -import { TranslateModule, TranslateLoader, TranslateService, TranslateFakeLoader} from '@ngx-translate/core'; -import { NgZorroAntdModule } from 'ng-zorro-antd'; -import { NgxEchartsModule } from 'ngx-echarts'; -import { NZ_I18N, en_US } from 'ng-zorro-antd'; -import { HttpClientModule } from '@angular/common/http'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; - -import { PerformanceDetailsComponent } from '../../components/performance-details/performance-details.component'; -import { GraphiclistComponent } from '../../components/graphiclist/graphiclist.component'; -import { PerformanceVnfComponent } from './performance-vnf.component'; -import { HomesService } from '../../homes.service'; - -describe('PerformanceVnfComponent', () => { - let component: PerformanceVnfComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ PerformanceVnfComponent, PerformanceDetailsComponent, GraphiclistComponent ], - imports: [ TranslateModule.forRoot({loader: { provide: TranslateLoader, useClass: TranslateFakeLoader }}), - NgZorroAntdModule.forRoot(), - NgxEchartsModule, - HttpClientModule, - BrowserAnimationsModule ], - providers: [TranslateService, HomesService ], - schemas: [ - CUSTOM_ELEMENTS_SCHEMA, - NO_ERRORS_SCHEMA - ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(PerformanceVnfComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); \ No newline at end of file diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.ts b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.ts deleted file mode 100644 index 05719155..00000000 --- a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.ts +++ /dev/null @@ -1,145 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -import { Component, OnInit, HostBinding } from '@angular/core'; -import { slideToRight, showHideAnimate } from '../../animates'; -import { HomesService } from '../../homes.service'; - -@Component({ - selector: 'app-performance-vnf', - templateUrl: './performance-vnf.component.html', - styleUrls: ['./performance-vnf.component.less'], - animations: [slideToRight, showHideAnimate], -}) -export class PerformanceVnfComponent implements OnInit { - @HostBinding('@routerAnimate') routerAnimateState; - public sourceNameList: Array = ['---auto---']; - public sourceName: string = ''; - public vnfsdataTotal: number; - public startTime: string = ''; - public endTime: string = ''; - public currentPage: number = 1; - public pageSize: number = 10; - list: any; - - constructor( - private myhttp: HomesService) { } - - ngOnInit() { - this.getqueryAllSourceNames(); - // this.getperformanceSsourceNames(); - let _this = this; - setTimeout(function(){ - _this.totalRecords = [ - {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"}, - {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"}, - {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"}, - {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"}, - {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"}, - {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"}, - {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"}, - {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"}, - {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"}, - {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"}, - {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"} - ]; - _this.totalpnfs = [ - {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"}, - {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"}, - {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement",text:"oahgieango"} - ] - _this.emptys = new Array(12-_this.totalRecords.length); - },300) - } - - - sourceNameSelected = this.sourceNameList[0]; - getqueryAllSourceNames() { - this.myhttp.getqueryAllSourceNames().subscribe((data) => { - for (let i = 0; i < data.length; i++) { - this.sourceNameList.push(data[i]); - } - this.sourceNameSelected = this.sourceNameList[0]; - }) - } - choseSourceName(item) { - this.sourceNameSelected = item; - if (item == "---auto---") { - this.sourceName = ''; - } else { - this.sourceName = item; - } - } - // vnfs data - totalRecords = []; - totalpnfs = []; - //Fill the box - emptys = []; - - // getperformanceSsourceNames() { - // this.myhttp.getperformanceSourceNames(this.currentPage, this.pageSize, this.sourceName).subscribe((data) => { - // this.totalRecords = data.totalRecords; - // this.vnfsdataTotal = data.names; - // if (Number.isInteger(this.totalRecords.length / 5)) { - // this.emptys = new Array(0); - // } else { - // this.emptys = new Array(5 - this.totalRecords.length % 5); - // } - // }) - // } - //Detail page title display - isHidden = true; - graphicshow = false; - detailshow = false; - // Show hidden animation - state = "show"; - state2 = "hide"; - state3 = "hide"; - performanceShow() { - this.state = 'show'; - this.state2 = 'hide'; - this.state3 = 'hide'; - this.graphicshow = false; - this.detailshow = false; - } - // Selected name - - graphicShow() { - this.state = 'hide'; - this.state2 = 'show'; - this.state3 = 'hide'; - this.graphicshow = true; - this.detailshow = false; - } - vnfname: string; - graphicShow2(item) { - this.state = 'hide'; - this.state2 = 'show'; - this.state3 = 'hide'; - this.graphicshow = true; - this.detailshow = false; - this.vnfname = item; - } - // Selected id - detailId: string; - detailShow(item) { - this.state = 'hide'; - this.state2 = 'hide'; - this.state3 = 'show'; - this.graphicshow = true; - this.detailshow = true; - this.detailId = item.id.id; - } -} diff --git a/usecaseui-portal/src/app/performance/performance.component.css b/usecaseui-portal/src/app/performance/performance.component.css deleted file mode 100644 index f2169538..00000000 --- a/usecaseui-portal/src/app/performance/performance.component.css +++ /dev/null @@ -1,26 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -.title { - font: 700 18px/18px "思源黑体"; - color: #4c5e70; - margin-bottom: 18px; -} -hr { - border: none; - height: 2px; - background-color: #dce1e7; - margin-bottom: 20px; -} diff --git a/usecaseui-portal/src/app/performance/performance.component.html b/usecaseui-portal/src/app/performance/performance.component.html deleted file mode 100644 index cd92b659..00000000 --- a/usecaseui-portal/src/app/performance/performance.component.html +++ /dev/null @@ -1,17 +0,0 @@ - -

    Performance

    -
    diff --git a/usecaseui-portal/src/app/performance/performance.component.less b/usecaseui-portal/src/app/performance/performance.component.less deleted file mode 100644 index 2b1949a5..00000000 --- a/usecaseui-portal/src/app/performance/performance.component.less +++ /dev/null @@ -1,11 +0,0 @@ -.title { - font: 700 18px/18px "思源黑体"; - color: #4c5e70; - margin-bottom: 18px; -} -hr { - border: none; - height: 2px; - background-color: #dce1e7; - margin-bottom: 20px; -} diff --git a/usecaseui-portal/src/app/performance/performance.component.spec.ts b/usecaseui-portal/src/app/performance/performance.component.spec.ts deleted file mode 100644 index 1bdc919d..00000000 --- a/usecaseui-portal/src/app/performance/performance.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { PerformanceComponent } from './performance.component'; - -describe('PerformanceComponent', () => { - let component: PerformanceComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ PerformanceComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(PerformanceComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/usecaseui-portal/src/app/performance/performance.component.ts b/usecaseui-portal/src/app/performance/performance.component.ts deleted file mode 100644 index 12405e9e..00000000 --- a/usecaseui-portal/src/app/performance/performance.component.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-performance', - templateUrl: './performance.component.html', - styleUrls: ['./performance.component.less'] -}) -export class PerformanceComponent implements OnInit { - - constructor() { } - - ngOnInit() { - - } - -} diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css deleted file mode 100644 index 4e80750c..00000000 --- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css +++ /dev/null @@ -1,67 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -.title { - font: 700 18px/18px "思源黑体"; - color: #4c5e70; - margin-bottom: 18px; -} -hr { - border: none; - height: 2px; - background-color: #dce1e7; - margin-bottom: 20px; -} -.list { - background-color: #fff; - border-radius: 5px; - padding: 10px; -} -.list nz-table tbody td span.onboarding { - font-size: 12px; - color: #147dc2; -} -.list nz-table tbody td span.onboarded { - font-size: 14px; - color: #147dc2; -} -.list nz-table tbody td span.updating { - font-size: 12px; - color: blue; -} -.list nz-table tbody td span.deleting { - font-size: 12px; - color: red; -} -.list nz-table tbody td span.invalid { - font-size: 14px; - color: purple; -} -.list nz-table tbody td i.anticon { - cursor: pointer; - font-size: 18px; - padding: 2px; -} -.list nz-table tbody td i.anticon:hover { - color: #147dc2; -} -.list nz-table tbody td .cannotclick { - pointer-events: none; - color: #aaa; - opacity: 0.6; -} -.list nz-table tbody td .fileIcon{ - display: none; -} \ No newline at end of file diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html deleted file mode 100644 index 70ee81c0..00000000 --- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html +++ /dev/null @@ -1,333 +0,0 @@ - - - - -
    - -
    -
    - -

    - -

    -

    {{"i18nTextDefine_Click_CSAR_File" | translate}}

    -

    -     - -
    -
    -
    -
    {{"i18nTextDefine_Uploaded_files" | translate}}
    -
    {{"i18nTextDefine_Nofileuploading" | translate}}
    -
    -
    -
    - -
    -
    {{itemns.name}}
    -
    - -
    -
    - {{"i18nTextDefine_File_upload_completed" | translate}} - {{"i18nTextDefine_File_upload_failed" | translate}} -
    -
    - - -
    -
    -
    -
    -
    - -
    - - - - {{"i18nTextDefine_NO" | translate}} - {{"i18nTextDefine_Name" | translate}} - {{"i18nTextDefine_Version" | translate}} - {{"i18nTextDefine_OnboardingState" | translate}} - {{"i18nTextDefine_OperationalState" | translate}} - {{"i18nTextDefine_UsageState" | translate}} - {{"i18nTextDefine_Operationbutton" | translate}} - - - - - {{i+1}} - - - {{item.nsdName}} -   - {{item.name}} -   - {{item.nsdVersion}} -   - {{item.version}} -   - - {{item.nsdOnboardingState}} -   - {{status}} - - - - {{item.nsdOperationalState}} - {{item.nsdUsageState}} - - - - - - - - - - - - - - - - - - -     - - -
    - -
    - -
    -
    - -

    - -

    -

    Click or drag CSAR File here

    -

    -     - -
    -
    -
    -
    {{"i18nTextDefine_Uploaded_files" | translate}}
    -
    {{"i18nTextDefine_Nofileuploading" | translate}}
    -
    -
    -
    - -
    -
    {{itemns.name}}
    -
    - -
    -
    - {{"i18nTextDefine_File_upload_completed" | translate}} - {{"i18nTextDefine_File_upload_failed" | translate}} -
    -
    - - -
    -
    -
    -
    -
    - -
    - - - - {{"i18nTextDefine_NO" | translate}} - {{"i18nTextDefine_Name" | translate}} - {{"i18nTextDefine_Version" | translate}} - {{"i18nTextDefine_OnboardingState" | translate}} - {{"i18nTextDefine_OperationalState" | translate}} - {{"i18nTextDefine_UsageState" | translate}} - {{"i18nTextDefine_Operationbutton" | translate}} - - - - - {{i+1}} - - {{item.vnfProductName}} -   - {{item.name}} - {{item.vnfdVersion}} -   - {{item.version}} - {{item.onboardingState}} - {{item.operationalState}} - {{item.usageState}} - - - - - - - - - - - - - - - - - - - - - -     - -
    - -
    - -
    -
    - -

    - -

    -

    Click or drag CSAR File here

    -

    -     - -
    -
    -
    -
    {{"i18nTextDefine_Uploaded_files" | translate}}
    -
    {{"i18nTextDefine_Nofileuploading" | translate}}
    -
    -
    -
    - -
    -
    {{itemns.name}}
    -
    - -
    -
    - {{"i18nTextDefine_File_upload_completed" | translate}} - {{"i18nTextDefine_File_upload_failed" | translate}} -
    -
    - - -
    -
    -
    -
    -
    - -
    - - - - {{"i18nTextDefine_NO" | translate}} - {{"i18nTextDefine_Name" | translate}} - {{"i18nTextDefine_Version" | translate}} - {{"i18nTextDefine_OnboardingState" | translate}} - {{"i18nTextDefine_UsageState" | translate}} - {{"i18nTextDefine_Operationbutton" | translate}} - - - - - {{i+1}} - {{item.pnfdName}} - {{item.pnfdVersion}} - {{item.pnfdOnboardingState}} - {{item.pnfdUsageState}} - - - - - - - - - - - - - - - - -     - -
    -     - - -
    -
    - - {{notificationAttributes.status}} - -
    - {{notificationAttributes.title}}  - {{"i18nTextDefine_"+notificationAttributes.action | translate}}  {{"i18nTextDefine_"+notificationAttributes.status | translate}} -
    -
    -
    -

    {{notificationAttributes.title}} id: 

    - {{ notificationAttributes.id }} -
    -
    -
    {{"i18nTextDefine_Close" | translate}}
    -
    -
    -     -     - diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less deleted file mode 100644 index c31409c9..00000000 --- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less +++ /dev/null @@ -1,182 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -.title { - font: 700 18px/18px "思源黑体"; - color: #4c5e70; - margin-bottom: 18px; -} -hr { - border: none; - height: 2px; - background-color: #dce1e7; - margin-bottom: 20px; -} -.switch_btn { - position: absolute; - right: 6%; - top: 18px; - border: 1px solid #3fa8eb; - width: 8%; - border-radius: 10px; - margin-bottom: 18px; - span { - display: block; - float: left; - text-align: center; - width: 50%; - color: #3fa8eb; - font-weight: 700; - cursor: pointer; - } - span:first-child { - border-radius: 10px 0 0 10px; - } - span:last-child { - border-radius: 0 10px 10px 0; - } - span.left_b { - border-left: 1px solid #3fa8eb; - } - span.active { - color: #fff; - background: #3fa8eb; - } -} - -.list { - // background-color: #fff; - border-radius: 5px; - // padding: 10px; - .listupload { - width: 22%; - vertical-align: top; - display: inline-block; - margin-left: 13%; - } - .listlin { - vertical-align: top; - display: inline-block; - width: 1%; - margin-left: 10%; - height: 177px; - margin-bottom: 30px; - border-right: 2px solid #EEEEEE; - } - .listfile { - width: 43%; - height: 100%; - vertical-align: top; - display: inline-block; - margin-left: 10%; - .nouploadfile{ - height: 80%; - width: 100%; - text-align: center; - font-size: 22px; - margin-top: 5%; - } - .listfilebgc { - background-color: #fff; - border-bottom: 8px solid #F7F8FC; - } - .listfilebgc { - background-color: #fff; - height: 30px; - border-radius: 2px; - line-height: 2; - color: #42548F; - border-bottom: 4px solid #F7F8FC; - >div { - float: left; - } - :first-child { - width: 6%; - margin-left: 5px; - } - :nth-child(2){ - width:20%; - } - :nth-child(3){ - width: 60%; - text-align: center; - } - :nth-child(4){ - padding-left: 4%; - } - .color { - color:rgba(66,84,143,1); - span{ - color:rgba(66,84,143,0.7); - } - } - .progress{ - color:rgba(66,84,143,0.7); - } - } - } - nz-table { - tbody { - td { - span.onboarding { - font-size: 12px; - color: #147dc2; - } - span.onboarded { - font-size: 14px; - color: #147dc2; - } - span.updating { - font-size: 12px; - color: blue; - } - span.deleting { - font-size: 12px; - color: red; - } - span.invalid { - font-size: 14px; - color: purple; - } - i.anticon { - cursor: pointer; - font-size: 18px; - padding: 2px; - &:hover{ - color: #147dc2; - } - } - .cannotclick { - pointer-events: none; - color: #aaa; - opacity: 0.6; - } - .fileIcon{ - display: none; - } - } - } - } -} -.mask { - top: 0; - left: 0; - position: fixed; - width: 100%; - height: 100%; - opacity: 0.1; - background: black; - z-index: 1049; -} \ No newline at end of file diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts deleted file mode 100644 index 0e49f656..00000000 --- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { OnboardVnfVmComponent } from './onboard-vnf-vm.component'; - -describe('OnboardVnfVmComponent', () => { - let component: OnboardVnfVmComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ OnboardVnfVmComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(OnboardVnfVmComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts deleted file mode 100644 index dd2e7dd7..00000000 --- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts +++ /dev/null @@ -1,670 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -import { HttpClient, HttpRequest, HttpResponse } from '@angular/common/http'; -import { Component, OnInit, HostBinding, TemplateRef } from '@angular/core'; -import { NzNotificationService } from 'ng-zorro-antd'; -// import { MyhttpService } from '../../myhttp.service'; -import { onboardService } from '../../onboard.service'; -import { slideToRight } from '../../animates'; -import { NzMessageService, UploadFile, NzModalRef, NzModalService } from 'ng-zorro-antd'; -import { filter } from 'rxjs/operators'; -import { Title } from '@angular/platform-browser'; -import * as $ from 'jquery'; - - -@Component({ - selector: 'app-onboard-vnf-vm', - templateUrl: './onboard-vnf-vm.component.html', - styleUrls: ['./onboard-vnf-vm.component.less'], - animations: [slideToRight] -}) -export class OnboardVnfVmComponent implements OnInit { - @HostBinding('@routerAnimate') routerAnimateState; - - // delete Modal - confirmModal: NzModalRef; - nsdInfoId = ''; - vnfPkgId = ''; - pnfdInfoId = ''; - tabTitle = "NS"; - nsuploading = false; - vnfuploading = false; - pnfloading = false; - fileList: UploadFile[] = []; - fileListNS: UploadFile[] = []; - fileListVNF: UploadFile[] = []; - fileListPNF: UploadFile[] = []; - // onboard initial value - status = "Onboard Available"; - jobId = ''; - //url - url = { - // line up - ns: '/api/nsd/v1/ns_descriptors/*_*/nsd_content', - vnf: '/api/vnfpkgm/v1/vnf_packages/*_*/package_content', - pnf: '/api/nsd/v1/pnf_descriptors/*_*/pnfd_content' - // line local - //ns: 'https://jsonplaceholder.typicode.com/posts/', - //vnf: 'https://jsonplaceholder.typicode.com/posts/', - //pnf: 'https://jsonplaceholder.typicode.com/posts/', - }; - constructor( - private myhttp: onboardService, - private http: HttpClient, - private msg: NzMessageService, - private titleService: Title, - private modal: NzModalService, - private modalService: NzModalService, - private notification: NzNotificationService - ) { } - //default Call ns data by default - ngOnInit() { - this.getTableData(); - } - - //Tabular data - nstableData: any; - vnftableData: any; - pnftableData: any; - nssdcData: any; - nsvfcData: any; - - vnfsdcData: any; - vnfvfcData: any; - nspageIndex = 1; - nspageSize = 10; - vnfpageIndex = 1; - vnfpageSize = 10; - pnfpageIndex = 1; - pnfpageSize = 10; - total; - nsloading = false; - sortName = null; - sortValue = null; - tabs = ['NS', 'VNF', 'PNF']; - isSpinning = false; - - //2019.08.14 add - notificationAttributes = { - "title": this.tabs[0], - "imgPath": "../../../../assets/images/execute-inproess.png", - "action": "OnboardingState", - "status": "InProgress", - "id": null - }; - notificationModelShow(template: TemplateRef<{}>): void { - this.notification.template(template); - } - notificationSuccess(notificationModel) { - this.notificationAttributes.imgPath = "../../../assets/images/execute-success.png"; - this.notificationAttributes.status = "Success"; - this.notificationModelShow(notificationModel); - } - notificationFailed(notificationModel) { - this.notificationAttributes.imgPath = "../../../assets/images/execute-faild.png"; - this.notificationAttributes.status = "Failed"; - this.notificationModelShow(notificationModel); - } - // Handling tab switching request data - handleTabChange(tab) { - this.tabTitle = tab; - switch (tab) { - case 'NS': - this.nstableData = []; - this.getTableData(); - this.fileList = []; //Empty uploaded files when switching - break - case 'VNF': - this.vnftableData = []; - this.getTableVnfData() - this.fileList = []; - break - case 'PNF': - this.pnftableData = []; - this.getTablePnfData() - this.fileList = []; - break - } - } - - - //before put create--Drag and drop files to the page before uploading - requestBody = { - "userDefinedData": { - "additionalProp1": "", - "additionalProp2": "", - "additionalProp3": "" - } - } - - //NS/VNF List add file - beforeUpload = (file: UploadFile): boolean => { - this.fileList.push(file); - return false; - } - - // ns beforeUpload - beforeUploadNS = (file: UploadFile): boolean => { - this.fileListNS.push(file); - this.myhttp.getCreatensData("createNetworkServiceData", this.requestBody)//on-line - // this.myhttp.getCreatensData("creatensDataNS") //local - .subscribe((data) => { - this.nsdInfoId = data["id"]; - }, (err) => { - console.log(err); - }) - return false; - } - - //vnf beforeUpload - beforeUploadVNF = (file: UploadFile): boolean => { - this.fileListVNF.push(file); - this.myhttp.getCreatensData("createVnfData", this.requestBody)//on-line - // this.myhttp.getCreatensData("creatensDataVNF") //local - .subscribe((data) => { - this.vnfPkgId = data["id"]; - }, (err) => { - console.log(err); - }) - return false; - } - - // //pnf eforeUpload - beforeUploadPNF = (file: UploadFile): boolean => { - this.fileListPNF.push(file); - this.myhttp.getCreatensData("createPnfData", this.requestBody) //on-line - // this.myhttp.getCreatensData("creatensDataPNF") //local - .subscribe((data) => { - this.pnfdInfoId = data["id"]; - }, (err) => { - console.log(err); - }) - return false; - } - - //Get list list id - onClickId(id, tab) { - switch (tab) { - case 'NS': - this.nsdInfoId = id; - break - case 'VNF': - this.vnfPkgId = id; - break - case 'PNF': - this.pnfdInfoId = id; - break - } - } - - //Drag and drop and click the upload button - onClick(tab) { - switch (tab) { - case 'NS': - // this.handleUpload('/api/nsd/v1/ns_descriptors/'+this.nsdInfoId+'/nsd_content',tab); - this.handleUpload(this.url.ns.replace("*_*", this.nsdInfoId), tab); - this.getTableData(); - break - case 'VNF': - // this.handleUpload('/api/vnfpkgm/v1/vnf_packages/'+this.vnfPkgId+'/package_content',tab); - this.handleUpload(this.url.vnf.replace("*_*", this.vnfPkgId), tab); - this.getTableVnfData() - break - case 'PNF': - // this.handleUpload('/api/nsd/v1/pnf_descriptors/'+this.pnfdInfoId+'/pnfd_content',tab); - this.handleUpload(this.url.pnf.replace("*_*", this.pnfdInfoId), tab); - this.getTablePnfData(); - break - } - } - - nsRightList = []; - nsNum = 0; - vnfRightList = []; - vnfNum = 0; - pnfRightList = []; - pnfNum = 0; - //put Upload Upload - handleUpload(url, tab): void { - const formData = new FormData(); - // tslint:disable-next-line:no-any - switch (tab) { - case "NS": - this.fileListNS.forEach((file: any) => { - formData.append('file', file); - }); - this.nsuploading = true; - let lastNs = this.fileListNS[this.fileListNS.length - 1]; - let nsfile = { - name: lastNs.name, - uid: lastNs.uid, - progress: 0, - status: true, - success: 0 - }; - this.nsNum += 1; - this.nsRightList.push(nsfile); - let requeryNs = (nsfile) => { - setTimeout(() => { - nsfile.progress += 2; - if (nsfile.progress < 100) { - requeryNs(nsfile) - } else { - nsfile.progress = 100; - nsfile.status = false; - } - }, 100) - }; - requeryNs(nsfile); - break - case "VNF": - this.fileListVNF.forEach((file: any) => { - formData.append('file', file); - }); - this.vnfuploading = true; - let lastVnf = this.fileListVNF[this.fileListVNF.length - 1]; - let vnffile = { - name: lastVnf.name, - uid: lastVnf.uid, - progress: 0, - status: true, - success: 0 - }; - this.vnfNum += 1; - this.vnfRightList.push(vnffile); - let requeryVnf = (vnffile) => { - setTimeout(() => { - vnffile.progress += 2; - if (vnffile.progress < 100) { - requeryVnf(vnffile) - } else { - vnffile.progress = 100; - vnffile.status = false; - } - }, 100) - }; - requeryVnf(vnffile); - break - case "PNF": - this.fileListPNF.forEach((file: any) => { - formData.append('file', file); - }); - this.pnfloading = true; - let lastPnf = this.fileListPNF[this.fileListPNF.length - 1]; - let pnffile = { - name: lastPnf.name, - uid: lastPnf.uid, - progress: 0, - status: true, - success: 0 - }; - this.pnfNum += 1; - this.pnfRightList.push(pnffile); - let requeryPnf = (pnffile) => { - setTimeout(() => { - pnffile.progress += 2; - if (pnffile.progress < 100) { - requeryPnf(pnffile) - } else { - pnffile.progress = 100; - pnffile.status = false; - } - }, 100) - }; - requeryPnf(pnffile); - break - } - // line PUT - const req = new HttpRequest('PUT', url, formData, { - reportProgress: true, - withCredentials: true - }); - //Upload pre-empty array - this.fileList = []; - this.fileListNS = []; - this.fileListVNF = []; - this.fileListPNF = []; - this.http.request(req) - .pipe(filter(e => e instanceof HttpResponse)) - .subscribe( - (event: {}) => { - if (tab == "NS") { - this.nsRightList[this.nsNum - 1].progress = 100; - this.nsRightList[this.nsNum - 1].status = false; - this.nsRightList[this.nsNum - 1].success = 0; - } - if (tab == "VNF") { - this.vnfRightList[this.vnfNum - 1].progress = 100; - this.vnfRightList[this.vnfNum - 1].status = false; - this.vnfRightList[this.vnfNum - 1].success = 0; - } - if (tab == "PNF") { - this.pnfRightList[this.pnfNum - 1].progress = 100; - this.pnfRightList[this.pnfNum - 1].status = false; - this.pnfRightList[this.pnfNum - 1].success = 0; - } - this.changeUploadingSta(tab); - this.msg.success('upload successfully.'); - }, - err => { - if (tab == "NS") { - this.nsRightList[this.nsNum - 1].progress = 100; - this.nsRightList[this.nsNum - 1].status = false; - this.nsRightList[this.nsNum - 1].success = 1; - } - if (tab == "VNF") { - this.vnfRightList[this.vnfNum - 1].progress = 100; - this.vnfRightList[this.vnfNum - 1].status = false; - this.vnfRightList[this.vnfNum - 1].success = 1; - } - if (tab == "PNF") { - this.pnfRightList[this.pnfNum - 1].progress = 100; - this.pnfRightList[this.pnfNum - 1].status = false; - this.pnfRightList[this.pnfNum - 1].success = 1; - } - this.changeUploadingSta(tab); - this.msg.error('upload failed.'); - } - ); - } - - // Control the status of uploading - changeUploadingSta(tab) { - switch (tab) { - case "NS": - this.nsuploading = false; - break - case "VNF": - this.vnfuploading = false; - break - case "PNF": - this.pnfloading = false; - } - } - - //---------------------------------------------------------------------------------------------- - - // Get the NS list - getTableData() { - this.isSpinning = true; - //ns vfc lists - this.myhttp.getOnboardTableData() - .subscribe((data) => { - this.nsvfcData = data; - this.nstableData = this.nsvfcData; - //ns sdc list - this.myhttp.getSDC_NSTableData() - .subscribe((data) => { - this.isSpinning = false; //loading hide - this.nssdcData = data; - this.nsvfcData.map((nsvfc) => { nsvfc.sameid = this.nssdcData.find((nssdc) => { return nsvfc.id == nssdc.uuid }) && nsvfc.id; return nsvfc; }); - let sameData = this.nssdcData.filter((nssdc) => { return !this.nsvfcData.find((nsvfc) => { return nsvfc.id == nssdc.uuid }) }); - this.nstableData = this.nstableData.concat(sameData); - }, (err) => { - console.log(err); - this.isSpinning = false; - }) - }, (err) => { - console.log(err); - this.isSpinning = false; - }) - - } - - // Get the vnf list - getTableVnfData() { - this.isSpinning = true; - //vnf vfc lists - this.myhttp.getOnboardTableVnfData() - .subscribe((data) => { - this.vnfvfcData = data; - this.vnftableData = this.vnfvfcData; - //vnf sdc lists - this.myhttp.getSDC_VNFTableData() - .subscribe((data) => { - this.isSpinning = false; //loading hide - this.vnfsdcData = data; - this.vnfvfcData.map((vnfvfc) => { vnfvfc.sameid = this.vnfsdcData.find((nssdc) => { return vnfvfc.id == nssdc.uuid }) && vnfvfc.id; return vnfvfc; }); - let sameData = this.vnfsdcData.filter((vnfsdc) => { return !this.vnfvfcData.find((vnfvfc) => { return vnfvfc.id == vnfsdc.uuid }) }); - this.vnftableData = this.vnftableData.concat(sameData); - }, (err) => { - console.log(err); - }) - - }, (err) => { - console.log(err); - }) - } - - // Get pnf list - getTablePnfData() { - this.isSpinning = true; - this.myhttp.getOnboardTablePnfData() - .subscribe((data) => { - this.pnftableData = data; - this.isSpinning = false; //loading hide - }, (err) => { - console.log(err); - }) - } - - //----------------------------------------------------------------------------------- - /* onboard */ - //Successful frame - success(tab): void { - const modal = this.modalService.success({ - nzTitle: 'This is an success message', - nzContent: 'Package Onboard Completed.' - }); - switch (tab) { - case "NS": - this.getTableData(); - break - case "VNF": - this.getTableVnfData(); - break - } - } - - //Failure frame - error(): void { - this.modalService.error({ - nzTitle: 'This is an error message', - nzContent: 'Package Onboard Failed!' - }); - } - - //onboard status - onboardData = { - status: "onboard", - progress: 0, - } - currentIndex = 0; - // ns onboard Upload button - updataNsService(id, index, notificationModel) { - this.currentIndex = index; - this.onboardData.status = "onboarding"; //Disabled - this.onboardData.progress = 0; - let requestBody = { - "csarId": id - }; - this.notificationAttributes = { - "title": this.tabs[0], - "imgPath": "../../../../assets/images/execute-inproess.png", - "action": "OnboardingState", - "status": "InProgress", - "id": id - }; - this.notificationModelShow(notificationModel); - this.myhttp.getNsonboard(requestBody) - .subscribe((data) => { - if (data.status == "failed") { - this.onboardData.status = "Failed"; - this.notificationFailed(notificationModel); - this.error(); - return false - } else if (data.status == "success") { - this.success("NS"); - this.onboardData.status = "onboarded"; - this.notificationSuccess(notificationModel); - } - }, (err) => { - console.log(err); - }) - } - - // vnf onboard Upload button - updataVnfService(id, index, notificationModel) { - this.currentIndex = index; - this.onboardData.status = "onboarding"; //Disabled button - this.onboardData.progress = 0; - - - let requestBody = { - "csarId": id - }; - this.notificationAttributes = { - "title": this.tabs[1], - "imgPath": "../../../../assets/images/execute-inproess.png", - "action": "OnboardingState", - "status": "InProgress", - "id": id - }; - this.notificationModelShow(notificationModel); - this.myhttp.getVnfonboard(requestBody) - .subscribe((data) => { - this.jobId = data.jobId; - this.queryProgress(this.jobId, 0, notificationModel); //vnf Need to query progress interface - }, (err) => { - console.log(err); - }) - } - - //Progress Progress inquiry - queryProgress(jobId, responseId, notificationModel) { - let mypromise = new Promise((res) => { - this.myhttp.getProgress(jobId, responseId) - .subscribe((data) => { - if (data.responseDescriptor == null || data.responseDescriptor == "null" || data.responseDescriptor.progress == undefined || data.responseDescriptor.progress == null) { - this.onboardData.status = "onboarding"; - setTimeout(() => { - this.queryProgress(this.jobId, 0, notificationModel); - }, 10000) - return false - } - if (data.responseDescriptor.progress > 100) { - this.onboardData.status = "Failed"; - this.notificationFailed(notificationModel); - this.error(); - return false - } - if (data.responseDescriptor.progress < 100) { - this.onboardData.status = "onboarding"; - setTimeout(() => { - this.queryProgress(this.jobId, 0, notificationModel); - }, 5000) - } else if (data.responseDescriptor.progress == 100) { - res(data); - this.success("VNF"); - this.onboardData.status = "onboarded"; - this.notificationSuccess(notificationModel); - } - return false - }) - }) - return mypromise; - } - - //-------------------------------------------------------------------------------- - /* delete button */ - showConfirm(index, pkgid, tab, notificationModel): void { - this.notificationAttributes = { - "title": this.tabs[0], - "imgPath": "../../../../assets/images/execute-inproess.png", - "action": "OnboardingState", - "status": "InProgress", - "id": pkgid - }; - this.confirmModal = this.modal.confirm({ - nzTitle: 'Do you Want to delete these items?', - nzContent: 'Do you Want to delete these items?', - nzOkText: 'Yes', - nzCancelText: 'No', - nzOnOk: () => new Promise((resolve, reject) => { - switch (tab) { - case 'NS': - this.notificationAttributes.title = this.tabs[0]; - this.notificationModelShow(notificationModel); - this.deleteNsService(index, pkgid, notificationModel); - setTimeout(Math.random() > 0.5 ? resolve : reject, 2000); - break - case 'VNF': - this.notificationAttributes.title = this.tabs[1]; - this.notificationModelShow(notificationModel); - this.deleteVnfService(index, pkgid, notificationModel); - setTimeout(Math.random() > 0.5 ? resolve : reject, 2000); - break - case 'PNF': - this.notificationAttributes.title = this.tabs[2]; - this.notificationModelShow(notificationModel); - this.deletePnfService(index, pkgid, notificationModel); - setTimeout(Math.random() > 0.5 ? resolve : reject, 2000); - break - } - }).catch(() => console.log('Oops errors!')) - }); - } - - //delete nsItem - deleteNsService(index, pkgid, notificationModel) { - this.myhttp.deleteNsIdData(pkgid) - .subscribe((data) => { - this.notificationSuccess(notificationModel); - //refresh list after successful deletion - this.getTableData(); - }, (err) => { - console.log(err); - this.notificationFailed(notificationModel); - }) - } - - //delete vnfItem - deleteVnfService(index, pkgid, notificationModel) { - this.myhttp.deleteVnfIdData(pkgid) - .subscribe((data) => { - this.notificationSuccess(notificationModel); - //refresh list after successful deletion - this.getTableVnfData() - }, (err) => { - console.log(err); - this.notificationFailed(notificationModel); - }) - } - - //delete PnfItem - deletePnfService(index, pkgid, notificationModel) { - this.myhttp.deletePnfIdData(pkgid) - .subscribe((data) => { - //refresh list after successful deletion - this.notificationSuccess(notificationModel); - this.getTablePnfData() - }, (err) => { - console.log(err); - this.notificationFailed(notificationModel); - }) - } - -} diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.css b/usecaseui-portal/src/app/services/services-list/services-list.component.css deleted file mode 100644 index 0a7f92eb..00000000 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.css +++ /dev/null @@ -1,145 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -.title { - font: 700 18px/18px "思源黑体"; - color: #4c5e70; - margin-bottom: 18px; -} -hr { - border: none; - height: 2px; - background-color: #dce1e7; - margin-bottom: 20px; -} -.action { - margin-bottom: 20px; -} -.action span { - display: inline-block; - font: 700 14px "Arial"; - color: #4c5e70; -} -.action nz-dropdown { - vertical-align: middle; -} -.action nz-dropdown :hover { - border-color: #147dc2; -} -.action nz-dropdown button { - width: 165px; - height: 30px; - background-color: #eceff4; - text-align: left; - border-color: #9fa9ab; -} -.action nz-dropdown button span { - font-weight: 400; - display: inline-block; - width: 120px; - overflow: hidden; - text-overflow: ellipsis; - padding-top: 2px; -} -.action nz-dropdown button i { - position: absolute; - top: 10px; - right: 10px; -} -.action .create { - float: right; - height: 30px; - padding: 0 10px; -} -.action .create span { - color: #fff; - font-weight: 400; -} -.list { - background-color: #fff; - border-radius: 5px; - padding: 10px; -} -.list nz-table tbody td span.active { - font-size: 14px; - color: #147dc2; -} -.list nz-table tbody td span.closed { - font-size: 14px; - color: red; -} -.list nz-table tbody td span.onboarding { - font-size: 12px; - color: #147dc2; -} -.list nz-table tbody td span.updating { - font-size: 12px; - color: blue; -} -.list nz-table tbody td span.deleting { - font-size: 12px; - color: red; -} -.list nz-table tbody td span.creating { - font-size: 12px; - color: green; -} -.list nz-table tbody td span.scaling { - font-size: 12px; - color: purple; -} -.list nz-table tbody td span.healing { - font-size: 12px; - color: orangered; -} -.list nz-table tbody td i.anticon { - cursor: pointer; - font-size: 18px; - padding: 2px; -} -.list nz-table tbody td i.anticon:hover { - color: #147dc2; -} -.list nz-table tbody td .cannotclick { - pointer-events: none; - color: #aaa; - opacity: 0.6; -} -.list nz-table tbody tr.childtr td { - font-size: 12px; - color: #147dc2; -} -.detailComponent { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100vh; - background-color: #f3f3f3; - overflow-y: auto; - padding: 20px 32px; - z-index: 3; -} -.createComponent { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100vh; - background-color: #f3f3f3; - overflow-y: auto; - padding: 20px 32px; - z-index: 3; -} 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 deleted file mode 100644 index d47b342c..00000000 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.html +++ /dev/null @@ -1,769 +0,0 @@ - -
    - - - - - - {{"i18nTextDefine_Customer" | translate}} : - - - - - - - - - - - {{"i18nTextDefine_ServiceType" | translate}} : - - - - - - - - -
    - {{"i18nTextDefine_Customer" | translate}} : - - - -
    -
    - {{"i18nTextDefine_ServiceType" | translate}} : - - - -
    -
    - {{"i18nTextDefine_UseCase" | translate}} : - - - - - - - -
    - -
    - {{"i18nTextDefine_Template" | translate}} : - - - -
    -
    -
    - {{"i18nTextDefine_Orchestrator" | translate}} : - - - -
    -
    -
    -
    - - -
    -
    -
    - {{"i18nTextDefine_Templateparsingfailed" | translate}} -
    -     -
    - -
      -
    • - {{item.serviceDomain}} -
      -

      - {{item.failed}} - {{"i18nTextDefine_Failed" | translate}} -

      -

      - {{item.Success}} - {{"i18nTextDefine_Success" | translate}} -

      -

      - {{item.InProgress}} - {{"i18nTextDefine_InProgress" | translate}} -

      -
      -

      {{item.detailName | translate}}

      -
      • -
    -
    - - - - {{"i18nTextDefine_NO" | translate}} - - {{"i18nTextDefine_Name" | translate}} - {{"i18nTextDefine_InstanceID" | translate}} - {{"i18nTextDefine_UseCase" | translate}} - {{"i18nTextDefine_Status" | translate}} - {{"i18nTextDefine_Action" | translate}} - - - - - - {{pageSize*(pageIndex-1) + i+1}} - - {{data["service-instance-name"] || data.nsName}} - {{data["service-instance-id"] || data.nsInstanceId}} - -

    - {{data.serviceDomain}} -

    - - - {{data.tips}} - - Available - - - Unavailable - - - - - - - - -
      -
    • - - {{"i18nTextDefine_Scale" | translate}} -
      • -
    • - - {{"i18nTextDefine_Update" | translate}} -
      • -
    - - - - - - - - {{item["service-instance-id"] || item.nsInstanceId || item.vnfInstanceId}} - {{item["service-instance-name"] || item.nsName || item.vnfInstanceName}} - -

    - {{item.serviceDomain}} -

    - - - {{item.tips}} - - - - - - -     - -     - - -

    *  {{"i18nTextDefine_SureScale" | translate}}

    -
    -

    {{"i18nTextDefine_InstanceID" | translate}} :

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

    {{ item.netWorkServiceName }}

    -
    - {{"i18nTextDefine_ScaleType" | translate}} : - - - - -
    -
    - {{"i18nTextDefine_AspectId" | translate}} : - -
    -
    - {{"i18nTextDefine_Number_Of_Steps" | translate}} : - -
    -
    - {{"i18nTextDefine_ScalingDirection" | translate}} : - - - - -
    -
    - - -
    -
    - - instance temination is starting - -
    E2E   - {{"i18nTextDefine_InstanceTeminationStarting" | translate}} -
    -
    -
    -

    {{"i18nTextDefine_InstanceName" | translate}} :

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

    {{"i18nTextDefine_Customer" | translate}} :

    - {{ customerSelected.name }} -
    -
    -

    {{"i18nTextDefine_UseCase" | translate}} :

    - {{ thisService["serviceDomain"] }} -
    -
    -
    {{"i18nTextDefine_Close" | translate}}
    -
    -
    -     -     - - -

    *  {{"i18nTextDefine_SureDelete" | translate}}

    -
    -

    {{"i18nTextDefine_InstanceName" | translate}} :

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

    {{"i18nTextDefine_InstanceID" | translate}} :

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

    {{"i18nTextDefine_terminationType" | translate}} :

    - - - - -
    -
    -

    {{"i18nTextDefine_gracefulTerminationTimeout" | translate}} - :

    - -
    -
    - - -
    -
    - - instance temination is starting - -
    - {{ thisService['serviceDomain'] }}   {{"i18nTextDefine_InstanceTeminationStarting" | - translate}} -
    -
    E2E   - {{"i18nTextDefine_InstanceTeminationStarting" | translate}} -
    -
    NS   - {{"i18nTextDefine_InstanceTeminationStarting" | translate}} -
    -
    -
    -

    {{"i18nTextDefine_InstanceName" | translate}} :

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

    {{"i18nTextDefine_Customer" | translate}} :

    - {{ customerSelected.name }} -
    -
    -

    {{"i18nTextDefine_UseCase" | translate}} :

    - {{ thisService["serviceDomain"] }} -
    -
    -
    {{"i18nTextDefine_Close" | translate}}
    -
    -
    -     -     - - -

    *  {{"i18nTextDefine_SureHeal" | translate}}

    -
    -

    {{"i18nTextDefine_InstanceID" | translate}} :

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

    {{"i18nTextDefine_degreeHealing" | translate}} :

    - - - - - - -
    -
    - {{"i18nTextDefine_actionsHealing" | translate}} : - -
    -
    - - -   -
    -
    - {{"i18nTextDefine_healScript" | translate}} : - -
    - {{"i18nTextDefine_additionalParamsforNs" | translate}} : - -
    -
    - Key:   - Value: - -
    -
    -
    - -
    -
    -

    {{"i18nTextDefine_cause" | translate}} :

    - -
    -
    -

    {{"i18nTextDefine_action" | translate}} :

    - -
    -
    -

    {{"i18nTextDefine_actionvminfo" | translate}}:

    - - - -
    -
    - - -
    -
    - - instance temination is starting - -
    NS   - {{"i18nTextDefine_InstanceHealingStarting" | translate}} -
    -
    -
    -

    {{"i18nTextDefine_InstanceName" | translate}} :

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

    {{"i18nTextDefine_Customer" | translate}} :

    - {{ customerSelected.name }} -
    -
    -

    {{"i18nTextDefine_UseCase" | translate}} :

    - {{ thisService["serviceDomain"] }} -
    -
    -
    {{"i18nTextDefine_Close" | translate}}
    -
    -
    -     -     - - - -
    -
    - - instance temination is starting - -
    - {{ thisService['serviceDomain'] }}   {{"i18nTextDefine_InstanceCreationStarting" | - translate}} -
    -
    E2E   - {{"i18nTextDefine_InstanceCreationStarting" | translate}} -
    -
    NS   - {{"i18nTextDefine_InstanceCreationStarting" | translate}} -
    -
    -
    -

    {{"i18nTextDefine_InstanceName" | translate}} :

    - {{ thisCreateService["service-instance-name"] }} - -
    -
    -

    {{"i18nTextDefine_Customer" | translate}} :

    - {{ customerSelected2.name }} -
    -
    -

    {{"i18nTextDefine_UseCase" | translate}} :

    - {{ thisCreateService['serviceDomain'] }} -
    -
    -
    {{"i18nTextDefine_Close" | translate}}
    -
    -
    -     - -
    -
    - - instance temination is starting - instance temination is starting - -
    - {{ thisCreateService['serviceDomain'] }}   {{"i18nTextDefine_InstanceCreatedSuccessfully" | - translate}} -
    -
    - E2E   {{"i18nTextDefine_InstanceCreatedSuccessfully" | translate}} -
    -
    - NS   {{"i18nTextDefine_InstanceCreatedSuccessfully" | translate}} -
    -
    - {{ thisCreateService['serviceDomain'] }}   {{"i18nTextDefine_InstanceCreationFailed" | - translate}} -
    -
    - E2E   {{"i18nTextDefine_InstanceCreationFailed" | translate}} -
    -
    - NS   {{"i18nTextDefine_InstanceCreationFailed" | translate}} -
    -
    -
    -

    {{"i18nTextDefine_InstanceName" | translate}} :

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

    {{"i18nTextDefine_Customer" | translate}} :

    - {{ customerSelected2.name }} -
    -
    -

    {{"i18nTextDefine_UseCase" | translate}} :

    - {{ thisCreateService["serviceDomain"] }} -
    -
    -
    {{"i18nTextDefine_Close" | translate}}
    -
    -
    -     - -
    -
    - - instance temination is starting - instance temination is starting - -
    - {{ thisService['serviceDomain'] }}   {{"i18nTextDefine_InstanceTeminatedSuccessfully" | - translate}} -
    -
    - E2E   {{"i18nTextDefine_InstanceTeminatedSuccessfully" | translate}} -
    -
    - NS   {{"i18nTextDefine_InstanceTeminatedSuccessfully" | translate}} -
    -
    - {{ thisService['serviceDomain'] }}   {{"i18nTextDefine_InstanceTeminationFailed" | - translate}} -
    -
    E2E -   {{"i18nTextDefine_InstanceTeminationFailed" | translate}} -
    -
    - NS   {{"i18nTextDefine_InstanceTeminationFailed" | translate}} -
    -
    -
    -

    {{"i18nTextDefine_InstanceName" | translate}} :

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

    {{"i18nTextDefine_Customer" | translate}} :

    - {{ customerSelected.name }} -
    -
    -

    {{"i18nTextDefine_UseCase" | translate}} :

    - {{ thisService["serviceDomain"] }} -
    -
    -
    {{"i18nTextDefine_Close" | translate}}
    -
    -
    -     - -
    -
    - - instance temination is starting - instance temination is starting - -
    E2E   - {{"i18nTextDefine_InstanceScaledSuccessfully" | translate}} -
    -
    E2E   - {{"i18nTextDefine_InstanceScaleFailed" | translate}} -
    -
    -
    -

    {{"i18nTextDefine_InstanceName" | translate}} :

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

    {{"i18nTextDefine_Customer" | translate}} :

    - {{ customerSelected.name }} -
    -
    -

    {{"i18nTextDefine_UseCase" | translate}} :

    - {{ thisService["serviceDomain"] }} -
    -
    -
    {{"i18nTextDefine_Close" | translate}}
    -
    -
    -     - -
    -
    - - instance temination is starting - instance temination is starting - -
    NS   - {{"i18nTextDefine_InstanceHealedSuccessfully" | translate}} -
    -
    NS   - {{"i18nTextDefine_InstanceHealingFailed" | translate}} -
    -
    -
    -

    {{"i18nTextDefine_InstanceName" | translate}} :

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

    {{"i18nTextDefine_Customer" | translate}} :

    - {{ customerSelected.name }} -
    -
    -

    {{"i18nTextDefine_UseCase" | translate}} :

    - {{ thisService["serviceDomain"] }} -
    -
    -
    {{"i18nTextDefine_Close" | translate}}
    -
    -
    -     - -
    -
    - - instance temination is starting - instance temination is starting - -
    CCVPN   - {{"i18nTextDefine_InstanceUpdatedSuccessfully" | translate}} -
    -
    CCVPN   - {{"i18nTextDefine_InstanceUpdateFailed" | translate}} -
    -
    -
    -

    {{"i18nTextDefine_InstanceName" | translate}} :

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

    {{"i18nTextDefine_Customer" | translate}} :

    - {{ customerSelected.name }} -
    -
    -

    {{"i18nTextDefine_UseCase" | translate}} :

    - {{ thisService["serviceDomain"] }} -
    -
    -
    {{"i18nTextDefine_Close" | translate}}
    -
    -
    -     -
    -
    - -
    -
    - -
    -
    - - -
    -
    - - -
    - -     -
    - loading -

    Please wating……

    -
    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 deleted file mode 100644 index 2a19e5bb..00000000 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.less +++ /dev/null @@ -1,433 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -@media screen and (min-width: 1050px){ - .action{ - span:nth-of-type(2){ - margin-left: 40px; - } - } - -} -@media screen and (max-width: 1050px){ - .action{ - span:nth-of-type(2){ - margin-left: 20px; - } - } - -} -@media screen and (max-width: 1300px){ - .top-list-text{ - p{ - width: 200px; - } - } -} -@media screen and (min-width: 1200px){ - .round{ - top:45%; - left: 50px; - margin-top: -40px; - } - -} - -@media screen and (max-width: 1200px){ - .round{ - top:12%; - left: 12%; - } - .top-list-text{ - p{ - width: 170px; - } - } - -} - - -.title { - font: 700 18px/18px "思源黑体"; - color: #4c5e70; - margin-bottom: 18px; -} -hr { - border: none; - height: 2px; - background-color: #dce1e7; - margin-bottom: 20px; -} -.ant-tabs-bar{ - margin-bottom: 0!important; -} -.ant-dropdown-menu{ - min-height:40px; - max-height: 200px; - overflow: auto; -} -.ant-dropdown-menu-item{ - a{ - max-width: 165px; - overflow: hidden; - text-overflow: ellipsis; - } -} -.mask{ - width: 100%; - height: 100%; - position: absolute; - z-index: 999; - background: rgba(0, 0, 0, 0.65); - top:0; -} -.loading{ - width: 100%; - height: 100%; - position: fixed; - top: 0; - margin-top: -50px; - margin-left: -50px; - z-index: 1001; - text-align: center; - background: transparent; - p{ - color: #0DA9E2; - text-align: center; - position: absolute; - width: 300px; - height: 30px; - line-height: 30px; - top: 71%; - left: 36%; - margin-top: -150px; - margin-left: -150px; - } - img{ - width: 300px; - height: 300px; - position: absolute; - top: 50%; - left: 36%; - margin-top: -150px; - margin-left: -150px; - } -} -.action { - margin-bottom: 15px; - padding: 28px; - background: #ffffff; - position: relative; - span { - display: inline-block; - font: 700 14px "Arial"; - color: #3C4F8C; - margin-right: 5px; - .icon{ - margin-right: 10px; - } - } - nz-dropdown { - width: 20%; - vertical-align: middle; - background-color:#ffffff; - :hover{ - border-color: #48C6EF; - } - button { - width: 100%; - max-width:165px; - height: 42px; - background-color:#ffffff; - text-align: left; - border-color: #EEEEEE; - span { - font-weight: 400; - color: #3C4F8C; - display: inline-block; - width: 120px; - overflow: hidden; - text-overflow: ellipsis; - padding-top: 2px; - } - i { - position: absolute; - top: 10px; - right: 10px; - } - } - } - //The style in the drop-down box is in style.less, and the drop-down box is extra temporary generated in the body. - .create { - position: absolute; - right: 3%; - top:50%; - height:42px; - background:#0DA9E2; - border-radius:6px; - margin-top: -15px; - i{ - transform: scale(1.5); - line-height: 15px; - margin-right: 5px; - } - span { - color: #fff; - font-weight: 400; - font-size: 18px; - } - .anticon-plus-circle-o{ - font-size: 18px; - } - } - .create.ant-btn.ant-btn-primary{ - border: none; - } - .create:hover{ - background:#09C6E2; - } - -} -nz-layout{ - padding: 20px 32px; - .top-num{ - - width: 100%; - display: flex; - justify-content: space-around; - .top-list{ - position: relative; - width:32%; - max-width:400px; - height:170px; - background:url("../../../assets/images/servicelist-e2e.png") no-repeat; - background-size: 100% 100%; - border-radius:2px; - .round{ - position: absolute; - width: 60px; - height: 60px; - line-height: 60px; - text-align: center; - background:#E0EDFF; - border:2px solid rgba(224,237,255,1); - border-radius: 50%; - font-size:16px; - font-family:ArialMT; - color:#3C4F8C; - transition: .5s; - } - .top-list-text{ - position: absolute; - text-align: right; - line-height: 20px; - right: 12%; - color: #fff; - p{ - height: 28px; - margin-bottom: 0; - padding-left: 5px; - font-size: 14px; - clear: both; - span{ - display: inline-block; - float: right; - font-weight: 500; - text-align: right; - } - span:nth-child(1){ - font-size: 18px; - margin-left: 15px; - } - span:nth-child(2){ - width: 85px; - font-size: 16px; - } - } - p:nth-child(1){ - margin-top: 25px; - } - .service-description{ - - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - color: #3C4F8C; - - } - } - } - - } -} -.list { - background-color: #fff; - border-radius: 5px; - padding: 10px; - nz-table { - tbody { - td { - position: relative; - span.active { - font-size: 14px; - color: #147dc2; - } - span.closed { - font-size: 14px; - color: red; - } - span.onboarding{ - font-size: 12px; - color: #147dc2; - } - span.updating{ - font-size: 12px; - color: blue; - } - span.deleting { - font-size: 12px; - color: red; - } - span.creating { - font-size: 12px; - color: green; - } - span.scaling { - font-size: 12px; - color: purple; - } - span.healing { - font-size: 12px; - color: orangered; - } - i.anticon { - cursor: pointer; - font-size: 18px; - padding: 2px; - &:hover{ - color: #147dc2; - } - } - .cannotclick { - pointer-events: none; - color: #aaa; - opacity: 0.6; - } - .icon-more{ - position: absolute; - width: 115px; - height: 90px; - 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; - cursor: pointer; - .anticon{ - width: 18px; - height: 18px; - background: url("../../../assets/images/scale.png") no-repeat; - } - .anticon.anticon-update{ - background: url("../../../assets/images/update.png") no-repeat; - } - span{ - margin-left: 5px; - } - } - li:hover{ - color: #0DA9E2; - .anticon{ - background: url("../../../assets/images/scale-active.png") no-repeat; - } - .anticon.anticon-update{ - background: url("../../../assets/images/update-active.png") no-repeat; - } - } - } - } - tr.childtr { - td { - font-size: 12px; - color: #147dc2; - } - } - } - } -} - - -.detailComponent { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100vh; - background-color: #f3f3f3; - overflow-y: auto; - z-index: 3; -} -.createComponent { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100vh; - background-color: #F7F8FC; - overflow-y: auto; - z-index: 3; -} - -.e2eColor,.nsColor,.ccvpnColor,.sotnColor,.voLTEColor{ - width:120px; - height: 34px; - line-height: 34px; - margin-bottom: 0!important; - text-align: center; - background:rgba(158, 158, 158, 0.38); - border-radius:4px -} - -.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: 320px; - height: 32px; - line-height: 32px; - margin: 35px auto; -} -.select-list>span{ - text-align: right; - width: 110px!important; - line-height: 32px; -} - -.listdisplay{ - display: none; -} \ No newline at end of file diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.spec.ts b/usecaseui-portal/src/app/services/services-list/services-list.component.spec.ts deleted file mode 100644 index 61440dc3..00000000 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ServicesListComponent } from './services-list.component'; - -describe('ServicesListComponent', () => { - let component: ServicesListComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ ServicesListComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(ServicesListComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); 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 deleted file mode 100644 index 3a07c1fe..00000000 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.ts +++ /dev/null @@ -1,1363 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -import { Component, OnInit, HostBinding, TemplateRef } from '@angular/core'; -import { MyhttpService } from '../../myhttp.service'; -import { slideToRight } from '../../animates'; -import { NzModalService } from 'ng-zorro-antd'; -import { NzNotificationService } from 'ng-zorro-antd'; -import { Observable } from 'rxjs/Rx'; - -@Component({ - selector: 'app-services-list', - templateUrl: './services-list.component.html', - styleUrls: ['./services-list.component.less'], - animations: [slideToRight] -}) -export class ServicesListComponent implements OnInit { - @HostBinding('@routerAnimate') routerAnimateState; - - public width:number = document.documentElement.clientWidth; - - constructor(private myhttp: MyhttpService, private modalService: NzModalService, private notification: NzNotificationService) { - } - - ngOnInit() { - this.getallCustomers(); - Observable.fromEvent(window, 'resize').subscribe((event) => { - this.width = document.documentElement.clientWidth - }); - } - - // customer servicetype - isSol005Interface = false; - orchestratorList = []; - customerList = []; - customerList2 = []; - customerSelected = { name: null, id: null }; - customerSelected2 = { name: null, id: null }; - serviceTypeList = []; - serviceTypeList2 = []; - serviceTypeSelected = { name: '' }; - serviceTypeSelected2 = { name: '' }; - serviceTypeSelectedName = ""; - templateTypeSelected = "CCVPN"; - orchestratorSelected = { name: null, id: null }; - listSortMasters = JSON.parse(sessionStorage.getItem('listSortMasters')); - language = sessionStorage.getItem("DefaultLang"); - iconMore = false; - loadingAnimateShow = false; - serviceMunber = [ // top: E2E/NS/CCVPN data - { - "serviceDomain": "E2E", - "Success": 0, - "failed": 0, - "InProgress": 0, - "detailName": "i18nTextDefine_End_To_End_Service" - }, - { - "serviceDomain": "NS", - "Success": 0, - "failed": 0, - "InProgress": 0, - "detailName": "i18nTextDefine_Network_Service" - }, - { - "serviceDomain": "CCVPN", - "Success": 0, - "failed": 0, - "InProgress": 0, - "detailName": "i18nTextDefine_Cross_Domain_and_Cross_Layer_VPN" - } - ]; - - //The icon behind each row of data in the table expands - iconMoreShow(data, tableData) { - tableData.map((its) => { - if (its["service-instance-id"] == data["service-instance-id"]) { - if (its["iconMore"] == false) { - data.iconMore = true; - } else if (its["iconMore"] == true) { - data.iconMore = false; - } - } else { - its["iconMore"] = false; - } - }) - } - - //Get all the customers - getallCustomers() { - console.log(this.language, "this.language"); - this.myhttp.getAllCustomers() - .subscribe((data) => { - this.customerList = data.map((item) => { - return { name: item["subscriber-name"], id: item["global-customer-id"] } - }); - if (this.customerList.length == 0) { - 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) { - return false; - } - this.customerSelected = this.customerList[0]; - this.choseCustomer(this.customerSelected); - }) - } - - getallOrchestrators() { - this.myhttp.getAllOrchestrators() - .subscribe((data) => { - this.orchestratorList = data.map((item) => { - return { name: item["name"], id: item["name"] } - }); - if (this.orchestratorList.length == 0) { - console.log("orchestratorList.length == 0", this.orchestratorList); - return false; - } - this.orchestratorSelected = this.orchestratorList[0]; - }) - } - - choseCustomer(item) { - this.customerSelected = item; - this.myhttp.getServiceTypes(this.customerSelected) - .subscribe((data) => { - this.serviceTypeList = data.map((item) => { - return { name: item["service-type"] } - }); - - if (this.serviceTypeList.length == 0) { - console.log("serviceTypeList.length == 0", this.serviceTypeList); - return false; - } - - this.serviceTypeSelected = this.serviceTypeList[0]; - - this.choseServiceType(this.serviceTypeSelected); - }) - } - - choseServiceType(item) { - this.serviceTypeSelected = item; - this.getTableData(); - } - - - // Create modal box 2 (dialog box) create ------------------------------- - isVisible = false; - - customerChange(): void { - this.getServiceType(this.customerSelected2); - } - - getServiceType(customerSelected2) { - this.myhttp.getServiceTypes(customerSelected2) - .subscribe((data) => { - this.serviceTypeList2 = data.map((item) => { - return { name: item["service-type"] } - }); - if (this.serviceTypeList2.length == 0) { - console.log("serviceTypeList.length == 0", this.serviceTypeList2); - return false; - } - this.getAlltemplates(); - }) - } - - serviceTypeChange(): void { - this.serviceTypeSelected2.name = this.serviceTypeSelectedName - } - - createModal(): void { - this.isVisible = true; - this.getallOrchestrators(); - this.customerSelected2 = this.customerSelected; - this.serviceTypeSelectedName = this.serviceTypeSelected.name; - this.serviceTypeSelected2 = Object.assign({}, this.serviceTypeSelected); - this.getServiceType(this.customerSelected2); - } - - choseTemplateType() { - this.getallOrchestrators(); - this.getAlltemplates(); - } - - templates = []; - template1 = { name: null }; - - getAlltemplates() { - this.myhttp.getAllServiceTemplates(this.templateTypeSelected) - .subscribe((data) => { - this.templates = data; - if (this.templateTypeSelected == "Network Service") { - this.templates = data.filter((d) => { - return typeof d.packageInfo.csarName == "string"; - }).map((item) => { - let cName = item.packageInfo.csarName.split("/").reverse()[0]; - return { name: cName, id: item.csarId, packageInfo: item.packageInfo } - }); - } - this.template1 = this.templates[0]; - }, (err) => { - console.log(err); - }) - } - - createshow = false; - createshow2 = false; - listDisplay = false; - createData: Object = {}; - - handleOk(): void { - if (this.templateTypeSelected == "SOTN" || this.templateTypeSelected == "CCVPN") { - this.createData = { - commonParams: { - customer: this.customerSelected, - serviceType: this.serviceTypeSelected2, - templateType: this.templateTypeSelected - }, template: this.template1 - }; - } else if (this.templateTypeSelected == "E2E Service" || this.templateTypeSelected == "Network Service") { - this.createData = { - commonParams: { - customer: this.customerSelected, - serviceType: this.serviceTypeSelected2, - templateType: this.templateTypeSelected - }, - template: this.template1, - orchestrator: this.orchestratorSelected, - isSol005Interface: this.isSol005Interface - }; - } - this.getTemParameters(); - } - - handleCancel(): void { - this.isVisible = false; - this.loadingAnimateShow = false; - } - - temParametersTips = false; - ccvpn_temParametersContent: any; - e2e_ns_temParametersContent: any; - - getTemParameters() { - let chosedtemplates = this.createData["template"]; - let types = this.createData["commonParams"].templateType; - if (types == "E2E Service") { - types = "e2e"; - } else if (types == "Network Service") { - types = "ns"; - } - this.loadingAnimateShow = true; - this.myhttp.getTemplateParameters(types, chosedtemplates) - .subscribe((data) => { - this.loadingAnimateShow = false; - if (data.status == "FAILED") { - this.temParametersTips = true; - this.isVisible = true; - console.log("Template parsing Failed"); - } else { - this.isVisible = false; - this.temParametersTips = false; - if (this.templateTypeSelected == "SOTN" || this.templateTypeSelected == "CCVPN") { - this.ccvpn_temParametersContent = data; - this.createshow = true; - this.listDisplay = true; - } else if (this.templateTypeSelected == "E2E Service" || this.templateTypeSelected == "Network Service") { - this.e2e_ns_temParametersContent = data; - this.createshow2 = true; - this.listDisplay = true; - } - } - }) - } - - //tableData - tableData = []; - pageIndex = 1; - pageSize = 10; - total = 100; - loading = false; - - getTableData() { - this.loading = true; - // Query parameter: customer serviceType Current page number, number of pages per page - let paramsObj = { - customerId: this.customerSelected.id, - serviceType: this.serviceTypeSelected.name, - currentPage: this.pageIndex, - pageSize: this.pageSize - } - this.myhttp.getServicesTableData(paramsObj) - .subscribe((data) => { - this.total = data.body.total; - this.tableData = data.body.tableList.map((item) => { - if (typeof item == "string") { - item = JSON.parse(item); - } - - item["iconMore"] = this.iconMore; - if (item["serviceDomain"] == "Network Service") { - if (item["vnfInfo"]) { - item["childServiceInstances"] = item["vnfInfo"].map((vnf) => { - vnf["serviceDomain"] = "vnf"; - return vnf; - }); - } else if (item["relationship-list"] && item["relationship-list"]["relationship"]) { - item["childServiceInstances"] = item["relationship-list"]["relationship"].filter((relate) => { - return relate["related-to"] == "generic-vnf"; - }).map((vnf) => { - let vnfInfo = { - vnfNsInstanceId: "", - vnfInstanceId: "", - vnfInstanceName: "", - serviceDomain: "vnf" - }; - vnfInfo.vnfNsInstanceId = item["nsInstanceId"] || item["service-instance-id"]; - vnfInfo.vnfInstanceId = vnf["relationship-data"].find((vnfid) => { - return vnfid["relationship-key"] == "generic-vnf.vnf-id" - })["relationship-value"]; - vnfInfo.vnfInstanceName = vnf["related-to-property"].find((vnfname) => { - return vnfname["property-key"] == "generic-vnf.vnf-name" - })["property-value"]; - return vnfInfo; - }) - } - } else { - item["childServiceInstances"] = []; - } - - // - if (item["operationResult"] == "2001") { //operationResult==2001 - item["status"] = "Available"; - item["tips"] = "Available"; - item["statusClass"] = item["operationResult"]; - } - // 2018.12.13 - else if (item["operationResult"] == "2002") { //operationResult==2002 - if (item["operationType"] == "1001" || item["operationType"] == "1002") { - // item["status"] = this.accordingState["operationResult"][item["operationResult"]]; - item["status"] = this.listSortMasters["operationResults"].find((its) => { - return its["sortCode"] == item["operationResult"] && its["language"] == this.language - })["sortValue"]; - item["tips"] = "Unavailable"; - item["statusClass"] = item["operationType"]; - } else if (item["operationType"] != "1001" && item["operationType"] != "1002") { - // item["status"] = this.accordingState["operationResult"][item["operationResult"]]; - item["status"] = this.listSortMasters["operationResults"].find((its) => { - return its["sortCode"] == item["operationResult"] && its["language"] == this.language - })["sortValue"]; - item["tips"] = "Available"; - item["statusClass"] = item["operationType"]; - } - - } - else if (item["operationResult"] == "2003") { //operationResult==2003 - // item["status"] = this.accordingState["operationResult"][item["operationResult"]]; - item["status"] = this.listSortMasters["operationResults"].find((its) => { - return its["sortCode"] == item["operationResult"] && its["language"] == this.language - })["sortValue"]; - item["statusClass"] = item["operationType"]; - if (item["serviceDomain"] == "Network Service") { - let updata = (prodata) => { - item["rate"] = prodata.progress; - item["tips"] = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == item["operationType"] && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + prodata.progress + "%"; - if (item["rate"] > 100) { - item["status"] = prodata.status; - item["tips"] = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == item["operationType"] && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + item["status"]; - } - } - let id = item["nsInstanceId"] || item["service-instance-id"]; - let jobid = item["jobId"] || item["operationId"]; - let operationType = item["operationType"]; - this.queryNsProgress(jobid, id, updata, operationType).then(() => { - item["rate"] = 100; - item["status"] = this.listSortMasters["operationResults"].find((its) => { - return its["sortCode"] == 2001 && its["language"] == this.language - })["sortValue"]; - item["tips"] = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == item["operationType"] && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + item["status"]; - }) - } else { - let updata = (prodata) => { - item["rate"] = prodata.progress || item["rate"]; - item["tips"] = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == item["operationType"] && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + prodata.progress + "%"; - if (item["rate"] > 100) { - item["status"] = prodata.status; - item["tips"] = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == item["operationType"] && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + item["status"]; - } - } - let obj = { - serviceId: item["service-instance-id"], - operationId: item["operationId"], - operationType: item["operationType"] - } - this.queryProgress(obj, updata).then(() => { - item["rate"] = 100; - item["status"] = this.listSortMasters["operationResults"].find((its) => { - return its["sortCode"] == 2001 && its["language"] == this.language - })["sortValue"]; - item["tips"] = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == item["operationType"] && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + item["status"]; - }) - } - } - return item; - }) - this.tableData.map((item, index) => { - if (item.serviceDomain == 'E2E Service') { - if (item.operationResult == 2001) { - this.serviceMunber[0]["Success"] += 1; - } else if (item.operationResult == 2002) { - this.serviceMunber[0]["failed"] += 1; - } else if (item.operationResult == 2003) { - this.serviceMunber[0]["InProgress"] += 1; - } - } - else if (item.serviceDomain == 'Network Service') { - if (item.operationResult == 2001) { - this.serviceMunber[1]["Success"] += 1; - } else if (item.operationResult == 2002) { - this.serviceMunber[1]["failed"] += 1; - } else if (item.operationResult == 2003) { - this.serviceMunber[1]["InProgress"] += 1; - } - } - else if (item.serviceDomain == 'CCVPN') { - if (item.operationResult == 2001) { - this.serviceMunber[2]["Success"] += 1; - } else if (item.operationResult == 2002) { - this.serviceMunber[2]["failed"] += 1; - } else if (item.operationResult == 2003) { - this.serviceMunber[2]["InProgress"] += 1; - } - } - }) - this.loading = false; - }, (err) => { - console.log(err); - this.loading = false; - }) - } - - searchData(reset: boolean = false) { - this.getTableData(); - } - - thisService = {}; //The current service of the operation - e2e_nsData: Object[]; - scaleModelVisible = false; - - scaleService(service) { - this.thisService = service; - this.scaleModelVisible = true; - let paramsObj = { - customerId: this.customerSelected.id, - serviceType: this.serviceTypeSelected.name, - serviceId: service["service-instance-id"] - } - this.myhttp.getE2e_nsData(paramsObj) - .subscribe((data) => { - this.e2e_nsData = data; - }) - } - - scaleOk(templatescalestarting, templateScaleSuccessFaild) { - this.scaleModelVisible = false; - let requestBody = { - "service": { - "serviceInstanceName": this.thisService["service-instance-name"], - "serviceType": this.serviceTypeSelected.name, - "globalSubscriberId": this.customerSelected.id, - "resources": this.e2e_nsData.map((item) => { - return { - "resourceInstanceId": item["netWorkServiceId"], - "scaleType": item["scaleType"], - "scaleNsData": { - "scaleNsByStepsData": { - "aspectId": item["aspectId"], - "numberOfSteps": item["numberOfSteps"], - "scalingDirection": item["scalingDirection"] - } - } - } - }) - } - } - this.scaleE2eService(this.thisService, requestBody, templateScaleSuccessFaild); - this.scaleNotification(templatescalestarting); - } - - scaleCancel() { - this.scaleModelVisible = false; - } - - scaleNotification(template: TemplateRef<{}>): void { - this.notification.template(template); - } - - scaleSuccessNotification(template: TemplateRef<{}>): void { - this.notification.template(template); - } - - //heal - healModelVisible = false; - healActions = []; - nsAdditional = []; - nsParams = { - degreeHealing: "HEAL_RESTORE", - actionsHealing: [], - healScript: "", - additionalParamsforNs: "" - } - vnfVms = []; - vmSelected = {}; - vnfParams = { - vnfInstanceId: "", - cause: "", - additionalParams: { - action: "", - actionvminfo: { - vmid: "", - vduid: "", - vmname: "" - } - } - } - - addActionsHealing() { - this.healActions.push({ value: "" }) - } - - minusActionsHealing(index) { - this.healActions.splice(index, 1); - } - - addNsAdditional() { - this.nsAdditional.push({ key: "", value: "" }) - } - - minusNsAdditional(index) { - this.nsAdditional.splice(index, 1); - } - - healService(service) { - this.thisService = service; - this.healModelVisible = true; - if (service.serviceDomain == "vnf") { - this.vnfParams.vnfInstanceId = service.vnfInstanceId; - this.myhttp.getVnfInfo(service.vnfInstanceId) - .subscribe((data) => { - this.vnfVms = data.vnfVms; - this.vmSelected = this.vnfVms[0]; - }) - } - } - - healOk(templatehealstarting, templatehealSuccessFaild) { - this.healModelVisible = false; - // nsParams - this.nsParams.actionsHealing = this.healActions.map((item) => { - return item.value - }); - let additional = {}; - this.nsAdditional.forEach((item) => { - additional[item.key] = item.value; - }); - this.nsParams.additionalParamsforNs = JSON.stringify(additional); - // vnfParams - this.vnfParams.additionalParams.actionvminfo.vmid = this.vmSelected["vmId"]; - this.vnfParams.additionalParams.actionvminfo.vmname = this.vmSelected["vmName"]; - - let requestBody = this.thisService["serviceDomain"] == "Network Service" ? { healNsData: this.nsParams } : { healVnfData: this.vnfParams }; - this.healNsVnfService(this.thisService, requestBody, templatehealSuccessFaild); - this.healNotification(templatehealstarting); - } - - healCancel() { - this.healModelVisible = false; - } - - healNotification(template: TemplateRef<{}>): void { - this.notification.template(template); - } - - healSuccessNotification(template: TemplateRef<{}>): void { - this.notification.template(template); - } - - // show detail - detailshow = false; - detailshow2 = false; - upDateShow = false; - detailData: Object; - - serviceDetail(service, typeNum) { - service["siteSer"] = []; - service["sdwanSer"] = []; - service["customer"] = this.customerSelected; - service["serviceType"] = this.serviceTypeSelected; - - service.childServiceInstances.forEach((item) => { - if (item.serviceDomain == "SITE") { - service.siteSer.push(item); - } else if (item.serviceDomain == "SDWAN") { - service.sdwanSer.push(item); - } - }) - if (service["serviceDomain"] == 'CCVPN' || service["serviceDomain"] == 'SOTN') { - this.detailshow = true; - if (typeNum == 1) { - this.upDateShow = false; - } else { - this.upDateShow = true; - } - } else if (service["serviceDomain"] == 'E2E Service' || service["serviceDomain"] == 'Network Service') { - this.detailshow2 = true; - } - this.listDisplay = true; - this.detailData = service; - console.log(service); - } - - deleteModelVisible = false; - terminationType = "graceful"; - gracefulTerminationTimeout = 120; - - // delete Model show - deleteModel(service) { - this.thisService = service; - this.deleteModelVisible = true; - } - - deleteOk(templatedeletestarting, templateDeleteSuccessFaild) { - this.deleteModelVisible = false; - this.loadingAnimateShow = true; - if (this.thisService["serviceDomain"] == "Network Service") { - this.deleteNsService(this.thisService, templateDeleteSuccessFaild); - } else { - this.deleteService(this.thisService, templateDeleteSuccessFaild); - } - this.deleteNotification(templatedeletestarting); - } - - deleteCancel() { - this.deleteModelVisible = false; - } - - deleteNotification(template: TemplateRef<{}>): void { - this.notification.template(template); - } - - deleteSuccessNotification(template: TemplateRef<{}>): void { - this.notification.template(template); - } - - createNotification(template: TemplateRef<{}>): void { - this.notification.template(template); - } - - createSuccessNotification(template: TemplateRef<{}>): void { - this.notification.template(template); - } - - //ccvpn sotn createservice - parentServiceInstanceId = ""; - thisCreateService = {}; - - closeCreate(obj, templateCreatestarting, templateCreateSuccessFaild) { - if (!obj) { - this.createshow = false; //close - this.listDisplay = false; //close - return false; - } - this.createshow = false; - this.listDisplay = false; - this.loadingAnimateShow = true; - console.log(obj); - let newData; //Newly created service data for the main table - - let createParams = "?customerId=" + this.customerSelected2.id + - "&serviceType=" + this.serviceTypeSelected2.name + - "&serviceDomain=" + this.templateTypeSelected; - this.createService(obj, createParams, templateCreatestarting, templateCreateSuccessFaild).then((data) => { - console.log(data); - this.loadingAnimateShow = false; - newData = { //Newly created service data in the main form - 'service-instance-id': data["serviceId"], - 'service-instance-name': obj.service.name, - serviceDomain: this.templateTypeSelected, - childServiceInstances: [], - status: "In Progress", - rate: 0, - statusClass: 1001, - tips: "" - }; - this.thisCreateService = newData; - this.tableData = [newData, ...this.tableData]; - this.createNotification(templateCreatestarting); - let updata = (prodata) => { - newData.rate = prodata.progress; - newData.tips = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == newData["statusClass"] && its["language"] == this.language - })["sortValue"] + newData.rate + "%"; - if (newData["rate"] > 100) { - newData["status"] = prodata.status; - newData.tips = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == newData["statusClass"] && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + newData["status"]; - } - }; - let queryParams = { serviceId: data["serviceId"], operationId: data["operationId"], operationType: "1001" }; - return this.queryProgress(queryParams, updata); - }).then((data) => { - console.log(data); - newData.rate = 100; - newData.status = "Successful"; - this.createSuccessNotification(templateCreateSuccessFaild); - newData.tips = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == newData["statusClass"] && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { - return its["sortCode"] == 2001 && its["language"] == this.language - })["sortValue"]; - let hasUndone = this.tableData.some((item) => { - return item.rate < 100; - }); - if (!hasUndone) { - setTimeout(() => { - this.getTableData(); - }, 1000) - } - }) - } - - e2eCloseCreate(obj, templateCreatestarting, templateCreateSuccessFaild) { - if (!obj) { - this.createshow2 = false; // - this.listDisplay = false; // - return false; - } - this.createshow2 = false; // - this.listDisplay = false; // - this.loadingAnimateShow = true; - console.log(obj); - let newData; // - let createParams = "?customerId=" + this.customerSelected.id + - "&serviceType=" + this.serviceTypeSelected2.name + - "&serviceDomain=" + this.templateTypeSelected + - "&parentServiceInstanceId=" + - "&uuid=" + obj.service.serviceUuid + - "&invariantUuuid=" + obj.service.serviceInvariantUuid; - this.createService(obj, createParams, templateCreatestarting, templateCreateSuccessFaild).then((data) => { - console.log(data); - this.loadingAnimateShow = false; - newData = { // - 'service-instance-id': data["serviceId"], - 'service-instance-name': obj.service.name, - serviceDomain: this.templateTypeSelected, - childServiceInstances: [], - status: "In Progress", - statusClass: 1001, - rate: 0, - tips: "" - } - this.thisCreateService = newData; - this.tableData = [newData, ...this.tableData]; - this.createNotification(templateCreatestarting); - let updata = (prodata) => { - newData.rate = prodata.progress; - newData.tips = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == newData["statusClass"] && its["language"] == this.language - })["sortValue"] + newData.rate + "%"; - if (newData["rate"] > 100) { - newData["status"] = prodata.status; - newData.tips = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == newData["statusClass"] && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + newData["status"]; - } - } - let queryParams = { serviceId: data["serviceId"], operationId: data["operationId"], operationType: "1001" }; - return this.queryProgress(queryParams, updata); - }).then((data) => { - console.log(data); - newData.rate = 100; - newData.status = "Successful"; - this.createSuccessNotification(templateCreateSuccessFaild); - newData.tips = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == newData["statusClass"] && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { - return its["sortCode"] == 2001 && its["language"] == this.language - })["sortValue"]; - let hasUndone = this.tableData.some((item) => { - return item.rate < 100; - }) - if (!hasUndone) { - setTimeout(() => { - this.getTableData(); - }, 1000) - } - }) - - } - - nsCloseCreate(obj, templateCreatestarting, templateCreateSuccessFaild) { - if (!obj) { - this.createshow2 = false; // - this.listDisplay = false; // - return false; - } - this.createshow2 = false; // - this.listDisplay = false; // - this.loadingAnimateShow = true; - console.log(obj); - let newData; // - // step1 - this.myhttp.nsCreateInstance(obj.step1) - .subscribe((data) => { - // console.log(data); - this.loadingAnimateShow = false; - newData = { // - 'service-instance-id': data.nsInstanceId, - 'service-instance-name': obj.step1.nsName, - serviceDomain: this.templateTypeSelected, - childServiceInstances: [], - status: "In Progress", - statusClass: 1001, - rate: 0, - tips: "" - } - this.thisCreateService = newData; - this.tableData = [newData, ...this.tableData]; - this.createNotification(templateCreatestarting); - if (data.status == "FAILED") { - console.log("create ns service Failed :" + JSON.stringify(data)); - newData.status = "Failed"; - this.createSuccessNotification(templateCreateSuccessFaild); - return false; - } - let createParams = "?ns_instance_id=" + data.nsInstanceId + - "&customerId=" + this.customerSelected2.id + - "&serviceType=" + this.serviceTypeSelected2.name + - "&serviceDomain=" + this.templateTypeSelected + - "&parentServiceInstanceId="; - // step2 - this.createNsService(createParams, obj.step2).then((jobid) => { - if (jobid == "Failed") { - newData.status = "Failed"; - console.log(jobid, "ns two jobid") - this.thisCreateService = newData; - console.log(this.thisCreateService) - this.createSuccessNotification(templateCreateSuccessFaild); - newData.tips = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == newData["statusClass"] && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { - return its["sortCode"] == 2002 && its["language"] == this.language - })["sortValue"]; - return false; - } - let operationType = "1001"; - let updata = (prodata) => { - newData.rate = prodata.progress; - newData.tips = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == newData["statusClass"] && its["language"] == this.language - })["sortValue"] + newData.rate + "%"; - if (newData["rate"] > 100) { - newData["status"] = prodata.status; - newData.tips = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == newData["statusClass"] && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + newData["status"]; - } - } - - return this.queryNsProgress(jobid, newData["service-instance-id"], updata, operationType); - }).then((data) => { - console.log(data); - newData.rate = 100; - newData.status = "Successful"; - this.thisCreateService = newData; - console.log(this.thisCreateService) - this.createSuccessNotification(templateCreateSuccessFaild); - newData.tips = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == newData["statusClass"] && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { - return its["sortCode"] == 2001 && its["language"] == this.language - })["sortValue"]; - let hasUndone = this.tableData.some((item) => { - return item.rate < 100; - }) - if (!hasUndone) { - setTimeout(() => { - this.getTableData(); - }, 1000) - } - }) - }) - } - - createService(requestBody, createParams, templateCreatestarting, templateCreateSuccessFaild) { - let mypromise = new Promise((res, rej) => { - this.myhttp.createInstance(requestBody, createParams) - .subscribe((data) => { - if (data.status == "FAILED") { - this.loadingAnimateShow = false; - res("Failed"); - console.log("create e2e service Failed :" + JSON.stringify(data)); - return false; - } - res(data.service); - }) - }) - return mypromise; - } - - createNsService(id, obj) { - let mypromise = new Promise((res, rej) => { - this.myhttp.nsCreateInstance2(id, obj) - .subscribe((data) => { - if (data.status == "FAILED") { - this.loadingAnimateShow = false; - console.log("instantiate ns service Failed :" + JSON.stringify(data)); - res("Failed"); - return false; - } - res(data.jobId); - }) - }) - return mypromise; - } - - scaleE2eService(service, requestBody, templateScaleSuccessFaild) { - let id = service["service-instance-id"]; - service.rate = 0; - service.status = "In Progress"; - service.statusClass = "1003"; - service.tips = ""; - this.myhttp.scaleE2eService(id, requestBody) - .subscribe((data) => { - if (data.status == "FAILED") { - console.log("scale E2e service Failed :" + JSON.stringify(data)); - service.status = "Failed"; - service.tips = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == service.statusClass && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { - return its["sortCode"] == 2002 && its["language"] == this.language - })["sortValue"]; - this.scaleSuccessNotification(templateScaleSuccessFaild); - return false; - } - let obj = { - serviceId: id, - operationId: data.operationId, - operationType: "1003" - } - let updata = (prodata) => { - service.rate = prodata.progress; - service.tips = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == service.statusClass && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + service["rate"] + "%"; - if (service["rate"] > 100) { - service["status"] = prodata.status; - service.tips = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == service["statusClass"] && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + service["status"]; - } - } - this.queryProgress(obj, updata).then(() => { - service.rate = 100; - service.status = "Successful"; - service.tips = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == service["statusClass"] && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { - return its["sortCode"] == 2001 && its["language"] == this.language - })["sortValue"]; - this.scaleSuccessNotification(templateScaleSuccessFaild); - }) - }) - } - - healNsVnfService(service, requestBody, templatehealSuccessFaild) { - console.log(service); - service.rate = 0; - service.status = "In Progress"; - service.tips = ""; - service.statusClass = "1004"; - let id = service.nsInstanceId || service["service-instance-id"] || service["vnfNsInstanceId"]; - this.myhttp.healNsService(id, requestBody) - .subscribe((data) => { - if (data.status == "FAILED") { - console.log("heal nsvnf service Failed :" + JSON.stringify(data)); - service.status = "Failed"; - service.tips = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == service.statusClass && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { - return its["sortCode"] == 2002 && its["language"] == this.language - })["sortValue"]; - this.healSuccessNotification(templatehealSuccessFaild); - return false; - } - let jobid = data.jobId; - let operationType = "1004"; - let updata = (prodata) => { - service.rate = prodata.progress; - service.tips = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == service.statusClass && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + service.rate + "%"; - console.log(service.rate) - if (service["rate"] > 100) { - service["status"] = prodata.status; - service.tips = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == service.statusClass && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + service["status"]; - } - } - this.queryNsProgress(jobid, null, updata, operationType).then((data1) => { - console.log(data1); - service.rate = 100; - service.status = "Successful"; - service.tips = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == service.statusClass && its["language"] == this.language - })["sortValue"] + this.listSortMasters["operationResults"].find((its) => { - return its["sortCode"] == 2001 && its["language"] == this.language - })["sortValue"]; - this.healSuccessNotification(templatehealSuccessFaild); - }); - }) - } - - updateCcvpnNotification(template: TemplateRef<{}>): void { - this.notification.template(template); - } - - updateCcvpnSuccessNotification(template: TemplateRef<{}>): void { - this.notification.template(template); - } - - closeCCVPNUpdate(obj, templateUpdateSuccessFaild) { - console.log(obj); - this.detailshow = false; - this.listDisplay = false; - this.upDateShow = false; - this.detailData["rate"] = 0; - this.detailData["status"] = "In Progress"; - this.detailData['tips'] = ""; - this.detailData["statusClass"] = "1005"; - let id = this.detailData["service-instance-id"]; - this.myhttp.updateccvpn(id, obj) - .subscribe((data) => { - if (data.status == "FAILED") { - console.log("scale E2e service Failed :" + JSON.stringify(data)); - this.detailData["status"] = "Failed"; - this.detailData["tips"] = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == this.detailData["statusClass"] && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { - return its["sortCode"] == 2002 && its["language"] == this.language - })["sortValue"]; - this.updateCcvpnSuccessNotification(templateUpdateSuccessFaild); - return false; - } - let obj = { - serviceId: id, - operationId: data.operationId - } - let updata = (prodata) => { - this.detailData["rate"] = prodata.progress; - this.detailData["tips"] = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == this.detailData["statusClass"] && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + this.detailData["rate"] + "%"; - if (this.detailData["rate"] > 100) { - this.detailData["status"] = prodata.status; - this.detailData["tips"] = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == this.detailData["statusClass"] && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + this.detailData["status"]; - } - }; - this.queryProgress(obj, updata).then(() => { - this.detailData["rate"] = 100; - this.detailData["status"] = "Successful"; - this.detailData["tips"] = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == this.detailData["statusClass"] && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { - return its["sortCode"] == 2001 && its["language"] == this.language - })["sortValue"]; - this.updateCcvpnSuccessNotification(templateUpdateSuccessFaild); - }) - }) - } - - deleteService(service, templateDeleteSuccessFaild) { - let allprogress = {}; // - let querypros = []; // - service.rate = 0; - service.status = "In Progress"; - service.tips = ""; - service.statusClass = "1002"; - service["childServiceInstances"].push({ "service-instance-id": service["service-instance-id"] }); - let deletePros = service["childServiceInstances"].map((item) => { - let params = { - globalSubscriberId: this.customerSelected.id, - serviceType: this.serviceTypeSelected, - serviceInstanceId: item["service-instance-id"] - } - return new Promise((res, rej) => { - this.myhttp.deleteInstance(params) - .subscribe((data) => { - this.loadingAnimateShow = false; - if (data.status == "FAILED") { - console.log("delete service Failed :" + JSON.stringify(data)); - service.status = "Failed"; - service.tips = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == service.statusClass && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { - return its["sortCode"] == 2002 && its["language"] == this.language - })["sortValue"]; - return false; - } - let obj = { - serviceId: params.serviceInstanceId, - operationId: data.operationId, - operationType: "1002" - } - let updata = (prodata) => { - allprogress[prodata.operationId] = prodata.progress; - let average = ((arr) => { - return eval(arr.join("+")) / arr.length - })(Object.values(allprogress)); - service["rate"] = average; - service.tips = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == service.statusClass && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + service["rate"] + "%"; - if (service["rate"] > 100) { - service["status"] = prodata.status; - service.tips = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == service.statusClass && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + service["status"]; - } - }; - querypros.push(this.queryProgress(obj, updata)); - res(); - }) - }) - }); - Promise.all(deletePros).then(() => { - Promise.all(querypros).then((data) => { - console.log(data); - service.rate = 100; - service.status = "Successful"; - service.tips = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == service.statusClass && its["language"] == this.language - })["sortValue"] + this.listSortMasters["operationResults"].find((its) => { - return its["sortCode"] == 2001 && its["language"] == this.language - })["sortValue"]; - this.deleteSuccessNotification(templateDeleteSuccessFaild); - let hasUndone = this.tableData.some((item) => { - return item.rate < 100; - }) - if (!hasUndone) { - setTimeout(() => { - this.getTableData(); - }, 1000) - } - }) - }) - } - - deleteNsService(service, templateDeleteSuccessFaild) { - service.rate = 0; - service.status = "In Progress"; - service.tips = ""; - service.statusClass = "1002"; - let id = service.nsInstanceId || service["service-instance-id"]; - let operationType = "1002"; - let requestBody = { - terminationType: this.terminationType, - gracefulTerminationTimeout: this.gracefulTerminationTimeout - } - this.stopNsService(id, requestBody).then((jobid) => { - if (jobid == "Failed") { - service.status = "Failed"; - this.deleteSuccessNotification(templateDeleteSuccessFaild); - service.tips = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == service.statusClass && its["language"] == this.language - })["sortValue"] + this.listSortMasters["operationResults"].find((its) => { - return its["sortCode"] == 2002 && its["language"] == this.language - })["sortValue"]; - return false; - } - let updata = (prodata) => { - service.rate = prodata.progress; - service.tips = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == service.statusClass && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + service.rate + "%"; - if (service["rate"] > 100) { - service["status"] = prodata.status; - service.tips = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == service.statusClass && its["language"] == this.language - })["sortValue"] + service["status"]; - } - } - return this.queryNsProgress(jobid, null, updata, operationType); - }).then(() => { - this.myhttp.nsDeleteInstance(id) - .subscribe((data) => { - console.log(data); - service.rate = 100; - service.status = "Successful"; - service.tips = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == service.statusClass && its["language"] == this.language - })["sortValue"] + this.listSortMasters["operationResults"].find((its) => { - return its["sortCode"] == 2001 && its["language"] == this.language - })["sortValue"]; - this.deleteSuccessNotification(templateDeleteSuccessFaild); - if (data.status == "FAILED") { - console.log("delete ns service Failed :" + JSON.stringify(data)); - service.status = "Failed"; - service.tips = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == service.statusClass && its["language"] == this.language - })["sortValue"] + this.listSortMasters["operationResults"].find((its) => { - return its["sortCode"] == 2002 && its["language"] == this.language - })["sortValue"]; - this.deleteSuccessNotification(templateDeleteSuccessFaild); - return false; - } - console.log(service, "deleteservice"); - console.log(this.thisService, "thisService"); - let hasUndone = this.tableData.some((item) => { - return item.rate < 100; - }) - if (!hasUndone) { - setTimeout(() => { - this.getTableData(); - }, 1000) - } - }) - }) - } - - stopNsService(id, obj) { - let mypromise = new Promise((res, rej) => { - this.myhttp.stopNsService(id, obj) - .subscribe((data) => { - this.loadingAnimateShow = false; - if (data.status == "FAILED") { - console.log("stop ns service Failed :" + JSON.stringify(data)); - res("Failed"); - return false; - } - res(data.jobId); - }) - }) - return mypromise; - } - - queryProgress(obj, callback) { - let mypromise = new Promise((res, rej) => { - let errorNums = 180; - let requery = () => { - this.myhttp.getProgress(obj) - .subscribe((data) => { - if (data.status == "FAILED") { - callback({ progress: 255, status: "Failed" }); - return false; - } - if (data.operationStatus == null || data.operationStatus.progress == undefined) { - // console.log(data); - errorNums--; - if (errorNums == 0) { - callback({ progress: 255, status: "time over" }); - return false; - } - setTimeout(() => { - requery(); - }, 10000) - return false; - } - if (data.operationStatus.progress > 100) { - callback({ progress: 255, status: "time over" }); - return false; - } - if (data.operationStatus.progress < 100) { - callback(data.operationStatus); - setTimeout(() => { - requery(); - }, 5000) - } else { - res(data.operationStatus); - } - }) - } - requery(); - }) - return mypromise; - } - - queryNsProgress(jobid, id, callback, operationType) { - let mypromise = new Promise((res, rej) => { - - let errorNums = 180; - let requery = () => { - this.myhttp.getNsProgress(jobid, id, operationType) - .subscribe((data) => { - if (data.status == "FAILED") { - callback({ progress: 255, status: "Failed" }); - return false; - } - if (data.responseDescriptor == null || data.responseDescriptor.progress == undefined) { - errorNums--; - if (errorNums == 0) { - callback({ progress: 255, status: "time over" }); - return false; - } - setTimeout(() => { - requery(); - }, 10000) - return false; - } - if (data.responseDescriptor.progress > 100 && data.responseDescriptor.status == "error") { - callback({ progress: 255, status: data.responseDescriptor.statusDescription }); - return false; - } - if (data.responseDescriptor.progress < 100) { - callback(data.responseDescriptor); - setTimeout(() => { - requery(); - }, 5000) - } else { - res(data); - } - }) - - }; - requery(); - }); - return mypromise; - } - -} diff --git a/usecaseui-portal/src/app/services/services.component.html b/usecaseui-portal/src/app/services/services.component.html deleted file mode 100644 index 10142833..00000000 --- a/usecaseui-portal/src/app/services/services.component.html +++ /dev/null @@ -1,18 +0,0 @@ - -

    - services works! -

    diff --git a/usecaseui-portal/src/app/services/services.component.less b/usecaseui-portal/src/app/services/services.component.less deleted file mode 100644 index e69de29b..00000000 diff --git a/usecaseui-portal/src/app/services/services.component.spec.ts b/usecaseui-portal/src/app/services/services.component.spec.ts deleted file mode 100644 index 2e76b9f9..00000000 --- a/usecaseui-portal/src/app/services/services.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ServicesComponent } from './services.component'; - -describe('ServicesComponent', () => { - let component: ServicesComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ ServicesComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(ServicesComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/usecaseui-portal/src/app/services/services.component.ts b/usecaseui-portal/src/app/services/services.component.ts deleted file mode 100644 index eec235b4..00000000 --- a/usecaseui-portal/src/app/services/services.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-services', - templateUrl: './services.component.html', - styleUrls: ['./services.component.less'] -}) -export class ServicesComponent implements OnInit { - - constructor() { } - - ngOnInit() { - } - -} diff --git a/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.html b/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.html new file mode 100644 index 00000000..7c1eee6b --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.html @@ -0,0 +1,22 @@ + +
    + Bar Chart +
    diff --git a/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.less b/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.less new file mode 100644 index 00000000..e69de29b diff --git a/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.spec.ts b/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.spec.ts new file mode 100644 index 00000000..d979ffb6 --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { BarComponent } from './bar.component'; + +describe('BarComponent', () => { + let component: BarComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ BarComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(BarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.ts b/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.ts new file mode 100644 index 00000000..609ce3ee --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.ts @@ -0,0 +1,71 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { Component, OnInit, Input } from '@angular/core'; +import { SimpleChanges } from '@angular/core/src/metadata/lifecycle_hooks'; + +@Component({ + selector: 'app-bar', + templateUrl: './bar.component.html', + styleUrls: ['./bar.component.less'] +}) +export class BarComponent implements OnInit { + + // chart Data + @Input() chartData; + // init Data + @Input() initData; + + constructor() { } + + ngOnInit() { + this.initOpts = { + renderer: 'canvas', + height: this.initData.height, + width: this.initData.width, + + }; + this.barOption = { + tooltip: this.initData.option.tooltip, + grid: this.initData.option.grid, + xAxis: this.initData.option.xAxis, + yAxis: this.initData.option.yAxis, + series: this.initData.option.series + } + } + + ngOnChanges(changes: SimpleChanges) { + // Execute when there is an instance, which is equivalent to not executing the following method for the first time. + if (this.chartIntance) { + this.chartDataChange() + } + } + // Initialize the height of the graphic + initOpts: any; + // Line chart configuration + barOption: any; + // Instance object + chartIntance: any; + // Data change + updateOption: any; + chartDataChange() { + this.updateOption = this.chartData; + console.log(this.initData.customer) + } + chartInit(chart) { + this.chartIntance = chart; + } + +} diff --git a/usecaseui-portal/src/app/shared/components/charts/line/line.component.html b/usecaseui-portal/src/app/shared/components/charts/line/line.component.html new file mode 100644 index 00000000..e032eb27 --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/charts/line/line.component.html @@ -0,0 +1,22 @@ + +
    + Line Chart +
    diff --git a/usecaseui-portal/src/app/shared/components/charts/line/line.component.less b/usecaseui-portal/src/app/shared/components/charts/line/line.component.less new file mode 100644 index 00000000..e69de29b diff --git a/usecaseui-portal/src/app/shared/components/charts/line/line.component.spec.ts b/usecaseui-portal/src/app/shared/components/charts/line/line.component.spec.ts new file mode 100644 index 00000000..afe70654 --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/charts/line/line.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LineComponent } from './line.component'; + +describe('LineComponent', () => { + let component: LineComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ LineComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(LineComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/shared/components/charts/line/line.component.ts b/usecaseui-portal/src/app/shared/components/charts/line/line.component.ts new file mode 100644 index 00000000..25881699 --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/charts/line/line.component.ts @@ -0,0 +1,105 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { Component, OnInit, Input } from '@angular/core'; +import { SimpleChanges } from '@angular/core/src/metadata/lifecycle_hooks'; + +@Component({ + selector: 'app-line', + templateUrl: './line.component.html', + styleUrls: ['./line.component.less'] +}) +export class LineComponent implements OnInit { + // chart Data + @Input() chartData; + // init Data + @Input() initData; + + constructor() { } + + ngOnInit() { + this.initOpts = { + renderer: 'canvas', + height: this.initData.height, + width: this.initData.width + }; + this.lineOption ={ + tooltip : this.initData.option.tooltip, + icon:'circle', + legend: this.initData.option.legend, + dataZoom: this.initData.option.dataZoom, + grid: { + left: '0%', + right: '3%', + top: '10%', + bottom: '18%', + containLabel: true + }, + xAxis: { + axisTick: { + show: false, + }, + axisLine:{ + show: false + }, + axisLabel:{ + color:"#3C4F8C" + }, + data: this.initData.option.xAxis.data + }, + yAxis: { + axisTick: { + show: false, + }, + axisLine:{ + show: false + }, + axisLabel:{ + color:"#3C4F8C" + }, + splitLine:{ + lineStyle:{ + type:"dashed", + } + } + }, + series : this.initData.option.series + } + } + + ngOnChanges(changes:SimpleChanges){ + // Execute when there is an instance, which is equivalent to not executing the following method for the first time. + if(this.chartIntance){ + this.chartDataChange() + } + } + // Initialize the height of the graphic + initOpts:any; + // Line chart configuration + lineOption:any; + // Instance object + chartIntance:any; + // Data change + updateOption:any; + chartDataChange(){ + this.updateOption = this.chartData; + } + chartInit(chart){ + this.chartIntance = chart; + } + + + +} diff --git a/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.html b/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.html new file mode 100644 index 00000000..d063f22a --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.html @@ -0,0 +1,24 @@ + +
    + Pie Chart +
    \ No newline at end of file diff --git a/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.less b/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.less new file mode 100644 index 00000000..e69de29b diff --git a/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.spec.ts b/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.spec.ts new file mode 100644 index 00000000..528da25c --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PieComponent } from './pie.component'; + +describe('PieComponent', () => { + let component: PieComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PieComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PieComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.ts b/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.ts new file mode 100644 index 00000000..dc5c80a0 --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.ts @@ -0,0 +1,114 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { Component, OnInit, Input } from '@angular/core'; +import { SimpleChanges } from '@angular/core/src/metadata/lifecycle_hooks'; + +@Component({ + selector: 'app-pie', + templateUrl: './pie.component.html', + styleUrls: ['./pie.component.less'] +}) +export class PieComponent implements OnInit { + // chart Data + @Input() chartData; + // init Data + @Input() initData; + + constructor() { } + + ngOnInit() { + this.initOpts = { + renderer: 'canvas', + height: this.initData.height + }; + this.pieOption = { + backgroundColor:this.initData.option.backgroundColor, + legend: this.initData.option.legend, + color:this.initData.option.color, + tooltip: this.initData.option.tooltip || '', + series : [ + { + name: this.initData.option.series[0].name, + type: 'pie', + radius : this.initData.option.series[0].radius, + center:this.initData.option.series[0].center, + legendHoverLink: false, + hoverOffset: 3, + avoidLabelOverlap: false, + // minAngle:1, + label: this.initData.option.series[0].label, + data:[], + itemStyle: this.initData.option.series[0].itemStyle + } + ] + } + } + + ngOnChanges(changes:SimpleChanges){ + + // Execute when there is an instance, which is equivalent to not executing the following method for the first time. + if(this.chartIntance){ + this.chartDataChange() + } + } + + // Initialize the height of the graphic + initOpts:any; + // Alarm pie chart + pieOption:any; + // Instance object + chartIntance:any; + // Data change + updateOption:any; + chartDataChange(){ + this.updateOption = this.chartData; + // Wait until the updateOption is finished and then execute + this.chartIntance.on('finished',()=>{ + this.chartIntance.dispatchAction({ + type:'highlight', + seriesIndex: 0, + dataIndex:0 + }) + //Since all view changes are rendered, this event is logged out after the update + this.chartIntance.off('finished') + }) + } + + chartInit(chart){ + this.chartIntance = chart; + } + + pieMouseOver(e){ + this.chartIntance.dispatchAction({ + type:'downplay' + }) + this.chartIntance.dispatchAction({ + type:'highlight', + seriesIndex: 0, + dataIndex:e.dataIndex + }) + } + + pieMouseOut(e){ + this.chartIntance.dispatchAction({ + type:'highlight', + seriesIndex: 0, + dataIndex:e.dataIndex + }) + } + + +} diff --git a/usecaseui-portal/src/app/shared/components/customer/customer.component.html b/usecaseui-portal/src/app/shared/components/customer/customer.component.html new file mode 100644 index 00000000..08a23935 --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/customer/customer.component.html @@ -0,0 +1,144 @@ + +
    +
    +
    +

    {{"i18nTextDefine_Instance_Count_of_Customer" | translate}}

    + +
    No + Service Instances
    + +
    +
    +

    {{"i18nTextDefine_Instance_Count_of_ServiceType" | translate}}

    + +
    + customerName + {{this.serviceInit["customer"]}} +
    +
    +
    +
    +
    +
    + {{"i18nTextDefine_Customer" | translate}} + +
    +
    +
    +
    + + +
    +
    +
      +
    • + + {{item.name}} + +
      • +
    +
    +
    +
    +
    +
    +
    + {{"i18nTextDefine_ServiceType" | translate}} + +
    +
    +
    +
    + + +
    +
    +
    +
    +
      +
    • + {{item.type}} + +
      • +
    +
    +
    +
    +
    + + +

    *  {{"i18nTextDefine_Input_Sure_deleteCustomer" | translate}}

    +
    +

    {{"i18nTextDefine_CustomerName" | translate}} :

    +
    {{thisdeleteCustomer["name"]}}
    +
    +
    +

    {{"i18nTextDefine_CustomerID" | translate}} :

    +
    {{thisdeleteCustomer["id"]}}
    +
    +     + +

    *  {{"i18nTextDefine_Input_Sure_deleteServiceType" | translate}}

    +
    +

    {{"i18nTextDefine_CustomerName" | translate}} :

    +
    {{selectCustomer.name}}
    +
    +
    +

    {{"i18nTextDefine_CustomerID" | translate}} :

    +
    {{selectCustomer.id}}
    +
    +
    +

    {{"i18nTextDefine_ServiceType" | translate}} :

    +
    {{thisdeleteServiceType["type"]}}
    +
    +     + + +
    +
    + + {{notificationAttributes.status}} + +
    + {{"i18nTextDefine_"+notificationAttributes.title | translate}}  + {{"i18nTextDefine_"+notificationAttributes.action | translate}}  {{"i18nTextDefine_"+notificationAttributes.status | translate}} +
    +
    +
    +

    {{"i18nTextDefine_"+notificationAttributes.title | translate}}:

    + {{ notificationAttributes.name }} +
    +
    +
    {{"i18nTextDefine_Close" | translate}}
    +
    +
    +     +
    \ No newline at end of file diff --git a/usecaseui-portal/src/app/shared/components/customer/customer.component.less b/usecaseui-portal/src/app/shared/components/customer/customer.component.less new file mode 100644 index 00000000..7d329230 --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/customer/customer.component.less @@ -0,0 +1,254 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.content { + display: flex; + + width: 100%; + height: 100%; + i.anticon { + cursor: pointer; + font-size: 18px; + padding: 2px; + &:hover{ + color: #0DA9E2; + } + } + li.active{ + &:hover{ + cursor: pointer; + color: #3C4F8C; + // background:linear-gradient(to right, #E5F6FF, #CFEEFA) + background-color: #e6f7ff; + } + } + .customer { + height: 100%; + overflow: hidden; + width: 32%; + margin-right: 1.5%; + border-radius: 5px; + background-color: #fff; + box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06); + display: inline-block; + vertical-align: top; + .customer_title { + line-height: 3.5em; + //height: 5%; + width: 100%; + border-bottom: 1px #07A9E1 solid; + .customers { + padding: 0 20px; + span { + color: #0DA9E2; + font-family:"ArialMT"; + } + img { + width: 30px; + height: 30px; + float: right; + margin-top: 7px; + } + } + } + .customer_detail { + height: 95%; + width: 100%; + overflow: auto; + border-top: 1px #07A9E1 solid; + .customer_add { + line-height: 3.5; + height: 50px; + width: 100%; + padding: 0 20px; + background-color: #F4F5F8; + .customer_name { + width: 52%; + font-size: 12px; + color: #CCCCCC; + font-family: ArialMT; + border-color: #3F9CFF; + } + .customer_addbut { + float: right; + margin-top: 9px; + width: 28%; + background-color: #0DA9E2; + } + } + .customer_list { + .active { + background:linear-gradient(to right, #E5F6FF, #CFEEFA); + color: #3C4F8C; + } + li { + display:flex; + align-items: center; + padding: 0 20px; + height: 50px; + line-height: 3.5; + width: 100%; + cursor: pointer; + color: rgba(60,79,140,0.5); + img { + width: 30px; + height: 30px; + } + span { + width: 70%; + padding-left: 10%; + display: inline-block; + } + } + } + } + + } + .services_type { + overflow: hidden; + height: 100%; + border-radius: 5px; + width: 32%; + background-color: #fff; + box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06); + display: inline-block; + vertical-align: top; + .services_type_title { + line-height: 3.5em; + //height: 5%; + width: 100%; + border-bottom: 1px #07A9E1 solid; + .servicess { + padding: 0 20px; + span { + color: #0DA9E2; + font-family:"ArialMT"; + } + img { + width: 40px; + height:40px; + float: right; + margin-right: -10px; + margin-top: 5px; + } + } + } + .services_type_detail { + height: 95%; + width: 100%; + overflow: auto; + border-top: 1px #07A9E1 solid; + .services_add { + line-height: 3.5; + height: 50px; + width: 100%; + padding: 0 20px; + background-color: #F4F5F8; + .services_name { + width: 52%; + font-size: 12px; + color: #CCCCCC; + font-family: ArialMT; + border-color: #3F9CFF; + } + .services_addbut { + float: right; + margin-top: 5px; + width: 28%; + clear: both; + background-color: #0DA9E2; + } + } + + .services_list { + background:linear-gradient(to right, #E5F6FF, #CFEEFA); + height: 100%; + .border_size{ + position: absolute; + margin-left: -8px; + width: 0; + height: 0; + border-top: 24px solid transparent; + border-bottom: 24px solid transparent; + border-right: 10px solid #E5F6FF; + } + li { + height: 50px; + line-height: 50px; + width: 100%; + vertical-align: middle; + border-bottom: 2px #FFFFFF dashed; + position: relative; + color: #3C4F8C; + i { + display: inline-block; + vertical-align: middle; + position: absolute; + width: 48px; + height: 48px; + top: 0; + right: -16px; + line-height: 46px; + } + } + } + + } + } + .chearts { + display: inline-block; + width: 32%; + margin-right: 1.5%; + vertical-align: top; + height: 100%; + >div{ + padding: 20px 20px; + } + .Cu { + height: 48%; + width: 100%; + margin-bottom: 7%; + margin-right: 2.5%; + border-radius: 5px; + background-color: #fff; + box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06); + p { + color :#0DA9E2; + font-family:"ArialMT"; + } + .legend { + height: 10px; + width: 10px; + display: inline-block; + background: linear-gradient(to right,#7DCEFB, #0DA9E2); + border-radius: 50%; + margin: 15px 4px 0 43%; + } + } + .type { + height: 48%; + width: 100%; + margin-right: 2.5%; + border-radius: 5px; + background-color: #fff; + box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06); + p { + color :#0DA9E2; + font-family:"ArialMT"; + + } + } + } +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/shared/components/customer/customer.component.spec.ts b/usecaseui-portal/src/app/shared/components/customer/customer.component.spec.ts new file mode 100644 index 00000000..f185e7a7 --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/customer/customer.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CustomerComponent } from './customer.component'; + +describe('CustomerComponent', () => { + let component: CustomerComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ CustomerComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CustomerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/shared/components/customer/customer.component.ts b/usecaseui-portal/src/app/shared/components/customer/customer.component.ts new file mode 100644 index 00000000..a0cf8338 --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/customer/customer.component.ts @@ -0,0 +1,552 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { Component, OnInit, TemplateRef } from '@angular/core'; +import { ManagemencsService } from '../../../core/services/managemencs.service'; +import { NzNotificationService } from 'ng-zorro-antd'; +@Component({ + selector: 'app-customer', + templateUrl: './customer.component.html', + styleUrls: ['./customer.component.less'] +}) +export class CustomerComponent implements OnInit { + public chose = ''; + + constructor( + private managemencs: ManagemencsService, + private notification: NzNotificationService + ) { + } + + ngOnInit() { + this.getAllCustomers(); + } + + AllCustomersdata = []; + AllServiceTypes = []; + customerber = []; + // Get all customers + active; + selectCustomer = { + name: null, + id: null + }; + addNewCustomer = null; + addNewServiceType = null; + deleteCustomerModelVisible = false; + deleteServiceTypeModelVisible = false; + //2019.08.14 add + notificationAttributes = { + "title": "Customer", + "imgPath": "../../../../assets/images/execute-inproess.png", + "action": "Create", + "status": "InProgress", + "name": "" + }; + notificationModelShow(template: TemplateRef<{}>): void { + console.log(this.notificationAttributes, "notificationModelShow show"); + this.notification.template(template); + } + notificationSuccess(notificationModel) { + this.notificationAttributes.imgPath = "../../../../assets/images/execute-success.png"; + this.notificationAttributes.status = "Success"; + this.notificationModelShow(notificationModel); + } + notificationFailed(notificationModel) { + this.notificationAttributes.imgPath = "../../../../assets/images/execute-faild.png"; + this.notificationAttributes.status = "Failed"; + this.notificationModelShow(notificationModel); + } + getAllCustomers() { + this.managemencs.getAllCustomers().subscribe((data) => { + this.AllCustomersdata = data.map((item) => { + return { name: item["subscriber-name"], id: item["global-customer-id"] } + }); + this.active = this.selectCustomer = this.AllCustomersdata[0]; + this.serviceInit["customer"] = this.AllCustomersdata[0].name; + this.getCustomersPie(); + this.getServiceTypes(this.active); + this.getCustomersColumn(this.active); + }) + + } + + // Get all servicetype + getServiceTypes(item) { + this.managemencs.getServiceTypes(item).subscribe((data) => { + this.AllServiceTypes = data.map((item) => { + return { type: item["service-type"], id: item["global-customer-id"] } + }); + }) + } + + // Switch user data + choseCustomer(index, item) { + this.chose = index; + this.selectCustomer = item; + this.serviceInit["customer"] = this.selectCustomer.name; + this.getServiceTypes(item); + this.getCustomersColumn(item); + } + + customeradd = false; + servicesadd = false; + //Customer pie + CUChartData: Object; + CUChartInit: Object = { + height: 200, + option: { + color: ["#F2F6FD"], + series: [{ + type: 'pie', + name: "customer", + radius: '90%', + center: ['50%', '50%'], + data: [], + label: { + normal: { + position: 'center', + show: false, + formatter: ' {b|{b}：{c}} ', + backgroundColor: 'rgba(51,51,51,0.9)', + borderColor: 'rgba(51,51,51,0.9)', + borderWidth: 1, + borderRadius: 4, + rich: { + b: { + fontSize: 16, + color: '#fff', + lineHeight: 33 + } + } + }, + emphasis: { + show: true, + + } + }, + labelLine: { + normal: { + show: false + } + }, + itemStyle: { + normal: { + borderWidth: 3, + borderColor: '#ffffff', + }, + emphasis: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: '#7DCEFB' + }, { + offset: 1, color: '#0DA9E2' + }], + global: false + }, + borderWidth: 0, + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 10, 5, 0)' + } + } + }] + } + }; + + // get customers chart pie + Pie_name = []; + Pie_value = []; + serviceChart = true; + serviceNumber; + getCustomersPie() { + this.managemencs.getCustomersPie().subscribe((data) => { + this.serviceNumber = data.serviceTotalNum; + if (this.serviceNumber > 0) { + this.serviceChart = true; + } else { + this.serviceChart = false; + } + this.CUChartData = { + series: [{ + data: data.customerServiceList + }] + } + console.log(this.CUChartData) + }, (err) => { + console.log(err); + }); + } + + // service bar + serviceData: Object; + serviceInit: Object = { + customer: '', + width: 280, + height: 190, + option: { + tooltip: { + show: true, + trigger: 'item', + formatter: "{c}" + }, + grid: { + top: '5%', + left: '5%', + bottom: '3%', + containLabel: true + }, + xAxis: [ + { + type: 'value', + splitLine: { + show: false, + }, + axisTick: { + show: false + }, + axisLine: { + lineStyle: { + color: "#EDEDED" + } + }, + axisLabel: { + color: "#3C4F8C" + } + } + + ], + yAxis: [ + { + type: 'category', + splitLine: { + show: false, + }, + axisTick: { + show: false + }, + axisLine: { + lineStyle: { + color: "#EDEDED" + } + }, + axisLabel: { + color: "#3C4F8C" + }, + data: [], + }, + + ], + series: [ + { + name: '', + barWidth: '40%', + type: 'bar', + data: [], + itemStyle: { + normal: { + color: function (params) { + // build a color map as your need. + var colorList = [ + { + type: 'bar', + colorStops: [{ + offset: 0, + color: '#FCCE2B' + }, { + offset: 1, + color: '#FEE956' + }], + globalCoord: false, + }, + { + type: 'bar', + colorStops: [{ + offset: 0, + color: '#F43A59' + }, { + offset: 1, + color: '#FA6C92' + }], + globalCoord: false, + }, + { + type: 'bar', + colorStops: [{ + offset: 0, + color: '#4F5B60' + }, { + offset: 1, + color: '#879499' + }], + globalCoord: false, + }, + { + type: 'bar', + colorStops: [{ + offset: 0, + color: '#31DAC3' + }, { + offset: 1, + color: '#5FEFE3' + }], + globalCoord: false, + }, + { + type: 'bar', + colorStops: [{ + offset: 0, + color: '#999999' + }, { + offset: 1, + color: '#C9C9C9' + }], + globalCoord: false, + } + ]; + return colorList[params.dataIndex] + }, + } + } + }, + { + name: 'Type4', + type: 'bar', + stack: '', + data: '', + + }, + { + name: 'Type1', + type: 'bar', + stack: '', + data: '' + }, + { + name: 'Type2', + type: 'bar', + stack: '', + data: '' + }, + { + name: 'Type3', + type: 'bar', + stack: '', + data: '' + }, + { + name: 'Other', + type: 'bar', + stack: '', + data: '', + + } + ] + } + }; + name_s = []; + value_s = []; + + getCustomersColumn(item) { + this.name_s = []; + this.value_s = []; + this.managemencs.getCustomersColumn(item).subscribe((data) => { + data.list.forEach((item) => { + this.name_s.push(item.name); + this.value_s.push(item.value); + }) + this.serviceData = { + yAxis: [{ + data: this.name_s + }], + series: [{ + data: this.value_s + }] + } + console.log(this.serviceData) + }) + } + + createNewCustomer(notificationModel) { + let createParams = { + customerId: this.addNewCustomer, + 'global-customer-id': this.addNewCustomer, + 'subscriber-name': this.addNewCustomer, + 'subscriber-type': 'INFRA' + }; + this.notificationAttributes = { + "title": "Customer", + "imgPath": "../../../../assets/images/execute-inproess.png", + "action": "Create", + "status": "InProgress", + "name": this.addNewCustomer + }; + this.notificationModelShow(notificationModel); + this.managemencs.createCustomer(this.addNewCustomer, createParams).subscribe((data) => { + if (data["status"] == 'SUCCESS') { + this.notificationSuccess(notificationModel); + this.getAllCustomers(); + console.log(data, "Interface returned success") + } else { + this.notificationFailed(notificationModel); + console.log(data, "Interface returned error") + } + }) + } + + // Customer delete model + thisdeleteCustomer = { + name: null, + id: null + }; + deleteCustomerModel(itemCustomer) { + this.thisdeleteCustomer = itemCustomer; + this.deleteCustomerModelVisible = true; + } + deleteCustomerCancel() { + this.deleteCustomerModelVisible = false; + } + deleteCustomerOk(notificationModel) { + this.deleteCustomerModelVisible = false; + this.getCustomerVersion(this.thisdeleteCustomer, notificationModel); + this.notificationAttributes = { + "title": "Customer", + "imgPath": "../../../../assets/images/execute-inproess.png", + "action": "delete", + "status": "InProgress", + "name": this.thisdeleteCustomer.name + }; + this.notificationModelShow(notificationModel); + } + getCustomerVersion(thisdeleteCustomer, notificationModel) { + this.managemencs.getdeleteCustomerVersion(thisdeleteCustomer).subscribe((data) => { + if (data["status"] == 'SUCCESS') { + let params = { + customerId: thisdeleteCustomer.id, + version: data["result"]["resource-version"] + }; + this.deleteCustomer(params, notificationModel); + console.log(data, "Interface returned success") + } else { + console.log(data, "Interface returned error") + } + }) + } + deleteCustomer(params, notificationModel) { + this.managemencs.deleteSelectCustomer(params).subscribe((data) => { + if (data["status"] == 'SUCCESS') { + this.notificationSuccess(notificationModel); + this.getAllCustomers(); + console.log(data, "Interface returned success") + } else { + this.notificationFailed(notificationModel); + console.log(data, "Interface returned error") + } + }) + } + + createNewServiceType(notificationModel) { + let createParams = { + customer: this.selectCustomer, + ServiceType: this.addNewServiceType, + "service-type": this.addNewServiceType, + "temp-ub-sub-account-id": "sotnaccount" + }; + this.notificationAttributes = { + "title": "ServiceType", + "imgPath": "../../../../assets/images/execute-inproess.png", + "action": "Create", + "status": "InProgress", + "name": this.addNewServiceType + }; + this.notificationModelShow(notificationModel); + this.managemencs.createServiceType(createParams).subscribe((data) => { + if (data["status"] == 'SUCCESS') { + this.notificationSuccess(notificationModel); + this.getCustomersColumn(this.selectCustomer); + this.getAllCustomers(); + console.log(data, "Interface returned success") + } else { + this.notificationFailed(notificationModel); + console.log(data, "Interface returned error") + } + }) + } + + // ServiceType delete model + thisdeleteServiceType = { + type: null + }; + deleteServiceTypeModel(itemServiceType) { + this.thisdeleteServiceType = itemServiceType; + this.deleteServiceTypeModelVisible = true; + } + deleteServiceTypeCancel() { + this.deleteServiceTypeModelVisible = false; + } + deleteServiceTypeOk(notificationModel) { + this.deleteServiceTypeModelVisible = false; + this.getServiceTypeVersion(notificationModel); + } + getServiceTypeVersion(notificationModel) { + let paramss = { + customerId: this.selectCustomer, + ServiceType: this.thisdeleteServiceType["type"] + }; + this.notificationAttributes = { + "title": "ServiceType", + "imgPath": "../../../../assets/images/execute-inproess.png", + "action": "delete", + "status": "InProgress", + "name": this.thisdeleteServiceType["type"] + }; + this.notificationModelShow(notificationModel); + this.managemencs.getdeleteServiceTypeVersion(paramss).subscribe((data) => { + console.log(data) + if (data["status"] == 'SUCCESS') { + let params = { + customerId: this.selectCustomer, + ServiceType: this.thisdeleteServiceType["type"], + version: data["result"]["resource-version"] + }; + this.deleteServiceType(params, notificationModel); + console.log(data, "Interface returned success") + } else { + console.log(data, "Interface returned error") + } + }) + } + deleteServiceType(params, notificationModel) { + this.managemencs.deleteSelectServiceType(params).subscribe((data) => { + if (data["status"] == 'SUCCESS') { + this.notificationSuccess(notificationModel); + this.getServiceTypes(params.customerId); + this.getCustomersColumn(params.customerId); + this.getAllCustomers(); + console.log(data, "Interface returned success") + } else { + this.notificationFailed(notificationModel); + console.log(data, "Interface returned error") + } + }) + } + + +} diff --git a/usecaseui-portal/src/app/shared/components/details/details.component.css b/usecaseui-portal/src/app/shared/components/details/details.component.css new file mode 100644 index 00000000..ec6bd37f --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/details/details.component.css @@ -0,0 +1,104 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.content .header { + background-color: #fff; + border-radius: 5px; + padding: 30px 28px 0; + position: relative; + margin-bottom: 30px; + border: 1px solid #e4e4e4; +} +.content .header hr { + margin: 0; + border: none; + height: 1px; + background-color: #e4e4e4; +} +.content .header h2 { + font: 700 24px/18px 'Times New Roman'; + color: #3fa8eb; + text-align: center; + margin-bottom: 27px; +} +.content .header span.tildeimg { + position: absolute; + left: 50%; + top: 71px; + width: 60px; + height: 10px; + transform: translate(-30px, 0); + background: url(../../../../assets/images/tildeimg.png) no-repeat center center; + background-color: #fff; +} +.content .header .headerlist { + display: flex; +} +.content .header .headerlist div { + width: 100%; +} +.content .header .headerlist div p { + font: 400 14px 'Arial'; + color: #323437; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin: 18px 0 15px; +} +.content .header .headerlist div p span { + display: inline-block; + width: 50%; + text-align: right; + font: 700 14px 'Arial'; + color: #3fa8eb; +} +.content hr { + margin: 0; + border: none; + height: 1px; + background-color: #e4e4e4; +} +.content button { + width: 88px; + height: 22px; + position: absolute; + left: 50%; + transform: translate(-44px, 0); + border: none; + outline: none; + cursor: pointer; + background-color: #fff; + background: url(../../../../assets/images/open-close2.png) no-repeat center -22px; +} +.content button:hover { + background: url(../../../../assets/images/open-close2.png) no-repeat center -66px; +} +.content .buttonActive { + transform: translate(-44px, -22px); + background: url(../../../../assets/images/open-close2.png) no-repeat center 0px; +} +.content .buttonActive:hover { + background: url(../../../../assets/images/open-close2.png) no-repeat center -44px; +} +.content h2.detailtitle { + font: 700 24px/18px 'Times New Roman'; + color: #3fa8eb; + text-align: center; + margin-bottom: 15px; + padding-top: 25px; +} +.content .detailInformatioin { + overflow: hidden; +} diff --git a/usecaseui-portal/src/app/shared/components/details/details.component.html b/usecaseui-portal/src/app/shared/components/details/details.component.html new file mode 100644 index 00000000..62770b60 --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/details/details.component.html @@ -0,0 +1,68 @@ + +
    +
    +

    HEADER INFORMATION

    +
    +
    +
    +

    Version :{{datailheaderdata.version}}

    +

    Domain :{{datailheaderdata.domain}}

    +

    Event Name :{{datailheaderdata.eventName}}

    +

    Event Id :{{datailheaderdata.eventId}}

    +

    EventType :{{datailheaderdata.eventType}}

    +

    NfcNamingCode :{{datailheaderdata.nfcNamingCode}}

    +

    NfNamingCode :{{datailheaderdata.nfNamingCode}}

    +

    SourceName :{{datailheaderdata.sourceName}}

    +

    SourceId :{{datailheaderdata.sourceId}}

    +

    ReportingEntityName :{{datailheaderdata.reportingEntityName}}

    +

    ReportingEntityId :{{datailheaderdata.reportingEntityId}}

    +
    +
    +

    Priority :{{datailheaderdata.priority}}

    +

    ReportTime :{{datailheaderdata.reportTime}}

    +

    ClearTime :{{datailheaderdata.clearTime}}

    +

    FaultFieldsVersion :{{datailheaderdata.faultFieldsVersion}}

    +

    Event Servrity :{{datailheaderdata.eventServrity}}

    +

    EventSourceType :{{datailheaderdata.eventSourceType}}

    +

    EventCategory :{{datailheaderdata.eventCategory}}

    +

    AlarmCondition :{{datailheaderdata.alarmCondition}}

    +

    SpecificProblem :{{datailheaderdata.specificProblem}}

    +

    Status : {{datailheaderdata.status}}

    +

    AlarmInterfaceA :{{datailheaderdata.alarmInterfaceA}}

    +
    +
    +
    +
    + +

    DETAIL INFORMATION

    +
    + + + + Item Name + Item Value + + + + + {{data.name}} + {{data.value}} + + + +
    +
    diff --git a/usecaseui-portal/src/app/shared/components/details/details.component.less b/usecaseui-portal/src/app/shared/components/details/details.component.less new file mode 100644 index 00000000..c27bfd01 --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/details/details.component.less @@ -0,0 +1,108 @@ + +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.content { + .header { + background-color: #fff; + border-radius: 5px; + padding: 30px 28px 0; + position: relative; + margin-bottom: 30px; + border: 1px solid #e4e4e4; + hr { + margin: 0; + border: none; + height: 1px; + background-color: #e4e4e4; + } + h2 { + font: 700 24px/18px 'Times New Roman'; + color: #3fa8eb; + text-align: center; + margin-bottom: 27px; + } + span.tildeimg { + position: absolute; + left: 50%; + top: 71px; + width: 60px; + height: 10px; + transform: translate(-30px,0); + background: url(../../../../assets/images/tildeimg.png) no-repeat center center; + background-color: #fff; + } + .headerlist { + display: flex; + div { + width: 100%; + p { + font: 400 14px 'Arial'; + color: #323437; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin: 18px 0 15px; + span { + display: inline-block; + width: 50%; + text-align: right; + font: 700 14px 'Arial'; + color: #3fa8eb; + } + } + } + } + } + hr { + margin: 0; + border: none; + height: 1px; + background-color: #e4e4e4; + } + button { + width: 88px; + height: 22px; + position: absolute; + left: 50%; + transform: translate(-44px,0); + border: none; + outline: none; + cursor: pointer; + background-color: #fff; + background: url(../../../../assets/images/open-close2.png) no-repeat center -22px; + &:hover { + background: url(../../../../assets/images/open-close2.png) no-repeat center -66px; + } + } + .buttonActive { + transform: translate(-44px,-22px); + background: url(../../../../assets/images/open-close2.png) no-repeat center -0px; + &:hover { + background: url(../../../../assets/images/open-close2.png) no-repeat center -44px; + } + } + h2.detailtitle { + font: 700 24px/18px 'Times New Roman'; + color: #3fa8eb; + text-align: center; + margin-bottom: 15px; + padding-top: 25px; + } + .detailInformatioin { + // transition: all 0.3s linear; + overflow: hidden; + } +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/shared/components/details/details.component.spec.ts b/usecaseui-portal/src/app/shared/components/details/details.component.spec.ts new file mode 100644 index 00000000..1d5cbeb8 --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/details/details.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DetailsComponent } from './details.component'; + +describe('DetailsComponent', () => { + let component: DetailsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DetailsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DetailsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/shared/components/details/details.component.ts b/usecaseui-portal/src/app/shared/components/details/details.component.ts new file mode 100644 index 00000000..dea6caaa --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/details/details.component.ts @@ -0,0 +1,59 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { Component, OnInit, Input } from '@angular/core'; +import { slideUpDown } from '../../../animates'; +import { HomesService } from '../../../core/services/homes.service'; + +@Component({ + selector: 'app-details', + templateUrl: './details.component.html', + styleUrls: ['./details.component.less'], + animations: [ slideUpDown ] +}) +export class DetailsComponent implements OnInit { + + constructor(private myhttp:HomesService) { } + + ngOnInit() { + } + + ngOnChanges(changes){ + this.getAlarmDetailData(this.detailId); + } + + datailheaderdata: any = { + + }; + dataillistdata: any = []; + getAlarmDetailData(id){ + if(id){ + this.myhttp.getAlarmDetailData(id).subscribe((data)=>{ + this.datailheaderdata = data.alarmsHeader; + this.dataillistdata = data.list; + }) + } + + } + // detail Show + moredetailShow = false; + @Input() detailId; + + state = 'up' + slideUpDown(){ + this.moredetailShow = !this.moredetailShow; + this.state = this.state === 'up' ? 'down' : 'up'; + } +} diff --git a/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.css b/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.css new file mode 100644 index 00000000..5dce6c92 --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.css @@ -0,0 +1,77 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 10px; +} +.model { + background-color: #fff; + height: 90%; + overflow-y: auto; +} +.model .back { + position: absolute; + top: 10px; + right: 20px; +} +.model .creation { + position: relative; + width: 60%; + height: 100%; + overflow-y: auto; + border-radius: 5px; + padding: 20px; +} +.model .creation .baseparms h3 { + color: #3fa8eb; + font: 700 16px "Arial"; +} +.model .creation .baseparms h4 { + font: 700 16px "Arial"; +} +.model .creation .baseparms ul li { + margin: 3px 0; +} +.model .creation .baseparms ul li span { + display: inline-block; + width: 40%; + font: 700 14px "Arial"; + vertical-align: middle; + overflow: hidden; + text-overflow: ellipsis; + text-align: right; +} +.model .creation .baseparms ul li input { + width: 165px; +} +.model .creation .submit { + position: absolute; + top: 10px; + right: 20px; +} +.model .chart { + width: 40%; + padding: 10px; + height: 100%; + border-left: 10px solid #f3f3f3; +} diff --git a/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.html b/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.html new file mode 100644 index 00000000..da673bf0 --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.html @@ -0,0 +1,139 @@ + + +
    + +
    +

    {{createParams.commonParams.templateType}} {{"i18nTextDefine_InstanceCreation" | translate}}

    +
    + + +
    +
    +
    +
    +
    +
    +

    {{"i18nTextDefine_Base" | translate}}

    +
      +
    • + Name: + +
      • +
    • + Description: + +
      • +
    • + COS: + +
      • +
    • + EBS: + +
      • +
    +
    +
    +

    {{"i18nTextDefine_templateInputs" | translate}}

    +
      +
    • + {{parameter.name}}: + + +
      id: {{parameter.name}} +
      + vf_location: + + + +
      • +
    +
    +
    +

    {{template.name}}

    +
      +
    • + {{input.name}}: + + +
      id: {{input.name}}
      + vf_location: + + + +
      • +
    +
    +
    + +
    +
    +

    {{"i18nTextDefine_Base" | translate}}

    +
      +
    • + Name: + +
      • +
    • + Description: + +
      • +
    +
    +
    +

    {{"i18nTextDefine_templateInputs" | translate}}

    +
      +
    • + {{parameter.name}}: + + +
      id: {{parameter.name}} +
      + vf_location: + + + +
      • +
    +
    +
    +

    vnfs Inputs

    +
      +
    • +
      id: {{vnf.vnf_id}}
      + vf_location: + + + +
      • +
    +
    +
    +
    +
    + +
    +
    + + +
    +
    +
    + +
    \ No newline at end of file diff --git a/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.less b/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.less new file mode 100644 index 00000000..edbd2db0 --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.less @@ -0,0 +1,159 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 10px; +} +.model { + background-color: #F7F8FC; + height: 100%; + overflow-y: auto; + position: relative; + .top-title{ + width: 100%; + padding: 20px; + position: relative; + display: inline-block; + } + .submit{ + position: absolute; + width:84px; + height: 35px; + top: 10px; + right: 85px; + color: #fff; + font-size: 18px; + background:linear-gradient(90deg,rgba(99,194,246,1) 0%,rgba(62,155,255,1) 100%) !important; + border-radius:4px; + border: none!important; + border-color:rgba(0,0,0,0)!important; + } + .submit:hover{ + background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important; + border: none; + } + .back,.back:hover{ + position: absolute; + top: 10px; + right: 20px; + display: inline-block; + width: 35px; + height: 35px; + background:url("../../../../assets/images/Return-icon.png") no-repeat!important; + background-size: 100%!important; + border-radius:4px; + color: #D7D7D7; + cursor: pointer; + } + .back:hover{ + background: url("../../../../assets/images/Return-icon-active.png")!important; + background-size: 100%!important; + } + .top-title h3.title { + height: 35px; + width: 80%; + font-size:16px; + font-family:ArialMT; + color:#3C4F8C; + line-height:35px; + display: inline-block; + } + .e2ecreate-content{ + position: relative; + width: 98%; + height: 100%; + margin-left: 30px; + box-shadow:0px 10px 15px 2px rgba(222,222,222,0.5); + background: #fff; + border-radius:2px; + } + .creation{ + position: relative; + width: 58%; + height: 100%; + overflow-y: auto; + padding: 20px; + background: #fff; + .baseparms { + h3,h4{ + color: #06A7E2; + width: 96%; + height: 40px; + line-height: 35px; + font-size: 18px; + font-weight: 500; + margin: 10px auto; + border-bottom: 2px solid; + border-image: -webkit-linear-gradient(#07A9E1,#30D9C4) 100 100; + border-image: -moz-linear-gradient(#07A9E1,#30D9C4) 100 100; + border-image: linear-gradient(#07A9E1,#30D9C4) 100 100; + border-radius:2px; + } + h4 { + font: 700 16px "Arial"; + margin-left: 25px; + } + .vnf-box{ + clear: both; + } + ul{ + margin-left: 30px; + } + ul li { + margin: 10px 0; + width: 42%; + margin-right: 5%; + float: left; + text-align: left; + span { + display: inline-block; + width: 30%; + font: 700 14px "Arial"; + vertical-align: middle; + overflow: hidden; + text-align: left; + } + input,nz-select{ + width: 65%; + margin-left:3% + } + } + } + } + .dividing-line{ + width: 0; + height: 85%; + margin: 4% 0; + border-left: 1px #cccccc dashed; + } + .chart { + width: 38%; + padding: 10px; + height: 95%; + margin-right: 40px; + #createChart{ + height: 100%; + width: 100%; + } + } +} diff --git a/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.spec.ts b/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.spec.ts new file mode 100644 index 00000000..de00c43f --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { E2eCreationComponent } from './e2e-creation.component'; + +describe('E2eCreationComponent', () => { + let component: E2eCreationComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ E2eCreationComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(E2eCreationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.ts b/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.ts new file mode 100644 index 00000000..068fb039 --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.ts @@ -0,0 +1,357 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { MyhttpService } from '../../../core/services/myhttp.service'; +import * as d3 from 'd3'; + +@Component({ + selector: 'app-e2e-creation', + templateUrl: './e2e-creation.component.html', + styleUrls: ['./e2e-creation.component.less'] +}) +export class E2eCreationComponent implements OnInit { + + constructor(private myhttp: MyhttpService) { } + + ngOnInit() { + this.gete2eTemParameters(this.e2e_ns_temParametersContent); + this.getVimInfo(); + this.getSdnControllers(); + console.log(this.createParams); + } + + @Output() e2eCloseCreate = new EventEmitter(); + @Output() nsCloseCreate = new EventEmitter(); + @Input() createParams; + @Input() e2e_ns_temParametersContent; + + + // e2e serviceTemplateParameters + templateParameters = { + invariantUUID: "", + uuid: "", + name: "", + type: "", + version: "", + description: "", + category: "", + subcategory: "", + customizationUuid: "", + inputs: [], + nestedTemplates: [] + }; + // ns serviceTemplateParameters + nsTemplateParameters = { + inputs: {}, + inputs2: [], + vnfs: [] + } + roote2e = { + "name": "e2e", + "type": "e2e", + "children": [] + }; + + rootns = { + "name": "ns", + "type": "ns", + "children": [] + }; + + imgmap = { + '1': '../../../../assets/images/create-e2e.png', + '2': '../../../../assets/images/create-ns.png', + '3': '../../../../assets/images/create-vnf.png', + }; + gete2eTemParameters(data) { //Get template parameters + let type = this.createParams.commonParams.templateType == "E2E Service" ? "e2e" : "ns"; + console.log(this.createParams); + console.log(data); + if (type == "e2e") { + this.templateParameters = data; + this.templateParameters.nestedTemplates.forEach((item) => { + item.inputs = item.inputs.filter((input) => { return input.type !== "sdn_controller" }); + }) + this.templateParameters.nestedTemplates.map((item, index) => { + let nsIndex = { + "name": "ns", + "type": "ns", + "children": [] + }; + nsIndex.children = item.nestedTemplates.map((item, index) => { + return { + "name": "vnf", + "type": "vnf", + } + }); + this.roote2e.children.push(nsIndex); + }); + console.log(this.templateParameters); + console.log(this.roote2e) + } else if (type == "ns") { + if (data["model"] != undefined && typeof data["model"] == 'string') { + this.nsTemplateParameters = JSON.parse(data["model"]); + console.log(data["model"]); + } else { + this.nsTemplateParameters = data; + } + console.log(this.nsTemplateParameters); + this.nsTemplateParameters["inputs2"] = []; + let inputs = this.nsTemplateParameters.inputs; + for (let key in inputs) { + this.nsTemplateParameters["inputs2"].push({ name: key, type: inputs[key].type, value: inputs[key].value }) + } + this.rootns.children = this.nsTemplateParameters.vnfs.map((item, index) => { + return { + "name": "vnf", + "type": "vnf", + } + }); + console.log(this.nsTemplateParameters); + } + + this.drawImage(type) + + } + vimInfos = []; + getVimInfo() { + this.myhttp.getVimInfo() + .subscribe((data) => { + this.vimInfos = data.map((item) => { return { name: item['cloud-owner'], id: item['cloud-region-id'] } }); + }) + }; + sdnControllers = []; + getSdnControllers() { + this.myhttp.getSdnControllers() + .subscribe((data) => { + this.sdnControllers = data.map((item) => { return { name: item['thirdparty-sdnc-id'], id: item['thirdparty-sdnc-id'] } }); + }) + } + + // e2e requstbody + service = { + name: "", + description: "", + COS: "", + EBS: "", + serviceInvariantUuid: "", + serviceUuid: "", // uuid ?? + globalSubscriberId: "", // "customer.id", + serviceType: "", // "serviceType.value", + parameters: { + locationConstraints: [ + + ], + resources: [], + requestInputs: {}, + } + + } + + // ns requstbody + ns_service = { + csarId: "", + nsName: "", + description: "", + context: { + globalCustomerId: "", + serviceType: "" + } + } + ns_service2 = { + locationConstraints: [ + + ], + additionalParamForNs: { + } + } + submit() { + let type = this.createParams.commonParams.templateType == "E2E Service" ? "e2e" : "ns"; + if (type == "e2e") { + this.service.serviceInvariantUuid = this.templateParameters.invariantUUID; + this.service.serviceUuid = this.templateParameters.uuid; + this.service.globalSubscriberId = this.createParams.commonParams.customer.id; + this.service.serviceType = this.createParams.commonParams.serviceType.name; + + this.templateParameters.inputs.forEach((ipnut) => { + this.service.parameters.requestInputs[ipnut.name] = ipnut.value == undefined ? ipnut.defaultValue : ipnut.value; + }) + + this.templateParameters.nestedTemplates.forEach((item) => { + let nsService = { + resourceName: item.name, + resourceInvariantUuid: item.invariantUUID, + resourceUuid: item.uuid, + resourceCustomizationUuid: item.customizationUuid, + parameters: { + locationConstraints: [], + resources: [], + requestInputs: {} + } + } + item.inputs.forEach((input) => { + if (input.type == "vf_location") { + let location = { + vnfProfileId: input.name, + locationConstraints: { + cloudOwner: input.value.name, + cloudRegionId: input.value.id + } + } + nsService.parameters.locationConstraints.push(location); + } else { + nsService.parameters.requestInputs[input.name] = input.value == undefined ? input.defaultValue : input.value; + } + }) + this.service.parameters.resources.push(nsService); + }) + console.log(this.service) + this.service.parameters.requestInputs['orchestrator'] = this.createParams.orchestrator.name; + if (this.createParams.isSol005Interface) { + this.service.parameters.requestInputs['isSol005Interface'] = this.createParams.isSol005Interface; + } + this.e2eCloseCreate.emit({ service: this.service }); + + } else if (type == "ns") { + //create ns instance + this.ns_service.csarId = this.createParams.template.id; + this.ns_service.context.globalCustomerId = this.createParams.commonParams.customer.id; + this.ns_service.context.serviceType = this.createParams.commonParams.serviceType.name; + + this.nsTemplateParameters.inputs2.forEach((input) => { + this.ns_service2.additionalParamForNs[input.name] = input.value == undefined ? input.defaultValue : input.value; + }) + this.nsTemplateParameters.vnfs.forEach((vnf) => { + let vnfparams = { + vnfProfileId: vnf.properties.id, + locationConstraints: { + cloudOwner: vnf.value.name, + cloudRegionId: vnf.value.id + } + } + this.ns_service2.locationConstraints.push(vnfparams); + }) + console.log(this.ns_service2); + + let requstbody = { + step1: this.ns_service, + step2: this.ns_service2 + } + this.nsCloseCreate.emit(requstbody); + } + + } + goback() { + this.e2eCloseCreate.emit(); + } + + + + drawImage(type) { + if (type == "e2e") { + this.render(this.roote2e, this.imgmap) + } else if (type == "ns") { + this.render(this.rootns, this.imgmap) + } + + + } + + render(data, imgmap) { + var width = document.getElementById("createChart").clientWidth, + height = document.getElementById("createChart").clientHeight; + var cluster = d3.layout.tree() + .size([width, height]); + var diagonal = d3.svg.diagonal() + .projection(function (d) { + return [d.x - 18, d.y + 40]; + }); + var svg = d3.select("svg"); + + //marker + var marker = + svg.append("marker") + .attr("id", "resolved") + .attr("markerUnits", "strokeWidth") + .attr("markerUnits", "userSpaceOnUse") + .attr("viewBox", "0 -5 10 10") + .attr("refX", 22) + .attr("refY", 0) + .attr("markerWidth", 20) + .attr("markerHeight", 20) + .attr("orient", "auto") + .attr("stroke-width", 1) + .append("circle") + .attr("cx", 5) + .attr("cy", 0) + .attr("r", 2) + .attr("stroke-width", 1) + .style("stroke", "#2F8BF7") + .attr('fill', 'white'); + var i = 0; + var nodes = cluster.nodes(data).reverse(); + nodes.forEach(function (d) { + d.y = d.depth * 200 + 100; + + }); + + var links = cluster.links(nodes); + + var linkEnter = svg.selectAll("path.link") + .data(links); + + linkEnter.enter().append("path") + .attr("class", "link") + .attr("d", diagonal) + .style("stroke", "#2F8BF7") + .style('stroke-width', '1px') + .attr("marker-end", "url(#resolved)") + .style("fill", "none") + // .style("fill-opacity", 1) + .attr("id", function (d, i) { + return "mypath" + i; + }); + + var node = svg.selectAll(".node") + .data(nodes) + .enter() + .append("g") + .attr("class", "node") + .attr("transform", function (d) { + return "translate(" + (d.x + -50) + "," + (d.y) + ")"; + }); + + node.append('image') + .attr('xlink:href', function (d) { + if (d.type == "e2e") { + return imgmap[1]; + } else if (d.type == "ns") { + return imgmap[2]; + } else if (d.type == "vnf") { + return imgmap[3]; + } + + }) + .style('width', '12%') + .style("cursor", "pointer") + .attr("x", 0) + .attr("y", 0) + .attr("rx", 3); + + + } + +} diff --git a/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.html b/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.html new file mode 100644 index 00000000..c0953a90 --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.html @@ -0,0 +1,104 @@ + + +
    + +
    +

    {{serviceInstanceName}} Instance Detail

    +
    + +
    +
    +
    +
    +
    +

    {{"i18nTextDefine_Base" | translate}}

    +
      +
    • + Name: + {{service.name}} +
      • +
    • + Description: + {{service.description}} +
      • +
    +
    +
    +

    {{"i18nTextDefine_templateInputs" | translate}}

    +
      +
    • + {{key}}: + {{e2e_requestInputs[key]}} +
      • +
    +
    +
    +

    {{template.name}}

    +
      +
    • + vf_location: + {{input["vf_location"]}} +
      • +
    +
    +
    + +
    +
    +

    {{"i18nTextDefine_Base" | translate}}

    +
      +
    • + Name: + {{ns_service.name}} +
      • +
    • + Description: + {{ns_service.description}} +
      • +
    +
    +
    +

    {{"i18nTextDefine_templateInputs" | translate}}

    +
      +
    • + {{key}}: + {{ns_requestInputs[key]}} +
      • +
    +
    +
    +

    vnfs Inputs

    +
      +
    • +
      id: {{vnf.vnfInstanceId}}
      + vf_location: + {{vnf["vnfInstanceName"]}} +
      • +
    +
    +
    +
    + + +
    +
    + + +
    +
    + +
    \ No newline at end of file diff --git a/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.less b/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.less new file mode 100644 index 00000000..e560cd9b --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.less @@ -0,0 +1,139 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 10px; +} +.creation-model{ + position: relative; +} +.model { + background-color: #F7F8FC; + height: 100%; + overflow-y: auto; + position: relative; + .top-title{ + width: 100%; + padding: 20px; + position: relative; + display: inline-block; + } + .back,.back:hover{ + position: absolute; + top: 10px; + right: 20px; + display: inline-block; + width: 35px; + height: 35px; + background:url("../../../../assets/images/Return-icon.png") no-repeat!important; + background-size: 100%!important; + border-radius:4px; + color: #D7D7D7; + cursor: pointer; + } + .back:hover{ + background: url("../../../../assets/images/Return-icon-active.png")!important; + background-size: 100%!important; + } + .top-title h3.title { + height: 35px; + width: 80%; + font-size:16px; + font-family:ArialMT; + color:#3C4F8C; + line-height:35px; + display: inline-block; + } + .detaildata{ + position: relative; + width: 58%; + height: 100%; + overflow-y: auto; + border-radius: 5px; + padding: 20px; + background: #fff; + margin-left: 30px; + box-shadow:0px 10px 15px 2px rgba(222,222,222,0.5); + .baseparms { + h3,h4{ + color: #06A7E2; + width: 96%; + height: 40px; + line-height: 35px; + font-size: 18px; + font-weight: 500; + margin: 10px auto; + border-bottom: 2px solid; + border-image: -webkit-linear-gradient(#07A9E1,#30D9C4) 100 100; + border-image: -moz-linear-gradient(#07A9E1,#30D9C4) 100 100; + border-image: linear-gradient(#07A9E1,#30D9C4) 100 100; + border-radius:2px; + } + h4 { + font: 700 16px "Arial"; + margin-left: 25px; + } + .vnf-box{ + clear: both; + } + ul{ + margin-left: 30px; + } + ul li { + margin: 10px 0; + width: 49%; + float: left; + text-align: left; + color:rgba(60,79,140,1); + font-size: 14px; + span { + display: inline-block; + width: 50%; + font: 700 14px "Arial"; + vertical-align: middle; + overflow: hidden; + text-align: left; + color:rgba(60,79,140,0.5); + } + span.input-content{ + width: 42%; + color: #3C4F8C; + margin-left: 5%; + } + } + } + } + .chart { + width: 35%; + padding: 10px; + height: 95%; + box-shadow: 0px 10px 35px 10px rgba(222, 222, 222, 0.5); + margin-right: 40px; + background:linear-gradient(180deg,rgba(183, 230, 247, 1) 0%,rgba(214, 240, 254, 1) 100%); + border-radius: 4px; + #createChart{ + height: 100%; + width: 100%; + } + } +} diff --git a/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.spec.ts b/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.spec.ts new file mode 100644 index 00000000..ad24a477 --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { E2eDetailComponent } from './e2e-detail.component'; + +describe('E2eDetailComponent', () => { + let component: E2eDetailComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ E2eDetailComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(E2eDetailComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.ts b/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.ts new file mode 100644 index 00000000..7618c98c --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.ts @@ -0,0 +1,246 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ + +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { MyhttpService } from '../../../core/services/myhttp.service'; +import * as d3 from 'd3'; + +@Component({ + selector: 'app-e2e-detail', + templateUrl: './e2e-detail.component.html', + styleUrls: ['./e2e-detail.component.less'] +}) +export class E2eDetailComponent implements OnInit { + + constructor(private myhttp: MyhttpService) { + } + + ngOnInit() { + // this.getDetails(); + this.dataInit(); + } + + @Input() detailParams; + + @Output() closeDetail = new EventEmitter(); + serviceInstanceName: any; + serviceType: any; + input_parameters: any; + nsinput_parameters: any; + + // e2e + service = { + name: "", + description: "", + }; + e2e_nestedTemplates = []; + e2e_requestInputs: any; + + ns_service = { + name: "", + description: "" + } + ns_nestedTemplates = []; + ns_requestInputs = {}; + roote2e = { + "name": "e2e", + "type": "e2e", + "children": [] + }; + + rootns = { + "name": "ns", + "type": "ns", + "children": [] + }; + + imgmap = { + '1': '../../../../assets/images/create-e2e.png', + '2': '../../../../assets/images/create-ns.png', + '3': '../../../../assets/images/create-vnf.png', + }; + + getKeys(item) { + return Object.keys(item); + } + + dataInit() { + console.log(this.detailParams); + this.serviceInstanceName = this.detailParams['service-instance-name'] || this.detailParams["nsName"]; + if (this.detailParams.serviceDomain == 'E2E Service') { + this.input_parameters = JSON.stringify(this.detailParams['input-parameters']); + this.input_parameters = JSON.parse(this.input_parameters); + console.log(this.input_parameters); + this.service = { + name: this.input_parameters.service.name, + description: this.input_parameters.service.description, + }; + if (this.input_parameters.service.parameters.requestInputs != undefined && Object.keys(this.input_parameters.service.parameters.requestInputs).length > 0) { + this.e2e_requestInputs = this.input_parameters.service.parameters.requestInputs; + } + if (this.input_parameters.service.parameters.resources != undefined && this.input_parameters.service.parameters.resources.length > 0) { + this.input_parameters.service.parameters.resources.map((item, i) => { + let nestedTemplates = { + name: null, + vnfs: [] + }; + nestedTemplates.name = item.resourceName; + item.parameters.locationConstraints.map((its, k) => { + nestedTemplates.vnfs.push({ + "vf_location": its.locationConstraints.cloudOwner + }) + }); + this.e2e_nestedTemplates.push(nestedTemplates); + + let nsIndex = { + "name": "ns", + "type": "ns", + "children": [] + }; + nsIndex.children = item.parameters.locationConstraints.map((itemits, index) => { + return { + "name": "vnf", + "type": "vnf", + } + }); + this.roote2e.children.push(nsIndex); + }); + console.log(this.e2e_nestedTemplates); + console.log(this.e2e_requestInputs); + console.log(this.roote2e) + } + } else if (this.detailParams.serviceDomain == 'Network Service') { + this.ns_service = { + name: this.detailParams.name || this.detailParams['service-instance-name'], + description: this.detailParams.description || null + }; + if (this.detailParams.requestInputs != undefined && Object.keys(this.detailParams.requestInputs).length > 0) { + this.ns_requestInputs = this.detailParams.requestInputs; + } + this.ns_nestedTemplates = this.detailParams.childServiceInstances; + this.rootns.children = this.ns_nestedTemplates.map((item, index) => { + return { + "name": "vnf", + "type": "vnf" + } + }); + console.log(this.ns_nestedTemplates); + console.log(this.ns_requestInputs); + console.log(this.rootns) + } + this.drawImage(this.detailParams.serviceDomain) + } + + goback() { + this.closeDetail.emit(); + } + + drawImage(type) { + if (type == "E2E Service") { + this.render(this.roote2e, this.imgmap) + } else if (type == "Network Service") { + this.render(this.rootns, this.imgmap) + } + + + } + + render(data, imgmap) { + var width = document.getElementById("createChart").clientWidth, + height = document.getElementById("createChart").clientHeight; + var cluster = d3.layout.tree() + .size([width, height]); + var diagonal = d3.svg.diagonal() + .projection(function (d) { + return [d.x - 18, d.y + 40]; + }); + var svg = d3.select("svg"); + + //marker + var marker = + svg.append("marker") + .attr("id", "resolved") + .attr("markerUnits", "strokeWidth") + .attr("markerUnits", "userSpaceOnUse") + .attr("viewBox", "0 -5 10 10") + .attr("refX", 22) + .attr("refY", 0) + .attr("markerWidth", 20) + .attr("markerHeight", 20) + .attr("orient", "auto") + .attr("stroke-width", 1) + .append("circle") + .attr("cx", 5) + .attr("cy", 0) + .attr("r", 2) + .attr("stroke-width", 1) + .style("stroke", "#2F8BF7") + .attr('fill', 'white'); + var i = 0; + var nodes = cluster.nodes(data).reverse(); + nodes.forEach(function (d) { + d.y = d.depth * 200 + 100; + + }); + + var links = cluster.links(nodes); + + var linkEnter = svg.selectAll("path.link") + .data(links); + + linkEnter.enter().append("path") + .attr("class", "link") + .attr("d", diagonal) + .style("stroke", "#2F8BF7") + .style('stroke-width', '1px') + .attr("marker-end", "url(#resolved)") + .style("fill", "none") + // .style("fill-opacity", 1) + .attr("id", function (d, i) { + return "mypath" + i; + }); + + var node = svg.selectAll(".node") + .data(nodes) + .enter() + .append("g") + .attr("class", "node") + .attr("transform", function (d) { + return "translate(" + (d.x + -50) + "," + (d.y) + ")"; + }); + + node.append('image') + .attr('xlink:href', function (d) { + if (d.type == "e2e") { + return imgmap[1]; + } else if (d.type == "ns") { + return imgmap[2]; + } else if (d.type == "vnf") { + return imgmap[3]; + } + + }) + .style('width', '12%') + .style("cursor", "pointer") + .attr("x", 0) + .attr("y", 0) + .attr("rx", 3); + + + } + + +} diff --git a/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.css b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.css new file mode 100644 index 00000000..9830c9e8 --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.css @@ -0,0 +1,91 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.content .title { + border-radius: 5px 5px 0 0; + background-color: #fff; + height: 106px; + border-bottom: 1px solid #f0f0f0; + margin-bottom: 0; +} +.content .title ul { + display: flex; + display: -webkit-flex; + justify-content: space-around; + align-items: center; + padding: 0; + margin: 0; + height: 100%; +} +.content .title ul li { + list-style: none; + padding-left: 32px; + width: 100%; + border-left: 1px solid #eceff4; +} +.content .title ul li h5 { + font: 500 14px "Arial"; + color: #3d4d65; +} +.content .title ul li p { + font: 500 24px "Arial"; + color: #3fa8eb; + margin-bottom: 0; +} +.content .title ul li:nth-child(1) { + border: none; +} +.content .chart { + position: relative; + border-radius: 5px; + margin-bottom: 20px; + height: 70px; +} +.content .chart .select { + padding: 20px 20px 20px 0px; + width: 70%; + float: left; +} +.content .chart .select span { + display: inline-block; + font: 700 14px "Arial"; + color: #4c5e70; +} +.content .chart .select .search { + margin-left: 20px; + height: 30px; + padding: 0 10px; +} +.content .chart .select .search span { + color: #fff; + font-weight: 400; +} +.content .tablelist { + background-color: #fff; + padding: 24px 10px 0px; + border-radius: 0 0 5px 5px; +} +.content .tablelist .action { + padding: 10px 0 0 20px; +} +.content .tablelist .action .details { + display: inline-block; + width: 16px; + height: 16px; + background: url(../../../../assets/images/icon.png) center -113px; +} +.content .tablelist .action .details:hover { + background: url(../../../../assets/images/icon.png) no-repeat center -128px; +} diff --git a/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.html b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.html new file mode 100644 index 00000000..317d48b0 --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.html @@ -0,0 +1,55 @@ + +
    + +
    +
    + Report Time: + + + +
    +
    +
    + + + + NO + Source Name + Event Name + ReportingEntityName + Report Time + Action + + + + + + {{i+1}} + {{item.sourceName}} + {{item.eventName}} + {{item.reportingEntityName}} + {{item.startEpochMicrosec | date:'yyyy-MM-dd HH:mm:ss'}} + + + + + +
    +
    \ No newline at end of file diff --git a/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.less b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.less new file mode 100644 index 00000000..e302c7fd --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.less @@ -0,0 +1,137 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.content { + .title { + border-radius: 5px 5px 0 0; + background-color: #fff; + height: 106px; + border-bottom: 1px solid #f0f0f0; + margin-bottom: 0; + ul { + display: flex; + display: -webkit-flex; + justify-content: space-around; + align-items: center; + padding: 0; + margin: 0; + height: 100%; + li { + list-style: none; + padding-left: 32px; + width: 100%; + border-left: 1px solid #eceff4; + h5 { + font: 500 14px "Arial"; + color: #3d4d65; + } + p { + font: 500 24px "Arial"; + color: #3fa8eb; + margin-bottom: 0; + } + } + li:nth-child(1){ + border: none; + } + } + } + .chart { + // background-color: #fff; + position: relative; + border-radius: 5px; + margin-bottom: 20px; + height: 70px; + .select { + padding: 20px 20px 20px 0px; + width: 70%; + float: left; + span { + display: inline-block; + font: 700 14px "Arial"; + color: #4c5e70; + } + .search { + margin-left: 20px; + height: 30px; + padding: 0 10px; + span { + color: #fff; + font-weight: 400; + } + } + // nz-dropdown { + // margin-right: 20px; + // a { + // font: 700 12px "Arial"; + // color: #3d4d65; + // &:hover { + // color: #3fa8eb; + // } + // } + // } + } + // .AlarmChart { + // // height: 0px; + // // border-bottom: 1px solid #f5f5f5; + // // transition: all 0.3s linear; + // width: 25%; + // padding-top: 7px; + // float: left; + // } + // .alarmChart-active { + // height: 386px; + // } + // .open-close { + // width: 50px; + // height: 25px; + // position: absolute; + // left: 50%; + // bottom: 0px; + // transform: translate(-25px,0); + // border: none; + // outline: none; + // cursor: pointer; + // background-color: #fff; + // background: url(../../../assets/images/open-close.png) no-repeat center -27px; + // &:hover { + // background: url(../../../assets/images/open-close.png) no-repeat center -79px; + // } + // } + // .open-close-active { + // background: url(../../../assets/images/open-close.png) center -1px; + // &:hover { + // background: url(../../../assets/images/open-close.png) no-repeat center -53px; + // } + // } + } + .tablelist { + background-color: #fff; + padding: 24px 10px 0px; + border-radius: 0 0 5px 5px; + .action{ + padding: 10px 0 0 20px; + .details{ + display: inline-block; + width: 16px; + height: 16px; + background: url(../../../../assets/images/icon.png) center -113px; + &:hover { + background: url(../../../../assets/images/icon.png) no-repeat center -128px; + } + } + } + } +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.spec.ts b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.spec.ts new file mode 100644 index 00000000..013db38a --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GraphiclistComponent } from './graphiclist.component'; + +describe('GraphiclistComponent', () => { + let component: GraphiclistComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ GraphiclistComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(GraphiclistComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.ts b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.ts new file mode 100644 index 00000000..c05d3b7c --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.ts @@ -0,0 +1,78 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core'; +import { HomesService } from '../../../core/services/homes.service'; +import * as addDays from 'date-fns/add_days'; +import { DatePipe } from "@angular/common" + +@Component({ + selector: 'app-graphiclist', + templateUrl: './graphiclist.component.html', + styleUrls: ['./graphiclist.component.less'], + providers: [DatePipe] +}) +export class GraphiclistComponent implements OnInit { + public startTime: string =''; + public endTime: string = ''; + public currentPage: number = 1; + public pageSize: number = 10; + list: any; + constructor( private datePipe: DatePipe, + private myhttp: HomesService) { } + isVisibleMiddle = false; + + showModalMiddle(): void { + this.isVisibleMiddle = true; + } + handleOkMiddle(): void { + // console.log('click ok'); + this.isVisibleMiddle = false; + } + handleCancelMiddle(): void { + this.isVisibleMiddle = false; + } + + ngOnInit() { + } + ngOnChanges(changes){ + this.getPerformanceFormData(); + } + getPerformanceFormData() { + this.myhttp.getPerformanceFormData(this.currentPage, this.pageSize, this.vnfname, this.startTime, this.endTime).subscribe((data) => { + this.list = data.performances; + }) + } + // Date screening + dateRange = [ addDays(new Date(), -30), new Date() ]; + + onChange(result: Date): void { + this.startTime = this.datePipe.transform(result[0], 'yyyy-MM-dd HH:mm:ss'); + this.endTime = this.datePipe.transform(result[1], 'yyyy-MM-dd HH:mm:ss'); +} + sort(e){ + } + @Input () vnfname; + @Output() detailData = new EventEmitter(); + detailShow(id){ + let prems = { + id:id, + detailShow: true + } + this.detailData.emit(prems); + + } + +} diff --git a/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.css b/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.css new file mode 100644 index 00000000..ec6bd37f --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.css @@ -0,0 +1,104 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.content .header { + background-color: #fff; + border-radius: 5px; + padding: 30px 28px 0; + position: relative; + margin-bottom: 30px; + border: 1px solid #e4e4e4; +} +.content .header hr { + margin: 0; + border: none; + height: 1px; + background-color: #e4e4e4; +} +.content .header h2 { + font: 700 24px/18px 'Times New Roman'; + color: #3fa8eb; + text-align: center; + margin-bottom: 27px; +} +.content .header span.tildeimg { + position: absolute; + left: 50%; + top: 71px; + width: 60px; + height: 10px; + transform: translate(-30px, 0); + background: url(../../../../assets/images/tildeimg.png) no-repeat center center; + background-color: #fff; +} +.content .header .headerlist { + display: flex; +} +.content .header .headerlist div { + width: 100%; +} +.content .header .headerlist div p { + font: 400 14px 'Arial'; + color: #323437; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin: 18px 0 15px; +} +.content .header .headerlist div p span { + display: inline-block; + width: 50%; + text-align: right; + font: 700 14px 'Arial'; + color: #3fa8eb; +} +.content hr { + margin: 0; + border: none; + height: 1px; + background-color: #e4e4e4; +} +.content button { + width: 88px; + height: 22px; + position: absolute; + left: 50%; + transform: translate(-44px, 0); + border: none; + outline: none; + cursor: pointer; + background-color: #fff; + background: url(../../../../assets/images/open-close2.png) no-repeat center -22px; +} +.content button:hover { + background: url(../../../../assets/images/open-close2.png) no-repeat center -66px; +} +.content .buttonActive { + transform: translate(-44px, -22px); + background: url(../../../../assets/images/open-close2.png) no-repeat center 0px; +} +.content .buttonActive:hover { + background: url(../../../../assets/images/open-close2.png) no-repeat center -44px; +} +.content h2.detailtitle { + font: 700 24px/18px 'Times New Roman'; + color: #3fa8eb; + text-align: center; + margin-bottom: 15px; + padding-top: 25px; +} +.content .detailInformatioin { + overflow: hidden; +} diff --git a/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.html b/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.html new file mode 100644 index 00000000..a5d44a7f --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.html @@ -0,0 +1,61 @@ + +
    +
    +

    HEADER INFORMATION

    +
    +
    +
    +

    Version :{{datailheaderdata.version}}

    +

    Domain :{{datailheaderdata.domain}}

    +

    EventType :{{datailheaderdata.eventType}}

    +

    Event Name :{{datailheaderdata.eventName}}

    +

    Event Id :{{datailheaderdata.eventId}}

    +

    NfcNamingCode :{{datailheaderdata.nfcNamingCode}}

    + + +
    +
    +

    NfNamingCode :{{datailheaderdata.nfNamingCode}}

    +

    SourceName :{{datailheaderdata.sourceName}}

    +

    SourceId :{{datailheaderdata.sourceId}}

    +

    ReportingEntityName :{{datailheaderdata.reportingEntityName}}

    +

    ReportingEntityId :{{datailheaderdata.reportingEntityId}}

    +

    ReportTime :{{datailheaderdata.reportTime}}

    +
    +
    +
    +
    + +

    DETAIL INFORMATION

    +
    + + + + Item Name + Item Value + + + + + {{data.name}} + {{data.value}} + + + +
    +
    + \ No newline at end of file diff --git a/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.less b/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.less new file mode 100644 index 00000000..dd94af84 --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.less @@ -0,0 +1,110 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.content { + .header { + background-color: #fff; + border-radius: 5px; + padding: 30px 28px 0; + position: relative; + margin-bottom: 30px; + border: 1px solid #e4e4e4; + hr { + margin: 0; + border: none; + height: 1px; + background-color: #e4e4e4; + } + h2 { + font: 700 24px/18px 'Times New Roman'; + color: #3fa8eb; + text-align: center; + margin-bottom: 27px; + } + span.tildeimg { + position: absolute; + left: 50%; + top: 71px; + width: 60px; + height: 10px; + transform: translate(-30px,0); + background: url(../../../../assets/images/tildeimg.png) no-repeat center center; + background-color: #fff; + } + .headerlist { + display: flex; + div { + width: 100%; + p { + font: 400 14px 'Arial'; + color: #323437; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin: 18px 0 15px; + span { + display: inline-block; + width: 50%; + text-align: right; + font: 700 14px 'Arial'; + color: #3fa8eb; + } + } + } + } + } + hr { + margin: 0; + border: none; + height: 1px; + background-color: #e4e4e4; + } + button { + width: 88px; + height: 22px; + position: absolute; + left: 50%; + transform: translate(-44px,0); + border: none; + outline: none; + cursor: pointer; + background-color: #fff; + background: url(../../../../assets/images/open-close2.png) no-repeat center -22px; + &:hover { + background: url(../../../../assets/images/open-close2.png) no-repeat center -66px; + } + } + .buttonActive { + transform: translate(-44px,-22px); + background: url(../../../../assets/images/open-close2.png) no-repeat center -0px; + &:hover { + background: url(../../../../assets/images/open-close2.png) no-repeat center -44px; + } + } + h2.detailtitle { + font: 700 24px/18px 'Times New Roman'; + color: #3fa8eb; + text-align: center; + margin-bottom: 15px; + padding-top: 25px; + } + .detailInformatioin { + // transition: all 0.3s linear; + overflow: hidden; + } + .detailshow { + + } +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.spec.ts b/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.spec.ts new file mode 100644 index 00000000..11f4abd2 --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PerformanceDetailsComponent } from './performance-details.component'; + +describe('PerformanceDetailsComponent', () => { + let component: PerformanceDetailsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PerformanceDetailsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PerformanceDetailsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.ts b/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.ts new file mode 100644 index 00000000..9a601485 --- /dev/null +++ b/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.ts @@ -0,0 +1,57 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { Component, OnInit, Input } from '@angular/core'; +import { slideUpDown } from '../../../animates'; +import { HomesService } from '../../../core/services/homes.service'; + +@Component({ + selector: 'app-performance-details', + templateUrl: './performance-details.component.html', + styleUrls: ['./performance-details.component.less'], + animations: [ slideUpDown ] +}) +export class PerformanceDetailsComponent implements OnInit { + + + constructor(private myhttp:HomesService) { } + + ngOnInit() { + + } + + ngOnChanges(changes){ + console.log(this.detailId) + this.getPerformanceHeaderDetail(this.detailId); + } + datailheaderdata: any = {}; + dataillistdata: any = []; + getPerformanceHeaderDetail(id){ + if(id){ + this.myhttp.getPerformanceHeaderDetail(id).subscribe((data)=>{ + console.log(data) + this.datailheaderdata = data.performanceHeader; + this.dataillistdata = data.list; + }) + } + } + moredetailShow = false; + @Input() detailId; + state = 'up' + slideUpDown(){ + this.moredetailShow = !this.moredetailShow; + this.state = this.state === 'up' ? 'down' : 'up'; + } +} diff --git a/usecaseui-portal/src/app/shared/utils/utils.js b/usecaseui-portal/src/app/shared/utils/utils.js new file mode 100644 index 00000000..e69de29b diff --git a/usecaseui-portal/src/app/test/test.component.html b/usecaseui-portal/src/app/test/test.component.html new file mode 100644 index 00000000..200be4e6 --- /dev/null +++ b/usecaseui-portal/src/app/test/test.component.html @@ -0,0 +1,25 @@ +
    +

    Mock data works!

    + + + + Name + Phone + Address + Action + + + + + {{data.name}} + {{data.phone}} + {{data.address}} + + Action 一 {{data.name}} + + Delete + + + + +
    \ No newline at end of file diff --git a/usecaseui-portal/src/app/test/test.component.less b/usecaseui-portal/src/app/test/test.component.less new file mode 100644 index 00000000..a44f4e7e --- /dev/null +++ b/usecaseui-portal/src/app/test/test.component.less @@ -0,0 +1,3 @@ +.test-holder{ + margin:20px; +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/test/test.component.spec.ts b/usecaseui-portal/src/app/test/test.component.spec.ts new file mode 100644 index 00000000..ef4e38cb --- /dev/null +++ b/usecaseui-portal/src/app/test/test.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TestComponent } from './test.component'; + +describe('TestComponent', () => { + let component: TestComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ TestComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TestComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/test/test.component.ts b/usecaseui-portal/src/app/test/test.component.ts new file mode 100644 index 00000000..30fdedc7 --- /dev/null +++ b/usecaseui-portal/src/app/test/test.component.ts @@ -0,0 +1,34 @@ +import { Component, OnInit } from '@angular/core'; +import { TextService } from '../core/services/text.service'; + +@Component({ + selector: 'app-test', + templateUrl: './test.component.html', + styleUrls: ['./test.component.less'] +}) +export class TestComponent implements OnInit { + constructor( + private TextService: TextService, + ) { + } + + ngOnInit() { + this.getMockData(); + this.getjsonData(); + + } + tableData = [] + getMockData() { + this.TextService.getfakeData().subscribe(res => { + console.log(res, "======fake data") + this.tableData = res; + }) + } + getjsonData() { + this.TextService.getjsonData().subscribe(res => { + console.log(res, "======json data") + }) + } + + +} diff --git a/usecaseui-portal/src/app/views/alarm/alarm.component.css b/usecaseui-portal/src/app/views/alarm/alarm.component.css new file mode 100644 index 00000000..25bf187e --- /dev/null +++ b/usecaseui-portal/src/app/views/alarm/alarm.component.css @@ -0,0 +1,164 @@ +/* + Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 20px; +} +.select { + margin-bottom: 20px; +} +.select span { + display: inline-block; + font: 700 14px "Arial"; + color: #4c5e70; +} +.select nz-dropdown { + vertical-align: middle; +} +.select nz-dropdown :hover { + border-color: #147dc2; +} +.select nz-dropdown button { + width: 165px; + height: 30px; + background-color: #eceff4; + text-align: left; + border-color: #9fa9ab; +} +.select nz-dropdown button span { + font-weight: 400; + display: inline-block; + width: 120px; + overflow: hidden; + text-overflow: ellipsis; + padding-top: 2px; +} +.select nz-dropdown button i { + position: absolute; + top: 10px; + right: 10px; +} +.select .search { + margin-left: 20px; + height: 30px; + padding: 0 10px; +} +.select .search span { + color: #fff; + font-weight: 400; +} +.content .title { + border-radius: 5px 5px 0 0; + background-color: #fff; + height: 106px; + border-bottom: 1px solid #f0f0f0; + margin-bottom: 0; +} +.content .title ul { + display: flex; + display: -webkit-flex; + justify-content: space-around; + align-items: center; + padding: 0; + margin: 0; + height: 100%; +} +.content .title ul li { + list-style: none; + padding-left: 32px; + width: 100%; + border-left: 1px solid #eceff4; +} +.content .title ul li h5 { + font: 500 14px "Arial"; + color: #3d4d65; +} +.content .title ul li p { + font: 500 24px "Arial"; + color: #3fa8eb; + margin-bottom: 0; +} +.content .title ul li:nth-child(1) { + border: none; +} +.content .chart { + background-color: #fff; + position: relative; + padding-bottom: 24px; +} +.content .chart h3 { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + padding: 20px 15px; + margin: 0; + width: 12%; + display: inline-block; +} +.content .chart .AlarmChart { + height: 0px; + overflow: hidden; + border-bottom: 1px solid #f5f5f5; + transition: all 0.3s linear; +} +.content .chart .alarmChart-active { + height: 386px; +} +.content .chart .open-close { + width: 50px; + height: 25px; + position: absolute; + left: 50%; + bottom: 0px; + transform: translate(-25px, 0); + border: none; + outline: none; + cursor: pointer; + background-color: #fff; + background: url(../../../assets/images/open-close.png) no-repeat center -27px; +} +.content .chart .open-close:hover { + background: url(../../../assets/images/open-close.png) no-repeat center -79px; +} +.content .chart .open-close-active { + background: url(../../../assets/images/open-close.png) center -1px; +} +.content .chart .open-close-active:hover { + background: url(../../../assets/images/open-close.png) no-repeat center -53px; +} +.content .tablelist { + background-color: #fff; + padding: 24px 10px 0px; + border-radius: 0 0 5px 5px; +} +.content .tablelist .action { + padding: 10px 0 0 20px; +} +.content .tablelist .action .details { + display: inline-block; + width: 16px; + height: 16px; + background: url(../../../assets/images/icon.png) center -113px; +} +.content .tablelist .action .details:hover { + background: url(../../../assets/images/icon.png) no-repeat center -128px; +} diff --git a/usecaseui-portal/src/app/views/alarm/alarm.component.html b/usecaseui-portal/src/app/views/alarm/alarm.component.html new file mode 100644 index 00000000..312ec236 --- /dev/null +++ b/usecaseui-portal/src/app/views/alarm/alarm.component.html @@ -0,0 +1,138 @@ + +

    Alarm Device Alarm Details

    +
    +
    +
    +
    +
    Active
    +
    13,980
    +
    +
    There are 13980 faults waiting to be solved
    +
    +
    +
    Closed
    +
    23,980
    +
    +
    23,980 faults have been fixed
    +
    +
    +
    + Daily Total + +
    +
    +
    +
    +
    + Source Name: + + + + +
    +
    + Priority: + + + + +
    +
    + Status: + + + + +
    +
    + Report Time: + + +
    + +
    +
    +
    + + +
    + + + + NO + Source Name + Priority + SpecificProblem + Report Time + Clear Time + Status + Action + + + + + {{i+1}} + {{item.sourceName}} + {{item.priority}} + {{item.specificProblem}} + {{item.startEpochMicrosec | date:'yyyy-MM-dd HH:mm:ss'}} + {{item.startEpochMicrosecCleared | date:'yyyy-MM-dd HH:mm:ss'}} + {{item.status}} + + + + +
    +
    +
    + +
    +
    \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/alarm/alarm.component.less b/usecaseui-portal/src/app/views/alarm/alarm.component.less new file mode 100644 index 00000000..92c9b7a4 --- /dev/null +++ b/usecaseui-portal/src/app/views/alarm/alarm.component.less @@ -0,0 +1,244 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.title { + font: 500 16px/16px "ArialMT"; + color: #3C4F8C; + margin: 20px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 20px; +} +.select { + margin-bottom: 15px; + width: 100%; + .query_criteria { + width: 100%; + .query_item { + width: 20%; + display: inline-block; + span { + display: inline-block; + font: 500 13px "ArialMT"; + color: #3C4F8C; + } + nz-dropdown { + vertical-align: middle; + width: 55%; + :hover{ + border-color: #48C6EF; + } + button { + width: 100%; + height: 30px; + background-color: #fff; + text-align: left; + border-color: #EEEEEE ; + border-radius: 2px; + span { + font-weight: 400; + color:rgba(60,79,140,0.5); + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + padding-top: 2px; + } + i { + position: absolute; + top: 10px; + right: 10px; + } + } + } + } + + .query_time{ + display: inline-block; + span { + font: 500 13px "ArialMT"; + color: #3C4F8C; + } + } + .search { + margin-left: 0.8%; + height: 30px; + padding: 0 10px; + span { + color: #fff; + font-weight: 400; + } + } + } +} +.charts{ + width: 100%; + height: 250px; + margin-bottom: 25px; + .chartsleft { + width: 30%; + height: 100%; + float: left; + margin-right: 2%; + color: #fff; + font-family:"ArialMT"; + .sctive_closed { + height: 48.75%; + padding: 12px; + width: 100%; + :first-child{ + font-size: 14px; + } + :nth-child(2) { + font-size: 18px; + } + :nth-child(3) { + font-size: 12px; + } + } + .active { + margin-bottom: 5px; + background: -webkit-linear-gradient(left, #FB7788 , #FB93C2); /* Safari 5.1 - 6.0 */ + background: -o-linear-gradient(right, #FB7788, #FB93C2); /* Opera 11.1 - 12.0 */ + background: -moz-linear-gradient(right, #FB7788, #FB93C2); /* Firefox 3.6 - 15 */ + background: linear-gradient(to right, #FB7788 , #FB93C2); /* 标准的语法（必须放在最后） */ + } + .closed { + margin-top: 2px; + background: -webkit-linear-gradient(left, #7A8BAE , #A6BFE4); /* Safari 5.1 - 6.0 */ + background: -o-linear-gradient(right, #7A8BAE , #A6BFE4); /* Opera 11.1 - 12.0 */ + background: -moz-linear-gradient(right, #7A8BAE , #A6BFE4); /* Firefox 3.6 - 15 */ + background: linear-gradient(to right, #7A8BAE , #A6BFE4); /* 标准的语法（必须放在最后） */ + } + + } + .chartsright { + background-color: #fff; + width: 68%; + padding: 20px; + float: left; + height: 100%; + .picker { + float: right; margin-right: 3%; + } + .datapicker { + padding-left: 700px; + } + } +} +.content { + .title { + border-radius: 5px 5px 0 0; + background-color: #fff; + height: 106px; + border-bottom: 1px solid #f0f0f0; + margin-bottom: 0; + ul { + display: flex; + display: -webkit-flex; + justify-content: space-around; + align-items: center; + padding: 0; + margin: 0; + height: 100%; + li { + list-style: none; + padding-left: 32px; + width: 100%; + border-left: 1px solid #eceff4; + h5 { + font: 500 14px "Arial"; + color: #3d4d65; + } + p { + font: 500 24px "Arial"; + color: #3fa8eb; + margin-bottom: 0; + } + } + li:nth-child(1){ + border: none; + } + } + } + .chart { + background-color: #fff; + position: relative; + padding-bottom: 24px; + h3 { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + padding: 20px 15px; + margin: 0; + width: 12%; + display: inline-block; + } + .AlarmChart { + height: 0px; + overflow: hidden; + border-bottom: 1px solid #f5f5f5; + transition: all 0.3s linear; + } + .alarmChart-active { + height: 386px; + } + .open-close { + width: 50px; + height: 25px; + position: absolute; + left: 50%; + bottom: 0px; + transform: translate(-25px,0); + border: none; + outline: none; + cursor: pointer; + background-color: #fff; + background: url(../../../assets/images/open-close.png) no-repeat center -27px; + &:hover { + background: url(../../../assets/images/open-close.png) no-repeat center -79px; + } + } + .open-close-active { + background: url(../../../assets/images/open-close.png) center -1px; + &:hover { + background: url(../../../assets/images/open-close.png) no-repeat center -53px; + } + } + } + .tablelist { + // background-color: #fff; + // padding: 24px 10px 0px; + border-radius: 0 0 5px 5px; + .action{ + padding: 10px 0 0 20px; + .details{ + display: inline-block; + width: 16px; + height: 16px; + background: url(../../../assets/images/icon.png) center -113px; + &:hover { + background: url(../../../assets/images/icon.png) no-repeat center -128px; + } + } + } + } +} + + + + + diff --git a/usecaseui-portal/src/app/views/alarm/alarm.component.spec.ts b/usecaseui-portal/src/app/views/alarm/alarm.component.spec.ts new file mode 100644 index 00000000..9f01597e --- /dev/null +++ b/usecaseui-portal/src/app/views/alarm/alarm.component.spec.ts @@ -0,0 +1,66 @@ +import { async, ComponentFixture, TestBed, inject, fakeAsync } from '@angular/core/testing'; +import { NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { NgxEchartsModule } from 'ngx-echarts'; +import { NgZorroAntdModule } from 'ng-zorro-antd'; +import { TranslateModule, TranslateLoader, TranslateService, TranslateFakeLoader } from '@ngx-translate/core'; +import { HttpClientModule } from '@angular/common/http'; +import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { NZ_I18N, en_US } from 'ng-zorro-antd'; + +import { AlarmComponent } from './alarm.component'; +import { DetailsComponent } from '../../shared/components/details/details.component'; +import { LineComponent } from '../../shared/components/charts/line/line.component'; +import { HomesService } from '../../core/services/homes.service'; + +fdescribe('AlarmComponent', () => { + let component: AlarmComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [AlarmComponent, DetailsComponent, LineComponent], + imports: [TranslateModule.forRoot({ loader: { provide: TranslateLoader, useClass: TranslateFakeLoader } }), + NgZorroAntdModule.forRoot(), + NgxEchartsModule, + HttpClientModule, + BrowserAnimationsModule, + HttpClientTestingModule], + providers: [TranslateService, HomesService, + { provide: NZ_I18N, useValue: en_US }], + schemas: [ + CUSTOM_ELEMENTS_SCHEMA, + NO_ERRORS_SCHEMA + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AlarmComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', inject([HttpTestingController, HomesService], + (httpMock: HttpTestingController, service: HomesService) => { + expect(component).toBeTruthy(); + })); + + it('expects service to fetch data with proper sorting', + inject([HttpTestingController, HomesService], + (httpMock: HttpTestingController, service: HomesService) => { + // We call the service + service.getqueryAllSourceNames().subscribe(data => { + expect(data.pageInfo.totalRecordCount).toBe(21); + expect(data.pageInfo.pageNumber).toBe(0); + expect(data.data.length).toBe(7); + }); + // We set the expectations for the HttpClient mock + const req = httpMock.expectOne('http://.../data/contacts'); + expect(req.request.method).toEqual('GET'); + // Then we set the fake data to be returned by the mock + req.flush({ data: ...}); + }) + ); +}); diff --git a/usecaseui-portal/src/app/views/alarm/alarm.component.ts b/usecaseui-portal/src/app/views/alarm/alarm.component.ts new file mode 100644 index 00000000..32e3456f --- /dev/null +++ b/usecaseui-portal/src/app/views/alarm/alarm.component.ts @@ -0,0 +1,301 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { Component, OnInit, Input, Output, EventEmitter, HostBinding, Pipe, PipeTransform } from '@angular/core'; +import { HomesService } from '../../core/services/homes.service'; +import { showHideAnimate, slideToRight } from '../../animates'; +import { DatePipe } from '@angular/common'; +@Component({ + selector: 'app-alarm', + templateUrl: './alarm.component.html', + styleUrls: ['./alarm.component.less'], + animations: [ + showHideAnimate, slideToRight + ], + providers: [DatePipe] +}) +export class AlarmComponent implements OnInit { + size = 'day'; + @HostBinding('@routerAnimate') routerAnimateState; //Routing animation + public currentPage: number = 1; + public pageSize: number = 10; + public sourceName: string = ''; + public priority: string = ''; + public startTime: string = this.myhttp.dateformater(Date.now() - 30 * 24 * 60 * 60 * 1000); + public endTime: string = this.datePipe.transform(new Date(), 'yyyy-MM-dd HH:mm:ss'); + public vfStatus: string = ''; + public sourceNameList: Array = ['---auto---']; + list: any; + sourcenames: any; + constructor( + private datePipe: DatePipe, + private myhttp: HomesService) { } + ngOnInit() { + this.getAlarmFormData(); + this.getSourceNames(); + + // this.getstatuscount(); + } + + // Filter box + sourceNameSelected = this.sourceNameList[0]; + + priorityList = ['---auto---', 'Critical', 'Major', 'Minor', 'Warning']; + prioritySelected = this.priorityList[0]; + + + statusList = ['---auto---', 'active', 'Close']; + statusSelected = this.statusList[0]; + + choseSourceName(item) { + if (item == "---auto---") { + this.sourceName = ''; + } else { + this.sourceName = item; + } + this.sourceNameSelected = item; + + } + chosePriority(item) { + this.prioritySelected = item; + if (item == "---auto---") { + this.priority = ''; + } else { + this.priority = item; + } + } + choseStatus(item) { + this.statusSelected = item; + if (item == "---auto---") { + this.vfStatus = ''; + } else { + this.vfStatus = item; + } + } + getSourceNames() { + this.myhttp.getSourceNames().subscribe((data) => { + for (let i = 0; i < data.length; i++) { + this.sourceNameList.push(data[i]); + } + this.sourceNameSelected = this.sourceNameList[0]; + }) + } + + // Date screening + dateRange = [(new Date(), -30), new Date()]; + onChange(result: Date): void { + this.startTime = this.datePipe.transform(result[0], 'yyyy-MM-dd'); + this.endTime = this.datePipe.transform(result[1], 'yyyy-MM-dd'); + } + dateRange2 = [(new Date(), -30), new Date()]; + onChange2(result: Date): void { + this.startTime = this.datePipe.transform(result[0], 'yyyy-MM-dd'); + this.endTime = this.datePipe.transform(result[1], 'yyyy-MM-dd'); + } + + // total + alarmList = { + all: 0, + closed: 0, + activeNum: 0 + } + // total data + // getstatuscount() { + // this.myhttp.getstatuscount().subscribe((data) => { + // this.alarmList.activeNum = data[0]; + // this.alarmList.closed = data[1]; + // this.alarmList.all = (data[0] - 0) + (data[1] - 0); + + // }) + // } + getAlarmFormData() { + this.myhttp.getAlarmFormData(this.currentPage, this.pageSize, this.sourceName, this.priority, this.startTime, this.endTime, this.vfStatus).subscribe((data) => { + this.list = data.alarms; + }) + // this.getAlarmChartData(event); + } + getAlarmChartData() { + let paramsObj = { + // sourceName: this.sourceName, + // startTime: this.startTime, + // endTime: this.endTime, + // format: 'day' + } + this.myhttp.getHomeAlarmChartData(paramsObj) + .subscribe((data) => { + this.alarmChartData = { + xAxis: { + data: data.dateList + }, + series: [ + { data: data.allList }, + { data: data.ActiveList }, + ] + } + }, (err) => { + console.log(err); + }) + } + // day alarmchartdata + // day() { + // let paramsObj = { + // sourceName: this.sourceName, + // startTime: this.startTime, + // endTime: this.endTime, + // format: "day" + // } + // this.myhttp.getHomeAlarmChartData(paramsObj) + // .subscribe((data) => { + // this.alarmChartData = { + // xAxis: { + // data: data.dateList + // }, + // series: [ + // { data: data.allList }, + // { data: data.ActiveList }, + // { data: data.closedList } + // ] + // } + // }, (err) => { + // console.log(err); + // }) + // } + // month() { + // let paramsObj = { + // sourceName: this.sourceName, + // startTime: this.startTime, + // endTime: this.endTime, + // format: "month" + // } + // this.myhttp.getHomeAlarmChartData(paramsObj) + // .subscribe((data) => { + // this.alarmChartData = { + // xAxis: { + // data: data.dateList + // }, + // series: [ + // { data: data.allList }, + // { data: data.ActiveList }, + // { data: data.closedList } + // ] + // } + // }, (err) => { + // console.log(err); + // }) + // } + //Line chart + alarmShow = false; + alarmChartData: Object; + alarmChartInit: Object = { + height: 200, + option: { + legend: { + icon: "circle", + itemWidth: 10, + itemHeight: 10, + bottom: '-5px', + data: ['Active', 'Fixed'] + }, + tooltip: { + trigger: 'axis', + }, + dataZoom: [ + { + type: 'slider', + show: true, + start: 1, + height: 10, + end: 60, + bottom: '9%' + } + ], + xAxis: { + data: [] + }, + series: [ + { + name: 'Active', + type: 'bar', + data: [], + barWidth: 10, + barGap: 1, + itemStyle: { + normal: { + barBorderRadius: [5], + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: '#FB7788' + }, { + offset: 1, color: '#FB93C2' + }], + }, + opacity: 1, + } + } + }, + { + name: 'Fixed', + type: 'bar', + data: [], + barWidth: 10, + barGap: 1, + itemStyle: { + normal: { + barBorderRadius: [5], + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: '#7A8BAE' + }, { + offset: 1, color: '#A6BFE4' + }], + }, + opacity: 1, + } + } + }, + ] + } + }; + sort(e) { + + } + //Detail page title display + detailshow = false; + // Show hidden animation + state = "show"; + state2 = "hide"; + detailId: string; + detailShow(item) { + this.state = 'hide'; + this.state2 = 'show'; + this.detailshow = true; + this.detailId = item.id; + } + detailHide() { + this.state = 'show'; + this.state2 = 'hide'; + this.detailshow = false; + } +} diff --git a/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.css b/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.css new file mode 100644 index 00000000..efeec683 --- /dev/null +++ b/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.css @@ -0,0 +1,321 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 10px; +} +.model { + background-color: #F7F8FC; + overflow-y: auto; +} +.creation-model{ + position: relative; +} +.top-title{ + width: 100%; + padding: 20px; + position: relative; + display: inline-block; +} +.model .back,.model .back:hover{ + position: absolute; + top: 10px; + right: 20px; + display: inline-block; + width: 35px; + height: 35px; + background:url("../../../assets/images/Return-icon.png") no-repeat!important; + background-size: 100%!important; + border-radius:4px; + color: #D7D7D7; + cursor: pointer; +} +.model .back:hover{ + background: url("../../../assets/images/Return-icon-active.png")!important; + background-size: 100%!important; +} +.top-title h3.title { + height: 35px; + width: 80%; + font-size:16px; + font-family:ArialMT; + color:#3C4F8C; + line-height:35px; + display: inline-block; + +} +.model .submit{ + position: absolute; + width:90px; + height: 35px; + top: 10px; + right: 85px; + color: #fff; + font-size: 18px; + background:#0DA9E2; + border-radius:4px; + border: none!important; + border-color:rgba(0,0,0,0)!important; +} +.model .submit:hover{ + background:#09C6E2; + border: none; +} +.model .creation { + width: 100%; + overflow-y: auto; + border-radius: 5px; + padding: 15px; +} +.model .creation h3 { + height: 20px; + font: 700 16px/20px "Arial"; + margin: 5px 0px; + color: #000; +} +/* SOTN VPN */ +.model .creation .service-title{ + margin:60px 50px; +} +.model .creation .service-title .info-inputs{ + width:400px; + height: 42px; + display: inline-block; +} +.model .creation .service-title span{ + height: 42px; + line-height: 42px; + vertical-align: middle; +} +.model .creation .service-title .lable{ + display: inline-block; + width: 100px; + font: 700 14px "Arial"; + color: #3C4F8C; + height: 42px; + line-height: 42px; + vertical-align: middle; + margin-left: 5px; +} +.model .creation .service-title input { + width: 230px; + height: 42px; + border-radius:4px; + outline: none; + margin-right: 50px; +} +/* Site List */ +/* addsite model */ +.model .sitemodel,.model .sotnnpnmodel{ + position: absolute; + z-index: 1001; + left: 50px; + top: 60px; + background-color: #fff; + width:1500px; + height: 81%; + border-radius:2px; + overflow:auto; +} +.model .sotnnpnmodel{ + width: 1000px; + height: 53%; + top:200px; + left: 50%; + margin-left: -500px; +} +.model .sitemodel h3,.model .sotnnpnmodel h3{ + width: 96%; + height: 40px; + line-height: 35px; + font-size: 18px; + font-weight: 500; + margin: 10px auto; + color: #06A7E2; + border-bottom: 2px solid; + border-image: -webkit-linear-gradient(#07A9E1,#30D9C4) 100 100; + border-image: -moz-linear-gradient(#07A9E1,#30D9C4) 100 100; + border-image: linear-gradient(#07A9E1,#30D9C4) 100 100; + border-radius:2px; +} +.model .sitemodel .inputs,.model .sotnnpnmodel .inputs { + padding: 10px 20px 0; +} +.model .sitemodel .inputs ul li,.model .sotnnpnmodel .inputs ul li { + display: inline-block; + height: 35px; + line-height: 35px; + width: 24.5%; + margin-bottom: 20px; +} +.model .sotnnpnmodel .inputs ul li{ + width: 31%; +} +.model .sitemodel .inputs ul li span,.model .sotnnpnmodel .inputs ul li span { + display: inline-block; + line-height: 35px; + font-size: 14px; + font-weight: 500; + color: #3C4F8C; + margin-left: 10px; + vertical-align: middle; + float: left; +} +.model .sitemodel .inputs input,.model .sitemodel .inputs nz-select { + width: 186px; + float: right; + margin-right: 60px; +} +.model .sotnnpnmodel .inputs input{ + width: 186px; + float: left; + margin-left: 20px; +} +.model .sitemodel .action,.model .sotnnpnmodel .action { + text-align: center; + margin-top: 30px; + margin-bottom: 20px; + cursor: pointer +} +.model .sotnnpnmodel .action{ + margin-top: 70px; +} +.model .sitemodel .action button,.model .sotnnpnmodel .action button{ + width: 126px; + height:40px; + background:#EEEEEE; + border-radius:2px; + border: none!important; + color: #9DA7C5; + font-size: 16px; + margin: 0 15px; +} +.model .sitemodel .action button:nth-child(2),.model .sotnnpnmodel .action button:nth-child(2){ + background: #0DA9E2; + color: #fff; +} +.model .sitemodel .action button:nth-child(2):hover,.model .sotnnpnmodel .action button:nth-child(2):hover{ + background:#09C6E2; +} + +.model nz-table tbody td i.anticon:hover { + color: #3fa8eb; + cursor: pointer; +} + +/* site table */ +.sitemodel h3 button,.sotnnpnmodel h3 button{ + color: #D7D7D7; + width:32px; + height:32px; + background:#ffffff; + border-radius:4px; + border:1px solid #D7D7D7; +} +.sitemodel h3 button:hover,.sotnnpnmodel h3 button:hover{ + background:#ffffff; + color: #0DA9E2; + border:1px solid #0DA9E2; +} +.sitemodel h3>button,.sotnnpnmodel h3>button{ + float: right; + width: 30px; + height: 30px; + margin-right: 15px; +} +.model nz-table tbody th{ + color:rgba(60,79,140,0.5); + font-size: 16px; +} +.model .site nz-table tbody td i.anticon:hover { + color: #3fa8eb; + cursor: pointer; +} +/* WAN Port */ + +.mask{ + width: 100%; + height: 100%; + position: absolute; + z-index: 1000; + background: rgba(0, 0, 0, 0.65); + top:0; +} + + +/* chart */ +.model .chart { + width: 98%; + padding: 10px; + margin: 0 auto; + color: #06A7E2; + font-size: 16px; + font-weight: 500; + margin-bottom: 30px; + background: #EEF9FF; + border-radius:4px; +} +.model .chart #createChart { + width: 100%; + height: 220px; + margin-top: 20px; + position: relative; +} +.model .chart #createChart .siteNameP { + position: fixed; + border: 5px; + padding: 3px 5px; + color: #fff; + background: #999; + box-shadow: 0px 0px 20px #000; + max-width: 100px; + overflow: hidden; + text-overflow: ellipsis; +} +.model .creation .sotnvpn,.model .creation .site{ + background: #fff; + padding: 30px 30px 0 30px; +} +.siteWanTab{ + width: 96%; + margin: 0 auto; + margin-top: 10px; +} +.siteWanTab th{ + padding: 10px 8px; + color: #3C4F8C; + font-size: 16px; +} +.siteWanTab tr td{ + padding: 10px 5px; +} +.siteWanTab .tr-border{ + border-bottom: 1px solid #EDEDED; +} +.addListBtn{ + margin-right: 30px; + color: #06A7E2; + border: none; + background: rgba(229,238,252,0.8); + cursor: pointer; +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.html b/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.html new file mode 100644 index 00000000..1fc9a500 --- /dev/null +++ b/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.html @@ -0,0 +1,275 @@ + +
    + +
    +

    {{createParams.commonParams.templateType}} + {{"i18nTextDefine_InstanceCreation" | translate}}

    +
    + + +
    +
    + +
    + + {{"i18nTextDefine_InstanceTopology" | translate}} + +
    + + + +
    +
    + +
    + + +
    + *name: + + *description: + +
    +     + +
    +
    +

    sdwanVPN List

    + +
    + + + + NO. + {{key.split("_")[1] || key}} + Action + + + + + {{i+1}} + + {{item[keys]}} + + + +   + + + + + +
    +     + +
    +
    +

    Site List

    + +
    + + + + NO. + {{key.split("_")[1] || key}} + Action + + + + + {{i+1}} + + {{item[keys]}} + + + +   + + + + + +
    +     +     +
    + +
    +

    {{"i18nTextDefine_Base" | translate}}

    +
    +
      +
    • + *{{item.lableShow}}: +
      • +
    +
    +
    +

    Sdwansitelan List

    +
    +
    + +
    + + + + + + + + + + + + + + + +
    NO.{{key}} Action
    {{i+1}} + {{item[key]}} + + + + +
    +
    +
    + +
    + + +
    +
    + +
    +

    {{"i18nTextDefine_Base" | translate}}

    +
    +
      +
    • + *{{item.lableShow}}: +
      • +
    +
    +
    +

    Sdwandevice

    +
    +
    + +
    + + + + + + + + + + + + + + + +
    NO.{{key}} Action
    {{i+1}} + {{item[key]}} + + + + +
    +
    + + +

    Sdwansitewan List

    +
    +
    + +
    + + + + + + + + + + + + + + + +
    NO.{{key}} Action
    {{i+1}} + {{item[key]}} + + + + +
    +
    +
    + +
    + + +
    +
    +
    +
    \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.spec.ts b/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.spec.ts new file mode 100644 index 00000000..30402412 --- /dev/null +++ b/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.spec.ts @@ -0,0 +1,24 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CcvpnCreationComponent } from './ccvpn-creation.component'; +describe('CcvpnCreationComponent', () => { + let component: CcvpnCreationComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ CcvpnCreationComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CcvpnCreationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.ts b/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.ts new file mode 100644 index 00000000..214afbb7 --- /dev/null +++ b/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.ts @@ -0,0 +1,723 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import * as d3 from 'd3'; +import * as $ from 'jquery'; +import { MyhttpService } from '../../core/services/myhttp.service'; +import { el } from "@angular/platform-browser/testing/src/browser_util"; + +@Component({ + selector: 'app-ccvpn-creation', + templateUrl: './ccvpn-creation.component.html', + styleUrls: ['./ccvpn-creation.component.css'] +}) +export class CcvpnCreationComponent implements OnInit { + + constructor(private myhttp: MyhttpService) { } + @Input() createParams; + @Input() ccvpn_temParametersContent; + @Output() closeCreate = new EventEmitter(); + + ngOnInit() { + this.getccvpnTemParameters(this.ccvpn_temParametersContent); + } + + //tabBarStyle + tabBarStyle = { + "height": "58px", + "width": "694px", + "box-shadow": "none", + "margin": "0", + "border-radius": "4px 4px 0px 0px" + }; + templateParameters = { + service: {}, + sotnvpn: { + info: {}, + sdwanvpnresource_list: [], + sdwansitelan_list: [] + }, + site: { + info: {}, + sdwansiteresource_list: [], + sdwandevice_list: [], + sdwansitewan_list: [] + } + }; + + bodyTemplateParameter = {}; + + // SOTN VPN List + sotnVpnTableData = []; + sotnInfo = {};//sotnmodel The first part of sotnInfo + sotnSdwansitelanData = [];//sotnmodel The second part of the data sdwansitelan Table + sotnSdwansitelanParams = {};//sdwansitelan Table Detailed parameters of each line of data + tabInputShowSdwansitelan = [];//sdwansitelan Table input&span The status identifier of the label switching display + // Site List + siteTableData = []; + siteBaseData = {}; //sitemodel one sdwansiteresource_list + // cpe + siteSdwanDevice = []; //sitemodel SdwanDevice port Table data + siteCpeData = {}; //sitemodel two sdwandevice_list + tabInputShowDevice = [];//Device port Table input和span The status identifier of the label switching display + // Wan Port + siteWanData = []; //sitemodel three wan port Table data + siteWanParams = {}; //wan port Table Detailed parameters of each line of data + tabInputShowWanPort = [];//wan port Table input和span The status identifier of the label switching display + getKeys(item) { + return Object.keys(item); + } + + getccvpnTemParameters(data) { //Get template parameters + console.log(this.createParams); + if (typeof data["model"] == 'string') { + data = JSON.parse(data["model"]); + } + console.log(data); + let inputss = data["inputs"]; + let inputs = {}; + this.templateParameters.service = { + name: data.metadata["name"], + description: data.metadata.description, + serviceInvariantUuid: data.metadata.invariantUUID, + serviceUuid: data.metadata.UUID + }; + + //Screening separation sotnvpn data + Object.keys(inputss).map((items) => { + if (items.search("vpn") != -1) { + this.bodyTemplateParameter[items] = []; + inputss[items].map((item, index) => { + if (item["required"] != undefined) { + this.templateParameters["sotnvpn"]["sdwanvpnresource_list"].push(item); + } + if (item["required"] == undefined && Object.keys(item).length == 1 && Object.keys(item)[0].search("site") != -1 && item[Object.keys(item)[0]] instanceof Array === true) { + this.templateParameters["sotnvpn"]["sdwansitelan_list"] = item[Object.keys(item)[0]] + let sitelanKey = {}; + sitelanKey[Object.keys(item)[0]] = []; + this.bodyTemplateParameter[items].push(sitelanKey); + } + }); + } + if (items.search("site") != -1) { + this.bodyTemplateParameter[items] = []; + inputss[items].map((item, index) => { + if (item["required"] != undefined) { + this.templateParameters["site"]["sdwansiteresource_list"].push(item); + } + if (item["required"] == undefined && Object.keys(item).length == 1 && Object.keys(item)[0].search("device") != -1 && item[Object.keys(item)[0]] instanceof Array === true) { + this.templateParameters["site"]["sdwandevice_list"] = item[Object.keys(item)[0]]; + let sitelanKey = {}; + sitelanKey[Object.keys(item)[0]] = []; + this.bodyTemplateParameter[items].push(sitelanKey); + } + if (item["required"] == undefined && Object.keys(item).length == 1 && Object.keys(item)[0].search("site") != -1 && Object.keys(item)[0].search("device") == -1 && item[Object.keys(item)[0]] instanceof Array === true) { + this.templateParameters["site"]["sdwansitewan_list"] = item[Object.keys(item)[0]]; + let sitelanKey = {}; + sitelanKey[Object.keys(item)[0]] = []; + this.bodyTemplateParameter[items].push(sitelanKey); + } + }); + } + }); + this.showTemParametersSotnVpn(); + this.showTemParametersSite(); + console.log(this.bodyTemplateParameter, this.templateParameters) + } + + //sotnVpn data, after combining the structure, rendering the template data to the page + showTemParametersSotnVpn() { + //sotn Data analysis, structure assembly + this.templateParameters.sotnvpn.sdwanvpnresource_list.map((item, index) => { + let input = {}; + for (var keys in item) { + if (keys != "required" && keys != "type" && keys != "description") { + input[keys] = item[keys]; + item["lable"] = keys; + item["lableShow"] = keys.split("_")[1]; + this.sotnInfo = Object.assign(this.sotnInfo, input); + } + } + }); + + this.templateParameters.sotnvpn.sdwansitelan_list.map((item, index) => { + let input = {}; + for (var keys in item) { + if (keys != "required" && keys != "type" && keys != "description") { + input[keys] = item[keys]; + item["lable"] = keys; + this.sotnSdwansitelanParams = Object.assign(this.sotnSdwansitelanParams, this.sotnSdwansitelanParams, input); + } + } + }); + this.sotnSdwansitelanData.push(this.sotnSdwansitelanParams); + this.sotnSdwansitelanData.map((item, index) => { + this.tabInputShowSdwansitelan[index] = true; + }); + } + + //Site data, after combining the structure, rendering the template to the page + showTemParametersSite() { + //site Data analysis, structure assembly + this.templateParameters.site.sdwansiteresource_list.map((item, index) => { + let input = {}; + for (var keys in item) { + if (keys != "required" && keys != "type" && keys != "description") { + input[keys] = item[keys]; + item["lable"] = keys; + item["lableShow"] = keys.split("_")[1]; + this.siteBaseData = Object.assign(this.siteBaseData, input); + } + } + }); + + this.templateParameters.site.sdwandevice_list.map((item, index) => { + let input = {}; + for (var keys in item) { + if (keys != "required" && keys != "type" && keys != "description") { + input[keys] = item[keys]; + item["lable"] = keys; + this.siteCpeData = Object.assign(this.siteCpeData, input); + } + } + }); + this.templateParameters.site.sdwandevice_list.map((item, index) => { + if (this.getKeys(item).indexOf("lable") == -1) { + this.templateParameters.site.sdwandevice_list.splice(index, 1) + } + }); + this.templateParameters.site.sdwansitewan_list.push( + { + ipMode: "", + description: "" + }, + { + publicIP: "", + description: "" + } + ); + + this.templateParameters.site.sdwansitewan_list.map((item, index) => { + let input = {}; + for (var keys in item) { + if (keys != "required" && keys != "type" && keys != "description") { + input[keys] = item[keys]; + item["lable"] = keys; + this.siteWanParams = Object.assign(this.siteWanParams, this.siteWanParams, input); + } + } + }); + this.siteSdwanDevice.push(this.siteCpeData); + this.siteWanData.push(this.siteWanParams); + this.siteWanData.map((item, index) => { + this.tabInputShowDevice[index] = true; + }); + this.siteWanData.map((item, index) => { + this.tabInputShowWanPort[index] = true; + }); + + } + + //add,edit,delete sotnSdwansitelan + addSotnSdwansitelan() { + if (this.tabInputShowSdwansitelan.indexOf(true) > -1) {//Adding new rows is not allowed when there is a row of data being edited + return false; + } + let addNum = this.sotnSdwansitelanData.length; + let inputsData = Object.assign({}, this.sotnSdwansitelanParams); + Object.keys(inputsData).forEach((item) => {//Add a new line of empty data + if (item != "description") { + inputsData[item] = null; + } + }); + this.sotnSdwansitelanData[addNum] = inputsData; + this.tabInputShowSdwansitelan[addNum] = true; + this.sotnSdwansitelanData = [...this.sotnSdwansitelanData]; //Table refresh + } + editSotnSdwansitelan(num, item, sotnSdwansitelanData) { + if (this.tabInputShowSdwansitelan[num - 1] == false) { + this.tabInputShowSdwansitelan[num - 1] = true; + } else { + this.tabInputShowSdwansitelan[num - 1] = false; + } + } + deleteSotnSdwansitelan(num, item, sotnSdwansitelanData) { + if (this.sotnSdwansitelanData.length <= 1) { + return false; + } else { + + } + this.sotnSdwansitelanData = this.sotnSdwansitelanData.filter((d, i) => i !== num - 1); + } + + //add,edit,delete SdwanDevice + addSdwanDevice() { + if (this.tabInputShowDevice.indexOf(true) > -1) {//当有正在编辑的一行数据时，不允许添加新的行 + return false; + } + let addNum = this.siteSdwanDevice.length; + let inputsData = Object.assign({}, this.siteCpeData); + Object.keys(inputsData).forEach((item) => {//新增一行空数据 + if (item != "description") { + inputsData[item] = null; + } + }); + this.siteSdwanDevice[addNum] = inputsData; + this.tabInputShowDevice[addNum] = true; + this.siteSdwanDevice = [...this.siteSdwanDevice]; //表格刷新 + } + + editDevicePort(num, item, siteSdwanDevice) { + if (this.tabInputShowDevice[num - 1] == false) { + this.tabInputShowDevice[num - 1] = true; + } else { + this.tabInputShowDevice[num - 1] = false; + } + } + + deleteDevicePort(num, item, siteSdwanDevice) { + if (this.siteSdwanDevice.length <= 1) { + return false; + } + this.siteSdwanDevice = this.siteSdwanDevice.filter((d, i) => i !== num - 1); + } + + //add,edit,delete siteWanPort + addSiteWan() { + if (this.tabInputShowWanPort.indexOf(true) > -1) {//Adding new rows is not allowed when there is a row of data being edited + return false; + } + let addNum = this.siteWanData.length; + let inputsData = Object.assign({}, this.siteWanParams); + Object.keys(inputsData).forEach((item) => {//Add a new line of empty data + if (item != "description") { + inputsData[item] = null; + } + }); + this.siteWanData[addNum] = inputsData; + this.tabInputShowWanPort[addNum] = true; + this.siteWanData = [...this.siteWanData]; //Table refresh + } + editWanPort(num, item, siteWanData) { + if (this.tabInputShowWanPort[num - 1] == false) { + this.tabInputShowWanPort[num - 1] = true; + } else { + this.tabInputShowWanPort[num - 1] = false; + } + } + deleteWanPort(num, item, siteWanData) { + if (this.siteWanData.length <= 1) { + return false; + } + this.siteWanData = this.siteWanData.filter((d, i) => i !== num - 1); + } + + //siteModel,sotnVpnModel Display sign + siteModelShow = false; + sotnVpnModelShow = false; + addSotnvpn() { + this.sotnVpnModelShow = true; + this.isEditSotnVpn = 0; + } + addSite() { + this.siteModelShow = true; + this.isEditSite = 0; + } + + //add sotnVpn model + isEditSotnVpn = 0;//Edit serial number, No value, 0 means increase + addSotnVpn_OK() { + let inputs = { + "sdwansitelan_list": [] + }; + inputs = Object.assign(inputs, this.sotnInfo); + inputs["sdwansitelan_list"] = this.sotnSdwansitelanData.map((item) => { + return Object.assign({}, item); + }); + if (this.isEditSotnVpn) { + // Edit status does not increase + this.sotnVpnTableData[this.isEditSotnVpn - 1] = inputs; + this.sotnVpnTableData = [...this.sotnVpnTableData]; //Table refresh + } else { + this.sotnVpnTableData = [...this.sotnVpnTableData, inputs]; + } + Object.keys(this.sotnInfo).forEach((item) => { //Clear modal box + this.sotnInfo[item] = null; + }); + this.sotnSdwansitelanData.forEach((item, index) => { + if (index > 0) { + this.sotnSdwansitelanData.splice(index, 1); + this.tabInputShowSdwansitelan.splice(index, 1); + } else { + Object.keys(item).forEach((item2) => { + item[item2] = null; + }); + this.tabInputShowSdwansitelan[index] = true; + } + + }); + this.sotnVpnModelShow = false; + } + + addSotnVpn_cancel() { + Object.keys(this.sotnInfo).forEach((item) => { //Clear modal box + this.sotnInfo[item] = null; + }); + this.sotnSdwansitelanData.forEach((item, index) => { + if (index > 0) { + this.sotnSdwansitelanData.splice(index, 1); + } else { + Object.keys(item).forEach((item2) => { + item[item2] = null; + }); + this.tabInputShowSdwansitelan[index] = true; + } + + }); + this.sotnVpnModelShow = false; + } + + editSotnVpn(num) { + this.sotnVpnModelShow = true; + this.isEditSotnVpn = num; + Object.keys(this.sotnInfo).forEach((item) => { //Clear modal box + this.sotnInfo[item] = this.sotnVpnTableData[num - 1][item]; + }); + this.sotnSdwansitelanData = this.sotnVpnTableData[num - 1].sdwansitelan_list.map((item) => { + return Object.assign({}, {}, item) + }); + this.sotnSdwansitelanData.forEach((item, index) => { + this.tabInputShowSdwansitelan[index] = false; + }); + } + + deleteSotnVpn(num) { + this.sotnVpnTableData = this.sotnVpnTableData.filter((d, i) => i !== num - 1); + } + + // addsite model + isEditSite = 0; //Edit serial number, No value, 0 means increase + addsite_OK() { + let inputs = { + "sdwandevice_list": [], + "sdwansitewan_list": [] + }; + inputs = Object.assign(inputs, this.siteBaseData); + inputs["sdwandevice_list"] = this.siteSdwanDevice.map((item) => { + return Object.assign({}, item); + }); + inputs["sdwansitewan_list"] = this.siteWanData.map((item) => { + return Object.assign({}, item); + }); + if (this.isEditSite) { + // Edit status does not increase + this.siteTableData[this.isEditSite - 1] = inputs; + this.siteTableData = [...this.siteTableData]; //Table refresh + } else { + this.siteTableData = [...this.siteTableData, inputs]; + } + + Object.keys(this.siteBaseData).forEach((item) => { //Clear modal box + this.siteBaseData[item] = null; + }); + this.siteSdwanDevice.forEach((item, index) => { + if (index > 0) { + this.siteSdwanDevice.splice(index, 1); + this.tabInputShowDevice.splice(index, 1); + } else { + Object.keys(item).forEach((item2) => { + item[item2] = null; + }); + this.tabInputShowDevice[index] = true; + } + }); + this.siteWanData.forEach((item, index) => { + if (index > 0) { + this.siteWanData.splice(index, 1); + this.tabInputShowWanPort.splice(index, 1); + } else { + Object.keys(item).forEach((item2) => { + item[item2] = null; + }); + this.tabInputShowWanPort[index] = true; + } + }); + console.log(this.siteTableData); + this.drawImage(this.siteTableData); + this.siteModelShow = false; + } + + addsite_cancel() { + Object.keys(this.siteBaseData).forEach((item) => { //Clear modal box + this.siteBaseData[item] = null; + }) + this.siteSdwanDevice.forEach((item, index) => { + if (index > 0) { + this.siteSdwanDevice.splice(index, 1); + } else { + Object.keys(item).forEach((item2) => { + item[item2] = null; + }); + this.tabInputShowDevice[index] = true; + } + + }); + this.siteWanData.forEach((item, index) => { + if (index > 0) { + this.siteWanData.splice(index, 1); + } else { + Object.keys(item).forEach((item2) => { + item[item2] = null; + }); + this.tabInputShowWanPort[index] = true; + } + + }); + this.siteModelShow = false; + } + + editSite(num) { //Edit and modify the selected site information + this.siteModelShow = true; + this.isEditSite = num; + Object.keys(this.siteBaseData).forEach((item) => { //Clear modal box + this.siteBaseData[item] = this.siteTableData[num - 1][item]; + }); + this.siteSdwanDevice = this.siteTableData[num - 1].sdwandevice_list.map((item) => { + return Object.assign({}, item) + }); + this.siteSdwanDevice.forEach((item, index) => { + this.tabInputShowDevice[index] = false; + }); + this.siteWanData = this.siteTableData[num - 1].sdwansitewan_list.map((item) => { + return Object.assign({}, item) + }); + this.siteWanData.forEach((item, index) => { + this.tabInputShowWanPort[index] = false; + }); + } + + deleteSite(num) { + this.siteTableData = this.siteTableData.filter((d, i) => i !== num - 1); + this.drawImage(this.siteTableData); + } + + // Site node graphic depiction + lines = []; + siteImage = []; + tpImage = []; + imgmap = { + '1': '../../../assets/images/domain1.png', + '2': '../../../assets/images/site.png' + }; + + drawImage(sitelist) { + let cx = 550; + let cy = 40; + let innerx1 = 720; //Left site pattern coordinate position + let innery1 = 40; + let ox = 950; + let oy = 50; + let innerx2 = 780;//Right site pattern coordinate position + let innery2 = 50; + let lateX1 = Math.random() * 30 + 55; + let lateX2 = 10; + let lateY1 = 15; + this.lines = sitelist.map((item, index) => { + let step = index + 1; + let x = cx; + let y = cy; + let innerX = innerx1; + let innerY = innery1; + if (step % 2 != 0) { //Left site pattern coordinate position + x = cx; + y = cy; + innerX = innerx1; + innerY = innery1; + if (step == 1) { + innerX = innerx1; + innerY = innery1; + } else { + x = cx - lateX1 * Math.ceil((step / 2)) >= 0 ? cx - lateX1 * Math.ceil((step / 2)) : -(cx - lateX1 * Math.ceil((step / 2))); + y = cy + lateY1 * Math.floor((step / 2)); + innerX = this.lines[step - 3].innerX - lateX2; + innerY = y; + } + } else { //Right site pattern coordinate position + x = ox; + y = oy; + innerX = innerx2; + innerY = innery2; + if (step / 2 == 1) { + innerX = innerx2; + innerY = innery2; + } else { + x = ox + lateX1 * (step / 2) >= 0 ? ox + lateX1 * (step / 2) : -(ox + lateX1 * (step / 2)); + y = oy + lateY1 * (step / 2 - 1); + innerX = this.lines[step - 3].innerX - lateX2; + innerY = y; + } + } + return { + img: "line", + site: item.sdwandevice_list[0].name, + x1: x, + y1: y, + x2: innerX, + y2: innerY, + innerX: innerX, + innerY: innerY + } + }); + this.render(this.imgmap, this.lines); + } + + render(imgmap, lines) { + + //enter + var svg = d3.select("svg"), + _g_lines = svg.selectAll('line.line') + .data(lines) + .enter() + .append('line') + .style('stroke', '#3fa8eb' + ) + .style('stroke-width', 2) + .attr('class', 'line') + .attr("x1", function (d) { + return d.x1; + }) + .attr("y1", function (d) { + return d.y1; + }) + .attr("x2", function (d) { + return d.x2; + }) + .attr("y2", function (d) { + return d.y2; + }), + _g_site = svg.selectAll('g.g-site') + .data(lines) + .enter() + .append('g') + .style('cursor', 'pointer') + .attr('class', 'g-site'); + _g_site.append('image') + .style("width", "50px") + .attr('xlink:href', function (d) { + return imgmap[2]; + }) + .attr("x", function (d) { + return d.x1 - 25; + }) + .attr("y", function (d) { + return d.y1 - 25; + }) + + //quit + svg.selectAll("g.g-site") + .data(lines) + .exit() //Select a picture without bound data + .remove(); + svg.selectAll("line.line") + .data(lines) + .exit() //Select the connection without binding data + .remove(); + + } + + modifyJosnKey(json, oddkey, newkey) { + + let val = json[oddkey]; + delete json[oddkey]; + json[newkey] = val; + } + + // submit createData + submit() { + let globalCustomerId = this.createParams.commonParams.customer.id; + let globalServiceType = this.createParams.commonParams.serviceType.name; + let servicebody = { + service: { + name: this.templateParameters.service["name"], + description: this.templateParameters.service["description"], + serviceInvariantUuid: this.templateParameters.service["serviceInvariantUuid"], + serviceUuid: this.templateParameters.service["serviceUuid"], + globalSubscriberId: globalCustomerId, //customer.id + serviceType: globalServiceType, //serviceType.value + parameters: { + locationConstraints: [], + resources: [], + requestInputs: {} + }, + } + }; + let siteresource = null, sitewan = null, device = null, vpnresource = null, sitelan = null; + Object.keys(this.bodyTemplateParameter).map((item, index) => { + if (item.search("site") != -1) { + siteresource = item; + this.bodyTemplateParameter[item].map((items, index) => { + if (Object.keys(items)[0].search("site") != -1 && Object.keys(items)[0].search("device") == -1) { + sitewan = Object.keys(items)[0] + } + if (Object.keys(items)[0].search("device") != -1) { + device = Object.keys(items)[0] + } + }); + } + if (item.search("vpn") != -1) { + vpnresource = item; + this.bodyTemplateParameter[item].map((items, index) => { + if (Object.keys(items)[0].search("site") != -1) { + sitelan = Object.keys(items)[0] + } + }); + } + }); + this.sotnVpnTableData.forEach((item, index) => { + Object.keys(item).map((items, index) => { + if (items.search("site") != -1 && item[items] instanceof Array === true) { + this.modifyJosnKey(item, items, sitelan) + } + }); + }); + this.siteTableData.forEach((item, index) => { + Object.keys(item).map((items, index) => { + if (items.search("site") != -1 && Object.keys(item)[0].search("device") == -1 && item[items] instanceof Array === true) { + this.modifyJosnKey(item, items, sitewan) + } + if (items.search("device") != -1) { + this.modifyJosnKey(item, items, device) + } + }); + }); + Object.keys(this.bodyTemplateParameter).map((item, index) => { + if (item.search("site") != -1) { + servicebody.service.parameters.requestInputs[item] = [].concat(this.siteTableData); + } + if (item.search("vpn") != -1) { + servicebody.service.parameters.requestInputs[item] = [].concat(this.sotnVpnTableData); + } + }); + console.log(servicebody); + + this.closeCreate.emit(servicebody); + + } + + goback() { + this.closeCreate.emit(); + } +} diff --git a/usecaseui-portal/src/app/views/ccvpn-detail/ccvpn-detail.component.css b/usecaseui-portal/src/app/views/ccvpn-detail/ccvpn-detail.component.css new file mode 100644 index 00000000..d5ad960d --- /dev/null +++ b/usecaseui-portal/src/app/views/ccvpn-detail/ccvpn-detail.component.css @@ -0,0 +1,365 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 10px; +} +.model { + background-color: #F7F8FC; + overflow-y: auto; +} +.creation-model{ + position: relative; + height: 100%; +} +.top-title{ + width: 100%; + padding: 20px; + position: relative; + display: inline-block; +} +.model .submit{ + position: absolute; + width: 90px; + height: 35px; + top: 10px; + right: 85px; + color: #fff; + font-size: 18px; + background: #0DA9E2; + border-radius: 4px; + border: none!important; + border-color: rgba(0,0,0,0)!important; +} +.model .back,.model .back:hover{ + position: absolute; + top: 10px; + right: 20px; + display: inline-block; + width: 35px; + height: 35px; + background:url("../../../assets/images/Return-icon.png") no-repeat!important; + background-size: 100%!important; + border-radius:4px; + color: #D7D7D7; + cursor: pointer; +} +.model .back:hover{ + background: url("../../../assets/images/Return-icon-active.png")!important; + background-size: 100%!important; +} +.top-title h3.title { + height: 35px; + width: 80%; + font-size:16px; + font-family:ArialMT; + color:#3C4F8C; + line-height:35px; + display: inline-block; +} + + +.model .detaildata { + width: 100%; + overflow-y: auto; + border-radius: 5px; + padding: 15px; +} +.model .detaildata h3.title { + height: 20px; + font: 700 20px/20px "Arial"; + color: #666; +} +.model .detaildata h3 { + height: 20px; + font: 700 16px/20px "Arial"; + margin: 5px 0; + color: #000; +} +.model .detaildata .service-title{ + margin:60px 50px; +} +.model .detaildata .service-title .info-inputs{ + width:400px; + height: 42px; + display: inline-block; +} +.model .detaildata .service-title span{ + height: 42px; + line-height: 42px; + vertical-align: middle; +} +.model .detaildata .service-title .lable{ + display: inline-block; + width: 100px; + font: 700 14px "Arial"; + color: #3C4F8C; + height: 42px; + line-height: 42px; + vertical-align: middle; + margin-left: 5px; +} +.model .detaildata .service-title .service-title-input { + width: 230px; + height: 42px; + border-radius:4px; + margin-right: 30px; + display: inline-block; +} +/* SOTN VPN */ +.model .detaildata .sotnvpn ul li { + display: inline-block; + height: 40px; + width: 24.5%; + margin-bottom: 40px; + float: left; +} +.model .detaildata .sotnvpn ul li span { + display: inline-block; + font-size: 14px; + font-weight: 500; + color:rgba(60,79,140,0.5); + margin-left: 10px; + vertical-align: middle; + float: left; + width: 110px; +} + +.model .sitemodel .inputs ul li span,.model .sotnnpnmodel .inputs ul li span { + display: inline-block; + line-height: 35px; + font-size: 14px; + font-weight: 500; + color: #3C4F8C; + margin-left: 10px; + vertical-align: middle; + float: left; +} +.model .sitemodel .inputs input,.model .sitemodel .inputs nz-select{ + width: 186px; + float: right; + margin-right: 60px; +} +.model .sotnnpnmodel .inputs input{ + width: 186px; + float: left; + margin-left: 20px; +} + +/* addsite model */ +.model .sitemodel,.model .sotnnpnmodel{ + position: absolute; + z-index: 1001; + left: 50px; + top: 60px; + background-color: #fff; + width:1500px; + height: 81%; + border-radius:2px; + overflow:auto; +} +.model .sotnnpnmodel{ + width: 1000px; + height: 53%; + top:200px; + left: 50%; + margin-left: -500px; +} +.model .sitemodel h3,.model .sotnnpnmodel h3{ + width: 96%; + height: 40px; + line-height: 35px; + font-size: 18px; + font-weight: 500; + margin: 10px auto; + color: #06A7E2; + border-bottom: 2px solid; + border-image: -webkit-linear-gradient(#07A9E1,#30D9C4) 100 100; + border-image: -moz-linear-gradient(#07A9E1,#30D9C4) 100 100; + border-image: linear-gradient(#07A9E1,#30D9C4) 100 100; + border-radius:2px; +} +.model .sitemodel .inputs,.model .sotnnpnmodel .inputs { + padding: 10px 20px 0; +} +.model .sitemodel .inputs ul li,.model .sotnnpnmodel .inputs ul li { + display: inline-block; + height: 35px; + line-height: 35px; + width: 24.5%; + margin-bottom: 20px; +} +.model .sotnnpnmodel .inputs ul li{ + width: 31%; +} +.model .sitemodel .inputs ul li span,.model .sotnnpnmodel .inputs ul li span { + display: inline-block; + line-height: 35px; + font-size: 14px; + font-weight: 500; + color: #3C4F8C; + margin-left: 10px; + vertical-align: middle; + float: left; +} +.model .sitemodel .inputs input,.model .sitemodel .inputs nz-select{ + width: 186px; + float: right; + margin-right: 60px; +} +.model .sotnnpnmodel .inputs div{ + width: 186px; + float: left; + margin-left: 20px; +} +.model .sitemodel .action,.model .sotnnpnmodel .action { + text-align: center; + margin-top: 30px; + margin-bottom: 20px; + cursor: pointer +} +.model .sotnnpnmodel .action{ + margin-top: 70px; +} +.model .sitemodel .action button,.model .sotnnpnmodel .action button{ + width: 126px; + height:40px; + background:#EEEEEE; + border-radius:2px; + border: none!important; + color: #9DA7C5; + font-size: 16px; + margin: 0 15px; +} +.model .sitemodel .action button:nth-child(2),.model .sotnnpnmodel .action button:nth-child(2){ + background: #0DA9E2; + color: #fff; +} +.model .sitemodel .action button:nth-child(2):hover,.model .sotnnpnmodel .action button:nth-child(2):hover{ + background:#09C6E2; +} + +.model nz-table tbody td i.anticon:hover { + color: #3fa8eb; + cursor: pointer; +} + +/* site table */ +.sitemodel h3 button,.sotnnpnmodel h3 button{ + color: #D7D7D7; + width:32px; + height:32px; + background:#ffffff; + border-radius:4px; + border:1px solid #D7D7D7; +} +.sitemodel h3 button:hover,.sotnnpnmodel h3 button:hover{ + background:#ffffff; + color: #0DA9E2; + border:1px solid #0DA9E2; +} +.sitemodel h3>button,.sotnnpnmodel h3>button{ + float: right; + width: 30px; + height: 30px; + margin-right: 15px; +} + +/* site Detail */ + +.model .detaildata .site h3 .closeDetail { + cursor: pointer; + padding: 2px 15px; + color: #3fa8eb; +} + +.model .detaildata .sotnvpn,.model .detaildata .site{ + background: #fff; + padding: 30px 30px 0 30px; +} + +.mask{ + width: 100%; + height: 100%; + position: absolute; + z-index: 1000; + background: rgba(0, 0, 0, 0.65); + top:0; +} + +/* charts */ +.model .chart { + width: 98%; + padding: 10px; + margin: 0 auto; + color: #06A7E2; + font-size: 16px; + font-weight: 500; + margin-bottom: 30px; + background: #EEF9FF; + border-radius: 4px; +} +.model .chart #detailChart { + width: 100%; + height: 254px; + margin-top: 20px; + position: relative; +} +.model .chart #detailChart .cloudcounty { + cursor: pointer; +} + +.model .chart #detailChart .couldDetail { + position: absolute; + left: 50%; + top: 10px; + width: 80%; + transform: translate(-50%,0); + height: 160px; + background-color: #aaa; + border-radius: 5px; + box-shadow: 0px 0px 20px #000; +} +.siteWanTab{ + width: 96%; + margin: 0 auto; + margin-top: 10px; +} +.siteWanTab th{ + padding: 10px 8px; + color: #3C4F8C; + font-size: 16px; +} +.siteWanTab tr td{ + padding: 10px 5px; +} +.siteWanTab .tr-border{ + border-bottom: 1px solid #EDEDED; +} +.addListBtn{ + margin-right: 30px; + color: #06A7E2; + border: none; + background: rgba(229,238,252,0.8); + cursor: pointer; +} diff --git a/usecaseui-portal/src/app/views/ccvpn-detail/ccvpn-detail.component.html b/usecaseui-portal/src/app/views/ccvpn-detail/ccvpn-detail.component.html new file mode 100644 index 00000000..e2b5159e --- /dev/null +++ b/usecaseui-portal/src/app/views/ccvpn-detail/ccvpn-detail.component.html @@ -0,0 +1,421 @@ + + +
    + +
    +

    {{detailParams['service-instance-name']}} Instance Detail

    +
    + + +
    +
    + +
    + +
    + + + + + + {{vpns[0].domain}} + + + + + + {{vpns[1].domain}} + + + + + + + {{vpns[0].sitetpname}} + + + + + + {{vpns[0].othertpname}} + + + + + + + {{vpns[1].othertpname}} + + + + + + {{vpns[1].sitetpname}} + + + + + + + SP Partent Network + + + + + + + {{localSite[0] && localSite[0]["service-instance-name"]}} + + + + + + {{ localSite[1] && localSite[1]["service-instance-name"]}} + + + + {{ localSite[1] && localSite[1]["service-instance-name"]}} + + + + + + + {{outerSite[1] && outerSite[1]["service-instance-name"]}} + + + + + + {{outerSite[0] && outerSite[0]["service-instance-name"]}} + + + + + + +
    +
    +
    + + +
    + name: +
    {{templateParameters.service["name"]}}
    + description: +
    {{templateParameters.service["description"]}}
    +
    +     + +
    +
    +

    sdwanVPN List

    + +
    + + + + NO. + Name + topology + Action + + + + + {{i+1}} + {{item.sdwanvpn_name}} + {{item.sdwanvpn_topology}} + + + +   + + + + + +
    +     + +
    +
    +

    Site List

    + +
    + + + + NO. + Name + Description + Post Code + Address + VLAN + Action + + + + + + {{i+1}} + {{item.sdwandevice_list[0].name}} + {{item.sdwansite_description}} + {{item.sdwansite_postcode}} + {{item.sdwansite_address}} + {{item.sdwansite_emails}} + + +   + +   + + + + + + +
    +     +     +
    + +
    +

    {{"i18nTextDefine_Base" | translate}}

    +
    +
      +
    • + {{item.lableShow}}: + {{sotnInfo[item.lable]}} +
      • +
    +
    +
    +

    Sdwansitelan List

    +
    +
    +
    + + + + + + + + + + + + + +
    NO.{{key}}
    {{i+1}} + {{item[key]}} +
    +
    +
    +
    + +
    +
    + +
    +

    {{"i18nTextDefine_Base" | translate}}

    +
    +
      +
    • + {{item.lableShow}}: + {{siteBaseData[item.lable]}} +
      • +
    +
    +
    +

    Sdwandevice

    +
    + + + + + + + + + + + + + +
    NO.{{key}}
    {{i+1}} + {{item[key]}} +
    +
    +

    Sdwansitewan List

    +
    + + + + + + + + + + + + + +
    NO.{{key}}
    {{i+1}} + {{item[key]}} +
    +
    +
    + +
    + +
    +
    + +
    +

    {{"i18nTextDefine_Base" | translate}}

    +
    +
      +
    • + {{item.lableShow}}: +
      • +
    +
    +
    +

    Sdwansitelan List

    +
    +
    + +
    + + + + + + + + + + + + + + + +
    NO.{{key}} Action
    {{i+1}} + {{item[key]}} + + + + +
    +
    +
    + +
    + + +
    +
    + +
    +

    {{"i18nTextDefine_Base" | translate}}

    +
    +
      +
    • + {{item.lableShow}}: +
      • +
    +
    +
    +

    Sdwandevice

    +
    +
      +
    • + {{item.lable}}: + +
      • +
    +
    +

    Sdwansitewan List

    +
    +
    + +
    + + + + + + + + + + + + + + + +
    NO.{{key}} Action
    {{i+1}} + {{item[key]}} + + + + +
    +
    +
    + +
    + + +
    +
    +
    +
    \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/ccvpn-detail/ccvpn-detail.component.spec.ts b/usecaseui-portal/src/app/views/ccvpn-detail/ccvpn-detail.component.spec.ts new file mode 100644 index 00000000..3d112bf8 --- /dev/null +++ b/usecaseui-portal/src/app/views/ccvpn-detail/ccvpn-detail.component.spec.ts @@ -0,0 +1,69 @@ +/* + Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { NgZorroAntdModule } from 'ng-zorro-antd'; +import { HttpClientModule } from '@angular/common/http'; +import { NZ_I18N, en_US } from 'ng-zorro-antd'; +import { TranslateModule, TranslateLoader, TranslateService, TranslateFakeLoader } from '@ngx-translate/core'; + +import { CcvpnDetailComponent } from './ccvpn-detail.component'; +import { MyhttpService } from '../../core/services/myhttp.service'; + +describe('CcvpnDetailComponent', () => { + let component: CcvpnDetailComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [CcvpnDetailComponent], + imports: [TranslateModule.forRoot({ loader: { provide: TranslateLoader, useClass: TranslateFakeLoader } }), + NgZorroAntdModule.forRoot(), HttpClientModule], + providers: [MyhttpService, { provide: NZ_I18N, useValue: en_US }] + }) + .compileComponents(); + })); + + beforeEach(() => { + let detailshow = false; + detailData: Object; + let serviceDetail = (service) => { + service["siteSer"] = []; + service["sdwanSer"] = []; + service["customer"] = this.customerSelected; + service["serviceType"] = this.serviceTypeSelected; + + service.childServiceInstances.forEach((item) => { + if (item.serviceDomain == "SITE") { + service.siteSer.push(item); + } else if (item.serviceDomain == "SDWAN") { + service.sdwanSer.push(item); + } + }) + this.detailshow = true; + this.detailData = service; + component.detailParams = this.detailData + fixture = TestBed.createComponent(CcvpnDetailComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }; + + it('should create', () => { + console.log(component); + expect(component).toBeTruthy(); + }); + }); + +}); diff --git a/usecaseui-portal/src/app/views/ccvpn-detail/ccvpn-detail.component.ts b/usecaseui-portal/src/app/views/ccvpn-detail/ccvpn-detail.component.ts new file mode 100644 index 00000000..109c143b --- /dev/null +++ b/usecaseui-portal/src/app/views/ccvpn-detail/ccvpn-detail.component.ts @@ -0,0 +1,815 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { MyhttpService } from '../../core/services/myhttp.service'; +import * as d3 from 'd3'; + +@Component({ + selector: 'app-ccvpn-detail', + templateUrl: './ccvpn-detail.component.html', + styleUrls: ['./ccvpn-detail.component.css'] +}) +export class CcvpnDetailComponent implements OnInit { + + constructor(private myhttp: MyhttpService) { } + + ngOnInit() { + this.dataInit(); + this.drawImages(); + } + + @Input() detailParams; + @Input() upDateShow; + @Output() closeDetail = new EventEmitter(); + @Output() closeUpdate = new EventEmitter(); + + tabBarStyle = { + "height": "58px", + "width": "694px", + "box-shadow": "none", + "margin": "0", + "border-radius": "4px 4px 0px 0px" + }; + input_parameters: any; + templateParameters = { + service: {}, + sotnvpn: { + // info: {}, + sdwanvpnresource_list: [], + sdwansitelan_list: [] + }, + site: { + // info: {}, + sdwansiteresource_list: [], + sdwandevice_list: [], + sdwansitewan_list: [] + } + }; + bodyTemplateParameter = {}; + + // SOTN VPN List + sotnVpnTableData = []; + sotnInfo = {};//sotnmodel The first part of sotnInfo + sotnSdwansitelanData = [];//sotnmodel The second part of the data sdwansitelan Table + sotnSdwansitelanParams = {};//sdwansitelan Table Detailed parameters of each line of data + tabInputShowSdwansitelan = [];//sdwansitelan table input and span + // Site List + siteTableData = []; + siteBaseData = {}; //sitemodel one sdwansiteresource_list + // cpe + siteSdwanDevice = []; //sitemodel SdwanDevice port Table data + siteCpeData = {}; //sitemodel two sdwandevice_list + tabInputShowDevice = [];//Device port input and span + // Wan Port + siteWanData = []; //sitemodel three wan port Table data + siteWanParams = {}; //wan port Table Detailed parameters of each line of data + tabInputShowWanPort = [];//wan port table input and span + sitenum = []; + sotnvpnnum = []; + + getKeys(item) { + return Object.keys(item); + } + //tabBarStyle + dataInit() { + console.log(this.detailParams); + // this.input_parameters = JSON.stringify(this.detailParams['input-parameters']) + if (this.detailParams['input-parameters']) { + this.input_parameters = JSON.parse(this.detailParams['input-parameters']); + } else { + return false; + } + console.log(this.input_parameters); + this.templateParameters.service = { + name: this.input_parameters.service.name, + description: this.input_parameters.service.description, + serviceInvariantUuid: this.input_parameters.service["serviceInvariantUuid"], + serviceUuid: this.input_parameters.service["serviceUuid"] + }; + let inputs = this.input_parameters.service.parameters.requestInputs; + + Object.keys(inputs).map((items) => { + if (items.search("vpn") != -1) { + this.bodyTemplateParameter[items] = []; + inputs[items].map((item, index) => { + this.sotnVpnTableData.push(item); + this.sotnvpnnum.push(false); + }); + let sdwanvpnresource_list = inputs[items][0]; + Object.keys(sdwanvpnresource_list).forEach((its) => { + let input = {}; + if (its.search("site") != -1 && sdwanvpnresource_list[its] instanceof Array === true) { + Object.keys(sdwanvpnresource_list[its][0]).forEach((i) => { + let input1 = {}; + input1[i] = sdwanvpnresource_list[its][i]; + this.templateParameters["sotnvpn"]["sdwansitelan_list"].push(input1); + }) + let sitelanKey = {}; + sitelanKey[its] = []; + this.bodyTemplateParameter[items].push(sitelanKey); + } + if (its.search("sitelan") == -1 && sdwanvpnresource_list[its] instanceof Array === false) { + input[its] = sdwanvpnresource_list[its]; + this.templateParameters["sotnvpn"]["sdwanvpnresource_list"].push(input); + } + }); + } + if (items.search("site") != -1) { + this.bodyTemplateParameter[items] = []; + inputs[items].map((item, index) => { + this.siteTableData.push(item); + this.sitenum.push(false); + }); + let sdwansiteresource_list = inputs[items][0]; + Object.keys(sdwansiteresource_list).forEach((its) => { + let input2 = {}; + if (its.search("device") != -1 && sdwansiteresource_list[its] instanceof Array === true) { + this.templateParameters["site"]["sdwandevice_list"][0] = sdwansiteresource_list[its][0]; + let sitelanKey = {}; + sitelanKey[its] = []; + this.bodyTemplateParameter[items].push(sitelanKey); + } + if (its.search("site") != -1 && its.search("device") == -1 && sdwansiteresource_list[its] instanceof Array === true) { + this.templateParameters["site"]["sdwansitewan_list"][0] = sdwansiteresource_list[its][0]; + let sitelanKey = {}; + sitelanKey[its] = []; + this.bodyTemplateParameter[items].push(sitelanKey); + } + if (its.search("device") == -1 && sdwansiteresource_list[its] instanceof Array === false) { + input2[its] = sdwansiteresource_list[its]; + this.templateParameters["site"]["sdwansiteresource_list"].push(input2); + } + }); + + } + }); + + console.log(this.templateParameters.site); + console.log(this.siteTableData); + + this.showTemParametersSotnVpn(); + this.showTemParametersSite(); + + } + + //sotnVpn data, after combining the structure, rendering the template data to the page + showTemParametersSotnVpn() { + //sotn Data analysis, structure assembly + this.templateParameters.sotnvpn.sdwanvpnresource_list.map((item, index) => { + let input = {}; + for (let keys in item) { + if (keys != "required" && keys != "type" && keys != "description") { + input[keys] = item[keys]; + item["lable"] = keys; + item["lableShow"] = keys.split("_")[1]; + this.sotnInfo = Object.assign(this.sotnInfo, input); + } + } + }); + + this.templateParameters.sotnvpn.sdwansitelan_list.map((item, index) => { + let input = {}; + for (let keys in item) { + if (keys != "required" && keys != "type" && keys != "description") { + input[keys] = item[keys]; + item["lable"] = keys; + this.sotnSdwansitelanParams = Object.assign(this.sotnSdwansitelanParams, this.sotnSdwansitelanParams, input); + } + } + }); + this.sotnSdwansitelanData.push(this.sotnSdwansitelanParams); + this.sotnSdwansitelanData.map((item, index) => { + this.tabInputShowSdwansitelan[index] = true; + }); + } + + //Site data, after combining the structure, rendering the template to the page + showTemParametersSite() { + //site Data analysis, structure assembly + this.templateParameters.site.sdwansiteresource_list.map((item, index) => { + let input = {}; + for (let keys in item) { + if (keys != "required" && keys != "type" && keys != "description") { + input[keys] = item[keys]; + item["lable"] = keys; + item["lableShow"] = keys.split("_")[1]; + this.siteBaseData = Object.assign(this.siteBaseData, input); + } + } + }); + + this.templateParameters.site.sdwandevice_list.map((item, index) => { + let input = {}; + for (let keys in item) { + if (keys != "required" && keys != "type" && keys != "description") { + input[keys] = item[keys]; + item["lable"] = keys; + this.siteCpeData = Object.assign(this.siteCpeData, input); + } + } + }); + this.templateParameters.site.sdwandevice_list.map((item, index) => { + if (this.getKeys(item).indexOf("lable") == -1) { + this.templateParameters.site.sdwandevice_list.splice(index, 1) + } + }); + this.templateParameters.site.sdwansitewan_list.map((item, index) => { + let input = {}; + for (let keys in item) { + if (keys != "required" && keys != "type" && keys != "description") { + input[keys] = item[keys]; + item["lable"] = keys; + this.siteWanParams = Object.assign(this.siteWanParams, this.siteWanParams, input); + } + } + }); + this.siteSdwanDevice.push(this.siteCpeData); + this.siteSdwanDevice.map((item, index) => { + this.tabInputShowDevice[index] = true; + }); + this.siteWanData.push(this.siteWanParams); + this.siteWanData.map((item, index) => { + this.tabInputShowWanPort[index] = true; + }); + } + + //sotnVpn detail show + sotnVpnDetailShow = false; + isEditSotnVpn = 0; + showstonVpnDetail(num) { + this.sotnVpnDetailShow = true; + this.isEditSotnVpn = num; + Object.keys(this.sotnInfo).forEach((item) => { + this.sotnInfo[item] = this.sotnVpnTableData[num - 1][item]; + }); + this.sotnSdwansitelanData = this.sotnVpnTableData[num - 1].sdwansitelan_list.map((item) => { + return Object.assign({}, {}, item) + }); + } + detailSotnVpn_cancel() { + this.sotnVpnDetailShow = false; + } + + // site detail show + siteDetail = false; + isEditSite = 0; + showSiteDetail(num) { + this.siteDetail = true; + this.isEditSite = num; + console.log(this.siteTableData[num - 1]); + Object.keys(this.siteBaseData).forEach((item) => { + this.siteBaseData[item] = this.siteTableData[num - 1][item]; + }); + this.siteSdwanDevice = this.siteTableData[num - 1].sdwandevice_list.map((item) => { + return Object.assign({}, {}, item) + }); + this.siteWanData = this.siteTableData[num - 1].sdwansitewan_list.map((item) => { + return Object.assign({}, {}, item) + }); + } + detailsite_cancel() { + this.siteDetail = false; + } + deleteUpdateSite(num) { + this.siteTableData = this.siteTableData.filter((d, i) => i !== num - 1); + this.sitenum.splice(num - 1, 1); + } + + //sotnVpn addModel + sotnVpnAddModelShow = false; + + updateSotnVpn_OK() { + let inputs = { + "sdwansitelan_list": [] + }; + inputs = Object.assign(inputs, this.sotnInfo); + inputs["sdwansitelan_list"] = this.sotnSdwansitelanData.map((item) => { + return Object.assign({}, item); + }); + if (this.isEditSotnVpn) { + + this.sotnVpnTableData[this.isEditSotnVpn - 1] = inputs; + this.sotnVpnTableData = [...this.sotnVpnTableData]; + } else { + // this.siteTableData.push(inputs); + this.sotnVpnTableData = [...this.sotnVpnTableData, inputs]; + this.sotnvpnnum = [...this.sotnvpnnum, true]; + } + Object.keys(this.sotnInfo).forEach((item) => { + this.sotnInfo[item] = null; + }); + this.sotnSdwansitelanData.forEach((item, index) => { + if (index > 0) { + this.sotnSdwansitelanData.splice(index, 1); + this.tabInputShowSdwansitelan.splice(index, 1); + } else { + Object.keys(item).forEach((item2) => { + item[item2] = null; + }); + this.tabInputShowSdwansitelan[index] = true; + } + + }); + this.sotnVpnAddModelShow = false; + } + + updateSotnVpn_cancel() { + Object.keys(this.sotnInfo).forEach((item) => { + this.sotnInfo[item] = null; + }); + this.sotnSdwansitelanData.forEach((item, index) => { + if (index > 0) { + this.sotnSdwansitelanData.splice(index, 1); + } else { + Object.keys(item).forEach((item2) => { + item[item2] = null; + }); + this.tabInputShowSdwansitelan[index] = true; + } + + }); + this.sotnVpnAddModelShow = false; + } + + editUpdateSotnVpn(num) { + this.sotnVpnAddModelShow = true; + this.isEditSotnVpn = num; + Object.keys(this.sotnInfo).forEach((item) => { + this.sotnInfo[item] = this.sotnVpnTableData[num - 1][item]; + }); + this.sotnSdwansitelanData = this.sotnVpnTableData[num - 1].sdwansitelan_list.map((item) => { + return Object.assign({}, {}, item) + }); + this.sotnSdwansitelanData.forEach((item, index) => { + this.tabInputShowSdwansitelan[index] = false; + }); + } + + deleteUpdateSotnVpn(num) { + this.sotnVpnTableData = this.sotnVpnTableData.filter((d, i) => i !== num - 1); + this.sotnvpnnum.splice(num - 1, 1); + } + updateSotnSdwansitelan() { + if (this.tabInputShowSdwansitelan.indexOf(true) > -1) { + return false; + } + let addNum = this.sotnSdwansitelanData.length; + let inputsData = Object.assign({}, this.sotnSdwansitelanParams); + Object.keys(inputsData).forEach((item) => { + if (item != "description") { + inputsData[item] = null; + } + }); + this.sotnSdwansitelanData[addNum] = inputsData; + this.tabInputShowSdwansitelan[addNum] = true; + this.sotnSdwansitelanData = [...this.sotnSdwansitelanData]; + } + editUpdateSotnSdwansitelan(num, item, sotnSdwansitelanData) { + if (this.tabInputShowSdwansitelan[num - 1] == false) { + this.tabInputShowSdwansitelan[num - 1] = true; + } else { + this.tabInputShowSdwansitelan[num - 1] = false; + } + } + deleteUpdateSotnSdwansitelan(num, item, sotnSdwansitelanData) { + if (this.sotnSdwansitelanData.length <= 1) { + return false; + } else { + + } + this.sotnSdwansitelanData = this.sotnSdwansitelanData.filter((d, i) => i !== num - 1); + } + + // site addModel + siteAddModelShow = false; + + updateSotnvpn() { + this.sotnVpnAddModelShow = true; + this.isEditSotnVpn = 0; + } + + updateSite() { + this.siteAddModelShow = true; + this.isEditSite = 0; + } + + editUpdateSite(num) { + this.siteAddModelShow = true; + this.isEditSite = num; + Object.keys(this.siteBaseData).forEach((item) => { + this.siteBaseData[item] = this.siteTableData[num - 1][item]; + }); + this.siteSdwanDevice = this.siteTableData[num - 1].sdwandevice_list.map((item) => { + return Object.assign({}, item) + }); + this.siteSdwanDevice.forEach((item, index) => { + this.tabInputShowDevice[index] = false; + }); + this.siteWanData = this.siteTableData[num - 1].sdwansitewan_list.map((item) => { + return Object.assign({}, item) + }); + this.siteWanData.forEach((item, index) => { + this.tabInputShowWanPort[index] = false; + }); + } + + updatesite_cancel() { + Object.keys(this.siteBaseData).forEach((item) => { + this.siteBaseData[item] = null; + }) + this.siteSdwanDevice.forEach((item, index) => { + if (index > 0) { + this.siteSdwanDevice.splice(index, 1); + } else { + Object.keys(item).forEach((item2) => { + item[item2] = null; + }); + this.tabInputShowDevice[index] = true; + } + + }); + this.siteWanData.forEach((item, index) => { + if (index > 0) { + this.siteWanData.splice(index, 1); + } else { + Object.keys(item).forEach((item2) => { + item[item2] = null; + }); + this.tabInputShowWanPort[index] = true; + } + + }); + this.siteAddModelShow = false; + } + + updatesite_OK() { + let inputs = { + "sdwandevice_list": [], + "sdwansitewan_list": [] + }; + inputs = Object.assign(inputs, this.siteBaseData); + inputs["sdwandevice_list"] = this.siteSdwanDevice.map((item) => { + return Object.assign({}, item); + }); + inputs["sdwansitewan_list"] = this.siteWanData.map((item) => { + return Object.assign({}, item); + }); + if (this.isEditSite) { + // Edit status does not increase + this.siteTableData[this.isEditSite - 1] = inputs; + this.siteTableData = [...this.siteTableData]; //Table refresh + } else { + // this.siteTableData.push(inputs); + this.siteTableData = [...this.siteTableData, inputs]; + this.sitenum = [...this.sitenum, true]; + } + + Object.keys(this.siteBaseData).forEach((item) => { //Clear modal box + this.siteBaseData[item] = null; + }); + this.siteSdwanDevice.forEach((item, index) => { + if (index > 0) { + this.siteSdwanDevice.splice(index, 1); + this.tabInputShowDevice.splice(index, 1); + } else { + Object.keys(item).forEach((item2) => { + item[item2] = null; + }); + this.tabInputShowDevice[index] = true; + } + + }); + this.siteWanData.forEach((item, index) => { + if (index > 0) { + this.siteWanData.splice(index, 1); + this.tabInputShowWanPort.splice(index, 1); + } else { + Object.keys(item).forEach((item2) => { + item[item2] = null; + }); + this.tabInputShowWanPort[index] = true; + } + + }); + console.log(this.siteTableData); + this.siteAddModelShow = false; + } + + //add.edit，detele siteWanPort + updateSiteWan() { + if (this.tabInputShowWanPort.indexOf(true) > -1) {//Adding new rows is not allowed when there is a row of data being edited + return false; + } + let addNum = this.siteWanData.length; + let inputsData = Object.assign({}, this.siteWanParams); + Object.keys(inputsData).forEach((item) => {//Add a new line of empty data + if (item != "description") { + inputsData[item] = null; + } + }); + this.siteWanData[addNum] = inputsData; + this.tabInputShowWanPort[addNum] = true; + this.siteWanData = [...this.siteWanData]; //Table refresh + console.log(this.siteWanData) + } + + editUpdateWanPort(num, item, siteWanData) { + if (this.tabInputShowWanPort[num - 1] == false) { + this.tabInputShowWanPort[num - 1] = true; + } else { + this.tabInputShowWanPort[num - 1] = false; + } + } + + deleteUpdateWanPort(num, item, siteWanData) { + if (this.siteWanData.length <= 1) { + return false; + } + this.siteWanData = this.siteWanData.filter((d, i) => i !== num - 1); + } + + // site节点图形描绘 + // site分类，根据site查tp pnf --> allotted-resource + localSite = [];//本地site + outerSite = [];//外部site + + getSiteAResource() { + return new Promise((res, rej) => { + this.detailParams.siteSer.forEach((site) => { + site["relationship-list"]["relationship"].find((item) => { return item["related-to"] == "site-resource" }) ? this.localSite.push(site) : this.outerSite.push(site); + }); + + if (this.localSite[0] && this.localSite[0]["service-instance-name"].startsWith("Dc")) { + this.localSite.reverse(); + } + + if (this.outerSite[0] && this.outerSite[0]["service-instance-name"].startsWith("Dc")) { + this.outerSite.reverse(); + } + if (this.localSite.length > 0) { + this.detailLines = [].concat(this.detailLiness); + this.localSite.forEach((site) => { + let obj = { + customerId: this.detailParams.customer.id, + serviceType: this.detailParams.serviceType, + serviceId: site["service-instance-id"] + }; + this.myhttp.getAllottedResource(obj) + .subscribe((data) => { + let resource = data["allotted-resource"].find((item) => { return item["allotted-resource-name"] == "sotn ar" }); + let tps_pnfs = resource["relationship-list"]["relationship"].find((item) => { return item["related-to"] == "p-interface" })["relationship-data"]; + site.tpsitename = tps_pnfs.find((item) => { return item["relationship-key"] == "p-interface.interface-name" })["relationship-value"]; + res("sites-domain"); + }) + }) + } else { + return false; + } + }) + } + + + vpns = [{ name: "", tps: [], domain: "", sitetpname: "", othertpname: "" }]; + + + getSotnAresource() { + return new Promise((res, rej) => { + let connectivityId = this.detailParams["relationship-list"]["relationship"] + .find((item) => { + return item["related-to"] == "connectivity" + })["relationship-data"] + .find((item2) => { + return item2["relationship-key"] == "connectivity.connectivity-id" + })["relationship-value"]; + this.myhttp.getSotnConnectivity(connectivityId) + .subscribe((data) => { + let vpns = data.connectivity[0]["relationship-list"]["relationship"] + .filter((item) => { + return item["related-to"] == "vpn-binding" + }) + .map((item2) => { + return item2["relationship-data"].find((item3) => { + return item3["relationship-key"] == "vpn-binding.vpn-id" + })["relationship-value"] + }); + console.log(vpns); + this.detailParams.vpns = vpns.map((item) => { + return { name: item } + }); + this.detailParams.vpns.forEach((vpn, index) => { + this.myhttp.getVpnBinding(vpn.name) + .subscribe((data2) => { + let tps_pnfs = data2["vpn-binding"][0]["relationship-list"]["relationship"] + .filter((item) => { + return item["related-to"] == "p-interface" + }) + .map((item2) => { + return item2["relationship-data"] + }); + let pnfname = tps_pnfs.map((item) => { + return item.find((item2) => { + return item2["relationship-key"] == "pnf.pnf-name" + })["relationship-value"] + }); + let tpnames = tps_pnfs.map((item) => { + return item.find((item2) => { + return item2["relationship-key"] == "p-interface.interface-name" + })["relationship-value"] + }); + vpn.tps = tpnames; + this.myhttp.getPnfDetail(pnfname[0]) + .subscribe((data2) => { + let networkRelation = data2["relationship-list"]["relationship"].find((item) => { + return item["related-to"] == "network-resource" + })["relationship-data"]; + vpn.domain = networkRelation.find((item) => { + return item["relationship-key"] == "network-resource.network-id" + })["relationship-value"]; + if (this.localSite[index]) { + vpn.sitetpname = this.localSite.find((site) => { + return tpnames.includes(site.tpsitename) + }).tpsitename; + console.log(tpnames); + console.log(vpn.sitetpname); + vpn.othertpname = tpnames.find((name) => { + return name != vpn.sitetpname + }); + } else { + vpn.sitetpname = this.localSite[0].tpsitename; + vpn.othertpname = tpnames.find((name) => { + return name != vpn.sitetpname + }); + } + + this.vpns = this.detailParams.vpns; + console.log(this.vpns) + res(this.detailParams.vpns) + }) + console.log(this.detailParams.vpns) + }) + }) + }) + }) + } + + + drawImages() { + + this.getSiteAResource().then((data) => { + return this.getSotnAresource() + }).then((data) => { + this.detailSites = this.detailParams.serviceDomain == "CCVPN" ? false : true; + // When there is only one vpn + if (this.detailParams.serviceDomain == "CCVPN" && this.vpns.length == 1) { + this.detailLines.length = this.detailLines.length - 3; + // this.detailLines.push(line); + // when local site have 2 + if (this.localSite.length == 2) { + let line = { + "x1": "30%", "y1": "55%", "x2": "42%", "y2": "55%"//tp2--tp3 + } + this.detailLines.push(line); + } + // when cloud site have 2 + if (this.outerSite.length == 2) { + let line = { + "x1": "81%", "y1": "21%", "x2": "90%", "y2": "21%"//out-domain--site3 + }; + this.detailLines.push(line); + } + } + }) + let allnodes = [this.getSiteAResource(), this.getSotnAresource()]; + Promise.all(allnodes).then((data) => { + console.log(data); + console.log(this.localSite); + + + }) + } + + detailSites = false; + detailLines = []; + detailLiness = [ //Details of the topology map connection coordinates + { + "x1": "9%", "y1": "40%", "x2": "21%", "y2": "40%"//site1--tp1 + }, + + { + "x1": "83%", "y1": "51%", "x2": "91%", "y2": "51%"//out-domain--site4 + }, + + { + "x1": "52%", "y1": "81%", "x2": "63%", "y2": "81%"//site2--tp4 + }, + { + "x1": "81%", "y1": "21%", "x2": "90%", "y2": "21%"//out-domain--site3 + }, + { + "x1": "30%", "y1": "55%", "x2": "44%", "y2": "55%"//tp2--tp3 + } + ]; + + modifyJosnKey(json, oddkey, newkey) { + + let val = json[oddkey]; + delete json[oddkey]; + json[newkey] = val; + } + + // ccvpn update + submitUpdate() { + let globalCustomerId = this.detailParams.customer.id; + let globalServiceType = this.detailParams.serviceType.name; + let servicebody = { + service: { + name: this.templateParameters.service["name"], + description: this.templateParameters.service["description"], + serviceInvariantUuid: this.templateParameters.service["serviceInvariantUuid"], + serviceUuid: this.templateParameters.service["serviceUuid"], + globalSubscriberId: globalCustomerId, //customer.id + serviceType: globalServiceType, //serviceType.value + parameters: { + locationConstraints: [], + resources: [], + requestInputs: { + sdwanvpnresource_list: [], + sdwansiteresource_list: [] + } + } + } + }; + let siteresource = null, sitewan = null, device = null, vpnresource = null, sitelan = null; + Object.keys(this.bodyTemplateParameter).map((item, index) => { + if (item.search("site") != -1) { + siteresource = item; + this.bodyTemplateParameter[item].map((items, index) => { + if (Object.keys(items)[0].search("site") != -1 && Object.keys(items)[0].search("device") == -1) { + sitewan = Object.keys(items)[0] + } + if (Object.keys(items)[0].search("device") != -1) { + device = Object.keys(items)[0] + } + }); + } + if (item.search("vpn") != -1) { + vpnresource = item; + this.bodyTemplateParameter[item].map((items, index) => { + if (Object.keys(items)[0].search("site") != -1) { + sitelan = Object.keys(items)[0] + } + }); + } + }); + this.sotnVpnTableData.forEach((item, index) => { + Object.keys(item).map((items, index) => { + if (items.search("site") != -1 && item[items] instanceof Array === true) { + this.modifyJosnKey(item, items, sitelan) + } + }); + }); + this.siteTableData.forEach((item, index) => { + Object.keys(item).map((items, index) => { + if (items.search("site") != -1 && items.search("device") == -1 && item[items] instanceof Array === true) { + this.modifyJosnKey(item, items, sitewan) + } + if (items.search("device") != -1) { + this.modifyJosnKey(item, items, device) + } + }); + }); + Object.keys(this.bodyTemplateParameter).map((item, index) => { + if (item.search("site") != -1) { + servicebody.service.parameters.requestInputs[item] = [].concat(this.siteTableData); + } + if (item.search("vpn") != -1) { + servicebody.service.parameters.requestInputs[item] = [].concat(this.sotnVpnTableData); + } + }); + console.log(servicebody); + this.closeUpdate.emit(servicebody); + } + + goback() { + this.closeDetail.emit(); + } + + hiddenModel() { + this.sotnVpnDetailShow = false; + this.siteDetail = false; + } + +} diff --git a/usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.css b/usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.css new file mode 100644 index 00000000..5055205d --- /dev/null +++ b/usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.css @@ -0,0 +1,119 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.outer{ + width: 20%; + float: left; +} +.content{ + width: 100px; + margin: 30px 0; +} + +.submit,.delete,.add{ + padding:10px 20px; + width: 100px; + margin: 0 auto; + background: dodgerblue; + border: none; + border-radius: 10px; + color: #fff; + cursor: pointer; +} + +#tpContainer{ + position: relative; + width:100%; + height: 95%; + margin-top: 15px; + float: left; + background: #EEF9FF; +} +#tpContainer .no-network{ + width: 300px; + margin: 0 auto; + height: 280px; + position: absolute; + top: 50%; + left: 50%; + margin-top: -140px; + margin-left: -150px; +} +.no-network img{ + width: 100%; +} +.no-network p{ + text-align: center; + color: #A0AACD; + font-size: 18px; + margin-top: 20px; +} +.model { + position: relative; + padding: 15px; + height: 100vh; + width: 100%; +} +.model h2{ + display: inline-block; + margin: 0; + color: #3C4F8C; + margin-left: 10px; + display: inline-block; +} +.model .title-modelshow{ + color: #A0AACD; +} +.model .creation { + /*margin-top:-4%;*/ + background-color: #fff; + /*float: left;*/ + width: 20%; + position: absolute; + left: 0; + margin-top: 30px; + margin-left: 30px; + border-radius: 5px; + box-shadow: 0 0 10px #9e9e9e; + padding: 10px; + height: 80vh; + overflow: auto; +} +.model .creation .v_color{ + height: 17px; + float: left; + margin-left: -11px; + margin-top: 5px; + border-left: 4px #3fa8eb solid; +} +.w_font4{ + font-weight: 400; +} +.title-span{ + margin-left: 10%; + font-size: 12px; +} +.red-span{ + color: red; + margin-right: 3px; +} +.choose li nz-select,.choose li input{ + display: block !important; + margin: 5px 10% 15px; + width: 80%; +} + + + diff --git a/usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.html b/usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.html new file mode 100644 index 00000000..25687f67 --- /dev/null +++ b/usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.html @@ -0,0 +1,152 @@ + + +
    + + +

    + Please configure network links for registered devices and partner system. +

    +
    +
    +

    + There is not any terminal device can be used for configuration +

    +
    +

    + please register external network into ONAP. +

    +
    +
    + No network available +

    No network available

    +
    +
    + +
    + +

    {{"i18nTextDefine_SetAttribtes" | translate}}

    +
      +
    • + * {{"i18nTextDefine_LinkName" | translate}} + +
      • +
    +

    {{"i18nTextDefine_LeftPort" | translate}}

    +
      +
    • + * {{"i18nTextDefine_Network" | translate}} + + + +
      • +
    • + * {{"i18nTextDefine_Node" | translate}} + + + +
      • +
    • + * {{"i18nTextDefine_TerminalPoint" | translate}} + + + + +
      • +
    +

    {{"i18nTextDefine_RightPort" | translate}}

    + +
      +
    • + * {{"i18nTextDefine_HostUrl" | translate}} + +
      • +
    • + * {{"i18nTextDefine_Network" | translate}} + + + + +
      • +
    • + * {{"i18nTextDefine_Node" | translate}} + + + + +
      • +
    • + * {{"i18nTextDefine_TerminalPoint" | translate}} + + + + +
      • +
    + + +
    +
    + +
      +
    • + {{"i18nTextDefine_LinkName" | translate}} + +
      • +
    +

    {{"i18nTextDefine_LeftPort" | translate}}

    +
      +
    • + {{"i18nTextDefine_Network" | translate}} + +
      • +
    • + {{"i18nTextDefine_Node" | translate}} + +
      • +
    • + {{"i18nTextDefine_TerminalPoint" | translate}} + +
      • +
    +

    {{"i18nTextDefine_RightPort" | translate}}

    +
      +
    • + {{"i18nTextDefine_HostUrl" | translate}} + +
      • +
    • + {{"i18nTextDefine_Network" | translate}} + +
      • +
    • + {{"i18nTextDefine_Node" | translate}} + +
      • +
    • + {{"i18nTextDefine_TerminalPoint" | translate}} + +
      • +
    + + + +
    +
    +     diff --git a/usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.spec.ts b/usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.spec.ts new file mode 100644 index 00000000..9ec321c5 --- /dev/null +++ b/usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.spec.ts @@ -0,0 +1,40 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CcvpnNetworkComponent } from './ccvpn-network.component'; + +describe('CcvpnNetworkComponent', () => { + let component: CcvpnNetworkComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ CcvpnNetworkComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CcvpnNetworkComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.ts b/usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.ts new file mode 100644 index 00000000..8a56d885 --- /dev/null +++ b/usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.ts @@ -0,0 +1,1270 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { Component, EventEmitter, OnInit, Output } from '@angular/core'; +import * as d3 from 'd3'; +import * as $ from 'jquery'; +import { networkHttpservice } from '../../core/services/networkHttpservice.service'; + +@Component({ + selector: 'app-ccvpn-network', + templateUrl: './ccvpn-network.component.html', + styleUrls: ['./ccvpn-network.component.css'] +}) +export class CcvpnNetworkComponent implements OnInit { + + constructor(private myhttp: networkHttpservice) { + } + + ngOnInit() { + let thisNg = this; + thisNg.getD3Data(); + + + //Local cloud TP port connection, click on the right to expand the details + $('#tpContainer').on('click', '.line-port', function () { + thisNg.isVisible = false; + thisNg.delBoxisVisible = true; + thisNg.delcloud = false; + + thisNg.delTp1 = $(this).attr('data-tp1'); + thisNg.delTp2 = $(this).attr('data-tp2'); + thisNg.delNode1 = $(this).attr('data-node1'); + thisNg.delNode2 = $(this).attr('data-node2'); + thisNg.delVersion = $(this).attr('data-version'); + thisNg.delLinkname = $(this).attr('data-link'); + thisNg.delcloudUrl = null; + thisNg.delLinkIndex = $(this); + + let dataD3 = thisNg.d3Data; + for (let p = 0; p < dataD3.length; p++) {//Determine which Domain network the two tp ports belong to + if (dataD3[p]['name'] == thisNg.delTp1) { + thisNg.network.push(dataD3[p]['source']['name']); + } + if (dataD3[p]['name'] == thisNg.delTp2) { + thisNg.network.push(dataD3[p]['source']['name']); + } + } + thisNg.delNetwork1 = thisNg.network[0]; + thisNg.delNetwork2 = thisNg.network[1]; + }); + + //External cloud connection, click on the right to expand the details + $('#tpContainer').on('click', '.cloudline', function () { + thisNg.isVisible = false; + thisNg.delBoxisVisible = true; + thisNg.delcloud = true; + + thisNg.delTp1 = $(this).attr('data-tp1'); + thisNg.delTp2 = $(this).attr('data-tp2'); + thisNg.delNode1 = $(this).attr('data-node1'); + thisNg.delNode2 = $(this).attr('data-node2'); + thisNg.delVersion = $(this).attr('data-version'); + thisNg.delNetwork1 = $(this).attr('data-network'); + thisNg.delNetwork2 = $(this).attr('data-cloudnetwork'); + thisNg.delcloudUrl = $(this).attr('data-url'); + thisNg.delLinkname = $(this).attr('data-link'); + thisNg.aaiId = $(this).attr('data-aaiid'); + thisNg.getCloudUrl(thisNg.aaiId); + }); + } + + addLinkDisabled = true; + nonetwork = false; + isVisible = false; + outCloudShow = false; + inputshow = false; + delBoxisVisible = false; + isSpinning = true; + + d3Data = [];//D3Render the required data + logicalLinks = [];//logicalLinks Existing connection data returned by the interface + linkName = null;//Linked name link-name + networkOption = [];//Form network drop-down box filled data + nodeOption1 = {};//Node drop-down box filled data + tpOption1 = [];//Node drop-down box filled data + tpOption2 = [];//Node drop-down box filled data + networkVal1 = null;//network1 Drop-down box default data + networkVal2 = null;//network2 Drop-down box default data + selectedNode1 = null;//node1 Drop-down box default data + selectedNode2 = null;//node2 Drop-down box default data + selecteTpName1 = null;//TP1 Drop-down box default data + selecteTpName2 = null;//TP2 Drop-down box default data + cloudUrl = null;//External cloud URL address + cloudNetwork = null;//External cloud network name + cloudNode = null;//External cloud Node name + cloudTp = null;//External cloud Tp name + + dataCloud = [];//External cloud information + dataCloudLink = []; + aaiId = ''; + + + //When the connection is deleted, the data displayed in the right frame + delLinkname = null; + delNetwork1 = null; + delNode1 = null; + delTp1 = null; + delcloudUrl = null; + delNetwork2 = null; + delNode2 = null; + delTp2 = null; + delVersion = null; + delLinkIndex = null; + network = []; + delcloud = false; + + winWidth = $('#tpContainer').width(); + winHeight = $('#tpContainer').height(); + charge = -300; + + imgmap = { + '1': 'assets/images/cloud-county1.png', + '2': 'assets/images/tp.png', + '3': 'assets/images/cloud-out.png', + }; + tpoption = { + container: '#tpContainer', + data: '', + width: 1000, + height: this.winHeight + }; + + showForm(): void { + if (this.addLinkDisabled == false) { + this.isVisible = true; + this.delBoxisVisible = false; + } + } + + hideForm(): void { + this.isVisible = false; + this.delBoxisVisible = false; + this.linkName = null; + this.networkVal1 = null;//Initialize the default data of the network1 drop-down box + this.networkVal2 = null;//Initialize the network2 drop-down box default data + this.selectedNode1 = null;//Initialize the default data of the node1 drop-down box + this.selectedNode2 = null;//Initialize the default data of the node2 drop-down box + this.selecteTpName1 = null;//Initialize the default data of the TP1 drop-down box + this.selecteTpName2 = null;//Initialize the default data of the TP2 drop-down box + this.cloudUrl = null;//External cloud URL address + this.cloudNetwork = null;//External cloud network name + this.cloudNode = null;//External cloud Node name + this.cloudTp = null;//External cloud Tp name + } + + //Get cloud image data + getD3Data() { + this.isSpinning = true; + this.myhttp.getNetworkD3Data() + .subscribe((data) => { + this.isSpinning = false; + if (data.length == 0) { + this.addLinkDisabled = false; + this.nonetwork = true; + return; + } + this.nonetwork = false; + for (let ii = 0; ii < data.length; ii++) {//Determine if there is external cloud information in the data, and kick it out. + if (data[ii]['aaiId'] != null) { + this.dataCloud = data.splice(ii, 1); + } + } + + for (let i = 0; i < data.length; i++) { + let name1 = {}, name2 = {}; + let nodess = []; + name1['name'] = name2['network'] = data[i]['networkId']; + name1['type'] = '1'; + name1['source'] = i; + this.d3Data.push(name1); + for (let c = 0; c < data[i]["pnfs"].length; c++) { + nodess.push(data[i]['pnfs'][c]['pnfName']); + this.nodeOption1[name2['network']] = nodess; + } + this.networkOption.push(name2); + } + console.log(this.networkOption); + for (let i = 0; i < data.length; i++) { + let tp_length = data[i]['tps'].length; + for (let h = 0; h < tp_length; h++) { + let name2 = {}; + let interface_name = data[i]['tps'][h]['interface-name']; + name2['name'] = interface_name; + name2['type'] = '2'; + name2['source'] = i; + this.d3Data.push(name2); + } + } + for (let b = 0; b < this.d3Data.length; b++) { + this.d3Data[b]['target'] = b; + } + this.initPosition(this.d3Data); + setTimeout(this.render(this.d3Data, this.imgmap, this.dataCloud, this.charge, data), 0); + }, (err) => { + console.log(err); + }); + + } + + //Get the initial connection status of the cloud image getlogicalLinksData + getLinksData() { + this.myhttp.getLogicalLinksData() + .subscribe((data) => { + if (data["status"] == "FAILED") { + return; + } + for (let i = 0; i < data["logical-link"].length; i++) {//Determine whether there is an external cloud connection in the obtained connection, and kick it out. + if (data['logical-link'][i]['relationship-list']['relationship'].length > 2) { + this.dataCloudLink = data['logical-link'].splice(i, 1); + } + } + + for (let i = 0; i < data["logical-link"].length; i++) { + let textval = []; + textval[0] = data['logical-link'][i]['relationship-list']['relationship'][0]['relationship-data'][1]['relationship-value'];//tp1 + textval[1] = data['logical-link'][i]['relationship-list']['relationship'][1]['relationship-data'][1]['relationship-value'];//tp2 + textval[2] = data['logical-link'][i]['resource-version'];//version + textval[3] = data['logical-link'][i]['relationship-list']['relationship'][0]['relationship-data'][0]['relationship-value'];//node1 + textval[4] = data['logical-link'][i]['relationship-list']['relationship'][1]['relationship-data'][0]['relationship-value'];//node2 + textval[5] = data['logical-link'][i]['operational-status']; + textval[6] = data['logical-link'][i]['link-name']; + this.logicalLinks.push(textval); + this.chose(textval); + } + console.log(this.logicalLinks); + if (this.dataCloudLink.length > 0) { + this.getcloudLine(this.dataCloudLink); + } + }, (err) => { + console.log(err); + }); + } + + //D3Cloud rendering + render(nodes, imgmap, dataCloud, charge, dataD3) { + let thiss = this; + let _this = this.tpoption, + width = null, + height = _this.height; + if (_this.width > 800) { + width = _this.width; + } else { + width = 800; + } + if (dataD3.length <= 4) { + charge = -300; + } else if (dataD3.length > 4 && dataD3.length <= 6) { + charge = -160; + } else if (dataD3.length > 6 && dataD3.length <= 10) { + charge = -110; + } else { + charge = -100; + } + let svg = d3.select(_this.container).append('svg') + .attr('width', width) + .attr('height', height) + .attr('id', 'content-svg') + .style('pointer-events', 'all') + .style('position', 'absolute') + .style('top', '1%') + .style('right', '2%'), + graph = svg.append('g').attr('class', 'graph').attr('id', 'graph'), + + _g_nodes = graph.selectAll('g.node') + .data(nodes) + .enter() + .append('g') + .style('display', function (d) { + let display = 'block'; + switch (d.type) { + case '1': + display = 'none'; + break; + case '2': + display = 'none'; + break; + default: + break; + } + return display; + }) + .style('cursor', 'pointer') + .attr('class', 'node'), + + _g_lines = graph.selectAll('line.line') + .data(nodes) + .enter() + .append('g') + .style('display', 'none') + .attr('class', 'line'); + + + _g_lines.append('line') + .style('stroke', '#93c62d' + ) + .style('stroke-width', 2); + + _g_nodes.append('image') + .attr('width', function (d) { + let width = 40; + switch (d.type) { + case '1': + width = 4.4 * width; + break; + case '2': + width = 0.12 * width; + break; + default: + break; + } + return width; + }) + .attr('height', function (d) { + let height = 20; + switch (d.type) { + case '1': + height = 3.5 * height; + break; + case '2': + height = 0.2 * height; + break; + default: + break; + } + return height; + }) + .attr('xlink:href', function (d) { + return imgmap[d.type]; + }); + + _g_nodes.append('text') + .text(function (d) { + return d.name; + }) + .style('transform', function (d) { + let x = null; + let y = null; + switch (d.type) { + case '1': + x = 7; + y = -7; + break; + case '2': + x = 1; + y = -2; + break; + default: + break; + } + return 'translate(' + x + '%,' + y + '%)'; + }) + .style('font-size', function (d) { + let size = 14; + switch (d.type) { + case '1': + size = 14; + break; + case '2': + size = 12; + break; + default: + break; + } + return size; + }) + .style('fill', function (d) { + let color = '#666'; + switch (d.type) { + case '1': + color = '#666'; + break; + case '2': + color = '#666'; + break; + default: + break; + } + return color; + }) + .style('font-weight', '500'); + + + //Add custom attributes online + _g_lines.each(function (d, i) { + let _this = d3.select(this); + if (d.name) { + _this.attr('data-text', d.name); + } + }); + + let force = d3.layout.force() + .size([1000, this.winHeight]) + .linkDistance(5) + // .theta(0.6) + .charge(charge) + .nodes(nodes) + .links(nodes) + .start(); + + force.on('tick', function () { + if (force.alpha() <= 0.04) { + + _g_nodes.style('display', function (d) { + let display = 'block'; + switch (d.type) { + case '1': + display = 'block'; + break; + case '2': + display = 'none'; + break; + default: + break; + } + return display; + }); + + nodes.forEach(function (d, i) { + d.x = d.x - 25 < 0 ? 25 : d.x; + d.x = d.x + 25 > width ? width - 25 : d.x; + d.y = d.y - 15 < 0 ? 15 : d.y; + d.y = d.y + 15 > height ? height - 15 : d.y; + }); + + _g_nodes.attr('transform', function (d) { + + let image = d3.select(this).select('image')[0][0], + halfWidth = parseFloat(image.attributes[0]['value']) / 2, + halfHeight = parseFloat(image.attributes[1]['value']) / 2; + let xx = d.x - halfWidth, + yy = d.y - halfHeight; + return 'translate(' + xx + ',' + yy + ')'; + }); + + _g_lines.select('line') + .attr('x1', function (d) { + return d.source.x; + }) + .attr('y1', function (d) { + return d.source.y; + }) + .attr('x2', function (d) { + return d.target.x; + }) + .attr('y2', function (d) { + return d.target.y; + }); + + _g_nodes.select('text').attr('dy', function (d) { + let image = this.previousSibling, + height = parseFloat(image.attributes[1]['value']), + fontSize = 12; + return height + 1.5 * fontSize; + }); + } + }); + + force.on('end', function () { + force.stop(); + if (dataCloud.length > 0) { + thiss.getoutCloud(dataCloud, imgmap); + } + thiss.getLinksData(); + thiss.addLinkDisabled = false; + }); + + }; + + //Topology drag and drop effect + getDragBehavior(force) { + + return d3.behavior.drag() + .origin(function (d) { + return d; + }) + .on('dragstart', dragstart) + .on('drag', dragging) + .on('dragend', dragend); + + function dragstart(d) { + d3.event.sourceEvent.stopPropagation(); + d3.select(this).classed('dragging', true); + force.start(); + } + + function dragging(d) { + d.x = d3.event.x; + d.y = d3.event.y; + } + + function dragend(d) { + d3.select(this).classed('dragging', false); + } + + } + + //Initialize node location + initPosition(datas) { + let origin = [this.tpoption.width / 2, this.tpoption.height / 2]; + let points = this.getVertices(origin, Math.min(this.tpoption.width / 2, this.tpoption.height / 2), datas.length); + datas.forEach((item, i) => { + item.x = points[i].x; + item.y = points[i].y; + }); + } + + //Get anchor points based on polygons + getVertices(origin, r, n) { + if (typeof n !== 'number') return; + let ox = origin[0]; + let oy = origin[1]; + let angle = 30 * n / n; + let i = 0; + let points = []; + let tempAngle = 0; + while (i < n) { + tempAngle = (i * angle * Math.PI) / 180; + points.push({ + x: ox - r * Math.sin(tempAngle), + y: oy - r * Math.cos(tempAngle), + }); + i++; + } + return points; + } + + //Rendering an external cloud + getoutCloud(dataCloud, imgmap) { + let _this = this, + width; + let networkId = dataCloud[0]['networkId']; + if (_this.tpoption.width > 800) { + width = _this.tpoption.width; + } else { + width = 800; + } + let svg = d3.select('#content-svg'); + svg.append('g').attr('class', 'out').attr('id', 'out').style({ 'display': 'block' }).attr('transform', 'translate(' + (width - 200) + ',0)'); + let out = d3.select('#out'); + out.append('image').style('width', '200').style('height', '118').attr('xlink:href', imgmap['3']); + out.append('text').text(networkId) + .style('transform', 'translate(0，0)') + .style('font-size', '16') + .style('font-weight', '400') + .attr('dx', '40') + .attr('dy', '70') + .style('fill', '#666'); + } + + //External cloud connection + getcloudLine(dataCloudLink) { + let textval = []; + textval[0] = dataCloudLink[0]['relationship-list']['relationship'][0]['relationship-data'][1]['relationship-value'];//tp1 + textval[1] = dataCloudLink[0]['relationship-list']['relationship'][1]['relationship-data'][1]['relationship-value'];//tp2 + textval[2] = dataCloudLink[0]['resource-version'];//version + textval[3] = dataCloudLink[0]['relationship-list']['relationship'][0]['relationship-data'][0]['relationship-value'];//node1 + textval[4] = dataCloudLink[0]['relationship-list']['relationship'][1]['relationship-data'][0]['relationship-value'];//node2 + textval[5] = dataCloudLink[0]['operational-status'];//status + textval[6] = dataCloudLink[0]['relationship-list']['relationship'][2]['relationship-data'][0]['relationship-value'];//aaiId + textval[7] = this.dataCloud[0]['networkId']; + let dataD3 = this.d3Data; + let arr = [ + textval[0], + textval[1] + ]; + for (let p = 0; p < dataD3.length; p++) {//Determine which Domain network the two tp ports belong to + for (let pp = 0; pp < arr.length; pp++) {//Determine which Domain network the two tp ports belong to + if (dataD3[p]['name'] == arr[pp]) { + textval[8] = dataD3[p]['source']['name'];//network1 + } + } + } + textval[9] = dataCloudLink[0]['link-name']; + let lines_json = {}; + let _this = this, + width; + if (_this.tpoption.width > 800) { + width = _this.tpoption.width; + } else { + width = 800; + } + for (let i = 0; i < $(".node").length; i++) { + if ($('.node').eq(i).find('text').html() == textval[8]) { + //Get the x, y coordinates of the second level + let translates = $('.node').eq(i).css('transform'); + lines_json['x1'] = parseFloat(translates.substring(7).split(',')[4]); + lines_json['y1'] = parseFloat(translates.substring(7).split(',')[5]); + lines_json['x2'] = width - 100; + lines_json['y2'] = 100; + } + } + let x1 = lines_json['x1']; + let y1 = lines_json['y1']; + let x2 = lines_json['x2']; + let y2 = lines_json['y2']; + let color = '#14bb58'; + if (textval[5] == 'up') { + color = '#14bb58'; + } else { + color = 'red'; + } + let line = ''; + let svg = d3.select('#graph'); + $('.cloudline').remove(); + $('#graph').prepend(line); + $('.cloudline').attr({ + x1: x1 + 100, + y1: y1 + 10, + x2: x2, + y2: y2, + 'data-tp1': textval[0], + 'data-tp2': textval[1], + 'data-version': textval[2], + 'data-node1': textval[3], + 'data-node2': textval[4], + 'data-network': textval[8], + 'data-cloudnetwork': textval[7], + 'data-url': '', + 'data-aaiid': textval[6], + 'data-link': textval[9], + }); + svg.html(svg.html()); + this.getCloudUrl(textval[6]); + this.getExtAAIIdVersion(textval[6]); + } + + + //Query external cloud host url address + getCloudUrl(aaiId) { + this.myhttp.queryCloudUrl(aaiId) + .subscribe((data) => { + this.delcloudUrl = data['service-url']; + $('.cloudline').attr({ + 'data-url': data['service-url'] + }); + }, (err) => { + console.log(err); + }); + } + + //Query external cloud ext-aai-id resource-version + getExtAAIIdVersion(aaiId) { + this.myhttp.queryExtAAIIdVersion(aaiId) + .subscribe((data) => { + this.delVersion = data["resource-version"]; + $('.cloudline').attr({ + 'data-version': data["resource-version"], + }); + }, (err) => { + console.log(err); + }); + } + + + //The right form drop-down box data is filled with three levels of linkage + //Left Port + network1Change(value: string): void { + this.selectedNode1 = this.nodeOption1[value][0]; + this.getPInterfaces1(); + } + + node1Change(): void { + this.getPInterfaces1(); + } + + //Get the TP data under the specified node + getPInterfaces1() { + let params = { + pnfName: this.selectedNode1, + }; + this.myhttp.getPInterfacesData1(params) + .subscribe((data) => { + this.tpOption1 = []; + for (let i = 0; i < data.length; i++) { + let tpName = data[i]['interface-name']; + this.tpOption1.push(tpName); + } + this.selecteTpName1 = this.tpOption1[0]; + }, (err) => { + console.log(err); + }); + } + + //Right Port + network2Change(value: string): void { + this.selectedNode2 = this.nodeOption1[value][0]; + this.getPInterfaces2(); + } + + node2Change(): void { + this.getPInterfaces2(); + } + + //Get the TP data under the specified node + getPInterfaces2() { + let params = { + pnfName: this.selectedNode2, + }; + this.myhttp.getPInterfacesData2(params) + .subscribe((data) => { + this.tpOption2 = []; + for (let i = 0; i < data.length; i++) { + let tpName = data[i]['interface-name']; + this.tpOption2.push(tpName); + } + this.selecteTpName2 = this.tpOption2[0]; + }, (err) => { + console.log(err); + }); + } + + //Submit form, connect + submitForm(): void { + //When the page ONAP is not selected, the local cloud TP connection + let _thiss = this; + if (this.inputshow == false) { + if (this.linkName == null || this.networkVal1 == null || this.selectedNode1 == null || this.selecteTpName1 == null || this.networkVal2 == null || this.selectedNode2 == null || this.selecteTpName2 == null) { + alert('The service port cannot be empty. Please select the port information.'); + return; + } else if (this.networkVal1 == this.networkVal2) { + alert('The TP port under the same cloud service cannot be connected!'); + return; + } + let tp_links = [], + tp1 = this.selecteTpName1, + tp2 = this.selecteTpName2; + for (let i = 0; i < $(".line-port").length; i++) { + let data_text1 = $('.line-port').eq(i).attr('data-tp1'); + let data_text2 = $('.line-port').eq(i).attr('data-tp2'); + tp_links.push(data_text1); + tp_links.push(data_text2); + } + if (tp_links.indexOf(tp1) != -1 || tp_links.indexOf(tp2) != -1) { + alert('This port number connection already exists!'); + return; + } + this.createTpLinks(); + + } else { + //When the page ONAP is selected, the external cloud is created, and the connection is made. + if (this.linkName == null || this.networkVal1 == null || this.selectedNode1 == null || this.selecteTpName1 == null || this.cloudUrl == null || this.cloudNetwork == null || this.cloudNode == null || this.cloudTp == null) { + alert('The service port cannot be empty. Please fill in the complete port information.'); + return; + } + let tp_links = [], + tp1 = this.selecteTpName1; + for (let i = 0; i < $(".line-port").length; i++) { + let data_text1 = $('.line-port').eq(i).attr('data-tp1'); + tp_links.push(data_text1); + } + if (tp_links.indexOf(tp1) != -1) { + alert('This port number connection already exists!'); + return; + } + + let time = this.cloudNetwork + new Date().getTime();//Create aaiid for the external cloud, this identifier is unique and cannot be repeated + this.createCloudUrls(time) + } + } + + //Create tp connection call interface createLink + createTpLinks() { + let params = { + 'link-name': this.linkName, + 'link-type': 'cross-link', + 'operational-status': 'up', + 'relationship-list': { + 'relationship': [ + { + 'related-to': 'p-interface', + 'related-link': '/aai/v14/network/pnfs/pnf/' + this.selectedNode1 + '/p-interfaces/p-interface/' + this.selecteTpName1, + 'relationship-data': [ + { + 'relationship-key': 'pnf.pnf-id', + 'relationship-value': this.selectedNode1 + }, + { + 'relationship-key': 'p-interface.p-interface-id', + 'relationship-value': this.selecteTpName1, + } + ] + }, + { + 'related-to': 'p-interface', + 'related-link': '/aai/v14/network/pnfs/pnf/' + this.selectedNode2 + '/p-interfaces/p-interface/' + this.selecteTpName2, + 'relationship-data': [ + { + 'relationship-key': 'pnf.pnf-id', + 'relationship-value': this.selectedNode2 + }, + { + 'relationship-key': 'p-interface.p-interface-id', + 'relationship-value': this.selecteTpName2 + } + ] + } + ] + } + }; + this.myhttp.createLink(params) + .subscribe((data) => { + if (data['status'] == 'SUCCESS') { + this.queryAddLink(); + } + }, (err) => { + console.log(err); + console.log('Create connection interface call failed'); + }); + } + + //Query the newly added connection immediately after creating the tp cable + queryAddLink() { + let linkName = this.linkName, + selecteTpName1 = this.selecteTpName1, + selecteTpName2 = this.selecteTpName2, + selectedNode1 = this.selectedNode1, + selectedNode2 = this.selectedNode2; + let params = { + 'link-name': linkName, + }; + this.myhttp.querySpecificLinkInfo(params) + .subscribe((data) => { + let version = data['resource-version'], + operational_status = data['operational-status'], + linkname = data['link-name']; + let textval = [selecteTpName1, selecteTpName2, version, selectedNode1, selectedNode2, operational_status, linkname]; + this.hideForm(); + this.chose(textval); + }, (err) => { + console.log(err); + }); + } + + //Connection between two TP coordinates + chose(textval) { + let lines_json = {}; + lines_json['tp1'] = textval[0]; + lines_json['tp2'] = textval[1]; + lines_json['version'] = textval[2]; + lines_json['node1'] = textval[3]; + lines_json['node2'] = textval[4]; + lines_json['status'] = textval[5]; + lines_json['linkname'] = textval[6]; + for (let i = 0; i < $(".node").length; i++) { + if ($('.node').eq(i).find('text').html() == textval[0]) { + $('.node').eq(i).show(); + //Get the x, y coordinates of the second level + let translates = $('.node').eq(i).css('transform'); + lines_json['x1'] = parseFloat(translates.substring(7).split(',')[4]); + lines_json['y1'] = parseFloat(translates.substring(7).split(',')[5]); + } + if ($('.node').eq(i).find('text').html() == textval[1]) { + $('.node').eq(i).show(); + let translates = $('.node').eq(i).css('transform'); + lines_json['x2'] = parseFloat(translates.substring(7).split(',')[4]); + lines_json['y2'] = parseFloat(translates.substring(7).split(',')[5]); + } + } + this.addLine(lines_json); + } + + //Connection between two TPs + addLine(lines) { + let tp1 = lines.tp1; + let tp2 = lines.tp2; + let version = lines.version; + let node1 = lines.node1; + let node2 = lines.node2; + let status = lines.status; + let linkname = lines.linkname; + let x1 = lines.x1; + let y1 = lines.y1; + let x2 = lines.x2; + let y2 = lines.y2; + let color = '#14bb58'; + if (status == 'up') { + color = '#14bb58'; + } else { + color = 'red'; + } + let line = ''; + let svg = d3.select('#graph'); + $('#graph').prepend(line); + $('.line').first().attr({ + x1: x1, + y1: y1, + x2: x2, + y2: y2, + 'data-tp1': tp1, + 'data-tp2': tp2, + 'data-version': version, + 'data-node1': node1, + 'data-node2': node2, + 'data-link': linkname + }); + svg.html(svg.html()); + } + + //After creating an external cloud connection, query the connection immediately + queryOutCloudLink(time) { + let networkVal1 = this.networkVal1, + selectedNode1 = this.selectedNode1, + selecteTpName1 = this.selecteTpName1, + cloudUrl = this.cloudUrl, + cloudNetWork = this.cloudNetwork, + cloudNode = this.cloudNode, + cloudTp = this.cloudTp, + linkname = this.linkName; + let params = { + 'link-name': linkname, + }; + this.myhttp.querySpecificLinkInfo(params) + .subscribe((data) => { + let status = data['operational-status']; + let link_name = data['link-name']; + this.outCloudShow = true; + this.hideForm(); + this.outCloud(this.imgmap); + setTimeout(this.cloudLine(networkVal1, selectedNode1, selecteTpName1, cloudUrl, cloudNetWork, cloudNode, cloudTp, status, link_name, time), 0); + }, (err) => { + console.log(err); + }); + } + + //Add external cloud + outCloud(imgmap) { + let _this = this, + width; + if (_this.tpoption.width > 800) { + width = _this.tpoption.width; + } else { + width = 800; + } + let svg = d3.select('#content-svg'); + svg.append('g').attr('class', 'out').attr('id', 'out').style({ 'display': 'block' }).attr('transform', 'translate(' + (width - 200) + ',0)'); + let out = d3.select('#out'); + out.append('image').style('width', '200').style('height', '118').attr('xlink:href', imgmap['3']); + out.append('text').text('Partner Network') + .style('transform', 'translate(0，0)') + .style('font-size', '16') + .style('font-weight', 'bold') + .attr('dx', '40') + .attr('dy', '70') + .style('fill', '#fff'); + } + + //Add external cloud connection + cloudLine(networkVal1, selectedNode1, selecteTpName1, cloudUrl, cloudNetWork, cloudNode, cloudTp, status, link_name, time) { + let lines_json = {}; + let _this = this, + width; + if (_this.tpoption.width > 800) { + width = _this.tpoption.width; + } else { + width = 800; + } + for (let i = 0; i < $(".node").length; i++) { + if ($('.node').eq(i).find('text').html() == networkVal1) { + //Get the x, y coordinates of the second level + let translates = $('.node').eq(i).css('transform'); + lines_json['x1'] = parseFloat(translates.substring(7).split(',')[4]); + lines_json['y1'] = parseFloat(translates.substring(7).split(',')[5]); + lines_json['x2'] = width - 100; + lines_json['y2'] = 100; + } + } + let x1 = lines_json['x1']; + let y1 = lines_json['y1']; + let x2 = lines_json['x2']; + let y2 = lines_json['y2']; + let color = '#14bb58'; + if (status == 'up') { + color = '#14bb58'; + } else { + color = 'red'; + } + let line = ''; + let svg = d3.select('#graph'); + $('.cloudline').remove(); + $('#graph').prepend(line); + $('.cloudline').attr({ + x1: x1 + 100, + y1: y1 + 10, + x2: x2, + y2: y2, + 'data-tp1': selecteTpName1, + 'data-tp2': cloudTp, + 'data-node1': selectedNode1, + 'data-node2': cloudNode, + 'data-network': networkVal1, + 'data-cloudnetwork': cloudNetWork, + 'data-url': cloudUrl, + 'data-aaiid': time, + 'data-link': link_name + }); + svg.html(svg.html()); + this.getExtAAIIdVersion(time); + } + + //Create an external cloud, call the following 5 interfaces when connecting:createCloudNetwork,createPnfs,createCloudTp,createCloudLinks,createCloudUrls + createCloudNetwork(time) { + let _thiss = this; + let params = { + '-xmlns': 'http://org.onap.aai.inventory/v14', + 'in-maint': 'false', + "network-id": this.cloudNetwork, + "provider-id": "", + "client-id": "", + "te-topo-id": "", + "relationship-list": { + "relationship": [{ + "related-to": "ext-aai-network", + 'related-link': '/aai/v14/network/ext-aai-networks/ext-aai-network/' + time + }] + } + }; + + //Do some asynchronous operations + _thiss.myhttp.createNetwrok(params) + .subscribe((data) => { + if (data["status"] == "SUCCESS") { + _thiss.createPnfs(time) + } + }, (err) => { + console.log(err); + }); + + } + + createPnfs(time) { + let _thiss = this; + let params = { + "-xmlns": "http://org.onap.aai.inventory/v14", + "pnf-name": this.cloudNode, + "pnf-id": this.cloudNode, + "in-maint": "true", + "relationship-list": { + "relationship": [ + { + "related-to": "ext-aai-network", + "relationship-label": "org.onap.relationships.inventory.BelongsTo", + "related-link": "/aai/v14/network/ext-aai-networks/ext-aai-network/" + time, + "relationship-data": { + "relationship-key": "ext-aai-network.aai-id", + "relationship-value": time + } + }, + { + "related-to": "network-resource", + "relationship-label": "tosca.relationships.network.LinksTo", + "related-link": "/aai/v14/network/network-resources/network-resource/" + this.cloudNetwork + } + ] + } + }; + + //Do some asynchronous operations + _thiss.myhttp.createPnf(params) + .subscribe((data) => { + if (data["status"] == "SUCCESS") { + _thiss.createCloudTp(time) + } + }, (err) => { + console.log(err); + }); + } + + createCloudTp(time) { + let _thiss = this; + let params = { + "-xmlns": "http://org.onap.aai.inventory/v14", + "interface-name": this.cloudTp, + "speed-value": "1000000", + "in-maint": "true", + "network-ref": "", + "transparent": "true", + "operational-status": "up" + }; + + let cloudNodeName = this.cloudNode; + //Do some asynchronous operations + _thiss.myhttp.createTp(params, cloudNodeName) + .subscribe((data) => { + if (data["status"] == "SUCCESS") { + _thiss.createCloudLinks(time) + } + }, (err) => { + console.log(err); + }); + } + + createCloudLinks(time) { + let _thiss = this; + let params = { + "-xmlns": "http://org.onap.aai.inventory/v14", + "link-name": this.linkName, + "in-maint": "false", + "link-type": "cross-link", + "speed-value": "", + "operational-status": "up", + "relationship-list": { + "relationship": [ + { + "related-to": "p-interface", + "relationship-label": "tosca.relationships.network.LinksTo", + "related-link": "/aai/v14/network/pnfs/pnf/" + this.selectedNode1 + "/p-interfaces/p-interface/" + this.selecteTpName1, + "relationship-data": [ + { + "relationship-key": "pnf.pnf-name", + "relationship-value": this.selectedNode1 + }, + { + "relationship-key": "p-interface.interface-name", + "relationship-value": this.selecteTpName1 + } + ], + "related-to-property": [{ + "property-key": "p-interface.prov-status" + }] + }, + { + "related-to": "p-interface", + "relationship-label": "tosca.relationships.network.LinksTo", + "related-link": "/aai/v14/network/pnfs/pnf/" + this.cloudNode + "/p-interfaces/p-interface/" + this.cloudTp, + "relationship-data": [ + { + "relationship-key": "pnf.pnf-name", + "relationship-value": this.cloudNode + }, + { + "relationship-key": "p-interface.interface-name", + "relationship-value": this.cloudTp + } + ], + "related-to-property": [{ + "property-key": "p-interface.prov-status" + }] + }, + { + "related-to": "ext-aai-network", + "relationship-label": "org.onap.relationships.inventory.BelongsTo", + "related-link": "/aai/v14/network/ext-aai-networks/ext-aai-network/" + time, + "relationship-data": [ + { + "relationship-key": "ext-aai-network.aai-id", + "relationship-value": time + } + ] + } + ] + } + }; + + //Do some asynchronous operations + _thiss.myhttp.createCloudLink(params) + .subscribe((data) => { + // resolve(data['status']); + if (data["status"] == "SUCCESS") { + _thiss.queryOutCloudLink(time); + } + }, (err) => { + console.log(err); + }); + } + + createCloudUrls(time) { + let _thiss = this; + let params = { + '-xmlns': 'http://org.onap.aai.inventory/v14', + 'aai-id': time, + 'esr-system-info': { + 'esr-system-info-id': 'example-esr-system-info-id-val-0', + 'service-url': this.cloudUrl, + 'user-name': 'demo', + 'password': 'demo123456!', + 'system-type': 'ONAP' + } + }; + _thiss.myhttp.createCloudUrl(params) + .subscribe((data) => { + if (data['status'] == 'SUCCESS') { + _thiss.createCloudNetwork(time); + } + }, (err) => { + console.log(err); + }); + } + + //Local cloud TP port Delete connection Call interface deleteLink + delLink(): void { + let deltp1 = this.delTp1, + deltp2 = this.delTp2, + version = this.delVersion, + dellinkname = this.delLinkname, + delLinkIndex = this.delLinkIndex; + let params = { + 'logical-link': dellinkname, + 'resource-version': version, + }; + this.myhttp.deleteLink(params) + .subscribe((data) => { + if (data['status'] == 'SUCCESS') { + this.delLine(deltp1, deltp2); + delLinkIndex.remove(); + } + }, (err) => { + console.log(err); + console.log('Deleting a connection interface call failed'); + }); + } + + delLine(val1, val2) { + this.delBoxisVisible = false; + for (let i = 0; i < $(".node").length; i++) { + if ($('.node').eq(i).find('text').html() == val1) { + $('.node').eq(i).hide(); + } + if ($('.node').eq(i).find('text').html() == val2) { + $('.node').eq(i).hide(); + } + } + } + + + //External cloud Delete connection Call interface deleteCloudLink + delCloudLink(): void { + let deltp1 = this.delTp1, + deltp2 = this.delTp2, + version = this.delVersion, + aaiId = this.aaiId; + let params = { + "aaiId": aaiId, + "version": version, + }; + this.myhttp.deleteCloudLink(params) + .subscribe((data) => { + if (data['status'] == 'SUCCESS') { + this.delLine(deltp1, deltp2); + $('.cloudline').remove(); + $('#out').remove(); + } + }, (err) => { + console.log(err); + console.log('Deleting a connection interface call failed'); + }); + } + +} diff --git a/usecaseui-portal/src/app/views/fcaps/fcaps.component.html b/usecaseui-portal/src/app/views/fcaps/fcaps.component.html new file mode 100644 index 00000000..edd2111a --- /dev/null +++ b/usecaseui-portal/src/app/views/fcaps/fcaps.component.html @@ -0,0 +1,3 @@ + + + diff --git a/usecaseui-portal/src/app/views/fcaps/fcaps.component.less b/usecaseui-portal/src/app/views/fcaps/fcaps.component.less new file mode 100644 index 00000000..e69de29b diff --git a/usecaseui-portal/src/app/views/fcaps/fcaps.component.spec.ts b/usecaseui-portal/src/app/views/fcaps/fcaps.component.spec.ts new file mode 100644 index 00000000..42bdbc0f --- /dev/null +++ b/usecaseui-portal/src/app/views/fcaps/fcaps.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FcapsComponent } from './fcaps.component'; + +describe('FcapsComponent', () => { + let component: FcapsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ FcapsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(FcapsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/fcaps/fcaps.component.ts b/usecaseui-portal/src/app/views/fcaps/fcaps.component.ts new file mode 100644 index 00000000..7f9ab7f4 --- /dev/null +++ b/usecaseui-portal/src/app/views/fcaps/fcaps.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-fcaps', + templateUrl: './fcaps.component.html', + styleUrls: ['./fcaps.component.less'] +}) +export class FcapsComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/usecaseui-portal/src/app/views/home/home.component.css b/usecaseui-portal/src/app/views/home/home.component.css new file mode 100644 index 00000000..41b3f5fe --- /dev/null +++ b/usecaseui-portal/src/app/views/home/home.component.css @@ -0,0 +1,158 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 20px; +} +.content .services { + float: left; + background-color: #fff; + width: 30%; + height: 628px; + border-radius: 5px; + padding: 28px 22px; +} +.content .services h4 { + font: 600 16px/16px "Arial"; + color: #3d4d65; + margin-bottom: 58px; +} +.content .services h3 { + font: 400 48px/48px "Arial"; + color: #3fa8eb; + text-align: center; +} +.content .services h3 span { + font-size: 14px; +} +.content .services p { + font: 400 14px/14px "Arial"; + color: #54657e; + text-align: center; + margin-bottom: 48px; +} +.content .services .tip { + background-color: #eceff4; + color: #3d4d65; + font-size: 16px; + margin: 0 20px; + height: 35px; + line-height: 35px; + border-radius: 5px; +} +.content .rightcontent { + float: left; + padding-left: 15px; + width: 70%; +} +.content .rightcontent .rt-content { + height: 220px; + margin-bottom: 18px; +} +.content .rightcontent .rt-content .poerformance { + float: left; + margin-left: 2%; + background-color: #fff; + height: 100%; + width: 50%; + border-radius: 5px; + padding: 28px 26px; +} +.content .rightcontent .rt-content .poerformance h4 { + font: 600 16px/16px "Arial"; + color: #3d4d65; + margin-bottom: 34px; +} +.content .rightcontent .rt-content .poerformance div { + height: 57px; + position: relative; + margin-bottom: 10px; +} +.content .rightcontent .rt-content .poerformance div h3 { + font: 600 25px/25px "Arial"; + color: #3d4d65; + margin-bottom: 10px; +} +.content .rightcontent .rt-content .poerformance div p { + font: 400 12px/12px "Arial"; + color: #54657e; +} +.content .rightcontent .rt-content .poerformance div img { + position: absolute; + top: 0; + right: 0; +} +.content .rightcontent .rt-content .alarm { + float: left; + background-color: #fff; + height: 100%; + width: 48%; + margin-left: 2%; + border-radius: 5px; + position: relative; + padding: 28px 26px; +} +.content .rightcontent .rt-content .alarm h4 { + position: absolute; + font: 600 16px/16px "Arial"; + color: #3d4d65; +} +.content .rightcontent .rb-content { + height: 390px; + background-color: #fff; + border-radius: 5px; + padding: 24px 30px; + position: relative; +} +.content .rightcontent .rb-content h4 { + font: 600 16px/16px "Arial"; + color: #3d4d65; +} +.content .rightcontent .rb-content nz-dropdown { + position: absolute; + top: 24px; + right: 30px; +} +.content .rightcontent .rb-content nz-dropdown button { + width: 170px; + height: 35px; + background-color: #eceff4; + text-align: left; + border-color: #cad3df; +} +.content .rightcontent .rb-content nz-dropdown button span { + display: inline-block; + width: 120px; + overflow: hidden; + text-overflow: ellipsis; + font-size: 14px; +} +.content .rightcontent .rb-content nz-dropdown button i { + position: absolute; + top: 12px; + right: 12px; +} +.content .rightcontent .rb-content #pfVmChartLine { + width: 100%; + height: 318px; +} diff --git a/usecaseui-portal/src/app/views/home/home.component.html b/usecaseui-portal/src/app/views/home/home.component.html new file mode 100644 index 00000000..4126f241 --- /dev/null +++ b/usecaseui-portal/src/app/views/home/home.component.html @@ -0,0 +1,102 @@ + + + +
    +
    +
    +

    {{"i18nTextDefine_SERVICES" | translate}}

    + + +
    No Service Instances
    + +
    +
    {{"i18nTextDefine_Total" | translate}}: {{serviceNumber}} + {{"i18nTextDefine_cutomers_and" | translate}} {{serviceNumber}} + {{"i18nTextDefine_service_instance" | translate}}
    +
    +

    + {{"i18nTextDefine_ViewDetails" | translate}} +

    +
    +
    +

    {{"i18nTextDefine_PACKAGE" | translate}}

    +
    +
  • +
    +
    NS
    +
    + +
    +
    {{NSdata}}
    +
    +
    • +
  • +
    +
    VNF
    +
    + +
    +
    {{Vnfdata}}
    +
    +
    • +
  • +
    +
    PNF
    +
    + +
    +
    {{PnfData}}
    +
    +
    • +
    +

    + {{"i18nTextDefine_ViewDetails" | translate}} +

    +
    +
    +
    +
    +
    +

    {{"i18nTextDefine_ALARM" | translate}}

    + +

    {{"i18nTextDefine_VNF_Alarm" | translate}}

    +
    +
    + +

    {{"i18nTextDefine_VM_Alarm" | translate}}

    +

    + {{"i18nTextDefine_ViewDetails" | translate}} +

    +
    +
    +
    +

    {{"i18nTextDefine_VM_Performance" | translate}}

    + + + + + +
    +
    +
    diff --git a/usecaseui-portal/src/app/views/home/home.component.less b/usecaseui-portal/src/app/views/home/home.component.less new file mode 100644 index 00000000..9e768cf7 --- /dev/null +++ b/usecaseui-portal/src/app/views/home/home.component.less @@ -0,0 +1,265 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +// .title { +// font: 700 18px/18px "思源黑体"; +// color: #4c5e70; +// margin-bottom: 18px; +// } +// hr { +// border: none; +// height: 2px; +// background-color: #dce1e7; +// margin-bottom: 20px; +// } +.content { + padding: 20px 20px; + overflow: hidden; + .left-content{ + float: left; + width:30%; + // height:96vh; + .services,.PACKAGE{ + width: 100%; + background:rgba(255,255,255,1); + box-shadow:0px 10px 10px 2px rgba(222,222,222,0.5); + border-radius:6px; + padding: 28px 22px; + h4{ + font: 600 16px/16px "Arial Bold"; + color: #0DA9E2; + } + .tip { + float: right; + width: 110px; + line-height: 35px; + border-radius: 5px; + background-color: #eceff4; + font-size: 16px; + color: #3C4F8C; + margin-top: 20px; + margin-bottom: 0!important; + } + } + .services{ + height:466px; + h4{ + margin-bottom: 20px; + } + h5 { + font: 500 18px/18px "ArialMT"; + color:#0DA9E2; + margin: -2em 0 1em 0 ; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; + span { + font-size: 14px; + font-family: "Arial"; + color:#3C4F8C; + } + span:first-child { + font-size: 18px; + padding: 0 4PX 0 4px; + } + span:last-child { + padding-left: 4px; + } + + } + } + .PACKAGE{ + height:422px; + margin-top: 20px; + h4{ + margin-bottom: 50px; + } + .details { + .detailstoplinContent{ + border-bottom:0.5px solid rgba(237,237,237,1); + border-radius:4px; + line-height: 45px; + font-size: 14px; + color: #3C4F8C; + font-family:"ArialMT"; + .detailstoplin { + width: 100%; + height: 50px; + border-top: 0.5px solid #ededed; + border-radius: 4px; + div:first-child{ + width: 20%; + float: left; + } + div:nth-child(2){ + width: 65%; + float: left; + } + div:last-child { + width: 13%; + float: right; + font-size:12px; + font-weight: 500; + color:rgba(60,79,140,0.5); + } + } + } + } + + } + } + .services,.PACKAGE{ + h3 { + font: 400 48px/48px "Arial"; + color: #3fa8eb; + text-align: center; + span { + font-size: 14px; + } + } + + p { + font: 400 14px/14px "Arial"; + color: #54657e; + text-align: center; + margin-bottom: 48px; + } + } + .rightcontent { + float: left; + padding-left: 15px; + width: 70%; + .rt-content { + height: 40%; + margin-bottom: 18px; + background:rgba(255,255,255,1); + box-shadow:0px 10px 10px 2px rgba(222,222,222,0.5); + border-radius:6px; + .poerformance { + float: left; + background-color: #fff; + height: 100%; + width: 50%; + border-radius: 5px; + padding: 28px 26px; + .pfVmPm { + h3 { + color:#BD57E5; + } + } + h4 { + font: 600 16px/16px "Arial Bold"; + color: #0DA9E2; + margin-bottom: 34px; + } + + div { + height: 57px; + position: relative; + margin-bottom: 10px; + h3 { + font: 600 25px/25px "Arial"; + color: #2F6AEF; + margin-bottom: 10px; + padding-left: 50%; + } + p { + font: 400 12px/12px "Arial"; + color:rgba(60,79,140,0.5); + padding-left: 50%; + + } + img { + position: absolute; + top: 0; + left: 0; + } + } + } + .alarm { + float: left; + background-color: #fff; + height: 100%; + width: 48%; + border-radius: 5px; + position: relative; + padding: 28px 26px; + h4 { + position: absolute; + font: 600 16px/16px "Arial Bold"; + color: #0DA9E2; + } + } + .alarm-name{ + text-align: center; + margin-top: 15px; + } + .tip{ + width: 110px; + background-color: #eceff4; + color: #3C4F8C; + font-size: 16px; + float: right; + margin-top: 20px; + margin-bottom: 0!important; + line-height: 35px; + border-radius: 5px; + text-align: center; + } + } + .rb-content { + position: relative; + height: 58%; + background-color: #fff; + padding: 24px 30px; + box-shadow:0px 10px 15px 2px rgba(222,222,222,0.5); + border-radius:6px; + h4 { + font: 600 16px/16px "Arial Bold"; + color: #0DA9E2; + } + nz-dropdown { + position: absolute; + top: 24px; + right: 30px; + button { + width: 170px; + height: 35px; + background-color: #eceff4; + text-align: left; + border-color: #cad3df; + span { + display: inline-block; + width: 120px; + overflow: hidden; + text-overflow: ellipsis; + font-size: 14px; + } + i { + position: absolute; + top: 12px; + right: 12px; + } + } + //下拉框中的样式在style.less中，下拉框是在body中额外临时生成的 + } + #pfVmChartLine { + width: 100%; + height: 318px; + } + } + } +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/home/home.component.spec.ts b/usecaseui-portal/src/app/views/home/home.component.spec.ts new file mode 100644 index 00000000..5456a323 --- /dev/null +++ b/usecaseui-portal/src/app/views/home/home.component.spec.ts @@ -0,0 +1,42 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { TranslateModule, TranslateLoader, TranslateService, TranslateFakeLoader} from '@ngx-translate/core'; +import { NgZorroAntdModule } from 'ng-zorro-antd'; +import { NgxEchartsModule } from 'ngx-echarts'; +import { HttpClientModule } from '@angular/common/http'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { RouterTestingModule } from '@angular/router/testing'; + +import { HomeComponent } from './home.component'; +import { PieComponent } from '../../shared/components/charts/pie/pie.component'; +import { BarComponent } from '../../shared/components/charts/bar/bar.component'; +import { LineComponent } from '../../shared/components/charts/line/line.component'; +import { HomesService } from '../../core/services/homes.service'; + +describe('HomeComponent', () => { + let component: HomeComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HomeComponent, PieComponent, BarComponent, LineComponent ], + imports: [TranslateModule.forRoot({loader: { provide: TranslateLoader, useClass: TranslateFakeLoader }}), + NgZorroAntdModule, + NgxEchartsModule, + HttpClientModule, + BrowserAnimationsModule, + RouterTestingModule], + providers: [HomesService, TranslateService] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HomeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/home/home.component.ts b/usecaseui-portal/src/app/views/home/home.component.ts new file mode 100644 index 00000000..11a0f1a8 --- /dev/null +++ b/usecaseui-portal/src/app/views/home/home.component.ts @@ -0,0 +1,531 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core'; +import { HomesService } from '../../core/services/homes.service'; +import { slideToRight } from '../../animates'; +import { TranslateService } from "@ngx-translate/core"; +import { Router } from '@angular/router'; + +@Component({ + selector: 'app-home', + templateUrl: './home.component.html', + styleUrls: ['./home.component.less'], + animations: [slideToRight] +}) +export class HomeComponent implements OnInit { + @HostBinding('@routerAnimate') routerAnimateState; + + constructor(private myhttp: HomesService, private router: Router) { } + + ngOnInit() { + this.getListSortMasters(); + this.getSourceNames(); + this.getHomeServiceData(); + this.getHomeAlarmData(); + this.getHomeAlarmChartData(); + this.getHomeServiceBarNsData(); + this.getHomeServiceBarVnfData(); + this.getHomeServiceBarPnfData(); + } + + + // services + serviceNumber: number = 0; + serviceChartData: Object; + serviceChartInit: Object = { + backgroundColor: '#fff', + height: 200, + option: { + legend: { + orient: 'vertical', + left: '0px', + bottom: '0px', + data: ['Active', 'Closed'] + }, + color: ["#7AC0EF", "#6A86D8", "#748CDC", "#7277D4", "#7067CE", "#B9B0F7", "#7DCFF5"], + series: [ + { + name: "服务信息", + radius: ['50%', '70%'], + center: ['50%', '45%'], + avoidLabelOverlap: false, + label: { + normal: { + show: false, + position: 'center' + }, + emphasis: { + show: true, + formatter: '{b}\n{c}', + textStyle: { + fontSize: '18', + fontWeight: 'bold' + } + } + }, + labelLine: { + normal: { + show: false + } + }, + itemStyle: { + normal: { + borderWidth: 4, + borderColor: "#fff" + }, + emphasis: { + borderWidth: 0 + } + }, + } + ] + } + }; + // gethomeServiceData + serviceChart = true; + getHomeServiceData() { + this.myhttp.getHomeServiceData() + .subscribe( + (data) => { + this.serviceNumber = data.serviceTotalNum; + if (this.serviceNumber > 0) { + this.serviceChart = true; + } else { + this.serviceChart = false; + } + this.serviceChartData = { + series: [{ data: data.customerServiceList }] + }; + }, + (err) => { + console.error(err); + } + ) + } + + // VM alarm + VMAlarmChartData: Object; + VMAlarmChartInit: Object = { + height: 180, + option: { + tooltip: { + trigger: 'item', + formatter: '{b}\n{c},{d}%' + }, + color: [ + { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: '#FB93C2' // 0% color + }, { + offset: 1, color: '#FB7788' // 100% color + }], + globalCoord: false + }, { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: '#A6BFE4' // 0% color + }, { + offset: 1, color: '#7A8BAE' // 100% color + }], + globalCoord: false + }], + series: [{ + name: "告警信息", + radius: ['50%', '70%'], + center: ['50%', '45%'], + label: { + normal: { + show: false, + }, + emphasis: { + show: true, + formatter: '{b}\n{c},{d}%', + color: "#3C4F8C" + } + }, + + }] + } + }; + + // alarm bar + alarmChartData: Object; + alarmChartInit: Object = { + height: 180, + option: { + tooltip: { + trigger: 'item', + formatter: '{b}\n{c},{d}%' + }, + legend: { + orient: 'vertical', + left: '0px', + bottom: '0px', + itemWidth: 10, + itemHeight: 10, + textStyle: { + color: "#3C4F8C" + }, + data: ['Active', 'Fixed'] + }, + color: [ + { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: '#FB93C2' // 0% color + }, { + offset: 1, color: '#FB7788' // 100% color + }], + globalCoord: false + }, { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: '#A6BFE4' // 0% + }, { + offset: 1, color: '#7A8BAE' // 100% + }], + globalCoord: false + }], + series: [{ + name: "告警信息", + radius: '55%', + center: ['50%', '45%'], + label: { + normal: { + show: false, + }, + emphasis: { + show: true, + formatter: '{b}\n{c},{d}%', + color: "#3C4F8C" + } + } + }] + } + }; + + getHomeAlarmData() { + this.myhttp.getHomeAlarmData() + .subscribe((data) => { + this.alarmChartData = { + series: [{ + data: [{ name: "Active", value: data[0] }, { name: "Fixed", value: data[1] }] + }] + }; + this.VMAlarmChartData = { + series: [{ + data: [{ name: "Active", value: data[0] }, { name: "Fixed", value: data[1] }] + }] + }; + }) + } + + // alarm line + alarmLineChartData: Object; + alarmLineChartInit: Object = { + height: 320, + option: { + legend: { + bottom: '0px', + data: ['CPU', 'Memory', 'Disk'] + }, + xAxis: { + data: [] + }, + series: [ + { + name: 'CPU', + type: 'line', + itemStyle: { + color: "#70ACEC" + }, + data: [] + }, + { + name: 'Memory', + type: 'line', + itemStyle: { + color: "#3BCD79" + }, + data: [] + }, + { + name: 'Disk', + type: 'line', + itemStyle: { + color: "#FDC288" + }, + data: [] + } + ] + } + }; + + // services + servicesBarChartData: Object; + servicesBarChartData1: Object; + servicesBarChartData2: Object; + serviceBarChartInit: Object = { + height: 40, + width: 160, + option: { + tooltip: { + + }, + grid: { + + }, + xAxis: { + type: 'value', + show: false, + min: 0, + max: 100, + axisTick: { + show: false + }, + }, + yAxis: { + type: 'category', + show: false, + axisTick: { + show: false + } + }, + series: [{ + type: 'bar', + name: 'a', + silent: true, + animation: false, + data: [], + stack: 'income', + barWidth: 12, + itemStyle: { + normal: {} + }, + }, { + type: 'bar', + name: '', + animation: false, + silent: true, + data: [100], + tooltip: { + show: false + }, + stack: 'income', + barWidth: 12, + itemStyle: { + normal: { + color: '#fff', + barBorderRadius: [10, 10, 10, 10] + } + }, + label: { + normal: { + show: false, + } + }, + } + ] + } + } + + + NSdata: number; + Vnfdata: number; + PnfData: number; + getHomeServiceBarNsData() { + this.myhttp.getHomeServiceBarNsData() + .subscribe((data) => { + this.NSdata = data.length; + this.servicesBarChartData = { + series: [ + { + data: [this.NSdata], + itemStyle: { + normal: { + color: { + type: 'bar', + colorStops: [{ + offset: 0, + color: '#FDAC63' + }, { + offset: 1, + color: '#FECE72' + }], + globalCoord: false, + }, + barBorderRadius: [10, 10, 10, 10] + } + }, + }, + { data: [100] }, + + ] + } + }, (err) => { + console.error(err); + }) + } + + getHomeServiceBarVnfData() { + this.myhttp.getHomeServiceBarVnfData() + .subscribe((data) => { + this.Vnfdata = data.length; + this.servicesBarChartData1 = { + series: [ + { + data: [this.Vnfdata], + itemStyle: { + normal: { + color: { + type: 'bar', + colorStops: [{ + offset: 0, + color: '#9AD09F' + }, { + offset: 1, + color: '#BCECB8' + }], + globalCoord: false, + + }, + barBorderRadius: [10, 10, 10, 10] + } + }, + }, + { data: [100] }, + ] + } + }, (err) => { + console.error(err); + }) + } + + getHomeServiceBarPnfData() { + this.myhttp.getHomeServiceBarPnfData() + .subscribe((data) => { + this.PnfData = data.length; + this.servicesBarChartData2 = { + series: [ + { + data: [this.PnfData], + itemStyle: { + normal: { + color: { + type: 'bar', + colorStops: [{ + offset: 0, + color: '#71ADEF' + }, { + offset: 1, + color: '#ACCAF4' + }], + globalCoord: false, + + }, + barBorderRadius: [10, 10, 10, 10] + } + }, + }, + { data: [100] }, + ] + } + }, (err) => { + console.error(err); + }) + } + // sourceName + sourceNameList = ['performanceNameOne']; + sourceNameSelected = null; + + + listSortMasters = null; + + getListSortMasters() { + if (sessionStorage.getItem("DefaultLang") == undefined) { + sessionStorage.setItem("DefaultLang", "en"); + } + this.myhttp.getListSortMasters() + .subscribe((data) => { + this.listSortMasters = JSON.stringify(data); + sessionStorage.setItem('listSortMasters', this.listSortMasters) + }) + } + + getSourceNames() { + this.myhttp.getSourceNames() + .subscribe((data) => { + this.sourceNameList = data; + }) + } + sourceNameSelect(item) { + if (this.sourceNameSelected != item) { + this.sourceNameSelected = item; + this.getHomeAlarmChartData() + } + } + getHomeAlarmChartData() { + let nowTime = this.myhttp.dateformater(Date.now()); + let startTime = this.myhttp.dateformater(Date.now() - 30 * 24 * 60 * 60 * 1000); + let obj = { + sourceName: this.sourceNameSelected, + startTime: startTime, + endTime: nowTime, + format: "day" + } + + this.myhttp.getHomeAlarmChartData(obj) + .subscribe((data) => { + this.alarmLineChartData = { + xAxis: { + data: data.dataList + }, + series: [ + { data: data.allList }, + { data: data.ActiveList }, + { data: data.closedList } + ] + } + }, (err) => { + console.error(err); + }) + } + + goback_services() { + this.router.navigateByUrl('/services/services-list'); + } + goback_onboard() { + this.router.navigateByUrl('/services/onboard-vnf-vm'); + } + +} diff --git a/usecaseui-portal/src/app/views/management/management.component.html b/usecaseui-portal/src/app/views/management/management.component.html new file mode 100644 index 00000000..c96f0253 --- /dev/null +++ b/usecaseui-portal/src/app/views/management/management.component.html @@ -0,0 +1,39 @@ + +
    +
    +
    +

    {{"i18nTextDefine_Create_initial_customer" | translate}}

    + {{"i18nTextDefine_Customer_not_in_ONAP" | translate}} + {{"i18nTextDefine_CreateCustomer" | translate}} + + +
    + + +
    +
    +
    + +
    +
    +
    + +
    +
    \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/management/management.component.less b/usecaseui-portal/src/app/views/management/management.component.less new file mode 100644 index 00000000..5a3a0f42 --- /dev/null +++ b/usecaseui-portal/src/app/views/management/management.component.less @@ -0,0 +1,79 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.content { + .management { + width: 100%; + .title { + width: 50%; + vertical-align:top; + display: inline-block; + font-family: "Arial"; + p { + font-size: 33px; + color: #3C4F8C; + margin-bottom: 0.5em; + } + span { + font-size: 18px; + color: rgba(60,79,140,0.5); + display: block; + } + img { + padding-top: 8%; + width: 55%; + margin-left: 20%; + margin-bottom: 5%; + } + input { + width: 50%; + margin: 0 auto; + margin-bottom: 5%; + display: block; + + } + .action{ + width: 50%; + height: 40px; + margin: 0 auto; + } + .action button{ + width: 40%; + height: 40px; + margin: 0 4%; + } + .cancel{ + background-color: #eee; + border-color: #eee; + color: #9DA7C5; + } + .add { + color: #fff; + background:linear-gradient(310deg,rgba(30,158,255,1) 0%,rgba(99,200,255,1) 100%); + border-color: #1890ff; + } + } + .image { + width: 49%; + vertical-align:top; + display: inline-block; + img { + width: 85%; + margin-top: 41%; + } + } + } + +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/management/management.component.spec.ts b/usecaseui-portal/src/app/views/management/management.component.spec.ts new file mode 100644 index 00000000..f6152432 --- /dev/null +++ b/usecaseui-portal/src/app/views/management/management.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ManagementComponent } from './management.component'; + +describe('ManagementComponent', () => { + let component: ManagementComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ManagementComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ManagementComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/management/management.component.ts b/usecaseui-portal/src/app/views/management/management.component.ts new file mode 100644 index 00000000..8b3afea7 --- /dev/null +++ b/usecaseui-portal/src/app/views/management/management.component.ts @@ -0,0 +1,68 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { Component, OnInit , HostBinding} from '@angular/core'; +import { showHideAnimate, slideToRight } from '../../animates'; +import { ManagemencsService } from '../../core/services/managemencs.service'; + +@Component({ + selector: 'app-management', + templateUrl: './management.component.html', + styleUrls: ['./management.component.less'], + animations: [ + showHideAnimate, slideToRight + ] +}) +export class ManagementComponent implements OnInit { + @HostBinding('@routerAnimate') routerAnimateState; //Routing animation + + constructor(private managemencs: ManagemencsService) { } + + ngOnInit() { + this.getAllCustomers(); + } + + nocuster = true; + firstCustomer = null; + AllCustomersdata = []; + + // Get all customers + getAllCustomers() { + this.managemencs.getAllCustomers().subscribe((data) => { + if (data.length > 0) { + this.nocuster = false; + } else { + this.nocuster = true; + } + }) + } + + createNewCustomer(customer) { + let createParams = { + customerId: customer + }; + this.managemencs.createCustomer(customer, createParams).subscribe((data) => { + if (data["status"] == 'SUCCESS') { + this.nocuster = false; + } else { + this.nocuster = true; + console.log(data, "Interface returned error") + } + }) + } + clearCustomerInput(){ + this.firstCustomer=null; + } +} diff --git a/usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.css b/usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.css new file mode 100644 index 00000000..e9631957 --- /dev/null +++ b/usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.css @@ -0,0 +1,75 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 20px; +} +.select { + margin-bottom: 20px; +} +.select span { + display: inline-block; + font: 700 14px "Arial"; + color: #4c5e70; +} +.select nz-dropdown { + vertical-align: middle; +} +.select nz-dropdown :hover { + border-color: #147dc2; +} +.select nz-dropdown button { + width: 165px; + height: 30px; + background-color: #eceff4; + text-align: left; + border-color: #9fa9ab; +} +.select nz-dropdown button span { + font-weight: 400; + display: inline-block; + width: 120px; + overflow: hidden; + text-overflow: ellipsis; + padding-top: 2px; +} +.select nz-dropdown button i { + position: absolute; + top: 10px; + right: 10px; +} +.select .submit { + margin-left: 20px; + vertical-align: middle; + height: 30px; + padding: 0 10px; +} +.select .submit span { + color: #fff; + font-weight: 400; +} +.content { + background-color: #fff; + border-radius: 5px; + padding: 12px; +} diff --git a/usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.html b/usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.html new file mode 100644 index 00000000..06d84353 --- /dev/null +++ b/usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.html @@ -0,0 +1,79 @@ + + + + + + diff --git a/usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.less b/usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.less new file mode 100644 index 00000000..31623dcf --- /dev/null +++ b/usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.less @@ -0,0 +1,76 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 20px; +} +.select { + margin-bottom: 20px; + span { + display: inline-block; + font: 700 14px "Arial"; + color: #4c5e70; + } + nz-dropdown { + vertical-align: middle; + :hover{ + border-color: #147dc2; + } + button { + width: 165px; + height: 30px; + background-color: #eceff4; + text-align: left; + border-color: #9fa9ab; + span { + font-weight: 400; + display: inline-block; + width: 120px; + overflow: hidden; + text-overflow: ellipsis; + padding-top: 2px; + } + i { + position: absolute; + top: 10px; + right: 10px; + } + } + //下拉框中的样式在style.less中，下拉框是在body中额外临时生成的 + } + .submit { + margin-left: 20px; + vertical-align: middle; + height: 30px; + padding: 0 10px; + span { + color: #fff; + font-weight: 400; + } + } +} +.content { + background-color: #fff; + border-radius: 5px; + padding: 12px; +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.spec.ts b/usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.spec.ts new file mode 100644 index 00000000..b66b2ea0 --- /dev/null +++ b/usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.spec.ts @@ -0,0 +1,68 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; + +import { PerformanceVmComponent } from './performance-vm.component'; + +describe('PerformanceVmComponent', () => { + let component: PerformanceVmComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PerformanceVmComponent ], + imports: [ + BrowserAnimationsModule + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PerformanceVmComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + it('should test performanceShow method to set proper values', () => { + component.performanceShow(); + expect(component.state).toBe('show'); + expect(component.state2).toBe('hide'); + expect(component.state3).toBe('hide'); + expect(component.graphicshow).toBe(false); + expect(component.detailshow).toBe(false); + }); + + it('should test graphicShow method to set proper values', () => { + component.graphicShow(); + expect(component.state).toBe('hide'); + expect(component.state2).toBe('show'); + expect(component.state3).toBe('hide'); + expect(component.graphicshow).toBe(true); + expect(component.detailshow).toBe(false); + }); + + it('should test detailShow method to set proper values', () => { + component.detailShow({id:1}); + expect(component.state).toBe('hide'); + expect(component.state2).toBe('hide'); + expect(component.state3).toBe('show'); + expect(component.graphicshow).toBe(true); + expect(component.detailshow).toBe(true); + expect(component.detailId).toBe(1); + }); + + it('should test choseSourceName method', () => { + component.choseSourceName('bbbb'); + expect(component.sourceNameSelected).toBe('bbbb'); + }); + + it('should test choseSourceName method', () => { + component.choseReportingEntityName('bbbb'); + expect(component.ReportingEntityNameSelected).toBe('bbbb'); + }); + +}); diff --git a/usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.ts b/usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.ts new file mode 100644 index 00000000..c179cdbb --- /dev/null +++ b/usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.ts @@ -0,0 +1,159 @@ +import { Component, OnInit, HostBinding } from '@angular/core'; +import { slideToRight, showHideAnimate } from '../../../animates'; + +@Component({ + selector: 'app-performance-vm', + templateUrl: './performance-vm.component.html', + styleUrls: ['./performance-vm.component.less'], + animations: [ slideToRight, showHideAnimate ] +}) +export class PerformanceVmComponent implements OnInit { + @HostBinding('@routerAnimate') routerAnimateState; + constructor() { } + + ngOnInit() { + } + + // Filter box (drop-down box) + sourceNameList = ['aaaa','bbbb','cccc','dddddDDDDDDDDDDDDDDD']; + sourceNameSelected = this.sourceNameList[0]; + ReportingEntityNameList = ['aaaa','bbbb','cccc','ddddd']; + ReportingEntityNameSelected = this.ReportingEntityNameList[0]; + choseSourceName(item){ + console.log(item); + this.sourceNameSelected = item; + } + choseReportingEntityName(item){ + console.log(item); + this.ReportingEntityNameSelected = item; + } + + //Tabular data + dataSet = [ + { + name : 'John Brown', + age : 32, + expand : false, + address : 'New York No. 1', + description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.' + }, + { + name : 'Aim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Bim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Cim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Jim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Xim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Jim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Jim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Jim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Jim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'cim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'bim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'aoe Black', + age : 32, + expand : false, + address : 'Sidney No. 1', + description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.' + } + ]; + + //Detail page title display + graphicshow = false; + detailshow = false; + // Show hidden animation + state = "show"; + state2 = "hide"; + state3 = "hide"; + performanceShow() { + this.state = 'show'; + this.state2 = 'hide'; + this.state3 = 'hide'; + this.graphicshow = false; + this.detailshow = false; + } + graphicShow() { + this.state = 'hide'; + this.state2 = 'show'; + this.state3 = 'hide'; + this.graphicshow = true; + this.detailshow = false; + } + // Selected id + detailId:number; + detailShow(prems) { + this.state = 'hide'; + this.state2 = 'hide'; + this.state3 = 'show'; + this.graphicshow = true; + this.detailshow = true; + console.log(prems); + this.detailId = prems.id; + } + +} diff --git a/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.css b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.css new file mode 100644 index 00000000..269af7a9 --- /dev/null +++ b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.css @@ -0,0 +1,126 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 20px; +} +.select { + margin-bottom: 20px; +} +.select span { + display: inline-block; + font: 700 14px "Arial"; + color: #4c5e70; +} +.select nz-dropdown { + vertical-align: middle; +} +.select nz-dropdown :hover { + border-color: #147dc2; +} +.select nz-dropdown button { + width: 165px; + height: 30px; + background-color: #eceff4; + text-align: left; + border-color: #9fa9ab; +} +.select nz-dropdown button span { + font-weight: 400; + display: inline-block; + width: 120px; + overflow: hidden; + text-overflow: ellipsis; + padding-top: 2px; +} +.select nz-dropdown button i { + position: absolute; + top: 10px; + right: 10px; +} +.select .search { + margin-left: 20px; + vertical-align: middle; + height: 30px; + padding: 0 10px; +} +.select .search span { + color: #fff; + font-weight: 400; +} +.content { + background-color: #fff; + border-radius: 5px; + padding: 12px; +} +.content .vnfs { + display: flex; + flex-wrap: wrap; + justify-content: space-around; +} +.content .vnfs .vnf { + width: 18%; + height: 200px; + margin: 5px; + padding: 20px; + border-radius: 2px; + text-align: center; + cursor: pointer; + transition: all 0.3s linear; +} +.content .vnfs .vnf:hover { + background-color: #f5f5f5; + transform: scale(1.02); +} +.content .vnfs .vnf h3 { + font-size: 14px; + color: #3fa8eb; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + margin-bottom: 0; +} +.content .vnfs .vnf .intro { + text-align: left; + font-size: 12px; + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + word-wrap: break-word; + word-break: break-all; +} +.content .vnfs .empty { + width: 18%; + height: 200px; + margin: 5px; + border-radius: 2px; +} +.content .pages { + height: 25px; + margin: 20px 10px; + position: relative; +} +.content .pages nz-pagination { + float: right; +} diff --git a/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.html b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.html new file mode 100644 index 00000000..9e0e2ed6 --- /dev/null +++ b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.html @@ -0,0 +1,63 @@ + +

    + Performance VNF + / Graphic list + / Details +

    +
    + Source Name: + + + + + + +
    +
    +
    +
    + + +
    + {{item.name}} +
    +
    +
    + PNF +
    + {{item.name}} +
    +
    +
    +
    +
    + + +
    +
    +
    + +
    +
    + +
    \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.less b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.less new file mode 100644 index 00000000..cc4e1ca5 --- /dev/null +++ b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.less @@ -0,0 +1,136 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.title { + font: 500 14px/18px "ArialMT"; + color: #3C4F8C; + padding: 20px 0 0 20px; +} +.select { + height: 70px; + background-color: #fff; + margin-top: -30px; + padding-left: 20px; + box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06); + line-height: 5; + span { + display: inline-block; + font: 400 14px "ArialMT"; + color: #3C4F8C; + } + nz-dropdown { + vertical-align: middle; + :hover{ + border-color: #147dc2; + } + button { + width: 165px; + height: 30px; + background-color: #fff; + text-align: left; + border-color: #E5E8F2; + span { + font-weight: 400; + display: inline-block; + width: 120px; + overflow: hidden; + text-overflow: ellipsis; + padding-top: 2px; + } + i { + position: absolute; + top: 10px; + right: 10px; + } + } + :hover { + border-color: #48C6EF; + } + //下拉框中的样式在style.less中，下拉框是在body中额外临时生成的 + } + .search { + margin-left: 20px; + margin-top: -6px; + vertical-align: middle; + height: 30px; + padding: 0 10px; + span { + color: #fff; + font-weight: 400; + } + } +} + +.content { + // background-color: #fff; + border-radius: 5px; + padding: 12px; + .vnfs { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + .vnf { + // width: 180px; + background-color: #fff; + width: 18%; + height: 200px; + margin: 5px; + padding: 20px; + border-radius: 2px; + text-align: center; + cursor: pointer; + transition: all 0.3s linear; + &:hover { + background-color: #fff; + transform: scale(1.02); + color: #3F9CFF; + } + h3 { + font-size: 14px; + color: #3fa8eb; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + margin-bottom: 0; + } + .intro { + text-align: left; + font-size: 12px; + overflow: hidden; + padding-top: 25px; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + word-wrap:break-word; + word-break:break-all; + } + } + .empty { + // width: 180px; + width: 18%; + height: 200px; + margin: 5px; + border-radius: 2px; + } + } + .pages { + height: 25px; + margin: 20px 10px; + position: relative; + nz-pagination { + float: right; + } + } +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.spec.ts b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.spec.ts new file mode 100644 index 00000000..25bcfd50 --- /dev/null +++ b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.spec.ts @@ -0,0 +1,45 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { NO_ERRORS_SCHEMA,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { TranslateModule, TranslateLoader, TranslateService, TranslateFakeLoader} from '@ngx-translate/core'; +import { NgZorroAntdModule } from 'ng-zorro-antd'; +import { NgxEchartsModule } from 'ngx-echarts'; +import { NZ_I18N, en_US } from 'ng-zorro-antd'; +import { HttpClientModule } from '@angular/common/http'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; + +import { PerformanceDetailsComponent } from '../../../shared/components/performance-details/performance-details.component'; +import { GraphiclistComponent } from '../../../shared/components/graphiclist/graphiclist.component'; +import { PerformanceVnfComponent } from './performance-vnf.component'; +import { HomesService } from '../../../core/services/homes.service'; + +describe('PerformanceVnfComponent', () => { + let component: PerformanceVnfComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PerformanceVnfComponent, PerformanceDetailsComponent, GraphiclistComponent ], + imports: [ TranslateModule.forRoot({loader: { provide: TranslateLoader, useClass: TranslateFakeLoader }}), + NgZorroAntdModule.forRoot(), + NgxEchartsModule, + HttpClientModule, + BrowserAnimationsModule ], + providers: [TranslateService, HomesService ], + schemas: [ + CUSTOM_ELEMENTS_SCHEMA, + NO_ERRORS_SCHEMA + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PerformanceVnfComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.ts b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.ts new file mode 100644 index 00000000..96b5404c --- /dev/null +++ b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.ts @@ -0,0 +1,145 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { Component, OnInit, HostBinding } from '@angular/core'; +import { slideToRight, showHideAnimate } from '../../../animates'; +import { HomesService } from '../../../core/services/homes.service'; + +@Component({ + selector: 'app-performance-vnf', + templateUrl: './performance-vnf.component.html', + styleUrls: ['./performance-vnf.component.less'], + animations: [slideToRight, showHideAnimate], +}) +export class PerformanceVnfComponent implements OnInit { + @HostBinding('@routerAnimate') routerAnimateState; + public sourceNameList: Array = ['---auto---']; + public sourceName: string = ''; + public vnfsdataTotal: number; + public startTime: string = ''; + public endTime: string = ''; + public currentPage: number = 1; + public pageSize: number = 10; + list: any; + + constructor( + private myhttp: HomesService) { } + + ngOnInit() { + this.getqueryAllSourceNames(); + // this.getperformanceSsourceNames(); + let _this = this; + setTimeout(function(){ + _this.totalRecords = [ + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"} + ]; + _this.totalpnfs = [ + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"} + ] + _this.emptys = new Array(12-_this.totalRecords.length); + },300) + } + + + sourceNameSelected = this.sourceNameList[0]; + getqueryAllSourceNames() { + this.myhttp.getqueryAllSourceNames().subscribe((data) => { + for (let i = 0; i < data.length; i++) { + this.sourceNameList.push(data[i]); + } + this.sourceNameSelected = this.sourceNameList[0]; + }) + } + choseSourceName(item) { + this.sourceNameSelected = item; + if (item == "---auto---") { + this.sourceName = ''; + } else { + this.sourceName = item; + } + } + // vnfs data + totalRecords = []; + totalpnfs = []; + //Fill the box + emptys = []; + + // getperformanceSsourceNames() { + // this.myhttp.getperformanceSourceNames(this.currentPage, this.pageSize, this.sourceName).subscribe((data) => { + // this.totalRecords = data.totalRecords; + // this.vnfsdataTotal = data.names; + // if (Number.isInteger(this.totalRecords.length / 5)) { + // this.emptys = new Array(0); + // } else { + // this.emptys = new Array(5 - this.totalRecords.length % 5); + // } + // }) + // } + //Detail page title display + isHidden = true; + graphicshow = false; + detailshow = false; + // Show hidden animation + state = "show"; + state2 = "hide"; + state3 = "hide"; + performanceShow() { + this.state = 'show'; + this.state2 = 'hide'; + this.state3 = 'hide'; + this.graphicshow = false; + this.detailshow = false; + } + // Selected name + + graphicShow() { + this.state = 'hide'; + this.state2 = 'show'; + this.state3 = 'hide'; + this.graphicshow = true; + this.detailshow = false; + } + vnfname: string; + graphicShow2(item) { + this.state = 'hide'; + this.state2 = 'show'; + this.state3 = 'hide'; + this.graphicshow = true; + this.detailshow = false; + this.vnfname = item; + } + // Selected id + detailId: string; + detailShow(item) { + this.state = 'hide'; + this.state2 = 'hide'; + this.state3 = 'show'; + this.graphicshow = true; + this.detailshow = true; + this.detailId = item.id.id; + } +} diff --git a/usecaseui-portal/src/app/views/performance/performance.component.css b/usecaseui-portal/src/app/views/performance/performance.component.css new file mode 100644 index 00000000..f2169538 --- /dev/null +++ b/usecaseui-portal/src/app/views/performance/performance.component.css @@ -0,0 +1,26 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 20px; +} diff --git a/usecaseui-portal/src/app/views/performance/performance.component.html b/usecaseui-portal/src/app/views/performance/performance.component.html new file mode 100644 index 00000000..cd92b659 --- /dev/null +++ b/usecaseui-portal/src/app/views/performance/performance.component.html @@ -0,0 +1,17 @@ + +

    Performance

    +
    diff --git a/usecaseui-portal/src/app/views/performance/performance.component.less b/usecaseui-portal/src/app/views/performance/performance.component.less new file mode 100644 index 00000000..2b1949a5 --- /dev/null +++ b/usecaseui-portal/src/app/views/performance/performance.component.less @@ -0,0 +1,11 @@ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 20px; +} diff --git a/usecaseui-portal/src/app/views/performance/performance.component.spec.ts b/usecaseui-portal/src/app/views/performance/performance.component.spec.ts new file mode 100644 index 00000000..1bdc919d --- /dev/null +++ b/usecaseui-portal/src/app/views/performance/performance.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PerformanceComponent } from './performance.component'; + +describe('PerformanceComponent', () => { + let component: PerformanceComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PerformanceComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PerformanceComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/performance/performance.component.ts b/usecaseui-portal/src/app/views/performance/performance.component.ts new file mode 100644 index 00000000..12405e9e --- /dev/null +++ b/usecaseui-portal/src/app/views/performance/performance.component.ts @@ -0,0 +1,16 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-performance', + templateUrl: './performance.component.html', + styleUrls: ['./performance.component.less'] +}) +export class PerformanceComponent implements OnInit { + + constructor() { } + + ngOnInit() { + + } + +} diff --git a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.css b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.css new file mode 100644 index 00000000..4e80750c --- /dev/null +++ b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.css @@ -0,0 +1,67 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 20px; +} +.list { + background-color: #fff; + border-radius: 5px; + padding: 10px; +} +.list nz-table tbody td span.onboarding { + font-size: 12px; + color: #147dc2; +} +.list nz-table tbody td span.onboarded { + font-size: 14px; + color: #147dc2; +} +.list nz-table tbody td span.updating { + font-size: 12px; + color: blue; +} +.list nz-table tbody td span.deleting { + font-size: 12px; + color: red; +} +.list nz-table tbody td span.invalid { + font-size: 14px; + color: purple; +} +.list nz-table tbody td i.anticon { + cursor: pointer; + font-size: 18px; + padding: 2px; +} +.list nz-table tbody td i.anticon:hover { + color: #147dc2; +} +.list nz-table tbody td .cannotclick { + pointer-events: none; + color: #aaa; + opacity: 0.6; +} +.list nz-table tbody td .fileIcon{ + display: none; +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html new file mode 100644 index 00000000..70ee81c0 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html @@ -0,0 +1,333 @@ + + + + +
    + +
    +
    + +

    + +

    +

    {{"i18nTextDefine_Click_CSAR_File" | translate}}

    +

    +     + +
    +
    +
    +
    {{"i18nTextDefine_Uploaded_files" | translate}}
    +
    {{"i18nTextDefine_Nofileuploading" | translate}}
    +
    +
    +
    + +
    +
    {{itemns.name}}
    +
    + +
    +
    + {{"i18nTextDefine_File_upload_completed" | translate}} + {{"i18nTextDefine_File_upload_failed" | translate}} +
    +
    + + +
    +
    +
    +
    +
    + +
    + + + + {{"i18nTextDefine_NO" | translate}} + {{"i18nTextDefine_Name" | translate}} + {{"i18nTextDefine_Version" | translate}} + {{"i18nTextDefine_OnboardingState" | translate}} + {{"i18nTextDefine_OperationalState" | translate}} + {{"i18nTextDefine_UsageState" | translate}} + {{"i18nTextDefine_Operationbutton" | translate}} + + + + + {{i+1}} + + + {{item.nsdName}} +   + {{item.name}} +   + {{item.nsdVersion}} +   + {{item.version}} +   + + {{item.nsdOnboardingState}} +   + {{status}} + + + + {{item.nsdOperationalState}} + {{item.nsdUsageState}} + + + + + + + + + + + + + + + + + + +     + + +
    + +
    + +
    +
    + +

    + +

    +

    Click or drag CSAR File here

    +

    +     + +
    +
    +
    +
    {{"i18nTextDefine_Uploaded_files" | translate}}
    +
    {{"i18nTextDefine_Nofileuploading" | translate}}
    +
    +
    +
    + +
    +
    {{itemns.name}}
    +
    + +
    +
    + {{"i18nTextDefine_File_upload_completed" | translate}} + {{"i18nTextDefine_File_upload_failed" | translate}} +
    +
    + + +
    +
    +
    +
    +
    + +
    + + + + {{"i18nTextDefine_NO" | translate}} + {{"i18nTextDefine_Name" | translate}} + {{"i18nTextDefine_Version" | translate}} + {{"i18nTextDefine_OnboardingState" | translate}} + {{"i18nTextDefine_OperationalState" | translate}} + {{"i18nTextDefine_UsageState" | translate}} + {{"i18nTextDefine_Operationbutton" | translate}} + + + + + {{i+1}} + + {{item.vnfProductName}} +   + {{item.name}} + {{item.vnfdVersion}} +   + {{item.version}} + {{item.onboardingState}} + {{item.operationalState}} + {{item.usageState}} + + + + + + + + + + + + + + + + + + + + + +     + +
    + +
    + +
    +
    + +

    + +

    +

    Click or drag CSAR File here

    +

    +     + +
    +
    +
    +
    {{"i18nTextDefine_Uploaded_files" | translate}}
    +
    {{"i18nTextDefine_Nofileuploading" | translate}}
    +
    +
    +
    + +
    +
    {{itemns.name}}
    +
    + +
    +
    + {{"i18nTextDefine_File_upload_completed" | translate}} + {{"i18nTextDefine_File_upload_failed" | translate}} +
    +
    + + +
    +
    +
    +
    +
    + +
    + + + + {{"i18nTextDefine_NO" | translate}} + {{"i18nTextDefine_Name" | translate}} + {{"i18nTextDefine_Version" | translate}} + {{"i18nTextDefine_OnboardingState" | translate}} + {{"i18nTextDefine_UsageState" | translate}} + {{"i18nTextDefine_Operationbutton" | translate}} + + + + + {{i+1}} + {{item.pnfdName}} + {{item.pnfdVersion}} + {{item.pnfdOnboardingState}} + {{item.pnfdUsageState}} + + + + + + + + + + + + + + + + +     + +
    +     + + +
    +
    + + {{notificationAttributes.status}} + +
    + {{notificationAttributes.title}}  + {{"i18nTextDefine_"+notificationAttributes.action | translate}}  {{"i18nTextDefine_"+notificationAttributes.status | translate}} +
    +
    +
    +

    {{notificationAttributes.title}} id: 

    + {{ notificationAttributes.id }} +
    +
    +
    {{"i18nTextDefine_Close" | translate}}
    +
    +
    +     +     + diff --git a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.less b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.less new file mode 100644 index 00000000..c31409c9 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.less @@ -0,0 +1,182 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 20px; +} +.switch_btn { + position: absolute; + right: 6%; + top: 18px; + border: 1px solid #3fa8eb; + width: 8%; + border-radius: 10px; + margin-bottom: 18px; + span { + display: block; + float: left; + text-align: center; + width: 50%; + color: #3fa8eb; + font-weight: 700; + cursor: pointer; + } + span:first-child { + border-radius: 10px 0 0 10px; + } + span:last-child { + border-radius: 0 10px 10px 0; + } + span.left_b { + border-left: 1px solid #3fa8eb; + } + span.active { + color: #fff; + background: #3fa8eb; + } +} + +.list { + // background-color: #fff; + border-radius: 5px; + // padding: 10px; + .listupload { + width: 22%; + vertical-align: top; + display: inline-block; + margin-left: 13%; + } + .listlin { + vertical-align: top; + display: inline-block; + width: 1%; + margin-left: 10%; + height: 177px; + margin-bottom: 30px; + border-right: 2px solid #EEEEEE; + } + .listfile { + width: 43%; + height: 100%; + vertical-align: top; + display: inline-block; + margin-left: 10%; + .nouploadfile{ + height: 80%; + width: 100%; + text-align: center; + font-size: 22px; + margin-top: 5%; + } + .listfilebgc { + background-color: #fff; + border-bottom: 8px solid #F7F8FC; + } + .listfilebgc { + background-color: #fff; + height: 30px; + border-radius: 2px; + line-height: 2; + color: #42548F; + border-bottom: 4px solid #F7F8FC; + >div { + float: left; + } + :first-child { + width: 6%; + margin-left: 5px; + } + :nth-child(2){ + width:20%; + } + :nth-child(3){ + width: 60%; + text-align: center; + } + :nth-child(4){ + padding-left: 4%; + } + .color { + color:rgba(66,84,143,1); + span{ + color:rgba(66,84,143,0.7); + } + } + .progress{ + color:rgba(66,84,143,0.7); + } + } + } + nz-table { + tbody { + td { + span.onboarding { + font-size: 12px; + color: #147dc2; + } + span.onboarded { + font-size: 14px; + color: #147dc2; + } + span.updating { + font-size: 12px; + color: blue; + } + span.deleting { + font-size: 12px; + color: red; + } + span.invalid { + font-size: 14px; + color: purple; + } + i.anticon { + cursor: pointer; + font-size: 18px; + padding: 2px; + &:hover{ + color: #147dc2; + } + } + .cannotclick { + pointer-events: none; + color: #aaa; + opacity: 0.6; + } + .fileIcon{ + display: none; + } + } + } + } +} +.mask { + top: 0; + left: 0; + position: fixed; + width: 100%; + height: 100%; + opacity: 0.1; + background: black; + z-index: 1049; +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts new file mode 100644 index 00000000..0e49f656 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { OnboardVnfVmComponent } from './onboard-vnf-vm.component'; + +describe('OnboardVnfVmComponent', () => { + let component: OnboardVnfVmComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ OnboardVnfVmComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(OnboardVnfVmComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.ts b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.ts new file mode 100644 index 00000000..4899aed8 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.ts @@ -0,0 +1,668 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { HttpClient, HttpRequest, HttpResponse } from '@angular/common/http'; +import { Component, OnInit, HostBinding, TemplateRef } from '@angular/core'; +import { NzNotificationService } from 'ng-zorro-antd'; +// import { MyhttpService } from '../../myhttp.service'; +import { onboardService } from '../../../core/services/onboard.service'; +import { slideToRight } from '../../../animates'; +import { NzMessageService, UploadFile, NzModalRef, NzModalService } from 'ng-zorro-antd'; +import { filter } from 'rxjs/operators'; +import { Title } from '@angular/platform-browser'; + +@Component({ + selector: 'app-onboard-vnf-vm', + templateUrl: './onboard-vnf-vm.component.html', + styleUrls: ['./onboard-vnf-vm.component.less'], + animations: [slideToRight] +}) +export class OnboardVnfVmComponent implements OnInit { + @HostBinding('@routerAnimate') routerAnimateState; + + // delete Modal + confirmModal: NzModalRef; + nsdInfoId = ''; + vnfPkgId = ''; + pnfdInfoId = ''; + tabTitle = "NS"; + nsuploading = false; + vnfuploading = false; + pnfloading = false; + fileList: UploadFile[] = []; + fileListNS: UploadFile[] = []; + fileListVNF: UploadFile[] = []; + fileListPNF: UploadFile[] = []; + // onboard initial value + status = "Onboard Available"; + jobId = ''; + //url + url = { + // line up + ns: '/api/nsd/v1/ns_descriptors/*_*/nsd_content', + vnf: '/api/vnfpkgm/v1/vnf_packages/*_*/package_content', + pnf: '/api/nsd/v1/pnf_descriptors/*_*/pnfd_content' + // line local + //ns: 'https://jsonplaceholder.typicode.com/posts/', + //vnf: 'https://jsonplaceholder.typicode.com/posts/', + //pnf: 'https://jsonplaceholder.typicode.com/posts/', + }; + constructor( + private myhttp: onboardService, + private http: HttpClient, + private msg: NzMessageService, + private titleService: Title, + private modal: NzModalService, + private modalService: NzModalService, + private notification: NzNotificationService + ) { } + //default Call ns data by default + ngOnInit() { + this.getTableData(); + } + + //Tabular data + nstableData: any; + vnftableData: any; + pnftableData: any; + nssdcData: any; + nsvfcData: any; + + vnfsdcData: any; + vnfvfcData: any; + nspageIndex = 1; + nspageSize = 10; + vnfpageIndex = 1; + vnfpageSize = 10; + pnfpageIndex = 1; + pnfpageSize = 10; + total; + nsloading = false; + sortName = null; + sortValue = null; + tabs = ['NS', 'VNF', 'PNF']; + isSpinning = false; + + //2019.08.14 add + notificationAttributes = { + "title": this.tabs[0], + "imgPath": "../../../../assets/images/execute-inproess.png", + "action": "OnboardingState", + "status": "InProgress", + "id": null + }; + notificationModelShow(template: TemplateRef<{}>): void { + this.notification.template(template); + } + notificationSuccess(notificationModel) { + this.notificationAttributes.imgPath = "../../../../assets/images/execute-success.png"; + this.notificationAttributes.status = "Success"; + this.notificationModelShow(notificationModel); + } + notificationFailed(notificationModel) { + this.notificationAttributes.imgPath = "../../../../assets/images/execute-faild.png"; + this.notificationAttributes.status = "Failed"; + this.notificationModelShow(notificationModel); + } + // Handling tab switching request data + handleTabChange(tab) { + this.tabTitle = tab; + switch (tab) { + case 'NS': + this.nstableData = []; + this.getTableData(); + this.fileList = []; //Empty uploaded files when switching + break + case 'VNF': + this.vnftableData = []; + this.getTableVnfData() + this.fileList = []; + break + case 'PNF': + this.pnftableData = []; + this.getTablePnfData() + this.fileList = []; + break + } + } + + + //before put create--Drag and drop files to the page before uploading + requestBody = { + "userDefinedData": { + "additionalProp1": "", + "additionalProp2": "", + "additionalProp3": "" + } + } + + //NS/VNF List add file + beforeUpload = (file: UploadFile): boolean => { + this.fileList.push(file); + return false; + } + + // ns beforeUpload + beforeUploadNS = (file: UploadFile): boolean => { + this.fileListNS.push(file); + this.myhttp.getCreatensData("createNetworkServiceData", this.requestBody)//on-line + // this.myhttp.getCreatensData("creatensDataNS") //local + .subscribe((data) => { + this.nsdInfoId = data["id"]; + }, (err) => { + console.log(err); + }) + return false; + } + + //vnf beforeUpload + beforeUploadVNF = (file: UploadFile): boolean => { + this.fileListVNF.push(file); + this.myhttp.getCreatensData("createVnfData", this.requestBody)//on-line + // this.myhttp.getCreatensData("creatensDataVNF") //local + .subscribe((data) => { + this.vnfPkgId = data["id"]; + }, (err) => { + console.log(err); + }) + return false; + } + + // //pnf eforeUpload + beforeUploadPNF = (file: UploadFile): boolean => { + this.fileListPNF.push(file); + this.myhttp.getCreatensData("createPnfData", this.requestBody) //on-line + // this.myhttp.getCreatensData("creatensDataPNF") //local + .subscribe((data) => { + this.pnfdInfoId = data["id"]; + }, (err) => { + console.log(err); + }) + return false; + } + + //Get list list id + onClickId(id, tab) { + switch (tab) { + case 'NS': + this.nsdInfoId = id; + break + case 'VNF': + this.vnfPkgId = id; + break + case 'PNF': + this.pnfdInfoId = id; + break + } + } + + //Drag and drop and click the upload button + onClick(tab) { + switch (tab) { + case 'NS': + // this.handleUpload('/api/nsd/v1/ns_descriptors/'+this.nsdInfoId+'/nsd_content',tab); + this.handleUpload(this.url.ns.replace("*_*", this.nsdInfoId), tab); + this.getTableData(); + break + case 'VNF': + // this.handleUpload('/api/vnfpkgm/v1/vnf_packages/'+this.vnfPkgId+'/package_content',tab); + this.handleUpload(this.url.vnf.replace("*_*", this.vnfPkgId), tab); + this.getTableVnfData() + break + case 'PNF': + // this.handleUpload('/api/nsd/v1/pnf_descriptors/'+this.pnfdInfoId+'/pnfd_content',tab); + this.handleUpload(this.url.pnf.replace("*_*", this.pnfdInfoId), tab); + this.getTablePnfData(); + break + } + } + + nsRightList = []; + nsNum = 0; + vnfRightList = []; + vnfNum = 0; + pnfRightList = []; + pnfNum = 0; + //put Upload Upload + handleUpload(url, tab): void { + const formData = new FormData(); + // tslint:disable-next-line:no-any + switch (tab) { + case "NS": + this.fileListNS.forEach((file: any) => { + formData.append('file', file); + }); + this.nsuploading = true; + let lastNs = this.fileListNS[this.fileListNS.length - 1]; + let nsfile = { + name: lastNs.name, + uid: lastNs.uid, + progress: 0, + status: true, + success: 0 + }; + this.nsNum += 1; + this.nsRightList.push(nsfile); + let requeryNs = (nsfile) => { + setTimeout(() => { + nsfile.progress += 2; + if (nsfile.progress < 100) { + requeryNs(nsfile) + } else { + nsfile.progress = 100; + nsfile.status = false; + } + }, 100) + }; + requeryNs(nsfile); + break + case "VNF": + this.fileListVNF.forEach((file: any) => { + formData.append('file', file); + }); + this.vnfuploading = true; + let lastVnf = this.fileListVNF[this.fileListVNF.length - 1]; + let vnffile = { + name: lastVnf.name, + uid: lastVnf.uid, + progress: 0, + status: true, + success: 0 + }; + this.vnfNum += 1; + this.vnfRightList.push(vnffile); + let requeryVnf = (vnffile) => { + setTimeout(() => { + vnffile.progress += 2; + if (vnffile.progress < 100) { + requeryVnf(vnffile) + } else { + vnffile.progress = 100; + vnffile.status = false; + } + }, 100) + }; + requeryVnf(vnffile); + break + case "PNF": + this.fileListPNF.forEach((file: any) => { + formData.append('file', file); + }); + this.pnfloading = true; + let lastPnf = this.fileListPNF[this.fileListPNF.length - 1]; + let pnffile = { + name: lastPnf.name, + uid: lastPnf.uid, + progress: 0, + status: true, + success: 0 + }; + this.pnfNum += 1; + this.pnfRightList.push(pnffile); + let requeryPnf = (pnffile) => { + setTimeout(() => { + pnffile.progress += 2; + if (pnffile.progress < 100) { + requeryPnf(pnffile) + } else { + pnffile.progress = 100; + pnffile.status = false; + } + }, 100) + }; + requeryPnf(pnffile); + break + } + // line PUT + const req = new HttpRequest('PUT', url, formData, { + reportProgress: true, + withCredentials: true + }); + //Upload pre-empty array + this.fileList = []; + this.fileListNS = []; + this.fileListVNF = []; + this.fileListPNF = []; + this.http.request(req) + .pipe(filter(e => e instanceof HttpResponse)) + .subscribe( + (event: {}) => { + if (tab == "NS") { + this.nsRightList[this.nsNum - 1].progress = 100; + this.nsRightList[this.nsNum - 1].status = false; + this.nsRightList[this.nsNum - 1].success = 0; + } + if (tab == "VNF") { + this.vnfRightList[this.vnfNum - 1].progress = 100; + this.vnfRightList[this.vnfNum - 1].status = false; + this.vnfRightList[this.vnfNum - 1].success = 0; + } + if (tab == "PNF") { + this.pnfRightList[this.pnfNum - 1].progress = 100; + this.pnfRightList[this.pnfNum - 1].status = false; + this.pnfRightList[this.pnfNum - 1].success = 0; + } + this.changeUploadingSta(tab); + this.msg.success('upload successfully.'); + }, + err => { + if (tab == "NS") { + this.nsRightList[this.nsNum - 1].progress = 100; + this.nsRightList[this.nsNum - 1].status = false; + this.nsRightList[this.nsNum - 1].success = 1; + } + if (tab == "VNF") { + this.vnfRightList[this.vnfNum - 1].progress = 100; + this.vnfRightList[this.vnfNum - 1].status = false; + this.vnfRightList[this.vnfNum - 1].success = 1; + } + if (tab == "PNF") { + this.pnfRightList[this.pnfNum - 1].progress = 100; + this.pnfRightList[this.pnfNum - 1].status = false; + this.pnfRightList[this.pnfNum - 1].success = 1; + } + this.changeUploadingSta(tab); + this.msg.error('upload failed.'); + } + ); + } + + // Control the status of uploading + changeUploadingSta(tab) { + switch (tab) { + case "NS": + this.nsuploading = false; + break + case "VNF": + this.vnfuploading = false; + break + case "PNF": + this.pnfloading = false; + } + } + + //---------------------------------------------------------------------------------------------- + + // Get the NS list + getTableData() { + this.isSpinning = true; + //ns vfc lists + this.myhttp.getOnboardTableData() + .subscribe((data) => { + this.nsvfcData = data; + this.nstableData = this.nsvfcData; + //ns sdc list + this.myhttp.getSDC_NSTableData() + .subscribe((data) => { + this.isSpinning = false; //loading hide + this.nssdcData = data; + this.nsvfcData.map((nsvfc) => { nsvfc.sameid = this.nssdcData.find((nssdc) => { return nsvfc.id == nssdc.uuid }) && nsvfc.id; return nsvfc; }); + let sameData = this.nssdcData.filter((nssdc) => { return !this.nsvfcData.find((nsvfc) => { return nsvfc.id == nssdc.uuid }) }); + this.nstableData = this.nstableData.concat(sameData); + }, (err) => { + console.log(err); + this.isSpinning = false; + }) + }, (err) => { + console.log(err); + this.isSpinning = false; + }) + + } + + // Get the vnf list + getTableVnfData() { + this.isSpinning = true; + //vnf vfc lists + this.myhttp.getOnboardTableVnfData() + .subscribe((data) => { + this.vnfvfcData = data; + this.vnftableData = this.vnfvfcData; + //vnf sdc lists + this.myhttp.getSDC_VNFTableData() + .subscribe((data) => { + this.isSpinning = false; //loading hide + this.vnfsdcData = data; + this.vnfvfcData.map((vnfvfc) => { vnfvfc.sameid = this.vnfsdcData.find((nssdc) => { return vnfvfc.id == nssdc.uuid }) && vnfvfc.id; return vnfvfc; }); + let sameData = this.vnfsdcData.filter((vnfsdc) => { return !this.vnfvfcData.find((vnfvfc) => { return vnfvfc.id == vnfsdc.uuid }) }); + this.vnftableData = this.vnftableData.concat(sameData); + }, (err) => { + console.log(err); + }) + + }, (err) => { + console.log(err); + }) + } + + // Get pnf list + getTablePnfData() { + this.isSpinning = true; + this.myhttp.getOnboardTablePnfData() + .subscribe((data) => { + this.pnftableData = data; + this.isSpinning = false; //loading hide + }, (err) => { + console.log(err); + }) + } + + //----------------------------------------------------------------------------------- + /* onboard */ + //Successful frame + success(tab): void { + const modal = this.modalService.success({ + nzTitle: 'This is an success message', + nzContent: 'Package Onboard Completed.' + }); + switch (tab) { + case "NS": + this.getTableData(); + break + case "VNF": + this.getTableVnfData(); + break + } + } + + //Failure frame + error(): void { + this.modalService.error({ + nzTitle: 'This is an error message', + nzContent: 'Package Onboard Failed!' + }); + } + + //onboard status + onboardData = { + status: "onboard", + progress: 0, + } + currentIndex = 0; + // ns onboard Upload button + updataNsService(id, index, notificationModel) { + this.currentIndex = index; + this.onboardData.status = "onboarding"; //Disabled + this.onboardData.progress = 0; + let requestBody = { + "csarId": id + }; + this.notificationAttributes = { + "title": this.tabs[0], + "imgPath": "../../../../assets/images/execute-inproess.png", + "action": "OnboardingState", + "status": "InProgress", + "id": id + }; + this.notificationModelShow(notificationModel); + this.myhttp.getNsonboard(requestBody) + .subscribe((data) => { + if (data.status == "failed") { + this.onboardData.status = "Failed"; + this.notificationFailed(notificationModel); + this.error(); + return false + } else if (data.status == "success") { + this.success("NS"); + this.onboardData.status = "onboarded"; + this.notificationSuccess(notificationModel); + } + }, (err) => { + console.log(err); + }) + } + + // vnf onboard Upload button + updataVnfService(id, index, notificationModel) { + this.currentIndex = index; + this.onboardData.status = "onboarding"; //Disabled button + this.onboardData.progress = 0; + + + let requestBody = { + "csarId": id + }; + this.notificationAttributes = { + "title": this.tabs[1], + "imgPath": "../../../../assets/images/execute-inproess.png", + "action": "OnboardingState", + "status": "InProgress", + "id": id + }; + this.notificationModelShow(notificationModel); + this.myhttp.getVnfonboard(requestBody) + .subscribe((data) => { + this.jobId = data.jobId; + this.queryProgress(this.jobId, 0, notificationModel); //vnf Need to query progress interface + }, (err) => { + console.log(err); + }) + } + + //Progress Progress inquiry + queryProgress(jobId, responseId, notificationModel) { + let mypromise = new Promise((res) => { + this.myhttp.getProgress(jobId, responseId) + .subscribe((data) => { + if (data.responseDescriptor == null || data.responseDescriptor == "null" || data.responseDescriptor.progress == undefined || data.responseDescriptor.progress == null) { + this.onboardData.status = "onboarding"; + setTimeout(() => { + this.queryProgress(this.jobId, 0, notificationModel); + }, 10000) + return false + } + if (data.responseDescriptor.progress > 100) { + this.onboardData.status = "Failed"; + this.notificationFailed(notificationModel); + this.error(); + return false + } + if (data.responseDescriptor.progress < 100) { + this.onboardData.status = "onboarding"; + setTimeout(() => { + this.queryProgress(this.jobId, 0, notificationModel); + }, 5000) + } else if (data.responseDescriptor.progress == 100) { + res(data); + this.success("VNF"); + this.onboardData.status = "onboarded"; + this.notificationSuccess(notificationModel); + } + return false + }) + }) + return mypromise; + } + + //-------------------------------------------------------------------------------- + /* delete button */ + showConfirm(index, pkgid, tab, notificationModel): void { + this.notificationAttributes = { + "title": this.tabs[0], + "imgPath": "../../../../assets/images/execute-inproess.png", + "action": "OnboardingState", + "status": "InProgress", + "id": pkgid + }; + this.confirmModal = this.modal.confirm({ + nzTitle: 'Do you Want to delete these items?', + nzContent: 'Do you Want to delete these items?', + nzOkText: 'Yes', + nzCancelText: 'No', + nzOnOk: () => new Promise((resolve, reject) => { + switch (tab) { + case 'NS': + this.notificationAttributes.title = this.tabs[0]; + this.notificationModelShow(notificationModel); + this.deleteNsService(index, pkgid, notificationModel); + setTimeout(Math.random() > 0.5 ? resolve : reject, 2000); + break + case 'VNF': + this.notificationAttributes.title = this.tabs[1]; + this.notificationModelShow(notificationModel); + this.deleteVnfService(index, pkgid, notificationModel); + setTimeout(Math.random() > 0.5 ? resolve : reject, 2000); + break + case 'PNF': + this.notificationAttributes.title = this.tabs[2]; + this.notificationModelShow(notificationModel); + this.deletePnfService(index, pkgid, notificationModel); + setTimeout(Math.random() > 0.5 ? resolve : reject, 2000); + break + } + }).catch(() => console.log('Oops errors!')) + }); + } + + //delete nsItem + deleteNsService(index, pkgid, notificationModel) { + this.myhttp.deleteNsIdData(pkgid) + .subscribe((data) => { + this.notificationSuccess(notificationModel); + //refresh list after successful deletion + this.getTableData(); + }, (err) => { + console.log(err); + this.notificationFailed(notificationModel); + }) + } + + //delete vnfItem + deleteVnfService(index, pkgid, notificationModel) { + this.myhttp.deleteVnfIdData(pkgid) + .subscribe((data) => { + this.notificationSuccess(notificationModel); + //refresh list after successful deletion + this.getTableVnfData() + }, (err) => { + console.log(err); + this.notificationFailed(notificationModel); + }) + } + + //delete PnfItem + deletePnfService(index, pkgid, notificationModel) { + this.myhttp.deletePnfIdData(pkgid) + .subscribe((data) => { + //refresh list after successful deletion + this.notificationSuccess(notificationModel); + this.getTablePnfData() + }, (err) => { + console.log(err); + this.notificationFailed(notificationModel); + }) + } + +} diff --git a/usecaseui-portal/src/app/views/services/services-list/services-list.component.css b/usecaseui-portal/src/app/views/services/services-list/services-list.component.css new file mode 100644 index 00000000..0a7f92eb --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.css @@ -0,0 +1,145 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 20px; +} +.action { + margin-bottom: 20px; +} +.action span { + display: inline-block; + font: 700 14px "Arial"; + color: #4c5e70; +} +.action nz-dropdown { + vertical-align: middle; +} +.action nz-dropdown :hover { + border-color: #147dc2; +} +.action nz-dropdown button { + width: 165px; + height: 30px; + background-color: #eceff4; + text-align: left; + border-color: #9fa9ab; +} +.action nz-dropdown button span { + font-weight: 400; + display: inline-block; + width: 120px; + overflow: hidden; + text-overflow: ellipsis; + padding-top: 2px; +} +.action nz-dropdown button i { + position: absolute; + top: 10px; + right: 10px; +} +.action .create { + float: right; + height: 30px; + padding: 0 10px; +} +.action .create span { + color: #fff; + font-weight: 400; +} +.list { + background-color: #fff; + border-radius: 5px; + padding: 10px; +} +.list nz-table tbody td span.active { + font-size: 14px; + color: #147dc2; +} +.list nz-table tbody td span.closed { + font-size: 14px; + color: red; +} +.list nz-table tbody td span.onboarding { + font-size: 12px; + color: #147dc2; +} +.list nz-table tbody td span.updating { + font-size: 12px; + color: blue; +} +.list nz-table tbody td span.deleting { + font-size: 12px; + color: red; +} +.list nz-table tbody td span.creating { + font-size: 12px; + color: green; +} +.list nz-table tbody td span.scaling { + font-size: 12px; + color: purple; +} +.list nz-table tbody td span.healing { + font-size: 12px; + color: orangered; +} +.list nz-table tbody td i.anticon { + cursor: pointer; + font-size: 18px; + padding: 2px; +} +.list nz-table tbody td i.anticon:hover { + color: #147dc2; +} +.list nz-table tbody td .cannotclick { + pointer-events: none; + color: #aaa; + opacity: 0.6; +} +.list nz-table tbody tr.childtr td { + font-size: 12px; + color: #147dc2; +} +.detailComponent { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100vh; + background-color: #f3f3f3; + overflow-y: auto; + padding: 20px 32px; + z-index: 3; +} +.createComponent { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100vh; + background-color: #f3f3f3; + overflow-y: auto; + padding: 20px 32px; + z-index: 3; +} diff --git a/usecaseui-portal/src/app/views/services/services-list/services-list.component.html b/usecaseui-portal/src/app/views/services/services-list/services-list.component.html new file mode 100644 index 00000000..6f6d8f74 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.html @@ -0,0 +1,745 @@ + +
    + + + {{"i18nTextDefine_Customer" | translate}} : + + + + + + + {{"i18nTextDefine_ServiceType" | translate}} : + + + + + + + +
    + {{"i18nTextDefine_Customer" | translate}} : + + + +
    +
    + {{"i18nTextDefine_ServiceType" | translate}} : + + + + +
    +
    + {{"i18nTextDefine_UseCase" | translate}} : + + + + + + + +
    + +
    + {{"i18nTextDefine_Template" | translate}} : + + + +
    +
    +
    + {{"i18nTextDefine_Orchestrator" | translate}} : + + + +
    +
    +
    +
    + + +
    +
    +
    + {{"i18nTextDefine_Templateparsingfailed" | translate}} +
    +     +
    + +
      +
    • + {{item.serviceDomain}} +
      +

      + {{item.failed}} + {{"i18nTextDefine_Failed" | translate}} +

      +

      + {{item.Success}} + {{"i18nTextDefine_Success" | translate}} +

      +

      + {{item.InProgress}} + {{"i18nTextDefine_InProgress" | translate}} +

      +
      +

      {{item.detailName | translate}}

      +
      • +
    +
    + + + + {{"i18nTextDefine_NO" | translate}} + + {{"i18nTextDefine_Name" | translate}} + {{"i18nTextDefine_InstanceID" | translate}} + {{"i18nTextDefine_UseCase" | translate}} + {{"i18nTextDefine_Status" | translate}} + {{"i18nTextDefine_Action" | translate}} + + + + + + {{pageSize*(pageIndex-1) + i+1}} + + {{data["service-instance-name"] || data.nsName}} + {{data["service-instance-id"] || data.nsInstanceId}} + +

    + {{data.serviceDomain}} +

    + + + {{data.tips}} + + Available + + + Unavailable + + + + + + + + +
      +
    • + + {{"i18nTextDefine_Scale" | translate}} +
      • +
    • + + {{"i18nTextDefine_Update" | translate}} +
      • +
    + + + + + + + + {{item["service-instance-id"] || item.nsInstanceId || item.vnfInstanceId}} + {{item["service-instance-name"] || item.nsName || item.vnfInstanceName}} + +

    + {{item.serviceDomain}} +

    + + + {{item.tips}} + + + + + + +     + +     + + +

    *  {{"i18nTextDefine_SureScale" | translate}}

    +
    +

    {{"i18nTextDefine_InstanceID" | translate}} :

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

    {{ item.netWorkServiceName }}

    +
    + {{"i18nTextDefine_ScaleType" | translate}} : + + + + +
    +
    + {{"i18nTextDefine_AspectId" | translate}} : + +
    +
    + {{"i18nTextDefine_Number_Of_Steps" | translate}} : + +
    +
    + {{"i18nTextDefine_ScalingDirection" | translate}} : + + + + +
    +
    + + +
    +
    + + instance temination is starting + +
    E2E   + {{"i18nTextDefine_InstanceTeminationStarting" | translate}} +
    +
    +
    +

    {{"i18nTextDefine_InstanceName" | translate}} :

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

    {{"i18nTextDefine_Customer" | translate}} :

    + {{ customerSelected.name }} +
    +
    +

    {{"i18nTextDefine_UseCase" | translate}} :

    + {{ thisService["serviceDomain"] }} +
    +
    +
    {{"i18nTextDefine_Close" | translate}}
    +
    +
    +     +     + + +

    *  {{"i18nTextDefine_SureDelete" | translate}}

    +
    +

    {{"i18nTextDefine_InstanceName" | translate}} :

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

    {{"i18nTextDefine_InstanceID" | translate}} :

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

    {{"i18nTextDefine_terminationType" | translate}} :

    + + + + +
    +
    +

    {{"i18nTextDefine_gracefulTerminationTimeout" | translate}} + :

    + +
    +
    + + +
    +
    + + instance temination is starting + +
    + {{ thisService['serviceDomain'] }}   {{"i18nTextDefine_InstanceTeminationStarting" | + translate}} +
    +
    E2E   + {{"i18nTextDefine_InstanceTeminationStarting" | translate}} +
    +
    NS   + {{"i18nTextDefine_InstanceTeminationStarting" | translate}} +
    +
    +
    +

    {{"i18nTextDefine_InstanceName" | translate}} :

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

    {{"i18nTextDefine_Customer" | translate}} :

    + {{ customerSelected.name }} +
    +
    +

    {{"i18nTextDefine_UseCase" | translate}} :

    + {{ thisService["serviceDomain"] }} +
    +
    +
    {{"i18nTextDefine_Close" | translate}}
    +
    +
    +     +     + + +

    *  {{"i18nTextDefine_SureHeal" | translate}}

    +
    +

    {{"i18nTextDefine_InstanceID" | translate}} :

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

    {{"i18nTextDefine_degreeHealing" | translate}} :

    + + + + + + +
    +
    + {{"i18nTextDefine_actionsHealing" | translate}} : + +
    +
    + + +   +
    +
    + {{"i18nTextDefine_healScript" | translate}} : + +
    + {{"i18nTextDefine_additionalParamsforNs" | translate}} : + +
    +
    + Key:   + Value: + +
    +
    +
    + +
    +
    +

    {{"i18nTextDefine_cause" | translate}} :

    + +
    +
    +

    {{"i18nTextDefine_action" | translate}} :

    + +
    +
    +

    {{"i18nTextDefine_actionvminfo" | translate}}:

    + + + +
    +
    + + +
    +
    + + instance temination is starting + +
    NS   + {{"i18nTextDefine_InstanceHealingStarting" | translate}} +
    +
    +
    +

    {{"i18nTextDefine_InstanceName" | translate}} :

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

    {{"i18nTextDefine_Customer" | translate}} :

    + {{ customerSelected.name }} +
    +
    +

    {{"i18nTextDefine_UseCase" | translate}} :

    + {{ thisService["serviceDomain"] }} +
    +
    +
    {{"i18nTextDefine_Close" | translate}}
    +
    +
    +     +     + + + +
    +
    + + instance temination is starting + +
    + {{ thisService['serviceDomain'] }}   {{"i18nTextDefine_InstanceCreationStarting" | + translate}} +
    +
    E2E   + {{"i18nTextDefine_InstanceCreationStarting" | translate}} +
    +
    NS   + {{"i18nTextDefine_InstanceCreationStarting" | translate}} +
    +
    +
    +

    {{"i18nTextDefine_InstanceName" | translate}} :

    + {{ thisCreateService["service-instance-name"] }} + +
    +
    +

    {{"i18nTextDefine_Customer" | translate}} :

    + {{ customerSelected2.name }} +
    +
    +

    {{"i18nTextDefine_UseCase" | translate}} :

    + {{ thisCreateService['serviceDomain'] }} +
    +
    +
    {{"i18nTextDefine_Close" | translate}}
    +
    +
    +     + +
    +
    + + instance temination is starting + instance temination is starting + +
    + {{ thisCreateService['serviceDomain'] }}   {{"i18nTextDefine_InstanceCreatedSuccessfully" | + translate}} +
    +
    + E2E   {{"i18nTextDefine_InstanceCreatedSuccessfully" | translate}} +
    +
    + NS   {{"i18nTextDefine_InstanceCreatedSuccessfully" | translate}} +
    +
    + {{ thisCreateService['serviceDomain'] }}   {{"i18nTextDefine_InstanceCreationFailed" | + translate}} +
    +
    + E2E   {{"i18nTextDefine_InstanceCreationFailed" | translate}} +
    +
    + NS   {{"i18nTextDefine_InstanceCreationFailed" | translate}} +
    +
    +
    +

    {{"i18nTextDefine_InstanceName" | translate}} :

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

    {{"i18nTextDefine_Customer" | translate}} :

    + {{ customerSelected2.name }} +
    +
    +

    {{"i18nTextDefine_UseCase" | translate}} :

    + {{ thisCreateService["serviceDomain"] }} +
    +
    +
    {{"i18nTextDefine_Close" | translate}}
    +
    +
    +     + +
    +
    + + instance temination is starting + instance temination is starting + +
    + {{ thisService['serviceDomain'] }}   {{"i18nTextDefine_InstanceTeminatedSuccessfully" | + translate}} +
    +
    + E2E   {{"i18nTextDefine_InstanceTeminatedSuccessfully" | translate}} +
    +
    + NS   {{"i18nTextDefine_InstanceTeminatedSuccessfully" | translate}} +
    +
    + {{ thisService['serviceDomain'] }}   {{"i18nTextDefine_InstanceTeminationFailed" | + translate}} +
    +
    E2E +   {{"i18nTextDefine_InstanceTeminationFailed" | translate}} +
    +
    + NS   {{"i18nTextDefine_InstanceTeminationFailed" | translate}} +
    +
    +
    +

    {{"i18nTextDefine_InstanceName" | translate}} :

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

    {{"i18nTextDefine_Customer" | translate}} :

    + {{ customerSelected.name }} +
    +
    +

    {{"i18nTextDefine_UseCase" | translate}} :

    + {{ thisService["serviceDomain"] }} +
    +
    +
    {{"i18nTextDefine_Close" | translate}}
    +
    +
    +     + +
    +
    + + instance temination is starting + instance temination is starting + +
    E2E   + {{"i18nTextDefine_InstanceScaledSuccessfully" | translate}} +
    +
    E2E   + {{"i18nTextDefine_InstanceScaleFailed" | translate}} +
    +
    +
    +

    {{"i18nTextDefine_InstanceName" | translate}} :

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

    {{"i18nTextDefine_Customer" | translate}} :

    + {{ customerSelected.name }} +
    +
    +

    {{"i18nTextDefine_UseCase" | translate}} :

    + {{ thisService["serviceDomain"] }} +
    +
    +
    {{"i18nTextDefine_Close" | translate}}
    +
    +
    +     + +
    +
    + + instance temination is starting + instance temination is starting + +
    NS   + {{"i18nTextDefine_InstanceHealedSuccessfully" | translate}} +
    +
    NS   + {{"i18nTextDefine_InstanceHealingFailed" | translate}} +
    +
    +
    +

    {{"i18nTextDefine_InstanceName" | translate}} :

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

    {{"i18nTextDefine_Customer" | translate}} :

    + {{ customerSelected.name }} +
    +
    +

    {{"i18nTextDefine_UseCase" | translate}} :

    + {{ thisService["serviceDomain"] }} +
    +
    +
    {{"i18nTextDefine_Close" | translate}}
    +
    +
    +     + +
    +
    + + instance temination is starting + instance temination is starting + +
    CCVPN   + {{"i18nTextDefine_InstanceUpdatedSuccessfully" | translate}} +
    +
    CCVPN   + {{"i18nTextDefine_InstanceUpdateFailed" | translate}} +
    +
    +
    +

    {{"i18nTextDefine_InstanceName" | translate}} :

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

    {{"i18nTextDefine_Customer" | translate}} :

    + {{ customerSelected.name }} +
    +
    +

    {{"i18nTextDefine_UseCase" | translate}} :

    + {{ thisService["serviceDomain"] }} +
    +
    +
    {{"i18nTextDefine_Close" | translate}}
    +
    +
    +     +
    +
    + +
    +
    + + +
    +
    + + +
    +
    + + +
    + +     +
    + loading +

    Please wating……

    +
    \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/services-list/services-list.component.less b/usecaseui-portal/src/app/views/services/services-list/services-list.component.less new file mode 100644 index 00000000..392d1b3a --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.less @@ -0,0 +1,380 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 20px; +} +.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; +} +.loading{ + width: 100%; + height: 100%; + position: fixed; + top: 0; + margin-top: -50px; + margin-left: -50px; + z-index: 1001; + text-align: center; + background: transparent; + p{ + color: #0DA9E2; + text-align: center; + position: absolute; + width: 300px; + height: 30px; + line-height: 30px; + top: 71%; + left: 36%; + margin-top: -150px; + margin-left: -150px; + } + img{ + width: 300px; + height: 300px; + position: absolute; + top: 50%; + left: 36%; + margin-top: -150px; + margin-left: -150px; + } +} +.action { + margin-bottom: 15px; + padding: 28px; + background: #ffffff; + position: relative; + span { + display: inline-block; + font: 700 14px "Arial"; + color: #3C4F8C; + margin-right: 5px; + } + nz-dropdown { + vertical-align: middle; + background-color:#ffffff; + :hover{ + border-color: #48C6EF; + } + button { + width: 165px; + height: 42px; + background-color:#ffffff; + text-align: left; + border-color: #EEEEEE; + span { + font-weight: 400; + color: #3C4F8C; + display: inline-block; + width: 120px; + overflow: hidden; + text-overflow: ellipsis; + padding-top: 2px; + } + i { + position: absolute; + top: 10px; + right: 10px; + } + } + } + //The style in the drop-down box is in style.less, and the drop-down box is extra temporary generated in the body. + .create { + position: absolute; + right: 3%; + top:50%; + width:116px; + height:42px; + background:#0DA9E2; + border-radius:6px; + 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; + } + .create:hover{ + background:#09C6E2; + } + +} +.top-num{ + overflow: auto; + width: 100%; +} +.top-list{ + position: relative; + width:29%; + height:170px; + margin: 10px 1%; + float: left; + background:url("../../../../assets/images/servicelist-e2e.png") no-repeat; + background-size: 100% 100%; + border-radius:2px; +} +.top-num .top-list:nth-child(2){ + background:url("../../../../assets/images/servicelist-e2e.png") no-repeat; + background-size: 100% 100%; +} +.top-num .top-list:nth-child(3){ + background:url("../../../../assets/images/servicelist-e2e.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:45%; + left: 50px; + margin-top: -30px; + background:#E0EDFF; + border:2px solid rgba(224,237,255,1); + border-radius: 50%; + font-size:16px; + font-family:ArialMT; + color:#3C4F8C; +} +.top-list { + .top-list-text { + position: absolute; + text-align: right; + height: 40px; + line-height: 20px; + right: 50px; + color: #fff; + p { + font-size: 14px; + width: 250px; + margin: 15px 0 0 0; + height: 13px; + clear: both; + span { + display: inline-block; + font-weight: 500; + text-align: right; + float: right; + } + span:nth-child(1) { + font-size: 18px; + width: 40px; + min-width: 40px; + } + span:nth-child(2) { + width: 85px; + font-size: 16px; + } + } + p:nth-child(1) { + margin-top: 25px; + } + } + .service-description{ + font-size: 14px; + width: 250px; + height: 13px; + position: absolute; + bottom: 30px; + left: 50px; + color: #3C4F8C; + } +} +.list { + background-color: #fff; + border-radius: 5px; + padding: 10px; + nz-table { + tbody { + td { + position: relative; + span.active { + font-size: 14px; + color: #147dc2; + } + span.closed { + font-size: 14px; + color: red; + } + span.onboarding{ + font-size: 12px; + color: #147dc2; + } + span.updating{ + font-size: 12px; + color: blue; + } + span.deleting { + font-size: 12px; + color: red; + } + span.creating { + font-size: 12px; + color: green; + } + span.scaling { + font-size: 12px; + color: purple; + } + span.healing { + font-size: 12px; + color: orangered; + } + i.anticon { + cursor: pointer; + font-size: 18px; + padding: 2px; + &:hover{ + color: #147dc2; + } + } + .cannotclick { + pointer-events: none; + color: #aaa; + opacity: 0.6; + } + .icon-more{ + position: absolute; + width: 115px; + height: 90px; + 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; + cursor: pointer; + .anticon{ + width: 18px; + height: 18px; + background: url("../../../../assets/images/scale.png") no-repeat; + } + .anticon.anticon-update{ + background: url("../../../../assets/images/update.png") no-repeat; + } + span{ + margin-left: 5px; + } + } + li:hover{ + color: #0DA9E2; + .anticon{ + background: url("../../../../assets/images/scale-active.png") no-repeat; + } + .anticon.anticon-update{ + background: url("../../../../assets/images/update-active.png") no-repeat; + } + } + } + } + tr.childtr { + td { + font-size: 12px; + color: #147dc2; + } + } + } + } +} + + +.detailComponent { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100vh; + background-color: #f3f3f3; + overflow-y: auto; + z-index: 3; +} +.createComponent { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100vh; + background-color: #F7F8FC; + overflow-y: auto; + z-index: 3; +} + +.e2eColor,.nsColor,.ccvpnColor,.sotnColor,.voLTEColor{ + width:120px; + height: 34px; + line-height: 34px; + margin-bottom: 0!important; + text-align: center; + background:rgba(158, 158, 158, 0.38); + border-radius:4px +} + +.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: 320px; + height: 32px; + line-height: 32px; + margin: 35px auto; +} +.select-list>span{ + text-align: right; + width: 110px!important; + line-height: 32px; +} + +.listdisplay{ + display: none; +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/services-list/services-list.component.spec.ts b/usecaseui-portal/src/app/views/services/services-list/services-list.component.spec.ts new file mode 100644 index 00000000..61440dc3 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ServicesListComponent } from './services-list.component'; + +describe('ServicesListComponent', () => { + let component: ServicesListComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ServicesListComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ServicesListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/services/services-list/services-list.component.ts b/usecaseui-portal/src/app/views/services/services-list/services-list.component.ts new file mode 100644 index 00000000..c15e9f11 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.ts @@ -0,0 +1,1410 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { Component, OnInit, HostBinding, TemplateRef } from '@angular/core'; +import { MyhttpService } from '../../../core/services/myhttp.service'; +import { slideToRight } from '../../../animates'; +import { NzModalService } from 'ng-zorro-antd'; +import { NzNotificationService } from 'ng-zorro-antd'; + +@Component({ + selector: 'app-services-list', + templateUrl: './services-list.component.html', + styleUrls: ['./services-list.component.less'], + animations: [slideToRight] +}) +export class ServicesListComponent implements OnInit { + @HostBinding('@routerAnimate') routerAnimateState; + + constructor(private myhttp: MyhttpService, private modalService: NzModalService, private notification: NzNotificationService) { + } + + ngOnInit() { + this.getallCustomers(); + } + + // customer servicetype + isSol005Interface = false; + orchestratorList = []; + customerList = []; + customerList2 = []; + customerSelected = { name: null, id: null }; + customerSelected2 = { name: null, id: null }; + serviceTypeList = []; + serviceTypeList2 = []; + serviceTypeSelected = { name: '' }; + serviceTypeSelected2 = { name: '' }; + serviceTypeSelectedName = ""; + templateTypeSelected = "CCVPN"; + orchestratorSelected = { name: null, id: null }; + listSortMasters = JSON.parse(sessionStorage.getItem('listSortMasters')); + language = sessionStorage.getItem("DefaultLang"); + iconMore = false; + loadingAnimateShow = false; + serviceMunber = [ // top: E2E/NS/CCVPN data + { + "serviceDomain": "E2E", + "Success": 0, + "failed": 0, + "InProgress": 0, + "detailName": "i18nTextDefine_End_To_End_Service" + }, + { + "serviceDomain": "NS", + "Success": 0, + "failed": 0, + "InProgress": 0, + "detailName": "i18nTextDefine_Network_Service" + }, + { + "serviceDomain": "CCVPN", + "Success": 0, + "failed": 0, + "InProgress": 0, + "detailName": "i18nTextDefine_Cross_Domain_and_Cross_Layer_VPN" + } + ]; + + //The icon behind each row of data in the table expands + iconMoreShow(data, tableData) { + tableData.map((its) => { + if (its["service-instance-id"] == data["service-instance-id"]) { + if (its["iconMore"] == false) { + data.iconMore = true; + } else if (its["iconMore"] == true) { + data.iconMore = false; + } + } else { + its["iconMore"] = false; + } + }) + } + + //Get all the customers + getallCustomers() { + console.log(this.language, "this.language"); + this.myhttp.getAllCustomers() + .subscribe((data) => { + this.customerList = data.map((item) => { + return { name: item["subscriber-name"], id: item["global-customer-id"] } + }); + if (this.customerList.length == 0) { + 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) { + return false; + } + this.customerSelected = this.customerList[0]; + this.choseCustomer(this.customerSelected); + }) + } + + getallOrchestrators() { + this.myhttp.getAllOrchestrators() + .subscribe((data) => { + this.orchestratorList = data.map((item) => { + return { name: item["name"], id: item["name"] } + }); + if (this.orchestratorList.length == 0) { + console.log("orchestratorList.length == 0", this.orchestratorList); + return false; + } + this.orchestratorSelected = this.orchestratorList[0]; + }) + } + + choseCustomer(item) { + this.customerSelected = item; + this.myhttp.getServiceTypes(this.customerSelected) + .subscribe((data) => { + this.serviceTypeList = data.map((item) => { + return { name: item["service-type"] } + }); + + if (this.serviceTypeList.length == 0) { + console.log("serviceTypeList.length == 0", this.serviceTypeList); + return false; + } + + this.serviceTypeSelected = this.serviceTypeList[0]; + + this.choseServiceType(this.serviceTypeSelected); + }) + } + + choseServiceType(item) { + this.serviceTypeSelected = item; + this.getTableData(); + } + + + // Create modal box 2 (dialog box) create ------------------------------- + isVisible = false; + + customerChange(): void { + this.getServiceType(this.customerSelected2); + } + + getServiceType(customerSelected2) { + this.myhttp.getServiceTypes(customerSelected2) + .subscribe((data) => { + this.serviceTypeList2 = data.map((item) => { + return { name: item["service-type"] } + }); + if (this.serviceTypeList2.length == 0) { + console.log("serviceTypeList.length == 0", this.serviceTypeList2); + return false; + } + this.getAlltemplates(); + }) + } + + serviceTypeChange(): void { + this.serviceTypeSelected2.name = this.serviceTypeSelectedName + } + + createModal(): void { + this.isVisible = true; + this.getallOrchestrators(); + this.customerSelected2 = this.customerSelected; + this.serviceTypeSelectedName = this.serviceTypeSelected.name; + this.serviceTypeSelected2 = Object.assign({}, this.serviceTypeSelected); + this.getServiceType(this.customerSelected2); + } + + choseTemplateType() { + this.getallOrchestrators(); + this.getAlltemplates(); + } + + templates = []; + template1 = { name: null }; + + getAlltemplates() { + this.myhttp.getAllServiceTemplates(this.templateTypeSelected) + .subscribe((data) => { + this.templates = data; + if (this.templateTypeSelected == "Network Service") { + this.templates = data.filter((d) => { + return typeof d.packageInfo.csarName == "string"; + }).map((item) => { + let cName = item.packageInfo.csarName.split("/").reverse()[0]; + return { name: cName, id: item.csarId, packageInfo: item.packageInfo } + }); + } + this.template1 = this.templates[0]; + }, (err) => { + console.log(err); + }) + } + + createshow = false; + createshow2 = false; + listDisplay = false; + createData: Object = {}; + + handleOk(): void { + if (this.templateTypeSelected == "SOTN" || this.templateTypeSelected == "CCVPN") { + this.createData = { + commonParams: { + customer: this.customerSelected, + serviceType: this.serviceTypeSelected2, + templateType: this.templateTypeSelected + }, template: this.template1 + }; + } else if (this.templateTypeSelected == "E2E Service" || this.templateTypeSelected == "Network Service") { + this.createData = { + commonParams: { + customer: this.customerSelected, + serviceType: this.serviceTypeSelected2, + templateType: this.templateTypeSelected + }, + template: this.template1, + orchestrator: this.orchestratorSelected, + isSol005Interface: this.isSol005Interface + }; + } + this.getTemParameters(); + } + + handleCancel(): void { + this.isVisible = false; + this.loadingAnimateShow = false; + } + + temParametersTips = false; + ccvpn_temParametersContent: any; + e2e_ns_temParametersContent: any; + + getTemParameters() { + let chosedtemplates = this.createData["template"]; + let types = this.createData["commonParams"].templateType; + if (types == "E2E Service") { + types = "e2e"; + } else if (types == "Network Service") { + types = "ns"; + } + this.loadingAnimateShow = true; + this.myhttp.getTemplateParameters(types, chosedtemplates) + .subscribe((data) => { + this.loadingAnimateShow = false; + if (data.status == "FAILED") { + this.temParametersTips = true; + this.isVisible = true; + console.log("Template parsing Failed"); + } else { + this.isVisible = false; + this.temParametersTips = false; + if (this.templateTypeSelected == "SOTN" || this.templateTypeSelected == "CCVPN") { + this.ccvpn_temParametersContent = data; + this.createshow = true; + this.listDisplay = true; + } else if (this.templateTypeSelected == "E2E Service" || this.templateTypeSelected == "Network Service") { + this.e2e_ns_temParametersContent = data; + this.createshow2 = true; + this.listDisplay = true; + } + } + }) + } + + //tableData + tableData = []; + pageIndex = 1; + pageSize = 10; + total = 100; + loading = false; + + getTableData() { + this.loading = true; + // Query parameter: customer serviceType Current page number, number of pages per page + let paramsObj = { + customerId: this.customerSelected.id, + serviceType: this.serviceTypeSelected.name, + currentPage: this.pageIndex, + pageSize: this.pageSize + } + this.myhttp.getServicesTableData(paramsObj) + .subscribe((data) => { + this.total = data.body.total; + this.tableData = data.body.tableList.map((item) => { + if (typeof item == "string") { + item = JSON.parse(item); + } + + item["iconMore"] = this.iconMore; + if (item["serviceDomain"] == "Network Service") { + if (item["vnfInfo"]) { + item["childServiceInstances"] = item["vnfInfo"].map((vnf) => { + vnf["serviceDomain"] = "vnf"; + return vnf; + }); + } else if (item["relationship-list"] && item["relationship-list"]["relationship"]) { + item["childServiceInstances"] = item["relationship-list"]["relationship"].filter((relate) => { + return relate["related-to"] == "generic-vnf"; + }).map((vnf) => { + let vnfInfo = { + vnfNsInstanceId: "", + vnfInstanceId: "", + vnfInstanceName: "", + serviceDomain: "vnf" + }; + vnfInfo.vnfNsInstanceId = item["nsInstanceId"] || item["service-instance-id"]; + vnfInfo.vnfInstanceId = vnf["relationship-data"].find((vnfid) => { + return vnfid["relationship-key"] == "generic-vnf.vnf-id" + })["relationship-value"]; + vnfInfo.vnfInstanceName = vnf["related-to-property"].find((vnfname) => { + return vnfname["property-key"] == "generic-vnf.vnf-name" + })["property-value"]; + return vnfInfo; + }) + } + } else { + item["childServiceInstances"] = []; + } + + // + if (item["operationResult"] == "2001") { //operationResult==2001 + item["status"] = "Available"; + item["tips"] = "Available"; + item["statusClass"] = item["operationResult"]; + } + // 2018.12.13 + else if (item["operationResult"] == "2002") { //operationResult==2002 + if (item["operationType"] == "1001" || item["operationType"] == "1002") { + // item["status"] = this.accordingState["operationResult"][item["operationResult"]]; + item["status"] = this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == item["operationResult"] && its["language"] == this.language + })["sortValue"]; + item["tips"] = "Unavailable"; + item["statusClass"] = item["operationType"]; + } else if (item["operationType"] != "1001" && item["operationType"] != "1002") { + // item["status"] = this.accordingState["operationResult"][item["operationResult"]]; + item["status"] = this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == item["operationResult"] && its["language"] == this.language + })["sortValue"]; + item["tips"] = "Available"; + item["statusClass"] = item["operationType"]; + } + + } + else if (item["operationResult"] == "2003") { //operationResult==2003 + // item["status"] = this.accordingState["operationResult"][item["operationResult"]]; + item["status"] = this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == item["operationResult"] && its["language"] == this.language + })["sortValue"]; + item["statusClass"] = item["operationType"]; + if (item["serviceDomain"] == "Network Service") { + let updata = (prodata) => { + item["rate"] = prodata.progress; + item["tips"] = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == item["operationType"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + prodata.progress + "%"; + if (item["rate"] > 100) { + item["status"] = prodata.status; + item["tips"] = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == item["operationType"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + item["status"]; + } + } + let id = item["nsInstanceId"] || item["service-instance-id"]; + let jobid = item["jobId"] || item["operationId"]; + let operationType = item["operationType"]; + this.queryNsProgress(jobid, id, updata, operationType).then(() => { + item["rate"] = 100; + item["status"] = this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2001 && its["language"] == this.language + })["sortValue"]; + item["tips"] = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == item["operationType"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + item["status"]; + }) + } else { + let updata = (prodata) => { + item["rate"] = prodata.progress || item["rate"]; + item["tips"] = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == item["operationType"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + prodata.progress + "%"; + if (item["rate"] > 100) { + item["status"] = prodata.status; + item["tips"] = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == item["operationType"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + item["status"]; + } + } + let obj = { + serviceId: item["service-instance-id"], + operationId: item["operationId"], + operationType: item["operationType"] + } + this.queryProgress(obj, updata).then(() => { + item["rate"] = 100; + item["status"] = this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2001 && its["language"] == this.language + })["sortValue"]; + item["tips"] = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == item["operationType"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + item["status"]; + }) + } + } + return item; + }) + this.tableData.map((item, index) => { + if (item.serviceDomain == 'E2E Service') { + if (item.operationResult == 2001) { + this.serviceMunber[0]["Success"] += 1; + } else if (item.operationResult == 2002) { + this.serviceMunber[0]["failed"] += 1; + } else if (item.operationResult == 2003) { + this.serviceMunber[0]["InProgress"] += 1; + } + } + else if (item.serviceDomain == 'Network Service') { + if (item.operationResult == 2001) { + this.serviceMunber[1]["Success"] += 1; + } else if (item.operationResult == 2002) { + this.serviceMunber[1]["failed"] += 1; + } else if (item.operationResult == 2003) { + this.serviceMunber[1]["InProgress"] += 1; + } + } + else if (item.serviceDomain == 'CCVPN') { + if (item.operationResult == 2001) { + this.serviceMunber[2]["Success"] += 1; + } else if (item.operationResult == 2002) { + this.serviceMunber[2]["failed"] += 1; + } else if (item.operationResult == 2003) { + this.serviceMunber[2]["InProgress"] += 1; + } + } + }) + this.loading = false; + }, (err) => { + console.log(err); + this.loading = false; + }) + } + + searchData(reset: boolean = false) { + this.getTableData(); + } + + thisService = {}; //The current service of the operation + e2e_nsData: Object[]; + scaleModelVisible = false; + + scaleService(service) { + this.thisService = service; + this.scaleModelVisible = true; + let paramsObj = { + customerId: this.customerSelected.id, + serviceType: this.serviceTypeSelected.name, + serviceId: service["service-instance-id"] + } + this.myhttp.getE2e_nsData(paramsObj) + .subscribe((data) => { + this.e2e_nsData = data; + }) + } + + scaleOk(templatescalestarting, templateScaleSuccessFaild) { + this.scaleModelVisible = false; + let requestBody = { + "service": { + "serviceInstanceName": this.thisService["service-instance-name"], + "serviceType": this.serviceTypeSelected.name, + "globalSubscriberId": this.customerSelected.id, + "resources": this.e2e_nsData.map((item) => { + return { + "resourceInstanceId": item["netWorkServiceId"], + "scaleType": item["scaleType"], + "scaleNsData": { + "scaleNsByStepsData": { + "aspectId": item["aspectId"], + "numberOfSteps": item["numberOfSteps"], + "scalingDirection": item["scalingDirection"] + } + } + } + }) + } + } + this.scaleE2eService(this.thisService, requestBody, templateScaleSuccessFaild); + this.scaleNotification(templatescalestarting); + } + + scaleCancel() { + this.scaleModelVisible = false; + } + + scaleNotification(template: TemplateRef<{}>): void { + this.notification.template(template); + } + + scaleSuccessNotification(template: TemplateRef<{}>): void { + this.notification.template(template); + } + + //heal + healModelVisible = false; + healActions = []; + nsAdditional = []; + nsParams = { + degreeHealing: "HEAL_RESTORE", + actionsHealing: [], + healScript: "", + additionalParamsforNs: "" + } + vnfVms = []; + vmSelected = {}; + vnfParams = { + vnfInstanceId: "", + cause: "", + additionalParams: { + action: "", + actionvminfo: { + vmid: "", + vduid: "", + vmname: "" + } + } + } + + addActionsHealing() { + this.healActions.push({ value: "" }) + } + + minusActionsHealing(index) { + this.healActions.splice(index, 1); + } + + addNsAdditional() { + this.nsAdditional.push({ key: "", value: "" }) + } + + minusNsAdditional(index) { + this.nsAdditional.splice(index, 1); + } + + healService(service) { + this.thisService = service; + this.healModelVisible = true; + if (service.serviceDomain == "vnf") { + this.vnfParams.vnfInstanceId = service.vnfInstanceId; + this.myhttp.getVnfInfo(service.vnfInstanceId) + .subscribe((data) => { + this.vnfVms = data.vnfVms; + this.vmSelected = this.vnfVms[0]; + }) + } + } + + healOk(templatehealstarting, templatehealSuccessFaild) { + this.healModelVisible = false; + // nsParams + this.nsParams.actionsHealing = this.healActions.map((item) => { + return item.value + }); + let additional = {}; + this.nsAdditional.forEach((item) => { + additional[item.key] = item.value; + }); + this.nsParams.additionalParamsforNs = JSON.stringify(additional); + // vnfParams + this.vnfParams.additionalParams.actionvminfo.vmid = this.vmSelected["vmId"]; + this.vnfParams.additionalParams.actionvminfo.vmname = this.vmSelected["vmName"]; + + let requestBody = this.thisService["serviceDomain"] == "Network Service" ? { healNsData: this.nsParams } : { healVnfData: this.vnfParams }; + this.healNsVnfService(this.thisService, requestBody, templatehealSuccessFaild); + this.healNotification(templatehealstarting); + } + + healCancel() { + this.healModelVisible = false; + } + + healNotification(template: TemplateRef<{}>): void { + this.notification.template(template); + } + + healSuccessNotification(template: TemplateRef<{}>): void { + this.notification.template(template); + } + + // show detail + detailshow = false; + detailshow2 = false; + upDateShow = false; + detailData: Object; + + serviceDetail(service, typeNum) { + service["siteSer"] = []; + service["sdwanSer"] = []; + service["customer"] = this.customerSelected; + service["serviceType"] = this.serviceTypeSelected; + + service.childServiceInstances.forEach((item) => { + if (item.serviceDomain == "SITE") { + service.siteSer.push(item); + } else if (item.serviceDomain == "SDWAN") { + service.sdwanSer.push(item); + } + }) + if (service["serviceDomain"] == 'CCVPN' || service["serviceDomain"] == 'SOTN') { + this.detailshow = true; + if (typeNum == 1) { + this.upDateShow = false; + } else { + this.upDateShow = true; + } + } else if (service["serviceDomain"] == 'E2E Service' || service["serviceDomain"] == 'Network Service') { + this.detailshow2 = true; + } + this.listDisplay = true; + this.detailData = service; + console.log(service); + } + + deleteModelVisible = false; + terminationType = "graceful"; + gracefulTerminationTimeout = 120; + + // delete Model show + deleteModel(service) { + this.thisService = service; + this.deleteModelVisible = true; + } + + deleteOk(templatedeletestarting, templateDeleteSuccessFaild) { + this.deleteModelVisible = false; + this.loadingAnimateShow = true; + if (this.thisService["serviceDomain"] == "Network Service") { + this.deleteNsService(this.thisService, templateDeleteSuccessFaild); + } else { + this.deleteService(this.thisService, templateDeleteSuccessFaild); + } + this.deleteNotification(templatedeletestarting); + } + + deleteCancel() { + this.deleteModelVisible = false; + } + + deleteNotification(template: TemplateRef<{}>): void { + this.notification.template(template); + } + + deleteSuccessNotification(template: TemplateRef<{}>): void { + this.notification.template(template); + } + + createNotification(template: TemplateRef<{}>): void { + this.notification.template(template); + } + + createSuccessNotification(template: TemplateRef<{}>): void { + this.notification.template(template); + } + + //ccvpn sotn createservice + parentServiceInstanceId = ""; + thisCreateService = {}; + + closeCreate(obj, templateCreatestarting, templateCreateSuccessFaild) { + if (!obj) { + this.createshow = false; //close + this.listDisplay = false; //close + return false; + } + this.createshow = false; + this.listDisplay = false; + this.loadingAnimateShow = true; + console.log(obj); + let newData; //Newly created service data for the main table + + let createParams = "?customerId=" + this.customerSelected2.id + + "&serviceType=" + this.serviceTypeSelected2.name + + "&serviceDomain=" + this.templateTypeSelected; + this.createService(obj, createParams, templateCreatestarting, templateCreateSuccessFaild).then((data) => { + console.log(data); + this.loadingAnimateShow = false; + newData = { //Newly created service data in the main form + 'service-instance-id': data["serviceId"], + 'service-instance-name': obj.service.name, + serviceDomain: this.templateTypeSelected, + childServiceInstances: [], + status: "In Progress", + rate: 0, + statusClass: 1001, + tips: "" + }; + this.thisCreateService = newData; + this.tableData = [newData, ...this.tableData]; + this.createNotification(templateCreatestarting); + let updata = (prodata) => { + newData.rate = prodata.progress; + newData.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == newData["statusClass"] && its["language"] == this.language + })["sortValue"] + newData.rate + "%"; + if (newData["rate"] > 100) { + newData["status"] = prodata.status; + newData.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == newData["statusClass"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + newData["status"]; + } + }; + let queryParams = { serviceId: data["serviceId"], operationId: data["operationId"], operationType: "1001" }; + return this.queryProgress(queryParams, updata); + }).then((data) => { + console.log(data); + newData.rate = 100; + newData.status = "Successful"; + this.createSuccessNotification(templateCreateSuccessFaild); + newData.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == newData["statusClass"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2001 && its["language"] == this.language + })["sortValue"]; + let hasUndone = this.tableData.some((item) => { + return item.rate < 100; + }); + if (!hasUndone) { + setTimeout(() => { + this.getTableData(); + }, 1000) + } + }) + } + + e2eCloseCreate(obj, templateCreatestarting, templateCreateSuccessFaild) { + if (!obj) { + this.createshow2 = false; // + this.listDisplay = false; // + return false; + } + this.createshow2 = false; // + this.listDisplay = false; // + this.loadingAnimateShow = true; + console.log(obj); + let newData; // + let createParams = "?customerId=" + this.customerSelected.id + + "&serviceType=" + this.serviceTypeSelected2.name + + "&serviceDomain=" + this.templateTypeSelected + + "&parentServiceInstanceId=" + + "&uuid=" + obj.service.serviceUuid + + "&invariantUuuid=" + obj.service.serviceInvariantUuid; + this.createService(obj, createParams, templateCreatestarting, templateCreateSuccessFaild).then((data) => { + console.log(data); + this.loadingAnimateShow = false; + newData = { // + 'service-instance-id': data["serviceId"], + 'service-instance-name': obj.service.name, + serviceDomain: this.templateTypeSelected, + childServiceInstances: [], + status: "In Progress", + statusClass: 1001, + rate: 0, + tips: "" + } + this.thisCreateService = newData; + this.tableData = [newData, ...this.tableData]; + this.createNotification(templateCreatestarting); + let updata = (prodata) => { + newData.rate = prodata.progress; + newData.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == newData["statusClass"] && its["language"] == this.language + })["sortValue"] + newData.rate + "%"; + if (newData["rate"] > 100) { + newData["status"] = prodata.status; + newData.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == newData["statusClass"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + newData["status"]; + } + } + let queryParams = { serviceId: data["serviceId"], operationId: data["operationId"], operationType: "1001" }; + return this.queryProgress(queryParams, updata); + }).then((data) => { + console.log(data); + newData.rate = 100; + newData.status = "Successful"; + this.createSuccessNotification(templateCreateSuccessFaild); + newData.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == newData["statusClass"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2001 && its["language"] == this.language + })["sortValue"]; + let hasUndone = this.tableData.some((item) => { + return item.rate < 100; + }) + if (!hasUndone) { + setTimeout(() => { + this.getTableData(); + }, 1000) + } + }) + + } + + nsCloseCreate(obj, templateCreatestarting, templateCreateSuccessFaild) { + if (!obj) { + this.createshow2 = false; // + this.listDisplay = false; // + return false; + } + this.createshow2 = false; // + this.listDisplay = false; // + this.loadingAnimateShow = true; + console.log(obj); + let newData; // + // step1 + this.myhttp.nsCreateInstance(obj.step1) + .subscribe((data) => { + // console.log(data); + this.loadingAnimateShow = false; + newData = { // + 'service-instance-id': data.nsInstanceId, + 'service-instance-name': obj.step1.nsName, + serviceDomain: this.templateTypeSelected, + childServiceInstances: [], + status: "In Progress", + statusClass: 1001, + rate: 0, + tips: "" + } + this.thisCreateService = newData; + this.tableData = [newData, ...this.tableData]; + this.createNotification(templateCreatestarting); + if (data.status == "FAILED") { + console.log("create ns service Failed :" + JSON.stringify(data)); + newData.status = "Failed"; + this.createSuccessNotification(templateCreateSuccessFaild); + return false; + } + let createParams = "?ns_instance_id=" + data.nsInstanceId + + "&customerId=" + this.customerSelected2.id + + "&serviceType=" + this.serviceTypeSelected2.name + + "&serviceDomain=" + this.templateTypeSelected + + "&parentServiceInstanceId="; + // step2 + this.createNsService(createParams, obj.step2).then((jobid) => { + if (jobid == "Failed") { + newData.status = "Failed"; + console.log(jobid, "ns two jobid") + this.thisCreateService = newData; + console.log(this.thisCreateService) + this.createSuccessNotification(templateCreateSuccessFaild); + newData.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == newData["statusClass"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2002 && its["language"] == this.language + })["sortValue"]; + return false; + } + let operationType = "1001"; + let updata = (prodata) => { + newData.rate = prodata.progress; + newData.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == newData["statusClass"] && its["language"] == this.language + })["sortValue"] + newData.rate + "%"; + if (newData["rate"] > 100) { + newData["status"] = prodata.status; + newData.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == newData["statusClass"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + newData["status"]; + } + } + + return this.queryNsProgress(jobid, newData["service-instance-id"], updata, operationType); + }).then((data) => { + console.log(data); + newData.rate = 100; + newData.status = "Successful"; + this.thisCreateService = newData; + console.log(this.thisCreateService) + this.createSuccessNotification(templateCreateSuccessFaild); + newData.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == newData["statusClass"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2001 && its["language"] == this.language + })["sortValue"]; + let hasUndone = this.tableData.some((item) => { + return item.rate < 100; + }) + if (!hasUndone) { + setTimeout(() => { + this.getTableData(); + }, 1000) + } + }) + }) + } + + createService(requestBody, createParams, templateCreatestarting, templateCreateSuccessFaild) { + let mypromise = new Promise((res, rej) => { + this.myhttp.createInstance(requestBody, createParams) + .subscribe((data) => { + if (data.status == "FAILED") { + this.loadingAnimateShow = false; + res("Failed"); + console.log("create e2e service Failed :" + JSON.stringify(data)); + return false; + } + res(data.service); + }) + }) + return mypromise; + } + + createNsService(id, obj) { + let mypromise = new Promise((res, rej) => { + this.myhttp.nsCreateInstance2(id, obj) + .subscribe((data) => { + if (data.status == "FAILED") { + this.loadingAnimateShow = false; + console.log("instantiate ns service Failed :" + JSON.stringify(data)); + res("Failed"); + return false; + } + res(data.jobId); + }) + }) + return mypromise; + } + + scaleE2eService(service, requestBody, templateScaleSuccessFaild) { + let id = service["service-instance-id"]; + service.rate = 0; + service.status = "In Progress"; + service.statusClass = "1003"; + service.tips = ""; + this.myhttp.scaleE2eService(id, requestBody) + .subscribe((data) => { + if (data.status == "FAILED") { + console.log("scale E2e service Failed :" + JSON.stringify(data)); + service.status = "Failed"; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service.statusClass && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2002 && its["language"] == this.language + })["sortValue"]; + this.scaleSuccessNotification(templateScaleSuccessFaild); + return false; + } + let obj = { + serviceId: id, + operationId: data.operationId, + operationType: "1003" + } + let updata = (prodata) => { + service.rate = prodata.progress; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service.statusClass && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + service["rate"] + "%"; + if (service["rate"] > 100) { + service["status"] = prodata.status; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service["statusClass"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + service["status"]; + } + } + this.queryProgress(obj, updata).then(() => { + service.rate = 100; + service.status = "Successful"; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service["statusClass"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2001 && its["language"] == this.language + })["sortValue"]; + this.scaleSuccessNotification(templateScaleSuccessFaild); + }) + }) + } + + healNsVnfService(service, requestBody, templatehealSuccessFaild) { + console.log(service); + service.rate = 0; + service.status = "In Progress"; + service.tips = ""; + service.statusClass = "1004"; + let id = service.nsInstanceId || service["service-instance-id"] || service["vnfNsInstanceId"]; + this.myhttp.healNsService(id, requestBody) + .subscribe((data) => { + if (data.status == "FAILED") { + console.log("heal nsvnf service Failed :" + JSON.stringify(data)); + service.status = "Failed"; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service.statusClass && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2002 && its["language"] == this.language + })["sortValue"]; + this.healSuccessNotification(templatehealSuccessFaild); + return false; + } + let jobid = data.jobId; + let operationType = "1004"; + let updata = (prodata) => { + service.rate = prodata.progress; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service.statusClass && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + service.rate + "%"; + console.log(service.rate) + if (service["rate"] > 100) { + service["status"] = prodata.status; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service.statusClass && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + service["status"]; + } + } + this.queryNsProgress(jobid, null, updata, operationType).then((data1) => { + console.log(data1); + service.rate = 100; + service.status = "Successful"; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service.statusClass && its["language"] == this.language + })["sortValue"] + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2001 && its["language"] == this.language + })["sortValue"]; + this.healSuccessNotification(templatehealSuccessFaild); + }); + }) + } + + updateCcvpnNotification(template: TemplateRef<{}>): void { + this.notification.template(template); + } + + updateCcvpnSuccessNotification(template: TemplateRef<{}>): void { + this.notification.template(template); + } + + closeCCVPNUpdate(obj, templateUpdateSuccessFaild) { + console.log(obj); + this.detailshow = false; + this.listDisplay = false; + this.upDateShow = false; + this.detailData["rate"] = 0; + this.detailData["status"] = "In Progress"; + this.detailData['tips'] = ""; + this.detailData["statusClass"] = "1005"; + let id = this.detailData["service-instance-id"]; + this.myhttp.updateccvpn(id, obj) + .subscribe((data) => { + if (data.status == "FAILED") { + console.log("scale E2e service Failed :" + JSON.stringify(data)); + this.detailData["status"] = "Failed"; + this.detailData["tips"] = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == this.detailData["statusClass"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2002 && its["language"] == this.language + })["sortValue"]; + this.updateCcvpnSuccessNotification(templateUpdateSuccessFaild); + return false; + } + let obj = { + serviceId: id, + operationId: data.operationId + } + let updata = (prodata) => { + this.detailData["rate"] = prodata.progress; + this.detailData["tips"] = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == this.detailData["statusClass"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + this.detailData["rate"] + "%"; + if (this.detailData["rate"] > 100) { + this.detailData["status"] = prodata.status; + this.detailData["tips"] = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == this.detailData["statusClass"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + this.detailData["status"]; + } + }; + this.queryProgress(obj, updata).then(() => { + this.detailData["rate"] = 100; + this.detailData["status"] = "Successful"; + this.detailData["tips"] = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == this.detailData["statusClass"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2001 && its["language"] == this.language + })["sortValue"]; + this.updateCcvpnSuccessNotification(templateUpdateSuccessFaild); + }) + }) + } + + deleteService(service, templateDeleteSuccessFaild) { + let allprogress = {}; // + let querypros = []; // + service.rate = 0; + service.status = "In Progress"; + service.tips = ""; + service.statusClass = "1002"; + service["childServiceInstances"].push({ "service-instance-id": service["service-instance-id"] }); + let deletePros = service["childServiceInstances"].map((item) => { + let params = { + globalSubscriberId: this.customerSelected.id, + serviceType: this.serviceTypeSelected, + serviceInstanceId: item["service-instance-id"] + } + return new Promise((res, rej) => { + this.myhttp.deleteInstance(params) + .subscribe((data) => { + this.loadingAnimateShow = false; + if (data.status == "FAILED") { + console.log("delete service Failed :" + JSON.stringify(data)); + service.status = "Failed"; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service.statusClass && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2002 && its["language"] == this.language + })["sortValue"]; + return false; + } + let obj = { + serviceId: params.serviceInstanceId, + operationId: data.operationId, + operationType: "1002" + } + let updata = (prodata) => { + allprogress[prodata.operationId] = prodata.progress; + let average = ((arr) => { + return eval(arr.join("+")) / arr.length + })(Object.values(allprogress)); + service["rate"] = average; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service.statusClass && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + service["rate"] + "%"; + if (service["rate"] > 100) { + service["status"] = prodata.status; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service.statusClass && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + service["status"]; + } + }; + querypros.push(this.queryProgress(obj, updata)); + res(); + }) + }) + }); + Promise.all(deletePros).then(() => { + Promise.all(querypros).then((data) => { + console.log(data); + service.rate = 100; + service.status = "Successful"; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service.statusClass && its["language"] == this.language + })["sortValue"] + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2001 && its["language"] == this.language + })["sortValue"]; + this.deleteSuccessNotification(templateDeleteSuccessFaild); + let hasUndone = this.tableData.some((item) => { + return item.rate < 100; + }) + if (!hasUndone) { + setTimeout(() => { + this.getTableData(); + }, 1000) + } + }) + }) + } + + deleteNsService(service, templateDeleteSuccessFaild) { + service.rate = 0; + service.status = "In Progress"; + service.tips = ""; + service.statusClass = "1002"; + let id = service.nsInstanceId || service["service-instance-id"]; + let operationType = "1002"; + let requestBody = { + terminationType: this.terminationType, + gracefulTerminationTimeout: this.gracefulTerminationTimeout + } + this.stopNsService(id, requestBody).then((jobid) => { + if (jobid == "Failed") { + service.status = "Failed"; + this.deleteSuccessNotification(templateDeleteSuccessFaild); + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service.statusClass && its["language"] == this.language + })["sortValue"] + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2002 && its["language"] == this.language + })["sortValue"]; + return false; + } + let updata = (prodata) => { + service.rate = prodata.progress; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service.statusClass && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + service.rate + "%"; + if (service["rate"] > 100) { + service["status"] = prodata.status; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service.statusClass && its["language"] == this.language + })["sortValue"] + service["status"]; + } + } + return this.queryNsProgress(jobid, null, updata, operationType); + }).then(() => { + this.myhttp.nsDeleteInstance(id) + .subscribe((data) => { + console.log(data); + service.rate = 100; + service.status = "Successful"; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service.statusClass && its["language"] == this.language + })["sortValue"] + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2001 && its["language"] == this.language + })["sortValue"]; + this.deleteSuccessNotification(templateDeleteSuccessFaild); + if (data.status == "FAILED") { + console.log("delete ns service Failed :" + JSON.stringify(data)); + service.status = "Failed"; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service.statusClass && its["language"] == this.language + })["sortValue"] + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2002 && its["language"] == this.language + })["sortValue"]; + this.deleteSuccessNotification(templateDeleteSuccessFaild); + return false; + } + console.log(service, "deleteservice"); + console.log(this.thisService, "thisService"); + let hasUndone = this.tableData.some((item) => { + return item.rate < 100; + }) + if (!hasUndone) { + setTimeout(() => { + this.getTableData(); + }, 1000) + } + }) + }) + } + + stopNsService(id, obj) { + let mypromise = new Promise((res, rej) => { + this.myhttp.stopNsService(id, obj) + .subscribe((data) => { + this.loadingAnimateShow = false; + if (data.status == "FAILED") { + console.log("stop ns service Failed :" + JSON.stringify(data)); + res("Failed"); + return false; + } + res(data.jobId); + }) + }) + return mypromise; + } + + queryProgress(obj, callback) { + let mypromise = new Promise((res, rej) => { + // let data = { + // operationStatus:{ + // "operationId": "XXXXXX", + // "operation": "create|delete|update|scale", + // "result": "finished|error|processing", + // "reason": "", + // "userId": "", + // "operationContent": "Be creating pop.", + // "progress": 0, + // "operateAt": "", + // "finishedAt": "" + // } + // } + let errorNums = 180; + let requery = () => { + this.myhttp.getProgress(obj) + .subscribe((data) => { + if (data.status == "FAILED") { + callback({ progress: 255, status: "Failed" }); + return false; + } + if (data.operationStatus == null || data.operationStatus.progress == undefined) { + // console.log(data); + errorNums--; + if (errorNums == 0) { + callback({ progress: 255, status: "time over" }); + return false; + } + setTimeout(() => { + requery(); + }, 10000) + return false; + } + if (data.operationStatus.progress > 100) { + callback({ progress: 255, status: "time over" }); + return false; + } + if (data.operationStatus.progress < 100) { + callback(data.operationStatus); + setTimeout(() => { + requery(); + }, 5000) + } else { + res(data.operationStatus); + } + }) + // setTimeout(()=>{ + // console.log(data.operationStatus.progress) + // data.operationStatus.progress++; + // if(data.operationStatus.progress<100){ + // callback(data.operationStatus); + // requery() + // }else{ + // callback(data.operationStatus); + // res(data.operationStatus) + // } + // },100) + } + requery(); + }) + return mypromise; + } + + queryNsProgress(jobid, id, callback, operationType) { + let mypromise = new Promise((res, rej) => { + // let data = { + // "jobId": "string", + // "responseDescriptor": { + // "status": "string", + // "progress": 0, + // "statusDescription": "string", + // "errorCode": "string", + // "responseId": "string", + // "responseHistoryList": [ + // { + // "status": "string", + // "progress": "string", + // "statusDescription": "string", + // "errorCode": "string", + // "responseId": "string" + // } + // ] + // } + // } + let errorNums = 180; + let requery = () => { + this.myhttp.getNsProgress(jobid, id, operationType) + .subscribe((data) => { + if (data.status == "FAILED") { + callback({ progress: 255, status: "Failed" }); + return false; + } + if (data.responseDescriptor == null || data.responseDescriptor.progress == undefined) { + // console.log(data); + errorNums--; + if (errorNums == 0) { + callback({ progress: 255, status: "time over" }); + return false; + } + setTimeout(() => { + requery(); + }, 10000) + return false; + } + if (data.responseDescriptor.progress > 100 && data.responseDescriptor.status == "error") { + callback({ progress: 255, status: data.responseDescriptor.statusDescription }); + return false; + } + if (data.responseDescriptor.progress < 100) { + callback(data.responseDescriptor); + setTimeout(() => { + requery(); + }, 5000) + } else { + res(data); + } + }) + // setTimeout(()=>{ + // console.log(data.responseDescriptor.progress) + // data.responseDescriptor.progress++; + // if(data.responseDescriptor.progress<100){ + // callback(data.responseDescriptor); + // requery() + // }else{ + // callback(data); + // res(data) + // } + // },100) + }; + requery(); + }); + return mypromise; + } + +} diff --git a/usecaseui-portal/src/app/views/services/services.component.html b/usecaseui-portal/src/app/views/services/services.component.html new file mode 100644 index 00000000..10142833 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services.component.html @@ -0,0 +1,18 @@ + +

    + services works! +

    diff --git a/usecaseui-portal/src/app/views/services/services.component.less b/usecaseui-portal/src/app/views/services/services.component.less new file mode 100644 index 00000000..e69de29b diff --git a/usecaseui-portal/src/app/views/services/services.component.spec.ts b/usecaseui-portal/src/app/views/services/services.component.spec.ts new file mode 100644 index 00000000..2e76b9f9 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ServicesComponent } from './services.component'; + +describe('ServicesComponent', () => { + let component: ServicesComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ServicesComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ServicesComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/services/services.component.ts b/usecaseui-portal/src/app/views/services/services.component.ts new file mode 100644 index 00000000..eec235b4 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-services', + templateUrl: './services.component.html', + styleUrls: ['./services.component.less'] +}) +export class ServicesComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} -- cgit 1.2.3-korg