Fix monitor display bugs

Change-Id: I14e0e35331049d480beed1fdf721df1bf81dd4ba
Issue-Id: USECASEUI-54
Signed-off-by: shentao <shentao@chinamobile.com>

16 files changed, 153 insertions, 82 deletions

diff --git a/docs/platform/administration.rst b/docs/platform/administration.rst
index 3b9f75c8..d4a6852c 100644
--- a/docs/platform/administration.rst
+++ b/docs/platform/administration.rst
@@ -3,3 +3,29 @@
 
 Administration
 --------------
+
+It is not hard to manage Usecase-UI becasue it's been dockerized and split into two dockers. One is for UI and the other for Server.
+
+Processes / Dockers
+^^^^^^^^^^^^^^^^^^^
+
+Usecase-UI mainly consists of two dockers:
+
+* Usecase-UI UI Docker
+
+* Usecase-UI Server Docker
+
+Actions
+^^^^^^^
+
+All actions performed on the Usecase-UI modules are docker-based.
+
+* Create a Container: ``sudo docker run [OPTIONS] IMAGE [COMMAND] [ARG...]``
+
+* Kill a Container: ``sudo docker kill [OPTIONS] CONTAINER [CONTAINER...]``
+
+* Stop a Container: ``sudo docker stop [OPTIONS] CONTAINER [CONTAINER...]``
+
+* Start a Container: ``sudo docker start [OPTIONS] CONTAINER [CONTAINER...]``
+
+* Restart a Container: ``sudo docker restart [OPTIONS] CONTAINER [CONTAINER...]``
diff --git a/docs/platform/delivery.rst b/docs/platform/delivery.rst
index 2e359f20..30bf1d42 100644
--- a/docs/platform/delivery.rst
+++ b/docs/platform/delivery.rst
@@ -4,3 +4,9 @@
 Delivery
 --------
 
+Describe how functions are packaged into run-time components. For some components a block diagram may be useful.
+As mentioned in the architecture chapter, Usecase-UI mainly comprises two modules: the UI module and the Server module.
+
+* UI Docker: The main GUI for LCM and Monitor functions are performed in this module. The module provides Lifecycle CRUD operation interfaces and system alarm/performance monitor.
+
+* Server Docker: This module provides APIs for usecase-ui inside. Lifecycle Management and alarm/performance data Management are implemented by this module.
diff --git a/docs/platform/installation.rst b/docs/platform/installation.rst
index 79266801..42c7c151 100644
--- a/docs/platform/installation.rst
+++ b/docs/platform/installation.rst
@@ -3,3 +3,21 @@
 
 Installation
 ------------
+
+In case the users want to deploy Usecase-UI, the steps for the installation is as follows.
+
+Prerequisites
+^^^^^^^^^^^^^
+
+#. MSB must be installed and started. The user knows the IP address of the MSB API gateway service.
+   
+Steps
+^^^^^
+
+#. Start UI module of Usecase-UI using the command below:
+
+   ``sudo docker run -i -t -d --name uui_ui -p 8080:8080 -e MSB_ADDR=$OPENO_IP:80 nexus3.onap.org:10001/onap/usecase-ui`` 
+
+#. Start Server module of Usecase-UI using the command below:
+
+   ``sudo docker run -i -t -d --name uui_server -p 8082:8082 -e MSB_ADDR=$OPENO_IP:80 -e MR_ADDR=$MR_IP:3904 nexus3.onap.org:10001/onap/usecase-ui/usecase-ui-server``
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 99623316..0ab15391 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
@@ -41,7 +41,8 @@ h1 { font-size: 24px; }
 
 }
 .logo h1 {
-    font-size: 24px;
+    font-size: 22px;
+	color:black;
     margin: 10px 15px;
 }
 
@@ -238,7 +239,7 @@ h1 { font-size: 24px; }
     position: relative;
     min-height: 50px;
     border: 1px solid transparent;
