Add user service type management module

Change-Id: Id86465d839b27dd4350d391198b8eacdf1f330a8
Issue-ID: USECASEUI-212
Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>

12 files changed, 720 insertions, 6 deletions

diff --git a/usecaseui-portal/src/app/app-routing.module.ts b/usecaseui-portal/src/app/app-routing.module.ts
index 7fe7361c..2d2277c3 100644
--- a/usecaseui-portal/src/app/app-routing.module.ts
+++ b/usecaseui-portal/src/app/app-routing.module.ts
@@ -3,6 +3,7 @@ import { RouterModule, Routes } from '@angular/router';
 
 
 import { HomeComponent }        from './home/home.component';
+import { ManagementComponent }    from './management/management.component';
 import { ServicesComponent }    from './services/services.component';
 import { ServicesListComponent }    from './services/services-list/services-list.component';
 import { OnboardVnfVmComponent } from './services/onboard-vnf-vm/onboard-vnf-vm.component';
@@ -23,6 +24,7 @@ const ServicesChildRoutes: Routes = [
 
 const routes: Routes = [
   { path: 'home', component: HomeComponent},
+  { path: 'management', component: ManagementComponent},
   // { path: 'services', component: ServicesComponent, children:ServicesChildRoutes}, //暂时不是子路由结构
   { path: 'services/services-list', component: ServicesListComponent},
   { path: 'services/onboard-vnf-vm', component: OnboardVnfVmComponent},
diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts
index 76fe5d4a..77a102f9 100644
--- a/usecaseui-portal/src/app/app.module.ts
+++ b/usecaseui-portal/src/app/app.module.ts
@@ -16,14 +16,15 @@ export function HttpLoaderFactory(httpClient: HttpClient) {
 
 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 './home/home.component';
+import { ManagementComponent } from './management/management.component';
 import { ServicesComponent } from './services/services.component';
 import { ServicesListComponent } from './services/services-list/services-list.component';
 import { OnboardVnfVmComponent } from './services/onboard-vnf-vm/onboard-vnf-vm.component';
@@ -44,13 +45,15 @@ import { LineComponent } from './components/charts/line/line.component';
 import { PieComponent } from './components/charts/pie/pie.component';
 
 import {PathLocationStrategy, LocationStrategy, HashLocationStrategy} from '@angular/common';
-// 自定义服务
+// Custom service
 import { MyhttpService } from './myhttp.service';
 import { HomesService } from './homes.service';
 import { onboardService } from './onboard.service';
 import { networkHttpservice } from './networkHttpservice.service';
 import { PerformanceDetailsComponent } from './components/performance-details/performance-details.component';
 import { E2eDetailComponent } from './components/e2e-detail/e2e-detail.component';
+import { CustomerComponent } from './components/customer/customer.component';
+import { ManagemencsService } from './managemencs.service';
 
 @NgModule({
   providers   : [ 
@@ -59,12 +62,13 @@ import { E2eDetailComponent } from './components/e2e-detail/e2e-detail.component
     MyhttpService,
     HomesService,
     onboardService,
-    networkHttpservice 
+    networkHttpservice,
+    ManagemencsService 
   ],
   declarations: [
     AppComponent,
     HomeComponent,
-
+    ManagementComponent,
     ServicesComponent,
     ServicesListComponent,
     OnboardVnfVmComponent,
@@ -85,6 +89,7 @@ import { E2eDetailComponent } from './components/e2e-detail/e2e-detail.component
     CcvpnDetailComponent,
     CcvpnCreationComponent,
     E2eDetailComponent,
+    CustomerComponent ,
     PerformanceDetailsComponent,
   ],
   imports: [
diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts
index 03894ba9..3bf4aa70 100644
--- a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts
+++ b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts
@@ -253,7 +253,6 @@ export class CcvpnNetworkComponent implements OnInit {
         var _this = this.tpoption,
             width = null,
             height = _this.height;
-        console.log("查询svg高度");
         console.log(height);
         if (_this.width > 800) {
             width = _this.width;
diff --git a/usecaseui-portal/src/app/components/customer/customer.component.html b/usecaseui-portal/src/app/components/customer/customer.component.html
new file mode 100644
index 00000000..d2449096
--- /dev/null
+++ b/usecaseui-portal/src/app/components/customer/customer.component.html
@@ -0,0 +1,70 @@
+<div class="content">
+  <div class="customer">
+    <div class="customer_title">
+      <div class="customers">
+        <span>Customer</span>
+        <img src="./assets/images/customer04.png" alt="" (click)="this.customeradd  = !this.customeradd">
+      </div>
+    </div>
+    <div class="customer_detail">
+      <div class="customer_add" *ngIf="customeradd">
+        <input nz-input placeholder="Input customer name" class="customer_name" nzSize="default">
+        <button nz-button nzType="primary" class="customer_addbut">Add</button>
+      </div>
+      <div class="customer_list">
+        <ul>
+          <li class="active"><img src="./assets/images/customer05.png" alt=""><span>name</span><i
+              class="anticon anticon-delete" nzType="info"></i></li>
+          <li><img src="./assets/images/customer05.png" alt=""><span>name</span><i class="anticon anticon-delete"
+              nzType="info"></i></li>
+          <li><img src="./assets/images/customer05.png" alt=""><span>name</span><i class="anticon anticon-delete"
+              nzType="info"></i></li>
+          <li><img src="./assets/images/customer05.png" alt=""><span>name</span><i class="anticon anticon-delete"
+              nzType="info"></i></li>
+          <li><img src="./assets/images/customer05.png" alt=""><span>name</span><i class="anticon anticon-delete"
+              nzType="info"></i></li>
+          <li><img src="./assets/images/customer05.png" alt=""><span>name</span><i class="anticon anticon-delete"
+              nzType="info"></i></li>
+          <li><img src="./assets/images/customer05.png" alt=""><span>name</span><i class="anticon anticon-delete"
+              nzType="info"></i></li>
+          <li><img src="./assets/images/customer05.png" alt=""><span>name</span><i class="anticon anticon-delete"
+              nzType="info"></i></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <div class="services_type">
+    <div class="services_type_title">
+      <div class="servicess">
+        <span>Services Type</span>
+        <img src="./assets/images/customer03.png" alt="" (click)="this.servicesadd  = !this.servicesadd ">
+      </div>
+    </div>
+    <div class="services_type_detail">
+      <div class="services_add" *ngIf="servicesadd">
+        <input nz-input placeholder="Input services type" class="services_name" nzSize="default">
+        <button nz-button nzType="primary" class="services_addbut">Add</button>
+      </div>
+      <div class="services_list">
+        <div style="padding:0 20px;">
+          <ul>
+            <li><span>Type1</span><i class="anticon anticon-delete" nzType="info"></i></li>
+            <li><span>Type2</span><i class="anticon anticon-delete" nzType="info"></i></li>
+            <li><span>Type3</span><i class="anticon anticon-delete" nzType="info"></i></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="chearts">
+    <div class="Cu">
+      <p>Instance Count of Customer</p>
+      <app-pie [initData]="CUChartInit" [chartData]="CUChartData"></app-pie>
+      <div class="legend"></div><span>users</span>
+    </div>
+    <div class="type">
+      <p>Instance Count of Service Type</p>
+      <app-bar [initData]="serviceInit" [chartData]="serviceData"></app-bar>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/components/customer/customer.component.less b/usecaseui-portal/src/app/components/customer/customer.component.less
new file mode 100644
index 00000000..b7b4bc24
--- /dev/null
+++ b/usecaseui-portal/src/app/components/customer/customer.component.less
@@ -0,0 +1,208 @@
+.content {
+    width: 100%;
+    height: 100vh;
+    i.anticon {
+        cursor: pointer;
+        font-size: 18px;
+        padding: 2px;
+        &:hover{
+            color: #147dc2;
+        }
+    }
+    li.active{
+        &:hover{
+            cursor: pointer;
+            color: #3C4F8C;
+            // background:linear-gradient(to right, #E5F6FF, #CFEEFA)
+            background-color: #e6f7ff;
+        }
+    }
+    .customer {
+        height: 580px;
+        margin-right: 2.5%;
+        border-radius: 5px;
+        width: 31%;
+        background-color: #fff;
+        box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06);
+        display: inline-block;
+        vertical-align: top;
+        .customer_title {
+            line-height: 3.5;
+            height: 50px;
+            width: 100%;
+            border-bottom: 1px #07A9E1 solid;
+            .customers {
+                padding: 0 20px;
+                span {
+                    color: #3F9CFF;
+                    font-family:"ArialMT";
+                }
+                img {
+                    width: 30px;
+                    float: right;
+                    margin-top: 7px;
+                }
+            }
+        }
+        .customer_detail {
+            height: 535px;
+            width: 100%;
+            border-top: 1px #07A9E1 solid;
+            .customer_add {
+                line-height: 3.5;
+                height: 50px;
+                width: 100%;
+                padding: 0 20px;
+                background-color: #F4F5F8;
+                .customer_name {
+                    width: 52%;
+                    font-size: 12px;
+                    color: #CCCCCC;
+                    font-family: ArialMT;
+                    border-color: #3F9CFF;
+                }
+                .customer_addbut {
+                    float: right;
+                    margin-top: 9px;
+                    width: 28%;
+                    background-color: #0DA9E2;
+                }
+            }
+            .customer_list {
+                .active {
+                    background:linear-gradient(to right, #E5F6FF, #CFEEFA);
+                }
+                li {                  
+                    padding: 0 20px;
+                    height: 50px;
+                    line-height: 3.5;
+                    width: 100%;
+                    img {
+                        width: 10%;
+                    }
+                    span {
+                        width: 80%;
+                        padding-left: 10%;
+                        display: inline-block;
+                        color: rgba(60,79,140,0.5);
+                    }
+                }
+            }
+        }
+        
+    }
+    .services_type {
+        height: 580px;
+        margin-right: 2.5%;
+        border-radius: 5px;
+        width: 31%;
+        background-color: #fff;
+        box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06);
+        display: inline-block;
+        vertical-align: top;
+        .services_type_title {
+            line-height: 3.5;
+            height: 50px;
+            width: 100%;
+            border-bottom: 1px #07A9E1 solid;
+            .servicess {
+                padding: 0 20px;
+                span {
+                    color: #3F9CFF;
+                    font-family:"ArialMT";
+                }
+                img {
+                    width: 50px;
+                    float: right;
+                    margin-top: 5px;
+                }
+            }
+        }
+        .services_type_detail {
+            height: 535px;
+            width: 100%;
+            border-top: 1px #07A9E1 solid;
+            .services_add {
+                line-height: 3.5;
+                height: 50px;
+                width: 100%;
+                padding: 0 20px;
+                background-color: #F4F5F8;
+                .services_name {
+                    width: 52%;
+                    font-size: 12px;
+                    color: #CCCCCC;
+                    font-family: ArialMT;
+                    border-color: #3F9CFF;
+                }
+                .services_addbut {
+                    float: right;
+                    margin-top: 5px;
+                    width: 28%;
+                    clear: both;
+                    background-color: #0DA9E2;
+                }
+            }
+            .services_list {
+                background:linear-gradient(to right, #E5F6FF, #CFEEFA);
+                height: 530px;
+                li {
+                    height: 50px;
+                    line-height: 3.5;
+                    width: 100%;
+                    border-bottom: 2px #FFFFFF dashed;
+                    i {
+                        float: right;
+                        clear: both;
+                        padding-top: 17px;
+                    }
+                }
+
+            }
+            
+        }
+    }
+    .chearts {
+        display: inline-block;
+        width: 31%;
+        vertical-align: top;
+        >div{
+            padding: 20px 20px;
+        }
+        .Cu {
+            height: 280px;
+            width: 100%;
+            margin-bottom: 20px;
+            margin-right: 2.5%;
+            border-radius: 5px;
+            background-color: #fff;
+            box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06);
+            p {
+                color :#3F9CFF;
+                font-family:"ArialMT";
+            }
+            .legend {
+                height: 10px;
+                width: 20px;
+                display: inline-block;
+                background: linear-gradient(to right,#7DCEFB, #0DA9E2);
+                border-radius: 1px;
+                margin: 15px 4px 0 43%;
+            }
+        }
+        .type {
+            height: 280px;
+            width: 100%;
+            margin-bottom: 20px;
+            margin-right: 2.5%;
+            border-radius: 5px;
+            background-color: #fff;
+            box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06);
+            p {
+                color :#3F9CFF;
+                font-family:"ArialMT";
+                
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/components/customer/customer.component.spec.ts b/usecaseui-portal/src/app/components/customer/customer.component.spec.ts
new file mode 100644
index 00000000..f185e7a7
--- /dev/null
+++ b/usecaseui-portal/src/app/components/customer/customer.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CustomerComponent } from './customer.component';
+
+describe('CustomerComponent', () => {
+  let component: CustomerComponent;
+  let fixture: ComponentFixture<CustomerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CustomerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CustomerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/components/customer/customer.component.ts b/usecaseui-portal/src/app/components/customer/customer.component.ts
new file mode 100644
index 00000000..bd27d36c
--- /dev/null
+++ b/usecaseui-portal/src/app/components/customer/customer.component.ts
@@ -0,0 +1,262 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-customer',
+  templateUrl: './customer.component.html',
+  styleUrls: ['./customer.component.less']
+})
+export class CustomerComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+  customeradd = false;
+  servicesadd = false;
+  //Customer pie
+  CUChartData: Object;
+  CUChartInit: Object = {
+    height: 180,
+    option: {
+      color: ["#F2F6FD"],
+      series: [{
+        type: 'pie',
+        name: "customer",
+        radius: '90%',
+        center: ['50%', '53%'],
+        data: [{
+          value: 67,
+
+        }, {
+          value: 10,
+
+        }, {
+          value: 17,
+
+        }, {
+          value: 33,
+        },],
+        label: {
+          normal: {
+            position: 'center',
+            show: false,
+            formatter: '   {b|{b}：{d}%}  ',
+            backgroundColor: 'rgba(51,51,51,0.9)',
+            borderColor: 'rgba(51,51,51,0.9)',
+            borderWidth: 1,
+            borderRadius: 4,
+            rich: {
+              b: {
+                fontSize: 16,
+                color: '#fff',
+                lineHeight: 33
+              }
+            }
+          },
+          emphasis: {
+            show: true,
+
+          }
+        },
+        itemStyle: {
+          normal: {
+            borderWidth: 2,
+            borderColor: '#ffffff',
+          },
+          emphasis: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [{
+                offset: 0, color: '#7DCEFB' // 0% 处的颜色
+              }, {
+                offset: 1, color: '#0DA9E2' // 100% 处的颜色
+              }],
+              global: false // 缺省为 false
+            },
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 10, 5, 0)'
+          }
+        }
+      }]
+    }
+  };
+  // getHomeAlarmData() {
+  //   this.myhttp.getHomeAlarmData()
+  //     .subscribe((data) => {
+  //       this.alarmChartData = {
+  //         series: [{
+  //           data: [{ name: "Active", value: data[0] }, { name: "Fixed", value: data[1] }]
+  //         }]
+  //       };
+  //     })
+  // }
+
+  // service bar
+  serviceData: Object;
+  serviceInit: Object = {
+    option: {
+      tooltip: {
+        show: true,
+        trigger: 'item',
+        formatter: "{c}"
+      },
+      grid: {
+        top: '5%',
+        left: '5%',
+        bottom: '3%',
+        containLabel: true
+      },
+      xAxis: [
+        {
+          type: 'value',
+          splitLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#EDEDED"
+            }
+          },
+          axisLabel: {
+            color: "#3C4F8C"
+          }
+        }
+
+      ],
+      yAxis: [
+        {
+          type: 'category',
+          splitLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#EDEDED"
+            }
+          },
+          axisLabel: {
+            color: "#3C4F8C"
+          },
+          data: ['Other', 'Type1', 'Type2', 'Type3', 'Type4'],
+        },
+
+      ],
+      series: [
+        {
+          name: '',
+          barWidth: '40%',
+          type: 'bar',
+          data: [2800, 1700, 1200, 1000, 900],
+          itemStyle: {
+            normal: {
+              color: function (params) {
+                // build a color map as your need.
+                var colorList = [
+                  {
+                    type: 'bar',
+                    colorStops: [{
+                      offset: 0,
+                      color: '#FCCE2B' 
+                    }, {
+                      offset: 1,
+                      color: '#FEE956' 
+                    }],
+                    globalCoord: false, 
+                  },
+                  {
+                    type: 'bar',
+                    colorStops: [{
+                      offset: 0,
+                      color: '#F43A59' 
+                    }, {
+                      offset: 1,
+                      color: '#FA6C92' 
+                    }],
+                    globalCoord: false,
+                  },
+                  {
+                    type: 'bar',
+                    colorStops: [{
+                      offset: 0,
+                      color: '#4F5B60' 
+                    }, {
+                      offset: 1,
+                      color: '#879499' 
+                    }],
+                    globalCoord: false, 
+                  },
+                  {
+                    type: 'bar',
+                    colorStops: [{
+                      offset: 0,
+                      color: '#31DAC3' 
+                    }, {
+                      offset: 1,
+                      color: '#5FEFE3' 
+                    }],
+                    globalCoord: false, 
+                  },
+                  {
+                    type: 'bar',
+                    colorStops: [{
+                      offset: 0,
+                      color: '#999999' 
+                    }, {
+                      offset: 1,
+                      color: '#C9C9C9'
+                    }],
+                    globalCoord: false, 
+                  }
+                ];
+                return colorList[params.dataIndex]
+              },
+            }
+          }
+        },
+        {
+          name: 'Type4',
+          type: 'bar',
+          stack: '',
+          data: 2800,
+
+        },
+        {
+          name: 'Type1',
+          type: 'bar',
+          stack: '',
+          data: 1700
+        },
+        {
+          name: 'Type2',
+          type: 'bar',
+          stack: '',
+          data: 1500
+        },
+        {
+          name: 'Type3',
+          type: 'bar',
+          stack: '',
+          data: 1300
+        },
+        {
+          name: 'Other',
+          type: 'bar',
+          stack: '',
+          data: 1000,
+
+        }
+      ]
+    }
+  }
+}
diff --git a/usecaseui-portal/src/app/managemencs.service.ts b/usecaseui-portal/src/app/managemencs.service.ts
new file mode 100644
index 00000000..2bf06233
--- /dev/null
+++ b/usecaseui-portal/src/app/managemencs.service.ts
@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class ManagemencsService {
+
+  constructor() { }
+
+}
diff --git a/usecaseui-portal/src/app/management/management.component.html b/usecaseui-portal/src/app/management/management.component.html
new file mode 100644
index 00000000..a695b003
--- /dev/null
+++ b/usecaseui-portal/src/app/management/management.component.html
@@ -0,0 +1,19 @@
+<div class="content" style="padding: 20px 20px;">
+  <div class="management"  [@showHideAnimate]="show" >
+    <div class="title">
+      <p>Create initial customer</p>
+      <span>Customer has not been created in ONAP </span>
+      <span>please create customer and its service type</span>
+      <img src="../../assets/images/customer01.png" alt="">
+      <input nz-input placeholder="input customer name" nzSize="large">
+      <button nz-button nzType="primary" class="cancel">Cancel</button>
+      <button nz-button nzType="primary" class="add" (click) = "customerhide()">Add</button>
+    </div>
+    <div class="image">
+      <img src="../../assets/images/customer02.png" alt="">
+    </div>
+  </div>
+  <div  [@showHideAnimate]="hide">
+    <app-customer></app-customer>
+  </div>
+</div>
diff --git a/usecaseui-portal/src/app/management/management.component.less b/usecaseui-portal/src/app/management/management.component.less
new file mode 100644
index 00000000..cc50e3c2
--- /dev/null
+++ b/usecaseui-portal/src/app/management/management.component.less
@@ -0,0 +1,57 @@
+.content {
+    .management {
+        width: 100%;
+        .title {
+            width: 50%;
+            vertical-align:top;
+            display: inline-block;
+            font-family: "Arial";
+            p {
+                font-size: 33px;
+                color: #3C4F8C;
+                margin-bottom: 0.5em;
+            }
+            span {
+                font-size: 18px;
+                color: rgba(60,79,140,0.5);
+                display: block;
+            }
+            img {
+                padding-top: 8%;
+                width: 55%;
+                margin-left: 18%;
+                margin-bottom: 5%;
+            }
+            input {
+                width: 50%;
+                margin-left: 20%;
+                margin-bottom: 5%;
+                display: block;
+            }
+            .cancel{
+                background-color: #eee;
+                border-color: #eee;
+                color: #9DA7C5;
+                width: 80px;
+                margin-left: 25%;
+                margin-right: 2%;
+            }
+            .add {
+                color: #fff;
+                width: 80px;
+                background:linear-gradient(310deg,rgba(30,158,255,1) 0%,rgba(99,200,255,1) 100%);
+                border-color: #1890ff;
+            }
+        }
+        .image {
+            width: 49%;
+            vertical-align:top;
+            display: inline-block;
+            img {
+                width: 85%;
+                margin-top: 41%;
+            }
+        }
+    }
+   
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/management/management.component.spec.ts b/usecaseui-portal/src/app/management/management.component.spec.ts
new file mode 100644
index 00000000..f6152432
--- /dev/null
+++ b/usecaseui-portal/src/app/management/management.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ManagementComponent } from './management.component';
+
+describe('ManagementComponent', () => {
+  let component: ManagementComponent;
+  let fixture: ComponentFixture<ManagementComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ManagementComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ManagementComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/management/management.component.ts b/usecaseui-portal/src/app/management/management.component.ts
new file mode 100644
index 00000000..7345e7a3
--- /dev/null
+++ b/usecaseui-portal/src/app/management/management.component.ts
@@ -0,0 +1,34 @@
+import { Component, OnInit , HostBinding} from '@angular/core';
+import { showHideAnimate, slideToRight } from '../animates';
+
+@Component({
+  selector: 'app-management',
+  templateUrl: './management.component.html',
+  styleUrls: ['./management.component.less'],
+  animations: [
+    showHideAnimate, slideToRight
+  ]
+})
+export class ManagementComponent implements OnInit {
+  @HostBinding('@routerAnimate') routerAnimateState; //Routing animation
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  show = "show";
+  hide = "hide";
+  custerhide = false;
+  customershow(){
+    this.show = "show";
+    this.hide = "hide";
+    this.custerhide = true;
+  }
+  customerhide(){
+    this.show = "hide";
+    this.hide = "show";
+    this.custerhide = false;
+  }
+
+}