*/
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';
{ 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 },
<li nz-menu-item [ngClass]="{'activeMenuList': url === 'services/slicing-management'}">
<a routerLink='services/slicing-management'> {{"i18nTextDefine_Mangement_5g" | translate}} </a>
</li>
+ <!-- Intent-based Services -->
+ <li nz-menu-item [ngClass]="{'activeMenuList': url === 'services/intent-based-services'}">
+ <a routerLink='services/intent-based-services'> {{"i18nTextDefine_IntentBasedServices" | translate}} </a>
+ </li>
</ul>
</li>
<hr>
<li nz-menu-item [ngClass]="{'activeMenuList': url === 'fcaps/5gslicing'}">
<a routerLink='fcaps/5gslicing'> {{"i18nTextDefine_Monitor_5g" | translate}} </a>
</li>
+ <li nz-menu-item [ngClass]="{'activeMenuList': url === 'fcaps/monitor_service'}">
+ <a routerLink='fcaps/monitor_service'> {{"i18nTextDefine_monitorService" | translate}} </a>
+ </li>
</ul>
</li>
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: [
ServiceListService,
HomesService,
onboardService,
+ intentBaseService,
networkHttpservice,
ManagemencsService,
TextService,
ManagementComponent,
ServicesListComponent,
OnboardVnfVmComponent,
+ NlpUploadDialogComponent,
AlarmComponent,
ScaleModelComponent,
HealModelComponent,
Monitor5gComponent,
+ MonitorManagementService,
+ MonitorFacpsServiceComponent,
+ IntentBasedServicesComponent,
+ CloudLeasedLineComponent,
+ CloudLeasedLineModalComponent,
+ SmartCloudLeasedModalComponent,
SlicingManagementComponent,
SlicingTaskManagementComponent,
SlicingResourceManagementComponent,
--- /dev/null
+/*
+ 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<any>(this.url["getInstanceId"]);
+ }
+
+ createIntentInstance(requestBody) {
+ return this.http.post<any>(this.url["createIntentInstance"], requestBody);
+ }
+
+ getInstanceList(requestBody) {
+ return this.http.post<any>(this.url["getInstanceList"], requestBody);
+ }
+
+ queryInstancePerformanceData(requestBody) {
+ return this.http.post<any>(this.url["queryInstancePerformanceData"], requestBody);
+ }
+
+ getFinishedInstanceInfo() {
+ return this.http.get<any>(this.url["getFinishedInstanceInfo"]);
+ }
+
+ deleteIntentInstance(instanceId) {
+ let params = new HttpParams({ fromObject: { "instanceId": instanceId } });
+ return this.http.delete<any>(this.url.deleteIntentInstance, { params });
+ }
+
+ activeIntentInstance(requestBody) {
+ return this.http.post<any>(this.url["activeIntentInstance"], requestBody);
+ }
+
+ invalidIntentInstance(requestBody) {
+ return this.http.post<any>(this.url["invalidIntentInstance"], requestBody);
+ }
+
+ queryAccessNodeInfo() {
+ return this.http.get<any>(this.url["queryAccessNodeInfo"]);
+ }
+
+ intentInstancePredict(requestBody) {
+ return this.http.post<any>(this.url["intentInstancePredict"], requestBody);
+ }
+}
--- /dev/null
+<div class="main">
+ <div class="divCls">
+ <table>
+ <tr>
+ <td>
+ <nz-form-label class= "colm-s-1 lblCls" [nzSm]="6" [nzXs]="24" nzRequired nzFor="capacity">FinishedInstance</nz-form-label>
+ </td>
+ <td>
+ <nz-select
+ id="subscriptionType"
+ class= "colm-s-2"
+ [(ngModel)]="instanceId"
+ (ngModelChange)="queryInstancePerformance($event)"
+ nzAllowClear
+ >
+ <nz-option
+ *ngFor="let option of instanceLists"
+ [nzValue]="option.instanceId"
+ [nzLabel]="option.name"
+ ></nz-option>
+ </nz-select>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <div class="flexDiv">
+ <div class="topocontainer">
+ <div
+ id="chartLine"
+ echarts
+ [initOpts]="initOpts"
+ [options]="lineOption"
+ [merge]="updateOption"
+ (chartInit)="chartInit($event)">
+ Line Chart
+ </div>
+ </div>
+ </div>
+</div>
\ No newline at end of file
--- /dev/null
+#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;
+ }
+
--- /dev/null
+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);
+ }
+ )
+ }
+
+}
--- /dev/null
+<nz-tabset class="slicing">
+ <nz-tab [nzTitle]="'i18nTextDefine_monitorService' | translate">
+ <app-monitor-facps-service></app-monitor-facps-service>
+ </nz-tab>
+</nz-tabset>
\ No newline at end of file
--- /dev/null
+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
--- /dev/null
+<nz-modal
+ [(nzVisible)]="isShowFlag"
+ nzTitle="NLP Model Type"
+ (nzOnCancel)="handleCancel()"
+ (nzOnOk)="handleOk()"
+ nzWidth="450px"
+ nzHeight="600px"
+>
+ <div class="subnet_params_container">
+ <form nz-form class='text-form-class'>
+ <nz-form-item>
+ <nz-form-label
+ [nzSpan]="7"
+ [nzFor]="nlpType"
+ >
+ Type
+ </nz-form-label>
+ <nz-form-control [nzSpan]="10">
+ <nz-select
+ [name]="nlpType"
+ [(ngModel)]="nlpType"
+ >
+ <nz-option nzValue="nlp" nzLabel="nlp"></nz-option>
+ <nz-option nzValue="intent" nzLabel="intent"></nz-option>
+ </nz-select>
+ </nz-form-control>
+ </nz-form-item>
+ </form>
+ </div>
+</nz-modal>
--- /dev/null
+.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
--- /dev/null
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InputBusinessOrderComponent } from './input-business-order.component';
+
+describe('InputBusinessOrderComponent', () => {
+ let component: InputBusinessOrderComponent;
+ let fixture: ComponentFixture<InputBusinessOrderComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ InputBusinessOrderComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(InputBusinessOrderComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
--- /dev/null
+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 });
+ }
+
+}
</thead>
<thead *ngIf="currentTab === 'NLP Model Reource'">
<tr class="theadColor">
- <th nzWidth="8%"> {{"i18nTextDefine_NO" | translate}} </th>
- <th nzWidth="18%"> {{"i18nTextDefine_Name" | translate}} </th>
- <th nzWidth="18%"> {{"i18nTextDefine_Size" | translate}} </th>
- <th nzWidth="18%"> {{"i18nTextDefine_CreateTime" | translate}} </th>
- <th nzWidth="18%"> {{"i18nTextDefine_Status" | translate}} </th>
+ <th nzWidth="5%"> {{"i18nTextDefine_NO" | translate}} </th>
+ <th nzWidth="15%"> {{"i18nTextDefine_Name" | translate}} </th>
+ <th nzWidth="15%"> {{"i18nTextDefine_Size" | translate}} </th>
+ <th nzWidth="15%"> {{"i18nTextDefine_CreateTime" | translate}} </th>
+ <th nzWidth="15%"> {{"i18nTextDefine_Status" | translate}} </th>
+ <th nzWidth="15%"> {{"i18nTextDefine_Type" | translate}} </th>
<th nzWidth="20%"> {{"i18nTextDefine_Operation" | translate}} </th>
</tr>
</thead>
<td>{{item.size}}</td>
<td>{{item.createTime}}</td>
<td>{{item.active ? 'Active' : 'Inactive'}}</td>
+ <td>{{item.type || '--'}}</td>
<td>
<button nz-button nzType="primary" class="buy-button" (click)="showDeleteConfirm(item.id)">
Delete
</nz-table>
</nz-spin>
</div>
+<app-nlp-upload-dialog
+ [isShowFlag]="nlpDialogFlag"
+ (returnNlpType)="receiveNlpType($event)"
+></app-nlp-upload-dialog>
<app-notification #notification [isServicesList]="false"></app-notification>
\ No newline at end of file
limitations under the License.
*/
import { HttpClient, HttpRequest, HttpResponse } from '@angular/common/http';
-import { Component, OnInit, HostBinding, ViewChild } from '@angular/core';
+import { Component, HostBinding, OnInit, ViewChild } from '@angular/core';
+import { NzMessageService, NzModalService, UploadFile } from 'ng-zorro-antd';
+import { filter } from 'rxjs/operators';
import { onboardService } from '../../core/services/onboard.service';
import { slideToRight } from '../../shared/utils/animates';
-import { NzMessageService, UploadFile, NzModalService } from 'ng-zorro-antd';
-import { filter } from 'rxjs/operators';
@Component({
selector: 'app-onboard-vnf-vm',
infoId: string;
display: string = 'block';
+ // nlp dialog
+ nlpDialogFlag: boolean = false;
+ nlpType: string = '';
+
// table
isSpinning: boolean = false;
nsTableData: any[];
model: '/api/usecaseui-server/v1/intent/uploadModel'
};
+ tabMap = {
+ NS: 'ns',
+ VNF: 'vnf',
+ PNF: 'pnf',
+ 'NLP Model Reource': 'model',
+ }
+
+ currentTabApi = {
+ NS: 'createNetworkServiceData',
+ VNF: 'createVnfData',
+ PNF: 'createPnfData',
+ 'NLP Model Reource': '',
+ }
+
file: {
name: string,
uid: string,
beforeUpload = (file: UploadFile): boolean => {
this.fileList.splice(0, 1, file);
- let API: string;
- if (this.currentTab === 'NS') {
- API = 'createNetworkServiceData';
- } else if (this.currentTab === 'VNF') {
- API = 'createVnfData';
- } else if (this.currentTab === 'PNF') {
- API = 'createPnfData';
- } else {
+ let API: string = this.currentTabApi[this.currentTab];
+
+ if (!API) {
return false;
}
- this.myhttp.getCreatensData(API, this.requestBody)//on-line
+
+ this.myhttp.getCreatensData(API, this.requestBody)
.subscribe((data) => {
this.infoId = data["id"];
}, (err) => {
console.log(err);
- })
+ });
+
return false;
}
+ onClick() {
+ if (this.currentTab === 'NLP Model Reource') {
+ this.nlpDialogFlag = true;
+ return;
+ }
+ this.startUploadFile();
+ }
+
+ receiveNlpType(data) {
+ this.nlpDialogFlag = false;
+ if (data.cancel) {
+ return;
+ }
+ this.nlpType = data.nlpType;
+ this.startUploadFile();
+ }
+
// Drag and drop and click the upload button
- onClick(): void {
+ startUploadFile(): void {
this.display = 'none';
- let tab = this.currentTab === 'NS' ? 'ns' : (this.currentTab === 'VNF' ? 'vnf' : (this.currentTab === 'PNF' ? 'pnf' : 'model'));
- let url = tab === "model" ? this.url[tab] : this.url[tab].replace("*_*", this.infoId);
- tab === "model" ? this.handleUploadModel(url) : this.handleUpload(url);
+ let tab = this.tabMap[this.currentTab];
+ let url;
+ if (tab === "model") {
+ url = this.url[tab];
+ this.handleUploadModel(url);
+ return;
+ }
+ url = this.url[tab].replace("*_*", this.infoId);
+ this.handleUpload(url);
}
handleUploadModel(url: string): void {
this.isSpinning = true;
//ns vfc lists
this.myhttp.getOnboardTableData()
- .subscribe((data) => {
- this.nsTableData = data;
- //ns sdc list
- this.myhttp.getSDC_NSTableData()
- .subscribe((data) => {
- this.isSpinning = false; //loading hide
- let nsData = data;
- // this.NSTableData.map((nsvfc) => { nsvfc.sameid = nsData.find((nssdc) => { return nsvfc.id == nssdc.uuid }) && nsvfc.id; return nsvfc; });
- let sameData = nsData.filter((nssdc) => { return !this.nsTableData.find((nsvfc) => { return nsvfc.id == nssdc.uuid }) });
- this.nsTableData = this.nsTableData.concat(sameData);
- }, (err) => {
- this.msg.error(err);
- this.isSpinning = false;
- })
- }, (err) => {
- this.msg.error(err);
- this.isSpinning = false;
- })
+ .subscribe(
+ (data) => {
+ this.nsTableData = data;
+ //ns sdc list
+ this.myhttp.getSDC_NSTableData()
+ .subscribe(
+ (data) => {
+ this.isSpinning = false; //loading hide
+ if (!data) {
+ return;
+ }
+ let nsData = data;
+ let sameData = nsData.filter((nssdc) => {
+ return !this.nsTableData.find((nsvfc) => {
+ return nsvfc.id == nssdc.uuid
+ })
+ });
+ this.nsTableData = this.nsTableData.concat(sameData);
+ },
+ (err) => {
+ this.msg.error(err);
+ this.isSpinning = false;
+ }
+ )
+ },
+ (err) => {
+ this.msg.error(err);
+ this.isSpinning = false;
+ }
+ )
}
// Get the vnf list
// Actived Model Resource
activedModelFile(data) {
- console.log('actived model');
let url = `/api/usecaseui-server/v1/intent/activeModel?modelId=${data.id}`;
this.myhttp.getOnboardTableActiveModelData(url)
.subscribe((data) => {
--- /dev/null
+<nz-modal
+ [(nzVisible)]="cloudLeasedLineShowFlag"
+ nzTitle="Create Cloud Leased Line"
+ (nzOnCancel)="cancel()"
+ nzWidth="70%"
+ [nzFooter]="modalFooter"
+>
+ <div class="subnet_params_container">
+ <form nz-form>
+ <nz-form-item *ngFor="let item of comunicationFormItems; let i = index">
+ <nz-form-label
+ [nzSpan]="7"
+ [nzRequired]="item.required"
+ [nzFor]=" item.key"
+ >
+ {{ item.title }}
+ </nz-form-label>
+ <nz-form-control [nzSpan]="10">
+ <div *ngIf="item.type === 'text'">{{cloud_leased_line_info[item.key]}}</div>
+ <nz-tooltip
+ [nzTitle]="item.scoped && item.scopedText ? item.scopedText : ''"
+ [nzPlacement]="'right'"
+ [nzTrigger]="'focus'"
+ >
+ <input
+ nz-input
+ nz-tooltip
+ [id]="item.key"
+ [name]="item.key"
+ *ngIf="item.type === 'input'"
+ [(ngModel)]="cloud_leased_line_info[item.key]"
+ [ngClass]="{'error-input-border' : validateRulesShow[i] === true}"
+ [placeholder]="item.placeholder ? item.placeholder : ''"
+ (blur)="item.required ? this.Util.validator(item.title,item.key,cloud_leased_line_info[item.key],i,rulesText,validateRulesShow) : this.Util.validator()"
+ />
+ </nz-tooltip>
+ <nz-select
+ [name]="item.key"
+ [(ngModel)]="cloud_leased_line_info[item.key]"
+ *ngIf="item.type === 'select'"
+ >
+ <nz-option
+ [nzValue]="option.key"
+ [nzLabel]="option.title"
+ *ngFor="let option of cloudPointOptions"
+ >
+ </nz-option>
+ </nz-select>
+ <div *ngIf="item.type === 'node_select_one'">
+ <div>
+ <span>{{item.rateName}}:</span>
+ <input
+ nz-input
+ nz-tooltip
+ [id]="item.key"
+ [name]="item.key"
+ [(ngModel)]="cloud_leased_line_info[item.key].bandwidth"
+ [ngClass]="{'error-input-border' : validateRulesShow[i] === true}"
+ [placeholder]="item.placeholder ? item.placeholder : ''"
+ (blur)="item.required ? this.Util.validator(item.title,item.key,cloud_leased_line_info[item.key],i,rulesText,validateRulesShow) : this.Util.validator()"
+ />
+ </div>
+ <div>
+ <span>{{item.nodeName}}:</span>
+ <nz-select
+ [name]="item.key"
+ [(ngModel)]="cloud_leased_line_info[item.key].name"
+ >
+ <nz-option
+ [nzValue]="option.key"
+ [nzLabel]="option.title"
+ *ngFor="let option of nodeLists"
+ >
+ </nz-option>
+ </nz-select>
+ </div>
+ </div>
+ </nz-form-control>
+ </nz-form-item>
+ </form>
+ </div>
+ <ng-template #modalFooter>
+ <button nz-button nzType="default" (click)="cancel()">Cancel</button>
+ <button nz-button nzType="primary" (click)="submit()" [nzLoading]="loading">OK</button>
+ </ng-template>
+</nz-modal>
\ No newline at end of file
--- /dev/null
+.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
--- /dev/null
+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<boolean>();
+ 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
--- /dev/null
+<div>
+ <div nz-row>
+ <button
+ nz-button
+ nzType="primary"
+ class="buy-button"
+ (click)="cloudLeasedLineShow()"
+ >
+ Create
+ </button>
+ <button
+ nz-button
+ nzType="primary"
+ class="buy-button"
+ (click)="smartCloudLeasedLineShow()"
+ >
+ Smart Create
+ </button>
+ </div>
+ <div class="slicing-resource-table-list">
+ <nz-table
+ #basicTable [nzData]="listOfData"
+ [nzFrontPagination]="false"
+ nzShowSizeChanger
+ [nzPageSizeOptions]="[5,10,15,20]"
+ [nzTotal]='total'
+ [(nzPageSize)]="pageSize"
+ [(nzPageIndex)]='pageIndex'
+ [nzLoading]="loading"
+ (nzPageIndexChange)="searchData()"
+ (nzPageSizeChange)="searchData()"
+ >
+ <thead>
+ <tr>
+ <th nzWidth="6%">No</th>
+ <th nzWidth="15%">Communication Service Name</th>
+ <th nzWidth="10%">Intent Instance ID</th>
+ <th nzWidth="6%">Status</th>
+ <th nzWidth="20%">{{"i18nTextDefine_Operationbutton" | translate}}</th>
+ </tr>
+ </thead>
+ <tbody>
+ <ng-template ngFor let-data [ngForOf]="basicTable.data" let-i="index">
+ <tr>
+ <td>{{i+1}}</td>
+ <td>{{ data.name }}</td>
+ <td>{{ data.instanceId }}</td>
+ <td>{{ statusObj[data.status] }}</td>
+ <td>
+ <button
+ nz-button
+ nzType="primary"
+ class="buy-button"
+ (click)="goMonitorService()"
+ >
+ Intent Monitor
+ </button>
+ <button
+ *ngIf="data.status === '3'"
+ nz-button
+ nzType="primary"
+ class="buy-button"
+ (click)="activeCloudLeasedLine(data)"
+ >
+ Active
+ </button>
+ <button
+ *ngIf="data.status === '1'"
+ nz-button
+ nzType="primary"
+ class="buy-button"
+ (click)="inactiveCloudLeasedLine(data)"
+ >
+ Inactive
+ </button>
+ <button
+ nz-button
+ nzType="primary"
+ class="buy-button"
+ (click)="deleteCloudLeasedLine(data)"
+ >
+ Delete
+ </button>
+ </td>
+ </tr>
+ </ng-template>
+ </tbody>
+ </nz-table>
+ </div>
+ <app-smart-cloud-leased-modal
+ [samrtCloudLeasedLineShowFlag]="smartCloudLeasedLineShowFlag"
+ (resolveEmitter)="smartCloudLeasedLineClose($event)"
+ ></app-smart-cloud-leased-modal>
+ <app-cloud-leased-line-modal
+ [modelParams]="resolveResult"
+ [cloudLeasedLineShowFlag]="cloudLeasedLineShowFlag"
+ (cancelEmitter)="cloudLeasedLineClose()"
+ ></app-cloud-leased-line-modal>
+</div>
\ No newline at end of file
--- /dev/null
+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
--- /dev/null
+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
--- /dev/null
+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
--- /dev/null
+<nz-tabset [nzSelectedIndex]="selectedIndex" (nzSelectChange)="handleTabChange($event)" class="slicing">
+ <nz-tab [nzTitle]="'i18nTextDefine_cloudLeasedLine' | translate">
+ <app-cloud-leased-line
+ *ngIf="selectedIndex === 0"
+ ></app-cloud-leased-line>
+ </nz-tab>
+</nz-tabset>
\ No newline at end of file
--- /dev/null
+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
--- /dev/null
+<nz-modal
+ [(nzVisible)]="samrtCloudLeasedLineShowFlag"
+ nzTitle="Create Cloud Leased Line"
+ (nzOnCancel)="handleCancel(true)"
+ (nzOnOk)="handleOk()"
+ nzWidth="450px"
+ nzHeight="600px"
+>
+ <div class="subnet_params_container">
+ <nz-radio-group [(ngModel)]="radioValue">
+ <label nz-radio nzValue="text">Text Input</label>
+ <label nz-radio nzValue="audio">Audio Input</label>
+ </nz-radio-group>
+ <form nz-form *ngIf='radioValue === "text"' class='text-form-class'>
+ <nz-form-item>
+ <nz-form-control [nzSpan]="24">
+ <textarea [id]="communicationMessage" nz-tooltip
+ [ngClass]="{'error-input-border':validateRulesShow[0] === true}" nz-input
+ placeholder="Please input communicationMessage" [nzAutosize]="{ minRows: 6, maxRows: 6 }"
+ [(ngModel)]="communicationMessage" name="communicationMessage"
+ (blur)="this.Util.validator('communicationMessage','communicationMessage',communicationMessage,0,rulesText,validateRulesShow)">
+ </textarea>
+ <nz-form-explain *ngIf="validateRulesShow[0]" class="validateRules">{{rulesText[0]}}
+ </nz-form-explain>
+ </nz-form-control>
+ </nz-form-item>
+ </form>
+ <div *ngIf='radioValue === "audio"' class="audio_class">
+ <div class="recode_class">
+ <span>Sound Recording : </span>
+ <i *ngIf='!isPlay' class="anticon anticon-play-circle-o audioBtn" (click)="startAudio()"></i>
+ <i *ngIf='isPlay' class="anticon anticon-pause-circle-o audioBtn" (click)="stopAudio()"></i>
+
+ </div>
+ <div class="play_class">
+ <span>Audition : </span>
+ <button nz-button nzType="default" [disabled]='isDisable' (click)="playAudio()">Click To Play</button>
+ <audio class="audio-node" id="audio_id" autoplay></audio>
+ </div>
+ </div>
+ </div>
+</nz-modal>
--- /dev/null
+.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
--- /dev/null
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InputBusinessOrderComponent } from './input-business-order.component';
+
+describe('InputBusinessOrderComponent', () => {
+ let component: InputBusinessOrderComponent;
+ let fixture: ComponentFixture<InputBusinessOrderComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ InputBusinessOrderComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(InputBusinessOrderComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
--- /dev/null
+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();
+ }
+}
"i18nTextDefine_ServicesList": "服务列表",
"i18nTextDefine_SotnEline": "SOTN Eline",
"i18nTextDefine_Mangement_5g": "5G切片管理",
+ "i18nTextDefine_IntentBasedServices": "Intent-based Services",
"i18nTextDefine_PackageManagement": "包管理",
"i18nTextDefine_Alarm": "告警",
"i18nTextDefine_Performance": "性能",
"i18nTextDefine_Description":"描述",
"i18nTextDefine_UseCase":"场景用例",
"i18nTextDefine_Status":"状态",
+ "i18nTextDefine_Type": "类型",
"i18nTextDefine_Action":"动作",
"i18nTextDefine_Template":"模板",
"i18nTextDefine_Orchestrator":"编排器",
"i18nTextDefine_orderService":"订购服务",
"i18nTextDefine_monitorService":"监控服务",
"i18nTextDefine_manageService":"管理服务",
+ "i18nTextDefine_cloudLeasedLine":"Cloud Leased Line",
"mdons-network-component":"--:",
"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",
"i18nTextDefine_Description":"Description",
"i18nTextDefine_UseCase":"Use Case",
"i18nTextDefine_Status":"Status",
+ "i18nTextDefine_Type": "Type",
"i18nTextDefine_Action":"Action",
"i18nTextDefine_Template":"Template",
"i18nTextDefine_Orchestrator":"Orchestrator",
"i18nTextDefine_orderService":"Order Service",
"i18nTextDefine_monitorService":"Monitor Service",
"i18nTextDefine_manageService":"Manage Service",
+ "i18nTextDefine_cloudLeasedLine":"Cloud Leased Line",
"mdons-network-component":"--:",
Code Review / usecase-ui.git / commitdiff