feat: change the main menu to face the nsmf requirement

Change-Id: I1c835e2798d91a929fb8aac54ff30229a0b85ee5
Issue-ID: USECASEUI-352
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

17 files changed, 184 insertions, 63 deletions

diff --git a/usecaseui-portal/src/app/app-routing.module.ts b/usecaseui-portal/src/app/app-routing.module.ts
index 55a2c5ba..8c8bf2e8 100644
--- a/usecaseui-portal/src/app/app-routing.module.ts
+++ b/usecaseui-portal/src/app/app-routing.module.ts
@@ -20,8 +20,10 @@ import { RouterModule, Routes } from '@angular/router';
 import { HomeComponent } from './views/home/home.component';
 import { ManagementComponent } from './views/management/management.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 { OnboardVnfVmComponent } from './views/services/onboard-vnf-vm/onboard-vnf-vm.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';
@@ -45,8 +47,11 @@ const routes: Routes = [
   { path: 'home', component: HomeComponent },
   { path: 'management', component: ManagementComponent },
   { path: 'fcaps', component: FcapsComponent },
+  { path: 'fcaps/5gslicing', component: Monitor5gComponent },
   { path: 'services/services-list', component: ServicesListComponent },
-  { path: 'services/onboard-vnf-vm', component: OnboardVnfVmComponent },
+  { path: 'services/slicing-management', component: SlicingManagementComponent },
+  // { path: 'services/onboard-vnf-vm', component: OnboardVnfVmComponent },
+  { path: 'onboard-vnf-vm', component: OnboardVnfVmComponent },
   { path: 'alarm', component: AlarmComponent },
   { path: 'performance', component: PerformanceComponent },
   { path: 'performance/performance-vnf', component: PerformanceVnfComponent },
diff --git a/usecaseui-portal/src/app/app.component.html b/usecaseui-portal/src/app/app.component.html
index 385c4990..c64bf307 100644
--- a/usecaseui-portal/src/app/app.component.html
+++ b/usecaseui-portal/src/app/app.component.html
@@ -57,43 +57,62 @@
           {{"i18nTextDefine_Services" | translate}}
         </span>
         <ul>
+          <!-- all kinds of package management -->
           <li nz-menu-item [ngClass]="{'activeMenuList': url === 'services/services-list'}">
             <a routerLink='services/services-list'> {{"i18nTextDefine_ServicesList" | translate}} </a>
           </li>
-          <li nz-menu-item [ngClass]="{'activeMenuList': url === 'services/onboard-vnf-vm'}">
-            <a routerLink='services/onboard-vnf-vm'> {{"i18nTextDefine_PackageManagement" | translate}} </a>
+          <!-- 5g slicing management -->
+          <li nz-menu-item [ngClass]="{'activeMenuList': url === 'services/slicing-management'}">
+            <a routerLink='services/slicing-management'> {{"i18nTextDefine_Mangement_5g" | translate}} </a>
           </li>
         </ul>
       </li>
       <hr>
       <!-- package page -->
-      <!-- network page -->
-      <li nz-menu-item [ngClass]="{'activeMenuBar': url === 'network'}">
-        <a routerLink="network">
+      <li nz-menu-item [ngClass]="{'activeMenuBar': url === 'onboard-vnf-vm'}">
+        <a routerLink="onboard-vnf-vm">
           <span title>
             <i>
               <img
-                src="{{url === 'network' ? 'assets/images/network-icon-active.png':'assets/images/network-icon.png'}}"
+                src="{{url === 'onboard-vnf-vm' ? 'assets/images/customer-icon-active.png':'assets/images/customer-icon.png'}}"
                 alt="home">
             </i>
-            <span> {{"i18nTextDefine_NetworkTopology" | translate}} </span>
+            <span>{{"i18nTextDefine_PackageManagement" | translate}} </span>
           </span>
         </a>
       </li>
       <hr>
-      <!-- monitor page -->
-      <li nz-menu-item [ngClass]="{'activeMenuBar': url === 'fcaps'}">
-        <a routerLink="fcaps">
+      <!-- network page -->
+      <li nz-menu-item [ngClass]="{'activeMenuBar': url === 'network'}">
+        <a routerLink="network">
           <span title>
             <i>
-              <img src="{{ url === 'fcaps' ? 'assets/images/monitor-icon-active.png':'assets/images/monitor-icon.png'}}"
+              <img
+                src="{{url === 'network' ? 'assets/images/network-icon-active.png':'assets/images/network-icon.png'}}"
                 alt="home">
             </i>
-            <span> {{"i18nTextDefine_Monitor" | translate}} </span>
+            <span> {{"i18nTextDefine_NetworkTopology" | translate}} </span>
           </span>
         </a>
       </li>
       <hr>
+      <!-- monitor page -->
+      <li nz-submenu [ngClass]="{'activeMenuBar': url.indexOf('fcaps') === 0}" [nzOpen]="monitorflag">
+        <span title>
+          <i>
+            <img src="{{ url === 'fcaps' ? 'assets/images/monitor-icon-active.png':'assets/images/monitor-icon.png'}}"
+              alt="home">
+          </i>
+          <span> {{"i18nTextDefine_Monitor" | translate}} </span>
+        </span>
+        <ul>
+          <li nz-menu-item [ngClass]="{'activeMenuList': url === 'fcaps/5gslicing'}">
+            <a routerLink='fcaps/5gslicing'> {{"i18nTextDefine_Monitor_5g" | translate}} </a>
+          </li>
+        </ul>
+
+      </li>
+      <hr>
     </ul>
   </nz-sider>
   <nz-layout class="main">
diff --git a/usecaseui-portal/src/app/app.component.ts b/usecaseui-portal/src/app/app.component.ts
index d8dad5f9..90d5606f 100644
--- a/usecaseui-portal/src/app/app.component.ts
+++ b/usecaseui-portal/src/app/app.component.ts
@@ -13,33 +13,33 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 */
-import {Component} from '@angular/core';
-import {TranslateService} from '@ngx-translate/core';
-import {ServiceListService} from "./core/services/serviceList.service";
-import {HomesService} from "./core/services/homes.service";
-import {NavigationEnd, Router} from '@angular/router';
+import { Component } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { ServiceListService } from "./core/services/serviceList.service";
+import { HomesService } from "./core/services/homes.service";
+import { NavigationEnd, Router } from '@angular/router';
 import 'rxjs/add/operator/map';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.less']
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.less']
 })
 export class AppComponent {
 
-    public url:string = 'home';
-    constructor(private translate: TranslateService,private myhttp: HomesService,private router:Router,) {
+    public url: string = 'home';
+    constructor(private translate: TranslateService, private myhttp: HomesService, private router: Router, ) {
         this.currentLanguageGet();
         this.getUrl();
     }
 
     // Get the current routing path
-    getUrl(){
-        this.router.events.map(event=> {
-            if(event instanceof NavigationEnd){
+    getUrl() {
+        this.router.events.map(event => {
+            if (event instanceof NavigationEnd) {
                 this.url = event['urlAfterRedirects'].slice(1)
             }
-        }).subscribe(event=>{})
+        }).subscribe(event => { })
     }
 
     //209.05.08 Get the currentLanguage
@@ -51,28 +51,35 @@ export class AppComponent {
             this.myhttp.getCurrentLanguage(this.currentloginId)
                 .subscribe(
                     (data) => {
-                        console.log(data,"-------------getCurrentLanguage");
+                        console.log(data, "-------------getCurrentLanguage");
                         this.currentLanguage = data.languageAlias.toLowerCase();
                         this.translate.use(this.currentLanguage);
-                        sessionStorage.setItem("DefaultLang",this.currentLanguage);
+                        sessionStorage.setItem("DefaultLang", this.currentLanguage);
                     },
                     (err) => {
                         console.log(err);
                     }
                 )
-        }else {
+        } else {
             this.translate.setDefaultLang(this.currentLanguage);
-            sessionStorage.setItem("DefaultLang",this.currentLanguage);
+            sessionStorage.setItem("DefaultLang", this.currentLanguage);
         }
     }
 
     // Whether the submenu expands the identifier
-    get flag () {
-        if(!this.url.indexOf('services')){
+    get flag() {
+        if (!this.url.indexOf('services')) {
             return true
-        }else{
+        } else {
             return false
         }
     }
-  
+    get monitorflag() {
+        if (!this.url.indexOf('fcaps')) {
+            return true
+        } else {
+            return false
+        }
+    }
+
 }
diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts
index 17804649..333ac520 100644
--- a/usecaseui-portal/src/app/app.module.ts
+++ b/usecaseui-portal/src/app/app.module.ts
@@ -41,7 +41,7 @@ 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/services/onboard-vnf-vm/onboard-vnf-vm.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';
@@ -79,6 +79,8 @@ import { DeleteModelComponent } from './views/services/services-list/delete-mode
 import { NotificationComponent } from './shared/components/notification/notification.component';
 import { ScaleModelComponent } from './views/services/services-list/scale-model/scale-model.component';
 import { HealModelComponent } from './views/services/services-list/heal-model/heal-model.component';
+import { Monitor5gComponent } from './views/fcaps/monitor-5g/monitor-5g.component';
+import { SlicingManagementComponent } from './views/services/slicing-management/slicing-management.component';
 
 @NgModule({
   providers: [
@@ -124,7 +126,9 @@ import { HealModelComponent } from './views/services/services-list/heal-model/he
     DeleteModelComponent,
     NotificationComponent,
     ScaleModelComponent,
-    HealModelComponent
+    HealModelComponent,
+    Monitor5gComponent,
+    SlicingManagementComponent
   ],
   imports: [
     BrowserModule,
diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html
new file mode 100644
index 00000000..951eb5e7
--- /dev/null
+++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html
@@ -0,0 +1,3 @@
+<p>
+  monitor-5g works!
+</p>
diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.less b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.less
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.less
diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.spec.ts b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.spec.ts
new file mode 100644
index 00000000..14203595
--- /dev/null
+++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Monitor5gComponent } from './monitor-5g.component';
+
+describe('Monitor5gComponent', () => {
+  let component: Monitor5gComponent;
+  let fixture: ComponentFixture<Monitor5gComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ Monitor5gComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(Monitor5gComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts
new file mode 100644
index 00000000..128f1ba4
--- /dev/null
+++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-monitor-5g',
+  templateUrl: './monitor-5g.component.html',
+  styleUrls: ['./monitor-5g.component.less']
+})
+export class Monitor5gComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.css b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.css
index 4e80750c..4e80750c 100644
--- a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.css
+++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.css
diff --git a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.html
index c48d68f9..c48d68f9 100644
--- a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html
+++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.html
diff --git a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.less b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.less
index f877e1ca..f877e1ca 100644
--- a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.less
+++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.less
diff --git a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts
index 07c8b959..51980b8a 100644
--- a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts
+++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts
@@ -5,7 +5,7 @@ import { HttpClientModule } from '@angular/common/http';
 import { NzMessageService, NzModalService } from 'ng-zorro-antd';
 
 import { OnboardVnfVmComponent } from './onboard-vnf-vm.component';
-import { onboardService } from '../../../core/services/onboard.service';
+import { onboardService } from '../../core/services/onboard.service';
 
 describe('OnboardVnfVmComponent', () => {
   let component: OnboardVnfVmComponent;
@@ -18,10 +18,10 @@ describe('OnboardVnfVmComponent', () => {
         NO_ERRORS_SCHEMA
       ],
       imports: [TranslateModule, HttpClientModule],
-      declarations: [ OnboardVnfVmComponent ],
+      declarations: [OnboardVnfVmComponent],
       providers: [onboardService, NzMessageService, NzModalService]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
diff --git a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.ts b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.ts
index 3d312c5c..682f48cf 100644
--- a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.ts
+++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.ts
@@ -15,8 +15,8 @@
 */
 import { HttpClient, HttpRequest, HttpResponse } from '@angular/common/http';
 import { Component, OnInit, HostBinding, TemplateRef, ViewChild } from '@angular/core';
-import { onboardService } from '../../../core/services/onboard.service';
-import { slideToRight } from '../../../shared/utils/animates';
+import { onboardService } from '../../core/services/onboard.service';
+import { slideToRight } from '../../shared/utils/animates';
 import { NzMessageService, UploadFile, NzModalRef, NzModalService } from 'ng-zorro-antd';
 import { filter } from 'rxjs/operators';
 
@@ -34,7 +34,7 @@ export class OnboardVnfVmComponent implements OnInit {
   tabs: string[] = ['NS', 'VNF', 'PNF'];
   currentTab: string = 'NS'
   fileList: UploadFile[] = [];
-  uploading:boolean = false;
+  uploading: boolean = false;
   infoId: string;
   display: string = 'block';
 
@@ -107,13 +107,13 @@ export class OnboardVnfVmComponent implements OnInit {
   }
 
   beforeUpload = (file: UploadFile): boolean => {
-    this.fileList.splice(0,1,file);
+    this.fileList.splice(0, 1, file);
     let API: string;
-    if(this.currentTab === 'NS'){
+    if (this.currentTab === 'NS') {
       API = 'createNetworkServiceData';
-    }else if(this.currentTab === 'VNF'){
+    } else if (this.currentTab === 'VNF') {
       API = 'createVnfData';
-    }else {
+    } else {
       API = 'createPnfData';
     }
     this.myhttp.getCreatensData(API, this.requestBody)//on-line
@@ -182,7 +182,7 @@ export class OnboardVnfVmComponent implements OnInit {
   }
 
   // Get the NS list
-  getTableData(): void{
+  getTableData(): void {
     this.isSpinning = true;
     //ns vfc lists 
     this.myhttp.getOnboardTableData()
@@ -207,7 +207,7 @@ export class OnboardVnfVmComponent implements OnInit {
   }
 
   // Get the vnf list
-  getTableVnfData(): void{
+  getTableVnfData(): void {
     this.isSpinning = true;
     //vnf vfc lists
     this.myhttp.getOnboardTableVnfData()
@@ -240,24 +240,24 @@ export class OnboardVnfVmComponent implements OnInit {
         this.isSpinning = false;   //loading hide
       }, (err) => {
         console.error(err);
-        this.isSpinning = false; 
+        this.isSpinning = false;
       })
   }
 
   // confirm
-  showConfirm(requestBody: object, id: string): void{
-    let API = this.currentTab === 'NS'? 'getNsonboard' : 'getVnfonboard';
+  showConfirm(requestBody: object, id: string): void {
+    let API = this.currentTab === 'NS' ? 'getNsonboard' : 'getVnfonboard';
     this.modalService.confirm({
       nzTitle: '<p>Are you sure you want to do this?</p>',
       nzOnOk: () => {
         this.myhttp[API](requestBody)
           .subscribe((data) => {
             if (data.status == "success") {
-              if(this.currentTab === 'NS'){
+              if (this.currentTab === 'NS') {
                 this.isUpdate = false;
                 this.notification.notificationSuccess(this.currentTab, "OnboardingState", id);
                 this.getTableData();
-              }else{
+              } else {
                 this.jobId = data.jobId;
                 this.queryProgress(this.jobId, id);
                 this.getTableVnfData();
@@ -266,7 +266,7 @@ export class OnboardVnfVmComponent implements OnInit {
               this.isUpdate = false;
               this.notification.notificationFailed(this.currentTab, "OnboardingState", id);
               return false
-            } 
+            }
           }, (err) => {
             console.log(err);
           })
@@ -280,10 +280,10 @@ export class OnboardVnfVmComponent implements OnInit {
     this.isUpdate = true;
     let requestBody = { "csarId": id };
     this.showConfirm(requestBody, id)
-  } 
+  }
 
   //Progress Progress inquiry
-  queryProgress(jobId: string, id: string): any{
+  queryProgress(jobId: string, id: string): any {
     let mypromise = new Promise((res) => {
       this.myhttp.getProgress(jobId, 0)
         .subscribe((data) => {
@@ -297,7 +297,7 @@ export class OnboardVnfVmComponent implements OnInit {
           if (data.responseDescriptor.progress > 100) {
             this.isUpdate = false;
             this.notification.notificationFailed(this.currentTab, 'OnboardingState', id);
-          }else if (data.responseDescriptor.progress < 100) {
+          } else if (data.responseDescriptor.progress < 100) {
             this.isUpdate = true;
             setTimeout(() => {
               this.queryProgress(this.jobId, id);
@@ -329,11 +329,11 @@ export class OnboardVnfVmComponent implements OnInit {
   //delete nsItem
   deleteService(pkgid, resolve) {
     let API: string;
-    if(this.currentTab === 'NS'){
+    if (this.currentTab === 'NS') {
       API = 'deleteNsIdData';
-    }else if(this.currentTab === 'VNF'){
+    } else if (this.currentTab === 'VNF') {
       API = 'deleteVnfIdData';
-    }else{
+    } else {
       API = 'deletePnfIdData';
     }
     this.myhttp[API](pkgid)
@@ -341,7 +341,7 @@ export class OnboardVnfVmComponent implements OnInit {
         this.notification.notificationSuccess(this.currentTab, 'OnboardingState', pkgid);
         resolve()
         //refresh list after successful deletion
-        switch(this.currentTab){
+        switch (this.currentTab) {
           case 'NS':
             this.getTableData();
             break
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html
new file mode 100644
index 00000000..91062607
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html
@@ -0,0 +1,3 @@
+<p>
+  slicing-management works!
+</p>
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.less
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.less
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.spec.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.spec.ts
new file mode 100644
index 00000000..25fbf515
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SlicingManagementComponent } from './slicing-management.component';
+
+describe('SlicingManagementComponent', () => {
+  let component: SlicingManagementComponent;
+  let fixture: ComponentFixture<SlicingManagementComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SlicingManagementComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SlicingManagementComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.ts
new file mode 100644
index 00000000..ae2133de
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-slicing-management',
+  templateUrl: './slicing-management.component.html',
+  styleUrls: ['./slicing-management.component.less']
+})
+export class SlicingManagementComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}