Dashboard interface front-end development

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

17 files changed, 118 insertions, 38 deletions

diff --git a/usecaseui-portal/src/app/app.component.html b/usecaseui-portal/src/app/app.component.html
index ee0fdd8d..c7288e50 100644
--- a/usecaseui-portal/src/app/app.component.html
+++ b/usecaseui-portal/src/app/app.component.html
@@ -14,40 +14,48 @@
     limitations under the License.
 -->
 <nz-layout>
-  <nz-sider nzWidth='260' style="overflow: auto; height: 100vh; position: fixed; left: 0">
-    <ul nz-menu [nzTheme]="'dark'" [nzMode]="'inline'" style="width: 260px;">
-      <li nz-menu-item nzSelected> 
+  <nz-sider nzWidth='330' style="overflow: auto; height: 100vh; position: fixed; left: 0;background: url('../assets/images/UUIMenuBar.png')">
+    <ul nz-menu [nzTheme]="'dark'" [nzMode]="'inline'" style="width: 330px;margin-top: 200px">
+      <li nz-menu-item [ngClass]="{'activeMenuBar':activeMenuBar[0] == true}" (click)="thisActive(0)">
         <a routerLink="home">
           <span title>
-            <i class="anticon anticon-home"></i>
+            <i>
+              <img src="{{activeMenuBar[0] == true ? '../assets/images/home-icon-active.png':'../assets/images/home-icon.png'}}" alt="home">
+            </i>
             <span> {{"i18nTextDefine_Home" | translate}} </span>
           </span>
         </a>
       </li>
       <hr>
-      <li nz-menu-item> 
+      <li nz-menu-item [ngClass]="{'activeMenuBar':activeMenuBar[1] == true}" (click)="thisActive(1)">
         <a routerLink="management">
           <span title>
-            <i class="anticon anticon-user"></i>
+           <i>
+              <img src="{{activeMenuBar[1] == true ? '../assets/images/customer-icon-active.png':'../assets/images/customer-icon.png'}}" alt="home">
+            </i>
             <span> {{"i18nTextDefine_Customer" | translate}} </span>
           </span>
         </a>
       </li>
       <hr>
-      <li nz-menu-item> 
+      <li nz-menu-item [ngClass]="{'activeMenuBar':activeMenuBar[2]== true}" (click)="thisActive(2)">
         <a routerLink="fcaps">
           <span title>
-            <i class="anticon anticon-user"></i>
+            <i>
+              <img src="{{activeMenuBar[2] == true ? '../assets/images/monitor-icon-active.png':'../assets/images/monitor-icon.png'}}" alt="home">
+            </i>
             <span> {{"i18nTextDefine_Monitor" | translate}} </span>
           </span>
         </a>
       </li>
       <hr>
-      <li nz-submenu>
-        <span title><i class="anticon anticon-home"></i> {{"i18nTextDefine_Services" | translate}} </span>
+      <li nz-submenu [ngClass]="{'activeMenuBar':activeMenuBar[3] == true}" (click)="thisActive(3)">
+        <span title>  <i>
+              <img src="{{activeMenuBar[3] == true ? '../assets/images/Services-icon-active.png':'../assets/images/Services-icon.png'}}" alt="home">
+            </i> {{"i18nTextDefine_Services" | translate}} </span>
         <ul>
-          <li nz-menu-item><a routerLink='services/services-list'> {{"i18nTextDefine_ServicesList" | translate}} </a></li>
-          <li nz-menu-item><a routerLink='services/onboard-vnf-vm'> {{"i18nTextDefine_PackageManagement" | translate}} </a></li>
+          <li nz-menu-item [ngClass]="{'activeMenuList':activeMenuList[0] == true}" (click)="thisListActive(0)"><a routerLink='services/services-list'> {{"i18nTextDefine_ServicesList" | translate}} </a></li>
+          <li nz-menu-item [ngClass]="{'activeMenuList':activeMenuList[1] == true}" (click)="thisListActive(1)"><a routerLink='services/onboard-vnf-vm'> {{"i18nTextDefine_PackageManagement" | translate}} </a></li>
         </ul>
       </li>
       <!-- <hr>
