fix alarm and performance chart bug

Change-Id: I77f1f545fe4517bc18ef16cdc62af2f38d06eebe
Issue-ID: USECASEUI-119
Signed-off-by: zhangab <zhanganbing@chinamobile.com>

9 files changed, 389 insertions, 246 deletions

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
index ba298553..d064f311 100644
--- 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
@@ -21,6 +21,8 @@ app.controller('alarmchartCtrl', ['$scope', '$http', '$routeParams', '$window',
         $scope.ndaShow = false;
         $scope.hdaShow = false;
         $scope.sourceId = "";
+        $scope.hourshow = false;
+        $scope.dayshow = true;
         $scope.today = function () {
             $scope.startTime = new Date();
             $scope.endTime = new Date();
@@ -39,64 +41,6 @@ app.controller('alarmchartCtrl', ['$scope', '$http', '$routeParams', '$window',
         };
         $scope.today();
 
-        $scope.options = {
-            chart: {
-                type: 'historicalBarChart',
-                height: 300,
-                margin : {
-                    top: 20,
-                    right: 20,
-                    bottom: 65,
-                    left: 50
-                },
-                x: function(d){return d[0];},
-                y: function(d){return d[1];},
-                showValues: true,
-                valueFormat: function(d){
-                    return d3.format(',.1f')(d);
-                },
-                duration: 100,
-                xAxis: {
-                    //axisLabel: 'X Axis',
-                    tickFormat: function(d) {
-                        return d3.time.format('%x %H:%M')(new Date(d))
-                    },
-                    rotateLabels: 30,
-                    showMaxMin: true
-                },
-                yAxis: {
-                    //axisLabel: 'Y Axis',
-                    axisLabelDistance: -10,
-                    tickFormat: function(d){
-                        return d3.format(',.1f')(d);
-                    }
-                },
-                tooltip: {
-                    keyFormatter: function(d) {
-                        return d3.time.format('%x %H:%M')(new Date(d));
-                    }
-                },
-                zoom: {
-                    enabled: false,
-                    scaleExtent: [1, 10],
-                    useFixedDomain: false,
-                    useNiceScale: false,
-                    horizontalOff: false,
-                    verticalOff: false,
-                    unzoomEventType: 'dblclick.zoom'
-                }
-            }
-        };
-
-
-        $scope.data = [
-            {
-                "key" : "Quantity" ,
-                "bar": true,
-                "values" : []
-            }];
-
-
         $scope.genDiagram = function () {
             $http({
                 method: 'POST',
@@ -105,7 +49,7 @@ app.controller('alarmchartCtrl', ['$scope', '$http', '$routeParams', '$window',
                     "sourceId": $scope.sourceId,
                     "startTime": FormatDate($scope.startTime),
                     "endTime": FormatDate($scope.endTime),
-                    "showMode" : ($scope.showModeId==undefined?"auto":$scope.showModeId)
+                    "format" : ($scope.showModeId==undefined?"auto":$scope.showModeId)
                 },
                 headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                 transformRequest: function (obj) {
@@ -116,37 +60,45 @@ app.controller('alarmchartCtrl', ['$scope', '$http', '$routeParams', '$window',
                     return str.join("&");
                 }
             }).then(function successCallback(resp) {
+                console.log(resp);
                 $scope.chartShow = true;
-                if (resp.data.length > 0){
+                if (resp.data.allList){
                     $scope.ndaShow = false;
                     $scope.hdaShow = true;
-                    $scope.data = [
-                        {
-                            "key" : "Max" ,
-                            "bar": true,
-                            "values" : resp.data
-                        }];
-                    $scope.api.refresh();
+                    drawAlarmLine(resp.data,alarmChart);
                 }
                 else{
                     $scope.ndaShow = true;
                     $scope.hdaShow = false;
-                    $scope.data = [
-                        {
-                            "key" : "Max" ,
-                            "bar": true,
-                            "values" : []
-                        }];
-                    $scope.api.refresh();
                 }
 
 
             }, function errorCallback(resp) {
-
+                
             });
         }
-
+        $scope.showModeIdChanged = function(){
+
+            if($scope.showModeId == 'hour'){
+                // console.log(typeof($scope.startTime))
+                // console.log(String($scope.startTime))
+                var str = String($scope.startTime);
+                var str2 = String($scope.endTime);
+                $scope.startTime = new Date(str.replace(/\:[0-9]{2}\:/,':00:'));
+                $scope.endTime = new Date(str2.replace(/\:[0-9]{2}\:/,':00:'));
+                $scope.hourshow = true;
+                $scope.dayshow = true;
+            }else if($scope.showModeId == 'day'){
+                $scope.hourshow = false;
+                $scope.dayshow = true;
+            }else if($scope.showModeId == 'month'){
+                $scope.hourshow = false;
+                $scope.dayshow = false;
+            }
+            
+        }
         $scope.startTimeChanged = function () {
+
             if ($scope.startTime > $scope.endTime)
                 $scope.endTime = "";
         };
@@ -171,11 +123,109 @@ app.controller('alarmchartCtrl', ['$scope', '$http', '$routeParams', '$window',
             opened: false
         };
 
-        $scope.showModeIds = ["minute","hour","day","month","year"];
-
+        $scope.showModeIds = ["hour","day","month"];
+        $scope.showModeId = 'day';
         function FormatDate(strTime) {
             var date = new Date(strTime);
-            return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes();
+            if($scope.showModeId == 'hour'){
+                return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() 
+            }
+            if($scope.showModeId == 'day'){
+                return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() 
+            }
+            if($scope.showModeId == 'month'){
+                return date.getFullYear() + "-" + (date.getMonth() + 1)
+            }
+            
+            // return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes();
         }
-
+        // 获取折线图盒子
+        var alarmChart = echarts.init(document.getElementById("alarmChart"));
+   
+        function drawAlarmLine(data,myChart){
+            var names = Object.keys(data);
+            var myseries = [];
+            names.forEach(function (item) {
+                if(item != 'dateList'){
+                    myseries.push({
+                        name: item,
+                        type: 'line',
+                        symbol: 'circle',
+                        symbolSize: 10,
+                        data: data[item]
+                    })
+                }
+            })
+            var options = {
+                  tooltip: {
+                    trigger: 'axis',
+                    formatter: (params) => {
+                      var res = '<p>' + params[0].name + '</p>' + '<div>';
+                    //   console.log(params);
+                      for (var i = 0; i < params.length; i++) {
+                        res += '<span></span>' + params[i].seriesName + ' : ' + params[i].value + '</br>';
+                      }
+                      res += '</div>';
+                      return res;
+                    }
+                  },
+                  legend: {
+                    data: names,
+                    top: 10,
+                    icon: 'rect',
+                    itemWidth: 10,
+                    itemHeight: 10
+                  },
+                  grid: {
+                    left: '3%',
+                    right: '5%',
+                    bottom: '5%',
+                    top: '15%',
+                    containLabel: true
+                  },
+                  xAxis: {
+                    type: 'category',
+                    name: 'Time',
+                    boundaryGap: false,
+                    data: data.dateList,
+                    axisLabel:{
+                        formatter:(value)=>{
+                            if($scope.showModeId == 'day'){
+                                return value.slice(5,10)
+                            }else if($scope.showModeId == 'hour'){
+                                return value.slice(5,16)
+                            }else if($scope.showModeId == 'month'){
+                                return value.slice(2,7)
+                            }
+                        }
+                    },
+                    axisLine: {
+                      symbol: ['none', 'arrow'],
+                      symbolOffset: [0, 12]
+                    },
+                    axisTick: {
+                      show: false
+                    },
+                    splitLine: {
+                      show: true
+                    }
+                  },
+                  yAxis: {
+                    type: 'value',
+                    name: 'Num',
+                    // max: 3,
+                    axisLine: {
+                      symbol: ['none', 'arrow'],
+                      symbolOffset: [0, 12]
+                    },
+                    axisTick: {
+                      show: false
+                    }
+                  },
+                  color: ['blue', 'orange', 'red', 'pink','gray','purple'],
+                  series: myseries
+            }
+            myChart.setOption(options, true);
+        }
+        // drawAlarmLine(data,alarmChart)
     }]);
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
index f0e0605c..8a4c1edc 100644
--- 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
@@ -20,31 +20,32 @@ app.controller("alarmDetailsController",function ($scope,$http,$window) {
     };
     $http({
         method : "GET",
-        url : global_url + "/alarm/1/1/"+alarmDetailId+"/null/null/null/null/null"
+        // url : global_url + "/alarm/1/1/"+alarmDetailId+"/null/null/null/null/null"
+        url : global_url + "/alarm/getAlarmsHeaderDetail/"+alarmDetailId
     }).then(function successCallback(resp) {
-        if (resp.data.alarms.length > 0){
-            $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;
+        if (resp.data){
+            $scope.alarmCondition = resp.data.alarmsHeader.alarmCondition;
+            $scope.alarmInterfaceA = resp.data.alarmsHeader.alarmInterfaceA;
+            $scope.eventCategory = resp.data.alarmsHeader.eventCategory;
+            $scope.eventId = resp.data.alarmsHeader.eventId;
+            $scope.eventName = resp.data.alarmsHeader.eventName;
+            $scope.eventServrity = resp.data.alarmsHeader.eventServrity;
+            $scope.eventSourceType = resp.data.alarmsHeader.eventSourceType;
+            $scope.eventType = resp.data.alarmsHeader.eventType;
+            $scope.faultFieldsVersion = resp.data.alarmsHeader.faultFieldsVersion;
+            $scope.lastEpochMicroSec = resp.data.alarmsHeader.lastEpochMicroSec;
+            $scope.nfNamingCode = resp.data.alarmsHeader.nfNamingCode;
+            $scope.nfcNamingCode = resp.data.alarmsHeader.nfcNamingCode;
+            $scope.priority = resp.data.alarmsHeader.priority;
+            $scope.reportingEntityId = resp.data.alarmsHeader.reportingEntityId;
+            $scope.reportingEntityName = resp.data.alarmsHeader.reportingEntityName;
+            $scope.sequence = resp.data.alarmsHeader.sequence;
+            $scope.sourceId = resp.data.alarmsHeader.sourceId;
+            $scope.sourceName = resp.data.alarmsHeader.sourceName;
+            $scope.specificProblem = resp.data.alarmsHeader.specificProblem;
+            $scope.startEpochMicrosec = resp.data.alarmsHeader.startEpochMicrosec;
+            $scope.startTIme = resp.data.alarmsHeader.createTime;
+            $scope.alarmInformation = resp.data.list;
         }else {
             alert("No Data!");
         }
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 ea70a035..38f263d6 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
@@ -111,7 +111,7 @@ app.controller('pipeAlarmCtrl', ['$scope', 'ResourceAlarm', '$interval', functio
         ctrl.isLoading = true;
         $scope.tableState = tableState;
         var pagination = tableState.pagination;
-        console.log(pagination);
+        // console.log(pagination);
 
         var start = pagination.start / pagination.number + 1 || 0;
         var number = pagination.number || 10;
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
index aa138eaa..6d9c36a7 100644
--- 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
@@ -17,11 +17,14 @@
 app.controller('pertabCtrl', ['$scope', '$http', '$routeParams', '$window' ,
     function ($scope, $http,$routeParams,$window) {
         $scope.chartShow = false;
-	$scope.ndaShow = false;
-	$scope.hdaShow = false;
+	    $scope.ndaShow = false;
+	    $scope.hdaShow = false;
         $scope.valuess = [];
         $scope.namesPIsShow = false;
         $scope.goIsShow = true;
+        $scope.hourshow = false;
+        $scope.dayshow = true;
+        $scope.timestep = '5';
         $scope.today = function() {
             $scope.startTime = new Date();
             $scope.endTime = new Date();
@@ -82,23 +85,24 @@ app.controller('pertabCtrl', ['$scope', '$http', '$routeParams', '$window' ,
 
         $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) {
-                    $scope.goIsShow = false;
-                },function errorCallback(resq) {
+                $scope.goIsShow = false;
+                // $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) {
+                //     $scope.goIsShow = false;
+                // },function errorCallback(resq) {
 
-                });
+                // });
             }
             else{
                 $scope.goIsShow = true;
@@ -106,63 +110,7 @@ app.controller('pertabCtrl', ['$scope', '$http', '$routeParams', '$window' ,
             }
         };
 
-        $scope.options = {
-            chart: {
-                type: 'historicalBarChart',
-                height: 300,
-                margin : {
-                    top: 20,
-                    right: 20,
-                    bottom: 65,
-                    left: 50
-                },
-                x: function(d){return d[0];},
-                y: function(d){return d[1];},
-                showValues: true,
-                valueFormat: function(d){
-                    return d3.format(',.1f')(d);
-                },
-                duration: 100,
-                xAxis: {
-                    //axisLabel: 'X Axis',
-                    tickFormat: function(d) {
-                        return d3.time.format('%x %H:%M')(new Date(d))
-                    },
-                    rotateLabels: 30,
-                    showMaxMin: true
-                },
-                yAxis: {
-                    //axisLabel: 'Y Axis',
-                    axisLabelDistance: -10,
-                    tickFormat: function(d){
-                        return d3.format(',.1f')(d);
-                    }
-                },
-                tooltip: {
-                    keyFormatter: function(d) {
-                        return d3.time.format('%x %H:%M')(new Date(d));
-                    }
-                },
-                zoom: {
-                    enabled: false,
-                    scaleExtent: [1, 10],
-                    useFixedDomain: false,
-                    useNiceScale: false,
-                    horizontalOff: false,
-                    verticalOff: false,
-                    unzoomEventType: 'dblclick.zoom'
-                }
-            }
-        };
-
-
-        $scope.data = [
-            {
-                "key" : "Quantity" ,
-                "bar": true,
-                "values" : []
-            }];
-
+     
         $scope.genDiagram = function () {
              $scope.chartShow = true;
             $http({
@@ -185,34 +133,39 @@ app.controller('pertabCtrl', ['$scope', '$http', '$routeParams', '$window' ,
                 }
             }).then(function successCallback(resp) {
                 console.info(resp);
-                if (resp.data.length > 0){
+                if (resp.data.dateList){
                     $scope.ndaShow = false;
                     $scope.hdaShow = true;
-                    $scope.data = [
-                        {
-                            "key" : "Count" ,
-                            "bar": true,
-                            "values" : resp.data
-                        }];
-                    $scope.api.refresh();
+
+                    drawPerformanceBar(resp.data,performanceChart);
                 }
                 else{
                     $scope.ndaShow = true;
                     $scope.hdaShow = false;
-                    $scope.data = [
-                        {
-                            "key" : "Count" ,
-                            "bar": true,
-                            "values" : []
-                        }];
-                    $scope.api.refresh();
+ 
                 }
 
             },function errorCallback(resp) {
 
             });
         };
+        $scope.showModeIdChanged = function(){
 
+            if($scope.showModeId == 'minute'){
+                $scope.hourshow = true;
+                $scope.timestep = '5';
+            }else if($scope.showModeId == 'hour'){
+                var str = String($scope.startTime);
+                var str2 = String($scope.endTime);
+                $scope.startTime = new Date(str.replace(/\:[0-9]{2}\:/,':00:'));
+                $scope.endTime = new Date(str2.replace(/\:[0-9]{2}\:/,':00:'));
+                $scope.hourshow = true;
+                $scope.timestep = '0';
+            }else if($scope.showModeId == 'day'){
+                $scope.hourshow = false;
+            }
+            
+        }
         $scope.open1 = function() {
             $scope.popup1.opened = true;
         };
@@ -231,12 +184,104 @@ app.controller('pertabCtrl', ['$scope', '$http', '$routeParams', '$window' ,
 
         $scope.modeShow = false;
 
-        $scope.showModeIds = ["minute","hour","day","month","year"];
-
+        $scope.showModeIds = ["minute","hour","day"];
+        $scope.showModeId = 'day';
         function FormatDate (strTime) {
             var date = new Date(strTime);
             return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes();
         }
 
-
+        // 获取柱状图盒子
+        var performanceChart = echarts.init(document.getElementById("performanceChart"));
+   
+        function drawPerformanceBar(data,myChart){
+            var names = Object.keys(data);
+            var myseries = [];
+            names.forEach(function (item) {
+                if(item != 'dateList'){
+                    myseries.push({
+                        name: item,
+                        type: 'bar',
+                        // symbol: 'circle',
+                        // symbolSize: 10,
+                        data: data[item]
+                    })
+                }
+            })
+            var options = {
+                  tooltip: {
+                    trigger: 'axis',
+                    formatter: (params) => {
+                      var res = '<p>' + params[0].name + '</p>' + '<div>';
+                    //   console.log(params);
+                      for (var i = 0; i < params.length; i++) {
+                        res += '<span></span>' + params[i].seriesName + ' : ' + params[i].value + '</br>';
+                      }
+                      res += '</div>';
+                      return res;
+                    }
+                  },
+                  legend: {
+                    data: names,
+                    top: 10,
+                    icon: 'rect',
+                    itemWidth: 10,
+                    itemHeight: 10
+                  },
+                  grid: {
+                    left: '3%',
+                    right: '5%',
+                    bottom: '5%',
+                    top: '15%',
+                    containLabel: true
+                  },
+                  xAxis: {
+                    type: 'category',
+                    name: 'Time',
+                    boundaryGap: true,
+                    data: data.dateList,
+                    axisLabel:{
+                        formatter:(value)=>{
+                            if($scope.showModeId == 'day'){
+                                return value.slice(5,10)
+                            }else if($scope.showModeId == 'hour'){
+                                return value.slice(5,16)
+                            }else if($scope.showModeId == 'minute'){
+                                return value.slice(5,16)
+                            }
+                        }
+                    },
+                    axisLine: {
+                      symbol: ['none', 'arrow'],
+                      symbolOffset: [0, 12]
+                    },
+                    axisTick: {
+                      show: false,
+                    },
+                    splitLine: {
+                      show: true
+                    }
+                  },
+                  yAxis: {
+                    type: 'value',
+                    name: 'Num',
+                    // max: 3,
+                    axisLine: {
+                      symbol: ['none', 'arrow'],
+                      symbolOffset: [0, 12]
+                    },
+                    axisTick: {
+                      show: false
+                    }
+                  },
+                  color: ['green', 'orange', 'red', 'pink','gray','purple'],
+                  series: myseries
+            }
+            myChart.setOption(options, true);
+        }
+        // var data = {
+        //     dateList:["2018-05-23 34:35:00",2,3,4,5,6,7,8,9,10],
+        //     valueList:[5,3,1,7,3,5,8,3,5,2]
+        // }
+        // drawPerformanceBar(data,performanceChart)
     }]);
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 78330285..a6003d4a 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
@@ -18,22 +18,25 @@ app.controller("performanceDetailsController",function ($scope,$http,$window) {
         var obj = $("#lm");
         angular.element(obj).scope().currentTab = "app/uui/fusion/scripts/view-models/performance.html";
     };
+    console.log(permanceId);
     $http({
         method : "GET",
-        url : global_url + "/performance/1/1/"+permanceId+"/null/null/null/null"
+        // url : global_url + "/performance/1/1/"+permanceId+"/null/null/null/null"
+        url : global_url + "/performance/getPerformanceHeaderDetail/"+permanceId
     }).then(function successCallback(resp) {
-       if (resp.data.performances.length > 0){
-           $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;
+        console.log(resp.data);
+       if (resp.data){
+           $scope.eventName = resp.data.performanceHeader.eventName;
+           $scope.eventId = resp.data.performanceHeader.eventId;
+           $scope.sourceId = resp.data.performanceHeader.sourceId;
+           $scope.sourceName = resp.data.performanceHeader.sourceName;
+           $scope.reportingEntityId = resp.data.performanceHeader.reportingEntityId;
+           $scope.reportingEntityName = resp.data.performanceHeader.reportingEntityName;
+           $scope.priority = resp.data.performanceHeader.priority;
+           $scope.createTime = resp.data.performanceHeader.createTime;
+           $scope.nfcNamingCode = resp.data.performanceHeader.nfcNamingCode;
+           $scope.nfNamingCode = resp.data.performanceHeader.nfNamingCode;
+           $scope.performanceInformation = resp.data.list;
        }else {
            alert("No Data");
        }
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
index 9f06bf4e..6715a7b1 100644
--- 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
@@ -48,6 +48,18 @@
     .nodatainner {
         padding: 10px;
     }
+
+    #alarmChart {
+        width: 100%;
+        height: 260px;
+    }
+    /* .minutes {
+        display: none;
+    }
+
+    .uib-separator {
+        display: none;
+    } */
 </style>
 <!--/.navbar-collapse -->
 <div class="templatemo-content-wrapper">
@@ -59,28 +71,40 @@
                     <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>
+                            <div ng-show="dayshow" 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 ng-show="!dayshow" style="float:left;width:140px;padding-top:33px">
+                                <input style="padding-right:0px" 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 ng-show='hourshow' style="display:block;float:left" uib-timepicker ng-model="startTime"
+                                ng-change="startTimeChanged()" hour-step minute-step='0' 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>
+                            <div ng-show="dayshow" 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 ng-show="!dayshow" style="float:left;width:140px;padding-top:33px;">
+                                <input style="padding-right:0px" type="month" 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 ng-show='hourshow' style="display:block;float:left" uib-timepicker ng-model="endTime"
+                                ng-change="endTimeChanged()" hour-step minute-step='0' show-meridian></div>
                         </p>
                     </div>
+                    
                     <div class="col-md-6" style="width:100%;padding-bottom:20px;">
                         <p>
                         <div style="float:left;padding-right:30px;">
@@ -93,14 +117,14 @@
                             </div>
                         </div>
 						<div style="float:left;padding-right:30px;">
-                        <label style="float:left;width:120px;line-height:30px;">Display Interval:</label>
-                        <div style="float:left;width:100px;">
-                            <select class="form-control" ng-change="showModeIdChanged()" ng-model="showModeId"
-                                    ng-options="sm for sm in showModeIds">
-                                <option value="">-- Auto --</option>
-                            </select>
+                            <label style="float:left;width:120px;line-height:30px;">Display Interval:</label>
+                            <div style="float:left;width:100px;">
+                                <select class="form-control" ng-change="showModeIdChanged()" ng-model="showModeId"
+                                        ng-options="sm for sm in showModeIds">
+                                    <!-- <option value="">- Auto -</option> -->
+                                </select>
+                            </div>
                         </div>
-                    </div>
                         <div style="float:left">
                             <button style="padding-top:6px;" class="btn btn-default" ng-click="genDiagram()">submit
                             </button>
@@ -110,14 +134,16 @@
                     
 
                     <div class="col-md-6 col-sm-12" style="width:100%">
-                        <div class="panel panel-success" ng-show="chartShow">
+                        <div class="panel panel-success" > 
+                            <!-- ng-show="chartShow" -->
                             <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 ng-show="ndaShow" style="text-align: center"><h2>No Data Available</h2></div>
-                            <nvd3 ng-show="hdaShow" options="options" data="data" api="api" ></nvd3>
+                            <!-- <nvd3 ng-show="hdaShow" options="options" data="data" api="api" ></nvd3> -->
+                            <div ng-show="hdaShow"  id="alarmChart"></div>
                         </div>
                     </div>
                 </div>
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 b256c62d..6711749f 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
@@ -104,7 +104,7 @@
                         <td>{{row.alarmsHeader.createTime}}</td>
                         <td>{{row.alarmsHeader.status}}</td>
                         <td>
-                            <button ng-click="jump(row.alarmsHeader.sourceId)" class="btn btn-primary">Detail</button>
+                            <button ng-click="jump(row.alarmsHeader.id)" class="btn btn-primary">Detail</button>
                         </td>
                     </tr>
                 </tbody>
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
index 44ad2843..711ab964 100644
--- 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
@@ -49,6 +49,10 @@
     .nodatainner {
         padding: 10px;
     }
+    #performanceChart {
+        width: 100%;
+        height: 300px;
+    }
 </style>
 <div class="templatemo-content-wrapper">
     <div class="templatemo-content">
@@ -59,24 +63,35 @@
                     <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">
+                            <div ng-show="dayshow" 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>
+                            <!-- <div ng-show="!dayshow" style="float:left;width:140px;padding-top:33px">
+                                <input style="padding-right:0px" type="month" 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 ng-show='hourshow' style="display:block;float:left" uib-timepicker ng-model="startTime"
+                                ng-change="startTimeChanged()" hour-step minute-step='timestep' 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"
+                            <div ng-show="dayshow" 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>
+                            <!-- <div ng-show="!dayshow" style="float:left;width:140px;padding-top:33px;">
+                                <input style="padding-right:0px" type="month" 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 ng-show='hourshow' style="display:block;float:left" uib-timepicker ng-model="endTime" 
+                                ng-change="endTimeChanged()" hour-step minute-step='0' show-meridian></div>
                         </p>
                     </div>
                     <div class="col-md-6" style="width:100%;padding-bottom:20px;">
@@ -103,7 +118,7 @@
                                 <label style="float:left;width:120px;line-height:30px;">Display Interval:</label>
                                 <div style="float:left;width:100px;">
                                     <select class="form-control" ng-change="showModeIdChanged()" ng-model="showModeId" ng-options="sm for sm in showModeIds">
-                                        <option value="">-- auto --</option>
+                                        <!-- <option value="">-- auto --</option> -->
                                     </select>
                                 </div>
                             </div>
@@ -113,11 +128,14 @@
                         </p>
                     </div>
                     <div class="col-md-12 col-sm-12">
-                        <div class="panel panel-success" ng-show="chartShow">
+                        <div class="panel panel-success">
+                                <!-- ng-show="chartShow" -->
                             <div ng-show="ndaShow" style="text-align: center">
                                 <h2>No Data Available</h2>
                             </div>
-                            <nvd3 ng-show="hdaShow" options="options" data="data" api="api"></nvd3>
+                            <!-- <nvd3 ng-show="hdaShow" options="options" data="data" api="api"></nvd3> -->
+                            <div   id="performanceChart"></div>
+                            <!-- ng-show="hdaShow" -->
                         </div>
 
                     </div>
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 94d52e56..1a7348a5 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
@@ -92,7 +92,7 @@
                             <td>{{row.performanceHeader.priority}}</td>
                             <td>{{row.performanceHeader.createTime}}</td>
                             <td>
-                                <button ng-click="jump(row.performanceHeader.sourceId)" class="btn btn-primary">Detail</button>
+                                <button ng-click="jump(row.performanceHeader.id)" class="btn btn-primary">Detail</button>
                             </td>
                         </tr>
                     </tbody>