Merge "Fix monitor display bug"

6 files changed, 402 insertions, 216 deletions

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