-    background-color: #0088CC;
+    background-color: #CCCCCC;
 }
 .btn{
     border-radius: 10px;
@@ -264,7 +265,7 @@ div .ui-grid-header-cell{
       margin: 0;
       padding: 0;
       display: inline-block;
-      width: 26%;
+      padding-right: 2%;
 	  padding-top:20px;
     }
 	
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 c3203aff..b56355af 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
@@ -14,7 +14,7 @@
  limitations under the License.
  */
 Chart = [
-        { "type":"bar", "key": "disk", "yAxis": "1", "values": [
+        { "type":"bar", "key": "value", "yAxis": "1", "values": [
             { "x":'15min' , "y":4}, { "x":'30min' , "y":4}, { "x":'45min' , "y":12},
             { "x":'60min' , "y":3.27}
         ] } ];
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 8096d702..5906c42c 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
@@ -16,6 +16,8 @@
 
 app.controller('alarmchartCtrl', ['$scope', '$http', '$routeParams', '$window',
     function ($scope, $http, $routeParams, $window) {
+		$scope.goIsShow = false;
+        $scope.chartShow = false;
         $scope.valuess = [];
         $scope.today = function () {
             $scope.startTime = new Date();
@@ -29,7 +31,7 @@ app.controller('alarmchartCtrl', ['$scope', '$http', '$routeParams', '$window',
                     "Authorization": "Basic " + btoa("usecase" + ':' + "usecase")
                 }
             }).then(function successCallback(resp) {
-                console.info(resp);
+                //console.info(resp);
                 $scope.sourceIds = resp.data;
             }, function errorCallback(resp) {
 
@@ -55,13 +57,16 @@ app.controller('alarmchartCtrl', ['$scope', '$http', '$routeParams', '$window',
                     return str.join("&");
                 }
             }).then(function successCallback(resp) {
-                //console.info(resp);
+                console.info(resp);
+                $scope.chartShow = true;
                 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;
                     }
+                else
+                    $scope.valuess = [];
                 for (var d = 0; d < 5; d++) {
                     window.setTimeout(function () {
                         redraw("_alarm", $scope.valuess);
@@ -72,17 +77,22 @@ app.controller('alarmchartCtrl', ['$scope', '$http', '$routeParams', '$window',
 
             });
         }
-
+		$scope.sourceIdChanged = function(){
+			if ($scope.sourceId != null)
+				$scope.goIsShow = true;
+			else
+				$scope.goIsShow = false;	
+		};
 
         $scope.startTimeChanged = function () {
             if ($scope.startTime > $scope.endTime)
                 $scope.endTime = "";
-            console.info($scope.startTime);
+           // console.info($scope.startTime);
         };
         $scope.endTimeChanged = function () {
             if ($scope.endTime < $scope.startTime)
                 $scope.startTime = "";
-            console.info($scope.endTime);
+           // console.info($scope.endTime);
         };
 
         $scope.open1 = function () {
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 65d1fc3d..f0e0605c 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,30 +20,34 @@ app.controller("alarmDetailsController",function ($scope,$http,$window) {
     };
     $http({
         method : "GET",
-        url : global_url + "/alarm/1/1/null/"+alarmDetailId+"/null/null/null/null"
+        url : global_url + "/alarm/1/1/"+alarmDetailId+"/null/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;
+        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;
+        }else {
+            alert("No Data!");
+        }
     },function errorCallback(resq) {
 
     });
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 fccecb66..f5e92b50 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
@@ -70,14 +70,13 @@ app.controller('alarmGridCtrl', ['$scope', '$log', '$http', '$timeout', '$interv
                 {
                     field: 'alarmsHeader.eventName',
                     displayName: 'eventName',
-                    cellTemplate: '<a ng-click="grid.appScope.jump(row.entity.alarmsHeader.eventName)"; style="cursor:pointer" href="">{{row.entity.alarmsHeader.eventName}}</a>',
-                    width : 500,
+                    width : '10%',
                     enableHiding: false,
                     suppressRemoveSort: true,
                     enableCellEdit: false
                 },
                 {field: "alarmsHeader.eventId", displayName: 'eventId', enableCellEdit: false},
-                {field: "alarmsHeader.sourceId", displayName: 'Source Id', enableCellEdit: false},
+                {field: "alarmsHeader.sourceId", displayName: 'Source Id', enableCellEdit: false,cellTemplate: '<a ng-click="grid.appScope.jump(row.entity.alarmsHeader.sourceId)"; style="cursor:pointer" href="">{{row.entity.alarmsHeader.sourceId}}</a>'},
                 {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},
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 b96abb95..39845e87 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
@@ -16,8 +16,7 @@
 
 app.controller('pertabCtrl', ['$scope', '$http', '$routeParams', '$window' ,
     function ($scope, $http, $routeParams, $window) {
-        $scope.sourceIds = ["112","119","101"];
-        $scope.namePs = [];
+		$scope.chartShow = false;
         $scope.valuess = [];
         $scope.namesPIsShow = false;
         $scope.namesCIsShow = false;
@@ -30,8 +29,7 @@ app.controller('pertabCtrl', ['$scope', '$http', '$routeParams', '$window' ,
                 url : global_url+"/performance/resourceIds",
                 headers: {
                     'Access-Control-Allow-Origin': "*",
-                    "Content-Type": "application/json",
-                    "Authorization": "Basic " + btoa("usecase" + ':' + "usecase")
+                    "Content-Type": "application/json"
                 }
             }).then(function successCallback(resp) {
                 $scope.sourceIds = resp.data;
@@ -69,6 +67,7 @@ app.controller('pertabCtrl', ['$scope', '$http', '$routeParams', '$window' ,
 
                 }).then(function successCallback(resp) {
                     $scope.namePs = resp.data;
+                    $scope.nameP = null;
                 },function errorCallback(resq) {
 
                 });
@@ -96,14 +95,8 @@ app.controller('pertabCtrl', ['$scope', '$http', '$routeParams', '$window' ,
                         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;
-                    }
+                    $scope.goIsShow = true;
+                    $scope.chartShow = true;
                 },function errorCallback(resq) {
 
                 });
@@ -135,6 +128,7 @@ app.controller('pertabCtrl', ['$scope', '$http', '$routeParams', '$window' ,
                 }
             }).then(function successCallback(resp) {
                 console.info(resp.data);
+				chartShow = true;
                 if (resp.data.length > 0)
                     for (var i = 0 ; i<resp.data.length ; i++){
                         $scope.valuess[i] = {};
@@ -142,6 +136,8 @@ app.controller('pertabCtrl', ['$scope', '$http', '$routeParams', '$window' ,
                         $scope.valuess[i].y = resp.data[i];
                         $scope.valuess[i].x.length = i;
                     }
+                else
+                    $scope.valuess = [];
                 for (var d = 0; d < 5; d++) {
                     window.setTimeout(function () {
                         redraw("_performance", $scope.valuess);
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 ca87a4af..78330285 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
@@ -22,17 +22,21 @@ app.controller("performanceDetailsController",function ($scope,$http,$window) {
         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;
+       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;
+       }else {
+           alert("No Data");
+       }
     },function errorCallback(resq) {
 
     });
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 03579f60..c04f1cff 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
@@ -77,14 +77,14 @@
 										</select>
 										</div>
 									</div>
-									<div style="float:left">
+									<div style="float:left" ng-show="goIsShow">
 										<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 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>
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 fdae95b9..0d83682e 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,7 +14,7 @@
     limitations under the License.
 -->
 <div class="templatemo-content" ng-controller="alarmGridCtrl">
-    <h1>VNF Alarm</h1>
+    <h3>VNF Alarm</h3>
     <div class="row margin-bottom-20">
     </div>
     <div class="row margin-bottom-10">
@@ -40,14 +40,16 @@
         <button ng-click="alarmSearch()">search</button>
     </ul>
     <ul class="list" ng-show='menuState.show'>
-        <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" />
+        <li><p class="input-group" style="float:left">
+			<div style="float:left;line-height:100px;padding-right:4px;">Start Time</div>
+            <div style="float:left;padding-top:33px"><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>
             <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" />
+        </p></li>
+        <li><p class="input-group" style="float:left">
+            <div style="float:left;line-height:100px;padding-right:4px;">End Time</div>
+			<div style="float:left;padding-top:33px"><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>
             <div style="display:block;float:left" uib-timepicker ng-model="condition5" hour-step minute-step show-meridian></div>
-        </li>
+        </p></li>
     </ul>
     <div class="row">
         <div class="col-md-5" style="border-top:1px dotted #ddd">
@@ -60,7 +62,7 @@
     </div>
     <div class="row">
         <div class="col-md-11">
-            <h4 class="margin-bottom-15">Another Table of Existing Users</h4>
+            <h4 class="margin-bottom-15">Query Result</h4>
         </div>
         <div class="col-md-1">
 
@@ -69,7 +71,7 @@
         </div>
     </div>
     <div>
-        <div ui-grid="gridOptions" style="width: 100%;text-align: center;" ui-grid-edit
+        <div ui-grid="gridOptions" style="width:100%;text-align:center;" ui-grid-edit
              ui-grid-pagination
              ui-grid-selection ui-grid-resize-columns ui-grid-auto-resize>
         </div>
diff --git a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/left-menu.html b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/left-menu.html
index cba16b59..728b3280 100644
--- a/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/left-menu.html
+++ b/usecaseui-monitor/src/main/webapp/app/uui/fusion/scripts/view-models/left-menu.html
@@ -17,7 +17,7 @@
     <div id="main-wrapper">
         <div id="navbar" role="navigation">
             <div class="navbar-header">
-                <div class="logo"><h1>UUI</h1></div>
+                <div class="logo"><h1>Usecase UI</h1></div>
                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                     <span class="sr-only">Toggle navigation</span>
                     <span class="icon-bar"></span>
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 9f9ccbb3..eb6c50fb 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
@@ -94,13 +94,13 @@
 										</div>
 									</div>
 									<div ng-show="goIsShow" style="float:left">
-										<button style="padding-top:6px;" class="btn btn-default" ng-click="genDiagram()">Go</button>
+										<button style="padding-top:6px;" class="btn btn-default" ng-click="genDiagram()">submit</button>
 									</div>
 								</p>
 							</div>
 						
 							<div class="col-md-12 col-sm-12" >
-								<div class="panel panel-success">
+								<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>
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 f2fc7320..83f4385e 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
@@ -15,7 +15,7 @@
 -->
 <div class="templatemo-content-wrapper" ng-controller="perGridCtrl">
     <div class="templatemo-content">
-        <h1>Performance</h1>
+        <h3>Performance</h3>
         <div>
             <ul class="list">
                 <li>Source Id <input type="text" ng-model="seek1"/></li>
@@ -24,10 +24,14 @@
                 <button ng-click="getSearch()">search</button>
             </ul>
             <ul class="list" ng-show='menuState.show'>
-                <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>
+                <li> <p class="input-group" style="float:left">
+						<div style="float:left;line-height:100px;padding-right:4px;">StartTime</div><div style="float:left;padding-top:33px"><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>
+						<div style="display:block;float:left;" uib-timepicker ng-model="seek4" hour-step minute-step show-meridian></div>
+					</p></li>
+                <li><p class="input-group" style="float:left">
+					<div style="float:left;line-height:100px;padding-right:4px;">End Time</div><div style="float:left;padding-top:33px"><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>
+                    <div style="display:block;float:left" uib-timepicker ng-model="seek5" hour-step minute-step show-meridian></div>
+					</p></li>
             </ul>
             <div class="row">
                 <div class="col-md-5" style="border-top:1px dotted #ddd">
@@ -42,7 +46,7 @@
             <div class="row">
                 <div class="col-md-11">
                     <div class="table-responsive">
-                        <h4 class="margin-bottom-15">Another Table of Existing Users</h4>
+                        <h4 class="margin-bottom-15">Query Result</h4>
                     </div>
                 </div>
                 <div class="col-md-1">
diff --git a/usecaseui-monitor/src/main/webapp/index.html b/usecaseui-monitor/src/main/webapp/index.html
index 58f73005..6c99a161 100644
--- a/usecaseui-monitor/src/main/webapp/index.html
+++ b/usecaseui-monitor/src/main/webapp/index.html
@@ -49,12 +49,13 @@
   <script src="app/uui/fusion/scripts/controller/performanceController.js"></script>
   <script src="app/uui/fusion/scripts/controller/lcmController.js"></script>
   <script src="app/uui/fusion/scripts/controller/ServiceTemplateService.js"></script>
+  <script src="app/uui/fusion/scripts/controller/alarm-chartController.js"></script>
+  <script src="app/uui/fusion/scripts/controller/performance-chartController.js"></script>
+  <script src="app/uui/fusion/scripts/controller/alarm-detailsController.js"></script>
+  <script src="static/fusion/js/lifecyclemanager.js" ></script>
   <title></title>
-
 </head>
 <body>
-<!--盛放代码片段的容器-->
-
-<ng-view></ng-view>
+  <ng-view></ng-view>
 </body>
 </html>