Merge "Fix monitor display bug"

15 files changed, 856 insertions, 469 deletions

diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/css/UUImain.css b/usecaseui-monitor/src/main/webapp/app/uui/fusion/css/UUImain.css
index 34bb466e..99623316 100644
--- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/css/UUImain.css
+++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/css/UUImain.css
@@ -254,7 +254,7 @@ div .ui-grid-header-cell{
 
 }
 
-/*input框
+/*input
 ----------------------------------------------*/
 .list {
       list-style: none;
diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/appUUI.js b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/appUUI.js
index 9412b433..737ddd77 100644
--- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/appUUI.js
+++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/appUUI.js
@@ -34,4 +34,4 @@ app.config(function ($routeProvider) {
       })
         .otherwise({redirectTo: '/common'})
 });
-var global_url = "http://10.73.160.112:8082/api/usecaseui/server/v1";
+var global_url = "/api/usecaseui/server/v1";
diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/chartLoad.js b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/chartLoad.js
index c94a39c1..c3203aff 100644
--- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/chartLoad.js
+++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/chartLoad.js
@@ -13,7 +13,7 @@
  See the License for the specific language governing permissions and
  limitations under the License.
  */
-diskBarChart = [
+Chart = [
         { "type":"bar", "key": "disk", "yAxis": "1", "values": [
             { "x":'15min' , "y":4}, { "x":'30min' , "y":4}, { "x":'45min' , "y":12},
             { "x":'60min' , "y":3.27}
@@ -53,14 +53,13 @@ nv.addGraph(function() {
         .logScale(false)
         .axisLabel('')
         .tickFormat(d3.format(',.1f'));
-    d3.select('#CPUchart svg')
-        .datum(cpuBarChart)
+    d3.select('#chart svg')
+        .datum(Chart)
         .transition().duration(1000)
         .call(chart1);
-    nv.utils.windowResize(chart1.update);
     return chart1;
 });
-nv.addGraph(function() {
+/*nv.addGraph(function() {
     chart2 = nv.models.multiBarChart()
         .showLegend(false)
         .reduceXTicks(false)
@@ -131,7 +130,7 @@ nv.addGraph(function() {
         .call(chart4);
     nv.utils.windowResize(chart4.update);
     return chart4;
-});
+});*/
 
 function changeValue(s){
     chart1.xAxis.tickValues(s);
@@ -148,25 +147,9 @@ function changerotate(v){
 }
 
 function redraw(c,s1) {
-    diskBarChart[0].values = s1[0];
-    memoryBarChart[0].values = s1[1];
-    cpuBarChart[0].values = s1[2];
-    networkBarChart[0].values = s1[3];
-
-    d3.select('#CPUchart'+c+' svg')
-        .datum(cpuBarChart)
+    Chart[0].values = s1;
+    d3.select('#chart'+c+' svg')
+        .datum(Chart)
         .transition().duration(500)
         .call(chart1);
-    d3.select('#Memorychart'+c+' svg')
-        .datum(memoryBarChart)
-        .transition().duration(500)
-        .call(chart2);
-    d3.select('#Diskchart'+c+' svg')
-        .datum(diskBarChart)
-        .transition().duration(1000)
-        .call(chart3);
-    d3.select('#Networkchart'+c+' svg')
-        .datum(networkBarChart)
-        .transition().duration(1000)
-        .call(chart4);
 }
diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarm-chartController.js b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarm-chartController.js
new file mode 100644
index 00000000..8096d702
--- /dev/null
+++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarm-chartController.js
@@ -0,0 +1,109 @@
+/*
+ Copyright (C) 2017 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.
+ */
+
+app.controller('alarmchartCtrl', ['$scope', '$http', '$routeParams', '$window',
+    function ($scope, $http, $routeParams, $window) {
+        $scope.valuess = [];
+        $scope.today = function () {
+            $scope.startTime = new Date();
+            $scope.endTime = new Date();
+            $http({
+                method: "GET",
+                url: global_url + "/alarm/sourceId",
+                headers: {
+                    'Access-Control-Allow-Origin': "*",
+                    "Content-Type": "application/json",
+                    "Authorization": "Basic " + btoa("usecase" + ':' + "usecase")
+                }
+            }).then(function successCallback(resp) {
+                console.info(resp);
+                $scope.sourceIds = resp.data;
+            }, function errorCallback(resp) {
+
+            });
+        };
+        $scope.today();
+
+        $scope.genDiagram = function () {
+            $http({
+                method: 'POST',
+                url: global_url + "/alarm/diagram",
+                data: {
+                    "sourceId": $scope.sourceId,
+                    "startTime": FormatDate($scope.startTime),
+                    "endTime": FormatDate($scope.endTime)
+                },
+                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
+                transformRequest: function (obj) {
+                    var str = [];
+                    for (var p in obj) {
+                        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
+                    }
+                    return str.join("&");
+                }
+            }).then(function successCallback(resp) {
+                //console.info(resp);
+                if (resp.data.length > 0)
+                    for (var i = 0; i < resp.data.length; i++) {
+                        $scope.valuess[i] = {};
+                        $scope.valuess[i].x = resp.data[i].Time;
+                        $scope.valuess[i].y = resp.data[i].Count;
+                    }
+                for (var d = 0; d < 5; d++) {
+                    window.setTimeout(function () {
+                        redraw("_alarm", $scope.valuess);
+                    }, 1500);
+                };
+
+            }, function errorCallback(resp) {
+
+            });
+        }
+
+
+        $scope.startTimeChanged = function () {
+            if ($scope.startTime > $scope.endTime)
+                $scope.endTime = "";
+            console.info($scope.startTime);
+        };
+        $scope.endTimeChanged = function () {
+            if ($scope.endTime < $scope.startTime)
+                $scope.startTime = "";
+            console.info($scope.endTime);
+        };
+
+        $scope.open1 = function () {
+            $scope.popup1.opened = true;
+        };
+
+        $scope.open2 = function () {
+            $scope.popup2.opened = true;
+        };
+
+        $scope.popup1 = {
+            opened: false
+        };
+
+        $scope.popup2 = {
+            opened: false
+        };
+
+        function FormatDate(strTime) {
+            var date = new Date(strTime);
+            return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes();
+        }
+
+    }]);
diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarm-detailsController.js b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarm-detailsController.js
new file mode 100644
index 00000000..65d1fc3d
--- /dev/null
+++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarm-detailsController.js
@@ -0,0 +1,50 @@
+/*
+ Copyright (C) 2017 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.
+ */
+app.controller("alarmDetailsController",function ($scope,$http,$window) {
+    $scope.back = function () {
+        var obj = $("#lm");
+        angular.element(obj).scope().currentTab = "app/uui/fusion/scripts/view-models/alarm.html";
+    };
+    $http({
+        method : "GET",
+        url : global_url + "/alarm/1/1/null/"+alarmDetailId+"/null/null/null/null"
+    }).then(function successCallback(resp) {
+        $scope.alarmCondition = resp.data.alarms[0].alarmsHeader.alarmCondition;
+        $scope.alarmInterfaceA = resp.data.alarms[0].alarmsHeader.alarmInterfaceA;
+        $scope.eventCategory = resp.data.alarms[0].alarmsHeader.eventCategory;
+        $scope.eventId = resp.data.alarms[0].alarmsHeader.eventId;
+        $scope.eventName = resp.data.alarms[0].alarmsHeader.eventName;
+        $scope.eventServrity = resp.data.alarms[0].alarmsHeader.eventServrity;
+        $scope.eventSourceType = resp.data.alarms[0].alarmsHeader.eventSourceType;
+        $scope.eventType = resp.data.alarms[0].alarmsHeader.eventType;
+        $scope.faultFieldsVersion = resp.data.alarms[0].alarmsHeader.faultFieldsVersion;
+        $scope.lastEpochMicroSec = resp.data.alarms[0].alarmsHeader.lastEpochMicroSec;
+        $scope.nfNamingCode = resp.data.alarms[0].alarmsHeader.nfNamingCode;
+        $scope.nfcNamingCode = resp.data.alarms[0].alarmsHeader.nfcNamingCode;
+        $scope.priority = resp.data.alarms[0].alarmsHeader.priority;
+        $scope.reportingEntityId = resp.data.alarms[0].alarmsHeader.reportingEntityId;
+        $scope.reportingEntityName = resp.data.alarms[0].alarmsHeader.reportingEntityName;
+        $scope.sequence = resp.data.alarms[0].alarmsHeader.sequence;
+        $scope.sourceId = resp.data.alarms[0].alarmsHeader.sourceId;
+        $scope.sourceName = resp.data.alarms[0].alarmsHeader.sourceName;
+        $scope.specificProblem = resp.data.alarms[0].alarmsHeader.specificProblem;
+        $scope.startEpochMicrosec = resp.data.alarms[0].alarmsHeader.startEpochMicrosec;
+        $scope.startTIme = resp.data.alarms[0].alarmsHeader.createTime;
+        $scope.alarmInformation = resp.data.alarms[0].alarmsInformation;
+    },function errorCallback(resq) {
+
+    });
+});
\ No newline at end of file
diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarmController.js b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarmController.js
index 1118e732..fccecb66 100644
--- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarmController.js
+++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/alarmController.js
@@ -13,15 +13,25 @@
  See the License for the specific language governing permissions and
  limitations under the License.
  */
+var alarmDetailId = "";
 app.controller('alarmGridCtrl', ['$scope', '$log', '$http', '$timeout', '$interval' , '$window' ,'uiGridConstants', 'uiGridGroupingConstants',
     function ($scope, $log, $http, $timeout, $interval,$window) {
+        $scope.jump = function(value){
+            alarmDetailId=value;
+            var obj = $("#lm");
+            angular.element(obj).scope().currentTab = "app/uui/fusion/scripts/view-models/alarm-details.html";
+            //angular.element(obj).scope().$apply();
+        };
+        $scope.toChart = function () {
+            var obj = $("#lm");
+            angular.element(obj).scope().currentTab = "app/uui/fusion/scripts/view-models/alarm-chart.html";
+        };
         $scope.selectedRows = new Array();
         $scope.condition1 = "";
         $scope.condition2 = "";
         $scope.condition3 = "";
         $scope.condition4 = "";
         $scope.condition5 = "";
-        $scope.alarmStatus = "null";
         $scope.vfstatus = "null";
         $scope.toggled = function (open) {
             $log.log('Dropdown is now: ', open);
@@ -40,10 +50,9 @@ app.controller('alarmGridCtrl', ['$scope', '$log', '$http', '$timeout', '$interv
             url += arguments[2] === "" ? "/null" : "/" + arguments[2];
             url += arguments[3] === "" ? "/null" : "/" + arguments[3];
             url += arguments[4] === "" ? "/null" : "/" + arguments[4];
-            url += arguments[5] === "" ? "/null" : "/" + arguments[5];
-            url += arguments[6] === "" ? "/null" : "/" + arguments[6];
+            url += arguments[5] === "" ? "/null" : "/" + FormatDate(arguments[5]);
+            url += arguments[6] === "" ? "/null" : "/" + FormatDate(arguments[6]);
             url += arguments[7] === "" ? "/null" : "/" + arguments[7];
-            url += arguments[8] === "" ? "/null" : "/" + arguments[8];
             $http.get(url, {
                 headers: {
                     'Access-Control-Allow-Origin': "*",
@@ -58,21 +67,24 @@ app.controller('alarmGridCtrl', ['$scope', '$log', '$http', '$timeout', '$interv
         };
         $scope.gridOptions = {
             columnDefs: [
-                {field: "alarmsHeader.eventId", displayName: 'Id', enableCellEdit: false},
                 {
                     field: 'alarmsHeader.eventName',
                     displayName: 'eventName',
-                    width: '8%',
-                    enableColumnMenu: false,
+                    cellTemplate: '<a ng-click="grid.appScope.jump(row.entity.alarmsHeader.eventName)"; style="cursor:pointer" href="">{{row.entity.alarmsHeader.eventName}}</a>',
+                    width : 500,
                     enableHiding: false,
                     suppressRemoveSort: true,
                     enableCellEdit: false
                 },
-                {field: "alarmsHeader.vfStatus", displayName: 'IsOpen', enableCellEdit: false},
-                {field: "alarmsHeader.status", displayName: 'Status', cellFilter: 'mapGender', enableCellEdit: false},
-                {field: "alarmsInformation[0].name", displayName: 'Name', enableCellEdit: false},
-                {field: "alarmsInformation[0].value", displayName: 'Value', enableCellEdit: false},
-                {field: "alarmsHeader.createTime", displayName: 'CreateTime', enableCellEdit: false},
+                {field: "alarmsHeader.eventId", displayName: 'eventId', enableCellEdit: false},
+                {field: "alarmsHeader.sourceId", displayName: 'Source Id', enableCellEdit: false},
+                {field: "alarmsHeader.sourceName", displayName: 'Source Name',  enableCellEdit: false},
+                {field: "alarmsHeader.reportingEntityId", displayName: 'Reporting Entity Id', enableCellEdit: false},
+                {field: "alarmsHeader.reportingEntityName", displayName: 'Reporting Entity Name', enableCellEdit: false},
+                {field: "alarmsHeader.Priority", displayName: 'Priority', enableCellEdit: false},
+                {field: "alarmsHeader.createTime", displayName: 'Start Time', enableCellEdit: false},
+                {field: "alarmsHeader.status", displayName: 'Status', cellFilter: 'mapGender',enableCellEdit: false},
+                {field: "option",displayName: 'option', enableCellEdit: false ,cellTemplate: '<button ng-click="grid.appScope.jump(row.entity.alarmsHeader.eventName)" class="btn btn-primary" >Details</button>'},
             ],
             enableSorting: true,
             useExternalSorting: false,
@@ -129,12 +141,12 @@ app.controller('alarmGridCtrl', ['$scope', '$log', '$http', '$timeout', '$interv
         getPage(1, $scope.gridOptions.paginationPageSize, $scope.condition1===""?"":$scope.condition1,
             $scope.condition2===""?"":$scope.condition2, $scope.condition3===""?"":$scope.condition3,
             $scope.condition4===""?"":$scope.condition4, $scope.condition5===""?"":$scope.condition5,
-            $scope.alarmStatus, $scope.vfstatus);
+            $scope.vfstatus);
         $interval(function () {
             getPage(1, $scope.gridOptions.paginationPageSize, $scope.condition1===""?"":$scope.condition1,
                 $scope.condition2===""?"":$scope.condition2, $scope.condition3===""?"":$scope.condition3,
                 $scope.condition4===""?"":$scope.condition4, $scope.condition5===""?"":$scope.condition5,
-                $scope.alarmStatus, $scope.vfstatus);
+                $scope.vfstatus);
         },10000)
 
         $scope.generateCsv = function () {
@@ -152,21 +164,10 @@ app.controller('alarmGridCtrl', ['$scope', '$log', '$http', '$timeout', '$interv
             {id: 5, name: 'NORMAL', count: 7},
             {id: undefined, name: 'All', count: 7}
         ];
-        $scope.selectStatus = function (v) {
-            $scope.alarmStatus = typeof(v) == "undefined" ? "" : v;
-            getPage(1, $scope.gridOptions.paginationPageSize, $scope.condition1===""?"":$scope.condition1,
-                $scope.condition2===""?"":$scope.condition2, $scope.condition3===""?"":$scope.condition3,
-                $scope.condition4===""?"":$scope.condition4, $scope.condition5===""?"":$scope.condition5,
-                $scope.alarmStatus, $scope.vfstatus);
-            $scope.selectedStatus = v;
 
-        };
-        $scope.activeStatus = function (status_id) {
-            return status_id == $scope.selectedStatus;
-        };
         $scope.open = [
-            {id: 1, name: 'open', count: 10},
-            {id: 2, name: 'close', count: 8},
+            {id: 1, name: 'Active', count: 10},
+            {id: 2, name: 'Closed', count: 8},
             {id: undefined, name: 'All', count: 7}
         ];
 
@@ -175,7 +176,7 @@ app.controller('alarmGridCtrl', ['$scope', '$log', '$http', '$timeout', '$interv
             getPage(1, $scope.gridOptions.paginationPageSize, $scope.condition1===""?"":$scope.condition1,
                 $scope.condition2===""?"":$scope.condition2, $scope.condition3===""?"":$scope.condition3,
                 $scope.condition4===""?"":$scope.condition4, $scope.condition5===""?"":$scope.condition5,
-                $scope.alarmStatus, $scope.vfstatus);
+                $scope.vfstatus);
             $scope.selectedOpen = v;
         };
         $scope.activeOpen = function (open_id) {
@@ -216,15 +217,31 @@ app.controller('alarmGridCtrl', ['$scope', '$log', '$http', '$timeout', '$interv
             getPage(1, $scope.gridOptions.paginationPageSize, $scope.condition1===""?"":$scope.condition1,
                 $scope.condition2===""?"":$scope.condition2, $scope.condition3===""?"":$scope.condition3,
                 $scope.condition4===""?"":$scope.condition4, $scope.condition5===""?"":$scope.condition5,
-                $scope.alarmStatus, $scope.vfstatus);
+                $scope.vfstatus);
+        };
+        $scope.open1 = function () {
+            $scope.popup1.opened = true;
         };
+
+        $scope.open2 = function () {
+            $scope.popup2.opened = true;
+        };
+
+        $scope.popup1 = {
+            opened: false
+        };
+
+        $scope.popup2 = {
+            opened: false
+        };
+        function FormatDate(strTime) {
+            var date = new Date(strTime);
+            return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes();
+        }
     }]).filter('mapGender', function () {
     var genderHash = {
-        1: 'CRITICAL',
-        2: 'MAJOR',
-        3: 'MINOR',
-        4: 'WARNING',
-        5: 'NORMAL'
+        1: 'Active',
+        2: 'Closed'
     };
     return function (input) {
         if (!input) {
diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performance-chartController.js b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performance-chartController.js
new file mode 100644
index 00000000..b96abb95
--- /dev/null
+++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performance-chartController.js
@@ -0,0 +1,175 @@
+/*
+ Copyright (C) 2017 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.
+ */
+
+app.controller('pertabCtrl', ['$scope', '$http', '$routeParams', '$window' ,
+    function ($scope, $http, $routeParams, $window) {
+        $scope.sourceIds = ["112","119","101"];
+        $scope.namePs = [];
+        $scope.valuess = [];
+        $scope.namesPIsShow = false;
+        $scope.namesCIsShow = false;
+        $scope.goIsShow = false;
+        $scope.today = function() {
+            $scope.startTime = new Date();
+            $scope.endTime = new Date();
+            $http({
+                method : "GET",
+                url : global_url+"/performance/resourceIds",
+                headers: {
+                    'Access-Control-Allow-Origin': "*",
+                    "Content-Type": "application/json",
+                    "Authorization": "Basic " + btoa("usecase" + ':' + "usecase")
+                }
+            }).then(function successCallback(resp) {
+                $scope.sourceIds = resp.data;
+            },function errorCallback(reps) {
+                
+            });
+        };
+        $scope.today();
+
+
+        $scope.startTimeChanged = function () {
+            if ($scope.startTime > $scope.endTime)
+                $scope.endTime = "";
+        };
+        $scope.endTimeChanged = function () {
+            if ($scope.endTime < $scope.startTime)
+                $scope.startTime = "";
+        };
+
+        $scope.sourceIdChanged = function () {
+            if ($scope.sourceId != null){
+                $scope.namesPIsShow = true;
+                $http({
+                    method : "POST",
+                    url : global_url + "/performance/names",
+                    data : { "sourceId":$scope.sourceId },
+                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+                    transformRequest: function(obj) {
+                        var str = [];
+                        for (var p in obj) {
+                            str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
+                        }
+                        return str.join("&");
+                    }
+
+                }).then(function successCallback(resp) {
+                    $scope.namePs = resp.data;
+                },function errorCallback(resq) {
+
+                });
+            }
+            else{
+                $scope.goIsShow = false;
+                $scope.namesPIsShow = false;
+                $scope.namesCIsShow = false;
+            }
+
+        };
+
+        $scope.namePChanged = function () {
+            if ($scope.nameP != null){
+                $http({
+                    method : "POST",
+                    url : global_url + "/performance/names",
+                    data : { "sourceId":$scope.nameP },
+                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+                    transformRequest: function(obj) {
+                        var str = [];
+                        for (var p in obj) {
+                            str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
+                        }
+                        return str.join("&");
+                    }
+                }).then(function successCallback(resp) {
+                    if (resp.data.length <= 0){
+                        $scope.namesCIsShow = false;
+                        $scope.goIsShow = true;
+                    }else{
+                        $scope.namesCIsShow = true;
+                        $scope.goIsShow = false;
+                        $scope.nameCs = resp.data;
+                    }
+                },function errorCallback(resq) {
+
+                });
+            }
+            else{
+                $scope.goIsShow = false;
+                $scope.namesCIsShow = false;
+            }
+        };
+
+        $scope.nameCChanged = function () {
+          if ($scope.nameC != null){
+              $scope.goIsShow = true;
+          }
+        };
+
+        $scope.genDiagram = function () {
+            $http({
+                method : 'POST',
+                url : global_url + "/performance/diagram",
+                data : { "sourceId":$scope.sourceId,"startTime":FormatDate($scope.startTime),"endTime":FormatDate($scope.endTime),"nameParent":$scope.nameP,"nameChild":$scope.nameC!=null?$scope.nameC:"" },
+                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+                transformRequest: function(obj) {
+                    var str = [];
+                    for (var p in obj) {
+                        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
+                    }
+                    return str.join("&");
+                }
+            }).then(function successCallback(resp) {
+                console.info(resp.data);
+                if (resp.data.length > 0)
+                    for (var i = 0 ; i<resp.data.length ; i++){
+                        $scope.valuess[i] = {};
+                        $scope.valuess[i].x = i+1;
+                        $scope.valuess[i].y = resp.data[i];
+                        $scope.valuess[i].x.length = i;
+                    }
+                for (var d = 0; d < 5; d++) {
+                    window.setTimeout(function () {
+                        redraw("_performance", $scope.valuess);
+                    }, 1500);
+                };
+            },function errorCallback(resp) {
+
+            });
+        }
+
+        $scope.open1 = function() {
+            $scope.popup1.opened = true;
+        };
+
+        $scope.open2 = function() {
+            $scope.popup2.opened = true;
+        };
+
+        $scope.popup1 = {
+            opened: false
+        };
+
+        $scope.popup2 = {
+            opened: false
+        };
+
+        function FormatDate (strTime) {
+            var date = new Date(strTime);
+            return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes();
+        }
+}]);
diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performance-detailsController.js b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performance-detailsController.js
index 44bf8b29..ca87a4af 100644
--- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performance-detailsController.js
+++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performance-detailsController.js
@@ -13,185 +13,27 @@
  See the License for the specific language governing permissions and
  limitations under the License.
  */
-app.controller('pertabCtrl', ['$scope', '$http', '$routeParams', '$window' ,
-    function ($scope, $http, $routeParams, $window) {
-    $scope.tabes = [
-        {title: 'one hour'},
-        {title: 'one day'},
-        {title: 'one month'},
-        {title: 'one year'}
-    ];
-    $scope.valuess = [];
-    $scope.csvData = [];
-    $scope.barChart = function (unit) {
-        $http.get(global_url + '/performance/diagram/' + unit + '/' + permanceId, {
-            headers: {
-                'Access-Control-Allow-Origin': "*",
-                "Content-Type": "application/json"
-            }
-        })
-            .success(function (data) {
-                var v = 0;
-                var i = 0;
-                if (unit === "hour") {
-                    for(var h=0;h<4;h++){
-                        $scope.valuess[h] = [
-                            {"x": '15min', "y": 4}, {"x": '30min', "y": 4}, {"x": '45min', "y": 12},
-                            {"x": '60min', "y": 3.27}
-                        ];
-                    };
-                    angular.forEach(data, function (obj) {
-                        for (var j = 0; j < obj.length; j++, i++) {
-                            if (i >= 4) {
-                                v++;
-                                i = 0;
-                            }
-                            $scope.valuess[v][i].y = obj[j];
-                        }
-                    });
-                    for (var d = 0; d < 5; d++) {
-                        window.setTimeout(function () {
-                            redraw("", $scope.valuess);
-                        }, 1500);
-                    };
-                }
-                if (unit === "day") {
-                    for(var d=0;d<4;d++){
-                        $scope.valuess[d] = [
-                            { "x":'1h' , "y":4}, { "x":'2h' , "y":4}, { "x":'3h' , "y":12},
-                            { "x":'4h' , "y":3.27}, { "x":'5h' , "y":34}, { "x":'6h' , "y":34}, { "x":'7h' , "y":34},
-                            { "x":'8h' , "y":34}, { "x":'9h' , "y":34}, { "x":'10h' , "y":34}, { "x":'11h' , "y":34},
-                            { "x":'12h' , "y":56}, { "x":'13h' , "y":34}, { "x":'14h' , "y":34}, { "x":'15h' , "y":34},
-                            { "x":'16h' , "y":12}, { "x":'17h' , "y":34}, { "x":'18h' , "y":50}, { "x":'19h' , "y":34},
-                            { "x":'20h' , "y":34}, { "x":'21h' , "y":54}, { "x":'22h' , "y":34}, { "x":'23h' , "y":34},
-                            { "x":'24h' , "y":36}
-                        ];
-                    };
-                    angular.forEach(data, function (obj) {
-                        for (var j = 0; j < obj.length; j++, i++) {
-                            if (i >= 24) {
-                                v++;
-                                i = 0;
-                            }
-                            $scope.valuess[v][i].y = obj[j];
-                        }
-                    })
-                    for (var d = 0; d < 5; d++) {
-                        window.setTimeout(function () {
-                            redraw("1", $scope.valuess);
-                        }, 1500);
-                    };
-                }
-                if (unit === "month") {
-                    for(var m=0;m<4;m++){
-                        $scope.valuess[m] =  [
-                            { "x":'1d' , "y":4}, { "x":'2d' , "y":4}, { "x":'3d' , "y":12},
-                            { "x":'4d' , "y":3.27}, { "x":'5d' , "y":34},{ "x":'6d' , "y":4}, { "x":'7d' , "y":4}, { "x":'8d' , "y":12},
-                            { "x":'9d' , "y":3.27}, { "x":'10d' , "y":34}, { "x":'11d' , "y":34}, { "x":'12d' , "y":34},  { "x":'13d' , "y":4}, { "x":'14d' , "y":4}, { "x":'15' , "y":12},
-                            { "x":'16d' , "y":3.27}, { "x":'17d' , "y":34},{ "x":'18d' , "y":4}, { "x":'19d' , "y":4}, { "x":'20d' , "y":12},
-                            { "x":'21d' , "y":3.27}, { "x":'22d' , "y":34}, { "x":'23d' , "y":34}, { "x":'24d' , "y":34}, { "x":'25d' , "y":4}, { "x":'26d' , "y":12},
-                            { "x":'27d' , "y":3.27}, { "x":'28d' , "y":34}, { "x":'29d' , "y":34}, { "x":'30d' , "y":34}, { "x":'31d' , "y":34}
-                        ];
-                    };
-                    angular.forEach(data, function (obj) {
-                        for (var j = 0; j < obj.length; j++, i++) {
-                            if (i >= 31) {
-                                v++;
-                                i = 0;
-                            }
-                            $scope.valuess[v][i].y = obj[j];
-                        }
-                    });
-                    for (var d = 0; d < 5; d++) {
-                        window.setTimeout(function () {
-                            redraw("2", $scope.valuess);
-                        }, 1500);
-                    };
-                }
-                if (unit === "year") {
-                    for(var y=0;y<12;y++){
-                        $scope.valuess[y] = [
-                            {"x": 'Jan', "y": 4}, {"x": 'Feb', "y": 4}, {"x": 'Mar', "y": 12},
-                            {"x": 'Apr', "y": 3.27},  {"x": 'May', "y": 4}, {"x": 'June', "y": 4}, {"x": 'July', "y": 12},
-                            {"x": 'Aug', "y": 3.27},  {"x": 'Sept', "y": 4}, {"x": 'Oct', "y": 4}, {"x": 'Nov', "y": 12},
-                            {"x": 'Jan', "y": 3.27}
-                        ];
-                    };
-                    angular.forEach(data, function (obj) {
-                        for (var j = 0; j < obj.length; j++, i++) {
-                            if (i >= 12) {
-                                v++;
-                                i = 0;
-                            }
-                            $scope.valuess[v][i].y = obj[j];
-                        }
-                    });
-                    for (var d = 0; d < 5; d++) {
-                        window.setTimeout(function () {
-                            redraw("3", $scope.valuess);
-                        }, 1500);
-                    };
-                }
-            });
+app.controller("performanceDetailsController",function ($scope,$http,$window) {
+    $scope.back = function () {
+        var obj = $("#lm");
+        angular.element(obj).scope().currentTab = "app/uui/fusion/scripts/view-models/performance.html";
     };
-    $scope.oneHour = function () {
-        changerotate(0);
-        $scope.barChart('hour');
+    $http({
+        method : "GET",
+        url : global_url + "/performance/1/1/"+permanceId+"/null/null/null/null"
+    }).then(function successCallback(resp) {
+        $scope.eventName = resp.data.performances[0].performanceHeader.eventName;
+        $scope.eventId = resp.data.performances[0].performanceHeader.eventId;
+        $scope.sourceId = resp.data.performances[0].performanceHeader.sourceId;
+        $scope.sourceName = resp.data.performances[0].performanceHeader.sourceName;
+        $scope.reportingEntityId = resp.data.performances[0].performanceHeader.reportingEntityId;
+        $scope.reportingEntityName = resp.data.performances[0].performanceHeader.reportingEntityName;
+        $scope.priority = resp.data.performances[0].performanceHeader.priority;
+        $scope.createTime = resp.data.performances[0].performanceHeader.createTime;
+        $scope.nfcNamingCode = resp.data.performances[0].performanceHeader.nfcNamingCode;
+        $scope.nfNamingCode = resp.data.performances[0].performanceHeader.nfNamingCode;
+        $scope.performanceInformation = resp.data.performances[0].performanceInformation;
+    },function errorCallback(resq) {
 
-    };
-    $scope.oneHour();
-    $scope.oneDay = function () {
-        changerotate(90);
-        $scope.barChart('day');
-    };
-    $scope.oneMonth = function () {
-        changerotate(80);
-        $scope.barChart('month');
-
-    };
-    $scope.oneYear = function () {
-        changerotate(0);
-        $scope.barChart('year');
-    };
-    $scope.generateCsv = function (name) {
-        if (name == "cpu"){
-            for (var i = 0;i < $scope.valuess[2].length;i++){
-                $scope.csvData[i] = {};
-                $scope.csvData[i]["eventId"] = permanceId;
-                $scope.csvData[i]["name"] = name;
-                $scope.csvData[i]["dateUnit"] = $scope.valuess[2][i].x;
-                $scope.csvData[i]["value"] = $scope.valuess[2][i].y;
-            }
-        }
-        if (name == "disk"){
-            for (var i = 0;i < $scope.valuess[0].length;i++){
-                $scope.csvData[i] = {};
-                $scope.csvData[i]["eventId"] = permanceId;
-                $scope.csvData[i]["name"] = name;
-                $scope.csvData[i]["dateUnit"] = $scope.valuess[0][i].x;
-                $scope.csvData[i]["value"] = $scope.valuess[0][i].y;
-            }
-        }
-        if (name == "memory"){
-            for (var i = 0;i < $scope.valuess[1].length;i++){
-                $scope.csvData[i] = {};
-                $scope.csvData[i]["eventId"] = permanceId;
-                $scope.csvData[i]["name"] = name;
-                $scope.csvData[i]["dateUnit"] = $scope.valuess[1][i].x;
-                $scope.csvData[i]["value"] = $scope.valuess[1][i].y;
-            }
-        }
-        if (name == "network"){
-            for (var i = 0;i < $scope.valuess[3].length;i++){
-                $scope.csvData[i] = {};
-                $scope.csvData[i]["eventId"] = permanceId;
-                $scope.csvData[i]["name"] = name;
-                $scope.csvData[i]["dateUnit"] = $scope.valuess[3][i].x;
-                $scope.csvData[i]["value"] = $scope.valuess[3][i].y;
-            }
-        }
-        if($scope.csvData != null ){
-            $window.location = global_url+"/performance/genDiaCsv/"+JSON.stringify($scope.csvData);
-        }
-    }
-}]);
+    });
+});
\ No newline at end of file
diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performanceController.js b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performanceController.js
index be2fd37f..80896c7c 100644
--- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performanceController.js
+++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/controller/performanceController.js
@@ -18,7 +18,6 @@ var permanceId="";
 app.controller('perGridCtrl', ['$scope','$http', '$window', '$interval', 'uiGridConstants', 'uiGridGroupingConstants', '$window' ,
     function ($scope, $http , $window, $interval ) {
         $scope.jump = function(value){
-            console.info(value);
             permanceId=value;
             var obj = $("#lm");
             angular.element(obj).scope().currentTab = "app/uui/fusion/scripts/view-models/performance-details.html";
@@ -35,10 +34,14 @@ app.controller('perGridCtrl', ['$scope','$http', '$window', '$interval', 'uiGrid
                 $scope.seek2===""?"null":$scope.seek2, $scope.seek3===""?"null":$scope.seek3,
                 $scope.seek4===""?"null":$scope.seek4, $scope.seek5===""?"null":$scope.seek5);
         };
+        $scope.toChart = function () {
+            var obj = $("#lm");
+            angular.element(obj).scope().currentTab = "app/uui/fusion/scripts/view-models/performance-chart.html";
+        };
         $scope.gridOptions = {
             columnDefs: [{
                 field: 'performanceHeader.eventName',
-                displayName: 'name',
+                displayName: 'Event Name',
                 width: '10%',
                 enableColumnMenu: false,
                 enableHiding: false,
@@ -47,14 +50,17 @@ app.controller('perGridCtrl', ['$scope','$http', '$window', '$interval', 'uiGrid
             }, {
                     field: "performanceHeader.eventId",
                   enableCellEdit: false,
-                    displayName: 'Id',
-                    cellTemplate: '<a ng-click="grid.appScope.jump(row.entity.performanceHeader.eventId)"; style="cursor:pointer" href="">{{row.entity.performanceHeader.eventId}}</a>',
+                    displayName: 'Event Id',
+                    cellTemplate: '<a ng-click="grid.appScope.jump(row.entity.performanceHeader.sourceId)"; style="cursor:pointer" href="">{{row.entity.performanceHeader.sourceId}}</a>',
                 },
-                {field: "performanceHeader.eventName", displayName: 'State',enableCellEdit: false},
-                {field: "performanceHeader.eventName", displayName: 'Cpu',enableCellEdit: false},
-                {field: "performanceHeader.eventName", displayName: 'Memory',enableCellEdit: false},
-                {field: "performanceHeader.eventName", displayName: 'Disk',enableCellEdit: false},
-                {field: "performanceHeader.eventName", displayName: 'Network',enableCellEdit: false}
+                {field: "performanceHeader.sourceId", displayName: 'Source Id',enableCellEdit: false},
+                {field: "performanceHeader.sourceName", displayName: 'Source Name',enableCellEdit: false},
+                {field: "performanceHeader.reportingEntityId", displayName: 'Reporting Entity Id',enableCellEdit: false},
+                {field: "performanceHeader.reportingEntityName", displayName: 'Reporting Entity Name',enableCellEdit: false},
+                {field: "performanceHeader.priority", displayName: 'Priority',enableCellEdit: false},
+                {field: "performanceHeader.createTime", displayName: 'Start Time',enableCellEdit: false},
+                {field: "option",displayName: 'option', enableCellEdit: false ,
+                    cellTemplate: '<button ng-click="grid.appScope.jump(row.entity.performanceHeader.sourceId)" class="btn btn-primary" >Details</button>'}
             ],
             enableSorting: true,
             useExternalSorting: false,
@@ -150,11 +156,11 @@ app.controller('perGridCtrl', ['$scope','$http', '$window', '$interval', 'uiGrid
         var getPage = function (curPage, pageSize) {
             var firstRow = (curPage - 1) * pageSize;
             var url = global_url+'/performance/' + curPage + '/' + pageSize + '';
-            url += arguments[2] === ""  ? "/null" : "/" + arguments[2];
+            url += arguments[2] === "" ? "/null" : "/" + arguments[2];
             url += arguments[3] === "" ? "/null" : "/" + arguments[3];
             url += arguments[4] === "" ? "/null" : "/" + arguments[4];
-            url += arguments[5] === "" ? "/null" : "/" + arguments[5];
-            url += arguments[6] === "" ? "/null" : "/" + arguments[6];
+            url += arguments[5] === "null" ? "/null" : "/" + FormatDate(arguments[5]);
+            url += arguments[6] === "null" ? "/null" : "/" + FormatDate(arguments[6]);
             $http.get(url, {
                 headers: {
                     'Access-Control-Allow-Origin': "*",
@@ -187,6 +193,25 @@ app.controller('perGridCtrl', ['$scope','$http', '$window', '$interval', 'uiGrid
         $scope.toggleMenu = function () {
             $scope.menuState.show = !$scope.menuState.show;
         }
+        $scope.open1 = function () {
+            $scope.popup1.opened = true;
+        };
+
+        $scope.open2 = function () {
+            $scope.popup2.opened = true;
+        };
+
+        $scope.popup1 = {
+            opened: false
+        };
+
+        $scope.popup2 = {
+            opened: false
+        };
+        function FormatDate(strTime) {
+            var date = new Date(strTime);
+            return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes();
+        };
     }]);
 	
 	
\ No newline at end of file
diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm-chart.html b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm-chart.html
new file mode 100644
index 00000000..03579f60
--- /dev/null
+++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm-chart.html
@@ -0,0 +1,102 @@
+<!--
+    Copyright (C) 2017 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.
+-->
+<style>
+        body {
+            overflow-y:scroll;
+        }
+        text {
+            font: 12px sans-serif;
+        }
+        svg {
+            display: block;
+        }
+        #chart svg {
+            height: 200px;
+            width:  400px;
+            min-width: 100px;
+            min-height: 100px;
+        }
+        tr.z-row-over > td.z-row-inner, tr.z-row-over > .z-cell { background-color: rgb(255, 255, 255); }
+        .nodatadiv {
+            display: table-cell;
+            width: 600px;
+            height:300px;
+            text-align:center;
+            vertical-align: middle;
+        }
+        .nodatainner {
+            padding: 10px;
+        }
+    </style>
+        <!--/.navbar-collapse -->
+        <div class="templatemo-content-wrapper">
+            <div class="templatemo-content">
+                <h1>alarm Chart</h1>
+				   <div class="row" style="min-height: 500px" ng-controller="alarmchartCtrl">
+                    <div class="col-md-12 col-sm-12">
+                        <div class="row">
+                            <div class="col-md-6">
+                                <p class="input-group" style="float:left">
+                                    <label style="float:left;width:80px;line-height:100px">startTime:</label>
+									<div style="float:left;width:100px;padding-top:33px">
+                                    <input type="text" class="form-control" readonly ng-change="startTimeChanged()" uib-datepicker-popup ng-click="open1()" ng-model="startTime" is-open="popup1.opened" datepicker-options ng-required="true" close-text="Close"  />
+                                    </div>
+									<div style="display:block;float:left" uib-timepicker ng-model="startTime" ng-change="startTimeChanged()" hour-step minute-step show-meridian></div>
+                                </p>
+                            </div>
+
+                            <div class="col-md-6" style="float:left">
+                                <p class="input-group" style="float:left">
+                                    <label style="float:left;width:80px;line-height:100px">endTime:</label>
+									<div style="float:left;width:100px;padding-top:33px;">
+                                    <input type="text" class="form-control" readonly ng-change="endTimeChanged()" ng-click="open2()" uib-datepicker-popup ng-model="endTime" is-open="popup2.opened" datepicker-options ng-required="true" close-text="Close" />
+                                    </div>
+									<div style="display:block;float:left" uib-timepicker ng-model="endTime" ng-change="endTimeChanged()" hour-step minute-step show-meridian></div>
+                                </p>
+                            </div>
+							<div class="col-md-6" style="width:100%;padding-bottom:20px;">
+								<p>
+									<div style="float:left;padding-right:30px;">
+										<label style="float:left;width:80px;line-height:30px;">sourceId:</label>
+										<div style="float:left;width:130px;">
+										<select class="form-control" ng-change="sourceIdChanged()" ng-model="sourceId" ng-options="s for s in sourceIds" >
+											<option value="">--- chose ---</option>
+										</select>
+										</div>
+									</div>
+									<div style="float:left">
+										<button style="padding-top:6px;" class="btn btn-default" ng-click="genDiagram()">submit</button>
+									</div>
+								</p>
+							</div>
+						
+							<div class="col-md-6 col-sm-12" style="width:100%">
+								<div class="panel panel-success">
+									<div class="panel-heading">Chart
+										<button ng-click="generateCsv('cpu');" class="btn btn-primary" style="float: right;margin-top:-7px;display: none ">CSV</button>
+									</div>
+									<div align="center"><H3></H3></div><div id="chart_alarm"> <svg></svg> </div>
+								</div>
+							</div>
+						</div>
+                    </div>
+                    <br />
+                    <br />
+                    <br />
+                    <br />
+                </div>
+            </div>
+        </div>
\ No newline at end of file
diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm-details.html b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm-details.html
new file mode 100644
index 00000000..96cf8460
--- /dev/null
+++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm-details.html
@@ -0,0 +1,99 @@
+<!--
+    Copyright (C) 2017 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.
+-->
+<div class="templatemo-content" ng-controller="alarmDetailsController">
+    <h1>VNF Alarm Details</h1>
+
+    
+        
+        <button style="position:relative;left:75%;" ng-click="back()" class="btn btn-primary">back</button>
+    
+    <div>
+		<span>Header Information</span>
+        <table width="80%" border="1" cellspacing="50%" cellpadding="10">
+            <tr>
+                <th style="background-color:lightblue;">Event Name</th>
+                <td>{{eventName}}</td>
+                <th style="background-color:lightblue;">Event Id</th>
+                <td>{{eventId}}</td>
+            </tr>
+            <tr>
+                <th style="background-color:lightblue;">Source Id</th>
+                <td>{{sourceId}}</td>
+                <th style="background-color:lightblue;">Source Name</th>
+                <td>{{sourceName}}</td>
+            </tr>
+            <tr>
+                <th style="background-color:lightblue;">Reporting Entity Id</th>
+                <td>{{reportingEntityId}}</td>
+                <th style="background-color:lightblue;">Reporting Entity Name</th>
+                <td>{{reportingEntityName}}</td>
+            </tr>
+            <tr>
+                <th style="background-color:lightblue;">Priority</th>
+                <td>{{priority}}</td>
+                <th style="background-color:lightblue;">Start Time</th>
+                <td>{{startTIme}}</td>
+            </tr>
+            <tr>
+                <th style="background-color:lightblue;">NFC Naming Code</th>
+                <td>{{nfcNamingCode}}</td>
+                <th style="background-color:lightblue;">NF Naming Code</th>
+                <td>{{nfNamingCode}}</td>
+            </tr>
+        </table>
+    </div>
+    <div style="padding-top:10px;">
+        <span>
+            Detail Information
+        </span>
+        <table width="80%" border="1" cellspacing="50%" cellpadding="10">
+            <tr>
+                <th style="background-color:lightblue;">Event Servrity</th>
+                <td>{{eventServrity}}</td>
+                <th style="background-color:lightblue;">Event Source Type</th>
+                <td>{{eventSourceType}}</td>
+            </tr>
+            <tr>
+                <th style="background-color:lightblue;">Event Category</th>
+                <td>{{eventCategory}}</td>
+                <th style="background-color:lightblue;">Alarm InterfaceA</th>
+                <td>{{alarmInterfaceA}}</td>
+            </tr>
+            <tr>
+                <th style="background-color:lightblue;">Alarm Condition</th>
+                <td>{{alarmCondition}}</td>
+                <th style="background-color:lightblue;">Specific Problem</th>
+                <td>{{specificProblem}}</td>
+            </tr>
+        </table>
+    </div>
+    <div style="padding-top:10px;">
+        <span>
+            Additional Information
+        </span>
+        <table width="80%" border="1" cellspacing="50%" cellpadding="10">
+            <tr>
+                <th style="background-color:lightblue;">Item Name</th>
+                <th style="background-color:lightblue;">Item Value</th>
+            </tr>
+            <tbody ng-repeat="info in alarmInformation">
+                <td>{{info.name}}</td>
+                <td>{{info.value}}</td>
+            </tbody>
+        </table>
+    </div>
+
+</div>
\ No newline at end of file
diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm.html b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm.html
index dc18c380..fdae95b9 100644
--- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm.html
+++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/alarm.html
@@ -14,24 +14,11 @@
     limitations under the License.
 -->
 <div class="templatemo-content" ng-controller="alarmGridCtrl">
-    <h1>Alarm</h1>
+    <h1>VNF Alarm</h1>
     <div class="row margin-bottom-20">
     </div>
     <div class="row margin-bottom-10">
-        <div class="col-md-8">
-            <ul class="nav nav-pills">
-                <li style="background-color: #ddd"
-                    ng-repeat="s in status"
-                    ng-click="selectStatus(s.id)"
-                    ng-class="{active:activeStatus(s.id)}">
-                    <a href="">
-                        {{s.name}}
-                        <span class="badge">{{s.count}}</span>
-                    </a>
-                </li>
-                <input type="hidden" ng-model="selectedStatus"/>
-            </ul>
-        </div>
+
         <div class="col-md-4">
             <ul class="nav nav-pills">
                 <li style="background-color: #ddd" ng-repeat="O in open"
@@ -47,14 +34,20 @@
         </div>
     </div>
     <ul class="list">
-        <li>cpu <input ng-model="condition1" type="text"/></li>
-        <li>state <input ng-model="condition2" type="text"/></li>
-        <li>memory <input ng-model="condition3" type="text"/></li>
+        <li>Source Id <input ng-model="condition1" type="text"/></li>
+        <li>Source Name <input ng-model="condition2" type="text"/></li>
+        <li>Priority <input ng-model="condition3" type="text"/></li>
         <button ng-click="alarmSearch()">search</button>
     </ul>
     <ul class="list" ng-show='menuState.show'>
-        <li>disk <input ng-model="condition4" type="text"/></li>
-        <li>Network <input ng-model="condition5" type="text"/></li>
+        <li>Start Time
+            <input type="text" class="form-control" readonly ng-click="open1()" uib-datepicker-popup ng-model="condition4" is-open="popup1.opened" datepicker-options ng-required="true" close-text="Close" />
+            <div style="display:block;float:left" uib-timepicker ng-model="condition4" hour-step minute-step show-meridian></div>
+        </li>
+        <li>
+            End Time <input type="text" class="form-control" ng-click="open2()" readonly uib-datepicker-popup ng-model="condition5" is-open="popup2.opened" datepicker-options ng-required="true" close-text="Close" />
+            <div style="display:block;float:left" uib-timepicker ng-model="condition5" hour-step minute-step show-meridian></div>
+        </li>
     </ul>
     <div class="row">
         <div class="col-md-5" style="border-top:1px dotted #ddd">
@@ -71,7 +64,8 @@
         </div>
         <div class="col-md-1">
 
-            <button ng-click="generateCsv()" class="btn btn-primary">CSV</button>
+            <!--<button ng-click="generateCsv()" class="btn btn-primary">CSV</button>-->
+            <button ng-click="toChart()" class="btn btn-primary">Chart</button>
         </div>
     </div>
     <div>
diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/performance-chart.html b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/performance-chart.html
new file mode 100644
index 00000000..9f9ccbb3
--- /dev/null
+++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/performance-chart.html
@@ -0,0 +1,118 @@
+<!--
+    Copyright (C) 2017 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.
+-->
+<style>
+        body {
+            overflow-y:scroll;
+        }
+        text {
+            font: 12px sans-serif;
+        }
+        svg {
+            display: block;
+        }
+        #chart svg {
+            height: 200px;
+            width:  400px;
+            min-width: 100px;
+            min-height: 100px;
+        }
+        tr.z-row-over > td.z-row-inner, tr.z-row-over > .z-cell { background-color: rgb(255, 255, 255); }
+        .nodatadiv {
+            display: table-cell;
+            width: 600px;
+            height:300px;
+            text-align:center;
+            vertical-align: middle;
+        }
+        .nodatainner {
+            padding: 10px;
+        }
+    </style>
+        <!--/.navbar-collapse -->
+        <div class="templatemo-content-wrapper">
+            <div class="templatemo-content">
+                <h1>Performance Chart</h1>
+				   <div class="row" style="min-height: 500px" ng-controller="pertabCtrl">
+                    <div class="col-md-12 col-sm-12">
+                        <div class="row">
+                            <div class="col-md-6">
+                                <p class="input-group" style="float:left">
+                                    <label style="float:left;width:80px;line-height:100px">startTime:</label>
+									<div style="float:left;width:100px;padding-top:33px">
+                                    <input type="text" class="form-control" readonly ng-change="startTimeChanged()" uib-datepicker-popup ng-click="open1()" ng-model="startTime" is-open="popup1.opened" datepicker-options ng-required="true" close-text="Close"  />
+                                    </div>
+									<div style="display:block;float:left" uib-timepicker ng-model="startTime" ng-change="startTimeChanged()" hour-step minute-step show-meridian></div>
+                                </p>
+                            </div>
+
+                            <div class="col-md-6" style="float:left">
+                                <p class="input-group" style="float:left">
+                                    <label style="float:left;width:80px;line-height:100px">endTime:</label>
+									<div style="float:left;width:100px;padding-top:33px;">
+                                    <input type="text" class="form-control" readonly ng-change="endTimeChanged()" ng-click="open2()" uib-datepicker-popup ng-model="endTime" is-open="popup2.opened" datepicker-options ng-required="true" close-text="Close" />
+                                    </div>
+									<div style="display:block;float:left" uib-timepicker ng-model="endTime" ng-change="endTimeChanged()" hour-step minute-step show-meridian></div>
+                                </p>
+                            </div>
+							<div class="col-md-6" style="width:100%;padding-bottom:20px;">
+								<p>
+									<div style="float:left;padding-right:30px;">
+										<label style="float:left;width:80px;line-height:30px;">sourceId:</label>
+										<div style="float:left;width:130px;">
+										<select class="form-control" ng-change="sourceIdChanged()" ng-model="sourceId" ng-options="s for s in sourceIds" >
+											<option value="">--- chose ---</option>
+										</select>
+										</div>
+									</div>
+									<div style="float:left;padding-right:30px" ng-show="namesPIsShow">
+										<label style="float:left;width:50px;line-height:30px;">name:</label>
+										<div style="float:left;width:130px;">
+										<select class="form-control" ng-change="namePChanged()" ng-model="nameP" ng-options="np for np in namePs" >
+											<option value="">--- chose ---</option>
+										</select>
+										</div>
+									</div>
+									<div style="float:left;padding-right:30px" ng-show="namesCIsShow" style="float:left">
+										<label style="float:left;width:50px;line-height:30px;">name:</label>
+										<div style="float:left;width:130px;">
+										<select class="form-control" ng-model="nameC" ng-change="nameCChanged()" ng-options="nc for nc in nameCs" >
+											<option value="">--- chose ---</option>
+										</select>
+										</div>
+									</div>
+									<div ng-show="goIsShow" style="float:left">
+										<button style="padding-top:6px;" class="btn btn-default" ng-click="genDiagram()">Go</button>
+									</div>
+								</p>
+							</div>
+						
+							<div class="col-md-12 col-sm-12" >
+								<div class="panel panel-success">
+									<div class="panel-heading">Chart
+										<button ng-click="generateCsv('cpu');" class="btn btn-primary" style="float: right;margin-top:-7px;display: none ">CSV</button>
+									</div>
+									<div id="chart_performance"> <svg></svg> </div>
+								</div>
+							</div>
+						</div>
+                    </div>
+                    <br />
+                    <br />
+                    <br />
+                    <br />
+                </div>
+            </div>
+        </div>
\ No newline at end of file
diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/performance-details.html b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/performance-details.html
index 054b5f5f..61c2bc57 100644
--- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/performance-details.html
+++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/performance-details.html
@@ -13,192 +13,62 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 -->
-<style>
-        body {
-            overflow-y:scroll;
-        }
-        text {
-            font: 12px sans-serif;
-        }
-        svg {
-            display: block;
-        }
-        #CPUchart,#Memorychart,#Diskchart,#Networkchart svg {
-            height: 200px;
-            width:  400px;
-            min-width: 100px;
-            min-height: 100px;
-        }
-        tr.z-row-over > td.z-row-inner, tr.z-row-over > .z-cell { background-color: rgb(255, 255, 255); }
-        .nodatadiv {
-            display: table-cell;
-            width: 600px;
-            height:300px;
-            text-align:center;
-            vertical-align: middle;
-        }
-        .nodatainner {
-            padding: 10px;
-        }
-    </style>
-        <!--/.navbar-collapse -->
-        <div class="templatemo-content-wrapper">
-            <div class="templatemo-content">
-                <h1>Performance Details</h1>
-				   <div class="row" style="min-height: 500px" ng-controller="pertabCtrl">
-                    <div class="col-md-12 col-sm-12">
-                        <uib-tabset active="active" >
-                                <uib-tab heading="one hour" ng-click="oneHour()" >
-                                <div class="templatemo-charts">
-                                    <div class="row" style="margin-top: 10px">
-                                        <div class="col-md-6 col-sm-12">
-                                            <div class="panel panel-success">
-                                                <div class="panel-heading">CPU
-                                                    <button ng-click="generateCsv('cpu');" class="btn btn-primary" style="float: right;margin-top:-7px; ">CSV</button>
-                                                </div>
-                                                <div align="center"><H3></H3></div><div id="CPUchart"> <svg></svg> </div>
-                                            </div>
-                                        </div>
-                                        <div class="col-md-6 col-sm-12">
-                                            <div class="panel panel-success">
-                                                <div class="panel-heading">Memory
-                                                    <button ng-click="generateCsv('memory');" class="btn btn-primary" style="float: right;margin-top:-7px; ">CSV</button></div>
-                                                <div align="center"><H3></H3></div><div id="Memorychart"> <svg></svg> </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="row">
-                                        <div class="col-md-6 col-sm-12">
-                                            <div class="panel panel-success">
-                                                <div class="panel-heading">Disk
-                                                    <button ng-click="generateCsv('disk');" class="btn btn-primary" style="float: right;margin-top:-7px; ">CSV</button></div>
-                                                <div align="center"><H3></H3></div><div id="Diskchart"> <svg></svg> </div>
-                                            </div>
-                                        </div>
-                                        <div class="col-md-6 col-sm-12">
-                                            <div class="panel panel-success">
-                                                <div class="panel-heading">Network
-                                                    <button ng-click="generateCsv('network');" class="btn btn-primary" style="float: right;margin-top:-7px; ">CSV</button></div>
-                                                <div align="center"><H3></H3></div><div id="Networkchart"> <svg></svg> </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </uib-tab>
-                            <uib-tab heading="one day" ng-click="oneDay()">
-                                <div class="templatemo-charts">
-                                    <div class="row" style="margin-top: 10px">
-                                        <div class="col-md-6 col-sm-12">
-                                            <div class="panel panel-success">
-                                                <div class="panel-heading">CPU
-                                                    <button ng-click="generateCsv('cpu');" class="btn btn-primary" style="float: right;margin-top:-7px; ">CSV</button></div>
-                                                <div align="center"><H3></H3></div><div id="CPUchart1"> <svg></svg> </div>
-                                            </div>
-                                        </div>
-                                        <div class="col-md-6 col-sm-12">
-                                            <div class="panel panel-success">
-                                                <div class="panel-heading">Memory
-                                                    <button ng-click="generateCsv('memory');" class="btn btn-primary" style="float: right;margin-top:-7px; ">CSV</button></div>
-                                                <div align="center"><H3></H3></div><div id="Memorychart1"> <svg></svg> </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="row">
-                                        <div class="col-md-6 col-sm-12">
-                                            <div class="panel panel-success">
-                                                <div class="panel-heading">Disk
-                                                    <button ng-click="generateCsv('disk');" class="btn btn-primary" style="float: right;margin-top:-7px; ">CSV</button></div>
-                                                <div align="center"><H3></H3></div><div id="Diskchart1"> <svg></svg> </div>
-                                            </div>
-                                        </div>
-                                        <div class="col-md-6 col-sm-12">
-                                            <div class="panel panel-success">
-                                                <div class="panel-heading">Network
-                                                    <button ng-click="generateCsv('network');" class="btn btn-primary" style="float: right;margin-top:-7px; ">CSV</button></div>
-                                                <div align="center"><H3></H3></div><div id="Networkchart1"> <svg></svg> </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </uib-tab>
-                            <uib-tab heading="one month" ng-click="oneMonth()">
-                                <div class="templatemo-charts">
-                                    <div class="row" style="margin-top: 10px">
-                                        <div class="col-md-6 col-sm-12">
-                                            <div class="panel panel-success">
-                                                <div class="panel-heading">CPU
-                                                    <button ng-click="generateCsv('cpu');" class="btn btn-primary" style="float: right;margin-top:-7px; ">CSV</button></div>
-                                                <div align="center"><H3></H3></div><div id="CPUchart2"> <svg></svg> </div>
-                                            </div>
-                                        </div>
-                                        <div class="col-md-6 col-sm-12">
-                                            <div class="panel panel-success">
-                                                <div class="panel-heading">Memory
-                                                    <button ng-click="generateCsv('memory');" class="btn btn-primary" style="float: right;margin-top:-7px; ">CSV</button></div>
-                                                <div align="center"><H3></H3></div><div id="Memorychart2"> <svg></svg> </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="row">
-                                        <div class="col-md-6 col-sm-12">
-                                            <div class="panel panel-success">
-                                                <div class="panel-heading">Disk
-                                                    <button ng-click="generateCsv('disk');" class="btn btn-primary" style="float: right;margin-top:-7px; ">CSV</button></div>
-                                                <div align="center"><H3></H3></div><div id="Diskchart2"> <svg></svg> </div>
-                                            </div>
-                                        </div>
-                                        <div class="col-md-6 col-sm-12">
-                                            <div class="panel panel-success">
-                                                <div class="panel-heading">Network
-                                                    <button ng-click="generateCsv('network');" class="btn btn-primary" style="float: right;margin-top:-7px; ">CSV</button></div>
-                                                <div align="center"><H3></H3></div><div id="Networkchart2"> <svg></svg> </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </uib-tab>
-                            <uib-tab heading="one year" ng-click="oneYear()">
-                                <div class="templatemo-charts">
-                                    <div class="row" style="margin-top: 10px">
-                                        <div class="col-md-6 col-sm-12">
-                                            <div class="panel panel-success">
-                                                <div class="panel-heading">CPU
-                                                    <button ng-click="generateCsv('cpu');" class="btn btn-primary" style="float: right;margin-top:-7px; ">CSV</button></div>
-                                                <div align="center"><H3></H3></div><div id="CPUchart3"> <svg></svg> </div>
-                                            </div>
-                                        </div>
-                                        <div class="col-md-6 col-sm-12">
-                                            <div class="panel panel-success">
-                                                <div class="panel-heading">Memory
-                                                    <button ng-click="generateCsv('memory');" class="btn btn-primary" style="float: right;margin-top:-7px; ">CSV</button></div>
-                                                <div align="center"><H3></H3></div><div id="Memorychart3"> <svg></svg> </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="row">
-                                        <div class="col-md-6 col-sm-12">
-                                            <div class="panel panel-success">
-                                                <div class="panel-heading">Disk
-                                                    <button ng-click="generateCsv('disk');" class="btn btn-primary" style="float: right;margin-top:-7px; ">CSV</button></div>
-                                                <div align="center"><H3></H3></div><div id="Diskchart3"> <svg></svg> </div>
-                                            </div>
-                                        </div>
-                                        <div class="col-md-6 col-sm-12">
-                                            <div class="panel panel-success">
-                                                <div class="panel-heading">Network
-                                                    <button ng-click="generateCsv('network');" class="btn btn-primary" style="float: right;margin-top:-7px; ">CSV</button></div>
-                                                <div align="center"><H3></H3></div><div id="Networkchart3"> <svg></svg> </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </uib-tab>
-                        </uib-tabset>
-                    </div>
-                    <br />
-                    <br />
-                    <br />
-                    <br />
-                </div>
-            </div>
-        </div>
\ No newline at end of file
+<div class="templatemo-content" ng-controller="performanceDetailsController">
+    <h1>VNF Performance Data Details</h1>
+
+    
+        
+        <button style="position:relative;left:75%;"  ng-click="back()" class="btn btn-primary">back</button>
+    
+    <div>
+		<span>Header Information</span>
+        <table width="80%" border="1" cellspacing="50%" cellpadding="10">
+            <tr>
+                <th style="background-color:lightblue;">Event Name</th>
+                <td>{{eventName}}</td>
+                <th style="background-color:lightblue;">Event Id</th>
+                <td>{{eventId}}</td>
+            </tr>
+            <tr>
+                <th style="background-color:lightblue;">Source Id</th>
+                <td>{{sourceId}}</td>
+                <th style="background-color:lightblue;">Source Name</th>
+                <td>{{sourceName}}</td>
+            </tr>
+            <tr>
+                <th style="background-color:lightblue;">Reporting Entity Id</th>
+                <td>{{reportingEntityId}}</td>
+                <th style="background-color:lightblue;">Reporting Entity Name</th>
+                <td>{{reportingEntityName}}</td>
+            </tr>
+            <tr>
+                <th style="background-color:lightblue;">Priority</th>
+                <td>{{priority}}</td>
+                <th style="background-color:lightblue;">Start Time</th>
+                <td>{{createTime}}</td>
+            </tr>
+            <tr>
+                <th style="background-color:lightblue;">NFC Naming Code</th>
+                <td>{{nfcNamingCode}}</td>
+                <th style="background-color:lightblue;">NF Naming Code</th>
+                <td>{{nfNamingCode}}</td>
+            </tr>
+        </table>
+    </div>
+    <div style="padding-top:10px;">
+        <span>
+            Additional Information
+        </span>
+        <table width="80%" border="1" cellspacing="50%" cellpadding="10">
+            <tr>
+                <th style="background-color:lightblue;">Item Name</th>
+                <th style="background-color:lightblue;">Item Value</th>
+            </tr>
+            <tbody ng-repeat="info in performanceInformation">
+                <td>{{info.name}}</td>
+                <td>{{info.value}}</td>
+            </tbody>
+        </table>
+    </div>
+
+</div>
\ No newline at end of file
diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/performance.html b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/performance.html
index 426836c6..f2fc7320 100644
--- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/performance.html
+++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/performance.html
@@ -18,14 +18,16 @@
         <h1>Performance</h1>
         <div>
             <ul class="list">
-                <li>cpu <input type="text" ng-model="seek1"/></li>
-                <li>state <input type="text" ng-model="seek2"/></li>
-                <li>memory <input type="text" ng-model="seek3"/></li>
+                <li>Source Id <input type="text" ng-model="seek1"/></li>
+                <li>Source Name <input type="text" ng-model="seek2"/></li>
+                <li>Priority <input type="text" ng-model="seek3"/></li>
                 <button ng-click="getSearch()">search</button>
             </ul>
             <ul class="list" ng-show='menuState.show'>
-                <li>disk <input type="text" ng-model="seek4"/></li>
-                <li>Network <input type="text" ng-model="seek5"/></li>
+                <li>Start Time <input type="text" class="form-control" readonly ng-click="open1()" uib-datepicker-popup ng-model="seek4" is-open="popup1.opened" datepicker-options ng-required="true" close-text="Close" />
+                    <div style="display:block;float:left" uib-timepicker ng-model="seek4" hour-step minute-step show-meridian></div></li>
+                <li>End Time <input type="text" class="form-control" readonly ng-click="open2()" uib-datepicker-popup ng-model="seek5" is-open="popup2.opened" datepicker-options ng-required="true" close-text="Close" />
+                    <div style="display:block;float:left" uib-timepicker ng-model="seek5" hour-step minute-step show-meridian></div></li>
             </ul>
             <div class="row">
                 <div class="col-md-5" style="border-top:1px dotted #ddd">
@@ -44,7 +46,8 @@
                     </div>
                 </div>
                 <div class="col-md-1">
-                    <button ng-click="generateCsv()" class="btn btn-primary">CSV</button>
+                  <!--  <button ng-click="generateCsv()" class="btn btn-primary">CSV</button>-->
+                    <button ng-click="toChart()" class="btn btn-primary">Chart</button>
                 </div>
             </div>
             <div ui-grid="gridOptions" style="width: 100%;margin-top:10px; text-align: center;" ui-grid-edit