From c437d5360c75c1af5417c3681235a0f8015a9a85 Mon Sep 17 00:00:00 2001 From: liuwh7 Date: Wed, 15 Sep 2021 09:57:09 +0800 Subject: feat: add intent based service Signed-off-by: liuwh7 Change-Id: If63eb5e61f01751771ad090728f33214077edd6f Issue-ID: USECASEUI-605 --- usecaseui-portal/src/app/app-routing.module.ts | 32 ++-- usecaseui-portal/src/app/app.component.html | 7 + usecaseui-portal/src/app/app.module.ts | 175 +++++++++--------- .../src/app/core/services/intentBase.service.ts | 81 +++++++++ .../monitor-facps-service.component.html | 39 ++++ .../monitor-facps-service.component.less | 99 ++++++++++ .../monitor-facps-service.component.ts | 199 +++++++++++++++++++++ .../monitor-management-service.component.html | 5 + .../monitor-management-service.component.less | 0 .../monitor-management-service.component.ts | 18 ++ .../nlp-upload-dialog.component.html | 30 ++++ .../nlp-upload-dialog.component.less | 56 ++++++ .../nlp-upload-dialog.component.spec.ts | 25 +++ .../nlp-upload-dialog.component.ts | 37 ++++ .../onboard-vnf-vm/onboard-vnf-vm.component.html | 16 +- .../onboard-vnf-vm/onboard-vnf-vm.component.ts | 121 +++++++++---- .../cloud-leased-line-modal.component.html | 86 +++++++++ .../cloud-leased-line-modal.component.less | 40 +++++ .../cloud-leased-line-modal.component.ts | 105 +++++++++++ .../cloud-leased-line.component.html | 99 ++++++++++ .../cloud-leased-line.component.less | 41 +++++ .../cloud-leased-line.component.ts | 132 ++++++++++++++ .../services/intent-based-services/constants.ts | 49 +++++ .../intent-based-services.component.html | 7 + .../intent-based-services.component.less | 0 .../intent-based-services.component.ts | 21 +++ .../smart-cloud-leased-modal.component.html | 42 +++++ .../smart-cloud-leased-modal.component.less | 53 ++++++ .../smart-cloud-leased-modal.component.spec.ts | 25 +++ .../smart-cloud-leased-modal.component.ts | 90 ++++++++++ usecaseui-portal/src/assets/i18n/cn.json | 3 + usecaseui-portal/src/assets/i18n/en.json | 3 + 32 files changed, 1597 insertions(+), 139 deletions(-) create mode 100644 usecaseui-portal/src/app/core/services/intentBase.service.ts create mode 100644 usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.html create mode 100644 usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.less create mode 100644 usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.ts create mode 100644 usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.html create mode 100644 usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.less create mode 100644 usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.ts create mode 100644 usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.html create mode 100644 usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.less create mode 100644 usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.spec.ts create mode 100644 usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.ts create mode 100644 usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.html create mode 100644 usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.less create mode 100644 usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.ts create mode 100644 usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.html create mode 100644 usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.less create mode 100644 usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.ts create mode 100644 usecaseui-portal/src/app/views/services/intent-based-services/constants.ts create mode 100644 usecaseui-portal/src/app/views/services/intent-based-services/intent-based-services.component.html create mode 100644 usecaseui-portal/src/app/views/services/intent-based-services/intent-based-services.component.less create mode 100644 usecaseui-portal/src/app/views/services/intent-based-services/intent-based-services.component.ts create mode 100644 usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.html create mode 100644 usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.less create mode 100644 usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.spec.ts create mode 100644 usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.ts diff --git a/usecaseui-portal/src/app/app-routing.module.ts b/usecaseui-portal/src/app/app-routing.module.ts index 6a6d414d..7cc97875 100644 --- a/usecaseui-portal/src/app/app-routing.module.ts +++ b/usecaseui-portal/src/app/app-routing.module.ts @@ -15,28 +15,30 @@ */ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; - - -import { HomeComponent } from './views/home/home.component'; -import { ManagementComponent } from './views/management/management.component'; +import { TestComponent } from './test/test.component'; +import { AlarmComponent } from './views/alarm/alarm.component'; import { FcapsComponent } from './views/fcaps/fcaps.component'; import { Monitor5gComponent } from './views/fcaps/monitor-5g/monitor-5g.component'; -import { ServicesListComponent } from './views/services/services-list/services-list.component'; -import { SlicingManagementComponent } from './views/services/slicing-management/slicing-management.component'; -import { OnboardVnfVmComponent } from './views/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 { MonitorManagementService } from './views/fcaps/monitor-management-service/monitor-management-service.component'; +import { HomeComponent } from './views/home/home.component'; +import { ManagementComponent } from './views/management/management.component'; import { CcvpnNetworkComponent } from './views/network/ccvpn-network/ccvpn-network.component'; import { MdonsNetworkComponent } from './views/network/mdons-network/mdons-network.component'; -import { SotnManagementComponent } from './views/services/sotn-management/sotn-management.component'; -import { OrderServiceComponent } from './views/services/sotn-management/order-service/order-service.component'; +import { OnboardVnfVmComponent } from './views/onboard-vnf-vm/onboard-vnf-vm.component'; +import { PerformanceVmComponent } from './views/performance/performance-vm/performance-vm.component'; +import { PerformanceVnfComponent } from './views/performance/performance-vnf/performance-vnf.component'; +import { PerformanceComponent } from './views/performance/performance.component'; +import { IntentBasedServicesComponent } from './views/services/intent-based-services/intent-based-services.component'; +import { ServicesListComponent } from './views/services/services-list/services-list.component'; +import { SlicingManagementComponent } from './views/services/slicing-management/slicing-management.component'; import { ManageServiceComponent } from './views/services/sotn-management/manage-service/manage-service.component'; import { MonitorServiceComponent } from './views/services/sotn-management/monitor-service/monitor-service.component'; +import { OrderServiceComponent } from './views/services/sotn-management/order-service/order-service.component'; +import { SotnManagementComponent } from './views/services/sotn-management/sotn-management.component'; + + -import { TestComponent } from './test/test.component'; // import { DetailsComponent } from './details/details.component'; @@ -52,7 +54,9 @@ const routes: Routes = [ { path: 'management', component: ManagementComponent }, { path: 'fcaps', component: FcapsComponent }, { path: 'fcaps/5gslicing', component: Monitor5gComponent }, + {path: 'fcaps/monitor_service', component: MonitorManagementService}, { path: 'services/services-list', component: ServicesListComponent }, + { path: 'services/intent-based-services', component: IntentBasedServicesComponent }, { path: 'services/slicing-management', component: SlicingManagementComponent }, { path: 'services/sotn-management', component: SotnManagementComponent }, { path: 'services/order-service', component: OrderServiceComponent }, diff --git a/usecaseui-portal/src/app/app.component.html b/usecaseui-portal/src/app/app.component.html index c8240a7d..36c5b7ff 100644 --- a/usecaseui-portal/src/app/app.component.html +++ b/usecaseui-portal/src/app/app.component.html @@ -69,6 +69,10 @@
  • {{"i18nTextDefine_Mangement_5g" | translate}}
    • + +
  • + {{"i18nTextDefine_IntentBasedServices" | translate}} +
    • @@ -119,6 +123,9 @@
  • {{"i18nTextDefine_Monitor_5g" | translate}}
    • +
  • + {{"i18nTextDefine_monitorService" | translate}} +
    • diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts index 16f8bc43..57c188ff 100644 --- a/usecaseui-portal/src/app/app.module.ts +++ b/usecaseui-portal/src/app/app.module.ts @@ -13,111 +13,110 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { BrowserModule } from "@angular/platform-browser"; -import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +//Registered language pack +import { HashLocationStrategy, LocationStrategy, registerLocaleData } from "@angular/common"; +import { HttpClient, HttpClientModule } from "@angular/common/http"; +import en from "@angular/common/locales/en"; import { NgModule } from "@angular/core"; import { FormsModule, ReactiveFormsModule } from "@angular/forms"; -import { HttpClientModule } from "@angular/common/http"; -import { HttpClient } from "@angular/common/http"; -import { NgZorroAntdModule } from "ng-zorro-antd"; -import { NZ_I18N, en_US } from "ng-zorro-antd"; -import { NgxEchartsModule } from "ngx-echarts"; - -//Custom Directive -import { DisableControlDirective } from "./core/Directives/disable-control.directive"; - -import { TranslateModule, TranslateLoader } from "@ngx-translate/core"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { TranslateLoader, TranslateModule } from "@ngx-translate/core"; import { TranslateHttpLoader } from "@ngx-translate/http-loader"; -export function HttpLoaderFactory(httpClient: HttpClient) { - return new TranslateHttpLoader(httpClient, "./assets/i18n/", ".json"); -} - +import { en_US, NgZorroAntdModule, NZ_I18N } from "ng-zorro-antd"; +import { NgxEchartsModule } from "ngx-echarts"; import { AppRoutingModule } from "./app-routing.module"; - -//Registered language pack -import { registerLocaleData } from "@angular/common"; -import en from "@angular/common/locales/en"; -registerLocaleData(en); - //Custom component import { AppComponent } from "./app.component"; -import { HomeComponent } from "./views/home/home.component"; -import { ManagementComponent } from "./views/management/management.component"; -import { ServicesListComponent } from "./views/services/services-list/services-list.component"; -import { OnboardVnfVmComponent } from "./views/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 "./views/network/ccvpn-network/ccvpn-network.component"; -import { CcvpnDetailComponent } from "./views/services/services-list/ccvpn-detail/ccvpn-detail.component"; -import { CcvpnCreationComponent } from "./views/services/services-list/ccvpn-creation/ccvpn-creation.component"; -import { MdonsDetailComponent } from "./views/services/services-list/mdons-detail/mdons-detail.component"; -import { MdonsCreationComponent } from "./views/services/services-list/mdons-creation/mdons-creation.component"; -import { MdonsNetworkComponent } from "./views/network/mdons-network/mdons-network.component"; - -import { DetailsComponent } from "./shared/components/details/details.component"; -import { GraphiclistComponent } from "./shared/components/graphiclist/graphiclist.component"; -import { E2eCreationComponent } from "./views/services/services-list/e2e-creation/e2e-creation.component"; - -import { BarComponent } from "./shared/components/charts/bar/bar.component"; -import { LineComponent } from "./shared/components/charts/line/line.component"; -import { PieComponent } from "./shared/components/charts/pie/pie.component"; - -import { - PathLocationStrategy, - LocationStrategy, - HashLocationStrategy, -} from "@angular/common"; -// common function util -import { Util } from "./shared/utils/utils"; -import { Recorder} from './shared/utils/recorder'; -// common function http -import { Http } from "./shared/utils/http"; -// Custom service -import { ServiceListService } from "./core/services/serviceList.service"; +//Custom Directive +import { DisableControlDirective } from "./core/Directives/disable-control.directive"; import { HomesService } from "./core/services/homes.service"; -import { onboardService } from "./core/services/onboard.service"; +import { intentBaseService } from "./core/services/intentBase.service"; +import { ManagemencsService } from "./core/services/managemencs.service"; import { networkHttpservice } from "./core/services/networkHttpservice.service"; +import { onboardService } from "./core/services/onboard.service"; +// Custom service +import { ServiceListService } from "./core/services/serviceList.service"; // slicingTask service import { SlicingTaskServices } from "./core/services/slicingTaskServices"; - +import { TextService } from "./core/services/text.service"; +import { BasicInfoComponent } from "./shared/components/basic-info/basic-info.component"; +import { BarComponent } from "./shared/components/charts/bar/bar.component"; +import { LineComponent } from "./shared/components/charts/line/line.component"; +import { PieComponent } from "./shared/components/charts/pie/pie.component"; +import { CitySelectComponent } from "./shared/components/city-select/city-select/city-select.component"; +import { DetailsComponent } from "./shared/components/details/details.component"; +import { GraphiclistComponent } from "./shared/components/graphiclist/graphiclist.component"; +import { NotificationComponent } from "./shared/components/notification/notification.component"; import { PerformanceDetailsComponent } from "./shared/components/performance-details/performance-details.component"; -import { E2eDetailComponent } from "./views/services/services-list/e2e-detail/e2e-detail.component"; -import { CustomerComponent } from "./views/management/customer/customer.component"; -import { ManagemencsService } from "./core/services/managemencs.service"; -import { FcapsComponent } from "./views/fcaps/fcaps.component"; +// common function http +import { Http } from "./shared/utils/http"; +import { Recorder } from './shared/utils/recorder'; +// common function util +import { Util } from "./shared/utils/utils"; import { TestComponent } from "./test/test.component"; -import { TextService } from "./core/services/text.service"; -import { TopCardComponent } from "./views/services/services-list/top-card/top-card.component"; +import { AlarmComponent } from "./views/alarm/alarm.component"; +import { FcapsComponent } from "./views/fcaps/fcaps.component"; +import { Monitor5gComponent } from "./views/fcaps/monitor-5g/monitor-5g.component"; +import { MonitorFacpsServiceComponent } from "./views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component"; +import { MonitorManagementService } from "./views/fcaps/monitor-management-service/monitor-management-service.component"; +import { HomeComponent } from "./views/home/home.component"; +import { CustomerComponent } from "./views/management/customer/customer.component"; +import { ManagementComponent } from "./views/management/management.component"; +import { CcvpnNetworkComponent } from "./views/network/ccvpn-network/ccvpn-network.component"; +import { MdonsNetworkComponent } from "./views/network/mdons-network/mdons-network.component"; +import { NlpUploadDialogComponent } from "./views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component"; +import { OnboardVnfVmComponent } from "./views/onboard-vnf-vm/onboard-vnf-vm.component"; +import { PerformanceVmComponent } from "./views/performance/performance-vm/performance-vm.component"; +import { PerformanceVnfComponent } from "./views/performance/performance-vnf/performance-vnf.component"; +import { PerformanceComponent } from "./views/performance/performance.component"; +import { CloudLeasedLineModalComponent } from './views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component'; +import { CloudLeasedLineComponent } from './views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component'; +import { IntentBasedServicesComponent } from './views/services/intent-based-services/intent-based-services.component'; +import { SmartCloudLeasedModalComponent } from './views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component'; +import { CcvpnCreationComponent } from "./views/services/services-list/ccvpn-creation/ccvpn-creation.component"; +import { CcvpnDetailComponent } from "./views/services/services-list/ccvpn-detail/ccvpn-detail.component"; import { CreateModelComponent } from "./views/services/services-list/create-model/create-model.component"; import { DeleteModelComponent } from "./views/services/services-list/delete-model/delete-model.component"; -import { NotificationComponent } from "./shared/components/notification/notification.component"; -import { ScaleModelComponent } from "./views/services/services-list/scale-model/scale-model.component"; +import { E2eCreationComponent } from "./views/services/services-list/e2e-creation/e2e-creation.component"; +import { E2eDetailComponent } from "./views/services/services-list/e2e-detail/e2e-detail.component"; import { HealModelComponent } from "./views/services/services-list/heal-model/heal-model.component"; -import { Monitor5gComponent } from "./views/fcaps/monitor-5g/monitor-5g.component"; +import { MdonsCreationComponent } from "./views/services/services-list/mdons-creation/mdons-creation.component"; +import { MdonsDetailComponent } from "./views/services/services-list/mdons-detail/mdons-detail.component"; +import { ScaleModelComponent } from "./views/services/services-list/scale-model/scale-model.component"; +import { ServicesListComponent } from "./views/services/services-list/services-list.component"; +import { TopCardComponent } from "./views/services/services-list/top-card/top-card.component"; +import { BusinessOrderComponent } from "./views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component"; +import { CsmfSlicingBusinessManagementComponent } from "./views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component"; +import { InputBusinessOrderComponent } from './views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component'; import { SlicingManagementComponent } from "./views/services/slicing-management/slicing-management.component"; -import { SlicingTaskManagementComponent } from "./views/services/slicing-management/slicing-task-management/slicing-task-management.component"; -import { SlicingResourceManagementComponent } from "./views/services/slicing-management/slicing-resource-management/slicing-resource-management.component"; -import { SlicingTaskModelComponent } from "./views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component"; -import { SubnetParamsModelComponent } from "./views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component"; -import { SlicingBusinessTableComponent } from "./views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component"; -import { BasicInfoComponent } from "./shared/components/basic-info/basic-info.component"; -import { CheckProcessModelComponent } from "./views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component"; +import { NsiModelComponent } from "./views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component"; import { NsiTableComponent } from "./views/services/slicing-management/slicing-resource-management/nsi-management/nsi-table/nsi-table.component"; +import { NssiModelComponent } from "./views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component"; import { NssiTableComponent } from "./views/services/slicing-management/slicing-resource-management/nssi-management/nssi-table/nssi-table.component"; import { SlicingBusinessModelComponent } from "./views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component"; -import { NsiModelComponent } from "./views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component"; -import { NssiModelComponent } from "./views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component"; -import { CsmfSlicingBusinessManagementComponent } from "./views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component"; -import { BusinessOrderComponent } from "./views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component"; -import { InputBusinessOrderComponent } from './views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component'; -import { SotnManagementComponent } from "./views/services/sotn-management/sotn-management.component"; -import { OrderServiceComponent } from "./views/services/sotn-management/order-service/order-service.component"; +import { SlicingBusinessTableComponent } from "./views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component"; +import { SlicingResourceManagementComponent } from "./views/services/slicing-management/slicing-resource-management/slicing-resource-management.component"; +import { CheckProcessModelComponent } from "./views/services/slicing-management/slicing-task-management/check-process-model/check-process-model.component"; +import { SlicingTaskManagementComponent } from "./views/services/slicing-management/slicing-task-management/slicing-task-management.component"; +import { SlicingTaskModelComponent } from "./views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component"; +import { SubnetParamsModelComponent } from "./views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component"; import { ManageServiceComponent } from "./views/services/sotn-management/manage-service/manage-service.component"; import { MonitorServiceComponent } from "./views/services/sotn-management/monitor-service/monitor-service.component"; -import { fakeBackendProvider } from "../../testBE/FakeBackendInterceptor"; -import { CitySelectComponent } from "./shared/components/city-select/city-select/city-select.component"; +import { OrderServiceComponent } from "./views/services/sotn-management/order-service/order-service.component"; +import { SotnManagementComponent } from "./views/services/sotn-management/sotn-management.component"; + +export function HttpLoaderFactory(httpClient: HttpClient) { + return new TranslateHttpLoader(httpClient, "./assets/i18n/", ".json"); +} + + +registerLocaleData(en); + + + + + @NgModule({ providers: [ @@ -129,6 +128,7 @@ import { CitySelectComponent } from "./shared/components/city-select/city-select ServiceListService, HomesService, onboardService, + intentBaseService, networkHttpservice, ManagemencsService, TextService, @@ -141,6 +141,7 @@ import { CitySelectComponent } from "./shared/components/city-select/city-select ManagementComponent, ServicesListComponent, OnboardVnfVmComponent, + NlpUploadDialogComponent, AlarmComponent, @@ -169,6 +170,12 @@ import { CitySelectComponent } from "./shared/components/city-select/city-select ScaleModelComponent, HealModelComponent, Monitor5gComponent, + MonitorManagementService, + MonitorFacpsServiceComponent, + IntentBasedServicesComponent, + CloudLeasedLineComponent, + CloudLeasedLineModalComponent, + SmartCloudLeasedModalComponent, SlicingManagementComponent, SlicingTaskManagementComponent, SlicingResourceManagementComponent, diff --git a/usecaseui-portal/src/app/core/services/intentBase.service.ts b/usecaseui-portal/src/app/core/services/intentBase.service.ts new file mode 100644 index 00000000..b8ead336 --- /dev/null +++ b/usecaseui-portal/src/app/core/services/intentBase.service.ts @@ -0,0 +1,81 @@ +/* + 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, HttpParams } from '@angular/common/http'; +import { Injectable } from '@angular/core'; +import { baseUrl } from '../models/dataInterface'; + +@Injectable() +export class intentBaseService { + constructor(private http: HttpClient) { } + + baseUrl = baseUrl.baseUrl; + url = { + getInstanceId: this.baseUrl + "/intent/getInstanceId", + createIntentInstance: this.baseUrl + "/intent/createIntentInstance", + getInstanceList: this.baseUrl + "/intent/getInstanceList", + queryInstancePerformanceData: this.baseUrl + "/intent/queryInstancePerformanceData", + getFinishedInstanceInfo: this.baseUrl + "/intent/getFinishedInstanceInfo", + deleteIntentInstance: this.baseUrl + "/intent/deleteIntentInstance", + activeIntentInstance: this.baseUrl + "/intent/activeIntentInstance", + invalidIntentInstance: this.baseUrl + "/intent/invalidIntentInstance", + queryAccessNodeInfo: this.baseUrl + "/intent/queryAccessNodeInfo", + intentInstancePredict: this.baseUrl + "/intent/intentInstancePredict" + }; + + //The following APIs function are optimizable------------------------ + + /* Query data list */ + getInstanceId() { + return this.http.get(this.url["getInstanceId"]); + } + + createIntentInstance(requestBody) { + return this.http.post(this.url["createIntentInstance"], requestBody); + } + + getInstanceList(requestBody) { + return this.http.post(this.url["getInstanceList"], requestBody); + } + + queryInstancePerformanceData(requestBody) { + return this.http.post(this.url["queryInstancePerformanceData"], requestBody); + } + + getFinishedInstanceInfo() { + return this.http.get(this.url["getFinishedInstanceInfo"]); + } + + deleteIntentInstance(instanceId) { + let params = new HttpParams({ fromObject: { "instanceId": instanceId } }); + return this.http.delete(this.url.deleteIntentInstance, { params }); + } + + activeIntentInstance(requestBody) { + return this.http.post(this.url["activeIntentInstance"], requestBody); + } + + invalidIntentInstance(requestBody) { + return this.http.post(this.url["invalidIntentInstance"], requestBody); + } + + queryAccessNodeInfo() { + return this.http.get(this.url["queryAccessNodeInfo"]); + } + + intentInstancePredict(requestBody) { + return this.http.post(this.url["intentInstancePredict"], requestBody); + } +} diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.html b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.html new file mode 100644 index 00000000..a07f948c --- /dev/null +++ b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.html @@ -0,0 +1,39 @@ +
    +
    + + + + + +
    + FinishedInstance + + + + +
    +
    +
    +
    +
    + Line Chart +
    +
    +
    +
    \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.less b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.less new file mode 100644 index 00000000..f7db5523 --- /dev/null +++ b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.less @@ -0,0 +1,99 @@ +#mynetwork { + width: 100%; + height: calc(~"100vh - 300px"); + border: 1px solid lightgray; + margin-right: 40px; + // background-color: #333333; +} + + +:host ::ng-deep .ant-form-item-label label { + color: var(--on-primary) ; + background-color:var(--primary); +} + +:host ::ng-deep .ant-select-dropdown-menu-item{ + color: var(--on-primary) ; + background-color:var(--primary); + +} +:host ::ng-deep .ant-select-selection__rendered { + background-color:var(--primary); + +} +:host ::ng-deep .ant-select-selection--single { + background-color:var(--primary); + +} + +:host ::ng-deep .ant-select-selection-selected-value { + + color: var(--on-primary) !important ; + +} + +@media only screen and (min-width: 600px) { +.flexDiv { + display: flex!important; +} +} +@media only screen and (min-width: 768px) { +.flexDiv { + display: flex!important; +} +} + +.font-size{ + font-size: 17px; +} +.font-weight{ + font-weight:bold; +} + +.refreshBtn{ + right: 580px; + position: absolute; + top: 35px; + z-index: 1 +} + +:host ::ng-deep .ant-form-item-label label { + color: var(--on-primary) ; +} + +:host ::ng-deep .ant-select-selection__placeholder +{ + color: var(--on-primary); +} + +:host ::ng-deep .ant-select-arrow { + + + color: var(--on-primary); + font-size: 12px; +} + + +.popup-table-row +{ + color: aqua; +} + +.divCls{ + display: inline-block; + width: 100%; + padding-bottom: 10px; + color : var(--on-lables) ; + } + + .main { + // padding-left:80px + } + .ant-col-sm-6 { + width:100%; + } + + #subscriptionType, #serviceInstance { + width: 250px; + } + diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.ts b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.ts new file mode 100644 index 00000000..8da138bf --- /dev/null +++ b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.ts @@ -0,0 +1,199 @@ +import { HttpClient } from "@angular/common/http"; +import { Component, OnInit } from "@angular/core"; +import { NzMessageService } from "ng-zorro-antd"; +import { intentBaseService } from "../../../../core/services/intentBase.service"; + +@Component({ + selector: "app-monitor-facps-service", + templateUrl: "./monitor-facps-service.component.html", + styleUrls: ["./monitor-facps-service.component.less"], +}) +export class MonitorFacpsServiceComponent implements OnInit { + + constructor( + private nzMessage: NzMessageService, + private myHttp: intentBaseService, + private http: HttpClient + ) {} + + selectedSubscriptionType: string = ""; + selectedServiceInstance: string = ""; + selectedTopology: string = ""; + instanceId: string = ""; + chartData: any = { + xAxis: { + data: [ + "2018-09-10 ", + "2018-09-11", + "2018-09-12", + "2018-09-13", + "2018-09-14", + "2018-09-15", + "2018-09-16", + "2018-09-17", + "2018-09-18", + "2018-09-19", + "2018-09-20", + "2018-09-21", + "2018-09-22" + ] + }, + series: [ + { + data: [ + 30, + 45, + 34, + 35, + 43, + 56, + 36, + 53, + 42, + 45, + 44, + 35, + 32 + ] + }, + { + data: [ + 60, + 60, + 60, + 60, + 60, + 60, + 60, + 60, + 60, + 60, + 60, + 60, + 60 + ] + } + ] + }; + initData: any = { + height: 320, + option: { + legend: { bottom: "0px", data: ["RATE", "MAXRATE"] }, + xAxis: { data: [] }, + series: [ + { + name: "RATE", + type: "line", + itemStyle: { color: "#70ACEC" }, + data: [], + }, + { + name: 'MAXRATE', + type: 'line', + step: 'end', + itemStyle: { + color: "#3BCD79" + }, + data: [] + } + ], + }, + }; + + initOpts: any; + lineOption: any; + chartIntance: any; + updateOption: any; + + instanceLists: any[] = []; + + ngOnInit() { + this.getFinishedInstanceInfo(); + 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, + }; + } + + chartInit(chart) { + this.chartIntance = chart; + } + + getFinishedInstanceInfo() { + this.myHttp.getFinishedInstanceInfo().subscribe( + (response) => { + const { code, message, data } = response; + if (code !== 200) { + this.nzMessage.error(message); + return; + } + this.instanceLists = [...data]; + }, + (err) => { + console.log(err); + } + ) + } + + queryInstancePerformance(instanceId) { + this.myHttp.queryInstancePerformanceData({ instanceId}).subscribe( + (response) => { + const { code, message, data } = response; + if (code !== 200) { + this.nzMessage.error(message); + return; + } + if(this.chartIntance){ + this.updateOption = data; + } + }, + (err) => { + console.log(err); + } + ) + } + +} diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.html b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.html new file mode 100644 index 00000000..554d8887 --- /dev/null +++ b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.html @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.less b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.less new file mode 100644 index 00000000..e69de29b diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.ts b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.ts new file mode 100644 index 00000000..39fd95e8 --- /dev/null +++ b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.ts @@ -0,0 +1,18 @@ +import { Component, HostBinding, OnInit } from '@angular/core'; +import { slideToRight } from '../../../shared/utils/animates'; + +@Component({ + selector: 'app-monitor-management-service', + templateUrl: './monitor-management-service.component.html', + styleUrls: ['./monitor-management-service.component.less'], + animations: [slideToRight] +}) +export class MonitorManagementService implements OnInit { + + @HostBinding('@routerAnimate') routerAnimateState; + + constructor() { } + + ngOnInit() { + } +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.html b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.html new file mode 100644 index 00000000..9e7f669b --- /dev/null +++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.html @@ -0,0 +1,30 @@ + +
    +
    + + + Type + + + + + + + + +
    +
    +     diff --git a/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.less b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.less new file mode 100644 index 00000000..0cf44fad --- /dev/null +++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.less @@ -0,0 +1,56 @@ +.subnet_params_container{ + padding-left: 3%; + .text-form-class{ + margin-bottom: 20px; + } + .subnet_params_area{ + margin-right: 5px; + } + .ant-btn-icon-only{ + padding: 0 5px !important; + } + .subnet_params_button{ + margin-top: 7px; + margin-left: 10px; + } + .subnet_params_icon{ + font-size: 14px; + } + .audio_class{ + height: 130px; + .recode_class{ + margin-top: 30px; + position: relative; + span{ + font-size: 17px; + } + .audioBtn{ + font-size: 20px; + position: absolute; + top: 5px; + left: 142px; + } + .anticon-pause-circle-o{ + color: red; + } + } + .play_class{ + font-size: 17px; + margin-top: 20px; + button { + margin-left: 2px; + } + } + } +} +.ant-form-item { + margin-top: 20px; + margin-bottom: -5px; +} + +.validateRules{ + color: red; +} +.error-input-border{ + border-color: red!important; +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.spec.ts b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.spec.ts new file mode 100644 index 00000000..ffdd130f --- /dev/null +++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { InputBusinessOrderComponent } from './input-business-order.component'; + +describe('InputBusinessOrderComponent', () => { + let component: InputBusinessOrderComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ InputBusinessOrderComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(InputBusinessOrderComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.ts b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.ts new file mode 100644 index 00000000..64b1973a --- /dev/null +++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.ts @@ -0,0 +1,37 @@ +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { NzMessageService } from 'ng-zorro-antd'; +import { Recorder } from '../../../shared/utils/recorder'; +import { Util } from '../../../shared/utils/utils'; + +@Component({ + selector: 'app-nlp-upload-dialog', + templateUrl: './nlp-upload-dialog.component.html', + styleUrls: ['./nlp-upload-dialog.component.less'] +}) +export class NlpUploadDialogComponent implements OnInit { + + constructor( + private Util: Util, + private Recorder: Recorder, + private msg: NzMessageService + ) { } + + @Input() isShowFlag: boolean; + @Output() returnNlpType = new EventEmitter(); + nlpType: String = "nlp"; + + ngOnInit() {} + + ngOnChange() {} + + handleCancel(): void { + this.isShowFlag = false; + this.returnNlpType.emit({ "cancel": true }); + } + + handleOk(): void { + this.isShowFlag = false; + this.returnNlpType.emit({ "cancel": false, nlpType: this.nlpType }); + } + +} diff --git a/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.html index 34e78e60..2c7b11a5 100644 --- a/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.html +++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.html @@ -89,11 +89,12 @@ - {{"i18nTextDefine_NO" | translate}} - {{"i18nTextDefine_Name" | translate}} - {{"i18nTextDefine_Size" | translate}} - {{"i18nTextDefine_CreateTime" | translate}} - {{"i18nTextDefine_Status" | translate}} + {{"i18nTextDefine_NO" | translate}} + {{"i18nTextDefine_Name" | translate}} + {{"i18nTextDefine_Size" | translate}} + {{"i18nTextDefine_CreateTime" | translate}} + {{"i18nTextDefine_Status" | translate}} + {{"i18nTextDefine_Type" | translate}} {{"i18nTextDefine_Operation" | translate}} @@ -150,6 +151,7 @@ {{item.size}} {{item.createTime}} {{item.active ? 'Active' : 'Inactive'}} + {{item.type || '--'}} + + + \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.less b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.less new file mode 100644 index 00000000..09a0a168 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.less @@ -0,0 +1,40 @@ +.radio_txt { + p { + margin-bottom: 0px; + &:last-child { + margin-top: -18px; + } + } +} +.button_submit { + text-align: right; + padding-right: 306px; + .cancelBtn { + margin-right: 15px; + } +} +::ng-deep .ant-form-item-label { + text-align: left; + padding-left: 50px; +} +::ng-deep .ant-radio-button-wrapper { + padding: 0 45px; +} +::ng-deep .ant-radio-button-wrapper:hover { + color: #54657e; + border-color: none; +} +::ng-deep .ant-radio-button-wrapper-checked { + -webkit-box-shadow: -1px 0 0 0 #40a9ff; + background: #40a9ff; + border-color: #40a9ff; + color: #fff; +} +::ng-deep .ant-radio-button-wrapper-checked:hover { + -webkit-box-shadow: -1px 0 0 0 #40a9ff; + border-color: #40a9ff; + color: #fff; +} +::ng-deep .ant-radio-button-wrapper-checked:first-child { + border-color: #40a9ff; +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.ts b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.ts new file mode 100644 index 00000000..0f0afc79 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.ts @@ -0,0 +1,105 @@ +import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core"; +import { NzMessageService } from "ng-zorro-antd"; +import { intentBaseService } from "../../../../core/services/intentBase.service"; +import { Util } from "../../../../shared/utils/utils"; +import { COMMUNICATION_FORM_ITEMS } from "../constants"; + +@Component({ + selector: 'app-cloud-leased-line-modal', + templateUrl: './cloud-leased-line-modal.component.html', + styleUrls: ['./cloud-leased-line-modal.component.less'] +}) +export class CloudLeasedLineModalComponent implements OnInit { + + constructor( + private myHttp: intentBaseService, + private nzMessage: NzMessageService, + private Util: Util + ) {} + + @Input() modelParams: any; + @Input() cloudLeasedLineShowFlag: boolean; + @Output() cancelEmitter = new EventEmitter(); + comunicationFormItems = COMMUNICATION_FORM_ITEMS; + validateRulesShow: any[] = []; + isLoadingOne = false; + nodeLists: any[] = []; + cloudPointOptions: any[] = []; + cloud_leased_line_info = { + name: '', + instanceId: '', + accessPointOne: { + name: '', + bandwidth: '' + }, + cloudPointName: '', + }; + + ngOnInit(): void {} + + ngOnChanges() { + if (this.cloudLeasedLineShowFlag) { + if (this.modelParams) { + this.cloud_leased_line_info = { ...this.modelParams }; + } else { + this.getInstanceId(); + } + this.queryAccessNodeInfo(); + } + } + + queryAccessNodeInfo() { + this.myHttp.queryAccessNodeInfo().subscribe( + (response) => { + console.log(response); + }, + (err) => { + console.log(err); + } + ) + } + + getInstanceId() { + this.myHttp.getInstanceId().subscribe( + (response) => { + const { code, message, data} = response; + if (code !== 200) { + this.nzMessage.error(message); + return; + } + this.cloud_leased_line_info.instanceId = data && data.instanceId; + }, + (err) => { + console.log(err); + } + ) + } + + submit(): void { + this.myHttp.createIntentInstance({ + ...this.cloud_leased_line_info + }).subscribe( + (data) => { + console.log(data); + this.cancel(); + }, + (err) => { + console.log(err); + } + ) + } + + cancel(): void { + this.cloudLeasedLineShowFlag = false + this.cloud_leased_line_info = { + name: '', + instanceId: '', + accessPointOne: { + name: '', + bandwidth: '' + }, + cloudPointName: '', + }; + this.cancelEmitter.emit(); + } +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.html b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.html new file mode 100644 index 00000000..331eb7b0 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.html @@ -0,0 +1,99 @@ +
    +
    + + +
    +
    + + + + No + Communication Service Name + Intent Instance ID + Status + {{"i18nTextDefine_Operationbutton" | translate}} + + + + + + {{i+1}} + {{ data.name }} + {{ data.instanceId }} + {{ statusObj[data.status] }} + + + + + + + + + + +
    + + +
    \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.less b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.less new file mode 100644 index 00000000..df2a899e --- /dev/null +++ b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.less @@ -0,0 +1,41 @@ +nz-select { + width: 200px; +} + +.task_status { + margin-bottom: 20px; + + span { + margin-right: 5%; + } +} + +.action-icon { + display: inline-block; + vertical-align: top; +} + +i.anticon { + cursor: pointer; + font-size: 18px; + padding: 2px 15px; + vertical-align: inherit !important; + + &:hover { + color: #147dc2; + } +} + +.cannotclick { + pointer-events: none; + color: #aaa; + opacity: 0.6; +} + +.buy-button { + float: right; + margin-right: 2%; +} +::ng-deep .ant-table-row .buy-button { + float: left; +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.ts b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.ts new file mode 100644 index 00000000..bf046545 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.ts @@ -0,0 +1,132 @@ +import { Component, OnInit } from "@angular/core"; +import { Router } from "@angular/router"; +import { NzMessageService } from "ng-zorro-antd"; +import { intentBaseService } from "../../../../core/services/intentBase.service"; + +@Component({ + selector: 'app-cloud-leased-line', + templateUrl: './cloud-leased-line.component.html', + styleUrls: ['./cloud-leased-line.component.less'] +}) +export class CloudLeasedLineComponent implements OnInit { + + constructor( + private router:Router, + private myHttp: intentBaseService, + private nzMessage: NzMessageService + ) {} + + ngOnChanges() {} + + ngOnInit() { + this.pageIndex = 1; + this.pageSize = 10; + this.getCloudLeasedLineList(); + } + + ngOnDestroy() {} + + statusObj: any = { + 0: 'Incomplete', + 1: 'Completed', + 2: 'Deleted', + 3: 'Inactive' + } + // 列表数据源 + listOfData: any[] = []; + // 分页信息及总数 + pageIndex: number = 1; + pageSize: number = 10; + total: number = 0; + loading = false; + // 控制弹窗展示变量 + cloudLeasedLineShowFlag: boolean = false; + smartCloudLeasedLineShowFlag: boolean = false; + // 初始化查询数据源 + getCloudLeasedLineList(): void { + this.myHttp.getInstanceList({ + currentPage: this.pageIndex, + pageSize: this.pageSize + }).subscribe((response) => { + const { code, message, data } = response; + if (code !== 200) { + this.nzMessage.error(message); + return; + } + this.total = data.totalRecords; + this.listOfData = [...data.list]; + }, (err) => { + console.log(err); + }); + } + // 分页信息变更查询数据 + searchData(): void { + this.getCloudLeasedLineList(); + } + // 解析结果传递到create弹窗 + resolveResult: any; + // 弹窗加载 + cloudLeasedLineShow(): void { + this.cloudLeasedLineShowFlag = true; + } + // 弹窗关闭 + cloudLeasedLineClose(): void { + this.cloudLeasedLineShowFlag = false; + this.pageIndex = 1; + this.pageSize = 10; + this.getCloudLeasedLineList(); + } + // smart 弹窗加载 + smartCloudLeasedLineShow(): void { + this.smartCloudLeasedLineShowFlag = true; + } + // smart 弹窗关闭 + smartCloudLeasedLineClose(data): void { + this.smartCloudLeasedLineShowFlag = false; + if (data.cancel) { + return; + } + this.cloudLeasedLineShowFlag = true; + this.resolveResult = { + name: 'test', + instanceId: '123456', + accessPointOne: { + name: 'aaa', + bandwidth: '20' + }, + cloudPointName: 'aaa', + }; + } + // 跳转监控管理页面 + goMonitorService(): void { + this.router.navigateByUrl('/fcaps/monitor_service'); + } + + activeCloudLeasedLine(row): void { + this.myHttp.activeIntentInstance({ + instanceId: row.instanceId + }).subscribe((data) => { + console.log(data); + }, (err) => { + console.log(err); + }); + } + + inactiveCloudLeasedLine(row): void { + this.myHttp.invalidIntentInstance({ + instanceId: row.instanceId + }).subscribe((data) => { + console.log(data); + }, (err) => { + console.log(err); + }); + } + + deleteCloudLeasedLine(row): void { + this.myHttp.deleteIntentInstance(row.instanceId).subscribe((data) => { + console.log(data); + }, (err) => { + console.log(err); + }); + } +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/constants.ts b/usecaseui-portal/src/app/views/services/intent-based-services/constants.ts new file mode 100644 index 00000000..9a54a49a --- /dev/null +++ b/usecaseui-portal/src/app/views/services/intent-based-services/constants.ts @@ -0,0 +1,49 @@ +export const STATUS_LIST = { + Active: 'Active', + Inactive: 'Inactive' +}; + +export const COMMUNICATION_FORM_ITEMS = [ + /******* + title /MUST/: MARK THE ITEM NAME, + key /MUST/: MARK THE ITEM KEY, + type /MUST/: MARKE THE ITEM TYPE, CAN BE ADDED IF NECESSARY: input/select/radio/city-select + required /MUST/: IF REQUIRED, + scoped: IF SCOPED NUMBERS, CAN BE EMITTED IF NOT + scopedText: SCOPED NUMBERS' DESCRIPTION. IF SCOPED NUMBERS EXITS, IT'S A MUST + placeholder: IF PLACEHOLDER, CAN BE EMITTED IF NOT + options: IF ITEM NEEDS OPTIONS, CAN BE EMITTED IF NOT + ********/ + { + title: "Communication Service Name", + key: "name", + type: "input", + required: true, + }, + { + title: "Intent Instance ID", + key: "instanceId", + type: "text", + required: true, + }, + { + title: "Access Point 1", + nodeName: 'Name', + rateName: 'Bandwidth', + key: "accessPointOne", + type: "node_select_one", + required: true, + }, + { + title: "Cloud Point Name", + key: "cloudPointName", + type: "select", + required: true, + options: [ + { + title: "tranprotEp_ID_ROOT", + key: "tranprotEp_ID_ROOT", + } + ], + }, +]; \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/intent-based-services.component.html b/usecaseui-portal/src/app/views/services/intent-based-services/intent-based-services.component.html new file mode 100644 index 00000000..cd7e0fa7 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/intent-based-services/intent-based-services.component.html @@ -0,0 +1,7 @@ + + + + + \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/intent-based-services.component.less b/usecaseui-portal/src/app/views/services/intent-based-services/intent-based-services.component.less new file mode 100644 index 00000000..e69de29b diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/intent-based-services.component.ts b/usecaseui-portal/src/app/views/services/intent-based-services/intent-based-services.component.ts new file mode 100644 index 00000000..2d6f59d2 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/intent-based-services/intent-based-services.component.ts @@ -0,0 +1,21 @@ +import { Component, HostBinding, OnInit } from '@angular/core'; +import { slideToRight } from '../../../shared/utils/animates'; + +@Component({ + selector: 'app-intent-based-services', + templateUrl: './intent-based-services.component.html', + styleUrls: ['./intent-based-services.component.less'], + animations: [slideToRight] +}) +export class IntentBasedServicesComponent implements OnInit { + + @HostBinding('@routerAnimate') routerAnimateState; + selectedIndex:number = 0; + constructor() { } + + ngOnInit() { + } + handleTabChange($event): void { + this.selectedIndex = $event.index; + } +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.html b/usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.html new file mode 100644 index 00000000..2ad1cea2 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.html @@ -0,0 +1,42 @@ + +
    + + + + +
    + + + + {{rulesText[0]}} + + + +
    +
    +
    + Sound Recording : + + + +
    +
    + Audition : + + +
    +
    +
    +     diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.less b/usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.less new file mode 100644 index 00000000..50d3af28 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.less @@ -0,0 +1,53 @@ +.subnet_params_container{ + padding-left: 3%; + .subnet_params_area{ + margin-right: 5px; + } + .ant-btn-icon-only{ + padding: 0 5px !important; + } + .subnet_params_button{ + margin-top: 7px; + margin-left: 10px; + } + .subnet_params_icon{ + font-size: 14px; + } + .audio_class{ + height: 130px; + .recode_class{ + margin-top: 30px; + position: relative; + span{ + font-size: 17px; + } + .audioBtn{ + font-size: 20px; + position: absolute; + top: 5px; + left: 142px; + } + .anticon-pause-circle-o{ + color: red; + } + } + .play_class{ + font-size: 17px; + margin-top: 20px; + button { + margin-left: 2px; + } + } + } +} +.ant-form-item { + margin-top: 20px; + margin-bottom: -5px; +} + +.validateRules{ + color: red; +} +.error-input-border{ + border-color: red!important; +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.spec.ts b/usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.spec.ts new file mode 100644 index 00000000..ffdd130f --- /dev/null +++ b/usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { InputBusinessOrderComponent } from './input-business-order.component'; + +describe('InputBusinessOrderComponent', () => { + let component: InputBusinessOrderComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ InputBusinessOrderComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(InputBusinessOrderComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.ts b/usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.ts new file mode 100644 index 00000000..014a1c4c --- /dev/null +++ b/usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.ts @@ -0,0 +1,90 @@ +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { NzMessageService } from 'ng-zorro-antd'; +import { intentBaseService } from '../../../../core/services/intentBase.service'; +import { Recorder } from '../../../../shared/utils/recorder'; +import { Util } from '../../../../shared/utils/utils'; + +@Component({ + selector: 'app-smart-cloud-leased-modal', + templateUrl: './smart-cloud-leased-modal.component.html', + styleUrls: ['./smart-cloud-leased-modal.component.less'] +}) +export class SmartCloudLeasedModalComponent implements OnInit { + + constructor( + private Util: Util, + private Recorder: Recorder, + private myhttp: intentBaseService, + private msg: NzMessageService + ) {} + + @Input() samrtCloudLeasedLineShowFlag: boolean; + @Output() resolveEmitter = new EventEmitter(); + + communicationMessage: String = ""; + validateRulesShow: any[] = []; + rulesText: any[] = []; + radioValue: String = 'text'; + isPlay: boolean = false; + clickRepeat: boolean = false; + isDisable: boolean = true; + + ngOnInit() { + this.validateRulesShow = []; + this.rulesText = []; + this.communicationMessage = ''; + } + + ngOnChange() {} + + handleCancel(flag): void { + this.samrtCloudLeasedLineShowFlag = false; + this.communicationMessage = ""; + this.resolveEmitter.emit({ "cancel": flag }); + } + + handleOk(): void { + if (this.radioValue === 'text') { + this.submitFormMessage(); + return; + } + + } + + submitFormAudio() { + this.handleCancel(false); + } + + submitFormMessage(): void { + let params = { +     "title": "predict", +     "text": this.communicationMessage + }; + this.myhttp.intentInstancePredict(params).subscribe( + (response) => { + console.log(response); + this.handleCancel(false); + }, + (err) => { + console.log(err); + } + ) + } + + startAudio(): void { + this.isPlay = true; + this.isDisable = true; + this.Recorder.beforeStartRecord(); + } + + stopAudio(): void { + this.isPlay = false; + this.isDisable = false; + this.Recorder.stopRecord(); + } + + playAudio(): void { + let audio = document.querySelector('audio'); + audio["src"] = this.Recorder.playRecord(); + } +} diff --git a/usecaseui-portal/src/assets/i18n/cn.json b/usecaseui-portal/src/assets/i18n/cn.json index 0c2f55bf..fc02bb7b 100644 --- a/usecaseui-portal/src/assets/i18n/cn.json +++ b/usecaseui-portal/src/assets/i18n/cn.json @@ -8,6 +8,7 @@ "i18nTextDefine_ServicesList": "服务列表", "i18nTextDefine_SotnEline": "SOTN Eline", "i18nTextDefine_Mangement_5g": "5G切片管理", + "i18nTextDefine_IntentBasedServices": "Intent-based Services", "i18nTextDefine_PackageManagement": "包管理", "i18nTextDefine_Alarm": "告警", "i18nTextDefine_Performance": "性能", @@ -42,6 +43,7 @@ "i18nTextDefine_Description":"描述", "i18nTextDefine_UseCase":"场景用例", "i18nTextDefine_Status":"状态", + "i18nTextDefine_Type": "类型", "i18nTextDefine_Action":"动作", "i18nTextDefine_Template":"模板", "i18nTextDefine_Orchestrator":"编排器", @@ -167,6 +169,7 @@ "i18nTextDefine_orderService":"订购服务", "i18nTextDefine_monitorService":"监控服务", "i18nTextDefine_manageService":"管理服务", + "i18nTextDefine_cloudLeasedLine":"Cloud Leased Line", "mdons-network-component":"--:", diff --git a/usecaseui-portal/src/assets/i18n/en.json b/usecaseui-portal/src/assets/i18n/en.json index 427e4944..10218f47 100644 --- a/usecaseui-portal/src/assets/i18n/en.json +++ b/usecaseui-portal/src/assets/i18n/en.json @@ -8,6 +8,7 @@ "i18nTextDefine_ServicesList": "Lifecycle Management", "i18nTextDefine_SotnEline": "SOTN Eline", "i18nTextDefine_Mangement_5g": "5G Slicing Management", + "i18nTextDefine_IntentBasedServices": "Intent-based Services", "i18nTextDefine_PackageManagement": "Package Management", "i18nTextDefine_Alarm": "Alarm", "i18nTextDefine_Performance": "Performance", @@ -41,6 +42,7 @@ "i18nTextDefine_Description":"Description", "i18nTextDefine_UseCase":"Use Case", "i18nTextDefine_Status":"Status", + "i18nTextDefine_Type": "Type", "i18nTextDefine_Action":"Action", "i18nTextDefine_Template":"Template", "i18nTextDefine_Orchestrator":"Orchestrator", @@ -161,6 +163,7 @@ "i18nTextDefine_orderService":"Order Service", "i18nTextDefine_monitorService":"Monitor Service", "i18nTextDefine_manageService":"Manage Service", + "i18nTextDefine_cloudLeasedLine":"Cloud Leased Line", "mdons-network-component":"--:", -- cgit 1.2.3-korg