@@ -68,17 +76,19 @@
         </ul>
       </li> -->
       <hr>
-      <li nz-menu-item>
+      <li nz-menu-item [ngClass]="{'activeMenuBar':activeMenuBar[4] == true}" (click)="thisActive(4)">
         <a routerLink="network">
           <span title>
-            <i class="anticon anticon-share-alt"></i>
+             <i>
+              <img src="{{activeMenuBar[4] == true ? '../assets/images/network-icon-active.png':'../assets/images/network-icon.png'}}" alt="home">
+            </i>
             <span> {{"i18nTextDefine_NetworkTopology" | translate}} </span>
           </span>
         </a>
       </li>
     </ul>
   </nz-sider>
-  <nz-layout style="margin-left: 260px;  height:100vh; position:relative;">
+  <nz-layout style="margin-left: 330px;  height:100vh; position:relative;">
       <router-outlet></router-outlet>
   </nz-layout>
 </nz-layout>
diff --git a/usecaseui-portal/src/app/app.component.less b/usecaseui-portal/src/app/app.component.less
index a805166e..685a2167 100644
--- a/usecaseui-portal/src/app/app.component.less
+++ b/usecaseui-portal/src/app/app.component.less
@@ -1,25 +1,51 @@
 nz-layout {
     nz-sider {
         ul {
+            background: transparent;
             li {
                 margin: 0;
                 font-size: 16px;
+                color: #ffffff!important;
+                background: transparent;
+                a{
+                    color: #ffffff;
+                }
                 span {
                     font-size: 16px;
                 }
                 i {
                     width: 16px;
                     height: 16px;
+                    margin-right: 12px;
+                    img{
+                        width: 20px;
+                    }
                 }
                 .icon-services {
                     background: url(../assets/images/icon.png) no-repeat 0px -16px;
                 }
                 ul {
+                    background: transparent!important;
                     li{
                         font-size: 12px;
+                        color: #ffffff!important;
+                        background: transparent!important;
+                    }
+                    li:hover,li a:hover{
+                        color: #ffffff!important;
+                    }
+                    li.activeMenuList,li.activeMenuList a{
+                        color: #0DA9E2!important;
                     }
                 }
             }
+            li:hover,li a:hover{
+                color: #ffffff!important;
+            }
+            li.activeMenuBar{
+                color: #ffffff!important;
+                background:linear-gradient(90deg,rgba(7,169,225,1) 0%,rgba(48,217,196,1) 100%);
+            }
             hr {
                 margin: 0 auto;
                 background-color: #39434f;
diff --git a/usecaseui-portal/src/app/app.component.ts b/usecaseui-portal/src/app/app.component.ts
index 190f42e3..01206873 100644
--- a/usecaseui-portal/src/app/app.component.ts
+++ b/usecaseui-portal/src/app/app.component.ts
@@ -45,13 +45,61 @@ export class AppComponent {
                         console.log(data,"-------------getCurrentLanguage");
                         this.currentLanguage = data.languageAlias.toLowerCase();
                         this.translate.use(this.currentLanguage);
+                        sessionStorage.setItem("DefaultLang",this.currentLanguage);
                     },
                     (err) => {
                         console.log(err);
                     }
                 )
         }else {
-           this.translate.setDefaultLang(this.currentLanguage);
+            this.translate.setDefaultLang(this.currentLanguage);
+            sessionStorage.setItem("DefaultLang",this.currentLanguage);
+        }
+    }
+    activeMenuBar =[true,false,false,false,false];
+    activeMenuList =[false,false];
+    thisActive(item){
+        if(this.activeMenuBar[item] == true){
+            this.activeMenuBar.map((its,index) => {
+                if(item != index){
+                    this.activeMenuBar[index] = false;
+                }
+            })
+        }else {
+            this.activeMenuBar.map((its,index) => {
+                if(item == index){
+                    this.activeMenuBar[item] = true;
+                }else {
+                    this.activeMenuBar[index] = false;
+                }
+            })
+            this.activeMenuList.map((its,index) => {
+                this.activeMenuList[index] = false;
+            })
+        }
+    }
+    thisListActive(item){
+        if(this.activeMenuBar[3] = true){
+            if(this.activeMenuList[item] == true){
+                this.activeMenuList.map((its,index) => {
+                    if(item != index){
+                        this.activeMenuList[index] = false;
+                    }
+                })
+            }else {
+                this.activeMenuList.map((its,index) => {
+                    if(item == index){
+                        this.activeMenuList[item] = true;
+                    }else {
+                        this.activeMenuList[index] = false;
+                    }
+                })
+
+            }
+        }else {
+            this.activeMenuList.map((its,index) => {
+                this.activeMenuList[index] = false;
+            })
         }
     }
     //
diff --git a/usecaseui-portal/src/app/components/customer/customer.component.ts b/usecaseui-portal/src/app/components/customer/customer.component.ts
index f3d1af3e..61e582c6 100644
--- a/usecaseui-portal/src/app/components/customer/customer.component.ts
+++ b/usecaseui-portal/src/app/components/customer/customer.component.ts
@@ -89,15 +89,7 @@ export class CustomerComponent implements OnInit {
                 name: "customer",
                 radius: '90%',
                 center: ['50%', '50%'],
-                data: [{
-                    value: 67,
-                }, {
-                    value: 10,
-                }, {
-                    value: 17,
-                }, {
-                    value: 33,
-                },],
+                data: [],
                 label: {
                     normal: {
                         position: 'center',
@@ -217,7 +209,7 @@ export class CustomerComponent implements OnInit {
                     axisLabel: {
                         color: "#3C4F8C"
                     },
-                    data: ['Other', 'Type1', 'Type2', 'Type3', 'Type4'],
+                    data: [],
                 },
 
             ],
@@ -226,7 +218,7 @@ export class CustomerComponent implements OnInit {
                     name: '',
                     barWidth: '40%',
                     type: 'bar',
-                    data: [2800, 1700, 1200, 1000, 900],
+                    data: [],
                     itemStyle: {
                         normal: {
                             color: function (params) {
@@ -297,32 +289,32 @@ export class CustomerComponent implements OnInit {
                     name: 'Type4',
                     type: 'bar',
                     stack: '',
-                    data: 2800,
+                    data: '',
 
                 },
                 {
                     name: 'Type1',
                     type: 'bar',
                     stack: '',
-                    data: 1700
+                    data: ''
                 },
                 {
                     name: 'Type2',
                     type: 'bar',
                     stack: '',
-                    data: 1500
+                    data: ''
                 },
                 {
                     name: 'Type3',
                     type: 'bar',
                     stack: '',
-                    data: 1300
+                    data: ''
                 },
                 {
                     name: 'Other',
                     type: 'bar',
                     stack: '',
-                    data: 1000,
+                    data: '',
 
                 }
             ]
diff --git a/usecaseui-portal/src/app/home/home.component.ts b/usecaseui-portal/src/app/home/home.component.ts
index ba0ae684..9bd02941 100644
--- a/usecaseui-portal/src/app/home/home.component.ts
+++ b/usecaseui-portal/src/app/home/home.component.ts
@@ -254,9 +254,7 @@ export class HomeComponent implements OnInit {
         data: ['CPU', 'Memory', 'Disk']
       },
       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"]
+        data:[]
       },
       series : [
         {
@@ -265,7 +263,7 @@ export class HomeComponent implements OnInit {
           itemStyle: {
             color: "#70ACEC"
           },
-          data: [30, 45, 34, 35, 43, 56, 36, 53, 42, 45, 44, 35, 32]
+          data: []
         },
         {
           name: 'Memory',
@@ -273,7 +271,7 @@ export class HomeComponent implements OnInit {
           itemStyle: {
             color: "#3BCD79"
           },
-          data: [10, 23, 24, 22, 14, 15, 32, 12, 12, 32, 14, 23, 23]
+          data: []
         },
         {
           name: 'Disk',
@@ -281,7 +279,7 @@ export class HomeComponent implements OnInit {
           itemStyle: {
             color: "#FDC288"
           },
-          data: [20, 23, 14, 12, 34, 25, 22, 42, 52, 35, 34, 13, 13]
+          data: []
         }
       ]
     }
diff --git a/usecaseui-portal/src/assets/images/Services-icon-active.png b/usecaseui-portal/src/assets/images/Services-icon-active.png
new file mode 100644
index 00000000..a1b8c3e9
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/Services-icon-active.png
diff --git a/usecaseui-portal/src/assets/images/Services-icon.png b/usecaseui-portal/src/assets/images/Services-icon.png
new file mode 100644
index 00000000..0ca54865
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/Services-icon.png
diff --git a/usecaseui-portal/src/assets/images/UUIMenuBar.png b/usecaseui-portal/src/assets/images/UUIMenuBar.png
new file mode 100644
index 00000000..bb923858
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/UUIMenuBar.png
diff --git a/usecaseui-portal/src/assets/images/customer-icon-active.png b/usecaseui-portal/src/assets/images/customer-icon-active.png
new file mode 100644
index 00000000..a9155bf3
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/customer-icon-active.png
diff --git a/usecaseui-portal/src/assets/images/customer-icon.png b/usecaseui-portal/src/assets/images/customer-icon.png
new file mode 100644
index 00000000..f0454173
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/customer-icon.png
diff --git a/usecaseui-portal/src/assets/images/home-icon-active.png b/usecaseui-portal/src/assets/images/home-icon-active.png
new file mode 100644
index 00000000..c9371550
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/home-icon-active.png
diff --git a/usecaseui-portal/src/assets/images/home-icon.png b/usecaseui-portal/src/assets/images/home-icon.png
new file mode 100644
index 00000000..3a5e9212
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/home-icon.png
diff --git a/usecaseui-portal/src/assets/images/monitor-icon-active.png b/usecaseui-portal/src/assets/images/monitor-icon-active.png
new file mode 100644
index 00000000..6e06b662
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/monitor-icon-active.png
diff --git a/usecaseui-portal/src/assets/images/monitor-icon.png b/usecaseui-portal/src/assets/images/monitor-icon.png
new file mode 100644
index 00000000..8366b60b
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/monitor-icon.png
diff --git a/usecaseui-portal/src/assets/images/network-icon-active.png b/usecaseui-portal/src/assets/images/network-icon-active.png
new file mode 100644
index 00000000..12bde3d4
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/network-icon-active.png
diff --git a/usecaseui-portal/src/assets/images/network-icon.png b/usecaseui-portal/src/assets/images/network-icon.png
new file mode 100644
index 00000000..c42afa05
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/network-icon.png
diff --git a/usecaseui-portal/src/styles.less b/usecaseui-portal/src/styles.less
index 6bc9652c..32bad49a 100644
--- a/usecaseui-portal/src/styles.less
+++ b/usecaseui-portal/src/styles.less
@@ -769,4 +769,10 @@ nz-notification-container .ant-notification{
       }
     }
   }
+}
+.ant-menu-dark .ant-menu-submenu-open,.ant-menu-dark .ant-menu-submenu-title:hover{
+  color: #ffffff!important;
+}
+.ant-menu-dark .ant-menu-inline.ant-menu-sub{
+  background:#313449!important;
 }
\ No newline at end of file