Index: /branches/amp_3_7/extensions/auditing/webui/engine/acquisition/acquisition.html
===================================================================
--- /branches/amp_3_7/extensions/auditing/webui/engine/acquisition/acquisition.html	(revision 2477)
+++ /branches/amp_3_7/extensions/auditing/webui/engine/acquisition/acquisition.html	(working copy)
@@ -1,41 +1,56 @@
-<div class="widget">
-    <div class="widget-header">
-        <span>{{'Running Status' | T}}</span>
-    </div>
-    <div class="">
-        <form class="form-horizontal" role="form">
-            <div class="form-group">
-                <label class="control-label col-md-3">{{ 'Status' | T}}</label>
-                <div class="col-md-6">
-                    <span ng-if="auditAcquisition.loading"><i class="fa fa-spinner fa-spin fa-2x fa-fw"></i></span>
-                    <span title="{{'Not Running'|T}}" ng-if="!auditAcquisition.loading&&!auditAcquisition.status_info.running"><i class="fa fa-times-circle fa-2x text-danger" style="color:#D30000;"></i></span>
-                    <span title="{{'Running'|T}}" ng-if="!auditAcquisition.loading&&auditAcquisition.status_info.running"><i class="fa fa-check-circle fa-2x text-success" style="color: green;"></i></span>
+<div class="col-md-12">
+    <div class="widget">
+        <div class="widget-header">
+            <span class="tab-header-1">{{'Running Status' | T}}</span>
+        </div>
+        <div class="">
+            <form class="form-horizontal" role="form">
+                <div class="form-group">
+                    <label class="control-label col-md-3">{{ 'Status' | T}}</label>
+                    <div class="col-md-6">
+                        <span ng-if="auditAcquisition.loading"><i class="fa fa-spinner fa-spin fa-2x fa-fw"></i></span>
+                        <span title="{{'Not Running'|T}}"
+                              ng-if="!auditAcquisition.loading&&!auditAcquisition.status_info.running"><i
+                                class="fa fa-times-circle fa-2x text-danger" style="color:#D30000;"></i></span>
+                        <span title="{{'Running'|T}}"
+                              ng-if="!auditAcquisition.loading&&auditAcquisition.status_info.running"><i
+                                class="fa fa-check-circle fa-2x text-success" style="color: green;"></i></span>
+                    </div>
                 </div>
-            </div>
-        </form>
-    </div>
-</div>
-<div class="widget">
-    <div class="widget-header">
-        <span>{{'Running Configuration' | T}}</span>
+            </form>
+        </div>
     </div>
-    <div class="">
-        <form class="form-horizontal" name="acquisitionform" verify-scope="tipStyle: 1" unsaved-warning-form>
-            <div class="form-group">
-                <label class="control-label col-md-3">
-                    {{ 'Keep the original log' | T}}
-                    <i class="fa fa-info-circle" data-role="popover" data-popover-mode="hover" data-popover-position="top" data-popover-text="{{'Use the raw_message field to keep the log before parsing, which consumes more hard disk' | T}}" data-popover-background="bg-cyan" data-popover-color="fg-white"></i>
-                </label>
-                <div class="col-md-6">
-                    <input bs-switch class="switch" ng-model="auditAcquisition.config_info.log_origin" type="checkbox" switch-active="true" resettable>
+    <div class="widget">
+        <div class="widget-header">
+            <span class="tab-header-1">{{'Running Configuration' | T}}</span>
+        </div>
+        <div class="">
+            <form class="form-horizontal" name="acquisitionform" verify-scope="tipStyle: 1" unsaved-warning-form>
+                <div class="form-group">
+                    <label class="control-label col-md-3">
+                        {{ 'Keep the original log' | T}}
+                        <i class="fa fa-info-circle" data-role="popover" data-popover-mode="hover"
+                           data-popover-position="top"
+                           data-popover-text="{{'Use the raw_message field to keep the log before parsing, which consumes more hard disk' | T}}"
+                           data-popover-background="bg-cyan" data-popover-color="fg-white"></i>
+                    </label>
+                    <div class="col-md-6">
+                        <input bs-switch class="switch" ng-model="auditAcquisition.config_info.log_origin"
+                               type="checkbox" switch-active="true" resettable>
+                    </div>
                 </div>
-            </div>
-            <div class="form-group col-md-offset-3">
-                <div class="col-md-offset-3 col-md-6">
-                    <button ng-show="acquisitionform.$dirty" class="btn btn-primary" ng-verify="control:'acquisitionform'" ng-click="auditAcquisition.submit()">{{ 'Save Changes' | T}}</button>
-                    <button ng-show="acquisitionform.$dirty" type="reset" class="btn btn-default btn-cancel" ng-click="acquisitionform.$dirty=false;auditAcquisition.cancel()">{{'Cancel'|T}}</button>
+                <div class="form-group col-md-offset-3">
+                    <div class="col-md-offset-3 col-md-6">
+                        <button ng-show="acquisitionform.$dirty" class="btn btn-primary"
+                                ng-verify="control:'acquisitionform'" ng-click="auditAcquisition.submit()">
+                            {{ 'Save Changes' | T}}
+                        </button>
+                        <button ng-show="acquisitionform.$dirty" type="reset" class="btn btn-default btn-cancel"
+                                ng-click="acquisitionform.$dirty=false;auditAcquisition.cancel()">{{'Cancel' | T}}
+                        </button>
+                    </div>
                 </div>
-            </div>
-        </form>
+            </form>
+        </div>
     </div>
 </div>
\ No newline at end of file
Index: /branches/amp_3_7/extensions/auditing/webui/engine/elastic/elastic.html
===================================================================
--- /branches/amp_3_7/extensions/auditing/webui/engine/elastic/elastic.html	(revision 2477)
+++ /branches/amp_3_7/extensions/auditing/webui/engine/elastic/elastic.html	(working copy)
@@ -1,17 +1,22 @@
-<div class="widget">
-    <div class="widget-header">
-        <span>{{'Running Status' | T}}</span>
-    </div>
-    <div class="">
-        <form class="form-horizontal" role="form">
-            <div class="form-group">
-                <label class="control-label col-md-3">{{ 'Status' | T}}</label>
-                <div class="col-md-6">
-                    <span ng-if="auditElastic.loading"><i class="fa fa-spinner fa-spin fa-2x fa-fw"></i></span>
-                    <span title="{{'Not Running'|T}}" ng-if="!auditElastic.loading&&!auditElastic.status_info.running"><i class="fa fa-times-circle fa-2x" style="color:#D30000;"></i></span>
-                    <span title="{{'Running'|T}}" ng-if="!auditElastic.loading&&auditElastic.status_info.running"><i class="fa fa-check-circle fa-2x" style="color: green;"></i></span>
+<div class="col-md-12">
+    <div class="widget">
+        <div class="widget-header">
+            <span class="tab-header-1">{{'Running Status' | T}}</span>
+        </div>
+        <div class="">
+            <form class="form-horizontal" role="form">
+                <div class="form-group">
+                    <label class="control-label col-md-3">{{ 'Status' | T}}</label>
+                    <div class="col-md-6">
+                        <span ng-if="auditElastic.loading"><i class="fa fa-spinner fa-spin fa-2x fa-fw"></i></span>
+                        <span title="{{'Not Running'|T}}"
+                              ng-if="!auditElastic.loading&&!auditElastic.status_info.running"><i
+                                class="fa fa-times-circle fa-2x" style="color:#D30000;"></i></span>
+                        <span title="{{'Running'|T}}" ng-if="!auditElastic.loading&&auditElastic.status_info.running"><i
+                                class="fa fa-check-circle fa-2x" style="color: green;"></i></span>
+                    </div>
                 </div>
-            </div>
-        </form>
+            </form>
+        </div>
     </div>
 </div>
\ No newline at end of file
Index: /branches/amp_3_7/extensions/auditing/webui/engine/engine.html
===================================================================
--- /branches/amp_3_7/extensions/auditing/webui/engine/engine.html	(revision 2477)
+++ /branches/amp_3_7/extensions/auditing/webui/engine/engine.html	(working copy)
@@ -2,19 +2,20 @@
     <div class="col-md-12">
         <ul class="nav nav-tabs">
             <li role="presentation" ng-class="{ active: url_contain('/engine/kibana') }">
-                <a ui-sref="index.auditing.engine.kibana">{{ 'Kibana' | T }}</a>
+                <a ui-sref="index.auditing.engine.kibana"><span class="tab-header">{{ 'Kibana' | T }}</span></a>
             </li>
             <li role="presentation" ng-class="{ active: url_contain('/engine/acquisition') }">
-                <a ui-sref="index.auditing.engine.acquisition">{{ 'Data Acquisition' | T }}</a>
+                <a ui-sref="index.auditing.engine.acquisition"><span class="tab-header">{{ 'Data Acquisition' | T
+                    }}</span></a>
             </li>
             <li role="presentation" ng-class="{ active: url_contain('/engine/elastic') }">
-                <a ui-sref="index.auditing.engine.elastic">{{ 'Elasticsearch' | T }}</a>
+                <a ui-sref="index.auditing.engine.elastic"><span class="tab-header">{{ 'Elasticsearch' | T }}</span></a>
             </li>
         </ul>
     </div>
+    <div class="content-wrapper">
+        <div class="" ng-show="url_contain('/engine/kibana')" ui-view="kibana"></div>
+        <div class="" ng-show="url_contain('/engine/acquisition')" ui-view="acquisition"></div>
+        <div class="" ng-show="url_contain('/engine/elastic')" ui-view="elastic"></div>
+    </div>
 </div>
-<div class="">
-    <div class="" ng-show="url_contain('/engine/kibana')" ui-view="kibana"></div>
-    <div class="" ng-show="url_contain('/engine/acquisition')" ui-view="acquisition"></div>
-    <div class="" ng-show="url_contain('/engine/elastic')" ui-view="elastic"></div>
-</div>
\ No newline at end of file
Index: /branches/amp_3_7/extensions/auditing/webui/engine/kibana/kibana.html
===================================================================
--- /branches/amp_3_7/extensions/auditing/webui/engine/kibana/kibana.html	(revision 2477)
+++ /branches/amp_3_7/extensions/auditing/webui/engine/kibana/kibana.html	(working copy)
@@ -1,46 +1,55 @@
-<div class="widget">
-    <div class="widget-header">
-        <span>{{'Running Status' | T}}</span>
-    </div>
-    <div class="">
-        <form class="form-horizontal" role="form">
-            <div class="form-group">
-                <label class="control-label col-md-3">{{ 'Status' | T}}</label>
-                <div class="col-md-6">
-                    <span ng-if="auditKibana.loading"><i class="fa fa-spinner fa-spin fa-2x fa-fw"></i></span>
-                    <span title="{{'Not Running'|T}}" ng-if="!auditKibana.loading&&!auditKibana.status_info.running"><i class="fa fa-times-circle fa-2x" style="color:#D30000;"></i></span>
-                    <span title="{{'Running'|T}}" ng-if="!auditKibana.loading&&auditKibana.status_info.running"><i class="fa fa-check-circle fa-2x" style="color: green;"></i></span>
+<div class="col-md-12">
+    <div class="widget">
+        <div class="widget-header">
+            <span class="tab-header-1">{{'Running Status' | T}}</span>
+        </div>
+        <div class="">
+            <form class="form-horizontal" role="form">
+                <div class="form-group">
+                    <label class="control-label col-md-3">{{ 'Status' | T}}</label>
+                    <div class="col-md-6">
+                        <span ng-if="auditKibana.loading"><i class="fa fa-spinner fa-spin fa-2x fa-fw"></i></span>
+                        <span title="{{'Not Running'|T}}"
+                              ng-if="!auditKibana.loading&&!auditKibana.status_info.running"><i
+                                class="fa fa-times-circle fa-2x" style="color:#D30000;"></i></span>
+                        <span title="{{'Running'|T}}" ng-if="!auditKibana.loading&&auditKibana.status_info.running"><i
+                                class="fa fa-check-circle fa-2x" style="color: green;"></i></span>
+                    </div>
                 </div>
-            </div>
-            <div class="form-group">
-                <label class="control-label col-md-3">{{ 'Visit Website' | T}}</label>
-                <div class="col-md-6" style="padding-top: 8px;">
-                    <a ng-click="auditKibana.jump2kibana()">Kibana</a>
+                <div class="form-group">
+                    <label class="control-label col-md-3">{{ 'Visit Website' | T}}</label>
+                    <div class="col-md-6" style="padding-top: 8px;">
+                        <a ng-click="auditKibana.jump2kibana()">Kibana</a>
+                    </div>
                 </div>
-            </div>
-        </form>
-    </div>
-</div>
-<div class="widget">
-    <div class="widget-header">
-        <span>{{'Running Configuration' | T}}</span>
+            </form>
+        </div>
     </div>
-    <div class="">
-        <form class="form-horizontal" name="kibanaform" verify-scope="tipStyle: 1" unsaved-warning-form>
-            <div class="form-group">
-                <label class="control-label col-md-3">{{ 'Language' | T}}</label>
-                <div class="col-md-6">
-                    <select ng-verify class="form-control" ng-model="auditKibana.config_info.language">
-                        <option ng-repeat="row in langs" value='{{row.name}}'>{{row.verbose_name|T}}</option>
-                    </select>
+    <div class="widget">
+        <div class="widget-header">
+            <span class="tab-header-1">{{'Running Configuration' | T}}</span>
+        </div>
+        <div class="">
+            <form class="form-horizontal" name="kibanaform" verify-scope="tipStyle: 1" unsaved-warning-form>
+                <div class="form-group">
+                    <label class="control-label col-md-3">{{ 'Language' | T}}</label>
+                    <div class="col-md-6">
+                        <select ng-verify class="form-control" ng-model="auditKibana.config_info.language">
+                            <option ng-repeat="row in langs" value='{{row.name}}'>{{row.verbose_name | T}}</option>
+                        </select>
+                    </div>
                 </div>
-            </div>
-            <div class="form-group col-md-offset-3">
-                <div class="col-md-offset-3 col-md-6">
-                    <button ng-show="kibanaform.$dirty" class="btn btn-primary" ng-verify="control:'kibanaform'" ng-click="auditKibana.submit()">{{ 'Save Changes' | T}}</button>
-                    <button ng-show="kibanaform.$dirty" type="reset" class="btn btn-default btn-cancel" ng-click="kibanaform.$dirty=false;auditKibana.cancel()">{{'Cancel'|T}}</button>
+                <div class="form-group col-md-offset-3">
+                    <div class="col-md-offset-3 col-md-6">
+                        <button ng-show="kibanaform.$dirty" class="btn btn-primary" ng-verify="control:'kibanaform'"
+                                ng-click="auditKibana.submit()">{{ 'Save Changes' | T}}
+                        </button>
+                        <button ng-show="kibanaform.$dirty" type="reset" class="btn btn-default btn-cancel"
+                                ng-click="kibanaform.$dirty=false;auditKibana.cancel()">{{'Cancel' | T}}
+                        </button>
+                    </div>
                 </div>
-            </div>
-        </form>
+            </form>
+        </div>
     </div>
-</div>
\ No newline at end of file
+</div>
Index: /branches/amp_3_7/extensions/auditing/webui/log_analysis/slb_service/slb/slb.detail.html
===================================================================
--- /branches/amp_3_7/extensions/auditing/webui/log_analysis/slb_service/slb/slb.detail.html	(revision 2477)
+++ /branches/amp_3_7/extensions/auditing/webui/log_analysis/slb_service/slb/slb.detail.html	(working copy)
@@ -1,17 +1,16 @@
-<div>
+<div class="row">
     <div ncy-breadcrumb></div>
     <div class="tab-wrapper">
         <ul class="nav nav-tabs">
-            <!--li role="presentation" ng-class="{ active: url_contain('/auditing/log_analysis/slb_service/detail/{{ current_name }}/pools') }">
-                <a ui-sref="index.auditing.log_analysis.slb_service.detail.pools">{{ 'Pools' | T }}</a>
-            </li-->
-            <li role="presentation" ng-class="{ active: url_contain('/auditing/log_analysis/slb_service/detail/{{ current_name }}/log') }">
-                <a ui-sref="index.auditing.log_analysis.slb_service.detail.log">{{ 'Access Logs' | T }}</a>
+            <li role="presentation"
+                ng-class="{ active: url_contain('/auditing/log_analysis/slb_service/detail/{{ current_name }}/log') }">
+                <a ui-sref="index.auditing.log_analysis.slb_service.detail.log"><span
+                        class="tab-header">{{ 'Access Logs' | T }}</span></a>
             </li>
         </ul>
     </div>
     <div class="content-wrapper">
-        <!--div class="" ng-show="url_contain('/auditing/log_analysis/slb_service/detail/{{ current_name }}/pools')" ui-view="pools"></div-->
-        <div class="" ng-show="url_contain('/auditing/log_analysis/slb_service/detail/{{ current_name }}/log')" ui-view="log"></div>
+        <div class="" ng-show="url_contain('/auditing/log_analysis/slb_service/detail/{{ current_name }}/log')"
+             ui-view="log"></div>
     </div>
 </div>
Index: /branches/amp_3_7/extensions/auditing/webui/log_analysis/slb_service/slb/slb.html
===================================================================
--- /branches/amp_3_7/extensions/auditing/webui/log_analysis/slb_service/slb/slb.html	(revision 2477)
+++ /branches/amp_3_7/extensions/auditing/webui/log_analysis/slb_service/slb/slb.html	(working copy)
@@ -1,98 +1,115 @@
-<div class="widget">
-    <div class="widget-header">
-        <span>{{'SLB Service' | T}}</span>
-    </div>
-    <div class="">
-        <table st-table="displayedCollection" st-safe-src="SLBService.serviceList" class="table table-hover">
-            <thead>
-            <tr>
-                <th class="d-num">No.</th>
-                <th class="v-name">{{ 'Service Name' | T }}</th>
-                <th class="v-type">{{ 'Type' | T }}</th>
-                <th class="v-device">{{ 'Device Name' | T }}</th>
-                <th class="d-name">{{ 'Device Group' | T }}</th>
-                <th class="v-ip">{{ 'IP Address' | T }}</th>
-                <!--th>{{ 'Service Type' | T }}</th>
-                <th>{{ 'Service IP' | T }}</th>
-                <th>{{ 'Service Port' | T }}</th>
-                <th>{{ 'Status' | T }}</th>
-                <th>{{ 'Bytes In(MBytes)' | T }}</th>
-                <th>{{ 'Bytes Out(MBytes)' | T }}</th>
-                <th>{{ 'Pkts In' | T }}</th>
-                <th>{{ 'Pkts Out' | T }}</th>
-                <th>{{ 'Current Connections' | T }}</th>
-                <th>{{ 'Total Connections' | T}}</th-->
-            </tr>
-            <tr>
-                <th></th>
-                <th>
-                    <input st-search="name" placeholder="{{'Search by Service Name'|T}}" class="input-sm form-control" type="text" />
-                </th>
-                <th></th>
-                <th>
-                    <select class="input-sm form-control" st-input-event="change" st-search="device.name">
-                        <option value="">{{'All'|T}}</option>
-                        <option ng-repeat="row in SLBService.serviceList | unique:'device.name'" value="{{row.device.name}}">{{row.device.name}}</option>
-                    </select>
-                </th>
-                <th>
-                    <select class="input-sm form-control" st-input-event="change" st-search="device.device_group">
-                        <option value="">{{'All'|T}}</option>
-                        <option ng-repeat="row in SLBService.serviceList | unique:'device.device_group'" value="{{row.device.device_group}}">{{row.device.device_group}}</option>
-                    </select>
-                </th>
-                <th>
-                    <input st-search="ip" placeholder="{{'Search by IP Address'|T}}" class="input-sm form-control" type="text" />
-                </th>
-                <!--th><input st-search="protocol" placeholder="{{'Search by Service Type'|T}}" class="input-sm form-control" type="text" /></th>
-                <th><input st-search="virtual_ip" placeholder="{{'Search by Service IP'|T}}" class="input-sm form-control" type="text" /></th>
-                <th></th>
-                <th></th>
-                <th></th>
-                <th></th>
-                <th></th>
-                <th></th>
-                <th></th>
-                <th></th-->
-            </tr>
-            </thead>
-            <tbody ng-show="!SLBService.isLoading">
-                <tr ng-repeat="item in displayedCollection">
-                    <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
-                    <td>
-                        <a class="name" ui-sref="index.auditing.log_analysis.slb_service.detail({service_name:item.name})" ng-click="SLBService.detail(item)">{{ item.name }}</a>
-                    </td>
-                    <td>{{ item.type }}</td>
-                    <td style="cursor: pointer;" ui-sref="index.device.detail({name:item.device.name})" ng-click="SLBService.setDetail(item.device)"> <a class="name">{{ item.device.name }}</a></td>
-                    <td>{{ item.device.device_group }}</td>
-                    <td>{{ item.ip }}</td>
-                    <!--td>{{ item.protocol | uppercase}}</td>
-                    <td>{{ item.virtual_ip }}</td>
-                    <td>{{ item.virtual_port}}</td>
-                    <td>
-                        <span ng-class="[{'array-connect': item.status}, {'array-close': !item.status}]"></span>
-                    </td>
-                    <td>{{ item.total_bytes_in | bytesToMBytes}}</td>
-                    <td>{{ item.total_bytes_out | bytesToMBytes}}</td>
-                    <td>{{ item.total_packets_in }}</td>
-                    <td>{{ item.total_packets_out}}</td>
-                    <td>{{ item.current_connection }}</td>
-                    <td>{{ item.total_connection }}</td-->
-                </tr>
-            </tbody>
-            <tbody ng-show="SLBService.isLoading">
-                <tr>
-                    <td colspan="13" class="text-center">{{'Loading...' | T }}</td>
-                </tr>
-            </tbody>
-            <tfoot>
-                <tr>
-                    <td colspan="13" class="text-center">
-                        <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)"></div>
-                    </td>
-                </tr>
-            </tfoot>
-        </table>
+<div class="row">
+    <div class="col-md-12">
+        <div class="widget">
+            <div class="widget-header">
+                <span class="tab-header-1">{{'SLB Service' | T}}</span>
+            </div>
+            <div class="">
+                <table st-table="displayedCollection" st-safe-src="SLBService.serviceList" class="table table-hover">
+                    <thead>
+                    <tr>
+                        <th class="d-num">No.</th>
+                        <th class="v-name">{{ 'Service Name' | T }}</th>
+                        <th class="v-type">{{ 'Type' | T }}</th>
+                        <th class="v-device">{{ 'Device Name' | T }}</th>
+                        <th class="d-name">{{ 'Device Group' | T }}</th>
+                        <th class="v-ip">{{ 'IP Address' | T }}</th>
+                        <!--th>{{ 'Service Type' | T }}</th>
+                        <th>{{ 'Service IP' | T }}</th>
+                        <th>{{ 'Service Port' | T }}</th>
+                        <th>{{ 'Status' | T }}</th>
+                        <th>{{ 'Bytes In(MBytes)' | T }}</th>
+                        <th>{{ 'Bytes Out(MBytes)' | T }}</th>
+                        <th>{{ 'Pkts In' | T }}</th>
+                        <th>{{ 'Pkts Out' | T }}</th>
+                        <th>{{ 'Current Connections' | T }}</th>
+                        <th>{{ 'Total Connections' | T}}</th-->
+                    </tr>
+                    <tr>
+                        <th></th>
+                        <th>
+                            <input st-search="name" placeholder="{{'Search by Service Name'|T}}"
+                                   class="input-sm form-control" type="text"/>
+                        </th>
+                        <th></th>
+                        <th>
+                            <select class="input-sm form-control" st-input-event="change" st-search="device.name">
+                                <option value="">{{'All' | T}}</option>
+                                <option ng-repeat="row in SLBService.serviceList | unique:'device.name'"
+                                        value="{{row.device.name}}">{{row.device.name}}
+                                </option>
+                            </select>
+                        </th>
+                        <th>
+                            <select class="input-sm form-control" st-input-event="change"
+                                    st-search="device.device_group">
+                                <option value="">{{'All' | T}}</option>
+                                <option ng-repeat="row in SLBService.serviceList | unique:'device.device_group'"
+                                        value="{{row.device.device_group}}">{{row.device.device_group}}
+                                </option>
+                            </select>
+                        </th>
+                        <th>
+                            <input st-search="ip" placeholder="{{'Search by IP Address'|T}}"
+                                   class="input-sm form-control" type="text"/>
+                        </th>
+                        <!--th><input st-search="protocol" placeholder="{{'Search by Service Type'|T}}" class="input-sm form-control" type="text" /></th>
+                        <th><input st-search="virtual_ip" placeholder="{{'Search by Service IP'|T}}" class="input-sm form-control" type="text" /></th>
+                        <th></th>
+                        <th></th>
+                        <th></th>
+                        <th></th>
+                        <th></th>
+                        <th></th>
+                        <th></th>
+                        <th></th-->
+                    </tr>
+                    </thead>
+                    <tbody ng-show="!SLBService.isLoading">
+                    <tr ng-repeat="item in displayedCollection">
+                        <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
+                        <td>
+                            <a class="name"
+                               ui-sref="index.auditing.log_analysis.slb_service.detail({service_name:item.name})"
+                               ng-click="SLBService.detail(item)">{{ item.name }}</a>
+                        </td>
+                        <td>{{ item.type }}</td>
+                        <td style="cursor: pointer;" ui-sref="index.device.detail({name:item.device.name})"
+                            ng-click="SLBService.setDetail(item.device)"><a class="name">{{ item.device.name }}</a></td>
+                        <td>{{ item.device.device_group }}</td>
+                        <td>{{ item.ip }}</td>
+                        <!--td>{{ item.protocol | uppercase}}</td>
+                        <td>{{ item.virtual_ip }}</td>
+                        <td>{{ item.virtual_port}}</td>
+                        <td>
+                            <span ng-class="[{'array-connect': item.status}, {'array-close': !item.status}]"></span>
+                        </td>
+                        <td>{{ item.total_bytes_in | bytesToMBytes}}</td>
+                        <td>{{ item.total_bytes_out | bytesToMBytes}}</td>
+                        <td>{{ item.total_packets_in }}</td>
+                        <td>{{ item.total_packets_out}}</td>
+                        <td>{{ item.current_connection }}</td>
+                        <td>{{ item.total_connection }}</td-->
+                    </tr>
+                    <tr ng-if="displayedCollection.length === 0">
+                        <td colspan="6" class="text-center">No matching records found.</td>
+                    </tr>
+                    </tbody>
+                    <tbody ng-show="SLBService.isLoading">
+                    <tr>
+                        <td colspan="13" class="text-center">{{'Loading...' | T }}</td>
+                    </tr>
+                    </tbody>
+                    <tfoot>
+                    <tr>
+                        <td colspan="13" class="text-center">
+                            <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5"
+                                 st-page-change="onPageChange(newPage)"></div>
+                        </td>
+                    </tr>
+                    </tfoot>
+                </table>
+            </div>
+        </div>
     </div>
 </div>
-
Index: /branches/amp_3_7/extensions/auditing/webui/log_analysis/slb_service/slb/visitLog.html
===================================================================
--- /branches/amp_3_7/extensions/auditing/webui/log_analysis/slb_service/slb/visitLog.html	(revision 2477)
+++ /branches/amp_3_7/extensions/auditing/webui/log_analysis/slb_service/slb/visitLog.html	(working copy)
@@ -1,118 +1,127 @@
-<div class="row">
-    <div class="col-md-12">
-        <form class="form-horizontal" role="form">
-            <div class="form-group">
-                <label class="col-md-3 control-label" for="start">{{'Filter' | T}}</label>
-                <div class="col-md-6">
-                    <input type="text" placeholder="{{'response_code=200' | T}}" class="form-control" ng-model="logOfSLB.search_key_field" style="width: 320px">
-                </div>
+<div class="col-md-12">
+    <form class="form-horizontal" role="form">
+        <div class="form-group">
+            <label class="col-md-3 control-label" for="start">{{'Filter' | T}}</label>
+            <div class="col-md-6">
+                <input type="text" placeholder="{{'response_code=200' | T}}" class="form-control"
+                       ng-model="logOfSLB.search_key_field" style="width: 320px">
             </div>
-            <div class="form-group">
-                <label class="col-md-3 control-label" for="start">{{'Start Time' | T}}</label>
-                <div class="col-md-6">
-                    <input type="text" placeholder="{{'Start Time' | T}}" class="form-control" id="start"
-                       data-date-format="yyyy-mm-dd hh:ii:ss" style="width: 320px;" ng-model="logOfSLB.startTime" readonly="readonly">
-                </div>
+        </div>
+        <div class="form-group">
+            <label class="col-md-3 control-label" for="start">{{'Start Time' | T}}</label>
+            <div class="col-md-6">
+                <input type="text" placeholder="{{'Start Time' | T}}" class="form-control" id="start"
+                       data-date-format="yyyy-mm-dd hh:ii:ss" style="width: 320px;" ng-model="logOfSLB.startTime"
+                       readonly="readonly">
             </div>
-            <div class="form-group">
-                <label class="col-md-3 control-label" for="end">{{'End Time' | T}}</label>
-                <div class="col-md-6">
-                    <input type="text" placeholder="{{'End Time' | T}}" class="form-control" id="end"
-                       data-date-format="yyyy-mm-dd hh:ii:ss" style="width: 320px;" ng-model="logOfSLB.endTime" readonly="readonly">
-                </div>
+        </div>
+        <div class="form-group">
+            <label class="col-md-3 control-label" for="end">{{'End Time' | T}}</label>
+            <div class="col-md-6">
+                <input type="text" placeholder="{{'End Time' | T}}" class="form-control" id="end"
+                       data-date-format="yyyy-mm-dd hh:ii:ss" style="width: 320px;" ng-model="logOfSLB.endTime"
+                       readonly="readonly">
             </div>
-            <div class="form-group">
-                <label class="col-md-3 control-label"></label>
-                <div class="col-md-6">
-                    <button type="submit" class="btn btn-primary" ng-click="logOfSLB.searchData()">{{'Search' | T}}</button>
-                </div>
+        </div>
+        <div class="form-group">
+            <label class="col-md-3 control-label"></label>
+            <div class="col-md-6">
+                <button type="submit" class="btn btn-primary" ng-click="logOfSLB.searchData()">{{'Search' | T}}</button>
             </div>
-            <div class="tip" style="padding: 15px; line-height: 15px;">
-                <div class="tip-content">
-                    <p class="title">{{'Example for Filter :' | T}}</p>
-                    <p><a ng-click="logOfSLB.inputFilter('response_code=200')">{{'response_code=200(200/400/401/403/404/500/504...)' | T}}</a></p>
-                    <p><a ng-click="logOfSLB.inputFilter('method=GET')">{{'method=GET(GET/POST/PUT...)' | T}}</a></p>
-                    <p><a ng-click="logOfSLB.inputFilter('srcip=10.1.1.1')">{{'srcip=10.1.1.1' | T}}</a>
-                    <p><a ng-click="logOfSLB.inputFilter('dstip=10.10.10.0')">{{'dstip=10.10.10.0' | T}}</a></p>
-                    <p><a ng-click="logOfSLB.inputFilter('method=GET&response_code=200')">{{'method=GET&response_code=200' | T}}</a></p>
-                    <p><a ng-click="logOfSLB.inputFilter('srcip=10.1.1.1&dstip=10.10.10.0')">{{'srcip=10.1.1.1&dstip=10.10.10.0' | T}}</a></p>
-                </div>
+        </div>
+        <div class="tip" style="padding: 15px; line-height: 15px;">
+            <div class="tip-content">
+                <p class="title">{{'Example for Filter :' | T}}</p>
+                <p>
+                    <a ng-click="logOfSLB.inputFilter('response_code=200')">{{'response_code=200(200/400/401/403/404/500/504...)' | T}}</a>
+                </p>
+                <p><a ng-click="logOfSLB.inputFilter('method=GET')">{{'method=GET(GET/POST/PUT...)' | T}}</a></p>
+                <p><a ng-click="logOfSLB.inputFilter('srcip=10.1.1.1')">{{'srcip=10.1.1.1' | T}}</a>
+                <p><a ng-click="logOfSLB.inputFilter('dstip=10.10.10.0')">{{'dstip=10.10.10.0' | T}}</a></p>
+                <p>
+                    <a ng-click="logOfSLB.inputFilter('method=GET&response_code=200')">{{'method=GET&response_code=200' | T}}</a>
+                </p>
+                <p>
+                    <a ng-click="logOfSLB.inputFilter('srcip=10.1.1.1&dstip=10.10.10.0')">{{'srcip=10.1.1.1&dstip=10.10.10.0' | T}}</a>
+                </p>
             </div>
-        </form>
-    </div>
+        </div>
+    </form>
 </div>
-<div class="row">
-    <div class="col-md-12">
-        <div class="graph-no-data" style="line-height: 40px; text-align: center;border-radius: 4px 4px 0 0;" ng-show="!logOfSLB.showLineChart">
-            <h3>{{ 'Total 0 Records' | T}}</h3>
-        </div>
-        <div class="graph" ng-repeat="widget in logOfSLB.widgets" ng-show="logOfSLB.showLineChart">
-            <div class="graph-title">
-                <span>{{ widget.title | T}}</span>
-            </div>
-            <div class="graph-container" analytics-service-line-chart chart-data="widget" search-data-list="logOfSLB.dataList" is-loading="logOfSLB.isLoading"
-                 show-line-chart="logOfSLB.showLineChart" list-start-time="logOfSLB.list_start_time" 
-                 style="height: 350px; padding: 0px"></div>
+
+<div class="col-md-12">
+    <div class="graph-no-data" style="line-height: 40px; text-align: center;border-radius: 4px 4px 0 0;"
+         ng-show="!logOfSLB.showLineChart">
+        <h5>{{ 'Total 0 Records' | T}}</h5>
+    </div>
+    <div class="graph" ng-repeat="widget in logOfSLB.widgets" ng-show="logOfSLB.showLineChart">
+        <div class="graph-title">
+            <span>{{ widget.title | T}}</span>
         </div>
+        <div class="graph-container" analytics-service-line-chart chart-data="widget"
+             search-data-list="logOfSLB.dataList" is-loading="logOfSLB.isLoading"
+             show-line-chart="logOfSLB.showLineChart" list-start-time="logOfSLB.list_start_time"
+             style="height: 350px; padding: 0px"></div>
     </div>
 </div>
-<div class="row">
-    <div class="col-md-12">
-        <div class="widget">
-            <div class="widget-header">
-                <span>{{ 'Access Logs' | T }}</span>
-            </div>
-            <div class="" >
-                <table st-table="logOfSLB.dataList" st-pipe="logOfSLB.myServer" class="table table-hover">
-                    <thead>
-                    <tr>
-                        <th class="d-num">No.</th>
-                        <th st-sort="timestamp">{{ 'Time' | T }}</th>
-                        <th>{{ 'Src IP' | T }}</th>
-                        <th>{{ 'User Agent' | T }}</th>
-                        <th>{{ 'Request' | T }}</th>
-                        <th>{{ 'Server IP' | T }}</th>
-                        <th>{{'Status' | T}}</th>
-                        <th>{{'RTT' | T}}</th>
-                    </tr>
-                    </thead>
-                    <tbody ng-if="!logOfSLB.isLoading">
-                        <tr ng-repeat="item in logOfSLB.dataList">
-                            <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
-                            <td>{{ item.timestamp }}</td>
-                            <td>{{ item.src }}</td>
-                            <td>{{ item.useragent}}</td>
-                            <td>{{ item.httpmethod}}</td>
-                            <td>{{ item.serverip }}</td>
-                            <td>{{ item.httpstatuscode }}</td>
-                            <td>{{ item.duration ? item.duration : 0 | number:2}}<em>s</em></td>
-                        </tr>
-                    </tbody>
-                    <tbody ng-show="logOfSLB.isLoading">
-                        <tr>
-                            <td colspan="8" class="text-center">{{'Loading...' | T }}</td>
-                        </tr>
-                    </tbody>
-                    <tfoot>
-                        <tr>
-                            <td colspan="8" class="text-center">
-                                <div st-pagination="" st-items-by-page="pageSize" st-page-change="onPageChange(newPage)"st-displayed-pages="logOfSLB.stdisplayedpages" st-template="app/modules/common/templates/page.html"></div>
-                            </td>
-                        </tr>
-                    </tfoot>
-                </table>
-            </div>
+
+<div class="col-md-12">
+    <div class="widget">
+        <div class="widget-header">
+            <span class="tab-header-1">{{ 'Access Logs' | T }}</span>
+        </div>
+        <div class="">
+            <table st-table="logOfSLB.dataList" st-pipe="logOfSLB.myServer" class="table table-hover">
+                <thead>
+                <tr>
+                    <th class="d-num">No.</th>
+                    <th st-sort="timestamp">{{ 'Time' | T }}</th>
+                    <th>{{ 'Src IP' | T }}</th>
+                    <th>{{ 'User Agent' | T }}</th>
+                    <th>{{ 'Request' | T }}</th>
+                    <th>{{ 'Server IP' | T }}</th>
+                    <th>{{'Status' | T}}</th>
+                    <th>{{'RTT' | T}}</th>
+                </tr>
+                </thead>
+                <tbody ng-if="!logOfSLB.isLoading">
+                <tr ng-repeat="item in logOfSLB.dataList">
+                    <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
+                    <td>{{ item.timestamp }}</td>
+                    <td>{{ item.src }}</td>
+                    <td>{{ item.useragent}}</td>
+                    <td>{{ item.httpmethod}}</td>
+                    <td>{{ item.serverip }}</td>
+                    <td>{{ item.httpstatuscode }}</td>
+                    <td>{{ item.duration ? item.duration : 0 | number:2}}<em>s</em></td>
+                </tr>
+                </tbody>
+                <tbody ng-show="logOfSLB.isLoading">
+                <tr>
+                    <td colspan="8" class="text-center">{{'Loading...' | T }}</td>
+                </tr>
+                </tbody>
+                <tfoot>
+                <tr>
+                    <td colspan="8" class="text-center">
+                        <div st-pagination="" st-items-by-page="pageSize" st-page-change="onPageChange(newPage)"
+                             st-displayed-pages="logOfSLB.stdisplayedpages"
+                             st-template="app/modules/common/templates/page.html"></div>
+                    </td>
+                </tr>
+                </tfoot>
+            </table>
         </div>
     </div>
 </div>
 <script>
     $('#start').datetimepicker({
         autoclose: true,
-        endDate : new Date()
+        endDate: new Date()
     });
     $('#end').datetimepicker({
         //pickerPosition: "bottom-left",
         autoclose: true,
-        endDate : new Date()
+        endDate: new Date()
     });
 </script>
\ No newline at end of file
Index: /branches/amp_3_7/extensions/auditing/webui/log_analysis/sslvpn_service/audit.html
===================================================================
--- /branches/amp_3_7/extensions/auditing/webui/log_analysis/sslvpn_service/audit.html	(revision 2477)
+++ /branches/amp_3_7/extensions/auditing/webui/log_analysis/sslvpn_service/audit.html	(working copy)
@@ -2,19 +2,24 @@
     <div class="col-md-12">
         <ul class="nav nav-tabs">
             <li role="presentation" ng-class="{ active: url_contain('/auditing/log_analysis/sslvpn_service/user') }">
-                <a ui-sref="index.auditing.log_analysis.sslvpn_service.user">{{ 'User Logs' | T }}</a>
+                <a ui-sref="index.auditing.log_analysis.sslvpn_service.user"><span class="tab-header">{{ 'User Logs' | T
+                    }}</span></a>
             </li>
             <li role="presentation" ng-class="{ active: url_contain('/auditing/log_analysis/sslvpn_service/device') }">
-                <a ui-sref="index.auditing.log_analysis.sslvpn_service.device">{{ 'Endpoint Logs' | T }}</a>
+                <a ui-sref="index.auditing.log_analysis.sslvpn_service.device"><span
+                        class="tab-header">{{ 'Endpoint Logs' | T }}</span></a>
             </li>
-            <li role="presentation" ng-class="{ active: url_contain('/auditing/log_analysis/sslvpn_service/statistics') }">
-                <a ui-sref="index.auditing.log_analysis.sslvpn_service.statistics.user">{{ 'Logs Statistics' | T }}</a>
+            <li role="presentation"
+                ng-class="{ active: url_contain('/auditing/log_analysis/sslvpn_service/statistics') }">
+                <a ui-sref="index.auditing.log_analysis.sslvpn_service.statistics.user"><span
+                        class="tab-header">{{ 'Logs Statistics' | T }}</span></a>
             </li>
         </ul>
     </div>
-</div>
-<div class="">
-    <div class="" ng-show="url_contain('/auditing/log_analysis/sslvpn_service/user')" ui-view="user"></div>
-    <div class="" ng-show="url_contain('/auditing/log_analysis/sslvpn_service/device')" ui-view="device"></div>
-    <div class="" ng-show="url_contain('/auditing/log_analysis/sslvpn_service/statistics')" ui-view="statistics"></div>
+    <div class="content-wrapper">
+        <div class="" ng-show="url_contain('/auditing/log_analysis/sslvpn_service/user')" ui-view="user"></div>
+        <div class="" ng-show="url_contain('/auditing/log_analysis/sslvpn_service/device')" ui-view="device"></div>
+        <div class="" ng-show="url_contain('/auditing/log_analysis/sslvpn_service/statistics')"
+             ui-view="statistics"></div>
+    </div>
 </div>
Index: /branches/amp_3_7/extensions/auditing/webui/log_analysis/sslvpn_service/tabs/device/deviceList.html
===================================================================
--- /branches/amp_3_7/extensions/auditing/webui/log_analysis/sslvpn_service/tabs/device/deviceList.html	(revision 2477)
+++ /branches/amp_3_7/extensions/auditing/webui/log_analysis/sslvpn_service/tabs/device/deviceList.html	(working copy)
@@ -1,82 +1,102 @@
-<div class="row">
-    <div class="col-md-12">
-        <div class="alert alert-info" ng-if="deviceList.showHelpContent" role="alert">{{"The Endpoint Logs is a summary of the endpoint's login records. Only when the hardwareid is enabled will the endpoint logs data be available. The endpoint logs is the part of the user logs with hardwareid information. In particular, if user login with multiple devices and different devices have different hardwareid. In this case, the user logs will be aggregated into one, while the endpoint logs will Divided into multiple."|T}}</div>
-        <span ng-repeat="item in deviceList.selectDateList" ng-class="{'time-item-selected':deviceList.currentRange==item.value}" class="time-item ng-scope ng-binding" ng-click="deviceList.changeTimeGap(item.value)">{{item.verbose_name}}</span>
-        <input type="text" class="usertime-item" id="start" data-date-format="yyyy-mm-dd hh:ii:ss" ng-change="deviceList.applyTimeRange()" ng-model="deviceList.startTime" readonly="readonly">
-        <span>&minus;</span>
-        <input type="text" class="usertime-item" id="end" data-date-format="yyyy-mm-dd hh:ii:ss" ng-change="deviceList.applyTimeRange()" ng-model="deviceList.endTime" readonly="readonly">
+<div class="col-md-12">
+    <div class="alert alert-info" ng-if="deviceList.showHelpContent" role="alert">
+        {{"The Endpoint Logs is a summary of the endpoint's login records. Only when the hardwareid is enabled will the endpoint logs data be available. The endpoint logs is the part of the user logs with hardwareid information. In particular, if user login with multiple devices and different devices have different hardwareid. In this case, the user logs will be aggregated into one, while the endpoint logs will Divided into multiple." | T}}
     </div>
-    <div class="col-md-12">
-        <div class="widget">
-            <div class="table-toolbar">
-                <div class="">
-                    <div class="btn-group">
-                        <button class="btn btn-link" title="{{ 'Refresh User List' | T }}" ng-click="deviceList.refresh()"><i class="fa fa-refresh"></i></button>
-                        <button class="btn btn-link" title="{{'Export'|T}}" ng-click="deviceList.exportData()"><i class="fa fa-external-link"></i></button>
-                        <button class="btn btn-link" title="{{'Help'|T}}" ng-click="deviceList.showHelpContent = !deviceList.showHelpContent"><i class="fa fa-question-circle"></i></button>
-                    </div>
-                </div>
-            </div>
-            <div class="table-container" st-table="displayedCollection" st-safe-src="deviceList.deviceInfoList">
-                <div class="table-content">
-                    <table class="table table-hover">
-                        <thead>
-                            <tr>
-                                <th class="d-num">No.</th>
-                                <th class="d-hardwareid">{{ 'Endpoint ID' | T }}</th>
-                                <th class="d-name">{{ 'User' | T }}</th>
-                                <th class="d-host">{{ 'Device Name' | T }}</th>
-                                <th class="d-host">{{ 'Device Group' | T }}</th>
-                                <th class="d-vsite">{{ 'Vsite Name' | T }}</th>
-                            </tr>
-                            <tr>
-                                <th></th>
-                                <th>
-                                    <input st-search="hardware_id" placeholder="{{'Search by Endpoint ID'|T}}" class="input-sm form-control" type="text" />
-                                </th>
-                                <th>
-                                    <input st-search="user_name" placeholder="{{'Search by User'|T}}" class="input-sm form-control" type="text" />
-                                </th>
-                                <th>
-                                    <select class="input-sm form-control" st-input-event="change" st-search="device.name">
-                                        <option value="">{{'All'|T}}</option>
-                                        <option ng-repeat="row in deviceList.deviceInfoList | unique:'device.name'" value="{{row.device.name}}">{{row.device.name}}</option>
-                                    </select>
-                                </th>
-                                <th>
-                                    <select class="input-sm form-control" st-input-event="change" st-search="device.device_group">
-                                        <option value="">{{'All'|T}}</option>
-                                        <option ng-repeat="row in deviceList.deviceInfoList | unique:'device.device_group'" value="{{row.device.device_group}}">{{row.device.device_group}}</option>
-                                    </select>
-                                </th>
-                                <th>
-                                    <input st-search="vsite_name" placeholder="{{'Search by Vsite Name'|T}}" class="input-sm form-control" type="text" />
-                                </th>
-                            </tr>
-                        </thead>
-                        <tbody ng-if="!deviceList.loading">
-                            <tr ng-repeat="user in displayedCollection">
-                                <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
-                                <td>{{ user.hardware_id }}</td>
-                                <td>{{ user.user_name }}</td>
-                                <td>{{ user.device.name }}</td>
-                                <td>{{ user.device.device_group }}</td>
-                                <td>{{ user.vsite_name }}</td>
-                            </tr>
-                        </tbody>
-                        <tfoot>
-                            <tr>
-                                <td class="text-center" st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)" colspan="6"></td>
-                            </tr>
-                        </tfoot>
-                    </table>
+    <span ng-repeat="item in deviceList.selectDateList"
+          ng-class="{'time-item-selected':deviceList.currentRange==item.value}" class="time-item ng-scope ng-binding"
+          ng-click="deviceList.changeTimeGap(item.value)">{{item.verbose_name}}</span>
+    <input type="text" class="usertime-item" id="start" data-date-format="yyyy-mm-dd hh:ii:ss"
+           ng-change="deviceList.applyTimeRange()" ng-model="deviceList.startTime" readonly="readonly">
+    <span>&minus;</span>
+    <input type="text" class="usertime-item" id="end" data-date-format="yyyy-mm-dd hh:ii:ss"
+           ng-change="deviceList.applyTimeRange()" ng-model="deviceList.endTime" readonly="readonly">
+</div>
+<div class="col-md-12">
+    <div class="widget">
+        <div class="table-toolbar">
+            <div class="">
+                <div class="btn-group">
+                    <button class="btn btn-link" title="{{ 'Refresh User List' | T }}" ng-click="deviceList.refresh()">
+                        <i class="fa fa-refresh an-tab-icon"></i></button>
+                    <button class="btn btn-link" title="{{'Export'|T}}" ng-click="deviceList.exportData()"><i
+                            class="fa fa-external-link an-tab-icon"></i></button>
+                    <button class="btn btn-link" title="{{'Help'|T}}"
+                            ng-click="deviceList.showHelpContent = !deviceList.showHelpContent"><i
+                            class="fa fa-question-circle an-tab-icon"></i></button>
                 </div>
             </div>
-            <div style="text-align: center" ng-if="deviceList.loading"><img src="app/images/loading.gif"></div>
-            <div class="alert alert-warning" role="alert" ng-if="deviceList.deviceInfoList.length==0">
-                {{ "No data? Please check log configurations on target device and incorrect log configurations will affect auditing function. Please refer to user guide and make sure following configurations include 'log host &lt;ip_address&gt; 514 UDP [id] [log level]', 'log option logid on', 'log option levelinfo off', 'log option showlogidkey off', 'log option uniqueid off', 'log http welf' and 'log on' have all been correctly configured. If have been and still no data, please confirm whether there are actual logs generated and sent on target device." | T}}
+        </div>
+        <div class="table-container" st-table="displayedCollection" st-safe-src="deviceList.deviceInfoList">
+            <div class="table-content" style="width: 100%;">
+                <table class="table table-hover">
+                    <thead>
+                    <tr>
+                        <th class="d-num">No.</th>
+                        <th class="d-hardwareid">{{ 'Endpoint ID' | T }}</th>
+                        <th class="d-name">{{ 'User' | T }}</th>
+                        <th class="d-host">{{ 'Device Name' | T }}</th>
+                        <th class="d-host">{{ 'Device Group' | T }}</th>
+                        <th class="d-vsite">{{ 'Vsite Name' | T }}</th>
+                    </tr>
+                    <tr>
+                        <th></th>
+                        <th>
+                            <input st-search="hardware_id" placeholder="{{'Search by Endpoint ID'|T}}"
+                                   class="input-sm form-control" type="text"/>
+                        </th>
+                        <th>
+                            <input st-search="user_name" placeholder="{{'Search by User'|T}}"
+                                   class="input-sm form-control" type="text"/>
+                        </th>
+                        <th>
+                            <select class="input-sm form-control" st-input-event="change" st-search="device.name">
+                                <option value="">{{'All' | T}}</option>
+                                <option ng-repeat="row in deviceList.deviceInfoList | unique:'device.name'"
+                                        value="{{row.device.name}}">{{row.device.name}}
+                                </option>
+                            </select>
+                        </th>
+                        <th>
+                            <select class="input-sm form-control" st-input-event="change"
+                                    st-search="device.device_group">
+                                <option value="">{{'All' | T}}</option>
+                                <option ng-repeat="row in deviceList.deviceInfoList | unique:'device.device_group'"
+                                        value="{{row.device.device_group}}">{{row.device.device_group}}
+                                </option>
+                            </select>
+                        </th>
+                        <th>
+                            <input st-search="vsite_name" placeholder="{{'Search by Vsite Name'|T}}"
+                                   class="input-sm form-control" type="text"/>
+                        </th>
+                    </tr>
+                    </thead>
+                    <tbody ng-if="!deviceList.loading">
+                    <tr ng-repeat="user in displayedCollection">
+                        <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
+                        <td>{{ user.hardware_id }}</td>
+                        <td>{{ user.user_name }}</td>
+                        <td>{{ user.device.name }}</td>
+                        <td>{{ user.device.device_group }}</td>
+                        <td>{{ user.vsite_name }}</td>
+                    </tr>
+                    <tr ng-if="displayedCollection.length === 0">
+                        <td colspan="6" class="text-center">No matching records found.</td>
+                    </tr>
+                    </tbody>
+                    <tfoot>
+                    <tr>
+                        <td class="text-center" st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5"
+                            st-page-change="onPageChange(newPage)" colspan="6"></td>
+                    </tr>
+                    </tfoot>
+                </table>
             </div>
         </div>
+        <div style="text-align: center" ng-if="deviceList.loading"><img src="app/images/loading.gif"></div>
+        <div class="alert alert-warning" role="alert" ng-if="deviceList.deviceInfoList.length==0">
+            {{ "No data? Please check log configurations on target device and incorrect log configurations will affect auditing function. Please refer to user guide and make sure following configurations include 'log host &lt;ip_address&gt; 514 UDP [id] [log level]', 'log option logid on', 'log option levelinfo off', 'log option showlogidkey off', 'log option uniqueid off', 'log http welf' and 'log on' have all been correctly configured. If have been and still no data, please confirm whether there are actual logs generated and sent on target device." | T}}
+        </div>
     </div>
 </div>
 
@@ -85,7 +105,7 @@
         cursor: pointer;
         background: #D9DEE4;
         color: #666666;
-        padding: 0px 10px;
+        padding: 0 10px;
         margin-right: 7px;
         display: inline-block;
         vertical-align: -2px;
@@ -102,7 +122,7 @@
     }
 
     .usertime-item {
-        border: 0px solid #ccc;
+        border: 0 solid #ccc;
         border-top-left-radius: 3px;
         border-bottom-left-radius: 3px;
         padding: 0 5px;
Index: /branches/amp_3_7/extensions/auditing/webui/log_analysis/sslvpn_service/tabs/statistics/server.html
===================================================================
--- /branches/amp_3_7/extensions/auditing/webui/log_analysis/sslvpn_service/tabs/statistics/server.html	(revision 2477)
+++ /branches/amp_3_7/extensions/auditing/webui/log_analysis/sslvpn_service/tabs/statistics/server.html	(working copy)
@@ -1,91 +1,87 @@
-<div class="row">
-    <div class="col-md-12">
-        <div class="alert alert-info" ng-if="userLogsStatistics.showHelpContent" role="alert">{{'Server log statistics are statistics about server usage in a certain period in the past.'|T}}</div>
-        <div class="widget">
-            <!-- <div class="widget-header">Server Usage Statistics</div> -->
-            <div class="table-toolbar">
-                <form class="form-inline" role="form">
-                    <!-- <div class="form-group">
-                        <label class="control-label" for="start">{{'Time' | T}}</label>
-                        <input type="text" placeholder="{{'Start Time' | T}}" class="form-control" id="start" data-date-format="yyyy-mm-dd hh:ii:ss" style="width: 180px;" ng-model="serverLogsStatistics.startTime" readonly="readonly">
-                    </div>
-                    <span>&minus;</span>
-                    <div class="form-group">
-                        <label class="sr-only" for="end">{{'End'}}</label>
-                        <input type="text" placeholder="{{'End Time' | T}}" class="form-control" id="end" data-date-format="yyyy-mm-dd hh:ii:ss" style="width: 180px;" ng-model="serverLogsStatistics.endTime" readonly="readonly">
-                    </div> -->
-
-                    <div class="form-group status">
-                        <label for="status" class="control-label">{{'Type' | T}}</label>
-                        <select name="type" class="input-sm form-control" ng-model="serverLogsStatistics.type">
-                            <option ng-repeat="type in serverLogsStatistics.types" value="{{type.value}}">{{type.name}}</option>
-                        </select>
-                    </div>
-                    <div class="form-group top">
-                        <label for="status" class="control-label">{{'Top' | T}}</label>
-                        <select name="type" class="input-sm form-control" ng-model="serverLogsStatistics.top">
-                            <option ng-repeat="top in serverLogsStatistics.tops" value="{{ top.value }}">{{top.name | T}}</option>
-                        </select>
-                    </div>
+<div class="col-md-12">
+    <div class="alert alert-info" ng-if="userLogsStatistics.showHelpContent" role="alert">
+        {{'Server log statistics are statistics about server usage in a certain period in the past.' | T}}
+    </div>
+    <div class="widget">
+        <div class="table-toolbar">
+            <form class="form-inline" role="form">
+                <div class="form-group status">
+                    <label for="status" class="control-label">{{'Type' | T}}</label>
+                    <select name="type" class="input-sm form-control" ng-model="serverLogsStatistics.type">
+                        <option ng-repeat="type in serverLogsStatistics.types" value="{{type.value}}">{{type.name}}
+                        </option>
+                    </select>
+                </div>
+                <div class="form-group top">
+                    <label for="status" class="control-label">{{'Top' | T}}</label>
+                    <select name="type" class="input-sm form-control" ng-model="serverLogsStatistics.top">
+                        <option ng-repeat="top in serverLogsStatistics.tops" value="{{ top.value }}">{{top.name | T}}
+                        </option>
+                    </select>
+                </div>
 
-                    <div class="btn btn-sm btn-default" ng-click="serverLogsStatistics.search()" ng-disabled="serverLogsStatistics.isSearching"><i class="fa fa-search"><span style="margin-left: 3px;">{{'Search'|T}}</span></i></div>
-                    <button class="btn btn-link" title="{{'Help'|T}}" ng-click="userLogsStatistics.showHelpContent = !userLogsStatistics.showHelpContent"><i class="fa fa-question-circle"></i></button>
-                    <div class="btn-group pull-right">
-                        <div class="btn btn-sm ng-binding btn-primary" ng-click="serverLogsStatistics.exportData()"><i class="fa fa-external-link"><span style="margin-left: 3px;">{{'Export'|T}}</span></i></div>
+                <div class="btn btn-sm btn-default" ng-click="serverLogsStatistics.search()"
+                     ng-disabled="serverLogsStatistics.isSearching"><i class="fa fa-search"><span
+                        style="margin-left: 3px;">{{'Search' | T}}</span></i></div>
+                <button class="btn btn-link" title="{{'Help'|T}}"
+                        ng-click="userLogsStatistics.showHelpContent = !userLogsStatistics.showHelpContent"><i
+                        class="fa fa-question-circle"></i></button>
+                <div class="btn-group pull-right">
+                    <div class="btn btn-sm ng-binding btn-primary" ng-click="serverLogsStatistics.exportData()"><i
+                            class="fa fa-external-link"><span style="margin-left: 3px;">{{'Export' | T}}</span></i>
                     </div>
-                    <!-- <button type="submit" class="btn btn-primary" ng-click="serverLogsStatistics.search()" ng-disabled="serverLogsStatistics.isSearching">{{'Search' | T}}</button>
-
-                    <div class="pull-right" style="padding:0 50px">
-                        <a class="icon-box" title="{{'Export' | T}}" ng-click="serverLogsStatistics.exportData()">
-                            <i class="array-export2" style="font-size:18px;line-height:30px;">
-                                {{'Export' | T}}
-                            </i>
-                        </a>
-                    </div> -->
-                </form>
-            </div>
-            <div class="table-wrapper" st-table="displayedCollection" st-safe-src="serverLogsStatistics.dataList">
-                <div class="table-content">
-                    <table class="table table-striped table-hover">
-                        <thead>
-                            <tr>
-                                <th class="d-num">No.</th>
-                                <th class="d-server">{{ 'Server' | T }}</th>
-                                <th class="d-times" st-sort="times">{{ 'Times' | T }}</th>
-                            </tr>
-                            <tr>
-                                <th></th>
-                                <th>
-                                    <input st-search="server" placeholder="{{'Search by Server'|T}}" class="input-sm form-control" type="text" />
-                                </th>
-                                <th></th>
-                            </tr>
-                        </thead>
-                        <tbody ng-if="!serverLogsStatistics.isLoading">
-                            <tr ng-repeat="row in displayedCollection">
-                                <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
-                                <td><a class="name" ui-sref="index.auditing.log_analysis.sslvpn_service.statistics.server.detail({server : row.server})" ng-click="serverLogsStatistics.detail()">{{ row.server }}</a></td>
-                                <td class="pull-right" style="padding:0 80%">
-                                    {{row.times}}
-                                </td>
-                            </tr>
-                        </tbody>
-                        <tbody ng-if="serverLogsStatistics.isLoading">
-                            <tr>
-                                <td colspan="3" class="text-center">{{'Loading...' | T }}</td>
-                            </tr>
-                        </tbody>
-                        <tfoot>
-                            <tr>
-                                <td class="text-center" st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)" colspan="3"></td>
-                            </tr>
-                        </tfoot>
-                    </table>
                 </div>
+            </form>
+        </div>
+        <div class="table-wrapper" st-table="displayedCollection" st-safe-src="serverLogsStatistics.dataList">
+            <div class="table-content">
+                <table class="table table-striped table-hover" style="width: 100%;">
+                    <thead>
+                    <tr>
+                        <th class="d-num">No.</th>
+                        <th class="d-server">{{ 'Server' | T }}</th>
+                        <th class="d-times" st-sort="times">{{ 'Times' | T }}</th>
+                    </tr>
+                    <tr>
+                        <th></th>
+                        <th>
+                            <input st-search="server" placeholder="{{'Search by Server'|T}}"
+                                   class="input-sm form-control" type="text"/>
+                        </th>
+                        <th></th>
+                    </tr>
+                    </thead>
+                    <tbody ng-if="!serverLogsStatistics.isLoading">
+                    <tr ng-repeat="row in displayedCollection">
+                        <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
+                        <td><a class="name"
+                               ui-sref="index.auditing.log_analysis.sslvpn_service.statistics.server.detail({server : row.server})"
+                               ng-click="serverLogsStatistics.detail()">{{ row.server }}</a></td>
+                        <td class="pull-right" style="padding:0 80%">
+                            {{row.times}}
+                        </td>
+                    </tr>
+                    <tr ng-if="displayedCollection.length === 0">
+                        <td colspan="3" class="text-center">No matching records found.</td>
+                    </tr>
+                    </tbody>
+                    <tbody ng-if="serverLogsStatistics.isLoading">
+                    <tr>
+                        <td colspan="3" class="text-center">{{'Loading...' | T }}</td>
+                    </tr>
+                    </tbody>
+                    <tfoot>
+                    <tr>
+                        <td class="text-center" st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5"
+                            st-page-change="onPageChange(newPage)" colspan="3"></td>
+                    </tr>
+                    </tfoot>
+                </table>
             </div>
-            <div class="alert alert-warning" role="alert" ng-if="!serverLogsStatistics.isLoading&&serverLogsStatistics.dataList.length==0">
-                {{ "No data? Please check log configurations on target device and incorrect log configurations will affect auditing function. Please refer to user guide and make sure following configurations include 'log host &lt;ip_address&gt; 514 UDP [id] [log level]', 'log option logid on', 'log option levelinfo off', 'log option showlogidkey off', 'log option uniqueid off', 'log http welf' and 'log on' have all been correctly configured. If have been and still no data, please confirm whether there are actual logs generated and sent on target device." | T}}
-            </div>
+        </div>
+        <div class="alert alert-warning" role="alert"
+             ng-if="!serverLogsStatistics.isLoading&&serverLogsStatistics.dataList.length==0">
+            {{ "No data? Please check log configurations on target device and incorrect log configurations will affect auditing function. Please refer to user guide and make sure following configurations include 'log host &lt;ip_address&gt; 514 UDP [id] [log level]', 'log option logid on', 'log option levelinfo off', 'log option showlogidkey off', 'log option uniqueid off', 'log http welf' and 'log on' have all been correctly configured. If have been and still no data, please confirm whether there are actual logs generated and sent on target device." | T}}
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
Index: /branches/amp_3_7/extensions/auditing/webui/log_analysis/sslvpn_service/tabs/statistics/statistics.html
===================================================================
--- /branches/amp_3_7/extensions/auditing/webui/log_analysis/sslvpn_service/tabs/statistics/statistics.html	(revision 2477)
+++ /branches/amp_3_7/extensions/auditing/webui/log_analysis/sslvpn_service/tabs/statistics/statistics.html	(working copy)
@@ -1,25 +1,31 @@
-<div class="row">
-    <div class="col-md-12">
-        <!-- <div class="alert alert-info" ng-if="logStatistics.showHelpContent" role="alert">{{'Log statistics are statistics about user logins or server usage in a certain period in the past.'|T}}</div> -->
-        <span ng-repeat="item in logStatistics.selectDateList" ng-class="{'time-item-selected':logStatistics.currentRange==item.value}" class="time-item ng-scope ng-binding" ng-click="logStatistics.changeTimeGap(item.value)">{{item.verbose_name}}</span>
-        <input type="text" class="usertime-item" id="start" data-date-format="yyyy-mm-dd hh:ii:ss" ng-change="logStatistics.applyTimeRange()" ng-model="logStatistics.startTime" readonly="readonly">
-        <span>&minus;</span>
-        <input type="text" class="usertime-item" id="end" data-date-format="yyyy-mm-dd hh:ii:ss" ng-change="logStatistics.applyTimeRange()" ng-model="logStatistics.endTime" readonly="readonly">
-    </div>
-    <div class="col-md-12">
-        <ul class="nav nav-pills">
-            <li ng-class="{ active: url_contain('/auditing/log_analysis/sslvpn_service/statistics/user') }">
-                <a ui-sref="index.auditing.log_analysis.sslvpn_service.statistics.user">{{ 'User Logs Statistics' | T }}</a>
-            </li>
-            <li ng-class="{ active: url_contain('/auditing/log_analysis/sslvpn_service/statistics/server') }">
-                <a ui-sref="index.auditing.log_analysis.sslvpn_service.statistics.server">{{ 'Server Usage Statistics' | T }}</a>
-            </li>
-        </ul>
-    </div>
+<div class="col-md-12">
+    <!-- <div class="alert alert-info" ng-if="logStatistics.showHelpContent" role="alert">{{'Log statistics are statistics about user logins or server usage in a certain period in the past.'|T}}</div> -->
+    <span ng-repeat="item in logStatistics.selectDateList"
+          ng-class="{'time-item-selected':logStatistics.currentRange==item.value}" class="time-item ng-scope ng-binding"
+          ng-click="logStatistics.changeTimeGap(item.value)">{{item.verbose_name}}</span>
+    <input type="text" class="usertime-item" id="start" data-date-format="yyyy-mm-dd hh:ii:ss"
+           ng-change="logStatistics.applyTimeRange()" ng-model="logStatistics.startTime" readonly="readonly">
+    <span>&minus;</span>
+    <input type="text" class="usertime-item" id="end" data-date-format="yyyy-mm-dd hh:ii:ss"
+           ng-change="logStatistics.applyTimeRange()" ng-model="logStatistics.endTime" readonly="readonly">
+</div>
+<div class="col-md-12">
+    <ul class="nav nav-pills">
+        <li ng-class="{ active: url_contain('/auditing/log_analysis/sslvpn_service/statistics/user') }">
+            <a ui-sref="index.auditing.log_analysis.sslvpn_service.statistics.user"><span
+                    class="tab-header">{{ 'User Logs Statistics' | T }}</span></a>
+        </li>
+        <li ng-class="{ active: url_contain('/auditing/log_analysis/sslvpn_service/statistics/server') }">
+            <a ui-sref="index.auditing.log_analysis.sslvpn_service.statistics.server"><span
+                    class="tab-header">{{ 'Server Usage Statistics' | T
+                }}</span></a>
+        </li>
+    </ul>
 </div>
 <div class="">
     <div class="" ng-show="url_contain('/auditing/log_analysis/sslvpn_service/statistics/user')" ui-view="user"></div>
-    <div class="" ng-show="url_contain('/auditing/log_analysis/sslvpn_service/statistics/server')" ui-view="server"></div>
+    <div class="" ng-show="url_contain('/auditing/log_analysis/sslvpn_service/statistics/server')"
+         ui-view="server"></div>
 </div>
 
 <style>
@@ -27,7 +33,7 @@
         cursor: pointer;
         background: #D9DEE4;
         color: #666666;
-        padding: 0px 10px;
+        padding: 0 10px;
         margin-right: 7px;
         display: inline-block;
         vertical-align: -2px;
@@ -44,7 +50,7 @@
     }
 
     .usertime-item {
-        border: 0px solid #ccc;
+        border: 0 solid #ccc;
         border-top-left-radius: 3px;
         border-bottom-left-radius: 3px;
         padding: 0 5px;
Index: /branches/amp_3_7/extensions/auditing/webui/log_analysis/sslvpn_service/tabs/statistics/user.html
===================================================================
--- /branches/amp_3_7/extensions/auditing/webui/log_analysis/sslvpn_service/tabs/statistics/user.html	(revision 2477)
+++ /branches/amp_3_7/extensions/auditing/webui/log_analysis/sslvpn_service/tabs/statistics/user.html	(working copy)
@@ -1,222 +1,249 @@
-<div class="row">
-    <div class="col-md-12">
-        <div class="alert alert-info" ng-if="userLogsStatistics.showHelpContent" role="alert">{{'User log statistics are statistics about user logins in a certain period in the past.'|T}}</div>
-        <div class="widget">
-            <!-- <div class="widget-header">User Logs Statistics</div> -->
-            <div class="table-toolbar">
-                <form class="form-inline" role="form">
-                    <!-- <div class="form-group">
-                        <label class="control-label" for="start">{{'Time' | T}}</label>
-                        <input type="text" placeholder="{{'Start Time' | T}}" class="form-control" id="start" data-date-format="yyyy-mm-dd hh:ii:ss" style="width: 180px;" ng-model="userLogsStatistics.startTime" readonly="readonly">
-                    </div>
-                    <span>&minus;</span>
-                    <div class="form-group">
-                        <label class="sr-only" for="end">{{'End'}}</label>
-                        <input type="text" placeholder="{{'End Time' | T}}" class="form-control" id="end" data-date-format="yyyy-mm-dd hh:ii:ss" style="width: 180px;" ng-model="userLogsStatistics.endTime" readonly="readonly">
-                    </div> -->
-
-                    <div class="form-group status">
-                        <label for="status" class="control-label">{{'Type' | T}}</label>
-                        <select name="type" class="input-sm form-control" ng-model="userLogsStatistics.type">
-                            <option ng-repeat="type in userLogsStatistics.types" value="{{type.value}}">{{type.name | T}}</option>
-                        </select>
-                    </div>
+<div class="col-md-12">
+    <div class="alert alert-info" ng-if="userLogsStatistics.showHelpContent" role="alert">
+        {{'User log statistics are statistics about user logins in a certain period in the past.' | T}}
+    </div>
+    <div class="widget">
+        <div class="table-toolbar">
+            <form class="form-inline" role="form">
+                <div class="form-group status">
+                    <label for="status" class="control-label">{{'Type' | T}}</label>
+                    <select name="type" class="input-sm form-control" ng-model="userLogsStatistics.type">
+                        <option ng-repeat="type in userLogsStatistics.types" value="{{type.value}}">{{type.name | T}}
+                        </option>
+                    </select>
+                </div>
 
-                    <div class="form-group top">
-                        <label for="status" class="control-label">{{'Top' | T}}</label>
-                        <select name="type" class="input-sm form-control" ng-model="userLogsStatistics.top">
-                            <option ng-repeat="top in userLogsStatistics.tops" value="{{ top.value }}">{{top.name | T}}</option>
-                        </select>
-                    </div>
+                <div class="form-group top">
+                    <label for="status" class="control-label">{{'Top' | T}}</label>
+                    <select name="type" class="input-sm form-control" ng-model="userLogsStatistics.top">
+                        <option ng-repeat="top in userLogsStatistics.tops" value="{{ top.value }}">{{top.name | T}}
+                        </option>
+                    </select>
+                </div>
 
-                    <div class="btn btn-sm btn-default" ng-click="userLogsStatistics.search()" ng-disabled="userLogsStatistics.isSearching"><i class="fa fa-search"><span style="margin-left: 3px;">{{'Search'|T}}</span></i></div>
-                    <button class="btn btn-link" title="{{'Help'|T}}" ng-click="userLogsStatistics.showHelpContent = !userLogsStatistics.showHelpContent"><i class="fa fa-question-circle"></i></button>
-                    <div class="btn-group pull-right">
-                        <div class="btn btn-sm ng-binding btn-primary" ng-click="userLogsStatistics.exportData()"><i class="fa fa-external-link"><span style="margin-left: 3px;">{{'Export'|T}}</span></i></div>
+                <div class="btn btn-sm btn-default" ng-click="userLogsStatistics.search()"
+                     ng-disabled="userLogsStatistics.isSearching"><i class="fa fa-search"><span
+                        style="margin-left: 3px;">{{'Search' | T}}</span></i></div>
+                <button class="btn btn-link" title="{{'Help'|T}}"
+                        ng-click="userLogsStatistics.showHelpContent = !userLogsStatistics.showHelpContent"><i
+                        class="fa fa-question-circle"></i></button>
+                <div class="btn-group pull-right">
+                    <div class="btn btn-sm ng-binding btn-primary" ng-click="userLogsStatistics.exportData()"><i
+                            class="fa fa-external-link"><span style="margin-left: 3px;">{{'Export' | T}}</span></i>
                     </div>
-                    <!-- <div class="pull-right" style="padding:0 50px">
-                        <a class="icon-box" title="{{'Export' | T}}" ng-click="userLogsStatistics.exportData()">
-                            <i class="array-export2" style="font-size:18px;line-height:30px;">
-                                {{'Export' | T}}
-                            </i>
-                        </a>
-                    </div> -->
-                </form>
-            </div>
-            <div class="table-wrapper" st-table="displayedCollection" st-safe-src="userLogsStatistics.rankingDataList">
-                <div class="table-content">
-                    <table class="table table-striped table-hover" ng-if="userLogsStatistics.searchType == 'traffic_l3' || userLogsStatistics.searchType == 'traffic_l7'">
-                        <thead>
-                            <tr>
-                                <th class="d-num">No.</th>
-                                <th class="d-user">{{ 'User' | T }}</th>
-                                <th class="d-host">{{ 'Device Name' | T }}</th>
-                                <th class="d-host">{{ 'Device Group' | T }}</th>
-                                <th class="d-vsite">{{ 'Vsite Name' | T }}</th>
-                                <th class="d-sent" st-sort="traffic_send">{{ 'Sent' | T }}</th>
-                                <th class="d-revd" st-sort="traffic_revd">{{ 'Received' | T }}</th>
-                            </tr>
-                            <tr>
-                                <th></th>
-                                <th>
-                                    <input st-search="user_name" placeholder="{{'Search by User'|T}}" class="input-sm form-control" type="text" />
-                                </th>
-                                <th>
-                                    <select class="input-sm form-control" st-input-event="change" st-search="device.name">
-                                        <option value="">{{'All'|T}}</option>
-                                        <option ng-repeat="row in userLogsStatistics.rankingDataList | unique:'device.name'" value="{{row.device.name}}">{{row.device.name}}</option>
-                                    </select>
-                                </th>
-                                <th>
-                                    <select class="input-sm form-control" st-input-event="change" st-search="device.device_group">
-                                        <option value="">{{'All'|T}}</option>
-                                        <option ng-repeat="row in userLogsStatistics.rankingDataList | unique:'device.device_group'" value="{{row.device.device_group}}">{{row.device.device_group}}</option>
-                                    </select>
-                                </th>
-                                <th>
-                                    <input st-search="vsite_name" placeholder="{{'Search by Vsite Name'|T}}" class="input-sm form-control" type="text" />
-                                </th>
-                                <th></th>
-                                <th></th>
-                            </tr>
-                        </thead>
-                        <tbody ng-show="!userLogsStatistics.isLoading">
-                            <tr ng-repeat="row in displayedCollection">
-                                <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
-                                <td><a class="name" ui-sref="index.auditing.log_analysis.sslvpn_service.user.detail({username:row.user_name, id : 0, site: row.vsite_name, host: row.host_name})">{{ row.user_name }}</a></td>
-                                <td>{{ row.device.name }}</td>
-                                <td>{{ row.device.device_group }}</td>
-                                <td>{{ row.vsite_name }}</td>
-                                <td>{{row.send | trafficFormat}}</td>
-                                <td>{{row.revd | trafficFormat}}</td>
-                            </tr>
-                        </tbody>
-                        <tbody ng-show="userLogsStatistics.isLoading">
-                            <tr>
-                                <td colspan="6" class="text-center">{{'Loading...' | T }}</td>
-                            </tr>
-                        </tbody>
-                        <tfoot>
-                            <tr>
-                                <td colspan="6" class="text-center" st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)"></td>
-                            </tr>
-                        </tfoot>
-                    </table>
+                </div>
+            </form>
+        </div>
+        <div class="table-wrapper" st-table="displayedCollection" st-safe-src="userLogsStatistics.rankingDataList">
+            <div class="table-content">
+                <table class="table table-striped table-hover" style="width: 100%;"
+                       ng-if="userLogsStatistics.searchType == 'traffic_l3' || userLogsStatistics.searchType == 'traffic_l7'">
+                    <thead>
+                    <tr>
+                        <th class="d-num">No.</th>
+                        <th class="d-user">{{ 'User' | T }}</th>
+                        <th class="d-host">{{ 'Device Name' | T }}</th>
+                        <th class="d-host">{{ 'Device Group' | T }}</th>
+                        <th class="d-vsite">{{ 'Vsite Name' | T }}</th>
+                        <th class="d-sent" st-sort="traffic_send">{{ 'Sent' | T }}</th>
+                        <th class="d-revd" st-sort="traffic_revd">{{ 'Received' | T }}</th>
+                    </tr>
+                    <tr>
+                        <th></th>
+                        <th>
+                            <input st-search="user_name" placeholder="{{'Search by User'|T}}"
+                                   class="input-sm form-control" type="text"/>
+                        </th>
+                        <th>
+                            <select class="input-sm form-control" st-input-event="change" st-search="device.name">
+                                <option value="">{{'All' | T}}</option>
+                                <option ng-repeat="row in userLogsStatistics.rankingDataList | unique:'device.name'"
+                                        value="{{row.device.name}}">{{row.device.name}}
+                                </option>
+                            </select>
+                        </th>
+                        <th>
+                            <select class="input-sm form-control" st-input-event="change"
+                                    st-search="device.device_group">
+                                <option value="">{{'All' | T}}</option>
+                                <option ng-repeat="row in userLogsStatistics.rankingDataList | unique:'device.device_group'"
+                                        value="{{row.device.device_group}}">{{row.device.device_group}}
+                                </option>
+                            </select>
+                        </th>
+                        <th>
+                            <input st-search="vsite_name" placeholder="{{'Search by Vsite Name'|T}}"
+                                   class="input-sm form-control" type="text"/>
+                        </th>
+                        <th></th>
+                        <th></th>
+                    </tr>
+                    </thead>
+                    <tbody ng-show="!userLogsStatistics.isLoading">
+                    <tr ng-repeat="row in displayedCollection">
+                        <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
+                        <td><a class="name"
+                               ui-sref="index.auditing.log_analysis.sslvpn_service.user.detail({username:row.user_name, id : 0, site: row.vsite_name, host: row.host_name})">{{ row.user_name
+                            }}</a></td>
+                        <td>{{ row.device.name }}</td>
+                        <td>{{ row.device.device_group }}</td>
+                        <td>{{ row.vsite_name }}</td>
+                        <td>{{row.send | trafficFormat}}</td>
+                        <td>{{row.revd | trafficFormat}}</td>
+                    </tr>
+                    </tbody>
+                    <tbody ng-show="userLogsStatistics.isLoading">
+                    <tr>
+                        <td colspan="6" class="text-center">{{'Loading...' | T }}</td>
+                    </tr>
+                    </tbody>
+                    <tfoot>
+                    <tr>
+                        <td colspan="6" class="text-center" st-pagination="" st-items-by-page="pageSize"
+                            st-displayed-pages="5" st-page-change="onPageChange(newPage)"></td>
+                    </tr>
+                    </tfoot>
+                </table>
 
-                    <table class="table table-striped table-hover" ng-if="userLogsStatistics.searchType == 'using_time' || userLogsStatistics.searchType == 'deny_access'">
-                        <thead>
-                            <tr>
-                                <th class="d-num">No.</th>
-                                <th class="d-user">{{ 'User' | T }}</th>
-                                <th class="d-host">{{ 'Device Name' | T }}</th>
-                                <th class="d-host">{{ 'Device Group' | T }}</th>
-                                <th class="d-vsite">{{ 'Vsite Name' | T }}</th>
-                                <th class="d-times" st-sort="times">{{ 'Times' | T }}</th>
-                            </tr>
-                            <tr>
-                                <th></th>
-                                <th>
-                                    <input st-search="user_name" placeholder="{{'Search by User'|T}}" class="input-sm form-control" type="text" />
-                                </th>
-                                <th>
-                                    <select class="input-sm form-control" st-input-event="change" st-search="device.name">
-                                        <option value="">{{'All'|T}}</option>
-                                        <option ng-repeat="row in userLogsStatistics.rankingDataList | unique:'device.name'" value="{{row.device.name}}">{{row.device.name}}</option>
-                                    </select>
-                                </th>
-                                <th>
-                                    <select class="input-sm form-control" st-input-event="change" st-search="device.device_group">
-                                        <option value="">{{'All'|T}}</option>
-                                        <option ng-repeat="row in userLogsStatistics.rankingDataList | unique:'device.device_group'" value="{{row.device.device_group}}">{{row.device.device_group}}</option>
-                                    </select>
-                                </th>
-                                <th>
-                                    <input st-search="vsite_name" placeholder="{{'Search by Vsite Name'|T}}" class="input-sm form-control" type="text" />
-                                </th>
-                                <th></th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr ng-repeat="row in displayedCollection">
-                                <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
-                                <td><a class="name" ui-sref="index.auditing.log_analysis.sslvpn_service.user.detail({username:row.user_name, id : 0, site: row.vsite_name, host: row.host_name})">{{ row.user_name }}</a></td>
-                                <td>{{ row.device.name }}</td>
-                                <td>{{ row.device.device_group }}</td>
-                                <td>{{ row.vsite_name }}</td>
-                                <td>{{row.times}}</td>
-                            </tr>
-                        </tbody>
-                        <tbody ng-show="userLogsStatistics.isLoading">
-                            <tr>
-                                <td colspan="6" class="text-center">{{'Loading...' | T }}</td>
-                            </tr>
-                        </tbody>
-                        <tfoot>
-                            <tr>
-                                <td colspan="6" class="text-center" st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)"></td>
-                            </tr>
-                        </tfoot>
-                    </table>
+                <table class="table table-striped table-hover" style="width: 100%;"
+                       ng-if="userLogsStatistics.searchType == 'using_time' || userLogsStatistics.searchType == 'deny_access'">
+                    <thead>
+                    <tr>
+                        <th class="d-num">No.</th>
+                        <th class="d-user">{{ 'User' | T }}</th>
+                        <th class="d-host">{{ 'Device Name' | T }}</th>
+                        <th class="d-host">{{ 'Device Group' | T }}</th>
+                        <th class="d-vsite">{{ 'Vsite Name' | T }}</th>
+                        <th class="d-times" st-sort="times">{{ 'Times' | T }}</th>
+                    </tr>
+                    <tr>
+                        <th></th>
+                        <th>
+                            <input st-search="user_name" placeholder="{{'Search by User'|T}}"
+                                   class="input-sm form-control" type="text"/>
+                        </th>
+                        <th>
+                            <select class="input-sm form-control" st-input-event="change" st-search="device.name">
+                                <option value="">{{'All' | T}}</option>
+                                <option ng-repeat="row in userLogsStatistics.rankingDataList | unique:'device.name'"
+                                        value="{{row.device.name}}">{{row.device.name}}
+                                </option>
+                            </select>
+                        </th>
+                        <th>
+                            <select class="input-sm form-control" st-input-event="change"
+                                    st-search="device.device_group">
+                                <option value="">{{'All' | T}}</option>
+                                <option ng-repeat="row in userLogsStatistics.rankingDataList | unique:'device.device_group'"
+                                        value="{{row.device.device_group}}">{{row.device.device_group}}
+                                </option>
+                            </select>
+                        </th>
+                        <th>
+                            <input st-search="vsite_name" placeholder="{{'Search by Vsite Name'|T}}"
+                                   class="input-sm form-control" type="text"/>
+                        </th>
+                        <th></th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr ng-repeat="row in displayedCollection">
+                        <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
+                        <td><a class="name"
+                               ui-sref="index.auditing.log_analysis.sslvpn_service.user.detail({username:row.user_name, id : 0, site: row.vsite_name, host: row.host_name})">{{ row.user_name
+                            }}</a></td>
+                        <td>{{ row.device.name }}</td>
+                        <td>{{ row.device.device_group }}</td>
+                        <td>{{ row.vsite_name }}</td>
+                        <td>{{row.times}}</td>
+                    </tr>
+                    </tbody>
+                    <tbody ng-show="userLogsStatistics.isLoading">
+                    <tr>
+                        <td colspan="6" class="text-center">{{'Loading...' | T }}</td>
+                    </tr>
+                    </tbody>
+                    <tfoot>
+                    <tr>
+                        <td colspan="6" class="text-center" st-pagination="" st-items-by-page="pageSize"
+                            st-displayed-pages="5" st-page-change="onPageChange(newPage)"></td>
+                    </tr>
+                    </tfoot>
+                </table>
 
-                    <table class="table table-striped table-hover" ng-if="userLogsStatistics.searchType == 'duration'">
-                        <thead>
-                            <tr>
-                                <th class="d-num">No.</th>
-                                <th class="d-user">{{ 'User' | T }}</th>
-                                <th class="d-host">{{ 'Device Name' | T }}</th>
-                                <th class="d-host">{{ 'Device Group' | T }}</th>
-                                <th class="d-vsite">{{ 'Vsite Name' | T }}</th>
-                                <th class="d-duration" st-sort="duration">{{ 'On-line Time' | T }}</th>
-                            </tr>
-                            <tr>
-                                <th></th>
-                                <th>
-                                    <input st-search="user_name" placeholder="{{'Search by User'|T}}" class="input-sm form-control" type="text" />
-                                </th>
-                                <th>
-                                    <select class="input-sm form-control" st-input-event="change" st-search="device.name">
-                                        <option value="">{{'All'|T}}</option>
-                                        <option ng-repeat="row in userLogsStatistics.rankingDataList | unique:'device.name'" value="{{row.device.name}}">{{row.device.name}}</option>
-                                    </select>
-                                </th>
-                                <th>
-                                    <select class="input-sm form-control" st-input-event="change" st-search="device.device_group">
-                                        <option value="">{{'All'|T}}</option>
-                                        <option ng-repeat="row in userLogsStatistics.rankingDataList | unique:'device.device_group'" value="{{row.device.device_group}}">{{row.device.device_group}}</option>
-                                    </select>
-                                </th>
-                                <th>
-                                    <input st-search="vsite_name" placeholder="{{'Search by Vsite Name'|T}}" class="input-sm form-control" type="text" />
-                                </th>
-                                <th></th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr ng-repeat="row in displayedCollection">
-                                <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
-                                <td><a class="name" ui-sref="index.auditing.log_analysis.sslvpn_service.user.detail({username:row.user_name, id : 0, site: row.vsite_name, host: row.host_name})">{{ row.user_name }}</a></td>
-                                <td>{{ row.device.name }}</td>
-                                <td>{{ row.device.device_group }}</td>
-                                <td>{{ row.vsite_name }}</td>
-                                <td>{{ row.times | timeFormat }}</td>
-                            </tr>
-                        </tbody>
-                        <tbody ng-show="userLogsStatistics.isLoading">
-                            <tr>
-                                <td colspan="6" class="text-center">{{'Loading...' | T }}</td>
-                            </tr>
-                        </tbody>
-                        <tfoot>
-                            <tr>
-                                <td colspan="6" class="text-center" st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)"></td>
-                            </tr>
-                        </tfoot>
-                    </table>
-                </div>
-            </div>
-            <div class="alert alert-warning" role="alert" ng-if="!userLogsStatistics.isLoading&&userLogsStatistics.rankingDataList.length==0">
-                {{ "No data? Please check log configurations on target device and incorrect log configurations will affect auditing function. Please refer to user guide and make sure following configurations include 'log host &lt;ip_address&gt; 514 UDP [id] [log level]', 'log option logid on', 'log option levelinfo off', 'log option showlogidkey off', 'log option uniqueid off', 'log http welf' and 'log on' have all been correctly configured. If have been and still no data, please confirm whether there are actual logs generated and sent on target device." | T}}
+                <table class="table table-striped table-hover" ng-if="userLogsStatistics.searchType == 'duration'"
+                       style="width: 100%;">
+                    <thead>
+                    <tr>
+                        <th class="d-num">No.</th>
+                        <th class="d-user">{{ 'User' | T }}</th>
+                        <th class="d-host">{{ 'Device Name' | T }}</th>
+                        <th class="d-host">{{ 'Device Group' | T }}</th>
+                        <th class="d-vsite">{{ 'Vsite Name' | T }}</th>
+                        <th class="d-duration" st-sort="duration">{{ 'On-line Time' | T }}</th>
+                    </tr>
+                    <tr>
+                        <th></th>
+                        <th>
+                            <input st-search="user_name" placeholder="{{'Search by User'|T}}"
+                                   class="input-sm form-control" type="text"/>
+                        </th>
+                        <th>
+                            <select class="input-sm form-control" st-input-event="change" st-search="device.name">
+                                <option value="">{{'All' | T}}</option>
+                                <option ng-repeat="row in userLogsStatistics.rankingDataList | unique:'device.name'"
+                                        value="{{row.device.name}}">{{row.device.name}}
+                                </option>
+                            </select>
+                        </th>
+                        <th>
+                            <select class="input-sm form-control" st-input-event="change"
+                                    st-search="device.device_group">
+                                <option value="">{{'All' | T}}</option>
+                                <option ng-repeat="row in userLogsStatistics.rankingDataList | unique:'device.device_group'"
+                                        value="{{row.device.device_group}}">{{row.device.device_group}}
+                                </option>
+                            </select>
+                        </th>
+                        <th>
+                            <input st-search="vsite_name" placeholder="{{'Search by Vsite Name'|T}}"
+                                   class="input-sm form-control" type="text"/>
+                        </th>
+                        <th></th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr ng-repeat="row in displayedCollection">
+                        <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
+                        <td><a class="name"
+                               ui-sref="index.auditing.log_analysis.sslvpn_service.user.detail({username:row.user_name, id : 0, site: row.vsite_name, host: row.host_name})">{{ row.user_name
+                            }}</a></td>
+                        <td>{{ row.device.name }}</td>
+                        <td>{{ row.device.device_group }}</td>
+                        <td>{{ row.vsite_name }}</td>
+                        <td>{{ row.times | timeFormat }}</td>
+                    </tr>
+                    </tbody>
+                    <tr ng-if="displayedCollection.length === 0">
+                        <td colspan="6" class="text-center">No matching records found.</td>
+                    </tr>
+                    <tbody ng-show="userLogsStatistics.isLoading">
+                    <tr>
+                        <td colspan="6" class="text-center">{{'Loading...' | T }}</td>
+                    </tr>
+                    </tbody>
+                    <tfoot>
+                    <tr>
+                        <td colspan="6" class="text-center" st-pagination="" st-items-by-page="pageSize"
+                            st-displayed-pages="5" st-page-change="onPageChange(newPage)"></td>
+                    </tr>
+                    </tfoot>
+                </table>
             </div>
         </div>
+        <div class="alert alert-warning" role="alert"
+             ng-if="!userLogsStatistics.isLoading&&userLogsStatistics.rankingDataList.length==0">
+            {{ "No data? Please check log configurations on target device and incorrect log configurations will affect auditing function. Please refer to user guide and make sure following configurations include 'log host &lt;ip_address&gt; 514 UDP [id] [log level]', 'log option logid on', 'log option levelinfo off', 'log option showlogidkey off', 'log option uniqueid off', 'log http welf' and 'log on' have all been correctly configured. If have been and still no data, please confirm whether there are actual logs generated and sent on target device." | T}}
+        </div>
     </div>
 </div>
\ No newline at end of file
Index: /branches/amp_3_7/extensions/auditing/webui/log_analysis/sslvpn_service/tabs/user/modals/user.clear.html
===================================================================
--- /branches/amp_3_7/extensions/auditing/webui/log_analysis/sslvpn_service/tabs/user/modals/user.clear.html	(revision 2477)
+++ /branches/amp_3_7/extensions/auditing/webui/log_analysis/sslvpn_service/tabs/user/modals/user.clear.html	(working copy)
@@ -1,6 +1,6 @@
 <div class="modal-header">
     <button type="button" class="close" ng-click="userClear.close()">&times;</button>
-    <h4 class="modal-title">{{'Clear Selected User Data'|T}}</h4>
+    <h6 class="modal-title">{{'Clear Selected User Data'|T}}</h6>
 </div>
 <div class="modal-body">
     <div class="row">
Index: /branches/amp_3_7/extensions/auditing/webui/log_analysis/sslvpn_service/tabs/user/userList.html
===================================================================
--- /branches/amp_3_7/extensions/auditing/webui/log_analysis/sslvpn_service/tabs/user/userList.html	(revision 2477)
+++ /branches/amp_3_7/extensions/auditing/webui/log_analysis/sslvpn_service/tabs/user/userList.html	(working copy)
@@ -1,103 +1,124 @@
-<div class="row">
-    <div class="col-md-12">
-        <div class="alert alert-info" ng-if="userList.showHelpContent" role="alert">{{'The User Logs is centered on the users in the device and displays detailed information about each user. It shows the online behavior of each user, such as login/logout time and operation behavior.'|T}}</div>
-        <span ng-repeat="item in userList.selectDateList" ng-class="{'time-item-selected':userList.currentRange==item.value}" class="time-item ng-scope ng-binding" ng-click="userList.changeTimeGap(item.value)">{{item.verbose_name}}</span>
-        <input type="text" class="usertime-item" id="start" data-date-format="yyyy-mm-dd hh:ii:ss" ng-change="userList.applyTimeRange()" ng-model="userList.startTime" readonly="readonly">
-        <span>&minus;</span>
-        <input type="text" class="usertime-item" id="end" data-date-format="yyyy-mm-dd hh:ii:ss" ng-change="userList.applyTimeRange()" ng-model="userList.endTime" readonly="readonly">
+<div class="col-md-12">
+    <div class="alert alert-info" ng-if="userList.showHelpContent" role="alert">
+        {{'The User Logs is centered on the users in the device and displays detailed information about each user. It shows the online behavior of each user, such as login/logout time and operation behavior.' | T}}
     </div>
-    <div class="col-md-12 select-list">
-        <div class="widget">
-            <div class="table-toolbar">
-                <div class="">
-                    <div class="btn-group">
-                        <button class="btn btn-link" title="{{ 'Refresh User List' | T }}" ng-click="userList.refresh()"><i class="fa fa-refresh"></i></button>
-                        <button class="btn btn-link" title="{{'Clear Selected User Data'|T}}" ng-disabled="userList.selected()" ng-click="userList.ClearUser()"><i class="fa fa-trash"></i></button>
-                        <button class="btn btn-link" title="{{'Export'|T}}" ng-click="userList.exportData()"><i class="fa fa-external-link"></i></button>
-                        <button class="btn btn-link" title="{{'Help'|T}}" ng-click="userList.showHelpContent = !userList.showHelpContent"><i class="fa fa-question-circle"></i></button>
-                    </div>
-                </div>
-            </div>
-            <div class="table-container" st-table="displayedCollection" st-safe-src="userList.userInfoList" st-set-filter="myFilter">
-                <div class="table-content">
-                    <table class="table table-striped table-hover">
-                        <thead>
-                            <tr>
-                                <th class="d-num">No.</th>
-                                <th class="d-name" st-sort="user_name">{{ 'User' | T }}</th>
-                                <th class="d-host" st-sort="device.name">{{ 'Device Name' | T }}</th>
-                                <th class="d-host" st-sort="device.group">{{ 'Device Group' | T }}</th>
-                                <th class="d-vsite" st-sort="vsite_name">{{ 'Vsite Name' | T }}</th>
-                                <th class="d-lltime" st-sort="last_login_time">{{ 'Last Login Time' | T }}</th>
-                            </tr>
-                            <tr>
-                                <th></th>
-                                <th>
-                                    <input st-search="user_name" ng-model="userList.select_user_name" placeholder="{{'Search by User'|T}}" class="input-sm form-control" type="text" />
-                                </th>
-                                <th>
-                                    <select class="input-sm form-control" st-input-event="change" ng-model="userList.select_device_name" st-search="device.name">
-                                        <option value="">{{'All'|T}}</option>
-                                        <option ng-repeat="row in userList.userInfoList | unique:'device.name'" value="{{row.device.name}}">{{row.device.name}}</option>
-                                    </select>
-                                </th>
-                                <th>
-                                    <select class="input-sm form-control" st-input-event="change" ng-model="userList.select_device_group" st-search="device.device_group">
-                                        <option value="">{{'All'|T}}</option>
-                                        <option ng-repeat="row in userList.userInfoList | unique:'device.device_group'" value="{{row.device.device_group}}">{{row.device.device_group}}</option>
-                                    </select>
-                                </th>
-                                <th>
-                                    <input st-search="vsite_name" ng-model="userList.select_vsite_name" placeholder="{{'Search by Vsite Name'|T}}" class="input-sm form-control" type="text" />
-                                </th>
-                                <th>
-                                    <!-- <st-date-range predicate="last_login_time" before="userList.last_login_time_before" after="userList.last_login_time_after"></st-date-range> -->
-                                </th>
-                            </tr>
-                        </thead>
-                        <tbody ng-if="!userList.loading">
-                            <tr st-select-row="user" st-select-mode="multiple" ng-repeat="user in displayedCollection">
-                                <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
-                                <td>
-                                    <div ng-if="user.last_login_timestamp==0">
-                                        {{ user.user_name }}
-                                    </div>
-                                    <div ng-if="user.last_login_timestamp!=0">
-                                        <a class="name" ui-sref="index.auditing.log_analysis.sslvpn_service.user.detail({username:user.user_name})" ng-click="userList.detail(user)">{{ user.user_name }}</a>
-                                    </div>
-                                </td>
-                                <td>{{ user.device.name }}</td>
-                                <td>{{ user.device.device_group }}</td>
-                                <td>{{ user.vsite_name }}</td>
-                                <td>{{ user.last_login_time }}</td>
-                            </tr>
-                        </tbody>
-                        <tfoot>
-                            <tr>
-                                <td class="text-center" st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)" colspan="6"></td>
-                            </tr>
-                        </tfoot>
-                    </table>
+    <span ng-repeat="item in userList.selectDateList"
+          ng-class="{'time-item-selected':userList.currentRange==item.value}" class="time-item ng-scope ng-binding"
+          ng-click="userList.changeTimeGap(item.value)">{{item.verbose_name}}</span>
+    <input type="text" class="usertime-item" id="start" data-date-format="yyyy-mm-dd hh:ii:ss"
+           ng-change="userList.applyTimeRange()" ng-model="userList.startTime" readonly="readonly">
+    <span>&minus;</span>
+    <input type="text" class="usertime-item" id="end" data-date-format="yyyy-mm-dd hh:ii:ss"
+           ng-change="userList.applyTimeRange()" ng-model="userList.endTime" readonly="readonly">
+</div>
+<div class="col-md-12 select-list">
+    <div class="widget">
+        <div class="table-toolbar">
+            <div class="">
+                <div class="btn-group">
+                    <button class="btn btn-link" title="{{ 'Refresh User List' | T }}" ng-click="userList.refresh()"><i
+                            class="fa fa-refresh an-tab-icon"></i></button>
+                    <button class="btn btn-link" title="{{'Clear Selected User Data'|T}}"
+                            ng-disabled="userList.selected()" ng-click="userList.ClearUser()"><i
+                            class="fa fa-trash an-tab-icon"></i></button>
+                    <button class="btn btn-link" title="{{'Export'|T}}" ng-click="userList.exportData()"><i
+                            class="fa fa-external-link an-tab-icon"></i></button>
+                    <button class="btn btn-link" title="{{'Help'|T}}"
+                            ng-click="userList.showHelpContent = !userList.showHelpContent"><i
+                            class="fa fa-question-circle an-tab-icon"></i></button>
                 </div>
-                <!-- <div class="table-pagination">
-                    <div class="pagination-detail"></div>
-                    <div class="pagination" st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)"></div>
-                </div> -->
             </div>
-            <div style="text-align: center" ng-if="userList.loading"><img src="app/images/loading.gif"></div>
-            <div class="alert alert-warning" role="alert" ng-if="userList.userInfoList.length==0">
-                {{ "No data? Please check log configurations on target device and incorrect log configurations will affect auditing function. Please refer to user guide and make sure following configurations include 'log host &lt;ip_address&gt; 514 UDP [id] [log level]', 'log option logid on', 'log option levelinfo off', 'log option showlogidkey off', 'log option uniqueid off', 'log http welf' and 'log on' have all been correctly configured. If have been and still no data, please confirm whether there are actual logs generated and sent on target device." | T}}
+        </div>
+        <div class="table-container" st-table="displayedCollection" st-safe-src="userList.userInfoList"
+             st-set-filter="myFilter">
+            <div class="table-content" style="width: 100%;">
+                <table class="table table-striped table-hover">
+                    <thead>
+                    <tr>
+                        <th class="d-num">No.</th>
+                        <th class="d-name" st-sort="user_name">{{ 'User' | T }}</th>
+                        <th class="d-host" st-sort="device.name">{{ 'Device Name' | T }}</th>
+                        <th class="d-host" st-sort="device.group">{{ 'Device Group' | T }}</th>
+                        <th class="d-vsite" st-sort="vsite_name">{{ 'Vsite Name' | T }}</th>
+                        <th class="d-lltime" st-sort="last_login_time">{{ 'Last Login Time' | T }}</th>
+                    </tr>
+                    <tr>
+                        <th></th>
+                        <th>
+                            <input st-search="user_name" ng-model="userList.select_user_name"
+                                   placeholder="{{'Search by User'|T}}" class="input-sm form-control" type="text"/>
+                        </th>
+                        <th>
+                            <select class="input-sm form-control" st-input-event="change"
+                                    ng-model="userList.select_device_name" st-search="device.name">
+                                <option value="">{{'All' | T}}</option>
+                                <option ng-repeat="row in userList.userInfoList | unique:'device.name'"
+                                        value="{{row.device.name}}">{{row.device.name}}
+                                </option>
+                            </select>
+                        </th>
+                        <th>
+                            <select class="input-sm form-control" st-input-event="change"
+                                    ng-model="userList.select_device_group" st-search="device.device_group">
+                                <option value="">{{'All' | T}}</option>
+                                <option ng-repeat="row in userList.userInfoList | unique:'device.device_group'"
+                                        value="{{row.device.device_group}}">{{row.device.device_group}}
+                                </option>
+                            </select>
+                        </th>
+                        <th>
+                            <input st-search="vsite_name" ng-model="userList.select_vsite_name"
+                                   placeholder="{{'Search by Vsite Name'|T}}" class="input-sm form-control"
+                                   type="text"/>
+                        </th>
+                        <th></th>
+                    </tr>
+                    </thead>
+                    <tbody ng-if="!userList.loading">
+                    <tr st-select-row="user" st-select-mode="multiple" ng-repeat="user in displayedCollection">
+                        <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
+                        <td>
+                            <div ng-if="user.last_login_timestamp==0">
+                                {{ user.user_name }}
+                            </div>
+                            <div ng-if="user.last_login_timestamp!=0">
+                                <a class="name"
+                                   ui-sref="index.auditing.log_analysis.sslvpn_service.user.detail({username:user.user_name})"
+                                   ng-click="userList.detail(user)">{{ user.user_name }}</a>
+                            </div>
+                        </td>
+                        <td>{{ user.device.name }}</td>
+                        <td>{{ user.device.device_group }}</td>
+                        <td>{{ user.vsite_name }}</td>
+                        <td>{{ user.last_login_time }}</td>
+                    </tr>
+                    <tr ng-if="displayedCollection.length === 0">
+                        <td colspan="6" class="text-center">No matching records found.</td>
+                    </tr>
+                    </tbody>
+                    <tfoot>
+                    <tr>
+                        <td class="text-center" st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5"
+                            st-page-change="onPageChange(newPage)" colspan="6"></td>
+                    </tr>
+                    </tfoot>
+                </table>
             </div>
         </div>
+        <div style="text-align: center" ng-if="userList.loading"><img src="app/images/loading.gif"></div>
+        <div class="alert alert-warning" role="alert" ng-if="userList.userInfoList.length==0">
+            {{ "No data? Please check log configurations on target device and incorrect log configurations will affect auditing function. Please refer to user guide and make sure following configurations include 'log host &lt;ip_address&gt; 514 UDP [id] [log level]', 'log option logid on', 'log option levelinfo off', 'log option showlogidkey off', 'log option uniqueid off', 'log http welf' and 'log on' have all been correctly configured. If have been and still no data, please confirm whether there are actual logs generated and sent on target device." | T}}
+        </div>
     </div>
 </div>
 
+
 <style>
     .time-item {
         cursor: pointer;
         background: #D9DEE4;
         color: #666666;
-        padding: 0px 10px;
+        padding: 0 10px;
         margin-right: 7px;
         display: inline-block;
         vertical-align: -2px;
@@ -114,7 +135,7 @@
     }
 
     .usertime-item {
-        border: 0px solid #ccc;
+        border: 0 solid #ccc;
         border-top-left-radius: 3px;
         border-bottom-left-radius: 3px;
         padding: 0 5px;
Index: /branches/amp_3_7/extensions/monitoring/webui/alerting/alert_log/alert_log-detail.html
===================================================================
--- /branches/amp_3_7/extensions/monitoring/webui/alerting/alert_log/alert_log-detail.html	(revision 2477)
+++ /branches/amp_3_7/extensions/monitoring/webui/alerting/alert_log/alert_log-detail.html	(working copy)
@@ -1,7 +1,7 @@
 <div>
     <div class="modal-header">
         <button type="button" class="close" ng-click="alertLogDetail.modalClose()">&times;</button>
-        <h4 class="modal-title">{{'Alert Log Detail' | T}}</h4>
+        <h6 class="modal-title">{{'Alert Log Detail' | T}}</h6>
     </div>
     <div class="modal-body">
         <div class="col-md-12">
@@ -9,59 +9,67 @@
                 <div class="table-wrapper" st-table="displayedCollection" st-safe-src="alertLogDetail.evalMatches">
                     <table class="table table-striped table-hover">
                         <thead>
-                            <tr>
-                                <th class="d-time">{{ 'Metric Name' | T }}</th>
-                                <th class="d-name">{{ 'Device Name' | T }}</th>
-                                <th class="d-group">{{ 'Device Group' | T }}</th>
-                                <th class="d-ip">{{ 'Device IP' | T }}</th>
-                                <th ng-if="alertLogDetail.product!='device'" class="d-name">{{ 'Service Name' | T }}</th>
-                                <!-- <th ng-if="alertLogDetail.product!='device'" class="d-name">{{ 'Service Address' | T }}</th> -->
-                                <th ng-if="alertLogDetail.type=='event'" class="d-name">{{ 'Event Name' | T }}</th>
-                                <th class="d-num">{{ 'Value' | T }}</th>
-                            </tr>
-                            <tr>
-                                <th></th>
-                                <th>
-                                    <select class="input-sm form-control" st-input-event="change" st-search="device.name">
-                                        <option value="">{{'All'|T}}</option>
-                                        <option ng-repeat="row in alertLogDetail.evalMatches | unique:'device.name'" value="{{row.device.name}}">{{row.device.name}}</option>
-                                    </select>
-                                </th>
-                                <th>
-                                    <select class="input-sm form-control" st-input-event="change" st-search="device.device_group">
-                                        <option value="">{{'All'|T}}</option>
-                                        <option ng-repeat="row in alertLogDetail.evalMatches | unique:'device.device_group'" value="{{row.device.device_group}}">{{row.device.device_group}}</option>
-                                    </select>
-                                </th>
-                                <th>
-                                    <input st-search="device.ip" placeholder="{{'Search by IP Address'|T}}" class="input-sm form-control" type="text" />
-                                </th>
-                                <th ng-if="alertLogDetail.product!='device'">
-                                    <input st-search="service_name" placeholder="{{'Search by Service Name'|T}}" class="input-sm form-control" type="text" />
-                                </th>
-                                <!-- <th ng-if="alertLogDetail.product!='device'">
-                                    <input st-search="service_address" placeholder="{{'Search by Service Address'|T}}" class="input-sm form-control" type="text" />
-                                </th> -->
-                                <th></th>
-                                <th></th>
-                            </tr>
+                        <tr>
+                            <th class="d-time">{{ 'Metric Name' | T }}</th>
+                            <th class="d-name">{{ 'Device Name' | T }}</th>
+                            <th class="d-group">{{ 'Device Group' | T }}</th>
+                            <th class="d-ip">{{ 'Device IP' | T }}</th>
+                            <th ng-if="alertLogDetail.product!='device'" class="d-name">{{ 'Service Name' | T }}</th>
+                            <!-- <th ng-if="alertLogDetail.product!='device'" class="d-name">{{ 'Service Address' | T }}</th> -->
+                            <th ng-if="alertLogDetail.type=='event'" class="d-name">{{ 'Event Name' | T }}</th>
+                            <th class="d-num">{{ 'Value' | T }}</th>
+                        </tr>
+                        <tr>
+                            <th></th>
+                            <th>
+                                <select class="input-sm form-control" st-input-event="change" st-search="device.name">
+                                    <option value="">{{'All' | T}}</option>
+                                    <option ng-repeat="row in alertLogDetail.evalMatches | unique:'device.name'"
+                                            value="{{row.device.name}}">{{row.device.name}}
+                                    </option>
+                                </select>
+                            </th>
+                            <th>
+                                <select class="input-sm form-control" st-input-event="change"
+                                        st-search="device.device_group">
+                                    <option value="">{{'All' | T}}</option>
+                                    <option ng-repeat="row in alertLogDetail.evalMatches | unique:'device.device_group'"
+                                            value="{{row.device.device_group}}">{{row.device.device_group}}
+                                    </option>
+                                </select>
+                            </th>
+                            <th>
+                                <input st-search="device.ip" placeholder="{{'Search by IP Address'|T}}"
+                                       class="input-sm form-control" type="text"/>
+                            </th>
+                            <th ng-if="alertLogDetail.product!='device'">
+                                <input st-search="service_name" placeholder="{{'Search by Service Name'|T}}"
+                                       class="input-sm form-control" type="text"/>
+                            </th>
+                            <!-- <th ng-if="alertLogDetail.product!='device'">
+                                <input st-search="service_address" placeholder="{{'Search by Service Address'|T}}" class="input-sm form-control" type="text" />
+                            </th> -->
+                            <th></th>
+                            <th></th>
+                        </tr>
                         </thead>
                         <tbody ng-if="!alertLogDetail.loading">
-                            <tr ng-repeat="item in displayedCollection">
-                                <td>{{ item.metric | T}}</td>
-                                <td>{{ item.device.name}}</td>
-                                <td>{{ item.device.device_group }}</td>
-                                <td>{{ item.device.ip }}</td>
-                                <td ng-if="alertLogDetail.product!='device'">{{ item.service_name }}</td>
-                                <!-- <td ng-if="alertLogDetail.product!='device'">{{ item.service_address }}</td> -->
-                                <td ng-if="alertLogDetail.type=='event'">{{ item.event_verbose_name | T }}</td>
-                                <td>{{ item.value.toFixed(2) }}</td>
-                            </tr>
+                        <tr ng-repeat="item in displayedCollection">
+                            <td>{{ item.metric | T}}</td>
+                            <td>{{ item.device.name}}</td>
+                            <td>{{ item.device.device_group }}</td>
+                            <td>{{ item.device.ip }}</td>
+                            <td ng-if="alertLogDetail.product!='device'">{{ item.service_name }}</td>
+                            <!-- <td ng-if="alertLogDetail.product!='device'">{{ item.service_address }}</td> -->
+                            <td ng-if="alertLogDetail.type=='event'">{{ item.event_verbose_name | T }}</td>
+                            <td>{{ item.value.toFixed(2) }}</td>
+                        </tr>
                         </tbody>
                         <tfoot>
-                            <tr>
-                                <td class="text-center" st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)" colspan="6"></td>
-                            </tr>
+                        <tr>
+                            <td class="text-center" st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5"
+                                st-page-change="onPageChange(newPage)" colspan="6"></td>
+                        </tr>
                         </tfoot>
                     </table>
                 </div>
Index: /branches/amp_3_7/extensions/monitoring/webui/alerting/alert_log/alert_log.html
===================================================================
--- /branches/amp_3_7/extensions/monitoring/webui/alerting/alert_log/alert_log.html	(revision 2477)
+++ /branches/amp_3_7/extensions/monitoring/webui/alerting/alert_log/alert_log.html	(working copy)
@@ -1,104 +1,120 @@
 <div class="row">
     <div class="col-md-12">
-        <span ng-repeat="item in monitorAlertLog.selectDateList" ng-class="{'time-item-selected':monitorAlertLog.currentRange==item.value}" class="time-item ng-scope ng-binding" ng-click="monitorAlertLog.changeTimeGap(item.value)">{{item.verbose_name}}</span>
-        <input type="text" class="usertime-item" id="start" data-date-format="yyyy-mm-dd hh:ii:ss" ng-change="monitorAlertLog.applyTimeRange()" ng-model="monitorAlertLog.startTime" readonly="readonly">
+        <span ng-repeat="item in monitorAlertLog.selectDateList"
+              ng-class="{'time-item-selected':monitorAlertLog.currentRange==item.value}"
+              class="time-item ng-scope ng-binding"
+              ng-click="monitorAlertLog.changeTimeGap(item.value)">{{item.verbose_name}}</span>
+        <input type="text" class="usertime-item" id="start" data-date-format="yyyy-mm-dd hh:ii:ss"
+               ng-change="monitorAlertLog.applyTimeRange()" ng-model="monitorAlertLog.startTime" readonly="readonly">
         <span>&minus;</span>
-        <input type="text" class="usertime-item" id="end" data-date-format="yyyy-mm-dd hh:ii:ss" ng-change="monitorAlertLog.applyTimeRange()" ng-model="monitorAlertLog.endTime" readonly="readonly">
+        <input type="text" class="usertime-item" id="end" data-date-format="yyyy-mm-dd hh:ii:ss"
+               ng-change="monitorAlertLog.applyTimeRange()" ng-model="monitorAlertLog.endTime" readonly="readonly">
     </div>
     <div class="col-md-12">
         <div class="widget">
             <div class="widget-header">
-                <span>{{ 'Alert Log' | T }}</span>
+                <span class="tab-header-1">{{ 'Alert Log' | T }}</span>
             </div>
             <div class="table-toolbar">
                 <div class="btn-group">
-                    <button class="btn btn-link" title="{{ 'Refresh Alert Log List' | T }}" ng-click="monitorAlertLog.refresh()"><i class="fa fa-refresh"></i></button>
+                    <button class="btn btn-link" title="{{ 'Refresh Alert Log List' | T }}"
+                            ng-click="monitorAlertLog.refresh()"><i class="fa fa-refresh an-tab-icon"></i></button>
                 </div>
             </div>
             <div class="table-container" st-table="monitorAlertLog.logsList" st-pipe="monitorAlertLog.pipeServer">
-                <div class="table-responsive table-content">
+                <div class="table-responsive table-content" style="width: 100%;">
                     <table class="table table-striped table-hover">
                         <thead>
-                            <tr>
-                                <th class="d-num">{{ 'Alert Type' | T }}</th>
-                                <th class="d-num">{{ 'Product' | T }}</th>
-                                <th class="d-name">{{ 'Occured At' | T }}</th>
-                                <th class="target_type">{{ 'Alert Rule' | T }}</th>
-                                <th class="target_name">{{ 'Status' | T }}</th>
-                                <!-- <th>{{ 'Notification' | T }}</th> -->
-                                <th class="d-service">{{ 'Action' | T }}</th>
-                            </tr>
-                            <tr>
-                                <th>
-                                    <select class="input-sm form-control" st-input-event="change" st-search="type">
-                                        <option value="">{{'All'|T}}</option>
-                                        <option value="threshold">{{'Threshold Value Alert'|T}}</option>
-                                        <option value="event">{{'Event Alert'|T}}</option>
-                                    </select>
-                                </th>
-                                <th>
-                                    <select class="input-sm form-control" st-input-event="change" st-search="product">
-                                        <option value="">{{'All Products'|T}}</option>
-                                        <option value="device">{{'Device'|T}}</option>
-                                        <option value="virtualService">{{'Virtual Service'|T}}</option>
-                                        <option value='realService'>{{'Real Service'|T}}</option>
-                                        <option value='sslvpnService'>{{'SSLVPN Service'|T}}</option>
-                                    </select>
-                                </th>
-                                <th></th>
-                                <th>
-                                    <input st-search="name" placeholder="{{'Search by Rule Name'|T}}" class="input-sm form-control" type="name" />
-                                </th>
-                                <th>
-                                    <select class="input-sm form-control" st-input-event="change" st-search="new_state">
-                                        <option value="">{{'All'|T}}</option>
-                                        <option value="ok">{{'Back to normal'|T}}</option>
-                                        <option value="alerting">{{'Alerting'|T}}</option>
-                                        <option value="no_data">{{'No Data'|T}}</option>
-                                    </select>
-                                </th>
-                                <th></th>
-                                <!-- <th></th> -->
-                                <th></th>
-                            </tr>
+                        <tr>
+                            <th class="d-num">{{ 'Alert Type' | T }}</th>
+                            <th class="d-num">{{ 'Product' | T }}</th>
+                            <th class="d-name">{{ 'Occured At' | T }}</th>
+                            <th class="target_type">{{ 'Alert Rule' | T }}</th>
+                            <th class="target_name">{{ 'Status' | T }}</th>
+                            <!-- <th>{{ 'Notification' | T }}</th> -->
+                            <th class="d-service">{{ 'Action' | T }}</th>
+                        </tr>
+                        <tr>
+                            <th>
+                                <select class="input-sm form-control" st-input-event="change" st-search="type">
+                                    <option value="">{{'All' | T}}</option>
+                                    <option value="threshold">{{'Threshold Value Alert' | T}}</option>
+                                    <option value="event">{{'Event Alert' | T}}</option>
+                                </select>
+                            </th>
+                            <th>
+                                <select class="input-sm form-control" st-input-event="change" st-search="product">
+                                    <option value="">{{'All Products' | T}}</option>
+                                    <option value="device">{{'Device' | T}}</option>
+                                    <option value="virtualService">{{'Virtual Service' | T}}</option>
+                                    <option value='realService'>{{'Real Service' | T}}</option>
+                                    <option value='sslvpnService'>{{'SSLVPN Service' | T}}</option>
+                                </select>
+                            </th>
+                            <th></th>
+                            <th>
+                                <input st-search="name" placeholder="{{'Search by Rule Name'|T}}"
+                                       class="input-sm form-control" type="name"/>
+                            </th>
+                            <th>
+                                <select class="input-sm form-control" st-input-event="change" st-search="new_state">
+                                    <option value="">{{'All' | T}}</option>
+                                    <option value="ok">{{'Back to normal' | T}}</option>
+                                    <option value="alerting">{{'Alerting' | T}}</option>
+                                    <option value="no_data">{{'No Data' | T}}</option>
+                                </select>
+                            </th>
+                            <th></th>
+                            <!-- <th></th> -->
+                            <th></th>
+                        </tr>
                         </thead>
                         <tbody ng-hide="monitorAlertLog.loading">
-                            <tr ng-repeat="item in monitorAlertLog.logsList">
-                                <td>{{ item.alert_type | T}}</td>
-                                <td>{{ item.product_verbose_name | T}}</td>
-                                <td>{{ item.alert_time }}</td>
-                                <td style="cursor: pointer;" ng-click="monitorAlertLog.alertDetail(item)">
-                                    <a class="name">{{ item.name }}</a>
-                                </td>
-                                <td>
-                                    <span ng-if="item.new_state=='ok'" style="color:#5cb85c;font-weight:bold;">{{'Back to normal'|T}}</span>
-                                    <span ng-if="item.new_state=='alerting'" style="color:#e02f44;font-weight:bold;">{{'Alerting'|T}}</span>
-                                    <span ng-if="item.new_state=='no_data'" style="color:#f79520;font-weight:bold;">{{'No Data'|T}}</span>
-                                </td>
-                                <!-- <td></td> -->
-                                <td>
-                                    <a ng-if="item.new_state=='alerting'" ng-click="monitorAlertLog.detail(item)">{{'View Detail' | T}}</a>
-                                </td>
-                            </tr>
-                            <tr ng-if="monitorAlertLog.logsList.length == 0">
-                                <td style="height: 48px;" colspan="6" class="text-center">{{ 'Congratulations, you have no recent alerting records.' | T }}</td>
-                            </tr>
+                        <tr ng-repeat="item in monitorAlertLog.logsList">
+                            <td>{{ item.alert_type | T}}</td>
+                            <td>{{ item.product_verbose_name | T}}</td>
+                            <td>{{ item.alert_time }}</td>
+                            <td style="cursor: pointer;" ng-click="monitorAlertLog.alertDetail(item)">
+                                <a class="name">{{ item.name }}</a>
+                            </td>
+                            <td>
+                                <span ng-if="item.new_state=='ok'"
+                                      style="color:#5cb85c;font-weight:bold;">{{'Back to normal' | T}}</span>
+                                <span ng-if="item.new_state=='alerting'"
+                                      style="color:#e02f44;font-weight:bold;">{{'Alerting' | T}}</span>
+                                <span ng-if="item.new_state=='no_data'"
+                                      style="color:#f79520;font-weight:bold;">{{'No Data' | T}}</span>
+                            </td>
+                            <!-- <td></td> -->
+                            <td>
+                                <a ng-if="item.new_state=='alerting'"
+                                   ng-click="monitorAlertLog.detail(item)">{{'View Detail' | T}}</a>
+                            </td>
+                        </tr>
+                        <tr ng-if="monitorAlertLog.logsList.length == 0">
+                            <td style="height: 48px;" colspan="6" class="text-center">
+                                {{ 'Congratulations, you have no recent alerting records.' | T }}
+                            </td>
+                        </tr>
                         </tbody>
                     </table>
                 </div>
-                <div style="text-align: center" ng-show="monitorAlertLog.loading"><img src="app/images/loading.gif"></div>
+                <div style="text-align: center" ng-show="monitorAlertLog.loading"><img src="app/images/loading.gif">
+                </div>
                 <div class="table-pagination">
                     <div class="pagination-detail"></div>
                     <div class="pull-left">
                         <label style="color:#9c9fa3;">
-                            &nbsp;&nbsp;&nbsp;{{'Every page displays'|T}}&nbsp;
-                            <select style="border-radius:4px; margin-top:-5px;" ng-model="pageSize" ng-options="item for item in [15,25,50,100]">
+                            &nbsp;&nbsp;&nbsp;{{'Every page displays' | T}}&nbsp;
+                            <select style="border-radius:4px; margin-top:-5px;" ng-model="pageSize"
+                                    ng-options="item for item in [15,25,50,100]">
                             </select>
-                            &nbsp;{{'entries'|T}}
+                            &nbsp;{{'entries' | T}}
                         </label>
                     </div>
                     <div class="pagination" st-pagination="" st-items-by-page="pageSize"></div>
                 </div>
+                <br>
             </div>
             <!-- <div style="text-align: center" ng-if="monitorAlertLog.loading"><img src="app/images/loading.gif"></div> -->
         </div>
@@ -110,7 +126,7 @@
         cursor: pointer;
         background: #D9DEE4;
         color: #666666;
-        padding: 0px 10px;
+        padding: 0 10px;
         margin-right: 7px;
         display: inline-block;
         vertical-align: -2px;
@@ -127,7 +143,7 @@
     }
 
     .usertime-item {
-        border: 0px solid #ccc;
+        border: 0 solid #ccc;
         border-top-left-radius: 3px;
         border-bottom-left-radius: 3px;
         padding: 0 5px;
Index: /branches/amp_3_7/extensions/monitoring/webui/alerting/alert_rule/alert_rule.html
===================================================================
--- /branches/amp_3_7/extensions/monitoring/webui/alerting/alert_rule/alert_rule.html	(revision 2477)
+++ /branches/amp_3_7/extensions/monitoring/webui/alerting/alert_rule/alert_rule.html	(working copy)
@@ -2,15 +2,17 @@
     <div class="col-md-12">
         <ul class="nav nav-tabs">
             <li role="presentation" ng-class="{ active: url_contain('/monitoring/alerting/rule/threshold') }">
-                <a ui-sref="index.monitoring.alerting.rule.threshold">{{ 'Threshold Value Alert' | T }}</a>
+                <a ui-sref="index.monitoring.alerting.rule.threshold"><span
+                        class="tab-header">{{ 'Threshold Value Alert' | T }}</span></a>
             </li>
             <li role="presentation" ng-class="{ active: url_contain('/monitoring/alerting/rule/event') }">
-                <a ui-sref="index.monitoring.alerting.rule.event">{{ 'Event Alert' | T }}</a>
+                <a ui-sref="index.monitoring.alerting.rule.event"><span class="tab-header">{{ 'Event Alert' | T
+                    }}</span></a>
             </li>
         </ul>
     </div>
+    <div class="content-wrapper">
+        <div class="" ng-show="url_contain('/monitoring/alerting/rule/threshold')" ui-view="threshold"></div>
+        <div class="" ng-show="url_contain('/monitoring/alerting/rule/event')" ui-view="event"></div>
+    </div>
 </div>
-<div class="">
-    <div class="" ng-show="url_contain('/monitoring/alerting/rule/threshold')" ui-view="threshold"></div>
-    <div class="" ng-show="url_contain('/monitoring/alerting/rule/event')" ui-view="event"></div>
-</div>
\ No newline at end of file
Index: /branches/amp_3_7/extensions/monitoring/webui/alerting/alert_rule/alerting-add.html
===================================================================
--- /branches/amp_3_7/extensions/monitoring/webui/alerting/alert_rule/alerting-add.html	(revision 2477)
+++ /branches/amp_3_7/extensions/monitoring/webui/alerting/alert_rule/alerting-add.html	(working copy)
@@ -1,8 +1,8 @@
 <div class="">
     <div class="modal-header">
         <button type="button" class="close" ng-click="alertingAdd.modalClose()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4 class="modal-title" ng-if="alertingAdd.ruleID == 0">{{'Add Alert Rule'| T}}</h4>
-        <h4 class="modal-title" ng-if="alertingAdd.ruleID != 0">{{'Edit Alert Rule'|T}}</h4>
+        <h6 class="modal-title" ng-if="alertingAdd.ruleID == 0">{{'Add Alert Rule'| T}}</h6>
+        <h6 class="modal-title" ng-if="alertingAdd.ruleID != 0">{{'Edit Alert Rule'|T}}</h6>
     </div>
     <div class="modal-body">
         <form class="form-horizontal" name="alertAddForm" verify-scope="tipStyle: 1">
Index: /branches/amp_3_7/extensions/monitoring/webui/alerting/alert_rule/event_alert/event_alert-detail.html
===================================================================
--- /branches/amp_3_7/extensions/monitoring/webui/alerting/alert_rule/event_alert/event_alert-detail.html	(revision 2477)
+++ /branches/amp_3_7/extensions/monitoring/webui/alerting/alert_rule/event_alert/event_alert-detail.html	(working copy)
@@ -1,8 +1,8 @@
 <div class="">
     <div class="modal-header">
         <button type="button" class="close" ng-click="eventAlertDetail.modalClose()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4 class="modal-title" ng-if="eventAlertDetail.id == 0">{{'Add Event Alert'| T}}</h4>
-        <h4 class="modal-title" ng-if="eventAlertDetail.id != 0">{{'Edit Event Alert'|T}}</h4>
+        <h6 class="modal-title" ng-if="eventAlertDetail.id == 0">{{'Add Event Alert'| T}}</h6>
+        <h6 class="modal-title" ng-if="eventAlertDetail.id != 0">{{'Edit Event Alert'|T}}</h6>
     </div>
     <div class="modal-body">
         <form class="form-horizontal" name="channelform" verify-scope="tipStyle: 1">
Index: /branches/amp_3_7/extensions/monitoring/webui/alerting/alert_rule/event_alert/event_alert.html
===================================================================
--- /branches/amp_3_7/extensions/monitoring/webui/alerting/alert_rule/event_alert/event_alert.html	(revision 2477)
+++ /branches/amp_3_7/extensions/monitoring/webui/alerting/alert_rule/event_alert/event_alert.html	(working copy)
@@ -1,117 +1,127 @@
-<div class="row">
-    <div class="col-md-12">
-        <div class="widget">
-            <div class="table-toolbar">
-                <div class="btn-group">
-                    <button class="btn btn-link" title="{{ 'Refresh Alert Rule List' | T }}" ng-click="eventAlert.refresh()"><i class="fa fa-refresh"></i></button>
-                    <button class="btn btn-link " title="{{'New Alert Rule'|T}}" ng-click="eventAlert.add()"><i class="fa fa-plus-circle"></i></button>
-                </div>
+<div class="col-md-12">
+    <div class="widget">
+        <div class="table-toolbar">
+            <div class="btn-group">
+                <button class="btn btn-link" title="{{ 'Refresh Alert Rule List' | T }}"
+                        ng-click="eventAlert.refresh()"><i class="fa fa-refresh an-tab-icon"></i></button>
+                <button class="btn btn-link " title="{{'New Alert Rule'|T}}" ng-click="eventAlert.add()"><i
+                        class="fa fa-plus-circle an-tab-icon"></i></button>
             </div>
-            <div class="table-container" st-table="eventAlert.alertingList" st-pipe="eventAlert.pipeServer">
-                <div class="table-responsive table-content">
-                    <table class="table table-striped table-hover">
-                        <thead>
-                            <tr>
-                                <th class="d-name">{{ 'Rule Name' | T }}</th>
-                                <th>{{ 'Rule Description' | T }}</th>
-                                <th>{{ 'Resource Range' | T }}</th>
-                                <th>{{ 'Product' | T }}</th>
-                                <th class="d-type">
-                                    <span>{{ 'Status' | T }}</span>
-                                </th>
-                                <th>{{ 'Notification' | T }}</th>
-                                <th class="d-service">{{ 'Action' | T }}</th>
-                            </tr>
-                            <tr>
-                                <th>
-                                    <input st-search="name" placeholder="{{'Search by Rule Name'|T}}" class="input-sm form-control" type="text" />
-                                </th>
-                                <th></th>
-                                <th></th>
-                                <th>
-                                    <select class="input-sm form-control" st-input-event="change" st-search="product">
-                                        <option value="all">{{'All Products'|T}}</option>
-                                        <option value="device">{{'Device'|T}}</option>
-                                        <option value="virtualService">{{'Virtual Service'|T}}</option>
-                                        <option value='realService'>{{'Real Service'|T}}</option>
-                                        <option value='sslvpnService'>{{'SSLVPN Service'|T}}</option>
-                                    </select>
-                                </th>
-                                <th>
-                                    <select class="input-sm form-control" st-input-event="change" st-search="state">
-                                        <option value="">{{'All'|T}}</option>
-                                        <option value="enabled">{{'Enabled'|T}}</option>
-                                        <option value="paused">{{'Paused'|T}}</option>
-                                    </select>
-                                </th>
-                                <th></th>
-                                <th></th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr ng-show="eventAlert.loading">
-                                <td colspan="7" class="text-center"><img src="app/images/loading-h2.gif"></td>
-                            </tr>
-                            <tr ng-repeat="item in eventAlert.alertingList">
-                                <!-- <td style="cursor: pointer;" ui-sref="index.monitoring.alerting.log({name:item.name, id: item.id})">
-                                <a class="name">{{ item.name }}</a>
-                            </td> -->
-                                <td>{{ item.name }}</td>
-                                <td>{{ item.remark }}</td>
-                                <td>{{ item.dimension }}</td>
-                                <th>{{ item.product_verbose_name | T }}</th>
-                                <td>
-                                    <i ng-if="item.state=='paused'" style="color:#8e8e8e;" class="fa fa-pause-circle"></i>
-                                    <span ng-if="item.state=='paused'" style="color:#8e8e8e;font-weight:bold;">{{'Paused'|T}}</span>
-
-                                    <i ng-if="item.state!='paused'" style="color:#5cb85c;" class="fa fa-check-circle"></i>
-                                    <span ng-if="item.state!='paused'" style="color:#5cb85c;font-weight:bold;">{{'Enabled'|T}}</span>
-                                </td>
-                                <td>
-                                    <i ng-if="item.notifications.length===0" style="color:#8e8e8e;" class="fa fa-envelope" title="{{'Notification Disabled'|T}}"></i>
-                                    <i ng-if="item.notifications.length!=0" style="color:#5cb85c;" class="fa fa-envelope" title="{{'Notification Enabled'|T}}"></i>
-                                </td>
-                                <td>
-                                    <a ng-if="item.state!='paused'" title="{{'Pausing'|T}}" class="text-explode" ng-click="eventAlert.pause(item)">
-                                        <i class="fa fa-pause"></i>
-                                    </a>
-                                    <a ng-if="item.state=='paused'" title="{{'Executing'|T}}" class="text-explode" ng-click="eventAlert.execute(item)">
-                                        <i class="fa fa-play"></i>
-                                    </a>
-                                    <a title="{{'Edit'|T}}" class="text-explode" ng-click="eventAlert.edit(item)">
-                                        <i class="fa fa-pencil"></i>
-                                    </a>
-                                    <a title="{{'Delete'|T}}" class="text-explode" ng-click="eventAlert.delete(item)">
-                                        <i class="fa fa-times-circle"></i>
-                                    </a>
-                                </td>
-                            </tr>
-                            <tr ng-if="eventAlert.alertingList.length == 0">
-                                <td style="height: 48px;" colspan="7" class="text-center">{{ 'You do not have any alert rules.' | T }}</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-                <div class="table-pagination">
-                    <div class="pagination-detail"></div>
-                    <div class="pull-left">
-                        <label style="color:#9c9fa3;">
-                            &nbsp;&nbsp;&nbsp;{{'Every page displays'|T}}&nbsp;
-                            <select style="border-radius:4px; margin-top:-5px;" ng-model="pageSize" ng-options="item for item in [15,25,50,100]">
+        </div>
+        <div class="table-container" st-table="eventAlert.alertingList" st-pipe="eventAlert.pipeServer">
+            <div class="table-responsive table-content" style="width: 100%;">
+                <table class="table table-striped table-hover">
+                    <thead>
+                    <tr>
+                        <th class="d-name">{{ 'Rule Name' | T }}</th>
+                        <th>{{ 'Rule Description' | T }}</th>
+                        <th>{{ 'Resource Range' | T }}</th>
+                        <th>{{ 'Product' | T }}</th>
+                        <th class="d-type">
+                            <span>{{ 'Status' | T }}</span>
+                        </th>
+                        <th>{{ 'Notification' | T }}</th>
+                        <th class="d-service">{{ 'Action' | T }}</th>
+                    </tr>
+                    <tr>
+                        <th>
+                            <input st-search="name" placeholder="{{'Search by Rule Name'|T}}"
+                                   class="input-sm form-control" type="text"/>
+                        </th>
+                        <th></th>
+                        <th></th>
+                        <th>
+                            <select class="input-sm form-control" st-input-event="change" st-search="product">
+                                <option value="all">{{'All Products' | T}}</option>
+                                <option value="device">{{'Device' | T}}</option>
+                                <option value="virtualService">{{'Virtual Service' | T}}</option>
+                                <option value='realService'>{{'Real Service' | T}}</option>
+                                <option value='sslvpnService'>{{'SSLVPN Service' | T}}</option>
                             </select>
-                            &nbsp;{{'entries'|T}}
-                        </label>
-                    </div>
-                    <div class="pagination" st-pagination="" st-items-by-page="pageSize"></div>
+                        </th>
+                        <th>
+                            <select class="input-sm form-control" st-input-event="change" st-search="state">
+                                <option value="">{{'All' | T}}</option>
+                                <option value="enabled">{{'Enabled' | T}}</option>
+                                <option value="paused">{{'Paused' | T}}</option>
+                            </select>
+                        </th>
+                        <th></th>
+                        <th></th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr ng-show="eventAlert.loading">
+                        <td colspan="7" class="text-center"><img src="app/images/loading-h2.gif"></td>
+                    </tr>
+                    <tr ng-repeat="item in eventAlert.alertingList">
+                        <!-- <td style="cursor: pointer;" ui-sref="index.monitoring.alerting.log({name:item.name, id: item.id})">
+                        <a class="name">{{ item.name }}</a>
+                    </td> -->
+                        <td>{{ item.name }}</td>
+                        <td>{{ item.remark }}</td>
+                        <td>{{ item.dimension }}</td>
+                        <th>{{ item.product_verbose_name | T }}</th>
+                        <td>
+                            <i ng-if="item.state=='paused'" style="color:#8e8e8e;" class="fa fa-pause-circle"></i>
+                            <span ng-if="item.state=='paused'"
+                                  style="color:#8e8e8e;font-weight:bold;">{{'Paused' | T}}</span>
+
+                            <i ng-if="item.state!='paused'" style="color:#5cb85c;" class="fa fa-check-circle"></i>
+                            <span ng-if="item.state!='paused'"
+                                  style="color:#5cb85c;font-weight:bold;">{{'Enabled' | T}}</span>
+                        </td>
+                        <td>
+                            <i ng-if="item.notifications.length===0" style="color:#8e8e8e;" class="fa fa-envelope"
+                               title="{{'Notification Disabled'|T}}"></i>
+                            <i ng-if="item.notifications.length!=0" style="color:#5cb85c;" class="fa fa-envelope"
+                               title="{{'Notification Enabled'|T}}"></i>
+                        </td>
+                        <td>
+                            <a ng-if="item.state!='paused'" title="{{'Pausing'|T}}" class="text-explode"
+                               ng-click="eventAlert.pause(item)">
+                                <i class="fa fa-pause an-row-icon"></i>
+                            </a>
+                            <a ng-if="item.state=='paused'" title="{{'Executing'|T}}" class="text-explode"
+                               ng-click="eventAlert.execute(item)">
+                                <i class="fa fa-play an-row-icon"></i>
+                            </a>
+                            <a title="{{'Edit'|T}}" class="text-explode" ng-click="eventAlert.edit(item)">
+                                <i class="fa fa-pencil an-row-icon"></i>
+                            </a>
+                            <a title="{{'Delete'|T}}" class="text-explode" ng-click="eventAlert.delete(item)">
+                                <i class="fa fa-times-circle an-row-icon"></i>
+                            </a>
+                        </td>
+                    </tr>
+                    <tr ng-if="eventAlert.alertingList.length == 0">
+                        <td style="height: 48px;" colspan="7" class="text-center">
+                            {{ 'You do not have any alert rules.' | T }}
+                        </td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div class="table-pagination">
+                <div class="pagination-detail"></div>
+                <div class="pull-left">
+                    <label style="color:#9c9fa3;">
+                        &nbsp;&nbsp;&nbsp;{{'Every page displays' | T}}&nbsp;
+                        <select style="border-radius:4px; margin-top:-5px;" ng-model="pageSize"
+                                ng-options="item for item in [15,25,50,100]">
+                        </select>
+                        &nbsp;{{'entries' | T}}
+                    </label>
                 </div>
+                <div class="pagination" st-pagination="" st-items-by-page="pageSize"></div>
             </div>
-            <!-- <div style="text-align: center" ng-if="eventAlert.loading"><img src="app/images/loading.gif"></div> -->
+            <br>
         </div>
     </div>
 </div>
 
 <style>
     .text-explode {
-        margin: 0px 4px !important;
+        margin: 0 4px !important;
     }
-</style>
\ No newline at end of file
+</style>
Index: /branches/amp_3_7/extensions/monitoring/webui/alerting/alert_rule/threshold_alert/threshold_alert.html
===================================================================
--- /branches/amp_3_7/extensions/monitoring/webui/alerting/alert_rule/threshold_alert/threshold_alert.html	(revision 2477)
+++ /branches/amp_3_7/extensions/monitoring/webui/alerting/alert_rule/threshold_alert/threshold_alert.html	(working copy)
@@ -1,134 +1,152 @@
-<div class="row">
-    <div class="col-md-12">
-        <div class="widget">
-            <div class="table-toolbar">
-                <div class="btn-group">
-                    <button class="btn btn-link" title="{{ 'Refresh Alert Rule List' | T }}" ng-click="thresholdAlert.refresh()"><i class="fa fa-refresh"></i></button>
-                    <button class="btn btn-link " title="{{'New Alert Rule'|T}}" ng-click="thresholdAlert.add()"><i class="fa fa-plus-circle"></i></button>
-                </div>
+<div class="col-md-12">
+    <div class="widget">
+        <div class="table-toolbar">
+            <div class="btn-group">
+                <button class="btn btn-link" title="{{ 'Refresh Alert Rule List' | T }}"
+                        ng-click="thresholdAlert.refresh()"><i class="fa fa-refresh an-tab-icon"></i></button>
+                <button class="btn btn-link " title="{{'New Alert Rule'|T}}" ng-click="thresholdAlert.add()"><i
+                        class="fa fa-plus-circle an-tab-icon"></i></button>
             </div>
-            <div class="table-container" st-table="thresholdAlert.alertingList" st-pipe="thresholdAlert.pipeServer">
-                <div class="table-responsive table-content">
-                    <table class="table table-striped table-hover">
-                        <thead>
-                            <tr>
-                                <th class="d-name">{{ 'Rule Name' | T }}</th>
-                                <th>{{ 'Rule Description' | T }}</th>
-                                <th>{{ 'Resource Range' | T }}</th>
-                                <th>{{ 'Product' | T }}</th>
-                                <th class="d-type">
-                                    <span>{{ 'Status' | T }}</span>
-                                    <i class="fa fa-info-circle" data-role="popover" data-popover-mode="hover" data-popover-position="bottom" data-popover-text="{{thresholdAlert.popover_text}}" data-popover-background="bg-cyan" data-popover-color="fg-white"></i>
-                                </th>
-                                <th>{{ 'Notification' | T }}</th>
-                                <th class="d-service">{{ 'Action' | T }}</th>
-                            </tr>
-                            <tr>
-                                <th>
-                                    <input st-search="name" placeholder="{{'Search by Rule Name'|T}}" class="input-sm form-control" type="text" />
-                                </th>
-                                <th></th>
-                                <th></th>
-                                <th>
-                                    <select class="input-sm form-control" st-input-event="change" st-search="product">
-                                        <option value="">{{'All Products'|T}}</option>
-                                        <option value="device">{{'Device'|T}}</option>
-                                        <option value="virtualService">{{'Virtual Service'|T}}</option>
-                                        <option value='realService'>{{'Real Service'|T}}</option>
-                                        <option value='sslvpnService'>{{'SSLVPN Service'|T}}</option>
-                                    </select>
-                                </th>
-                                <th>
-                                    <select class="input-sm form-control" st-input-event="change" st-search="state">
-                                        <option value="">{{'All'|T}}</option>
-                                        <option value="ok">{{'OK'|T}}</option>
-                                        <option value="alerting">{{'Alerting'|T}}</option>
-                                        <option value="no_data">{{'No Data'|T}}</option>
-                                        <option value="paused">{{'Paused'|T}}</option>
-                                        <option value="pending">{{'Pending'|T}}</option>
-                                    </select>
-                                </th>
-                                <th></th>
-                                <th></th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr ng-show="thresholdAlert.loading">
-                                <td colspan="7" class="text-center"><img src="app/images/loading-h2.gif"></td>
-                            </tr>
-                            <tr ng-repeat="item in thresholdAlert.alertingList">
-                                <!-- <td style="cursor: pointer;" ui-sref="index.monitoring.alerting.log({name:item.name, id: item.id})">
-                                <a class="name">{{ item.name }}</a>
-                            </td> -->
-                                <td>{{ item.name }}</td>
-                                <td>{{ item.remark }}</td>
-                                <td>{{ item.dimension }}</td>
-                                <th>{{ item.product_verbose_name | T }}</th>
-                                <td>
-                                    <i ng-if="item.state=='paused'" style="color:#8e8e8e;" class="fa fa-pause-circle"></i>
-                                    <span ng-if="item.state=='paused'" style="color:#8e8e8e;font-weight:bold;">{{'Paused'|T}}</span>
-
-                                    <i ng-if="item.state=='ok'" style="color:#5cb85c;" class="fa fa-check-circle"></i>
-                                    <span ng-if="item.state=='ok'" style="color:#5cb85c;font-weight:bold;">{{'Ok'|T}}</span>
-
-                                    <i ng-if="item.state=='alerting'" style="color:#e02f44;" class="fa fa-exclamation-circle"></i>
-                                    <span ng-if="item.state=='alerting'" style="color:#e02f44;font-weight:bold;">{{'Alerting'|T}}</span>
-
-                                    <i ng-if="item.state=='no_data'" style="color:#f79520;" class="fa fa-question"></i>
-                                    <span ng-if="item.state=='no_data'" style="color:#f79520;font-weight:bold;">{{'No Data'|T}}</span>
-
-                                    <i ng-if="item.state=='pending'" style="color:#f79520;" class="fa fa-exclamation"></i>
-                                    <span ng-if="item.state=='pending'" style="color:#f79520;font-weight:bold;">{{'Pending'|T}}</span>
-
-                                    <i ng-if="item.state=='unknown'" style="color:#8e8e8e;" class="fa fa-question"></i>
-                                    <span ng-if="item.state=='unknown'" style="color:#8e8e8e;font-weight:bold;">{{'Unknown'|T}}</span>
-
-                                    <span>{{item.for_time}}</span>
-                                </td>
-                                <td>
-                                    <i ng-if="item.notifications.length===0" style="color:#8e8e8e;" class="fa fa-envelope" title="{{'Notification Disabled'|T}}"></i>
-                                    <i ng-if="item.notifications.length!=0" style="color:#5cb85c;" class="fa fa-envelope" title="{{'Notification Enabled'|T}}"></i>
-                                </td>
-                                <td>
-                                    <a ng-if="item.state!='paused'" title="{{'Pausing'|T}}" class="text-explode" ng-click="thresholdAlert.pause(item)">
-                                        <i class="fa fa-pause"></i>
-                                    </a>
-                                    <a ng-if="item.state=='paused'" title="{{'Executing'|T}}" class="text-explode" ng-click="thresholdAlert.execute(item)">
-                                        <i class="fa fa-play"></i>
-                                    </a>
-                                    <a title="{{'Edit'|T}}" class="text-explode" ng-click="thresholdAlert.edit(item)">
-                                        <i class="fa fa-pencil"></i>
-                                    </a>
-                                    <a title="{{'Delete'|T}}" class="text-explode" ng-click="thresholdAlert.delete(item)">
-                                        <i class="fa fa-times-circle"></i>
-                                    </a>
-                                </td>
-                            </tr>
-                            <tr ng-if="thresholdAlert.alertingList.length == 0">
-                                <td style="height: 48px;" colspan="7" class="text-center">{{ 'You do not have any alert rules.' | T }}</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-                <div class="table-pagination">
-                    <div class="pagination-detail"></div>
-                    <div class="pull-left">
-                        <label style="color:#9c9fa3;">
-                            &nbsp;&nbsp;&nbsp;{{'Every page displays'|T}}&nbsp;
-                            <select style="border-radius:4px; margin-top:-5px;" ng-model="pageSize" ng-options="item for item in [15,25,50,100]">
+        </div>
+        <div class="table-container" st-table="thresholdAlert.alertingList" st-pipe="thresholdAlert.pipeServer">
+            <div class="table-responsive table-content" style="width: 100%;">
+                <table class="table table-striped table-hover">
+                    <thead>
+                    <tr>
+                        <th class="d-name">{{ 'Rule Name' | T }}</th>
+                        <th>{{ 'Rule Description' | T }}</th>
+                        <th>{{ 'Resource Range' | T }}</th>
+                        <th>{{ 'Product' | T }}</th>
+                        <th class="d-type">
+                            <span>{{ 'Status' | T }}</span>
+                            <i class="fa fa-info-circle" data-role="popover" data-popover-mode="hover"
+                               data-popover-position="bottom" data-popover-text="{{thresholdAlert.popover_text}}"
+                               data-popover-background="bg-cyan" data-popover-color="fg-white"></i>
+                        </th>
+                        <th>{{ 'Notification' | T }}</th>
+                        <th class="d-service">{{ 'Action' | T }}</th>
+                    </tr>
+                    <tr>
+                        <th>
+                            <input st-search="name" placeholder="{{'Search by Rule Name'|T}}"
+                                   class="input-sm form-control" type="text"/>
+                        </th>
+                        <th></th>
+                        <th></th>
+                        <th>
+                            <select class="input-sm form-control" st-input-event="change" st-search="product">
+                                <option value="">{{'All Products' | T}}</option>
+                                <option value="device">{{'Device' | T}}</option>
+                                <option value="virtualService">{{'Virtual Service' | T}}</option>
+                                <option value='realService'>{{'Real Service' | T}}</option>
+                                <option value='sslvpnService'>{{'SSLVPN Service' | T}}</option>
                             </select>
-                            &nbsp;{{'entries'|T}}
-                        </label>
-                    </div>
-                    <div class="pagination" st-pagination="" st-items-by-page="pageSize"></div>
+                        </th>
+                        <th>
+                            <select class="input-sm form-control" st-input-event="change" st-search="state">
+                                <option value="">{{'All' | T}}</option>
+                                <option value="ok">{{'OK' | T}}</option>
+                                <option value="alerting">{{'Alerting' | T}}</option>
+                                <option value="no_data">{{'No Data' | T}}</option>
+                                <option value="paused">{{'Paused' | T}}</option>
+                                <option value="pending">{{'Pending' | T}}</option>
+                            </select>
+                        </th>
+                        <th></th>
+                        <th></th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr ng-show="thresholdAlert.loading">
+                        <td colspan="7" class="text-center"><img src="app/images/loading-h2.gif"></td>
+                    </tr>
+                    <tr ng-repeat="item in thresholdAlert.alertingList">
+                        <!-- <td style="cursor: pointer;" ui-sref="index.monitoring.alerting.log({name:item.name, id: item.id})">
+                        <a class="name">{{ item.name }}</a>
+                    </td> -->
+                        <td>{{ item.name }}</td>
+                        <td>{{ item.remark }}</td>
+                        <td>{{ item.dimension }}</td>
+                        <th>{{ item.product_verbose_name | T }}</th>
+                        <td>
+                            <i ng-if="item.state=='paused'" style="color:#8e8e8e;" class="fa fa-pause-circle"></i>
+                            <span ng-if="item.state=='paused'"
+                                  style="color:#8e8e8e;font-weight:bold;">{{'Paused' | T}}</span>
+
+                            <i ng-if="item.state=='ok'" style="color:#5cb85c;" class="fa fa-check-circle"></i>
+                            <span ng-if="item.state=='ok'" style="color:#5cb85c;font-weight:bold;">{{'Ok' | T}}</span>
+
+                            <i ng-if="item.state=='alerting'" style="color:#e02f44;"
+                               class="fa fa-exclamation-circle"></i>
+                            <span ng-if="item.state=='alerting'"
+                                  style="color:#e02f44;font-weight:bold;">{{'Alerting' | T}}</span>
+
+                            <i ng-if="item.state=='no_data'" style="color:#f79520;" class="fa fa-question"></i>
+                            <span ng-if="item.state=='no_data'"
+                                  style="color:#f79520;font-weight:bold;">{{'No Data' | T}}</span>
+
+                            <i ng-if="item.state=='pending'" style="color:#f79520;" class="fa fa-exclamation"></i>
+                            <span ng-if="item.state=='pending'"
+                                  style="color:#f79520;font-weight:bold;">{{'Pending' | T}}</span>
+
+                            <i ng-if="item.state=='unknown'" style="color:#8e8e8e;" class="fa fa-question"></i>
+                            <span ng-if="item.state=='unknown'"
+                                  style="color:#8e8e8e;font-weight:bold;">{{'Unknown' | T}}</span>
+
+                            <span>{{item.for_time}}</span>
+                        </td>
+                        <td>
+                            <i ng-if="item.notifications.length===0" style="color:#8e8e8e;" class="fa fa-envelope"
+                               title="{{'Notification Disabled'|T}}"></i>
+                            <i ng-if="item.notifications.length!=0" style="color:#5cb85c;" class="fa fa-envelope"
+                               title="{{'Notification Enabled'|T}}"></i>
+                        </td>
+                        <td>
+                            <a ng-if="item.state!='paused'" title="{{'Pausing'|T}}" class="text-explode"
+                               ng-click="thresholdAlert.pause(item)">
+                                <i class="fa fa-pause an-row-icon"></i>
+                            </a>&nbsp;&nbsp;
+                            <a ng-if="item.state=='paused'" title="{{'Executing'|T}}" class="text-explode"
+                               ng-click="thresholdAlert.execute(item)">
+                                <i class="fa fa-play an-row-icon"></i>
+                            </a>&nbsp;&nbsp;
+                            <a title="{{'Edit'|T}}" class="text-explode" ng-click="thresholdAlert.edit(item)">
+                                <i class="fa fa-pencil an-row-icon"></i>
+                            </a>&nbsp;&nbsp;
+                            <a title="{{'Delete'|T}}" class="text-explode" ng-click="thresholdAlert.delete(item)">
+                                <i class="fa fa-times-circle an-row-icon"></i>
+                            </a>
+                        </td>
+                    </tr>
+                    <tr ng-if="thresholdAlert.alertingList.length == 0">
+                        <td style="height: 48px;" colspan="7" class="text-center">
+                            {{ 'You do not have any alert rules.' | T }}
+                        </td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div class="table-pagination">
+                <div class="pagination-detail"></div>
+                <div class="pull-left">
+                    <label style="color:#9c9fa3;">
+                        &nbsp;&nbsp;&nbsp;{{'Every page displays' | T}}&nbsp;
+                        <select style="border-radius:4px; margin-top:-5px;" ng-model="pageSize"
+                                ng-options="item for item in [15,25,50,100]">
+                        </select>
+                        &nbsp;{{'entries' | T}}
+                    </label>
                 </div>
+                <div class="pagination" st-pagination="" st-items-by-page="pageSize"></div>
             </div>
+            <br>
         </div>
     </div>
 </div>
 
+
 <style>
     .text-explode {
-        margin: 0px 3px !important;
+        margin: 0 3px !important;
     }
 </style>
\ No newline at end of file
Index: /branches/amp_3_7/extensions/monitoring/webui/alerting/initiative/initiative_alert.html
===================================================================
--- /branches/amp_3_7/extensions/monitoring/webui/alerting/initiative/initiative_alert.html	(revision 2477)
+++ /branches/amp_3_7/extensions/monitoring/webui/alerting/initiative/initiative_alert.html	(working copy)
@@ -1,14 +1,18 @@
 <div class="row" ng-repeat="alert in initiativeAlert.initiativeList">
     <div class="col-md-12">
         <div class="widget" style="padding: 5px 0">
-            <div class="" style="cursor: pointer; min-height: 80px; line-height: 25px; padding: 20px 0;" ng-click="alert.show_detail = !alert.show_detail">
+            <div class="" style="cursor: pointer; min-height: 80px; line-height: 25px; padding: 20px 0;"
+                 ng-click="alert.show_detail = !alert.show_detail">
                 <div class="col-md-2">
-                    <i class="fa fa-chevron-right" ng-class="{'submenu-active':alert.show_detail}" style="margin-right: 5px;"></i>
-                    {{alert.verbose_name | T}}
+                    <i class="fa fa-chevron-right" ng-class="{'submenu-active':alert.show_detail}"
+                       style="margin-right: 5px;"></i>
+                    <span class="tab-header-1">{{alert.verbose_name | T}}</span>
                 </div>
                 <div class="col-md-7">{{alert.description | T}}</div>
                 <div class="col-md-3"><span style="margin-right: 5px;">{{'Initiative Alert' | T}}</span>
-                    <input bs-switch class="switch" ng-model="alert.enable" ng-change="initiativeAlert.enable_alert(alert)" type="checkbox" switch-active="true" resettable>
+                    <input bs-switch class="switch" ng-model="alert.enable"
+                           ng-change="initiativeAlert.enable_alert(alert)" type="checkbox" switch-active="true"
+                           resettable>
                 </div>
             </div>
         </div>
@@ -18,44 +22,50 @@
             <div class="table-wrapper" st-table="displayedCollection" st-safe-src="alert.alertingList">
                 <table class="table table-striped table-hover">
                     <thead>
-                        <tr>
-                            <th>{{ 'Rule Description' | T }}</th>
-                            <th>{{ 'Status' | T }}</th>
-                            <th>{{ 'Notification' | T }}</th>
-                            <th>{{ 'Action' | T }}</th>
-                        </tr>
+                    <tr>
+                        <th>{{ 'Rule Description' | T }}</th>
+                        <th>{{ 'Status' | T }}</th>
+                        <th>{{ 'Notification' | T }}</th>
+                        <th>{{ 'Action' | T }}</th>
+                    </tr>
                     </thead>
                     <tbody>
-                        <tr ng-repeat="item in displayedCollection">
-                            <td>{{ item.remark }}</td>
-                            <td>
-                                <i ng-if="item.state=='paused'" style="color:#8e8e8e;" class="fa fa-pause-circle"></i>
-                                <span ng-if="item.state=='paused'" style="color:#8e8e8e;font-weight:bold;">{{'Paused'|T}}</span>
-                                <i ng-if="item.state!='paused'" style="color:#5cb85c;" class="fa fa-check-circle"></i>
-                                <span ng-if="item.state!='paused'" style="color:#5cb85c;font-weight:bold;">{{'Enabled'|T}}</span>
-                            </td>
-                            <td>
-                                <i ng-if="item.notifications.length===0" style="color:#8e8e8e;" class="fa fa-envelope" title="{{'Notification Disabled'|T}}"></i>
-                                <i ng-if="item.notifications.length!=0" style="color:#5cb85c;" class="fa fa-envelope" title="{{'Notification Enabled'|T}}"></i>
-                            </td>
-                            <td>
-                                <a ng-if="item.state!='paused'" title="{{'Pausing'|T}}" class="text-explode" ng-click="initiativeAlert.pause(item)">
-                                    <i class="fa fa-pause"></i>
-                                </a>
-                                <a ng-if="item.state=='paused'" title="{{'Executing'|T}}" class="text-explode" ng-click="initiativeAlert.execute(item)">
-                                    <i class="fa fa-play"></i>
-                                </a>
-                                <a title="{{'Edit'|T}}" class="text-explode" ng-click="initiativeAlert.edit(item)">
-                                    <i class="fa fa-pencil"></i>
-                                </a>
-                            </td>
-                        </tr>
+                    <tr ng-repeat="item in displayedCollection">
+                        <td>{{ item.remark }}</td>
+                        <td>
+                            <i ng-if="item.state=='paused'" style="color:#8e8e8e;" class="fa fa-pause-circle"></i>
+                            <span ng-if="item.state=='paused'"
+                                  style="color:#8e8e8e;font-weight:bold;">{{'Paused' | T}}</span>
+                            <i ng-if="item.state!='paused'" style="color:#5cb85c;" class="fa fa-check-circle"></i>
+                            <span ng-if="item.state!='paused'"
+                                  style="color:#5cb85c;font-weight:bold;">{{'Enabled' | T}}</span>
+                        </td>
+                        <td>
+                            <i ng-if="item.notifications.length===0" style="color:#8e8e8e;" class="fa fa-envelope"
+                               title="{{'Notification Disabled'|T}}"></i>
+                            <i ng-if="item.notifications.length!=0" style="color:#5cb85c;" class="fa fa-envelope"
+                               title="{{'Notification Enabled'|T}}"></i>
+                        </td>
+                        <td>
+                            <a ng-if="item.state!='paused'" title="{{'Pausing'|T}}" class="text-explode"
+                               ng-click="initiativeAlert.pause(item)">
+                                <i class="fa fa-pause"></i>
+                            </a>
+                            <a ng-if="item.state=='paused'" title="{{'Executing'|T}}" class="text-explode"
+                               ng-click="initiativeAlert.execute(item)">
+                                <i class="fa fa-play"></i>
+                            </a>
+                            <a title="{{'Edit'|T}}" class="text-explode" ng-click="initiativeAlert.edit(item)">
+                                <i class="fa fa-pencil"></i>
+                            </a>
+                        </td>
+                    </tr>
                     </tbody>
                 </table>
             </div>
         </div>
         <div ng-if="alert.alertingList.length == 0" style="height: 64px; text-align: center;">
-            <span>{{ 'Initiative Alert has not enabled' | T }}</span>
+            <br><span class="tab-header-1">{{ 'Initiative Alert has not enabled' | T }}</span>
         </div>
     </div>
 </div>
Index: /branches/amp_3_7/extensions/monitoring/webui/event/event.html
===================================================================
--- /branches/amp_3_7/extensions/monitoring/webui/event/event.html	(revision 2477)
+++ /branches/amp_3_7/extensions/monitoring/webui/event/event.html	(working copy)
@@ -2,11 +2,11 @@
     <div class="col-md-12">
         <ul class="nav nav-tabs">
             <li role="presentation" ng-class="{ active: url_contain('/monitoring/event/query') }">
-                <a ui-sref="index.monitoring.event.query">{{'Query Event'|T}}</a>
+                <a ui-sref="index.monitoring.event.query"><span class="tab-header">{{'Query Event' | T}}</span></a>
             </li>
         </ul>
     </div>
-</div>
-<div class="content-wrapper">
-    <div class="" ng-show="url_contain('/monitoring/event/query')" ui-view="query"></div>
-</div>
+    <div class="content-wrapper">
+        <div class="" ng-show="url_contain('/monitoring/event/query')" ui-view="query"></div>
+    </div>
+</div>
\ No newline at end of file
Index: /branches/amp_3_7/extensions/monitoring/webui/event/query_event/query_event.html
===================================================================
--- /branches/amp_3_7/extensions/monitoring/webui/event/query_event/query_event.html	(revision 2477)
+++ /branches/amp_3_7/extensions/monitoring/webui/event/query_event/query_event.html	(working copy)
@@ -1,92 +1,109 @@
-<div class="row">
-    <div class="col-md-12">
-        <div class="alert alert-info" ng-if="queryEvent.showHelpContent" role="alert">{{'The Event Monitoring collects equipment failure and service exception events, and provides statistical events grouped by product, instance and type.'|T}}</div>
-        <span ng-repeat="item in queryEvent.selectDateList" ng-class="{'time-item-selected':queryEvent.currentRange==item.value}" class="time-item ng-scope ng-binding" ng-click="queryEvent.changeTimeGap(item.value)">{{item.verbose_name}}</span>
-        <input type="text" class="usertime-item" id="start" data-date-format="yyyy-mm-dd hh:ii:ss" ng-change="queryEvent.applyTimeRange()" ng-model="queryEvent.startTime" readonly="readonly">
-        <span>&minus;</span>
-        <input type="text" class="usertime-item" id="end" data-date-format="yyyy-mm-dd hh:ii:ss" ng-change="queryEvent.applyTimeRange()" ng-model="queryEvent.endTime" readonly="readonly">
+<div class="col-md-12">
+    <div class="alert alert-info" ng-if="queryEvent.showHelpContent" role="alert">
+        {{'The Event Monitoring collects equipment failure and service exception events, and provides statistical events grouped by product, instance and type.' | T}}
     </div>
-    <div class="col-md-12">
-        <select class="input-sm ng-scope ng-binding" ng-model="queryEvent.queryBuilder.product" ng-change="queryEvent.changeProduct()">
-            <option value="all">{{'All Products'|T}}</option>
-            <option value="device">{{'Device'|T}}</option>
-            <option value="virtualService">{{'Virtual Service'|T}}</option>
-            <option value='realService'>{{'Real Service'|T}}</option>
-            <!-- <option value='sslvpnService'>{{'SSLVPN Service'|T}}</option> -->
-        </select>
-        <select class="input-sm ng-scope ng-binding" ng-model="queryEvent.queryBuilder.instance" ng-disabled="queryEvent.queryBuilder.product=='all'">
-            <option value="">{{'All Instances'|T}}</option>
-            <option ng-repeat="item in queryEvent.instanceList" value="{{item}}">{{item.verbose_name}}</option>
-        </select>
-        <select class="input-sm ng-scope ng-binding" ng-model="queryEvent.queryBuilder.event_type" ng-change="queryEvent.changeEventType()" ng-disabled="queryEvent.queryBuilder.product=='all'">
-            <option value="">{{'All Types'|T}}</option>
-            <option ng-repeat="item in queryEvent.eventTypeList" value="{{item}}">{{item|T}}</option>
-        </select>
-        <select class="input-sm ng-scope ng-binding" ng-model="queryEvent.queryBuilder.event_name" ng-disabled="queryEvent.queryBuilder.product=='all'">
-            <option value="">{{'All Events'|T}}</option>
-            <option ng-repeat="item in queryEvent.eventNameList" value="{{item.event_name}}">{{item.verbose_name}}</option>
-        </select>
-        <div class="btn btn-sm btn-default" ng-click="queryEvent.refresh()" ng-disabled="queryEvent.loading"><i class="fa fa-search"><span style="margin-left: 3px;">{{'Search'|T}}</span></i></div>
-        <button class="btn btn-link" title="{{'Help'|T}}" style="color:#ccc" ng-click="queryEvent.showHelpContent = !queryEvent.showHelpContent"><i class="fa fa-question-circle"></i></button>
-        <div class="btn-group pull-right">
-            <div class="btn btn-sm ng-binding btn-primary" ng-click="queryEvent.add()"><i class="fa fa-plus"><span style="margin-left: 3px;">{{'Add Event Alert'|T}}</span></i></div>
-            <!-- <div class="btn btn-sm btn-default" ng-click="queryEvent.refresh()" ng-disabled="queryEvent.loading"><i class="fa fa-refresh"><span style="margin-left: 3px;">{{'Refresh'|T}}</span></i></div> -->
-        </div>
-    </div>
-    <div class="col-md-12 graph ng-scope">
-        <div class="graph-container" discover-monitoring="queryEvent.eventWidget" style="height: 220px"></div>
+    <span ng-repeat="item in queryEvent.selectDateList"
+          ng-class="{'time-item-selected':queryEvent.currentRange==item.value}" class="time-item ng-scope ng-binding"
+          ng-click="queryEvent.changeTimeGap(item.value)">{{item.verbose_name}}</span>
+    <input type="text" class="usertime-item" id="start" data-date-format="yyyy-mm-dd hh:ii:ss"
+           ng-change="queryEvent.applyTimeRange()" ng-model="queryEvent.startTime" readonly="readonly">
+    <span>&minus;</span>
+    <input type="text" class="usertime-item" id="end" data-date-format="yyyy-mm-dd hh:ii:ss"
+           ng-change="queryEvent.applyTimeRange()" ng-model="queryEvent.endTime" readonly="readonly">
+</div>
+<div class="col-md-12">
+    <select class="input-sm ng-scope ng-binding" ng-model="queryEvent.queryBuilder.product"
+            ng-change="queryEvent.changeProduct()">
+        <option value="all">{{'All Products' | T}}</option>
+        <option value="device">{{'Device' | T}}</option>
+        <option value="virtualService">{{'Virtual Service' | T}}</option>
+        <option value='realService'>{{'Real Service' | T}}</option>
+        <!-- <option value='sslvpnService'>{{'SSLVPN Service'|T}}</option> -->
+    </select>
+    <select class="input-sm ng-scope ng-binding" ng-model="queryEvent.queryBuilder.instance"
+            ng-disabled="queryEvent.queryBuilder.product=='all'">
+        <option value="">{{'All Instances' | T}}</option>
+        <option ng-repeat="item in queryEvent.instanceList" value="{{item}}">{{item.verbose_name}}</option>
+    </select>
+    <select class="input-sm ng-scope ng-binding" ng-model="queryEvent.queryBuilder.event_type"
+            ng-change="queryEvent.changeEventType()" ng-disabled="queryEvent.queryBuilder.product=='all'">
+        <option value="">{{'All Types' | T}}</option>
+        <option ng-repeat="item in queryEvent.eventTypeList" value="{{item}}">{{item | T}}</option>
+    </select>
+    <select class="input-sm ng-scope ng-binding" ng-model="queryEvent.queryBuilder.event_name"
+            ng-disabled="queryEvent.queryBuilder.product=='all'">
+        <option value="">{{'All Events' | T}}</option>
+        <option ng-repeat="item in queryEvent.eventNameList" value="{{item.event_name}}">{{item.verbose_name}}</option>
+    </select>
+    <div class="btn btn-sm btn-default" ng-click="queryEvent.refresh()" ng-disabled="queryEvent.loading"><i
+            class="fa fa-search"><span style="margin-left: 3px;">{{'Search' | T}}</span></i></div>
+    <button class="btn btn-link" title="{{'Help'|T}}" style="color:#ccc"
+            ng-click="queryEvent.showHelpContent = !queryEvent.showHelpContent"><i class="fa fa-question-circle"></i>
+    </button>
+    <div class="btn-group pull-right">
+        <div class="btn btn-sm ng-binding btn-primary" ng-click="queryEvent.add()"><i class="fa fa-plus"><span
+                style="margin-left: 3px;">{{'Add Event Alert' | T}}</span></i></div>
+        <!-- <div class="btn btn-sm btn-default" ng-click="queryEvent.refresh()" ng-disabled="queryEvent.loading"><i class="fa fa-refresh"><span style="margin-left: 3px;">{{'Refresh'|T}}</span></i></div> -->
     </div>
-    <div class="col-md-12">
-        <div class="widget">
-            <div class="table-container" st-table="displayedCollection" st-safe-src="queryEvent.eventList">
-                <div class="table-responsive table-content">
-                    <table class="table table-striped table-hover">
-                        <thead>
-                            <tr>
-                                <th class="d-num">No.</th>
-                                <th class="d-name">{{ 'Product Name' | T }}</th>
-                                <th class="target_type">{{ 'Event Name' | T }}</th>
-                                <th class="target_name" st-sort="event_quantity">{{ 'Event Quantity' | T }}</th>
-                                <th class="d-service">{{ 'Action' | T }}</th>
-                            </tr>
-                        </thead>
-                        <tbody ng-hide="queryEvent.loading">
-                            <tr ng-repeat="item in displayedCollection">
-                                <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
-                                <td>{{ item.product_verbose_name | T }}</td>
-                                <td>{{ item.event_verbose_name | T}}</td>
-                                <td>{{ item.event_quantity }}</td>
-                                <td>
-                                    <a ng-click="queryEvent.detail(item)">{{'View Detail' | T}}</a>
-                                </td>
-                            </tr>
-                            <tr ng-if="displayedCollection.length == 0">
-                                <td style="height: 48px;" colspan="5" class="text-center">{{ 'No related event information' | T }}</td>
-                            </tr>
-                        </tbody>
-                        <!-- <tfoot>
-                            <tr>
-                                <td class="text-center" st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)" colspan="6"></td>
-                            </tr>
-                        </tfoot> -->
-                    </table>
-                </div>
-                <div style="text-align: center" ng-show="queryEvent.loading"><img src="app/images/loading.gif"></div>
-                <div class="table-pagination">
-                    <div class="pagination-detail"></div>
-                    <div class="pull-left">
-                        <label style="color:#9c9fa3;">
-                            &nbsp;&nbsp;&nbsp;{{'Every page displays'|T}}&nbsp;
-                            <select style="border-radius:4px; margin-top:-5px;" ng-model="pageSize" ng-options="item for item in [10,25,50,100]">
-                            </select>
-                            &nbsp;{{'entries'|T}}
-                        </label>
-                    </div>
-                    <div class="pagination" st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)"></div>
+</div>
+<div class="col-md-12 graph ng-scope">
+    <div class="graph-container" discover-monitoring="queryEvent.eventWidget" style="height: 220px"></div>
+</div>
+<div class="col-md-12">
+    <div class="widget">
+        <div class="table-container" st-table="displayedCollection" st-safe-src="queryEvent.eventList">
+            <div class="table-responsive table-content" style="width: 100%;">
+                <table class="table table-striped table-hover">
+                    <thead>
+                    <tr>
+                        <th class="d-num">No.</th>
+                        <th class="d-name">{{ 'Product Name' | T }}</th>
+                        <th class="target_type">{{ 'Event Name' | T }}</th>
+                        <th class="target_name" st-sort="event_quantity">{{ 'Event Quantity' | T }}</th>
+                        <th class="d-service">{{ 'Action' | T }}</th>
+                    </tr>
+                    </thead>
+                    <tbody ng-hide="queryEvent.loading">
+                    <tr ng-repeat="item in displayedCollection">
+                        <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
+                        <td>{{ item.product_verbose_name | T }}</td>
+                        <td>{{ item.event_verbose_name | T}}</td>
+                        <td>{{ item.event_quantity }}</td>
+                        <td>
+                            <a ng-click="queryEvent.detail(item)">{{'View Detail' | T}}</a>
+                        </td>
+                    </tr>
+                    <tr ng-if="displayedCollection.length == 0">
+                        <td style="height: 48px;" colspan="5" class="text-center">{{ 'No related event information' | T
+                            }}
+                        </td>
+                    </tr>
+                    </tbody>
+                    <!-- <tfoot>
+                        <tr>
+                            <td class="text-center" st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)" colspan="6"></td>
+                        </tr>
+                    </tfoot> -->
+                </table>
+            </div>
+            <div style="text-align: center" ng-show="queryEvent.loading"><img src="app/images/loading.gif"></div>
+            <div class="table-pagination">
+                <div class="pagination-detail"></div>
+                <div class="pull-left">
+                    <label style="color:#9c9fa3;">
+                        &nbsp;&nbsp;&nbsp;{{'Every page displays' | T}}&nbsp;
+                        <select style="border-radius:4px; margin-top:-5px;" ng-model="pageSize"
+                                ng-options="item for item in [10,25,50,100]">
+                        </select>
+                        &nbsp;{{'entries' | T}}
+                    </label>
                 </div>
+                <div class="pagination" st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5"
+                     st-page-change="onPageChange(newPage)"></div>
             </div>
-            <!-- <div style="text-align: center" ng-if="queryEvent.loading"><img src="app/images/loading.gif"></div> -->
+            <br>
         </div>
+        <!-- <div style="text-align: center" ng-if="queryEvent.loading"><img src="app/images/loading.gif"></div> -->
     </div>
 </div>
 
Index: /branches/amp_3_7/extensions/monitoring/webui/monitoring.service.js
===================================================================
--- /branches/amp_3_7/extensions/monitoring/webui/monitoring.service.js	(revision 2477)
+++ /branches/amp_3_7/extensions/monitoring/webui/monitoring.service.js	(working copy)
@@ -15,6 +15,7 @@
                 getVirtualService: getVirtualService,
                 getRealService: getRealService,
                 getVirtualSite: getVirtualSite,
+                getLLBLinks: getLLBLinks,
             };
 
             function getDeviceList() {
@@ -118,6 +119,30 @@
                                 "device_ip": device_ip
                             })
                         })
+                    }
+                    deferred.resolve(serverList);
+                });
+                return deferred.promise;
+            }
+            function getLLBLinks(device_ip) {
+                let deferred = $q.defer();
+                let payload = {
+                    "action": "get_threshold_stats",
+                    "query": {
+                        "serviceType": "LLB",
+                        "device_ip": device_ip
+                    }
+                }
+                dashboardService.composer_query(payload).then(function (res) {
+                    var serverList = []
+                    if (res && res.status === 200) {
+                        _.each(res.data.results[0].series, function (series) {
+                            serverList.push({
+                                "name": series.tags.linkName,
+                                "origin_type": "LLB",
+                                "device_ip": device_ip
+                            })
+                        })
                     }
                     deferred.resolve(serverList);
                 });
Index: /branches/amp_3_7/extensions/monitoring/webui/reporting/reporting.html
===================================================================
--- /branches/amp_3_7/extensions/monitoring/webui/reporting/reporting.html	(revision 2477)
+++ /branches/amp_3_7/extensions/monitoring/webui/reporting/reporting.html	(working copy)
@@ -2,19 +2,22 @@
     <div class="col-md-12">
         <ul class="nav nav-tabs">
             <li role="presentation" ng-class="{ active: url_contain('/monitoring/reporting/gen_reportings') }">
-                <a ui-sref="index.monitoring.reporting.gen_reportings">{{'Report Browse'|T}}</a>
+                <a ui-sref="index.monitoring.reporting.gen_reportings"><span
+                        class="tab-header">{{'Report Browse' | T}}</span></a>
             </li>
             <li role="presentation" ng-class="{ active: url_contain('/monitoring/reporting/cron_reportings') }">
-                <a ui-sref="index.monitoring.reporting.cron_reportings">{{'Report Tasks'|T}}</a>
+                <a ui-sref="index.monitoring.reporting.cron_reportings"><span
+                        class="tab-header">{{'Report Tasks' | T}}</span></a>
             </li>
             <li role="presentation" ng-class="{ active: url_contain('/monitoring/reporting/setup_reportings') }">
-                <a ui-sref="index.monitoring.reporting.setup_reportings">{{'Report Customization'|T}}</a>
+                <a ui-sref="index.monitoring.reporting.setup_reportings"><span
+                        class="tab-header">{{'Report Customization' | T}}</span></a>
             </li>
         </ul>
     </div>
-</div>
-<div class="content-wrapper">
-    <div class="" ng-show="url_contain('/monitoring/reporting/gen_reportings')" ui-view="gen_reportings"></div>
-    <div class="" ng-show="url_contain('/monitoring/reporting/cron_reportings')" ui-view="cron_reportings"></div>
-    <div class="" ng-show="url_contain('/monitoring/reporting/setup_reportings')" ui-view="setup_reportings"></div>
+    <div class="content-wrapper">
+        <div class="" ng-show="url_contain('/monitoring/reporting/gen_reportings')" ui-view="gen_reportings"></div>
+        <div class="" ng-show="url_contain('/monitoring/reporting/cron_reportings')" ui-view="cron_reportings"></div>
+        <div class="" ng-show="url_contain('/monitoring/reporting/setup_reportings')" ui-view="setup_reportings"></div>
+    </div>
 </div>
Index: /branches/amp_3_7/extensions/monitoring/webui/reporting/tabs/cron_reportings/cron_reporting-add.html
===================================================================
--- /branches/amp_3_7/extensions/monitoring/webui/reporting/tabs/cron_reportings/cron_reporting-add.html	(revision 2477)
+++ /branches/amp_3_7/extensions/monitoring/webui/reporting/tabs/cron_reportings/cron_reporting-add.html	(working copy)
@@ -1,8 +1,8 @@
 <div>
     <div class="modal-header">
         <button type="button" class="close" ng-click="reportAdd.modalClose()">&times;</button>
-        <h4 class="modal-title" ng-if="reportAdd.id == 0">{{'Add Report Task'|T}}</h4>
-        <h4 class="modal-title" ng-if="reportAdd.id != 0">{{'Edit Report Task'|T}}</h4>
+        <h6 class="modal-title" ng-if="reportAdd.id == 0">{{'Add Report Task'|T}}</h6>
+        <h6 class="modal-title" ng-if="reportAdd.id != 0">{{'Edit Report Task'|T}}</h6>
     </div>
     <div class="modal-body">
         <form class="form-horizontal" name="reportAddForm" verify-scope="tipStyle: 1">
Index: /branches/amp_3_7/extensions/monitoring/webui/reporting/tabs/cron_reportings/cron_reportings.controller.js
===================================================================
--- /branches/amp_3_7/extensions/monitoring/webui/reporting/tabs/cron_reportings/cron_reportings.controller.js	(revision 2477)
+++ /branches/amp_3_7/extensions/monitoring/webui/reporting/tabs/cron_reportings/cron_reportings.controller.js	(working copy)
@@ -381,13 +381,16 @@
                                             serviceList.push(...resp)
                                             monitoringService.getRealService(host.ip).then(function (resp) {
                                                 serviceList.push(...resp)
-                                                _.each(serviceList, function (data) {
-                                                    if (data.name == service_name) {
-                                                        modalViewModel.subject = JSON.stringify(data);
-                                                    }
-                                                });
-                                                modalViewModel.subjectList = serviceList;
-                                                modalViewModel.loadingSubject = false;
+                                                monitoringService.getLLBLinks(host.ip).then(function (llbLinks) {
+                                                    serviceList.push(...llbLinks)
+                                                    _.each(serviceList, function (data) {
+                                                        if (data.name == service_name) {
+                                                            modalViewModel.subject = JSON.stringify(data);
+                                                        }
+                                                    });
+                                                    modalViewModel.subjectList = serviceList;
+                                                    modalViewModel.loadingSubject = false;
+                                                })
                                             })
                                         });
                                     } else if (host.general_type == 'vpn') {
@@ -502,8 +505,11 @@
                             serviceList.push(...res)
                             monitoringService.getRealService(host.ip).then(function (res) {
                                 serviceList.push(...res)
-                                modalViewModel.subjectList = serviceList;
-                                modalViewModel.loadingSubject = false;
+                                monitoringService.getLLBLinks(host.ip).then(function (llbLinks) {
+                                    serviceList.push(...llbLinks)
+                                    modalViewModel.subjectList = serviceList;
+                                    modalViewModel.loadingSubject = false;
+                                })
                             })
                         });
                     } else if (device_type_info.VPN_TYPE_LIST.indexOf(host.type.toLowerCase()) != -1) {
@@ -549,7 +555,6 @@
                         to_str = "now";
                     }
                 } else {
-                    //构建时间条件
                     var from = new Date();
                     var to = new Date();
 
Index: /branches/amp_3_7/extensions/monitoring/webui/reporting/tabs/cron_reportings/cron_reportings.html
===================================================================
--- /branches/amp_3_7/extensions/monitoring/webui/reporting/tabs/cron_reportings/cron_reportings.html	(revision 2477)
+++ /branches/amp_3_7/extensions/monitoring/webui/reporting/tabs/cron_reportings/cron_reportings.html	(working copy)
@@ -1,115 +1,129 @@
-<div class="container-fluid">
-    <div class="row">
-        <rd-widget>
-            <!-- <rd-widget-header title="{{'Report Task'|T}}">
-            </rd-widget-header> -->
-            <div class="table-toolbar">
-                <div class="">
-                    <div class="btn-group">
-                        <button title="{{'Refresh'|T}}" class="btn btn-link hive_enable_active" ng-click="cronReporting.refresh()">
-                            <i class="fa fa-refresh"></i>
-                        </button>
-                        <button title="{{'Add'|T}}" class="btn btn-link" ng-click="cronReporting.showReportingAddModal()">
-                            <i class="fa fa-plus-circle"></i>
-                        </button>
-                        <button title="{{'Clear'|T}}" class="btn btn-link" ng-click="cronReporting.clear()">
-                            <i class="fa fa-trash"></i>
-                        </button>
-                    </div>
+<div class="col-md-12">
+    <rd-widget>
+        <div class="table-toolbar">
+            <div class="">
+                <div class="btn-group">
+                    <button title="{{'Refresh'|T}}" class="btn btn-link hive_enable_active"
+                            ng-click="cronReporting.refresh()">
+                        <i class="fa fa-refresh an-tab-icon"></i>
+                    </button>
+                    <button title="{{'Add'|T}}" class="btn btn-link" ng-click="cronReporting.showReportingAddModal()">
+                        <i class="fa fa-plus-circle an-tab-icon"></i>
+                    </button>
+                    <button title="{{'Clear'|T}}" class="btn btn-link" ng-click="cronReporting.clear()">
+                        <i class="fa fa-trash an-tab-icon"></i>
+                    </button>
                 </div>
-                <div class="btn-group pull-right"></div>
             </div>
-            <div class="table-container" st-table="displayedCollection" st-safe-src="cronReporting.settingInfoList">
-                <div class="table-responsive table-content">
-                    <table class="table table-striped table-hover">
-                        <thead>
-                            <tr>
-                                <th st-sort="name">{{ 'Task Name' | T }}</th>
-                                <th st-sort="subject_type">{{ 'Subject Type' | T }}</th>
-                                <th st-sort="subject_name">{{ 'Subject Name' | T }}</th>
-                                <th>{{ 'Spec' | T }}</th>
-                                <!-- <th class="d-enable">{{ 'Notify' | T }}</th> -->
-                                <th>{{ 'Status' | T }}</th>
-                                <th>{{ 'Next Run Time' | T }}</th>
-                                <th>{{ 'Notification' | T }}</th>
-                                <th>{{ 'Action' | T }}</th>
-                            </tr>
-                            <tr>
-                                <th><input st-search="name" placeholder="{{'Search by Name'|T}}" class="input-sm form-control" type="search" /></th>
-                                <th>
-                                    <select class="input-sm form-control" st-input-event="change" st-search="subject_type">
-                                        <option value="">{{'All'|T}}</option>
-                                        <option value='device_patrol'>{{'Device Patrol'|T}}</option>
-                                        <option value='automatic_diagnose'>{{'Automatic Diagnose'|T}}</option>
-                                        <option value="device_status">{{'Device Status'|T}}</option>
-                                        <option value="service_status">{{'Service Status'|T}}</option>
-                                    </select>
-                                </th>
-                                <th><input st-search="subject_name" placeholder="{{'Search by Subject Name'|T}}" class="input-sm form-control" type="search" /></th>
-                                <th></th>
-                                <th></th>
-                                <th></th>
-                                <th></th>
-                                <th></th>
-                            </tr>
-                        </thead>
-                        <tbody ng-hide="cronReporting.loading">
-                            <tr ng-repeat="item in displayedCollection">
-                                <td>{{ item.name }}</td>
-                                <td>{{ item.typeVerbose | T}}</td>
-                                <td ng-if="item.subject_type == 'device_patrol'||item.subject_type == 'automatic_diagnose'">
-                                   {{ item.subject_name }}
-                                </td>
-                                <td ng-if="item.subject_type != 'device_patrol'&&item.subject_type != 'automatic_diagnose'" style="cursor: pointer;" ng-click="cronReporting.subjectDetail(item)">
-                                    <a class="name">{{ item.subject_name }}</a>
-                                </td>
-                                <td>{{ item.spec }}</td>
-                                <td>
-                                    <i ng-if="item.status===0" style="color:#8e8e8e;" class="fa fa-pause-circle"></i>
-                                    <span ng-if="item.status===0" style="color:#8e8e8e">{{'Paused'|T}}</span>
+            <div class="btn-group pull-right"></div>
+        </div>
+        <div class="table-container" st-table="displayedCollection" st-safe-src="cronReporting.settingInfoList">
+            <div class="table-responsive table-content">
+                <table class="table table-striped table-hover">
+                    <thead>
+                    <tr>
+                        <th st-sort="name">{{ 'Task Name' | T }}</th>
+                        <th st-sort="subject_type">{{ 'Subject Type' | T }}</th>
+                        <th st-sort="subject_name">{{ 'Subject Name' | T }}</th>
+                        <th>{{ 'Spec' | T }}</th>
+                        <!-- <th class="d-enable">{{ 'Notify' | T }}</th> -->
+                        <th>{{ 'Status' | T }}</th>
+                        <th>{{ 'Next Run Time' | T }}</th>
+                        <th>{{ 'Notification' | T }}</th>
+                        <th>{{ 'Action' | T }}</th>
+                    </tr>
+                    <tr>
+                        <th><input st-search="name" placeholder="{{'Search by Name'|T}}" class="input-sm form-control"
+                                   type="search"/></th>
+                        <th>
+                            <select class="input-sm form-control" st-input-event="change" st-search="subject_type">
+                                <option value="">{{'All' | T}}</option>
+                                <option value='device_patrol'>{{'Device Patrol' | T}}</option>
+                                <option value='automatic_diagnose'>{{'Automatic Diagnose' | T}}</option>
+                                <option value="device_status">{{'Device Status' | T}}</option>
+                                <option value="service_status">{{'Service Status' | T}}</option>
+                            </select>
+                        </th>
+                        <th><input st-search="subject_name" placeholder="{{'Search by Subject Name'|T}}"
+                                   class="input-sm form-control" type="search"/></th>
+                        <th></th>
+                        <th></th>
+                        <th></th>
+                        <th></th>
+                        <th></th>
+                    </tr>
+                    </thead>
+                    <tbody ng-hide="cronReporting.loading">
+                    <tr ng-repeat="item in displayedCollection">
+                        <td>{{ item.name }}</td>
+                        <td>{{ item.typeVerbose | T}}</td>
+                        <td ng-if="item.subject_type == 'device_patrol'||item.subject_type == 'automatic_diagnose'">
+                            {{ item.subject_name }}
+                        </td>
+                        <td ng-if="item.subject_type != 'device_patrol'&&item.subject_type != 'automatic_diagnose'"
+                            style="cursor: pointer;" ng-click="cronReporting.subjectDetail(item)">
+                            <a class="name">{{ item.subject_name }}</a>
+                        </td>
+                        <td>{{ item.spec }}</td>
+                        <td>
+                            <i ng-if="item.status===0" style="color:#8e8e8e;" class="fa fa-pause-circle an-row-icon"></i>
+                            <span ng-if="item.status===0" style="color:#8e8e8e">{{'Paused' | T}}</span>
 
-                                    <i ng-if="item.status===1" style="color:#5cb85c;" class="fa fa-check-circle"></i>
-                                    <span ng-if="item.status===1" style="color:#5cb85c">{{'Running'|T}}</span>
+                            <i ng-if="item.status===1" style="color:#5cb85c;" class="fa fa-check-circle an-row-icon"></i>
+                            <span ng-if="item.status===1" style="color:#5cb85c">{{'Running' | T}}</span>
 
-                                    <i ng-if="item.status===2" style="color:#5cb85c;" class="fa fa-check-circle"></i>
-                                    <span ng-if="item.status===2" style="color:#5cb85c">{{'Ready'|T}}</span>
-                                </td>
-                                <td>{{ item.next_run_time_text}}</td>
-                                <td>
-                                    <i ng-if="item.notifications.length==0" style="color:#8e8e8e;" class="fa fa-envelope" title="{{'Notification Disabled'|T}}"></i>
-                                    <i ng-if="item.notifications.length!=0" style="color:#5cb85c;" class="fa fa-envelope" title="{{'Notification Enabled'|T}}"></i>
-                                </td>
-                                <td>
-                                    <a title="{{'Continuing'|T}}" ng-if="item.status === 0" ng-click="cronReporting.continue(item)" class="text-explode"><i class="fa fa-play"></i></a>
-                                    <a title="{{'Pausing'|T}}" ng-if="item.status === 1" ng-click="cronReporting.pause(item)" class="text-explode"><i class="fa fa-pause"></i></a>
-                                    <a title="{{'Executing'|T}}" ng-if="item.status === 2" ng-click="cronReporting.execute(item)" class="text-explode"><i class="fa fa-step-forward"></i></a>
-                                    <a title="{{'Edit'|T}}" ng-click="cronReporting.edit(item)" class="text-explode"><i class="fa fa-pencil"></i></a>
-                                    <a title="{{'Delete'|T}}" ng-click="cronReporting.delete(item)" class="text-explode"><i class="fa fa-times-circle"></i></a>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-                <div style="text-align: center" ng-show="cronReporting.loading"><img src="app/images/loading.gif"></div>
-                <div class="table-pagination">
-                    <div class="pagination-detail"></div>
-                    <div class="pull-left">
-                        <label style="color:#9c9fa3;">
-                            &nbsp;&nbsp;&nbsp;{{'Every page displays'|T}}&nbsp;
-                            <select style="border-radius:4px; margin-top:-5px;" ng-model="pageSize" ng-options="item for item in [15,25,50,100]">
-                            </select>
-                            &nbsp;{{'entries'|T}}
-                        </label>
-                    </div>
-                    <div class="pagination" st-pagination="" st-items-by-page="pageSize"></div>
+                            <i ng-if="item.status===2" style="color:#5cb85c;" class="fa fa-check-circle an-row-icon"></i>
+                            <span ng-if="item.status===2" style="color:#5cb85c">{{'Ready' | T}}</span>
+                        </td>
+                        <td>{{ item.next_run_time_text}}</td>
+                        <td>
+                            <i ng-if="item.notifications.length==0" style="color:#8e8e8e;" class="fa fa-envelope an-row-icon"
+                               title="{{'Notification Disabled'|T}}"></i>
+                            <i ng-if="item.notifications.length!=0" style="color:#5cb85c;" class="fa fa-envelope an-row-icon"
+                               title="{{'Notification Enabled'|T}}"></i>
+                        </td>
+                        <td>
+                            <a title="{{'Continuing'|T}}" ng-if="item.status === 0"
+                               ng-click="cronReporting.continue(item)" class="text-explode"><i
+                                    class="fa fa-play an-row-icon"></i></a>&nbsp;&nbsp;
+                            <a title="{{'Pausing'|T}}" ng-if="item.status === 1" ng-click="cronReporting.pause(item)"
+                               class="text-explode"><i class="fa fa-pause an-row-icon"></i></a>&nbsp;&nbsp;
+                            <a title="{{'Executing'|T}}" ng-if="item.status === 2"
+                               ng-click="cronReporting.execute(item)" class="text-explode"><i
+                                    class="fa fa-step-forward an-row-icon"></i></a>&nbsp;&nbsp;
+                            <a title="{{'Edit'|T}}" ng-click="cronReporting.edit(item)" class="text-explode"><i
+                                    class="fa fa-pencil an-row-icon"></i></a>&nbsp;&nbsp;
+                            <a title="{{'Delete'|T}}" ng-click="cronReporting.delete(item)" class="text-explode"><i
+                                    class="fa fa-times-circle an-row-icon"></i></a>
+                        </td>
+                    </tr>
+                    <tr ng-if="displayedCollection.length === 0">
+                        <td colspan="8" class="text-center">No matching records found.</td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div style="text-align: center" ng-show="cronReporting.loading"><img src="app/images/loading.gif"></div>
+            <div class="table-pagination">
+                <div class="pagination-detail"></div>
+                <div class="pull-left">
+                    <label style="color:#9c9fa3;">
+                        &nbsp;&nbsp;&nbsp;{{'Every page displays' | T}}&nbsp;
+                        <select style="border-radius:4px; margin-top:-5px;" ng-model="pageSize"
+                                ng-options="item for item in [15,25,50,100]">
+                        </select>
+                        &nbsp;{{'entries' | T}}
+                    </label>
                 </div>
+                <div class="pagination" st-pagination="" st-items-by-page="pageSize"></div>
             </div>
-        </rd-widget>
-    </div>
+            <br>
+        </div>
+    </rd-widget>
 </div>
 
 <style>
     .text-explode {
-        margin: 0px 3px !important;
+        margin: 0 3px !important;
     }
-</style>
\ No newline at end of file
+</style>
Index: /branches/amp_3_7/extensions/monitoring/webui/reporting/tabs/gen_reportings/gen_reporting-detail.html
===================================================================
--- /branches/amp_3_7/extensions/monitoring/webui/reporting/tabs/gen_reportings/gen_reporting-detail.html	(revision 2477)
+++ /branches/amp_3_7/extensions/monitoring/webui/reporting/tabs/gen_reportings/gen_reporting-detail.html	(working copy)
@@ -1,7 +1,7 @@
 <div>
     <div class="modal-header">
         <button type="button" class="close" ng-click="reportDetail.modalClose()">&times;</button>
-        <h4 class="modal-title">{{'Report Detail'|T}}</h4>
+        <h6 class="modal-title">{{'Report Detail'|T}}</h6>
     </div>
     <div class="modal-body">
         <div>
Index: /branches/amp_3_7/extensions/monitoring/webui/reporting/tabs/gen_reportings/gen_reportings.html
===================================================================
--- /branches/amp_3_7/extensions/monitoring/webui/reporting/tabs/gen_reportings/gen_reportings.html	(revision 2477)
+++ /branches/amp_3_7/extensions/monitoring/webui/reporting/tabs/gen_reportings/gen_reportings.html	(working copy)
@@ -1,98 +1,112 @@
-<div class="container-fluid">
-    <div class="row">
-        <rd-widget>
-            <!-- <rd-widget-header title="{{'Report Browse'|T}}">
-            </rd-widget-header> -->
-            <div class="table-toolbar">
-                <div class="">
-                    <div class="btn-group">
-                        <button title="{{'Refresh'|T}}" class="btn btn-link hive_enable_active" ng-click="reporting.refresh()">
-                            <i class="fa fa-refresh"></i>
-                        </button>
-                        <button title="{{'Clear'|T}}" class="btn btn-link" ng-click="reporting.clear()">
-                            <i class="fa fa-trash"></i>
-                        </button>
-                    </div>
+<div class="col-md-12">
+    <rd-widget>
+        <div class="table-toolbar">
+            <div class="">
+                <div class="btn-group">
+                    <button title="{{'Refresh'|T}}" class="btn btn-link hive_enable_active"
+                            ng-click="reporting.refresh()">
+                        <i class="fa fa-refresh an-tab-icon"></i>
+                    </button>
+                    <button title="{{'Clear'|T}}" class="btn btn-link" ng-click="reporting.clear()">
+                        <i class="fa fa-trash an-tab-icon"></i>
+                    </button>
                 </div>
-                <div class="btn-group pull-right"></div>
             </div>
-            <div class="table-container" st-table="reporting.dataList" st-pipe="reporting.pipeServer">
-                <div class="table-responsive table-content">
-                    <table class="table table-striped table-hover">
-                        <thead>
-                            <tr>
-                                <th>{{ 'Create Time' | T }}</th>
-                                <th st-sort="name">{{ 'Task Name' | T }}</th>
-                                <th st-sort="subject_name">{{ 'Subject Name' | T }}</th>
-                                <th>{{ 'Status' | T }}</th>
-                                <th>{{ 'Time Cost' | T }}</th>
-                                <th>{{ 'Action' | T }}</th>
-                            </tr>
-                            <tr>
-                                <th></th>
-                                <th><input st-search="name" placeholder="{{'Search by Name'|T}}" class="input-sm form-control" type="search" /></th>
-                                <!-- <th>
-                                    <select class="input-sm form-control" st-input-event="change" st-search="name">
-                                        <option value="">{{'All'|T}}</option>
-                                        <option ng-repeat="item in reporting.taskList" value="{{item}}">{{ item }}</option>
-                                    </select>
-                                </th> -->
-                                <th><input st-search="subject_name" placeholder="{{'Search by Subject Name'|T}}" class="input-sm form-control" type="search" /></th>
-                                <th>
-                                    <select class="input-sm form-control" st-input-event="change" st-search="status">
-                                        <option value="">{{'All'|T}}</option>
-                                        <option value=1>{{'Running'|T}}</option>
-                                        <option value=2>{{'Finished'|T}}</option>
-                                        <option value=0>{{'Failed'|T}}</option>
-                                    </select>
-                                </th>
-                                <th></th>
-                                <th></th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr ng-show="reporting.loading">
-                                <td colspan="6" class="text-center"><img src="app/images/loading-h2.gif"></td>
-                            </tr>
-                            <tr ng-repeat="item in reporting.dataList">
-                                <td>{{ item.time_text }}</td>
-                                <td>{{ item.name }}</td>
-                                <td>{{ item.subject_name }}</td>
-                                <td>
-                                    <span title="{{'Failed'|T}}" ng-if="item.status == 0"><i class="fa fa-times" style="color:#D30000;"></i></span>
-                                    <span title="{{'Running'|T}}" ng-if="item.status == 1"><i class="fa fa-spinner fa-spin" style="color:#e4701d;"></i></span>
-                                    <span title="{{'Finished'|T}}" ng-if="item.status == 2"><i class="fa fa-check-square" style="color: green;"></i></span>
-                                    <span title="{{'Cancel'|T}}" ng-if="item.status == 3"><i class="fa fa-minus-square" style="color: grey;"></i></span>
-                                </td>
-                                <td>{{ item.total_time}}</td>
-                                <td>
-                                    <a title="{{'Delete'|T}}" ng-if="item.status != 1" ng-click="reporting.delete(item)" class="text-explode"><i class="fa fa-times-circle"></i></a>
-                                    <a title="{{'Download'|T}}" ng-if="item.status == 2" ng-click="reporting.download(item)" class="text-explode"><i class="fa fa-download"></i></a>
-                                    <a title="{{'Detail'|T}}" ng-if="item.status != 1" ng-click="reporting.detail(item)" class="text-explode"><i class="fa fa-info-circle"></i></a>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-                <div class="table-pagination">
-                    <div class="pagination-detail"></div>
-                    <div class="pull-left">
-                        <label style="color:#9c9fa3;">
-                            &nbsp;&nbsp;&nbsp;{{'Every page displays'|T}}&nbsp;
-                            <select style="border-radius:4px; margin-top:-5px;" ng-model="pageSize" ng-options="item for item in [15,25,50,100]">
+            <div class="btn-group pull-right"></div>
+        </div>
+        <div class="table-container" st-table="reporting.dataList" st-pipe="reporting.pipeServer">
+            <div class="table-responsive table-content">
+                <table class="table table-striped table-hover">
+                    <thead>
+                    <tr>
+                        <th>{{ 'Create Time' | T }}</th>
+                        <th st-sort="name">{{ 'Task Name' | T }}</th>
+                        <th st-sort="subject_name">{{ 'Subject Name' | T }}</th>
+                        <th>{{ 'Status' | T }}</th>
+                        <th>{{ 'Time Cost' | T }}</th>
+                        <th>{{ 'Action' | T }}</th>
+                    </tr>
+                    <tr>
+                        <th></th>
+                        <th><input st-search="name" placeholder="{{'Search by Name'|T}}" class="input-sm form-control"
+                                   type="search"/></th>
+                        <!-- <th>
+                            <select class="input-sm form-control" st-input-event="change" st-search="name">
+                                <option value="">{{'All'|T}}</option>
+                                <option ng-repeat="item in reporting.taskList" value="{{item}}">{{ item }}</option>
+                            </select>
+                        </th> -->
+                        <th><input st-search="subject_name" placeholder="{{'Search by Subject Name'|T}}"
+                                   class="input-sm form-control" type="search"/></th>
+                        <th>
+                            <select class="input-sm form-control" st-input-event="change" st-search="status">
+                                <option value="">{{'All' | T}}</option>
+                                <option value=1>{{'Running' | T}}</option>
+                                <option value=2>{{'Finished' | T}}</option>
+                                <option value=0>{{'Failed' | T}}</option>
                             </select>
-                            &nbsp;{{'entries'|T}}
-                        </label>
-                    </div>
-                    <div class="pagination" st-pagination="" st-items-by-page="pageSize"></div>
+                        </th>
+                        <th></th>
+                        <th></th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr ng-show="reporting.loading">
+                        <td colspan="6" class="text-center"><img src="app/images/loading-h2.gif"></td>
+                    </tr>
+                    <tr ng-repeat="item in reporting.dataList">
+                        <td>{{ item.time_text }}</td>
+                        <td>{{ item.name }}</td>
+                        <td>{{ item.subject_name }}</td>
+                        <td>
+                            <span title="{{'Failed'|T}}" ng-if="item.status == 0"><i class="fa fa-times an-row-icon"
+                                                                                     style="color:#D30000;"></i></span>
+                            <span title="{{'Running'|T}}" ng-if="item.status == 1"><i
+                                    class="fa fa-spinner fa-spin an-row-icon"
+                                    style="color:#e4701d;"></i></span>
+                            <span title="{{'Finished'|T}}" ng-if="item.status == 2"><i
+                                    class="fa fa-check-square an-row-icon"
+                                    style="color: green;"></i></span>
+                            <span title="{{'Cancel'|T}}" ng-if="item.status == 3"><i
+                                    class="fa fa-minus-square an-row-icon"
+                                    style="color: grey;"></i></span>
+                        </td>
+                        <td>{{ item.total_time}}</td>
+                        <td>
+                            <a title="{{'Delete'|T}}" ng-if="item.status != 1" ng-click="reporting.delete(item)"
+                               class="text-explode"><i class="fa fa-times-circle an-row-icon"></i></a>
+                            <a title="{{'Download'|T}}" ng-if="item.status == 2" ng-click="reporting.download(item)"
+                               class="text-explode"><i class="fa fa-download an-row-icon"></i></a>
+                            <a title="{{'Detail'|T}}" ng-if="item.status != 1" ng-click="reporting.detail(item)"
+                               class="text-explode"><i class="fa fa-info-circle an-row-icon"></i></a>
+                        </td>
+                    </tr>
+                    <tr ng-if="reporting.dataList.length === 0">
+                        <td colspan="6" class="text-center">No matching records found.</td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div class="table-pagination">
+                <div class="pagination-detail"></div>
+                <div class="pull-left">
+                    <label style="color:#9c9fa3;">
+                        &nbsp;&nbsp;&nbsp;{{'Every page displays' | T}}&nbsp;
+                        <select style="border-radius:4px; margin-top:-5px;" ng-model="pageSize"
+                                ng-options="item for item in [15,25,50,100]">
+                        </select>
+                        &nbsp;{{'entries' | T}}
+                    </label>
                 </div>
+                <div class="pagination" st-pagination="" st-items-by-page="pageSize"></div>
             </div>
-        </rd-widget>
-    </div>
+            <br>
+        </div>
+    </rd-widget>
 </div>
 
 <style>
     .text-explode {
-        margin: 0px 3px !important;
+        margin: 0 3px !important;
     }
 </style>
\ No newline at end of file
Index: /branches/amp_3_7/extensions/monitoring/webui/reporting/tabs/setup_reportings/setup_reportings.html
===================================================================
--- /branches/amp_3_7/extensions/monitoring/webui/reporting/tabs/setup_reportings/setup_reportings.html	(revision 2477)
+++ /branches/amp_3_7/extensions/monitoring/webui/reporting/tabs/setup_reportings/setup_reportings.html	(working copy)
@@ -1,23 +1,27 @@
-<div class="row">
-    <div class="col-md-12">
-        <form class="form-horizontal">
-            <div class="form-group">
-                <label class="col-md-3 control-label">{{'Logo'|T}}</label>
-                <div class="col-md-3">
-                    <img style="height:50px" ng-src="{{setupReporting.img_src}}">
-                </div>
+<div class="col-md-12">
+    <form class="form-horizontal">
+        <div class="form-group">
+            <label class="col-md-3 control-label">{{'Logo' | T}}</label>
+            <div class="col-md-3">
+                <img style="height:50px" ng-src="{{setupReporting.img_src}}">
             </div>
-            <div class="form-group">
-                <div class="col-md-offset-3 col-md-6">
-                    <div>
-                        <div class="file-box">
-                            <button ng-disabled="!allow_config" class="btn btn-primary" style="width: 135px;">{{'Update Logo'|T}}</button>
-                            <button type="reset" class="btn btn-primary" ng-click="setupReporting.reset()">{{'Reset'|T}}</button>
-                            <input ng-show="allow_config" type="file" accept="image/x-png" id="uploadfield" class="file form-control" nv-file-select uploader="setupReporting.image_uploader" style="margin-top: -35px; width: 135px; opacity: 0">
-                        </div>
+        </div>
+        <br>
+        <div class="form-group">
+            <div class="col-md-offset-3 col-md-6">
+                <div>
+                    <div class="file-box">
+                        <button ng-disabled="!allow_config" class="btn btn-primary" style="width: 135px;">
+                            {{'Update Logo' | T}}
+                        </button>
+                        <button type="reset" class="btn btn-primary" ng-click="setupReporting.reset()">{{'Reset' | T}}
+                        </button>
+                        <input ng-show="allow_config" type="file" accept="image/x-png" id="uploadfield"
+                               class="file form-control" nv-file-select uploader="setupReporting.image_uploader"
+                               style="margin-top: -35px; width: 135px; opacity: 0">
                     </div>
                 </div>
             </div>
-        </form>
-    </div>
+        </div>
+    </form>
 </div>
Index: /branches/amp_3_7/extensions/monitoring/webui/resource/device/detail.html
===================================================================
--- /branches/amp_3_7/extensions/monitoring/webui/resource/device/detail.html	(revision 2477)
+++ /branches/amp_3_7/extensions/monitoring/webui/resource/device/detail.html	(working copy)
@@ -1,194 +1,86 @@
-<div ncy-breadcrumb></div>
 <div class="ag-session-list">
-    <div class="row ng-scope">
+    <div class="row">
+        <div ncy-breadcrumb></div>
         <div class="col-md-12">
             <div class="pull-left">
                 <a ui-sref="index.device.detail({name:current_device_name})" ng-click="monitorDeviceDetail.setDetail()">
                     <div class="btn btn-primary">{{'Managed Device' | T}}</div>
                 </a>
                 <div class="btn btn-default" ng-click="exportPDF()"><span class="fa fa-file-pdf-o"></span></div>
-                <div class="btn btn-default" ng-click="monitorDeviceDetail.refresh()"><span class="fa fa-refresh"></span></div>
+                <div class="btn btn-default" ng-click="monitorDeviceDetail.refresh()"><span
+                        class="fa fa-refresh"></span></div>
             </div>
-            <!-- <div class="pull-right">
-                <time-picker condition="timeCondition"></time-picker>
-            </div> -->
             <div class="pull-right">
                 <composer-timeselector widgets="widgets"></composer-timeselector>
             </div>
         </div>
-    </div>
-    <div class="row ng-scope" ng-if="monitorDeviceDetail.detail">
-        <div class="col-md-12">
+        <div class="col-md-12" ng-if="monitorDeviceDetail.detail">
             <div ng-if="!monitorDeviceDetail.detail.connection">
-                <span>{{'Device is disconnected'|T}}</span>
+                <span>{{'Device is disconnected' | T}}</span>
             </div>
             <div ng-if="monitorDeviceDetail.detail.connection">
                 <div ng-if="!monitorDeviceDetail.snmp_enable">
-                    <span>{{'Device monitoring is not turned on, Click'|T}} <a ng-click="monitorDeviceDetail.enableSNMP()" class="ng-binding">{{'here'|T}}</a> {{'to open monitor' | T}}</span>
+                    <span>{{'Device monitoring is not turned on, Click' | T}} <a
+                            ng-click="monitorDeviceDetail.enableSNMP()"
+                            class="ng-binding">{{'here' | T}}</a> {{'to open monitor' | T}}</span>
                 </div>
                 <div ng-if="monitorDeviceDetail.snmp_enable">
                     <div class="" style="margin-bottom:15px">
                         <div class="tab-wrapper">
                             <ul class="nav nav-tabs">
-                                <li ng-repeat="tab in monitorDeviceDetail.tabs" ng-class="{'active': monitorDeviceDetail.tab == tab.name}" ng-click="changeTab(tab.name)" class="ng-scope"><a>{{tab.name | T}}</a></li>
+                                <li ng-repeat="tab in monitorDeviceDetail.tabs"
+                                    ng-class="{'active': monitorDeviceDetail.tab == tab.name}"
+                                    ng-click="changeTab(tab.name)" class="ng-scope tab-header"><a>{{tab.name | T}}</a>
+                                </li>
                             </ul>
                         </div>
                     </div>
-                    <div class="" ng-if="monitorDeviceDetail.tab == 'Basic Monitoring'">
-                        <div class="row ng-scope">
-                            <div class="col-sm-4 graph graph-hover" ng-repeat="widget in widgets">
-                                <div class="graph-title">
-                                    <i class="fa fa-{{ widget.icon }}"></i>
-                                    <span title="{{widget.description|T}}">{{widget.verbose_name|T}}</span>
-                                    <!-- <div class="hover-btn">
-                                        <button ng-click="monitorDeviceDetail.setAlert(widget)"><span>{{'Set Alert'|T}}</span></button>
-                                        <button ng-click="monitorDeviceDetail.popup(widget)"><span>{{'Popup'|T}}</span></button>
-                                    </div> -->
-                                    <div class="hover-btn">
-                                        <button class="btn btn-link" title="{{'Alert'|T}}" ng-click="monitorDeviceDetail.setAlert(widget)" style="padding: 3px;"><i class="fa fa-bell" style="margin-right: 0"></i></button>
-                                        <button class="btn btn-link" title="{{'Zoom In Preview'|T}}" ng-click="monitorDeviceDetail.popup(widget)" style="padding: 3px;"><i class="fa fa-search-plus" style="margin-right: 0"></i></button>
-                                    </div>
-                                    <button ng-if="monitorDeviceDetail.checkVersion(widget.support_version)" class="btn btn-link"><i class="fa fa-exclamation-triangle" style="color:#f79520;" data-role="popover" data-popover-mode="hover" data-popover-position="right" data-popover-text="{{monitorDeviceDetail.versionText(widget.support_version)}}" data-popover-background="bg-cyan" data-popover-color="fg-white"></i></button>
+                    <div ng-if="monitorDeviceDetail.tab == 'Basic Monitoring'">
+
+                        <div class="col-sm-4 graph graph-hover" ng-repeat="widget in widgets">
+                            <div class="graph-title">
+                                <i class="fa fa-{{ widget.icon }}"></i>
+                                <span title="{{widget.description|T}}"
+                                      class="tab-header-1">{{widget.verbose_name | T}}</span>
+                                <div class="hover-btn">
+                                    <button class="btn btn-link" title="{{'Alert'|T}}"
+                                            ng-click="monitorDeviceDetail.setAlert(widget)" style="padding: 3px;"><i
+                                            class="fa fa-bell" style="margin-right: 0"></i></button>
+                                    <button class="btn btn-link" title="{{'Zoom In Preview'|T}}"
+                                            ng-click="monitorDeviceDetail.popup(widget)" style="padding: 3px;"><i
+                                            class="fa fa-search-plus" style="margin-right: 0"></i></button>
                                 </div>
-                                <div class="graph-container" composer-widget widget="widget"></div>
+                                <button ng-if="monitorDeviceDetail.checkVersion(widget.support_version)"
+                                        class="btn btn-link"><i class="fa fa-exclamation-triangle"
+                                                                style="color:#f79520;" data-role="popover"
+                                                                data-popover-mode="hover"
+                                                                data-popover-position="right"
+                                                                data-popover-text="{{monitorDeviceDetail.versionText(widget.support_version)}}"
+                                                                data-popover-background="bg-cyan"
+                                                                data-popover-color="fg-white"></i></button>
                             </div>
+                            <div class="graph-container" composer-widget widget="widget"></div>
                         </div>
+
                     </div>
-                    <div class="" ng-if="monitorDeviceDetail.tab == 'Audit Monitoring'">
-                        <div class="row ng-scope">
-                            <div class="col-sm-4 graph graph-hover" ng-repeat="widget in widgets">
-                                <div class="graph-title">
-                                    <i class="fa fa-{{ widget.icon }}"></i>
-                                    <span title="{{widget.description|T}}">{{widget.verbose_name|T}}</span>
-                                    <!-- <div class="hover-btn">
-                                        <button ng-click="monitorDeviceDetail.setAlert(widget)"><span>{{'Set Alert'|T}}</span></button>
-                                        <button ng-click="monitorDeviceDetail.popup(widget)"><span>{{'Popup'|T}}</span></button>
-                                    </div> -->
-                                    <div class="hover-btn">
-                                        <button class="btn btn-link" title="{{'Alert'|T}}" ng-click="monitorDeviceDetail.setAlert(widget)" style="padding: 3px;"><i class="fa fa-bell" style="margin-right: 0"></i></button>
-                                        <button class="btn btn-link" title="{{'Zoom In Preview'|T}}" ng-click="monitorDeviceDetail.popup(widget)" style="padding: 3px;"><i class="fa fa-search-plus" style="margin-right: 0"></i></button>
-                                    </div>
+                    <div ng-if="monitorDeviceDetail.tab == 'Audit Monitoring'">
+                        <div class="col-sm-4 graph graph-hover" ng-repeat="widget in widgets">
+                            <div class="graph-title">
+                                <i class="fa fa-{{ widget.icon }}"></i>
+                                <span title="{{widget.description|T}}"
+                                      class="tab-header-1">{{widget.verbose_name | T}}</span>
+                                <div class="hover-btn">
+                                    <button class="btn btn-link" title="{{'Alert'|T}}"
+                                            ng-click="monitorDeviceDetail.setAlert(widget)" style="padding: 3px;"><i
+                                            class="fa fa-bell" style="margin-right: 0"></i></button>
+                                    <button class="btn btn-link" title="{{'Zoom In Preview'|T}}"
+                                            ng-click="monitorDeviceDetail.popup(widget)" style="padding: 3px;"><i
+                                            class="fa fa-search-plus" style="margin-right: 0"></i></button>
                                 </div>
-                                <div class="graph-container" composer-widget widget="widget"></div>
                             </div>
+                            <div class="graph-container" composer-widget widget="widget"></div>
                         </div>
                     </div>
-                    <!-- <div class="" ng-if="monitorDeviceDetail.tab == 'Services List'">
-                        <div class="row ng-scope">
-                            <div class="col-md-12">
-                                <div class="widget">
-                                    <div class="widget-header">
-                                        <span>{{ 'Services' | T }}</span>
-                                    </div>
-                                    <div class="table-wrapper" ng-if="monitorDeviceDetail.generalType == 'adc'">
-                                        <table st-table="displayedCollection" st-safe-src="monitorDeviceDetail.serviceList" class="table table-hover">
-                                            <thead>
-                                                <tr>
-                                                    <th class="d-name">{{ 'Service Name' | T }}</th>
-                                                    <th class="d-type">{{ 'Service Type' | T }}</th>
-                                                    <th class="d-type">{{ 'IP' | T }}</th>
-                                                    <th class="d-type">{{ 'Status' | T }}</th>
-                                                    <th class="d-type">{{ 'Received' | T }}</th>
-                                                    <th class="d-type">{{ 'Sent' | T }}</th>
-                                                    <th class="d-type">{{ 'Connections' | T }}</th>
-                                                </tr>
-                                                <tr>
-                                                    <th>
-                                                        <input st-search="name" placeholder="{{'Search by Service Name'|T}}" class="input-sm form-control" type="text" />
-                                                    </th>
-                                                    <th>
-                                                        <input st-search="service_type" placeholder="{{'Search by Service Type'|T}}" class="input-sm form-control" type="text" />
-                                                    </th>
-                                                    <th>
-                                                        <input st-search="vip" placeholder="{{'Search by IP'|T}}" class="input-sm form-control" type="text" />
-                                                    </th>
-                                                    <th></th>
-                                                    <th></th>
-                                                    <th></th>
-                                                    <th></th>
-                                                </tr>
-                                            </thead>
-                                            <tbody>
-                                                <tr ng-repeat="item in displayedCollection">
-                                                    <td>
-                                                        <a ui-sref="index.monitoring.list.slb_service.detail({name: item.name, origin_type: item.origin_type, device_ip: item.device_ip})" class="name"> {{ item.name }}</a>
-                                                    </td>
-                                                    <td>{{ item.service_type }}</td>
-                                                    <td>{{ item.vip }}</td>
-                                                    <td>
-                                                        <div ng-show="item.enable">
-                                                            <i style="color:#5cb85c" class="fa fa-check-circle"></i>
-                                                        </div>
-                                                        <div ng-hide="item.enable">
-                                                            <i style="color:rgb(255, 140, 0)" class="fa fa-times-circle"></i>
-                                                        </div>
-                                                    </td>
-                                                    <td><span class="label label-default">{{item.graph_data.InBytePerSec }}</span></td>
-                                                    <td><span class="label label-default">{{item.graph_data.OutBytePerSec }}</span></td>
-                                                    <td>{{ item.graph_data.ConnPerSec }}</td>
-                                                </tr>
-                                            </tbody>
-                                            <tfoot>
-                                                <tr>
-                                                    <td colspan="6" class="text-center">
-                                                        <div st-pagination="" st-items-by-page="20" st-displayed-pages="5"></div>
-                                                    </td>
-                                                </tr>
-                                            </tfoot>
-                                        </table>
-                                    </div>
-                                    <div class="table-wrapper" ng-if="monitorDeviceDetail.generalType == 'vpn'">
-                                        <table st-table="displayedCollection" st-safe-src="monitorDeviceDetail.serviceList" class="table table-hover">
-                                            <thead>
-                                                <tr>
-                                                    <th class="d-num">No.</th>
-                                                    <th class="d-name">{{ 'Service Name' | T }}</th>
-                                                    <th class="d-type">{{ 'Service Type' | T }}</th>
-                                                    <th class="d-type">{{ 'Client Received' | T }}</th>
-                                                    <th class="d-type">{{ 'Client Sent' | T }}</th>
-                                                    <th class="d-type">{{ 'Server Received' | T }}</th>
-                                                    <th class="d-type">{{ 'Server Sent' | T }}</th>
-                                                </tr>
-                                                <tr>
-                                                    <th></th>
-                                                    <th>
-                                                        <input st-search="name" placeholder="{{'Search by Service Name'|T}}" class="input-sm form-control" type="text" />
-                                                    </th>
-                                                    <th>
-                                                        <input st-search="service_type" placeholder="{{'Search by Service Type'|T}}" class="input-sm form-control" type="text" />
-                                                    </th>
-                                                    <th></th>
-                                                    <th></th>
-                                                    <th></th>
-                                                    <th></th>
-                                                </tr>
-                                            </thead>
-                                            <tbody>
-                                                <tr ng-repeat="item in displayedCollection">
-                                                    <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
-                                                    <td>
-                                                        <a ui-sref="index.monitoring.list.sslvpn_service.detail({name: item.name, origin_type: item.origin_type, device_ip: item.device_ip})" class="name"> {{ item.name }}</a>
-                                                    </td>
-                                                    <td>{{ item.service_type }}</td>
-                                                    <td><span class="label label-default">{{item.graph_data.ClientBytesIn }}</span></td>
-                                                    <td><span class="label label-default">{{item.graph_data.ClientBytesOut }}</span></td>
-                                                    <td><span class="label label-default">{{item.graph_data.ServerBytesIn }}</span></td>
-                                                    <td><span class="label label-default">{{item.graph_data.ServerBytesOut }}</span></td>
-                                                </tr>
-                                            </tbody>
-                                            <tfoot>
-                                                <tr>
-                                                    <td colspan="6" class="text-center">
-                                                        <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)"></div>
-                                                    </td>
-                                                </tr>
-                                            </tfoot>
-                                        </table>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div> -->
                 </div>
             </div>
         </div>
Index: /branches/amp_3_7/extensions/monitoring/webui/resource/device/device.html
===================================================================
--- /branches/amp_3_7/extensions/monitoring/webui/resource/device/device.html	(revision 2477)
+++ /branches/amp_3_7/extensions/monitoring/webui/resource/device/device.html	(working copy)
@@ -1,135 +1,161 @@
-<div class="row">
-    <div class="col-md-12">
-        <div class="widget">
-            <div class="table-toolbar">
-                <div class="btn-group">
-                    <button class="btn btn-link" title="{{ 'Refresh Device List' | T }}" ng-click="monitorDevice.refresh()"><i class="fa fa-refresh"></i></button>
-                </div>
-                <div class="pull-right task-dropdown">
-                    <div style="margin-right:15px" ng-dropdown-multiselect="" checkboxes="true" translation-texts="multiSelectTransition" options="multiSelectData" selected-model="multiSelectModel" extra-settings="multiSelectSettings" events="multiSelectEvents">
-                    </div>
-                </div>
+<div class="col-md-12">
+    <div class="widget">
+        <div class="table-toolbar">
+            <div class="btn-group">
+                <button class="btn btn-link" title="{{ 'Refresh Device List' | T }}" ng-click="monitorDevice.refresh()">
+                    <i class="fa fa-refresh an-tab-icon"></i></button>
             </div>
-            <div class="table-container" st-table="displayedCollection" st-safe-src="monitorDevice.deviceList">
-                <div class="table-responsive table-content">
-                    <table class="table table-striped table-hover">
-                        <thead>
-                            <tr>
-                                <th>No.</th>
-                                <th>{{ 'Device Name' | T }}</th>
-                                <th>{{ 'Device Group' | T }}</th>
-                                <th>{{ 'Device Type' | T }}</th>
-                                <th>{{ 'IP' | T }}</th>
-                                <th>{{ 'Monitor Status' | T }}</th>
-                                <th st-sort="graph_data.cpu_usage" ng-if="cpu_selected">{{ 'CPU Usage' | T }}</th>
-                                <th st-sort="graph_data.mem_usage" ng-if="mem_selected">{{ 'System Memory Usage' | T }}</th>
-                                <th st-sort="graph_data.net_mem_usage" ng-if="net_mem_selected">{{ 'Network Memory Usage' | T }}</th>
-                                <th st-sort="graph_data.connections" ng-if="connection_selected">{{ 'Connections Per Second' | T }}</th>
-                                <th st-sort="graph_data.received" ng-if="received_selected">{{ 'Received' | T }}</th>
-                                <th st-sort="graph_data.sent" ng-if="sent_selected">{{ 'Sent' | T }}</th>
-                                <th ng-if="up_time_selected">{{ 'System Up Time' | T }}</th>
-                                <th ng-if="boot_time_selected">{{ 'System Boot Time' | T }}</th>
-                                <th ng-if="version_selected">{{ 'Build Version' | T }}</th>
-                            </tr>
-                            <tr>
-                                <th></th>
-                                <th><input st-search="name" placeholder="{{'Search by Name'|T}}" class="input-sm form-control" type="text" /></th>
-                                <th>
-                                    <select class="input-sm form-control" st-input-event="change" st-search="device_group">
-                                        <option value="">{{'All'|T}}</option>
-                                        <option ng-repeat="row in monitorDevice.deviceList | unique:'device_group'" value="{{row.device_group}}">{{row.device_group}}</option>
-                                    </select>
-                                </th>
-                                <th>
-                                    <select class="input-sm form-control" st-input-event="change" st-search="type">
-                                        <option value="">{{'All'|T}}</option>
-                                        <option ng-repeat="row in monitorDevice.deviceList | unique:'type'" value="{{row.type}}">{{row.type}}</option>
-                                    </select>
-                                </th>
-                                <th><input st-search="ip" placeholder="{{'Search by IP'|T}}" class="input-sm form-control" type="text" /></th>
-                                <th></th>
-                                <th ng-if="cpu_selected"></th>
-                                <th ng-if="mem_selected"></th>
-                                <th ng-if="net_mem_selected"></th>
-                                <th ng-if="connection_selected"></th>
-                                <th ng-if="received_selected"></th>
-                                <th ng-if="sent_selected"></th>
-                                <th ng-if="up_time_selected"></th>
-                                <th ng-if="boot_time_selected"></th>
-                                <th ng-if="version_selected"></th>
-                            </tr>
-                        </thead>
-                        <tbody ng-hide="monitorDevice.loading">
-                            <tr ng-repeat="item in displayedCollection">
-                                <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
-                                <td style="cursor: pointer;" ui-sref="index.monitoring.resource.device.detail({name: item.name, type: item.type, id: item.id})"><a class="name">{{ item.name }}</a></td>
-                                <td>{{ item.device_group }}</td>
-                                <td>{{ item.type }}</td>
-                                <td>{{ item.ip }}</td>
-                                <td>
-                                    <div ng-show="item.snmp_general.snmp_enable && item.connection">
-                                        <i style="color:#5cb85c" class="fa fa-check-circle"></i>
-                                    </div>
-                                    <div ng-hide="item.snmp_general.snmp_enable && item.connection">
-                                        <i style="color:#e02f44" class="fa fa-times-circle"></i>
-                                    </div>
-                                </td>
-                                <td ng-if="cpu_selected">
-                                    <div class="progress" title="{{monitorDevice.getformatData(item.graph_data.cpu_usage)}}">
-                                        <div class="progress-bar progress-bar-info" ng-style="monitorDevice.getPercent(item.graph_data.cpu_usage)">
-                                            <span>{{ monitorDevice.getformatData(item.graph_data.cpu_usage) }}</span>
-                                        </div>
-                                    </div>
-                                </td>
-                                <td ng-if="mem_selected">
-                                    <div class="progress" title="{{monitorDevice.getformatData(item.graph_data.mem_usage)}}">
-                                        <div class="progress-bar progress-bar-info" ng-style="monitorDevice.getPercent(item.graph_data.mem_usage)">
-                                            <span>{{ monitorDevice.getformatData(item.graph_data.mem_usage) }}</span>
-                                        </div>
-                                    </div>
-                                </td>
-                                <td ng-if="net_mem_selected">
-                                    <div class="progress" title="{{monitorDevice.getformatData(item.graph_data.net_mem_usage)}}">
-                                        <div class="progress-bar progress-bar-info" ng-style="monitorDevice.getPercent(item.graph_data.net_mem_usage)">
-                                            <span>{{ monitorDevice.getformatData(item.graph_data.net_mem_usage) }}</span>
-                                        </div>
-                                    </div>
-                                </td>
-                                <td ng-if="connection_selected">
-                                    <span>{{item.graph_data.connections}}</span>
-                                </td>
-                                <td ng-if="received_selected">
-                                    <span class="label label-default">{{monitorDevice.formatTraffic(item.graph_data.received) }}</span>
-                                </td>
-                                <td ng-if="sent_selected">
-                                    <span class="label label-default">{{monitorDevice.formatTraffic(item.graph_data.sent) }}
-                                    </span>
-                                </td>
-                                <td ng-if="up_time_selected">{{ item.system_up_time }}</td>
-                                <td ng-if="boot_time_selected">{{ item.system_boot_time }}</td>
-                                <td ng-if="version_selected">{{ item.build_version }}</td>
-                            </tr>
-                            <tr ng-if="displayedCollection.length == 0">
-                                <td style="height: 48px;" colspan="{{monitorDevice.gridColSpan}}" class="text-center">{{ 'You do not have any device information.' | T }}</td>
-                            </tr>
-                        </tbody>
-                    </table>
+            <div class="pull-right task-dropdown">
+                <div style="margin-right:15px" ng-dropdown-multiselect="" checkboxes="true"
+                     translation-texts="multiSelectTransition" options="multiSelectData"
+                     selected-model="multiSelectModel" extra-settings="multiSelectSettings" events="multiSelectEvents">
                 </div>
-                <div style="text-align: center" ng-show="monitorDevice.loading"><img src="app/images/loading.gif"></div>
-                <div class="table-pagination">
-                    <div class="pagination-detail"></div>
-                    <div class="pull-left">
-                        <label style="color:#9c9fa3;">
-                            &nbsp;&nbsp;&nbsp;{{'Every page displays'|T}}&nbsp;
-                            <select style="border-radius:4px; margin-top:-5px;" ng-model="pageSize" ng-options="item for item in [15,25,50,100]">
+            </div>
+        </div>
+        <div class="table-container" st-table="displayedCollection" st-safe-src="monitorDevice.deviceList">
+            <div class="table-responsive table-content" style="width: 100%;">
+                <table class="table table-striped table-hover">
+                    <thead>
+                    <tr>
+                        <th>No.</th>
+                        <th>{{ 'Device Name' | T }}</th>
+                        <th>{{ 'Device Group' | T }}</th>
+                        <th>{{ 'Device Type' | T }}</th>
+                        <th>{{ 'IP' | T }}</th>
+                        <th>{{ 'Monitor Status' | T }}</th>
+                        <th st-sort="graph_data.cpu_usage" ng-if="cpu_selected">{{ 'CPU Usage' | T }}</th>
+                        <th st-sort="graph_data.mem_usage" ng-if="mem_selected">{{ 'System Memory Usage' | T }}</th>
+                        <th st-sort="graph_data.net_mem_usage" ng-if="net_mem_selected">{{ 'Network Memory Usage' | T
+                            }}
+                        </th>
+                        <th st-sort="graph_data.connections" ng-if="connection_selected">{{ 'Connections Per Second' | T
+                            }}
+                        </th>
+                        <th st-sort="graph_data.received" ng-if="received_selected">{{ 'Received' | T }}</th>
+                        <th st-sort="graph_data.sent" ng-if="sent_selected">{{ 'Sent' | T }}</th>
+                        <th ng-if="up_time_selected">{{ 'System Up Time' | T }}</th>
+                        <th ng-if="boot_time_selected">{{ 'System Boot Time' | T }}</th>
+                        <th ng-if="version_selected">{{ 'Build Version' | T }}</th>
+                    </tr>
+                    <tr>
+                        <th></th>
+                        <th><input st-search="name" placeholder="{{'Search by Name'|T}}" class="input-sm form-control"
+                                   type="text"/></th>
+                        <th>
+                            <select class="input-sm form-control" st-input-event="change" st-search="device_group">
+                                <option value="">{{'All' | T}}</option>
+                                <option ng-repeat="row in monitorDevice.deviceList | unique:'device_group'"
+                                        value="{{row.device_group}}">{{row.device_group}}
+                                </option>
+                            </select>
+                        </th>
+                        <th>
+                            <select class="input-sm form-control" st-input-event="change" st-search="type">
+                                <option value="">{{'All' | T}}</option>
+                                <option ng-repeat="row in monitorDevice.deviceList | unique:'type'"
+                                        value="{{row.type}}">{{row.type}}
+                                </option>
                             </select>
-                            &nbsp;{{'entries'|T}}
-                        </label>
-                    </div>
-                    <div class="pagination" st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)"></div>
+                        </th>
+                        <th><input st-search="ip" placeholder="{{'Search by IP'|T}}" class="input-sm form-control"
+                                   type="text"/></th>
+                        <th></th>
+                        <th ng-if="cpu_selected"></th>
+                        <th ng-if="mem_selected"></th>
+                        <th ng-if="net_mem_selected"></th>
+                        <th ng-if="connection_selected"></th>
+                        <th ng-if="received_selected"></th>
+                        <th ng-if="sent_selected"></th>
+                        <th ng-if="up_time_selected"></th>
+                        <th ng-if="boot_time_selected"></th>
+                        <th ng-if="version_selected"></th>
+                    </tr>
+                    </thead>
+                    <tbody ng-hide="monitorDevice.loading">
+                    <tr ng-repeat="item in displayedCollection">
+                        <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
+                        <td style="cursor: pointer;"
+                            ui-sref="index.monitoring.resource.device.detail({name: item.name, type: item.type, id: item.id})">
+                            <a class="name">{{ item.name }}</a></td>
+                        <td>{{ item.device_group }}</td>
+                        <td>{{ item.type }}</td>
+                        <td>{{ item.ip }}</td>
+                        <td>
+                            <div ng-show="item.snmp_general.snmp_enable && item.connection">
+                                <i style="color:#5cb85c" class="fa fa-check-circle"></i>
+                            </div>
+                            <div ng-hide="item.snmp_general.snmp_enable && item.connection">
+                                <i style="color:#e02f44" class="fa fa-times-circle"></i>
+                            </div>
+                        </td>
+                        <td ng-if="cpu_selected">
+                            <div class="progress" title="{{monitorDevice.getformatData(item.graph_data.cpu_usage)}}">
+                                <div class="progress-bar progress-bar-info"
+                                     ng-style="monitorDevice.getPercent(item.graph_data.cpu_usage)">
+                                    <span>{{ monitorDevice.getformatData(item.graph_data.cpu_usage) }}</span>
+                                </div>
+                            </div>
+                        </td>
+                        <td ng-if="mem_selected">
+                            <div class="progress" title="{{monitorDevice.getformatData(item.graph_data.mem_usage)}}">
+                                <div class="progress-bar progress-bar-info"
+                                     ng-style="monitorDevice.getPercent(item.graph_data.mem_usage)">
+                                    <span>{{ monitorDevice.getformatData(item.graph_data.mem_usage) }}</span>
+                                </div>
+                            </div>
+                        </td>
+                        <td ng-if="net_mem_selected">
+                            <div class="progress"
+                                 title="{{monitorDevice.getformatData(item.graph_data.net_mem_usage)}}">
+                                <div class="progress-bar progress-bar-info"
+                                     ng-style="monitorDevice.getPercent(item.graph_data.net_mem_usage)">
+                                    <span>{{ monitorDevice.getformatData(item.graph_data.net_mem_usage) }}</span>
+                                </div>
+                            </div>
+                        </td>
+                        <td ng-if="connection_selected">
+                            <span>{{item.graph_data.connections}}</span>
+                        </td>
+                        <td ng-if="received_selected">
+                            <span class="label label-default">{{monitorDevice.formatTraffic(item.graph_data.received)
+                                }}</span>
+                        </td>
+                        <td ng-if="sent_selected">
+                                    <span class="label label-default">{{monitorDevice.formatTraffic(item.graph_data.sent)
+                                        }}
+                                    </span>
+                        </td>
+                        <td ng-if="up_time_selected">{{ item.system_up_time }}</td>
+                        <td ng-if="boot_time_selected">{{ item.system_boot_time }}</td>
+                        <td ng-if="version_selected">{{ item.build_version }}</td>
+                    </tr>
+                    <tr ng-if="displayedCollection.length == 0">
+                        <td style="height: 48px;" colspan="{{monitorDevice.gridColSpan}}" class="text-center">
+                            {{ 'You do not have any device information.' | T }}
+                        </td>
+                    </tr>
+                    <tr ng-if="displayedCollection.length === 0">
+                        <td colspan="15" class="text-center">No matching records found.</td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div style="text-align: center" ng-show="monitorDevice.loading"><img src="app/images/loading.gif"></div>
+            <div class="table-pagination">
+                <div class="pagination-detail"></div>
+                <div class="pull-left">
+                    <label style="color:#9c9fa3;">
+                        &nbsp;&nbsp;&nbsp;{{'Every page displays' | T}}&nbsp;
+                        <select style="border-radius:4px; margin-top:-5px;" ng-model="pageSize"
+                                ng-options="item for item in [15,25,50,100]">
+                        </select>
+                        &nbsp;{{'entries' | T}}
+                    </label>
                 </div>
+                <div class="pagination" st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5"
+                     st-page-change="onPageChange(newPage)"></div>
             </div>
-            <!-- <div style="text-align: center" ng-if="monitorDevice.loading"><img src="app/images/loading.gif"></div> -->
+            <br>
         </div>
     </div>
 </div>
Index: /branches/amp_3_7/extensions/monitoring/webui/resource/llb/llb.html
===================================================================
--- /branches/amp_3_7/extensions/monitoring/webui/resource/llb/llb.html	(revision 2477)
+++ /branches/amp_3_7/extensions/monitoring/webui/resource/llb/llb.html	(working copy)
@@ -1,12 +1,11 @@
-<div class="row">
-    <div class="col-md-12">
-        <div class="widget box-shadow" style="padding: 5px 0">
-            <div class="boxshadow-body">
-                <div class="col-md-4">
-                    <div class="col-md-7">
-                        <div style="float: left;">
-                            <h6><span class="demonstration"> {{'Throughput'|T}}</span></h6>
-                            <h4><span class="title-nub" style="cursor: pointer;">{{monitorLLB.throughput}}</span>
+<div class="col-md-12">
+    <div class="widget box-shadow" style="padding: 5px 0">
+        <div class="boxshadow-body">
+            <div class="col-md-4">
+                <div class="col-md-7">
+                    <div style="float: left;">
+                        <h6><span class="demonstration"> {{'Throughput' | T}}</span></h6>
+                        <h4><span class="title-nub" style="cursor: pointer;">{{monitorLLB.throughput}}</span>
                             <span style="font-size: small;">
                                 <i class="fa fa-arrow-down fa-1" style="color: rgb(54, 205, 64);"></i>
                                 <span class="title-nub" style="cursor: pointer;">{{monitorLLB.totalReceived}}</span>
@@ -14,137 +13,137 @@
                                 <i class="fa fa-arrow-up fa-1" style="color: rgb(64, 158, 255);"></i>
                                 <span class="title-nub" style="cursor: pointer;">{{monitorLLB.totalSent}}</span>
                             </span>
-                            </h4>
-                        </div>
+                        </h4>
                     </div>
-                    <div class="col-md-5">
-                        <div class="info-icon">
-                            <img src="./app//images/icon-c.png" width="65px">
-                        </div>
-                    </div>
-                </div>
-                <div class="col-md-4">
-                    <div class="col-md-7">
-                        <div style="float: left;">
-                            <h6><span class="demonstration"> {{'Concurrent Connections'|T}}</span></h6>
-                            <h4><span class="title-nub"
-                                      style="cursor: pointer;">{{monitorLLB.concurrentConnections}}</span></h4>
-                        </div>
-                    </div>
-                    <div class="col-md-5">
-                        <div class="info-icon">
-                            <img src="./app//images/icon-e.png" width="50px">
-                        </div>
-                    </div>
-                </div>
-                <div class="col-md-4">
-                    <div class="col-md-7">
-                        <div>
-                            <h6><span class="demonstration">{{'Total Hits'|T}}</span></h6>
-                            <h4><span class="title-nub" style="cursor: pointer;">{{monitorLLB.totalHits}}</span></h4>
-                        </div>
-                    </div>
-                    <div class="col-md-5">
-                        <div class="info-icon">
-                            <img src="./app//images/icon-f.png" width="85px">
-                        </div>
+                </div>
+                <div class="col-md-5">
+                    <div class="info-icon">
+                        <img src="./app//images/icon-c.png" width="65px">
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-4">
+                <div class="col-md-7">
+                    <div style="float: left;">
+                        <h6><span class="demonstration"> {{'Concurrent Connections' | T}}</span></h6>
+                        <h4><span class="title-nub"
+                                  style="cursor: pointer;">{{monitorLLB.concurrentConnections}}</span></h4>
+                    </div>
+                </div>
+                <div class="col-md-5">
+                    <div class="info-icon">
+                        <img src="./app//images/icon-e.png" width="50px">
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-4">
+                <div class="col-md-7">
+                    <div>
+                        <h6><span class="demonstration">{{'Total Hits' | T}}</span></h6>
+                        <h4><span class="title-nub" style="cursor: pointer;">{{monitorLLB.totalHits}}</span></h4>
+                    </div>
+                </div>
+                <div class="col-md-5">
+                    <div class="info-icon">
+                        <img src="./app//images/icon-f.png" width="85px">
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </div>
-
-<div class="row">
-    <div class="col-md-12">
-        <div class="widget">
-            <div class="table-toolbar">
-                <div class="btn-group">
-                    <button class="btn btn-link" title="{{ 'Refresh Service List' | T }}"
-                            ng-click="monitorLLB.refresh()"><i class="fa fa-refresh"></i></button>
-                </div>
-            </div>
-            <div class="table-container" st-table="displayedCollection" st-safe-src="monitorLLB.llbList">
-                <div class="table-responsive table-content">
-                    <table class="table table-striped table-hover">
-                        <thead>
-                        <tr>
-                            <th>No.</th>
-                            <th>{{ 'Name' | T }}</th>
-                            <th>{{ 'Gateway IP' | T }}</th>
-                            <th>{{ 'Device IP' | T }}</th>
-                            <th>{{ 'Status' | T }}</th>
-                            <th>{{ 'Bandwidth Usage' | T }}</th>
-                            <th>{{ 'Throughput' | T }}</th>
-                            <th>{{ 'Connections & Hits' | T }}</th>
-                        </tr>
-                        <tr>
-                            <th></th>
-                            <th>
-                                <input st-search="linkName" placeholder="{{'Search by Link Name'|T}}"
-                                       class="input-sm form-control" type="text"/>
-                            </th>
-                            <th>
-                                <input st-search="linkGateway" placeholder="{{'Search by Gateway IP'|T}}"
-                                       class="input-sm form-control" type="text"/>
-                            </th>
-                            <th>
-                                <input st-search="deviceIp" placeholder="{{'Search by Device IP'|T}}"
-                                       class="input-sm form-control" type="text"/>
-                            </th>
-                            <th>
-                                <select class="input-sm form-control" st-input-event="change" st-search="linkStatus">
-                                    <option value="">{{'All'|T}}</option>
-                                    <option ng-repeat="row in monitorLLB.llbList | unique:'linkStatus'"
-                                            value="{{row.linkStatus}}">{{row.linkStatus}}
-                                    </option>
-                                </select>
-                            </th>
-                            <th></th>
-                            <th></th>
-                            <th></th>
-                        </tr>
-                        </thead>
-                        <tbody ng-hide="monitorLLB.loading">
-                        <tr ng-repeat="item in displayedCollection">
-                            <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
-                            <td style="cursor: pointer;"><a ui-sref="index.monitoring.resource.llb.detail({linkName: item.linkName, deviceIp: item.deviceIp, origin_type: 'llb'})" class="name">{{ item.linkName }}</a></td>
-                            <td>{{ item.linkGateway }}</td>
-                            <td>{{ item.deviceIp }}</td>
-                            <td>{{ item.linkStatus }}</td>
-                            <td>Threshold: <span style="color: rgb(64, 158, 255);">{{item.linkThresh}}</span><br> Usage:
-                                <span style="color: rgb(64, 158, 255);">{{ item.linkUsage }} %</span></td>
-                            <td><i class="fa fa-arrow-down fa-1" style="color: rgb(54, 205, 64);"></i>
-                                {{item.received}}<br>
-                                <i class="fa fa-arrow-up fa-1" style="color: rgb(64, 158, 255);"></i>
-                                {{ item.sent }}</td>
-                            <td>Connections: <span style="color: rgb(64, 158, 255);">{{ item.linkConn }}</span><br>Hits:
-                                <span style="color: rgb(64, 158, 255);">{{ item.linkHits }}</span></td>
-                        </tr>
-                        <tr ng-if="displayedCollection.length == 0">
-                            <td style="height: 48px;" colspan="{{monitorLLB.gridColSpan}}"
-                                class="text-center">{{ 'You do not have any LLB information.' | T }}
-                            </td>
-                        </tr>
-                        </tbody>
-                    </table>
-                </div>
-                <div style="text-align: center" ng-show="monitorLLB.loading"><img src="app/images/loading.gif"></div>
-                <div class="table-pagination">
-                    <div class="pagination-detail"></div>
-                    <div class="pull-left">
-                        <label style="color:#9c9fa3;">
-                            &nbsp;&nbsp;&nbsp;{{'Every page displays'|T}}&nbsp;
-                            <select style="border-radius:4px; margin-top:-5px;" ng-model="pageSize"
-                                    ng-options="item for item in [15,25,50,100]">
+<div class="col-md-12">
+    <div class="widget">
+        <div class="table-toolbar">
+            <div class="btn-group">
+                <button class="btn btn-link" title="{{ 'Refresh Service List' | T }}"
+                        ng-click="monitorLLB.refresh()"><i class="fa fa-refresh"></i></button>
+            </div>
+        </div>
+        <div class="table-container" st-table="displayedCollection" st-safe-src="monitorLLB.llbList">
+            <div class="table-responsive table-content" style="width: 100%;">
+                <table class="table table-striped table-hover">
+                    <thead>
+                    <tr>
+                        <th>No.</th>
+                        <th>{{ 'Name' | T }}</th>
+                        <th>{{ 'Gateway IP' | T }}</th>
+                        <th>{{ 'Device IP' | T }}</th>
+                        <th>{{ 'Status' | T }}</th>
+                        <th>{{ 'Bandwidth Usage' | T }}</th>
+                        <th>{{ 'Throughput' | T }}</th>
+                        <th>{{ 'Connections & Hits' | T }}</th>
+                    </tr>
+                    <tr>
+                        <th></th>
+                        <th>
+                            <input st-search="linkName" placeholder="{{'Search by Link Name'|T}}"
+                                   class="input-sm form-control" type="text"/>
+                        </th>
+                        <th>
+                            <input st-search="linkGateway" placeholder="{{'Search by Gateway IP'|T}}"
+                                   class="input-sm form-control" type="text"/>
+                        </th>
+                        <th>
+                            <input st-search="deviceIp" placeholder="{{'Search by Device IP'|T}}"
+                                   class="input-sm form-control" type="text"/>
+                        </th>
+                        <th>
+                            <select class="input-sm form-control" st-input-event="change" st-search="linkStatus">
+                                <option value="">{{'All' | T}}</option>
+                                <option ng-repeat="row in monitorLLB.llbList | unique:'linkStatus'"
+                                        value="{{row.linkStatus}}">{{row.linkStatus}}
+                                </option>
                             </select>
-                            &nbsp;{{'entries'|T}}
-                        </label>
-                    </div>
-                    <div class="pagination" st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5"
-                         st-page-change="onPageChange(newPage)"></div>
+                        </th>
+                        <th></th>
+                        <th></th>
+                        <th></th>
+                    </tr>
+                    </thead>
+                    <tbody ng-hide="monitorLLB.loading">
+                    <tr ng-repeat="item in displayedCollection">
+                        <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
+                        <td style="cursor: pointer;"><a
+                                ui-sref="index.monitoring.resource.llb.detail({linkName: item.linkName, deviceIp: item.deviceIp, origin_type: 'llb'})"
+                                class="name">{{ item.linkName }}</a></td>
+                        <td>{{ item.linkGateway }}</td>
+                        <td>{{ item.deviceIp }}</td>
+                        <td>{{ item.linkStatus }}</td>
+                        <td>Threshold: <span style="color: rgb(64, 158, 255);">{{item.linkThresh}}</span><br> Usage:
+                            <span style="color: rgb(64, 158, 255);">{{ item.linkUsage }} %</span></td>
+                        <td><i class="fa fa-arrow-down fa-1" style="color: rgb(54, 205, 64);"></i>
+                            {{item.received}}<br>
+                            <i class="fa fa-arrow-up fa-1" style="color: rgb(64, 158, 255);"></i>
+                            {{ item.sent }}
+                        </td>
+                        <td>Connections: <span style="color: rgb(64, 158, 255);">{{ item.linkConn }}</span><br>Hits:
+                            <span style="color: rgb(64, 158, 255);">{{ item.linkHits }}</span></td>
+                    </tr>
+                    <tr ng-if="displayedCollection.length == 0">
+                        <td style="height: 48px;" colspan="8"
+                            class="text-center">{{ 'You do not have any LLB information.' | T }}
+                        </td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div style="text-align: center" ng-show="monitorLLB.loading"><img src="app/images/loading.gif"></div>
+            <div class="table-pagination">
+                <div class="pagination-detail"></div>
+                <div class="pull-left">
+                    <label style="color:#9c9fa3;">
+                        &nbsp;&nbsp;&nbsp;{{'Every page displays' | T}}&nbsp;
+                        <select style="border-radius:4px; margin-top:-5px;" ng-model="pageSize"
+                                ng-options="item for item in [15,25,50,100]">
+                        </select>
+                        &nbsp;{{'entries' | T}}
+                    </label>
                 </div>
+                <div class="pagination" st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5"
+                     st-page-change="onPageChange(newPage)"></div>
             </div>
+            <br>
         </div>
     </div>
 </div>
@@ -158,4 +157,3 @@
         content: '\25BC';
     }
 </style>
-
Index: /branches/amp_3_7/extensions/monitoring/webui/resource/llb/llb_details.html
===================================================================
--- /branches/amp_3_7/extensions/monitoring/webui/resource/llb/llb_details.html	(revision 2477)
+++ /branches/amp_3_7/extensions/monitoring/webui/resource/llb/llb_details.html	(working copy)
@@ -1,6 +1,6 @@
-<div ncy-breadcrumb></div>
 <div class="ag-session-list">
-    <div class="row ng-scope">
+    <div class="row">
+        <div ncy-breadcrumb></div>
         <div class="col-md-12">
             <div class="pull-left">
                 <div class="btn btn-default" ng-click="monitorLLBDetail.refresh()"><span class="fa fa-refresh"></span>
@@ -8,9 +8,10 @@
             </div>
             <div class="pull-right">
                 <li style="line-height: 35px; font-size: 14px; list-style: none;">
-                    <a id="timeSelector" ng-click="monitorLLBDetail.changeTimeSelection()" style="float: left; cursor: pointer">
-                    <button class="btn btn-link"><i class="fa fa-clock-o" style="font-size: 15px;"></i></button>
-                    <span id="timeSelectorTitle">{{"Time selection" | T}}</span>
+                    <a id="timeSelector" ng-click="monitorLLBDetail.changeTimeSelection()"
+                       style="float: left; cursor: pointer">
+                        <button class="btn btn-link"><i class="fa fa-clock-o" style="font-size: 15px;"></i></button>
+                        <span id="timeSelectorTitle">{{"Time selection" | T}}</span>
                     </a>
                 </li>
             </div>
@@ -20,35 +21,35 @@
                 <ul class="nav nav-tabs">
                     <li ng-repeat="tab in monitorLLBDetail.tabs"
                         ng-class="{'active': monitorLLBDetail.selTab(tab.name)}" ng-click="changeTab(tab.name)"
-                        class="ng-scope"><a>{{tab.name | T}}</a></li>
+                        class="ng-scope tab-header"><a>{{tab.name | T}}</a></li>
                 </ul>
             </div>
         </div>
         <div class="col-md-12" ng-show="monitorLLBDetail.tab == 'Basic Monitoring'">
             <div class="row ng-scope">
                 <div class="col-sm-6 graph graph-hover">
-                    <div class="graph-title">
+                    <div class="graph-title tab-header-1">
                         <i class="fa fa-"></i>
                         <span title="{{ 'Throughput' |T}}">{{'Throughput' | T}}</span>
                     </div>
                     <div id="llbThroughput" class="graph-container"></div>
                 </div>
                 <div class="col-sm-6 graph graph-hover">
-                    <div class="graph-title">
+                    <div class="graph-title tab-header-1">
                         <i class="fa fa-"></i>
                         <span title="{{ 'Bandwidth Usage' |T}}">{{'Bandwidth Usage' | T}}</span>
                     </div>
                     <div id="llbBandwidthUsage" class="graph-container"></div>
                 </div>
                 <div class="col-sm-6 graph graph-hover">
-                    <div class="graph-title">
+                    <div class="graph-title tab-header-1">
                         <i class="fa fa-"></i>
                         <span title="{{ 'Concurrent Connections' |T}}">{{'Connections' | T}}</span>
                     </div>
                     <div id="llbConnections" class="graph-container"></div>
                 </div>
                 <div class="col-sm-6 graph graph-hover">
-                    <div class="graph-title">
+                    <div class="graph-title tab-header-1">
                         <i class="fa fa-"></i>
                         <span title="{{ 'Hits Number' |T}}">{{'Hits Number' | T}}</span>
                     </div>
@@ -63,4 +64,3 @@
         </div>
     </div>
 </div>
-
Index: /branches/amp_3_7/extensions/monitoring/webui/resource/resource.html
===================================================================
--- /branches/amp_3_7/extensions/monitoring/webui/resource/resource.html	(revision 2477)
+++ /branches/amp_3_7/extensions/monitoring/webui/resource/resource.html	(working copy)
@@ -2,24 +2,26 @@
     <div class="col-md-12">
         <ul class="nav nav-tabs">
             <li role="presentation" ng-class="{ active: url_contain('/monitoring/resource/_device') }">
-                <a ui-sref="index.monitoring.resource.device">{{ 'Devices' | T }}</a>
+                <a ui-sref="index.monitoring.resource.device"><span class="tab-header">{{ 'Devices' | T }}</span></a>
             </li>
             <li role="presentation" ng-class="{ active: url_contain('/monitoring/resource/slb') }">
-                <a ui-sref="index.monitoring.resource.slb.virtual_service">{{ 'SLB Services' | T }}</a>
+                <a ui-sref="index.monitoring.resource.slb.virtual_service"><span
+                        class="tab-header">{{ 'SLB Services' | T }}</span></a>
             </li>
             <li role="presentation" ng-class="{ active: url_contain('/monitoring/resource/sslvpn') }">
-                <a ui-sref="index.monitoring.resource.sslvpn">{{ 'SSLVPN Services' | T }}</a>
+                <a ui-sref="index.monitoring.resource.sslvpn"><span class="tab-header">{{ 'SSLVPN Services' | T
+                    }}</span></a>
             </li>
             <li role="presentation" ng-class="{ active: url_contain('/monitoring/resource/llb') }">
-                <a ui-sref="index.monitoring.resource.llb">{{ 'Link Statistics' | T }}</a>
+                <a ui-sref="index.monitoring.resource.llb"><span class="tab-header">{{ 'Link Statistics' | T
+                    }}</span></a>
             </li>
         </ul>
     </div>
+    <div class="content-wrapper">
+        <div class="" ng-show="url_contain('/monitoring/resource/_device')" ui-view="device"></div>
+        <div class="" ng-show="url_contain('/monitoring/resource/slb')" ui-view="slb"></div>
+        <div class="" ng-show="url_contain('/monitoring/resource/sslvpn')" ui-view="sslvpn"></div>
+        <div class="" ng-show="url_contain('/monitoring/resource/llb')" ui-view="llb"></div>
+    </div>
 </div>
-<div class="content-wrapper">
-    <div class="" ng-show="url_contain('/monitoring/resource/_device')" ui-view="device"></div>
-    <div class="" ng-show="url_contain('/monitoring/resource/slb')" ui-view="slb"></div>
-    <div class="" ng-show="url_contain('/monitoring/resource/sslvpn')" ui-view="sslvpn"></div>
-    <div class="" ng-show="url_contain('/monitoring/resource/llb')" ui-view="llb"></div>
-</div>
-
Index: /branches/amp_3_7/extensions/monitoring/webui/resource/slb/real_service.html
===================================================================
--- /branches/amp_3_7/extensions/monitoring/webui/resource/slb/real_service.html	(revision 2477)
+++ /branches/amp_3_7/extensions/monitoring/webui/resource/slb/real_service.html	(working copy)
@@ -1,109 +1,130 @@
-<div class="row">
-    <div class="col-md-12">
-        <div class="widget">
-            <div class="table-toolbar">
-                <div class="btn-group">
-                    <button class="btn btn-link" title="{{ 'Refresh Service List' | T }}" ng-click="monitorRealService.refresh()"><i class="fa fa-refresh"></i></button>
-                </div>
-                <div class="pull-right task-dropdown">
-                    <div style="margin-right:15px" ng-dropdown-multiselect="" checkboxes="true" translation-texts="multiSelectTransition" options="multiSelectData" selected-model="multiSelectModel" extra-settings="multiSelectSettings" events="multiSelectEvents">
-                    </div>
-                </div>
+<div class="col-md-12">
+    <div class="widget">
+        <div class="table-toolbar">
+            <div class="btn-group">
+                <button class="btn btn-link" title="{{ 'Refresh Service List' | T }}"
+                        ng-click="monitorRealService.refresh()"><i class="fa fa-refresh"></i></button>
             </div>
-            <div class="table-container" st-table="displayedCollection" st-safe-src="monitorRealService.serviceList">
-                <div class="table-responsive table-content">
-                    <table class="table table-striped table-hover">
-                        <thead>
-                            <tr>
-                                <th>No.</th>
-                                <th>{{ 'Service Name' | T }}</th>
-                                <th>{{ 'Service Type' | T }}</th>
-                                <th>{{ 'IP Address' | T }}</th>
-                                <th>{{ 'Port' | T }}</th>
-                                <th st-sort="health_status">{{ 'Health Status' | T }}</th>
-                                <th>{{ 'Device Name' | T }}</th>
-                                <th>{{ 'Device Group' | T }}</th>
-                                <th ng-if="request_selected" st-sort="graph_data.request">{{ 'Outstanding Requests' | T }}</th>
-                                <th ng-if="conn_selected" st-sort="graph_data.conn">{{ 'Connections Per Second' | T }}</th>
-                                <th ng-if="received_selected" st-sort="graph_data.received">{{ 'Received' | T }}</th>
-                                <th ng-if="sent_selected" st-sort="graph_data.sent">{{ 'Sent' | T }}</th>
-                            </tr>
-                            <tr>
-                                <th></th>
-                                <th>
-                                    <input st-search="name" placeholder="{{'Search by Service Name'|T}}" class="input-sm form-control" type="text" />
-                                </th>
-                                <th></th>
-                                <th>
-                                    <input st-search="addr" placeholder="{{'Search by IP Address'|T}}" class="input-sm form-control" type="text" />
-                                </th>
-                                <th></th>
-                                <th></th>
-                                <th>
-                                    <select class="input-sm form-control" st-input-event="change" st-search="device.name">
-                                        <option value="">{{'All'|T}}</option>
-                                        <option ng-repeat="row in monitorRealService.serviceList | unique:'device.name'" value="{{row.device.name}}">{{row.device.name}}</option>
-                                    </select>
-                                </th>
-                                <th>
-                                    <select class="input-sm form-control" st-input-event="change" st-search="device.device_group">
-                                        <option value="">{{'All'|T}}</option>
-                                        <option ng-repeat="row in monitorRealService.serviceList | unique:'device.device_group'" value="{{row.device.device_group}}">{{row.device.device_group}}</option>
-                                    </select>
-                                </th>
-                                <th ng-if="request_selected"></th>
-                                <th ng-if="conn_selected"></th>
-                                <th ng-if="received_selected"></th>
-                                <th ng-if="sent_selected"></th>
-                            </tr>
-                        </thead>
-                        <tbody ng-hide="monitorRealService.loading">
-                            <tr ng-repeat="item in displayedCollection">
-                                <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
-                                <td style="cursor: pointer;" ui-sref="index.monitoring.resource.slb.real_service.detail({name: item.name, device_ip: item.device.ip})"> <a class="name">{{ item.name }}</a></td>
-                                <th>{{ item.type }}</th>
-                                <td>{{ item.addr }}</td>
-                                <td>{{ item.port }}</td>
-                                <td>
-                                    <div ng-if="item.health_status=='1'">
-                                        <i style="color:#5cb85c" class="fa fa-check-circle"></i>
-                                    </div>
-                                    <div ng-if="item.health_status=='0'">
-                                        <i style="color:rgb(255, 140, 0)" class="fa fa-times-circle"></i>
-                                    </div>
-                                </td>
-                                <td style="cursor: pointer;" ui-sref="index.monitoring.resource.device.detail({name: item.device.name, type: item.device.type, id: item.device.id})"> <a class="name">{{ item.device.name }}</a></td>
-                                <td>{{ item.device.device_group }}</td>
-                                <td ng-if="request_selected">{{ item.graph_data.request }}</td>
-                                <td ng-if="conn_selected">{{ item.graph_data.conn }}</td>
-                                <td ng-if="received_selected"><span class="label label-default">{{item.graph_data.received }}</span></td>
-                                <td ng-if="sent_selected"><span class="label label-default">{{item.graph_data.sent }}</span></td>
-                            </tr>
-                            <tr ng-if="displayedCollection.length == 0">
-                                <td style="height: 48px;" colspan="{{monitorRealService.gridColSpan}}" class="text-center">{{ 'You do not have any real service information.' | T }}</td>
-                            </tr>
-                        </tbody>
-                    </table>
+            <div class="pull-right task-dropdown">
+                <div style="margin-right:15px" ng-dropdown-multiselect="" checkboxes="true"
+                     translation-texts="multiSelectTransition" options="multiSelectData"
+                     selected-model="multiSelectModel" extra-settings="multiSelectSettings" events="multiSelectEvents">
                 </div>
-                <div style="text-align: center" ng-show="monitorRealService.loading"><img src="app/images/loading.gif"></div>
-                <div class="table-pagination">
-                    <div class="pagination-detail"></div>
-                    <div class="pull-left">
-                        <label style="color:#9c9fa3;">
-                            &nbsp;&nbsp;&nbsp;{{'Every page displays'|T}}&nbsp;
-                            <select style="border-radius:4px; margin-top:-5px;" ng-model="pageSize" ng-options="item for item in [15,25,50,100]">
+            </div>
+        </div>
+        <div class="table-container" st-table="displayedCollection" st-safe-src="monitorRealService.serviceList">
+            <div class="table-responsive table-content" style="width: 100%;">
+                <table class="table table-striped table-hover">
+                    <thead>
+                    <tr>
+                        <th>No.</th>
+                        <th>{{ 'Service Name' | T }}</th>
+                        <th>{{ 'Service Type' | T }}</th>
+                        <th>{{ 'IP Address' | T }}</th>
+                        <th>{{ 'Port' | T }}</th>
+                        <th st-sort="health_status">{{ 'Health Status' | T }}</th>
+                        <th>{{ 'Device Name' | T }}</th>
+                        <th>{{ 'Device Group' | T }}</th>
+                        <th ng-if="request_selected" st-sort="graph_data.request">{{ 'Outstanding Requests' | T }}</th>
+                        <th ng-if="conn_selected" st-sort="graph_data.conn">{{ 'Connections Per Second' | T }}</th>
+                        <th ng-if="received_selected" st-sort="graph_data.received">{{ 'Received' | T }}</th>
+                        <th ng-if="sent_selected" st-sort="graph_data.sent">{{ 'Sent' | T }}</th>
+                    </tr>
+                    <tr>
+                        <th></th>
+                        <th>
+                            <input st-search="name" placeholder="{{'Search by Service Name'|T}}"
+                                   class="input-sm form-control" type="text"/>
+                        </th>
+                        <th></th>
+                        <th>
+                            <input st-search="addr" placeholder="{{'Search by IP Address'|T}}"
+                                   class="input-sm form-control" type="text"/>
+                        </th>
+                        <th></th>
+                        <th></th>
+                        <th>
+                            <select class="input-sm form-control" st-input-event="change" st-search="device.name">
+                                <option value="">{{'All' | T}}</option>
+                                <option ng-repeat="row in monitorRealService.serviceList | unique:'device.name'"
+                                        value="{{row.device.name}}">{{row.device.name}}
+                                </option>
                             </select>
-                            &nbsp;{{'entries'|T}}
-                        </label>
-                    </div>
-                    <div class="pagination" st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)"></div>
+                        </th>
+                        <th>
+                            <select class="input-sm form-control" st-input-event="change"
+                                    st-search="device.device_group">
+                                <option value="">{{'All' | T}}</option>
+                                <option ng-repeat="row in monitorRealService.serviceList | unique:'device.device_group'"
+                                        value="{{row.device.device_group}}">{{row.device.device_group}}
+                                </option>
+                            </select>
+                        </th>
+                        <th ng-if="request_selected"></th>
+                        <th ng-if="conn_selected"></th>
+                        <th ng-if="received_selected"></th>
+                        <th ng-if="sent_selected"></th>
+                    </tr>
+                    </thead>
+                    <tbody ng-hide="monitorRealService.loading">
+                    <tr ng-repeat="item in displayedCollection">
+                        <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
+                        <td style="cursor: pointer;"
+                            ui-sref="index.monitoring.resource.slb.real_service.detail({name: item.name, device_ip: item.device.ip})">
+                            <a class="name">{{ item.name }}</a></td>
+                        <th>{{ item.type }}</th>
+                        <td>{{ item.addr }}</td>
+                        <td>{{ item.port }}</td>
+                        <td>
+                            <div ng-if="item.health_status=='1'">
+                                <i style="color:#5cb85c" class="fa fa-check-circle"></i>
+                            </div>
+                            <div ng-if="item.health_status=='0'">
+                                <i style="color:rgb(255, 140, 0)" class="fa fa-times-circle"></i>
+                            </div>
+                        </td>
+                        <td style="cursor: pointer;"
+                            ui-sref="index.monitoring.resource.device.detail({name: item.device.name, type: item.device.type, id: item.device.id})">
+                            <a class="name">{{ item.device.name }}</a></td>
+                        <td>{{ item.device.device_group }}</td>
+                        <td ng-if="request_selected">{{ item.graph_data.request }}</td>
+                        <td ng-if="conn_selected">{{ item.graph_data.conn }}</td>
+                        <td ng-if="received_selected"><span class="label label-default">{{item.graph_data.received
+                            }}</span></td>
+                        <td ng-if="sent_selected"><span class="label label-default">{{item.graph_data.sent }}</span>
+                        </td>
+                    </tr>
+                    <tr ng-if="displayedCollection.length == 0">
+                        <td style="height: 48px;" colspan="12" class="text-center">
+                            {{ 'You do not have any real service information.' | T }}
+                        </td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div style="text-align: center" ng-show="monitorRealService.loading"><img src="app/images/loading.gif">
+            </div>
+            <div class="table-pagination">
+                <div class="pagination-detail"></div>
+                <div class="pull-left">
+                    <label style="color:#9c9fa3;">
+                        &nbsp;&nbsp;&nbsp;{{'Every page displays' | T}}&nbsp;
+                        <select style="border-radius:4px; margin-top:-5px;" ng-model="pageSize"
+                                ng-options="item for item in [15,25,50,100]">
+                        </select>
+                        &nbsp;{{'entries' | T}}
+                    </label>
                 </div>
+                <div class="pagination" st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5"
+                     st-page-change="onPageChange(newPage)"></div>
             </div>
-            <!-- <div style="text-align: center" ng-if="monitorRealService.loading"><img src="app/images/loading.gif"></div> -->
+            <br>
         </div>
+        <!-- <div style="text-align: center" ng-if="monitorRealService.loading"><img src="app/images/loading.gif"></div> -->
     </div>
 </div>
 
+
 <style>
     .st-sort-ascent:before {
         content: '\25B2';
Index: /branches/amp_3_7/extensions/monitoring/webui/resource/slb/real_service_detail.html
===================================================================
--- /branches/amp_3_7/extensions/monitoring/webui/resource/slb/real_service_detail.html	(revision 2477)
+++ /branches/amp_3_7/extensions/monitoring/webui/resource/slb/real_service_detail.html	(working copy)
@@ -1,10 +1,11 @@
-<div ncy-breadcrumb></div>
 <div class="ag-session-list">
-    <div class="row ng-scope">
+    <div class="row">
+        <div ncy-breadcrumb></div>
         <div class="col-md-12">
             <div class="pull-left">
                 <div class="btn btn-default" ng-click="exportPDF()"><span class="fa fa-file-pdf-o"></span></div>
-                <div class="btn btn-default" ng-click="monitorRealServiceDetail.refresh()"><span class="fa fa-refresh"></span></div>
+                <div class="btn btn-default" ng-click="monitorRealServiceDetail.refresh()"><span
+                        class="fa fa-refresh"></span></div>
             </div>
             <div class="pull-right">
                 <composer-timeselector widgets="widgets"></composer-timeselector>
@@ -13,33 +14,35 @@
         <div class="col-md-12">
             <div class="tab-wrapper">
                 <ul class="nav nav-tabs">
-                    <li ng-repeat="tab in monitorRealServiceDetail.tabs" ng-class="{'active': monitorRealServiceDetail.selTab(tab.name)}" ng-click="changeTab(tab.name)" class="ng-scope"><a>{{tab.name | T}}</a></li>
+                    <li ng-repeat="tab in monitorRealServiceDetail.tabs"
+                        ng-class="{'active': monitorRealServiceDetail.selTab(tab.name)}" ng-click="changeTab(tab.name)"
+                        class="ng-scope tab-header"><a>{{tab.name | T}}</a></li>
                 </ul>
             </div>
         </div>
         <div class="col-md-12" ng-if="monitorRealServiceDetail.tab == 'Basic Monitoring'">
-            <div class="row ng-scope">
-                <div class="graph graph-hover" ng-class="{ 'col-sm-4': widget.args.chart.grid_width != 12, 'col-sm-12': widget.args.chart.grid_width == 12 }" ng-repeat="widget in widgets">
-                    <div class="graph-title">
-                        <i class="fa fa-{{ widget.icon }}"></i>
-                        <span title="{{widget.description|T}}">{{widget.verbose_name|T}}</span>
-                        <!-- <div class="hover-btn">
-                            <button ng-click="monitorRealServiceDetail.setAlert(widget)"><span>{{'Set Alert'|T}}</span></button>
-                            <button ng-click="monitorRealServiceDetail.popup(widget)"><span>{{'Popup'|T}}</span></button>
-                        </div> -->
-                        <div class="hover-btn">
-                            <button class="btn btn-link" title="{{'Alert'|T}}" ng-click="monitorRealServiceDetail.setAlert(widget)" style="padding: 3px;"><i class="fa fa-bell" style="margin-right: 0"></i></button>
-                            <button class="btn btn-link" title="{{'Zoom In Preview'|T}}" ng-click="monitorRealServiceDetail.popup(widget)" style="padding: 3px;"><i class="fa fa-search-plus" style="margin-right: 0"></i></button>
-                        </div>
+            <div class="graph graph-hover"
+                 ng-class="{ 'col-sm-4': widget.args.chart.grid_width != 12, 'col-sm-12': widget.args.chart.grid_width == 12 }"
+                 ng-repeat="widget in widgets">
+                <div class="graph-title">
+                    <i class="fa fa-{{ widget.icon }}"></i>
+                    <span title="{{widget.description|T}}" class="tab-header-1">{{widget.verbose_name | T}}</span>
+                    <div class="hover-btn">
+                        <button class="btn btn-link" title="{{'Alert'|T}}"
+                                ng-click="monitorRealServiceDetail.setAlert(widget)" style="padding: 3px;"><i
+                                class="fa fa-bell" style="margin-right: 0"></i></button>
+                        <button class="btn btn-link" title="{{'Zoom In Preview'|T}}"
+                                ng-click="monitorRealServiceDetail.popup(widget)" style="padding: 3px;"><i
+                                class="fa fa-search-plus" style="margin-right: 0"></i></button>
                     </div>
-                    <div class="graph-container" composer-widget widget="widget"></div>
                 </div>
+                <div class="graph-container" composer-widget widget="widget"></div>
             </div>
         </div>
-        <div class="col-md-12" ng-if="monitorRealServiceDetail.tab == 'Audit Monitoring'">
-            <div class="row ng-scope">
-                By installing the plugins, you can check these monitoring charts.
-            </div>
+    </div>
+    <div class="col-md-12" ng-if="monitorRealServiceDetail.tab == 'Audit Monitoring'">
+        <div class="row ng-scope">
+            By installing the plugins, you can check these monitoring charts.
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
Index: /branches/amp_3_7/extensions/monitoring/webui/resource/slb/slb.html
===================================================================
--- /branches/amp_3_7/extensions/monitoring/webui/resource/slb/slb.html	(revision 2477)
+++ /branches/amp_3_7/extensions/monitoring/webui/resource/slb/slb.html	(working copy)
@@ -1,14 +1,14 @@
-<div class="row">
-    <div class="col-md-12">
-        <ul class="nav nav-tabs">
-            <li role="presentation" ng-class="{ active: url_contain('/monitoring/resource/slb/virtual_service') }">
-                <a ui-sref="index.monitoring.resource.slb.virtual_service">{{ 'Virtual Service' | T }}</a>
-            </li>
-            <li role="presentation" ng-class="{ active: url_contain('/monitoring/resource/slb/real_service') }">
-                <a ui-sref="index.monitoring.resource.slb.real_service">{{ 'Real Service' | T }}</a>
-            </li>
-        </ul>
-    </div>
+<div class="col-md-12">
+    <ul class="nav nav-tabs">
+        <li role="presentation" ng-class="{ active: url_contain('/monitoring/resource/slb/virtual_service') }">
+            <a ui-sref="index.monitoring.resource.slb.virtual_service"><span
+                    class="tab-header">{{ 'Virtual Service' | T }}</span></a>
+        </li>
+        <li role="presentation" ng-class="{ active: url_contain('/monitoring/resource/slb/real_service') }">
+            <a ui-sref="index.monitoring.resource.slb.real_service"><span class="tab-header">{{ 'Real Service' | T
+                }}</span></a>
+        </li>
+    </ul>
 </div>
 <div class="content-wrapper">
     <div class="" ng-show="url_contain('/monitoring/resource/slb/virtual_service')" ui-view="virtual_service"></div>
Index: /branches/amp_3_7/extensions/monitoring/webui/resource/slb/virtual_service.html
===================================================================
--- /branches/amp_3_7/extensions/monitoring/webui/resource/slb/virtual_service.html	(revision 2477)
+++ /branches/amp_3_7/extensions/monitoring/webui/resource/slb/virtual_service.html	(working copy)
@@ -1,118 +1,149 @@
-<div class="row">
-    <div class="col-md-12">
-        <div class="widget">
-            <div class="table-toolbar">
-                <div class="btn-group">
-                    <button class="btn btn-link" title="{{ 'Refresh Service List' | T }}" ng-click="monitorVirtualService.refresh()"><i class="fa fa-refresh"></i></button>
-                </div>
-                <div class="pull-right task-dropdown">
-                    <div style="margin-right:15px" ng-dropdown-multiselect="" checkboxes="true" translation-texts="multiSelectTransition" options="multiSelectData" selected-model="multiSelectModel" extra-settings="multiSelectSettings" events="multiSelectEvents">
-                    </div>
-                </div>
+<div class="col-md-12">
+    <div class="widget">
+        <div class="table-toolbar">
+            <div class="btn-group">
+                <button class="btn btn-link" title="{{ 'Refresh Service List' | T }}"
+                        ng-click="monitorVirtualService.refresh()"><i class="fa fa-refresh"></i></button>
             </div>
-            <div class="table-container" st-table="displayedCollection" st-safe-src="monitorVirtualService.serviceList">
-                <div class="table-responsive table-content">
-                    <table class="table table-striped table-hover">
-                        <thead>
-                            <tr>
-                                <th>No.</th>
-                                <th>{{ 'Service Name' | T }}</th>
-                                <th>{{ 'Service Type' | T }}</th>
-                                <th>{{ 'IP Address' | T }}</th>
-                                <th>{{ 'Port' | T }}</th>
-                                <th st-sort="health_status">{{ 'Health Status' | T }}</th>
-                                <th>{{ 'Device Name' | T }}</th>
-                                <th>{{ 'Device Group' | T }}</th>
-                                <th ng-if="hits_selected" st-sort="graph_data.hits">{{ 'Hits Number' | T }}</th>
-                                <th ng-if="conn_selected" st-sort="graph_data.conn">{{ 'Open Connections' | T }}</th>
-                                <th ng-if="received_selected" st-sort="graph_data.received">{{ 'Received' | T }}</th>
-                                <th ng-if="sent_selected" st-sort="graph_data.sent">{{ 'Sent' | T }}</th>
-                                <th ng-if="cert_selected"> {{'Certificate Status' | T}}</th>
-                                <th ng-if="cert_selected"> {{'Expiration Date' | T}}</th>
-                            </tr>
-                            <tr>
-                                <th></th>
-                                <th>
-                                    <input st-search="name" placeholder="{{'Search by Service Name'|T}}" class="input-sm form-control" type="text" />
-                                </th>
-                                <th></th>
-                                <th>
-                                    <input st-search="addr" placeholder="{{'Search by IP Address'|T}}" class="input-sm form-control" type="text" />
-                                </th>
-                                <th></th>
-                                <th></th>
-                                <th>
-                                    <select class="input-sm form-control" st-input-event="change" st-search="device.name">
-                                        <option value="">{{'All'|T}}</option>
-                                        <option ng-repeat="row in monitorVirtualService.serviceList | unique:'device.name'" value="{{row.device.name}}">{{row.device.name}}</option>
-                                    </select>
-                                </th>
-                                <th>
-                                    <select class="input-sm form-control" st-input-event="change" st-search="device.device_group">
-                                        <option value="">{{'All'|T}}</option>
-                                        <option ng-repeat="row in monitorVirtualService.serviceList | unique:'device.device_group'" value="{{row.device.device_group}}">{{row.device.device_group}}</option>
-                                    </select>
-                                </th>
-                                <th ng-if="hits_selected"></th>
-                                <th ng-if="conn_selected"></th>
-                                <th ng-if="received_selected"></th>
-                                <th ng-if="sent_selected"></th>
-                                <th ng-if="cert_selected"></th>
-                                <th ng-if="cert_selected"></th>
-                            </tr>
-                        </thead>
-                        <tbody ng-hide="monitorVirtualService.loading">
-                            <tr ng-repeat="item in displayedCollection">
-                                <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
-                                <td style="cursor: pointer;" ui-sref="index.monitoring.resource.slb.virtual_service.detail({name: item.name, device_ip: item.device.ip, id: item.device.id})"> <a class="name">{{ item.name }}</a></td>
-                                <th>{{ item.type }}</th>
-                                <td>{{ item.addr }}</td>
-                                <td>{{ item.port }}</td>
-                                <td>
-                                    <div ng-if="item.health_status=='1'">
-                                        <i style="color:#5cb85c" class="fa fa-check-circle"></i>
-                                    </div>
-                                    <div ng-if="item.health_status=='0'">
-                                        <i style="color:rgb(255, 140, 0)" class="fa fa-times-circle"></i>
-                                    </div>
-                                </td>
-                                <td style="cursor: pointer;" ui-sref="index.monitoring.resource.device.detail({name: item.device.name, type: item.device.type, id: item.device.id})"> <a class="name">{{ item.device.name }}</a></td>
-                                <td>{{ item.device.device_group }}</td>
-                                <td ng-if="hits_selected"><span class="label label-default">{{item.graph_data.hits }}</span></td>
-                                <td ng-if="conn_selected"><span class="label label-default">{{item.graph_data.conn }}</span></td>
-                                <td ng-if="received_selected"><span class="label label-default">{{item.graph_data.received }}</span></td>
-                                <td ng-if="sent_selected"><span class="label label-default">{{item.graph_data.sent }}</span></td>
-                                <td ng-if="cert_selected">
-                                    <span ng-if="monitorVirtualService.cert_status(item) === 'Normal'"><i class="fa fa-check-circle fa-fw normal" aria-hidden="true"></i>{{'Normal' | T}}</span>
-                                    <span ng-if="monitorVirtualService.cert_status(item) === 'Warning'"><i class="fa fa-exclamation-circle fa-fw warning" aria-hidden="true"></i>{{'About to Expire' | T}}</span>
-                                    <span ng-if="monitorVirtualService.cert_status(item) === 'Expired'"><i class="fa fa-times-circle fa-fw expired" aria-hidden="true"></i>{{'Expired' | T}}</span>
-                                    <span ng-if="monitorVirtualService.cert_status(item) === 'NoCertificate'"><i class="fa fa-exclamation-triangle fa-fw danger" aria-hidden="true"></i>{{'No Certificate' | T}}</span>
-                                    <span ng-if="monitorVirtualService.cert_status(item) === 'Loading'"><i class="fa fa-spinner fa-spin normal" aria-hidden="true"></i>{{'Loading' | T}}</span>
-                                </td>
-                                <td ng-if="cert_selected">{{ monitorVirtualService.exp_time(item) }}</td>
-                            </tr>
-                            <tr ng-if="displayedCollection.length == 0">
-                                <td style="height: 48px;" colspan="{{monitorVirtualService.gridColSpan}}" class="text-center">{{ 'You do not have any virtual service information.' | T }}</td>
-                            </tr>
-                        </tbody>
-                    </table>
+            <div class="pull-right task-dropdown">
+                <div style="margin-right:15px" ng-dropdown-multiselect="" checkboxes="true"
+                     translation-texts="multiSelectTransition" options="multiSelectData"
+                     selected-model="multiSelectModel" extra-settings="multiSelectSettings" events="multiSelectEvents">
                 </div>
-                <div style="text-align: center" ng-show="monitorVirtualService.loading"><img src="app/images/loading.gif"></div>
-                <div class="table-pagination">
-                    <div class="pagination-detail"></div>
-                    <div class="pull-left">
-                        <label style="color:#9c9fa3;">
-                            &nbsp;&nbsp;&nbsp;{{'Every page displays'|T}}&nbsp;
-                            <select style="border-radius:4px; margin-top:-5px;" ng-model="pageSize" ng-options="item for item in [15,25,50,100]">
+            </div>
+        </div>
+        <div class="table-container" st-table="displayedCollection" st-safe-src="monitorVirtualService.serviceList">
+            <div class="table-responsive table-content" style="width: 100%;">
+                <table class="table table-striped table-hover">
+                    <thead>
+                    <tr>
+                        <th>No.</th>
+                        <th>{{ 'Service Name' | T }}</th>
+                        <th>{{ 'Service Type' | T }}</th>
+                        <th>{{ 'IP Address' | T }}</th>
+                        <th>{{ 'Port' | T }}</th>
+                        <th st-sort="health_status">{{ 'Health Status' | T }}</th>
+                        <th>{{ 'Device Name' | T }}</th>
+                        <th>{{ 'Device Group' | T }}</th>
+                        <th ng-if="hits_selected" st-sort="graph_data.hits">{{ 'Hits Number' | T }}</th>
+                        <th ng-if="conn_selected" st-sort="graph_data.conn">{{ 'Open Connections' | T }}</th>
+                        <th ng-if="received_selected" st-sort="graph_data.received">{{ 'Received' | T }}</th>
+                        <th ng-if="sent_selected" st-sort="graph_data.sent">{{ 'Sent' | T }}</th>
+                        <th ng-if="cert_selected"> {{'Certificate Status' | T}}</th>
+                        <th ng-if="cert_selected"> {{'Expiration Date' | T}}</th>
+                    </tr>
+                    <tr>
+                        <th></th>
+                        <th>
+                            <input st-search="name" placeholder="{{'Search by Service Name'|T}}"
+                                   class="input-sm form-control" type="text"/>
+                        </th>
+                        <th></th>
+                        <th>
+                            <input st-search="addr" placeholder="{{'Search by IP Address'|T}}"
+                                   class="input-sm form-control" type="text"/>
+                        </th>
+                        <th></th>
+                        <th></th>
+                        <th>
+                            <select class="input-sm form-control" st-input-event="change" st-search="device.name">
+                                <option value="">{{'All' | T}}</option>
+                                <option ng-repeat="row in monitorVirtualService.serviceList | unique:'device.name'"
+                                        value="{{row.device.name}}">{{row.device.name}}
+                                </option>
                             </select>
-                            &nbsp;{{'entries'|T}}
-                        </label>
-                    </div>
-                    <div class="pagination" st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)"></div>
+                        </th>
+                        <th>
+                            <select class="input-sm form-control" st-input-event="change"
+                                    st-search="device.device_group">
+                                <option value="">{{'All' | T}}</option>
+                                <option ng-repeat="row in monitorVirtualService.serviceList | unique:'device.device_group'"
+                                        value="{{row.device.device_group}}">{{row.device.device_group}}
+                                </option>
+                            </select>
+                        </th>
+                        <th ng-if="hits_selected"></th>
+                        <th ng-if="conn_selected"></th>
+                        <th ng-if="received_selected"></th>
+                        <th ng-if="sent_selected"></th>
+                        <th ng-if="cert_selected"></th>
+                        <th ng-if="cert_selected"></th>
+                    </tr>
+                    </thead>
+                    <tbody ng-hide="monitorVirtualService.loading">
+                    <tr ng-repeat="item in displayedCollection">
+                        <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
+                        <td style="cursor: pointer;"
+                            ui-sref="index.monitoring.resource.slb.virtual_service.detail({name: item.name, device_ip: item.device.ip, id: item.device.id})">
+                            <a class="name">{{ item.name }}</a></td>
+                        <th>{{ item.type }}</th>
+                        <td>{{ item.addr }}</td>
+                        <td>{{ item.port }}</td>
+                        <td>
+                            <div ng-if="item.health_status=='1'">
+                                <i style="color:#5cb85c" class="fa fa-check-circle"></i>
+                            </div>
+                            <div ng-if="item.health_status=='0'">
+                                <i style="color:rgb(255, 140, 0)" class="fa fa-times-circle"></i>
+                            </div>
+                        </td>
+                        <td style="cursor: pointer;"
+                            ui-sref="index.monitoring.resource.device.detail({name: item.device.name, type: item.device.type, id: item.device.id})">
+                            <a class="name">{{ item.device.name }}</a></td>
+                        <td>{{ item.device.device_group }}</td>
+                        <td ng-if="hits_selected"><span class="label label-default">{{item.graph_data.hits }}</span>
+                        </td>
+                        <td ng-if="conn_selected"><span class="label label-default">{{item.graph_data.conn }}</span>
+                        </td>
+                        <td ng-if="received_selected"><span class="label label-default">{{item.graph_data.received
+                            }}</span></td>
+                        <td ng-if="sent_selected"><span class="label label-default">{{item.graph_data.sent }}</span>
+                        </td>
+                        <td ng-if="cert_selected">
+                            <span ng-if="monitorVirtualService.cert_status(item) === 'Normal'"><i
+                                    class="fa fa-check-circle fa-fw normal"
+                                    aria-hidden="true"></i>{{'Normal' | T}}</span>
+                            <span ng-if="monitorVirtualService.cert_status(item) === 'Warning'"><i
+                                    class="fa fa-exclamation-circle fa-fw warning"
+                                    aria-hidden="true"></i>{{'About to Expire' | T}}</span>
+                            <span ng-if="monitorVirtualService.cert_status(item) === 'Expired'"><i
+                                    class="fa fa-times-circle fa-fw expired"
+                                    aria-hidden="true"></i>{{'Expired' | T}}</span>
+                            <span ng-if="monitorVirtualService.cert_status(item) === 'NoCertificate'"><i
+                                    class="fa fa-exclamation-triangle fa-fw danger"
+                                    aria-hidden="true"></i>{{'No Certificate' | T}}</span>
+                            <span ng-if="monitorVirtualService.cert_status(item) === 'Loading'"><i
+                                    class="fa fa-spinner fa-spin normal" aria-hidden="true"></i>{{'Loading' | T}}</span>
+                        </td>
+                        <td ng-if="cert_selected">{{ monitorVirtualService.exp_time(item) }}</td>
+                    </tr>
+                    <tr ng-if="displayedCollection.length == 0">
+                        <td style="height: 48px;" colspan="14" class="text-center">
+                            {{ 'You do not have any virtual service information.' | T }}
+                        </td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div style="text-align: center" ng-show="monitorVirtualService.loading"><img src="app/images/loading.gif">
+            </div>
+            <div class="table-pagination">
+                <div class="pagination-detail"></div>
+                <div class="pull-left">
+                    <label style="color:#9c9fa3;">
+                        &nbsp;&nbsp;&nbsp;{{'Every page displays' | T}}&nbsp;
+                        <select style="border-radius:4px; margin-top:-5px;" ng-model="pageSize"
+                                ng-options="item for item in [15,25,50,100]">
+                        </select>
+                        &nbsp;{{'entries' | T}}
+                    </label>
                 </div>
+                <div class="pagination" st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5"
+                     st-page-change="onPageChange(newPage)"></div>
             </div>
-            <!-- <div style="text-align: center" ng-if="monitorVirtualService.loading"><img src="app/images/loading.gif"></div> -->
+            <br>
         </div>
+        <!-- <div style="text-align: center" ng-if="monitorVirtualService.loading"><img src="app/images/loading.gif"></div> -->
     </div>
 </div>
 
Index: /branches/amp_3_7/extensions/monitoring/webui/resource/slb/virtual_service_add_url.html
===================================================================
--- /branches/amp_3_7/extensions/monitoring/webui/resource/slb/virtual_service_add_url.html	(revision 2477)
+++ /branches/amp_3_7/extensions/monitoring/webui/resource/slb/virtual_service_add_url.html	(working copy)
@@ -1,7 +1,8 @@
 <div id="deviceGroup-add" class="">
     <div class="modal-header">
-        <button type="button" class="close" ng-click="vsUrlAdd.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4><i class="array-add"></i>{{ 'Add URL Monitor' | T}}</h4>
+        <button type="button" class="close" ng-click="vsUrlAdd.close()" aria-label="Close"><span aria-hidden="true">&times;</span>
+        </button>
+        <h6><i class="array-add"></i>{{ 'Add URL Monitor' | T}}</h6>
 
     </div>
     <div class="modal-body">
@@ -9,18 +10,21 @@
             <div class="form-group">
                 <label for="name" class="col-md-3 control-label"><sup>*</sup>{{ 'URL' | T }}</label>
                 <div class="col-md-8">
-                    <input ng-verify="required:true" type="text" class="form-control" ng-model="vsUrlAdd.url" maxlength="1024">
+                    <input ng-verify="required:true" type="text" class="form-control" ng-model="vsUrlAdd.url"
+                           maxlength="1024">
                 </div>
             </div>
             <div class="form-group">
                 <div class="col-md-offset-3 col-md-8 errorMsg">{{ vsUrlAdd.failed }}</div>
             </div>
-           <div class="form-group">
-               <div class="col-md-offset-3 col-md-8">
-                   <button ng-verify="control:'addUrlForm'" class="btn btn-primary" ng-click="vsUrlAdd.submit()" id="vsUrlAddSubmit">{{ 'Create' | T}}</button>
-                   <button class="btn btn-default" ng-click="vsUrlAdd.close()">{{ 'Cancel' | T}}</button>
-               </div>
-           </div>
+            <div class="form-group">
+                <div class="col-md-offset-3 col-md-8">
+                    <button ng-verify="control:'addUrlForm'" class="btn btn-primary" ng-click="vsUrlAdd.submit()"
+                            id="vsUrlAddSubmit">{{ 'Create' | T}}
+                    </button>
+                    <button class="btn btn-default" ng-click="vsUrlAdd.close()">{{ 'Cancel' | T}}</button>
+                </div>
+            </div>
 
         </form>
     </div>
Index: /branches/amp_3_7/extensions/monitoring/webui/resource/slb/virtual_service_detail.html
===================================================================
--- /branches/amp_3_7/extensions/monitoring/webui/resource/slb/virtual_service_detail.html	(revision 2477)
+++ /branches/amp_3_7/extensions/monitoring/webui/resource/slb/virtual_service_detail.html	(working copy)
@@ -1,11 +1,15 @@
-<div ncy-breadcrumb></div>
 <div class="ag-session-list">
-    <div class="row ng-scope">
+    <div class="row">
+        <div ncy-breadcrumb></div>
         <div class="col-md-12">
             <div class="pull-left">
                 <div class="btn btn-default" ng-click="exportPDF()"><span class="fa fa-file-pdf-o"></span></div>
-                <div class="btn btn-default" ng-click="monitorVirtualServiceDetail.refresh()"><span class="fa fa-refresh"></span></div>
-                <div class="btn btn-default" title="{{'Add URL Monitor'|T}}" ng-if="monitorVirtualServiceDetail.display_url_monitor" ng-click="monitorVirtualServiceDetail.addUrlMonitor()"><span class="fa fa fa-plus-circle"></span></div>
+                <div class="btn btn-default" ng-click="monitorVirtualServiceDetail.refresh()"><span
+                        class="fa fa-refresh"></span></div>
+                <div class="btn btn-default" title="{{'Add URL Monitor'|T}}"
+                     ng-if="monitorVirtualServiceDetail.display_url_monitor"
+                     ng-click="monitorVirtualServiceDetail.addUrlMonitor()"><span class="fa fa fa-plus-circle"></span>
+                </div>
             </div>
             <div class="pull-right">
                 <composer-timeselector widgets="widgets"></composer-timeselector>
@@ -14,47 +18,53 @@
         <div class="col-md-12">
             <div class="tab-wrapper">
                 <ul class="nav nav-tabs">
-                    <li ng-repeat="tab in monitorVirtualServiceDetail.tabs" ng-class="{'active': monitorVirtualServiceDetail.tab == tab.name}" ng-click="changeTab(tab.name)" class="ng-scope"><a>{{tab.name | T}}</a></li>
+                    <li ng-repeat="tab in monitorVirtualServiceDetail.tabs"
+                        ng-class="{'active': monitorVirtualServiceDetail.tab == tab.name}"
+                        ng-click="changeTab(tab.name)"
+                        class="ng-scope tab-header"><a>{{tab.name | T}}</a></li>
                 </ul>
             </div>
         </div>
         <div class="col-md-12" ng-if="monitorVirtualServiceDetail.tab == 'Basic Monitoring'">
-            <div class="row ng-scope">
-                <div class="graph graph-hover" ng-class="{ 'col-sm-4': widget.args.chart.grid_width != 8, 'col-sm-8': widget.args.chart.grid_width == 8 }" ng-repeat="widget in widgets">
-                    <div class="graph-title">
-                        <i class="fa fa-{{ widget.icon }}"></i>
-                        <span title="{{widget.description|T}}">{{widget.verbose_name|T}}</span>
-                        <!-- <div class="hover-btn">
-                            <button ng-click="monitorVirtualServiceDetail.setAlert(widget)"><span>{{'Set Alert'|T}}</span></button>
-                            <button ng-click="monitorVirtualServiceDetail.popup(widget)"><span>{{'Popup'|T}}</span></button>
-                        </div> -->
-                        <div class="hover-btn">
-                            <button class="btn btn-link" title="{{'Alert'|T}}" ng-click="monitorVirtualServiceDetail.setAlert(widget)" style="padding: 3px;"><i class="fa fa-bell" style="margin-right: 0"></i></button>
-                            <button class="btn btn-link" title="{{'Zoom In Preview'|T}}" ng-click="monitorVirtualServiceDetail.popup(widget)" style="padding: 3px;"><i class="fa fa-search-plus" style="margin-right: 0"></i></button>
-                        </div>
+
+            <div class="graph graph-hover"
+                 ng-class="{ 'col-sm-4': widget.args.chart.grid_width != 8, 'col-sm-8': widget.args.chart.grid_width == 8 }"
+                 ng-repeat="widget in widgets">
+                <div class="graph-title">
+                    <i class="fa fa-{{ widget.icon }}"></i>
+                    <span title="{{widget.description|T}}" class="tab-header-1">{{widget.verbose_name | T}}</span>
+                    <div class="hover-btn">
+                        <button class="btn btn-link" title="{{'Alert'|T}}"
+                                ng-click="monitorVirtualServiceDetail.setAlert(widget)" style="padding: 3px;"><i
+                                class="fa fa-bell" style="margin-right: 0"></i></button>
+                        <button class="btn btn-link" title="{{'Zoom In Preview'|T}}"
+                                ng-click="monitorVirtualServiceDetail.popup(widget)" style="padding: 3px;"><i
+                                class="fa fa-search-plus" style="margin-right: 0"></i></button>
                     </div>
-                    <div class="graph-container" composer-widget widget="widget"></div>
                 </div>
+                <div class="graph-container" composer-widget widget="widget"></div>
             </div>
+
         </div>
         <div class="" ng-if="monitorVirtualServiceDetail.tab == 'Audit Monitoring'">
-            <div class="row ng-scope">
-                <div class="col-sm-4 graph graph-hover" ng-repeat="widget in widgets">
-                    <div class="graph-title">
-                        <i class="fa fa-{{ widget.icon }}"></i>
-                        <span title="{{widget.description|T}}">{{widget.verbose_name|T}}</span>
-                        <!-- <div class="hover-btn">
-                            <button ng-click="monitorVirtualServiceDetail.setAlert(widget)"><span>{{'Set Alert'|T}}</span></button>
-                            <button ng-click="monitorVirtualServiceDetail.popup(widget)"><span>{{'Popup'|T}}</span></button>
-                        </div> -->
-                        <div class="hover-btn">
-                            <button class="btn btn-link" title="{{'Alert'|T}}" ng-click="monitorVirtualServiceDetail.setAlert(widget)" style="padding: 3px;"><i class="fa fa-bell" style="margin-right: 0"></i></button>
-                            <button class="btn btn-link" title="{{'Zoom In Preview'|T}}" ng-click="monitorVirtualServiceDetail.popup(widget)" style="padding: 3px;"><i class="fa fa-search-plus" style="margin-right: 0"></i></button>
-                            <button class="btn btn-link" ng-if="widget.deleteable" title="{{'Delete'|T}}" ng-click="monitorVirtualServiceDetail.delUrlMonitor(widget)" style="padding: 3px;"><i class="fa fa-times" style="margin-right: 0"></i></button>
-                        </div>
+
+            <div class="col-sm-4 graph graph-hover" ng-repeat="widget in widgets">
+                <div class="graph-title">
+                    <i class="fa fa-{{ widget.icon }}"></i>
+                    <span title="{{widget.description|T}}" class="tab-header-1">{{widget.verbose_name | T}}</span>
+                    <div class="hover-btn">
+                        <button class="btn btn-link" title="{{'Alert'|T}}"
+                                ng-click="monitorVirtualServiceDetail.setAlert(widget)" style="padding: 3px;"><i
+                                class="fa fa-bell" style="margin-right: 0"></i></button>
+                        <button class="btn btn-link" title="{{'Zoom In Preview'|T}}"
+                                ng-click="monitorVirtualServiceDetail.popup(widget)" style="padding: 3px;"><i
+                                class="fa fa-search-plus" style="margin-right: 0"></i></button>
+                        <button class="btn btn-link" ng-if="widget.deleteable" title="{{'Delete'|T}}"
+                                ng-click="monitorVirtualServiceDetail.delUrlMonitor(widget)" style="padding: 3px;"><i
+                                class="fa fa-times" style="margin-right: 0"></i></button>
                     </div>
-                    <div class="graph-container" composer-widget widget="widget"></div>
                 </div>
+                <div class="graph-container" composer-widget widget="widget"></div>
             </div>
         </div>
     </div>
Index: /branches/amp_3_7/extensions/monitoring/webui/resource/sslvpn/detail.html
===================================================================
--- /branches/amp_3_7/extensions/monitoring/webui/resource/sslvpn/detail.html	(revision 2477)
+++ /branches/amp_3_7/extensions/monitoring/webui/resource/sslvpn/detail.html	(working copy)
@@ -1,10 +1,11 @@
-<div ncy-breadcrumb></div>
 <div class="ag-session-list">
-    <div class="row ng-scope">
+    <div class="row">
+        <div ncy-breadcrumb></div>
         <div class="col-md-12">
             <div class="pull-left">
                 <div class="btn btn-default" ng-click="exportPDF()"><span class="fa fa-file-pdf-o"></span></div>
-                <div class="btn btn-default" ng-click="monitorSSLVPNDetail.refresh()"><span class="fa fa-refresh"></span></div>
+                <div class="btn btn-default" ng-click="monitorSSLVPNDetail.refresh()"><span
+                        class="fa fa-refresh"></span></div>
             </div>
             <div class="pull-right">
                 <composer-timeselector widgets="widgets"></composer-timeselector>
@@ -13,27 +14,27 @@
         <div class="col-md-12">
             <div class="tab-wrapper">
                 <ul class="nav nav-tabs">
-                    <li ng-repeat="tab in monitorSSLVPNDetail.tabs" ng-class="{'active': monitorSSLVPNDetail.selTab(tab.name)}" ng-click="changeTab(tab.name)" class="ng-scope"><a>{{tab.name | T}}</a></li>
+                    <li ng-repeat="tab in monitorSSLVPNDetail.tabs"
+                        ng-class="{'active': monitorSSLVPNDetail.selTab(tab.name)}" ng-click="changeTab(tab.name)"
+                        class="ng-scope tab-header"><a>{{tab.name | T}}</a></li>
                 </ul>
             </div>
         </div>
         <div class="col-md-12" ng-if="monitorSSLVPNDetail.tab == 'Basic Monitoring'">
-            <div class="row ng-scope">
-                <div class="col-sm-4 graph graph-hover" ng-repeat="widget in widgets">
-                    <div class="graph-title">
-                        <i class="fa fa-{{ widget.icon }}"></i>
-                        <span title="{{widget.description|T}}">{{widget.verbose_name|T}}</span>
-                        <!-- <div class="hover-btn">
-                            <button ng-click="monitorSSLVPNDetail.setAlert(widget)"><span>{{'Set Alert'|T}}</span></button>
-                            <button ng-click="monitorSSLVPNDetail.popup(widget)"><span>{{'Popup'|T}}</span></button>
-                        </div> -->
-                        <div class="hover-btn">
-                            <button class="btn btn-link" title="{{'Alert'|T}}" ng-click="monitorSSLVPNDetail.setAlert(widget)" style="padding: 3px;"><i class="fa fa-bell" style="margin-right: 0"></i></button>
-                            <button class="btn btn-link" title="{{'Zoom In Preview'|T}}" ng-click="monitorSSLVPNDetail.popup(widget)" style="padding: 3px;"><i class="fa fa-search-plus" style="margin-right: 0"></i></button>
-                        </div>
+            <div class="col-sm-4 graph graph-hover" ng-repeat="widget in widgets">
+                <div class="graph-title">
+                    <i class="fa fa-{{ widget.icon }}"></i>
+                    <span title="{{widget.description|T}}" class="tab-header-1">{{widget.verbose_name | T}}</span>
+                    <div class="hover-btn">
+                        <button class="btn btn-link" title="{{'Alert'|T}}"
+                                ng-click="monitorSSLVPNDetail.setAlert(widget)" style="padding: 3px;"><i
+                                class="fa fa-bell" style="margin-right: 0"></i></button>
+                        <button class="btn btn-link" title="{{'Zoom In Preview'|T}}"
+                                ng-click="monitorSSLVPNDetail.popup(widget)" style="padding: 3px;"><i
+                                class="fa fa-search-plus" style="margin-right: 0"></i></button>
                     </div>
-                    <div class="graph-container" composer-widget widget="widget"></div>
                 </div>
+                <div class="graph-container" composer-widget widget="widget"></div>
             </div>
         </div>
         <div class="col-md-12" ng-if="monitorSSLVPNDetail.tab == 'Audit Monitoring'">
Index: /branches/amp_3_7/extensions/monitoring/webui/resource/sslvpn/sslvpn.html
===================================================================
--- /branches/amp_3_7/extensions/monitoring/webui/resource/sslvpn/sslvpn.html	(revision 2477)
+++ /branches/amp_3_7/extensions/monitoring/webui/resource/sslvpn/sslvpn.html	(working copy)
@@ -1,93 +1,119 @@
-<div class="row">
-    <div class="col-md-12">
-        <div class="widget">
-            <div class="table-toolbar">
-                <div class="btn-group">
-                    <button class="btn btn-link" title="{{ 'Refresh Service List' | T }}" ng-click="monitorSSLVPN.refresh()"><i class="fa fa-refresh"></i></button>
-                </div>
-                <div class="pull-right task-dropdown">
-                    <div style="margin-right:15px" ng-dropdown-multiselect="" checkboxes="true" translation-texts="multiSelectTransition" options="multiSelectData" selected-model="multiSelectModel" extra-settings="multiSelectSettings" events="multiSelectEvents">
-                    </div>
-                </div>
+<div class="col-md-12">
+    <div class="widget">
+        <div class="table-toolbar">
+            <div class="btn-group">
+                <button class="btn btn-link" title="{{ 'Refresh Service List' | T }}"
+                        ng-click="monitorSSLVPN.refresh()"><i class="fa fa-refresh"></i></button>
             </div>
-            <div class="table-container" st-table="displayedCollection" st-safe-src="monitorSSLVPN.serviceList">
-                <div class="table-responsive table-content">
-                    <table class="table table-striped table-hover">
-                        <thead>
-                            <tr>
-                                <th>No.</th>
-                                <th>{{ 'Service Name' | T }}</th>
-                                <th>{{ 'IP List' | T }}</th>
-                                <th>{{ 'Device Name' | T }}</th>
-                                <th>{{ 'Device Group' | T }}</th>
-                                <th ng-if="session_selected" st-sort="graph_data.sessions">{{ 'Sessions Number' | T }}</th>
-                                <th ng-if="cert_selected"> {{'Certificate Status' | T}}</th>
-                                <th ng-if="cert_selected"> {{'Expiration Date' | T}}</th>
-                            </tr>
-                            <tr>
-                                <th></th>
-                                <th>
-                                    <input st-search="name" placeholder="{{'Search by Service Name'|T}}" class="input-sm form-control" type="text" />
-                                </th>
-                                <th>
-                                    <input st-search="ip" placeholder="{{'Search by IP List'|T}}" class="input-sm form-control" type="text" />
-                                </th>
-                                <th>
-                                    <select class="input-sm form-control" st-input-event="change" st-search="device.name">
-                                        <option value="">{{'All'|T}}</option>
-                                        <option ng-repeat="row in monitorSSLVPN.serviceList | unique:'device.name'" value="{{row.device.name}}">{{row.device.name}}</option>
-                                    </select>
-                                </th>
-                                <th>
-                                    <select class="input-sm form-control" st-input-event="change" st-search="device.device_group">
-                                        <option value="">{{'All'|T}}</option>
-                                        <option ng-repeat="row in monitorSSLVPN.serviceList | unique:'device.device_group'" value="{{row.device.device_group}}">{{row.device.device_group}}</option>
-                                    </select>
-                                </th>
-                                <th ng-if="session_selected"></th>
-                                <th ng-if="cert_selected"></th>
-                                <th ng-if="cert_selected"></th>
-                            </tr>
-                        </thead>
-                        <tbody ng-hide="monitorSSLVPN.loading">
-                            <tr ng-repeat="item in displayedCollection">
-                                <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
-                                <td style="cursor: pointer;" ui-sref="index.monitoring.resource.sslvpn.detail({name: item.name, type: item.service_type, device_ip: item.device.ip})"> <a class="name">{{ item.name }}</a></td>
-                                <td>{{ item.ip }}</td>
-                                <td style="cursor: pointer;" ui-sref="index.monitoring.resource.device.detail({name: item.device.name, type: item.device.type, id: item.device.id})"> <a class="name">{{ item.device.name }}</a></td>
-                                <td>{{ item.device.device_group }}</td>
-                                <td ng-if="session_selected">{{ item.graph_data.sessions }}</td>
-                                <td ng-if="cert_selected">
-                                    <span ng-if="monitorSSLVPN.cert_status(item) === 'Normal'"><i class="fa fa-check-circle fa-fw normal" aria-hidden="true"></i>{{'Normal' | T}}</span>
-                                    <span ng-if="monitorSSLVPN.cert_status(item) === 'Warning'"><i class="fa fa-exclamation-circle fa-fw warning" aria-hidden="true"></i>{{'About to Expire' | T}}</span>
-                                    <span ng-if="monitorSSLVPN.cert_status(item) === 'Expired'"><i class="fa fa-times-circle fa-fw expired" aria-hidden="true"></i>{{'Expired' | T}}</span>
-                                    <span ng-if="monitorSSLVPN.cert_status(item) === 'NoCertificate'"><i class="fa fa-exclamation-triangle fa-fw danger" aria-hidden="true"></i>{{'No Certificate' | T}}</span>
-                                    <span ng-if="monitorSSLVPN.cert_status(item) === 'Loading'"><i class="fa fa-spinner fa-spin normal" aria-hidden="true"></i>{{'Loading' | T}}</span>
-                                </td>
-                                <td ng-if="cert_selected">{{ monitorSSLVPN.exp_time(item) }}</td>
-                            </tr>
-                            <tr ng-if="displayedCollection.length == 0">
-                                <td style="height: 48px;" colspan="{{monitorSSLVPN.gridColSpan}}" class="text-center">{{ 'You do not have any sslvpn service information.' | T }}</td>
-                            </tr>
-                        </tbody>
-                    </table>
+            <div class="pull-right task-dropdown">
+                <div style="margin-right:15px" ng-dropdown-multiselect="" checkboxes="true"
+                     translation-texts="multiSelectTransition" options="multiSelectData"
+                     selected-model="multiSelectModel" extra-settings="multiSelectSettings" events="multiSelectEvents">
                 </div>
-                <div style="text-align: center" ng-show="monitorSSLVPN.loading"><img src="app/images/loading.gif"></div>
-                <div class="table-pagination">
-                    <div class="pagination-detail"></div>
-                    <div class="pull-left">
-                        <label style="color:#9c9fa3;">
-                            &nbsp;&nbsp;&nbsp;{{'Every page displays'|T}}&nbsp;
-                            <select style="border-radius:4px; margin-top:-5px;" ng-model="pageSize" ng-options="item for item in [15,25,50,100]">
+            </div>
+        </div>
+        <div class="table-container" st-table="displayedCollection" st-safe-src="monitorSSLVPN.serviceList">
+            <div class="table-responsive table-content" style="width: 100%;">
+                <table class="table table-striped table-hover">
+                    <thead>
+                    <tr>
+                        <th>No.</th>
+                        <th>{{ 'Service Name' | T }}</th>
+                        <th>{{ 'IP List' | T }}</th>
+                        <th>{{ 'Device Name' | T }}</th>
+                        <th>{{ 'Device Group' | T }}</th>
+                        <th ng-if="session_selected" st-sort="graph_data.sessions">{{ 'Sessions Number' | T }}</th>
+                        <th ng-if="cert_selected"> {{'Certificate Status' | T}}</th>
+                        <th ng-if="cert_selected"> {{'Expiration Date' | T}}</th>
+                    </tr>
+                    <tr>
+                        <th></th>
+                        <th>
+                            <input st-search="name" placeholder="{{'Search by Service Name'|T}}"
+                                   class="input-sm form-control" type="text"/>
+                        </th>
+                        <th>
+                            <input st-search="ip" placeholder="{{'Search by IP List'|T}}" class="input-sm form-control"
+                                   type="text"/>
+                        </th>
+                        <th>
+                            <select class="input-sm form-control" st-input-event="change" st-search="device.name">
+                                <option value="">{{'All' | T}}</option>
+                                <option ng-repeat="row in monitorSSLVPN.serviceList | unique:'device.name'"
+                                        value="{{row.device.name}}">{{row.device.name}}
+                                </option>
+                            </select>
+                        </th>
+                        <th>
+                            <select class="input-sm form-control" st-input-event="change"
+                                    st-search="device.device_group">
+                                <option value="">{{'All' | T}}</option>
+                                <option ng-repeat="row in monitorSSLVPN.serviceList | unique:'device.device_group'"
+                                        value="{{row.device.device_group}}">{{row.device.device_group}}
+                                </option>
                             </select>
-                            &nbsp;{{'entries'|T}}
-                        </label>
-                    </div>
-                    <div class="pagination" st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)"></div>
+                        </th>
+                        <th ng-if="session_selected"></th>
+                        <th ng-if="cert_selected"></th>
+                        <th ng-if="cert_selected"></th>
+                    </tr>
+                    </thead>
+                    <tbody ng-hide="monitorSSLVPN.loading">
+                    <tr ng-repeat="item in displayedCollection">
+                        <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
+                        <td style="cursor: pointer;"
+                            ui-sref="index.monitoring.resource.sslvpn.detail({name: item.name, type: item.service_type, device_ip: item.device.ip})">
+                            <a class="name">{{ item.name }}</a></td>
+                        <td>{{ item.ip }}</td>
+                        <td style="cursor: pointer;"
+                            ui-sref="index.monitoring.resource.device.detail({name: item.device.name, type: item.device.type, id: item.device.id})">
+                            <a class="name">{{ item.device.name }}</a></td>
+                        <td>{{ item.device.device_group }}</td>
+                        <td ng-if="session_selected">{{ item.graph_data.sessions }}</td>
+                        <td ng-if="cert_selected">
+                            <span ng-if="monitorSSLVPN.cert_status(item) === 'Normal'"><i
+                                    class="fa fa-check-circle fa-fw normal"
+                                    aria-hidden="true"></i>{{'Normal' | T}}</span>
+                            <span ng-if="monitorSSLVPN.cert_status(item) === 'Warning'"><i
+                                    class="fa fa-exclamation-circle fa-fw warning"
+                                    aria-hidden="true"></i>{{'About to Expire' | T}}</span>
+                            <span ng-if="monitorSSLVPN.cert_status(item) === 'Expired'"><i
+                                    class="fa fa-times-circle fa-fw expired"
+                                    aria-hidden="true"></i>{{'Expired' | T}}</span>
+                            <span ng-if="monitorSSLVPN.cert_status(item) === 'NoCertificate'"><i
+                                    class="fa fa-exclamation-triangle fa-fw danger"
+                                    aria-hidden="true"></i>{{'No Certificate' | T}}</span>
+                            <span ng-if="monitorSSLVPN.cert_status(item) === 'Loading'"><i
+                                    class="fa fa-spinner fa-spin normal" aria-hidden="true"></i>{{'Loading' | T}}</span>
+                        </td>
+                        <td ng-if="cert_selected">{{ monitorSSLVPN.exp_time(item) }}</td>
+                    </tr>
+                    <tr ng-if="displayedCollection.length == 0">
+                        <td style="height: 48px;" colspan="8" class="text-center">
+                            {{ 'You do not have any sslvpn service information.' | T }}
+                        </td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div style="text-align: center" ng-show="monitorSSLVPN.loading"><img src="app/images/loading.gif"></div>
+            <div class="table-pagination">
+                <div class="pagination-detail"></div>
+                <div class="pull-left">
+                    <label style="color:#9c9fa3;">
+                        &nbsp;&nbsp;&nbsp;{{'Every page displays' | T}}&nbsp;
+                        <select style="border-radius:4px; margin-top:-5px;" ng-model="pageSize"
+                                ng-options="item for item in [15,25,50,100]">
+                        </select>
+                        &nbsp;{{'entries' | T}}
+                    </label>
                 </div>
+                <div class="pagination" st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5"
+                     st-page-change="onPageChange(newPage)"></div>
             </div>
-            <!-- <div style="text-align: center" ng-if="monitorSSLVPN.loading"><img src="app/images/loading.gif"></div> -->
+            <br>
         </div>
+        <!-- <div style="text-align: center" ng-if="monitorSSLVPN.loading"><img src="app/images/loading.gif"></div> -->
     </div>
 </div>
 
Index: /branches/amp_3_7/extensions/vpn_mgmt/webui/acl/acl.html
===================================================================
--- /branches/amp_3_7/extensions/vpn_mgmt/webui/acl/acl.html	(revision 2477)
+++ /branches/amp_3_7/extensions/vpn_mgmt/webui/acl/acl.html	(working copy)
@@ -1,64 +1,74 @@
-<div class="row">
-    <div class="col-md-12">
-        <div class="widget">
-            <div class="table-toolbar">
-                <div class="btn-group">
-                    <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="VSiteACL.refresh()"><i class="fa fa-refresh"></i></button>
-                    <button class="btn btn-link" title="{{ 'Add' | T }}" ng-click="VSiteACL.showAddModal()"><i class="fa fa-plus-circle"></i></button>
-                </div>
+<div class="col-md-12">
+    <div class="widget">
+        <div class="table-toolbar">
+            <div class="btn-group">
+                <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="VSiteACL.refresh()"><i
+                        class="fa fa-refresh an-tab-icon"></i></button>
+                <button class="btn btn-link" title="{{ 'Add' | T }}" ng-click="VSiteACL.showAddModal()"><i
+                        class="fa fa-plus-circle an-tab-icon"></i></button>
             </div>
-            <div class="table-wrapper">
-                <table st-table="displayedCollection" st-safe-src="VSiteACL.tableData" class="table table-hover table-striped">
-                    <thead>
-                    <tr>
-                        <th class="d-num">No.</th>
-                        <th class="d-name">{{ 'Name' | T }}</th>
-                        <th class="d-type">{{ 'Type' | T }}</th>
-                        <th class="d-desc">{{ 'Description' | T }}</th>
-                        <th class="d-editable">{{ 'Editable' | T }}</th>
-                        <th class="d-action">{{ 'Action' | T }}</th>
-                    </tr>
-                    <tr>
-                        <th></th>
-                        <th>
-                            <input st-search="name" placeholder="{{'Search by Name'|T}}" class="input-sm form-control" type="text" />
-                        </th>
-                        <th></th>
-                        <th></th>
-                        <th></th>
-                        <th></th>
-                    </tr>
-                    </thead>
-                    <tbody ng-if="!VSiteACL.loading">
-                    <tr ng-repeat="item in displayedCollection">
-                        <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
-                        <td>
-                            <a class="name" ui-sref="index.vsite_list.detail.acl.detail({service_name:VSiteACL.vsite_name, device_name:VSiteACL.device_name, acl_name:item.name})">{{ item.name }}</a>
-                        </td>
-                        <td>{{ VSiteACL.res_type(item.type) }}</td>
-                        <td>{{ item.desc }}</td>
-                        <td>
-                            <div class="btn-group">
-                                <button style="color:#5cb85c" ng-if="item.editable === true" class="btn btn-link"><i class="fa fa-check-circle"></i></button>
-                                <button style="color:#e02f44" ng-if="item.editable === false" class="btn btn-link" title="{{'This entry is automatically generated and could not be edited or removed'|T}}"><i class="fa fa-times-circle"></i></button>
-                            </div>
-                        </td>
-                        <td style="padding-left: 0">
-                            <button ng-if="item.editable === true" class="btn-link" title="{{ 'Delete' | T }}" ng-click="VSiteACL.delete(item)"><i class="array-delete"></i></button>
-                            <button ng-if="item.editable === true" class="btn-link" title="{{ 'Sync' | T }}" ng-click="VSiteACL.sync(item)"><i class="array-init"></i></button>
-                        </td>
-                    </tr>
-                    </tbody>
-                    <tfoot>
-                    <tr>
-                        <td colspan="6" class="text-center">
-                            <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)"></div>
-                        </td>
-                    </tr>
-                    </tfoot>
-                </table>
-            </div>
-            <div style="text-align: center" ng-if="VSiteACL.loading"><img src="app/images/loading.gif"></div>
         </div>
+        <div class="table-wrapper">
+            <table st-table="displayedCollection" st-safe-src="VSiteACL.tableData"
+                   class="table table-hover table-striped">
+                <thead>
+                <tr>
+                    <th class="d-num">No.</th>
+                    <th class="d-name">{{ 'Name' | T }}</th>
+                    <th class="d-type">{{ 'Type' | T }}</th>
+                    <th class="d-desc">{{ 'Description' | T }}</th>
+                    <th class="d-editable">{{ 'Editable' | T }}</th>
+                    <th class="d-action">{{ 'Action' | T }}</th>
+                </tr>
+                <tr>
+                    <th></th>
+                    <th>
+                        <input st-search="name" placeholder="{{'Search by Name'|T}}" class="input-sm form-control"
+                               type="text"/>
+                    </th>
+                    <th></th>
+                    <th></th>
+                    <th></th>
+                    <th></th>
+                </tr>
+                </thead>
+                <tbody ng-if="!VSiteACL.loading">
+                <tr ng-repeat="item in displayedCollection">
+                    <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
+                    <td>
+                        <a class="name"
+                           ui-sref="index.vsite_list.detail.acl.detail({service_name:VSiteACL.vsite_name, device_name:VSiteACL.device_name, acl_name:item.name})">{{ item.name
+                            }}</a>
+                    </td>
+                    <td>{{ VSiteACL.res_type(item.type) }}</td>
+                    <td>{{ item.desc }}</td>
+                    <td>
+                        <div class="btn-group">
+                            <button style="color:#5cb85c" ng-if="item.editable === true" class="btn btn-link"><i
+                                    class="fa fa-check-circle"></i></button>
+                            <button style="color:#e02f44" ng-if="item.editable === false" class="btn btn-link"
+                                    title="{{'This entry is automatically generated and could not be edited or removed'|T}}">
+                                <i class="fa fa-times-circle"></i></button>
+                        </div>
+                    </td>
+                    <td style="padding-left: 0">
+                        <button ng-if="item.editable === true" class="btn-link" title="{{ 'Delete' | T }}"
+                                ng-click="VSiteACL.delete(item)"><i class="array-delete an-row-icon"></i></button>
+                        <button ng-if="item.editable === true" class="btn-link" title="{{ 'Sync' | T }}"
+                                ng-click="VSiteACL.sync(item)"><i class="array-init an-row-icon"></i></button>
+                    </td>
+                </tr>
+                </tbody>
+                <tfoot>
+                <tr>
+                    <td colspan="6" class="text-center">
+                        <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5"
+                             st-page-change="onPageChange(newPage)"></div>
+                    </td>
+                </tr>
+                </tfoot>
+            </table>
+        </div>
+        <div style="text-align: center" ng-if="VSiteACL.loading"><img src="app/images/loading.gif"></div>
     </div>
 </div>
Index: /branches/amp_3_7/extensions/vpn_mgmt/webui/acl/acl_detail.html
===================================================================
--- /branches/amp_3_7/extensions/vpn_mgmt/webui/acl/acl_detail.html	(revision 2477)
+++ /branches/amp_3_7/extensions/vpn_mgmt/webui/acl/acl_detail.html	(working copy)
@@ -2,16 +2,24 @@
     <div ncy-breadcrumb></div>
     <div class="tab-wrapper">
         <ul class="nav nav-tabs">
-            <li role="presentation" ng-class="{ active: url_contain('/vsite_list/detail/{{ device_name }}/{{ current_name }}/acl/{{ acl_name }}/resource') }">
-                <a ui-sref="index.vsite_list.detail.acl.detail.resource">{{ 'ACL Resource' | T }}</a>
+            <li role="presentation"
+                ng-class="{ active: url_contain('/vsite_list/detail/{{ device_name }}/{{ current_name }}/acl/{{ acl_name }}/resource') }">
+                <a ui-sref="index.vsite_list.detail.acl.detail.resource"><span class="tab-header">{{ 'ACL Resource' | T
+                    }}</span></a>
             </li>
-            <li role="presentation" ng-class="{ active: url_contain('/vsite_list/detail/{{ device_name }}/{{ current_name }}/acl/{{ acl_name }}/rule') }">
-                <a ui-sref="index.vsite_list.detail.acl.detail.rule">{{ 'Rule' | T }}</a>
+            <li role="presentation"
+                ng-class="{ active: url_contain('/vsite_list/detail/{{ device_name }}/{{ current_name }}/acl/{{ acl_name }}/rule') }">
+                <a ui-sref="index.vsite_list.detail.acl.detail.rule"><span class="tab-header">{{ 'Rule' | T
+                    }}</span></a>
             </li>
         </ul>
     </div>
     <div class="content-wrapper">
-        <div class="" ng-show="url_contain('/vsite_list/detail/{{ device_name }}/{{ current_name }}/acl/{{ acl_name }}/resource')" ui-view="resource"></div>
-        <div class="" ng-show="url_contain('/vsite_list/detail/{{ device_name }}/{{ current_name }}/acl/{{ acl_name }}/rule')" ui-view="rule"></div>
+        <div class=""
+             ng-show="url_contain('/vsite_list/detail/{{ device_name }}/{{ current_name }}/acl/{{ acl_name }}/resource')"
+             ui-view="resource"></div>
+        <div class=""
+             ng-show="url_contain('/vsite_list/detail/{{ device_name }}/{{ current_name }}/acl/{{ acl_name }}/rule')"
+             ui-view="rule"></div>
     </div>
 </div>
Index: /branches/amp_3_7/extensions/vpn_mgmt/webui/acl/acl_resource_gp_add.html
===================================================================
--- /branches/amp_3_7/extensions/vpn_mgmt/webui/acl/acl_resource_gp_add.html	(revision 2477)
+++ /branches/amp_3_7/extensions/vpn_mgmt/webui/acl/acl_resource_gp_add.html	(working copy)
@@ -1,6 +1,6 @@
 <div class="modal-header">
     <button type="button" class="close" ng-click="ACLResourceGroupAdd.modalClose()">&times;</button>
-    <h4 class="modal-title">{{'Add a New ACL Resource Group'|T}}</h4>
+    <h6 class="modal-title">{{'Add a New ACL Resource Group'|T}}</h6>
 </div>
 
 <div class="modal-body">
Index: /branches/amp_3_7/extensions/vpn_mgmt/webui/acl/acl_resource_gp_sync.html
===================================================================
--- /branches/amp_3_7/extensions/vpn_mgmt/webui/acl/acl_resource_gp_sync.html	(revision 2477)
+++ /branches/amp_3_7/extensions/vpn_mgmt/webui/acl/acl_resource_gp_sync.html	(working copy)
@@ -1,6 +1,6 @@
 <div class="modal-header">
     <button type="button" class="close" ng-click="ACLResourceSync.modalClose()">&times;</button>
-    <h4 class="modal-title">{{'Sync ACL Resource Group'|T}}</h4>
+    <h6 class="modal-title">{{'Sync ACL Resource Group'|T}}</h6>
 </div>
 
 <div class="modal-body">
Index: /branches/amp_3_7/extensions/vpn_mgmt/webui/acl/detail_pages/resource.html
===================================================================
--- /branches/amp_3_7/extensions/vpn_mgmt/webui/acl/detail_pages/resource.html	(revision 2477)
+++ /branches/amp_3_7/extensions/vpn_mgmt/webui/acl/detail_pages/resource.html	(working copy)
@@ -1,42 +1,47 @@
-<div class="row">
-    <div class="col-md-12">
-        <div class="widget">
-            <div class="table-toolbar">
-                <div class="btn-group">
-                    <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="VSiteACLResource.refresh()"><i class="fa fa-refresh"></i></button>
-                    <button ng-if="VSiteACLResource.editable" class="btn btn-link" title="{{ 'Add' | T }}" ng-click="VSiteACLResource.showAddModal()"><i class="fa fa-plus-circle"></i></button>
-                </div>
+<div class="col-md-12">
+    <div class="widget">
+        <div class="table-toolbar">
+            <div class="btn-group">
+                <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="VSiteACLResource.refresh()"><i
+                        class="fa fa-refresh an-tab-icon"></i></button>
+                <button ng-if="VSiteACLResource.editable" class="btn btn-link" title="{{ 'Add' | T }}"
+                        ng-click="VSiteACLResource.showAddModal()"><i class="fa fa-plus-circle an-tab-icon"></i>
+                </button>
             </div>
-            <div class="table-wrapper">
-                <table st-table="displayedCollection" st-safe-src="VSiteACLResource.tableData" class="table table-hover table-striped">
-                    <thead>
-                    <tr>
-                        <th class="d-num">No.</th>
-                        <th class="d-name">{{ 'Resource' | T }}</th>
-                        <th class="d-action">{{ 'Action' | T }}</th>
-                    </tr>
-                    </thead>
-                    <tbody ng-if="!VSiteACLResource.loading">
-                    <tr ng-repeat="item in displayedCollection">
-                        <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
-                        <td>
-                            {{ item.resource }}
-                        </td>
-                        <td>
-                            <button ng-if="VSiteACLResource.editable" class="btn-link" title="{{ 'Delete' | T }}" ng-click="VSiteACLResource.delete(item)"><i class="array-delete"></i></button>
-                        </td>
-                    </tr>
-                    </tbody>
-                    <tfoot>
-                    <tr>
-                        <td colspan="3" class="text-center">
-                            <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)"></div>
-                        </td>
-                    </tr>
-                    </tfoot>
-                </table>
-            </div>
-            <div style="text-align: center" ng-if="VSiteACLResource.loading"><img src="app/images/loading.gif"></div>
         </div>
+        <div class="table-wrapper">
+            <table st-table="displayedCollection" st-safe-src="VSiteACLResource.tableData"
+                   class="table table-hover table-striped">
+                <thead>
+                <tr>
+                    <th class="d-num">No.</th>
+                    <th class="d-name">{{ 'Resource' | T }}</th>
+                    <th class="d-action">{{ 'Action' | T }}</th>
+                </tr>
+                </thead>
+                <tbody ng-if="!VSiteACLResource.loading">
+                <tr ng-repeat="item in displayedCollection">
+                    <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
+                    <td>
+                        {{ item.resource }}
+                    </td>
+                    <td>
+                        <button ng-if="VSiteACLResource.editable" class="btn-link" title="{{ 'Delete' | T }}"
+                                ng-click="VSiteACLResource.delete(item)"><i class="array-delete an-row-icon"></i>
+                        </button>
+                    </td>
+                </tr>
+                </tbody>
+                <tfoot>
+                <tr>
+                    <td colspan="3" class="text-center">
+                        <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5"
+                             st-page-change="onPageChange(newPage)"></div>
+                    </td>
+                </tr>
+                </tfoot>
+            </table>
+        </div>
+        <div style="text-align: center" ng-if="VSiteACLResource.loading"><img src="app/images/loading.gif"></div>
     </div>
 </div>
Index: /branches/amp_3_7/extensions/vpn_mgmt/webui/acl/detail_pages/resource_add.html
===================================================================
--- /branches/amp_3_7/extensions/vpn_mgmt/webui/acl/detail_pages/resource_add.html	(revision 2477)
+++ /branches/amp_3_7/extensions/vpn_mgmt/webui/acl/detail_pages/resource_add.html	(working copy)
@@ -1,6 +1,6 @@
 <div class="modal-header">
     <button type="button" class="close" ng-click="VPNACLResourceAdd.modalClose()">&times;</button>
-    <h4 class="modal-title">{{'Add a New ACL Resource'|T}}</h4>
+    <h6 class="modal-title">{{'Add a New ACL Resource'|T}}</h6>
 </div>
 
 <div class="modal-body">
Index: /branches/amp_3_7/extensions/vpn_mgmt/webui/acl/detail_pages/rule.html
===================================================================
--- /branches/amp_3_7/extensions/vpn_mgmt/webui/acl/detail_pages/rule.html	(revision 2477)
+++ /branches/amp_3_7/extensions/vpn_mgmt/webui/acl/detail_pages/rule.html	(working copy)
@@ -1,54 +1,57 @@
-<div class="row">
-    <div class="col-md-12">
-        <div class="widget">
-            <div class="table-toolbar">
-                <div class="btn-group">
-                    <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="VSiteACLRule.refresh()"><i class="fa fa-refresh"></i></button>
-                    <button ng-if="VSiteACLRule.editable" class="btn btn-link" title="{{ 'Add' | T }}" ng-click="VSiteACLRule.showAddModal()"><i class="fa fa-plus-circle"></i></button>
-                </div>
+<div class="col-md-12">
+    <div class="widget">
+        <div class="table-toolbar">
+            <div class="btn-group">
+                <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="VSiteACLRule.refresh()"><i
+                        class="fa fa-refresh an-tab-icon"></i></button>
+                <button ng-if="VSiteACLRule.editable" class="btn btn-link" title="{{ 'Add' | T }}"
+                        ng-click="VSiteACLRule.showAddModal()"><i class="fa fa-plus-circle an-tab-icon"></i></button>
             </div>
-            <div class="table-wrapper">
-                <table st-table="displayedCollection" st-safe-src="VSiteACLRule.tableData" class="table table-hover table-striped">
-                    <thead>
-                    <tr>
-                        <th class="d-num">No.</th>
-                        <th class="d-type">{{ 'Target Type' | T }}</th>
-                        <th class="d-name">{{ 'Target Name' | T }}</th>
-                        <th class="d-action">{{ 'Action' | T }}</th>
-                        <th class="d-pri">{{ 'Priority' | T }}</th>
-                        <th class="d-action">{{ '' | T }}</th>
-                    </tr>
-                    </thead>
-                    <tbody ng-if="!VSiteACLRule.loading">
-                    <tr ng-repeat="item in displayedCollection">
-                        <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
-                        <td>
-                            {{ VSiteACLRule.display_type(item.target_type) }}
-                        </td>
-                        <td>
-                            {{ item.target_name }}
-                        </td>
-                        <td>
-                            {{ VSiteACLRule.display_action(item.action) }}
-                        </td>
-                        <td>
-                            {{ item.priority }}
-                        </td>
-                        <td>
-                            <button ng-if="VSiteACLRule.editable" class="btn-link" title="{{ 'Delete' | T }}" ng-click="VSiteACLRule.delete(item)"><i class="array-delete"></i></button>
-                        </td>
-                    </tr>
-                    </tbody>
-                    <tfoot>
-                    <tr>
-                        <td colspan="3" class="text-center">
-                            <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)"></div>
-                        </td>
-                    </tr>
-                    </tfoot>
-                </table>
-            </div>
-            <div style="text-align: center" ng-if="VSiteACLRule.loading"><img src="app/images/loading.gif"></div>
         </div>
+        <div class="table-wrapper">
+            <table st-table="displayedCollection" st-safe-src="VSiteACLRule.tableData"
+                   class="table table-hover table-striped">
+                <thead>
+                <tr>
+                    <th class="d-num">No.</th>
+                    <th class="d-type">{{ 'Target Type' | T }}</th>
+                    <th class="d-name">{{ 'Target Name' | T }}</th>
+                    <th class="d-action">{{ 'Action' | T }}</th>
+                    <th class="d-pri">{{ 'Priority' | T }}</th>
+                    <th class="d-action">{{ '' | T }}</th>
+                </tr>
+                </thead>
+                <tbody ng-if="!VSiteACLRule.loading">
+                <tr ng-repeat="item in displayedCollection">
+                    <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
+                    <td>
+                        {{ VSiteACLRule.display_type(item.target_type) }}
+                    </td>
+                    <td>
+                        {{ item.target_name }}
+                    </td>
+                    <td>
+                        {{ VSiteACLRule.display_action(item.action) }}
+                    </td>
+                    <td>
+                        {{ item.priority }}
+                    </td>
+                    <td>
+                        <button ng-if="VSiteACLRule.editable" class="btn-link" title="{{ 'Delete' | T }}"
+                                ng-click="VSiteACLRule.delete(item)"><i class="array-delete an-row-icon"></i></button>
+                    </td>
+                </tr>
+                </tbody>
+                <tfoot>
+                <tr>
+                    <td colspan="3" class="text-center">
+                        <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5"
+                             st-page-change="onPageChange(newPage)"></div>
+                    </td>
+                </tr>
+                </tfoot>
+            </table>
+        </div>
+        <div style="text-align: center" ng-if="VSiteACLRule.loading"><img src="app/images/loading.gif"></div>
     </div>
 </div>
Index: /branches/amp_3_7/extensions/vpn_mgmt/webui/acl/detail_pages/rule_add.html
===================================================================
--- /branches/amp_3_7/extensions/vpn_mgmt/webui/acl/detail_pages/rule_add.html	(revision 2477)
+++ /branches/amp_3_7/extensions/vpn_mgmt/webui/acl/detail_pages/rule_add.html	(working copy)
@@ -1,6 +1,6 @@
 <div class="modal-header">
     <button type="button" class="close" ng-click="VPNACLRuleAdd.modalClose()">&times;</button>
-    <h4 class="modal-title">{{'Add a New ACL Rule'|T}}</h4>
+    <h6 class="modal-title">{{'Add a New ACL Rule'|T}}</h6>
 </div>
 
 <div class="modal-body">
Index: /branches/amp_3_7/extensions/vpn_mgmt/webui/hardwareid/hardwareid.html
===================================================================
--- /branches/amp_3_7/extensions/vpn_mgmt/webui/hardwareid/hardwareid.html	(revision 2477)
+++ /branches/amp_3_7/extensions/vpn_mgmt/webui/hardwareid/hardwareid.html	(working copy)
@@ -1,87 +1,102 @@
-<div class="row">
-    <div class="col-md-12">
-        <div class="widget">
-            <div class="table-toolbar">
-                <div class="btn-group">
-                    <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="VsiteHardwareid.refresh()"><i class="fa fa-refresh"></i></button>
-                    <button class="btn btn-link" title="{{ 'Add' | T }}" ng-click="VsiteHardwareid.showAddModal()"><i class="fa fa-plus-circle"></i></button>
-                    <button class="btn btn-link" title="{{ 'Delete Selected Rules' | T }}" ng-click="VsiteHardwareid.delete_multi()"><i class="array-delete"></i></button>
-                    <button class="btn btn-link" title="{{ 'Sync Selected Rules' | T }}" ng-click="VsiteHardwareid.sync_multi()"><i class="array-init"></i></button>
-                    <button class="btn btn-link" title="{{ 'Approve Selected Rules' | T }}" ng-click="VsiteHardwareid.approve_multi()"><i class="fa fa-check-circle"></i></button>
-                    <button class="btn btn-link" title="{{ 'Deny Selected Rules' | T }}" ng-click="VsiteHardwareid.deny_multi()"><i class="fa fa-ban"></i></button>
-                </div>
+<div class="col-md-12">
+    <div class="widget">
+        <div class="table-toolbar">
+            <div class="btn-group">
+                <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="VsiteHardwareid.refresh()"><i
+                        class="fa fa-refresh an-tab-icon"></i></button>
+                <button class="btn btn-link" title="{{ 'Add' | T }}" ng-click="VsiteHardwareid.showAddModal()"><i
+                        class="fa fa-plus-circle an-tab-icon"></i></button>
+                <button class="btn btn-link" title="{{ 'Delete Selected Rules' | T }}"
+                        ng-click="VsiteHardwareid.delete_multi()"><i class="array-delete an-tab-icon"></i></button>
+                <button class="btn btn-link" title="{{ 'Sync Selected Rules' | T }}"
+                        ng-click="VsiteHardwareid.sync_multi()"><i class="array-init an-tab-icon"></i></button>
+                <button class="btn btn-link" title="{{ 'Approve Selected Rules' | T }}"
+                        ng-click="VsiteHardwareid.approve_multi()"><i class="fa fa-check-circle an-tab-icon"></i>
+                </button>
+                <button class="btn btn-link" title="{{ 'Deny Selected Rules' | T }}"
+                        ng-click="VsiteHardwareid.deny_multi()"><i class="fa fa-ban an-tab-icon"></i></button>
             </div>
-            <div class="table-wrapper">
-                <table st-table="VsiteHardwareid.tableData" st-pipe="VsiteHardwareid.myServer" class="table table-hover table-striped">
-                    <thead>
-                    <tr>
-                        <th class="d-checkbox">
-                            <input type="checkbox" ng-click="VsiteHardwareid.select_all()" ng-model="VsiteHardwareid.select_all_val">
-                        </th>
-                        <th class="d-num">No.</th>
-                        <th class="d-category" st-sort="type">{{ 'Category' | T }}</th>
-                        <th class="d-name" st-sort="name">{{ 'Name' | T }}</th>
-                        <th class="d-hid" st-sort="hardwareid">{{ 'Hardware ID' | T }}</th>
-                        <th class="d-status" st-sort="status">{{ 'Status' | T }}</th>
-                        <th class="d-hname" st-sort="hostname">{{ 'Host Name' | T }}</th>
-                        <th class="d-action">{{ 'Action' | T }}</th>
-                    </tr>
-                    <tr>
-                        <th></th>
-                        <th></th>
-                        <th>
-                            <select class="input-sm form-control" st-input-event="change" st-search="category">
-                                <option value="">{{'All'|T}}</option>
-                                <option value="group">{{'Group'|T}}</option>
-                                <option value="account">{{'Account'|T}}</option>
-                            </select>
-                        </th>
-                        <th colspan="2">
-                            <input st-search="search" placeholder="{{'Search by Name or Hardware ID'|T}}" class="input-sm form-control" type="search"/>
-                        </th>
-                        <th>
-                            <select class="input-sm form-control" st-input-event="change" st-search="status">
-                                <option value="">{{'All'|T}}</option>
-                                <option value="pending">{{'Pending'|T}}</option>
-                                <option value="approve">{{'Approved'|T}}</option>
-                                <option value="deny">{{'Denied'|T}}</option>
-                            </select>
-                        </th>
-                        <th></th>
-                        <th></th>
-                    </tr>
-                    </thead>
-                    <tbody ng-if="!VsiteHardwareid.loading">
-                    <tr st-select-row="row" st-select-mode="multiple" ng-repeat="item in VsiteHardwareid.tableData">
-                        <td>
-                            <input type="checkbox" ng-click="VsiteHardwareid.select(item)" ng-model="item.checkbox">
-                        </td>
-                        <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
-                        <td>{{ VsiteHardwareid.category_display(item.category) }}</td>
-                        <td>{{ item.name }}</td>
-                        <td>
-                            {{ item.hardware_id }}
-                        </td>
-                        <td>{{ VsiteHardwareid.status_display(item.status) }}</td>
-                        <td>{{ item.host_name }}</td>
-                        <td style="padding-left: 0">
-                            <button ng-if="item.status!='deny'" class="btn-link" title="{{ 'Deny' | T }}" ng-click="VsiteHardwareid.deny(item)"><i class="fa fa-ban"></i></button>
-                            <button ng-if="item.status!='approve'" class="btn-link" title="{{ 'Approve' | T }}" ng-click="VsiteHardwareid.approve(item)"><i class="fa fa-check-circle"></i></button>
-                            <button class="btn-link" title="{{ 'Delete' | T }}" ng-click="VsiteHardwareid.delete(item)"><i class="array-delete"></i></button>
-                            <button class="btn-link" title="{{ 'Sync' | T }}" ng-click="VsiteHardwareid.sync(item)"><i class="array-init"></i></button>
-                        </td>
-                    </tr>
-                    </tbody>
-                    <tfoot>
-                        <tr>
-                            <td colspan="9" class="text-center">
-                                <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="10" st-page-change="onPageChange(newPage)"st-template="app/modules/common/templates/page.html"></div>
-                            </td>
-                        </tr>
-                    </tfoot>
-                </table>
-            </div>
-            <div style="text-align: center" ng-if="VsiteHardwareid.loading"><img src="app/images/loading.gif"></div>
         </div>
+        <div class="table-wrapper">
+            <table st-table="VsiteHardwareid.tableData" st-pipe="VsiteHardwareid.myServer"
+                   class="table table-hover table-striped" style="width: 100%;">
+                <thead>
+                <tr>
+                    <th class="d-checkbox">
+                        <input type="checkbox" ng-click="VsiteHardwareid.select_all()"
+                               ng-model="VsiteHardwareid.select_all_val">
+                    </th>
+                    <th class="d-num">No.</th>
+                    <th class="d-category" st-sort="type">{{ 'Category' | T }}</th>
+                    <th class="d-name" st-sort="name">{{ 'Name' | T }}</th>
+                    <th class="d-hid" st-sort="hardwareid">{{ 'Hardware ID' | T }}</th>
+                    <th class="d-status" st-sort="status">{{ 'Status' | T }}</th>
+                    <th class="d-hname" st-sort="hostname">{{ 'Host Name' | T }}</th>
+                    <th class="d-action">{{ 'Action' | T }}</th>
+                </tr>
+                <tr>
+                    <th></th>
+                    <th></th>
+                    <th>
+                        <select class="input-sm form-control" st-input-event="change" st-search="category">
+                            <option value="">{{'All' | T}}</option>
+                            <option value="group">{{'Group' | T}}</option>
+                            <option value="account">{{'Account' | T}}</option>
+                        </select>
+                    </th>
+                    <th colspan="2">
+                        <input st-search="search" placeholder="{{'Search by Name or Hardware ID'|T}}"
+                               class="input-sm form-control" type="search"/>
+                    </th>
+                    <th>
+                        <select class="input-sm form-control" st-input-event="change" st-search="status">
+                            <option value="">{{'All' | T}}</option>
+                            <option value="pending">{{'Pending' | T}}</option>
+                            <option value="approve">{{'Approved' | T}}</option>
+                            <option value="deny">{{'Denied' | T}}</option>
+                        </select>
+                    </th>
+                    <th></th>
+                    <th></th>
+                </tr>
+                </thead>
+                <tbody ng-if="!VsiteHardwareid.loading">
+                <tr st-select-row="row" st-select-mode="multiple" ng-repeat="item in VsiteHardwareid.tableData">
+                    <td>
+                        <input type="checkbox" ng-click="VsiteHardwareid.select(item)" ng-model="item.checkbox">
+                    </td>
+                    <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
+                    <td>{{ VsiteHardwareid.category_display(item.category) }}</td>
+                    <td>{{ item.name }}</td>
+                    <td>
+                        {{ item.hardware_id }}
+                    </td>
+                    <td>{{ VsiteHardwareid.status_display(item.status) }}</td>
+                    <td>{{ item.host_name }}</td>
+                    <td style="padding-left: 0">
+                        <button ng-if="item.status!='deny'" class="btn-link" title="{{ 'Deny' | T }}"
+                                ng-click="VsiteHardwareid.deny(item)"><i class="fa fa-ban an-row-icon"></i></button>
+                        <button ng-if="item.status!='approve'" class="btn-link" title="{{ 'Approve' | T }}"
+                                ng-click="VsiteHardwareid.approve(item)"><i class="fa fa-check-circle an-row-icon"></i>
+                        </button>
+                        <button class="btn-link" title="{{ 'Delete' | T }}" ng-click="VsiteHardwareid.delete(item)">
+                            <i class="array-delete an-row-icon"></i></button>
+                        <button class="btn-link" title="{{ 'Sync' | T }}" ng-click="VsiteHardwareid.sync(item)"><i
+                                class="array-init an-row-icon"></i></button>
+                    </td>
+                </tr>
+                </tbody>
+                <tfoot>
+                <tr>
+                    <td colspan="9" class="text-center">
+                        <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="10"
+                             st-page-change="onPageChange(newPage)"
+                             st-template="app/modules/common/templates/page.html"></div>
+                    </td>
+                </tr>
+                </tfoot>
+            </table>
+        </div>
+        <div style="text-align: center" ng-if="VsiteHardwareid.loading"><img src="app/images/loading.gif"></div>
     </div>
 </div>
Index: /branches/amp_3_7/extensions/vpn_mgmt/webui/hardwareid/hardwareid_rule_add.html
===================================================================
--- /branches/amp_3_7/extensions/vpn_mgmt/webui/hardwareid/hardwareid_rule_add.html	(revision 2477)
+++ /branches/amp_3_7/extensions/vpn_mgmt/webui/hardwareid/hardwareid_rule_add.html	(working copy)
@@ -1,6 +1,6 @@
 <div class="modal-header">
     <button type="button" class="close" ng-click="HardwareIDRuleAdd.modalClose()">&times;</button>
-    <h4 class="modal-title">{{'Add a New Hardware ID Rule'|T}}</h4>
+    <h6 class="modal-title">{{'Add a New Hardware ID Rule'|T}}</h6>
 </div>
 
 <div class="modal-body">
Index: /branches/amp_3_7/extensions/vpn_mgmt/webui/hardwareid/hardwareid_rule_sync.html
===================================================================
--- /branches/amp_3_7/extensions/vpn_mgmt/webui/hardwareid/hardwareid_rule_sync.html	(revision 2477)
+++ /branches/amp_3_7/extensions/vpn_mgmt/webui/hardwareid/hardwareid_rule_sync.html	(working copy)
@@ -1,6 +1,6 @@
 <div class="modal-header">
     <button type="button" class="close" ng-click="HardwareIDRuleSync.modalClose()">&times;</button>
-    <h4 class="modal-title">{{'Sync Hardware ID Rules'|T}}</h4>
+    <h6 class="modal-title">{{'Sync Hardware ID Rules' | T}}</h6>
 </div>
 
 <div class="modal-body">
@@ -9,10 +9,15 @@
             <form class="form-horizontal" name="general" verify-scope="tipStyle: 1">
                 <div class="form-group">
                     <label class="col-md-3 control-label">{{ 'Virtual Site' | T }}</label>
-                    <div class="col-md-8" ng-if="!HardwareIDRuleSync.get_loading()" style="text-align: center"><img src="app/images/loading.gif"></div>
+                    <div class="col-md-8" ng-if="!HardwareIDRuleSync.get_loading()" style="text-align: center"><img
+                            src="app/images/loading.gif"></div>
                     <div class="col-md-8" ng-if="HardwareIDRuleSync.get_loading()">
-                        <select ng-verify bs-select multiple class="form-control selectpicker" placeholder="" ng-model="HardwareIDRuleSync.data.vsite">
-                            <option value="{{ item.name + ',' + item.device.name }}" ng-repeat="item in HardwareIDRuleSync.serviceList">{{ item.name }} ({{ item.device.name }})</option>
+                        <select ng-verify bs-select multiple class="form-control selectpicker" placeholder=""
+                                ng-model="HardwareIDRuleSync.data.vsite">
+                            <option value="{{ item.name + ',' + item.device.name }}"
+                                    ng-repeat="item in HardwareIDRuleSync.serviceList">{{ item.name }}
+                                ({{ item.device.name }})
+                            </option>
                         </select>
                     </div>
                 </div>
@@ -21,6 +26,8 @@
     </div>
 </div>
 <div class="modal-footer">
-    <button ng-disabled="!HardwareIDRuleSync.data.vsite.length" type="button" class="btn btn-primary" ng-click="HardwareIDRuleSync.save(HardwareIDRuleSync.data)">{{'Sync'|T}}</button>
-    <button type="button" class="btn btn-default" ng-click="HardwareIDRuleSync.modalClose()">{{'Cancel'|T}}</button>
+    <button ng-disabled="!HardwareIDRuleSync.data.vsite.length" type="button" class="btn btn-primary"
+            ng-click="HardwareIDRuleSync.save(HardwareIDRuleSync.data)">{{'Sync' | T}}
+    </button>
+    <button type="button" class="btn btn-default" ng-click="HardwareIDRuleSync.modalClose()">{{'Cancel' | T}}</button>
 </div>
\ No newline at end of file
Index: /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/detail_pages/app.html
===================================================================
--- /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/detail_pages/app.html	(revision 2477)
+++ /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/detail_pages/app.html	(working copy)
@@ -3,12 +3,15 @@
         <div class="widget">
             <div class="table-toolbar">
                 <div class="btn-group">
-                    <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="VSiteVPNResourceAPP.refresh()"><i class="fa fa-refresh"></i></button>
-                    <button class="btn btn-link" title="{{ 'Add' | T }}" ng-click="VSiteVPNResourceAPP.showAddModal()"><i class="fa fa-plus-circle"></i></button>
+                    <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="VSiteVPNResourceAPP.refresh()"><i
+                            class="fa fa-refresh an-tab-icon"></i></button>
+                    <button class="btn btn-link" title="{{ 'Add' | T }}" ng-click="VSiteVPNResourceAPP.showAddModal()">
+                        <i class="fa fa-plus-circle an-tab-icon"></i></button>
                 </div>
             </div>
             <div class="table-wrapper">
-                <table st-table="displayedCollection" st-safe-src="VSiteVPNResourceAPP.tableData" class="table table-hover table-striped">
+                <table st-table="displayedCollection" st-safe-src="VSiteVPNResourceAPP.tableData"
+                       class="table table-hover table-striped">
                     <thead>
                     <tr>
                         <th class="d-num">No.</th>
@@ -27,14 +30,16 @@
                         <td>{{ item.filename }}</td>
                         <td>{{ item.md5 }}</td>
                         <td>
-                            <button class="btn-link" title="{{ 'Delete' | T }}" ng-click="VSiteVPNResourceAPP.delete(item)"><i class="array-delete"></i></button>
+                            <button class="btn-link" title="{{ 'Delete' | T }}"
+                                    ng-click="VSiteVPNResourceAPP.delete(item)"><i class="array-delete"></i></button>
                         </td>
                     </tr>
                     </tbody>
                     <tfoot>
                     <tr>
                         <td colspan="5" class="text-center">
-                            <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)"></div>
+                            <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5"
+                                 st-page-change="onPageChange(newPage)"></div>
                         </td>
                     </tr>
                     </tfoot>
Index: /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/detail_pages/app_add.html
===================================================================
--- /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/detail_pages/app_add.html	(revision 2477)
+++ /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/detail_pages/app_add.html	(working copy)
@@ -1,6 +1,6 @@
 <div class="modal-header">
     <button type="button" class="close" ng-click="VPNResourceAPPAdd.modalClose()">&times;</button>
-    <h4 class="modal-title">{{'Add a New Application-type VPN Resource Item'|T}}</h4>
+    <h6 class="modal-title">{{'Add a New Application-type VPN Resource Item' | T}}</h6>
 </div>
 
 <div class="modal-body">
@@ -8,29 +8,34 @@
         <div class="col-lg-12">
             <form class="form-horizontal" name="general" verify-scope="tipStyle: 1">
                 <div class="form-group">
-                    <label class="col-md-3 control-label">{{'Application Name'|T}}</label>
+                    <label class="col-md-3 control-label">{{'Application Name' | T}}</label>
                     <div class="col-md-8">
-                        <input ng-verify="required:true" type="text" class="form-control" ng-model="VPNResourceAPPAdd.data.appname" name="appname" >
+                        <input ng-verify="required:true" type="text" class="form-control"
+                               ng-model="VPNResourceAPPAdd.data.appname" name="appname">
                     </div>
                 </div>
                 <div class="form-group">
-                    <label class="col-md-3 control-label">{{'File Name'|T}}</label>
+                    <label class="col-md-3 control-label">{{'File Name' | T}}</label>
                     <div class="col-md-8">
-                        <input ng-verify="required:true" type="text" class="form-control" ng-model="VPNResourceAPPAdd.data.filename" name="filename" >
+                        <input ng-verify="required:true" type="text" class="form-control"
+                               ng-model="VPNResourceAPPAdd.data.filename" name="filename">
                     </div>
                 </div>
                 <div class="form-group">
-                    <label class="col-md-3 control-label">{{'MD5 Hash Value'|T}}</label>
+                    <label class="col-md-3 control-label">{{'MD5 Hash Value' | T}}</label>
                     <div class="col-md-8">
-                        <input ng-verify="required:true" type="text" class="form-control" ng-model="VPNResourceAPPAdd.data.md5" name="md5" >
+                        <input ng-verify="required:true" type="text" class="form-control"
+                               ng-model="VPNResourceAPPAdd.data.md5" name="md5">
                     </div>
                 </div>
-                
+
             </form>
         </div>
     </div>
 </div>
 <div class="modal-footer">
-    <button ng-verify="control:'general'" type="button" class="btn btn-primary" ng-click="VPNResourceAPPAdd.save(VPNResourceAPPAdd.data)">{{'Save'|T}}</button>
-    <button type="button" class="btn btn-default" ng-click="VPNResourceAPPAdd.modalClose()">{{'Cancel'|T}}</button>
+    <button ng-verify="control:'general'" type="button" class="btn btn-primary"
+            ng-click="VPNResourceAPPAdd.save(VPNResourceAPPAdd.data)">{{'Save' | T}}
+    </button>
+    <button type="button" class="btn btn-default" ng-click="VPNResourceAPPAdd.modalClose()">{{'Cancel' | T}}</button>
 </div>
\ No newline at end of file
Index: /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/detail_pages/exapp.html
===================================================================
--- /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/detail_pages/exapp.html	(revision 2477)
+++ /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/detail_pages/exapp.html	(working copy)
@@ -3,12 +3,16 @@
         <div class="widget">
             <div class="table-toolbar">
                 <div class="btn-group">
-                    <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="VSiteVPNResourceExAPP.refresh()"><i class="fa fa-refresh"></i></button>
-                    <button class="btn btn-link" title="{{ 'Add' | T }}" ng-click="VSiteVPNResourceExAPP.showAddModal()"><i class="fa fa-plus-circle"></i></button>
+                    <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="VSiteVPNResourceExAPP.refresh()">
+                        <i class="fa fa-refresh an-tab-icon"></i></button>
+                    <button class="btn btn-link" title="{{ 'Add' | T }}"
+                            ng-click="VSiteVPNResourceExAPP.showAddModal()"><i
+                            class="fa fa-plus-circle an-tab-icon"></i></button>
                 </div>
             </div>
             <div class="table-wrapper">
-                <table st-table="displayedCollection" st-safe-src="VSiteVPNResourceExAPP.tableData" class="table table-hover table-striped">
+                <table st-table="displayedCollection" st-safe-src="VSiteVPNResourceExAPP.tableData"
+                       class="table table-hover table-striped">
                     <thead>
                     <tr>
                         <th class="d-num">No.</th>
@@ -25,20 +29,24 @@
                         </td>
                         <td>{{ item.filename }}</td>
                         <td>
-                            <button class="btn-link" title="{{ 'Delete' | T }}" ng-click="VSiteVPNResourceExAPP.delete(item)"><i class="array-delete"></i></button>
+                            <button class="btn-link" title="{{ 'Delete' | T }}"
+                                    ng-click="VSiteVPNResourceExAPP.delete(item)"><i
+                                    class="array-delete an-row-icon"></i></button>
                         </td>
                     </tr>
                     </tbody>
                     <tfoot>
                     <tr>
                         <td colspan="4" class="text-center">
-                            <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)"></div>
+                            <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5"
+                                 st-page-change="onPageChange(newPage)"></div>
                         </td>
                     </tr>
                     </tfoot>
                 </table>
             </div>
-            <div style="text-align: center" ng-if="VSiteVPNResourceExAPP.loading"><img src="app/images/loading.gif"></div>
+            <div style="text-align: center" ng-if="VSiteVPNResourceExAPP.loading"><img src="app/images/loading.gif">
+            </div>
         </div>
     </div>
 </div>
Index: /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/detail_pages/exapp_add.html
===================================================================
--- /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/detail_pages/exapp_add.html	(revision 2477)
+++ /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/detail_pages/exapp_add.html	(working copy)
@@ -1,6 +1,6 @@
 <div class="modal-header">
     <button type="button" class="close" ng-click="VPNResourceExAPPAdd.modalClose()">&times;</button>
-    <h4 class="modal-title">{{'Add a New Application-type VPN Resource Excluded Item'|T}}</h4>
+    <h6 class="modal-title">{{'Add a New Application-type VPN Resource Excluded Item' | T}}</h6>
 </div>
 
 <div class="modal-body">
@@ -8,15 +8,17 @@
         <div class="col-lg-12">
             <form class="form-horizontal" name="general" verify-scope="tipStyle: 1">
                 <div class="form-group">
-                    <label class="col-md-3 control-label">{{'Application Name'|T}}</label>
+                    <label class="col-md-3 control-label">{{'Application Name' | T}}</label>
                     <div class="col-md-8">
-                        <input ng-verify="required:true" type="text" class="form-control" ng-model="VPNResourceExAPPAdd.data.appname" name="appname" >
+                        <input ng-verify="required:true" type="text" class="form-control"
+                               ng-model="VPNResourceExAPPAdd.data.appname" name="appname">
                     </div>
                 </div>
                 <div class="form-group">
-                    <label class="col-md-3 control-label">{{'File Name'|T}}</label>
+                    <label class="col-md-3 control-label">{{'File Name' | T}}</label>
                     <div class="col-md-8">
-                        <input ng-verify="required:true" type="text" class="form-control" ng-model="VPNResourceExAPPAdd.data.filename" name="filename" >
+                        <input ng-verify="required:true" type="text" class="form-control"
+                               ng-model="VPNResourceExAPPAdd.data.filename" name="filename">
                     </div>
                 </div>
             </form>
@@ -24,6 +26,8 @@
     </div>
 </div>
 <div class="modal-footer">
-    <button ng-verify="control:'general'" type="button" class="btn btn-primary" ng-click="VPNResourceExAPPAdd.save(VPNResourceExAPPAdd.data)">{{'Save'|T}}</button>
-    <button type="button" class="btn btn-default" ng-click="VPNResourceExAPPAdd.modalClose()">{{'Cancel'|T}}</button>
+    <button ng-verify="control:'general'" type="button" class="btn btn-primary"
+            ng-click="VPNResourceExAPPAdd.save(VPNResourceExAPPAdd.data)">{{'Save' | T}}
+    </button>
+    <button type="button" class="btn btn-default" ng-click="VPNResourceExAPPAdd.modalClose()">{{'Cancel' | T}}</button>
 </div>
\ No newline at end of file
Index: /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/detail_pages/exnet.html
===================================================================
--- /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/detail_pages/exnet.html	(revision 2477)
+++ /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/detail_pages/exnet.html	(working copy)
@@ -3,12 +3,16 @@
         <div class="widget">
             <div class="table-toolbar">
                 <div class="btn-group">
-                    <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="VSiteVPNResourceExNet.refresh()"><i class="fa fa-refresh"></i></button>
-                    <button class="btn btn-link" title="{{ 'Add' | T }}" ng-click="VSiteVPNResourceExNet.showAddModal()"><i class="fa fa-plus-circle"></i></button>
+                    <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="VSiteVPNResourceExNet.refresh()">
+                        <i class="fa fa-refresh an-tab-icon"></i></button>
+                    <button class="btn btn-link" title="{{ 'Add' | T }}"
+                            ng-click="VSiteVPNResourceExNet.showAddModal()"><i
+                            class="fa fa-plus-circle an-tab-icon"></i></button>
                 </div>
             </div>
             <div class="table-wrapper">
-                <table st-table="displayedCollection" st-safe-src="VSiteVPNResourceExNet.tableData" class="table table-hover table-striped">
+                <table st-table="displayedCollection" st-safe-src="VSiteVPNResourceExNet.tableData"
+                       class="table table-hover table-striped">
                     <thead>
                     <tr>
                         <th class="d-num">No.</th>
@@ -25,20 +29,24 @@
                         </td>
                         <td>{{ VSiteVPNResourceExNet.res_type(item.type) }}</td>
                         <td>
-                            <button class="btn-link" title="{{ 'Delete' | T }}" ng-click="VSiteVPNResourceExNet.delete(item)"><i class="array-delete"></i></button>
+                            <button class="btn-link" title="{{ 'Delete' | T }}"
+                                    ng-click="VSiteVPNResourceExNet.delete(item)"><i
+                                    class="array-delete an-row-icon"></i></button>
                         </td>
                     </tr>
                     </tbody>
                     <tfoot>
                     <tr>
                         <td colspan="5" class="text-center">
-                            <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)"></div>
+                            <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5"
+                                 st-page-change="onPageChange(newPage)"></div>
                         </td>
                     </tr>
                     </tfoot>
                 </table>
             </div>
-            <div style="text-align: center" ng-if="VSiteVPNResourceExNet.loading"><img src="app/images/loading.gif"></div>
+            <div style="text-align: center" ng-if="VSiteVPNResourceExNet.loading"><img src="app/images/loading.gif">
+            </div>
         </div>
     </div>
 </div>
Index: /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/detail_pages/exnet_add.html
===================================================================
--- /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/detail_pages/exnet_add.html	(revision 2477)
+++ /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/detail_pages/exnet_add.html	(working copy)
@@ -1,6 +1,6 @@
 <div class="modal-header">
     <button type="button" class="close" ng-click="VPNResourceExNetAdd.modalClose()">&times;</button>
-    <h4 class="modal-title">{{'Add a Network-type VPN Resource Excluded Item'|T}}</h4>
+    <h6 class="modal-title">{{'Add a Network-type VPN Resource Excluded Item' | T}}</h6>
 </div>
 
 <div class="modal-body">
@@ -8,18 +8,19 @@
         <div class="col-lg-12">
             <form class="form-horizontal" name="general" verify-scope="tipStyle: 1">
                 <div class="form-group">
-                    <label class="col-md-3 control-label">{{'Network Resource'|T}}</label>
+                    <label class="col-md-3 control-label">{{'Network Resource' | T}}</label>
                     <div class="col-md-8">
-                        <input ng-verify="required:true" type="text" class="form-control" ng-model="VPNResourceExNetAdd.data.net" name="net" >
+                        <input ng-verify="required:true" type="text" class="form-control"
+                               ng-model="VPNResourceExNetAdd.data.net" name="net">
                     </div>
                 </div>
                 <div class="form-group">
                     <label class="col-md-3 control-label">{{ 'Type' | T }}</label>
                     <div class="col-md-8">
                         <select ng-verify class="form-control" placeholder="" ng-model="VPNResourceExNetAdd.data.type">
-                            <option value="0" >{{ 'Both' | T }}</option>
-                            <option value="1" >{{ 'Network' | T }}</option>
-                            <option value="2" >{{ 'Application' | T }}</option>
+                            <option value="0">{{ 'Both' | T }}</option>
+                            <option value="1">{{ 'Network' | T }}</option>
+                            <option value="2">{{ 'Application' | T }}</option>
                         </select>
                     </div>
                 </div>
@@ -28,6 +29,8 @@
     </div>
 </div>
 <div class="modal-footer">
-    <button ng-verify="control:'general'" type="button" class="btn btn-primary" ng-click="VPNResourceExNetAdd.save(VPNResourceExNetAdd.data)">{{'Save'|T}}</button>
-    <button type="button" class="btn btn-default" ng-click="VPNResourceExNetAdd.modalClose()">{{'Cancel'|T}}</button>
+    <button ng-verify="control:'general'" type="button" class="btn btn-primary"
+            ng-click="VPNResourceExNetAdd.save(VPNResourceExNetAdd.data)">{{'Save' | T}}
+    </button>
+    <button type="button" class="btn btn-default" ng-click="VPNResourceExNetAdd.modalClose()">{{'Cancel' | T}}</button>
 </div>
\ No newline at end of file
Index: /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/detail_pages/net.html
===================================================================
--- /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/detail_pages/net.html	(revision 2477)
+++ /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/detail_pages/net.html	(working copy)
@@ -3,12 +3,15 @@
         <div class="widget">
             <div class="table-toolbar">
                 <div class="btn-group">
-                    <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="VSiteVPNResourceNet.refresh()"><i class="fa fa-refresh"></i></button>
-                    <button class="btn btn-link" title="{{ 'Add' | T }}" ng-click="VSiteVPNResourceNet.showAddModal()"><i class="fa fa-plus-circle"></i></button>
+                    <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="VSiteVPNResourceNet.refresh()"><i
+                            class="fa fa-refresh an-tab-icon"></i></button>
+                    <button class="btn btn-link" title="{{ 'Add' | T }}" ng-click="VSiteVPNResourceNet.showAddModal()">
+                        <i class="fa fa-plus-circle an-tab-icon"></i></button>
                 </div>
             </div>
             <div class="table-wrapper">
-                <table st-table="displayedCollection" st-safe-src="VSiteVPNResourceNet.tableData" class="table table-hover table-striped">
+                <table st-table="displayedCollection" st-safe-src="VSiteVPNResourceNet.tableData"
+                       class="table table-hover table-striped">
                     <thead>
                     <tr>
                         <th class="d-num">No.</th>
@@ -25,14 +28,17 @@
                         </td>
                         <td>{{ VSiteVPNResourceNet.res_type(item.type) }}</td>
                         <td>
-                            <button class="btn-link" title="{{ 'Delete' | T }}" ng-click="VSiteVPNResourceNet.delete(item)"><i class="array-delete"></i></button>
+                            <button class="btn-link" title="{{ 'Delete' | T }}"
+                                    ng-click="VSiteVPNResourceNet.delete(item)"><i class="array-delete an-row-icon"></i>
+                            </button>
                         </td>
                     </tr>
                     </tbody>
                     <tfoot>
                     <tr>
                         <td colspan="5" class="text-center">
-                            <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)"></div>
+                            <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5"
+                                 st-page-change="onPageChange(newPage)"></div>
                         </td>
                     </tr>
                     </tfoot>
Index: /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/detail_pages/net_add.html
===================================================================
--- /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/detail_pages/net_add.html	(revision 2477)
+++ /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/detail_pages/net_add.html	(working copy)
@@ -1,6 +1,6 @@
 <div class="modal-header">
     <button type="button" class="close" ng-click="VPNResourceNetAdd.modalClose()">&times;</button>
-    <h4 class="modal-title">{{'Add a New Network-type VPN Resource Item'|T}}</h4>
+    <h6 class="modal-title">{{'Add a New Network-type VPN Resource Item' | T}}</h6>
 </div>
 
 <div class="modal-body">
@@ -8,18 +8,19 @@
         <div class="col-lg-12">
             <form class="form-horizontal" name="general" verify-scope="tipStyle: 1">
                 <div class="form-group">
-                    <label class="col-md-3 control-label">{{'Network Resource'|T}}</label>
+                    <label class="col-md-3 control-label">{{'Network Resource' | T}}</label>
                     <div class="col-md-8">
-                        <input ng-verify="required:true" type="text" class="form-control" ng-model="VPNResourceNetAdd.data.net" name="net" >
+                        <input ng-verify="required:true" type="text" class="form-control"
+                               ng-model="VPNResourceNetAdd.data.net" name="net">
                     </div>
                 </div>
                 <div class="form-group">
                     <label class="col-md-3 control-label">{{ 'Type' | T }}</label>
                     <div class="col-md-8">
                         <select ng-verify class="form-control" placeholder="" ng-model="VPNResourceNetAdd.data.type">
-                            <option value="0" >{{ 'Both' | T }}</option>
-                            <option value="1" >{{ 'Network' | T }}</option>
-                            <option value="2" >{{ 'Application' | T }}</option>
+                            <option value="0">{{ 'Both' | T }}</option>
+                            <option value="1">{{ 'Network' | T }}</option>
+                            <option value="2">{{ 'Application' | T }}</option>
                         </select>
                     </div>
                 </div>
@@ -28,6 +29,8 @@
     </div>
 </div>
 <div class="modal-footer">
-    <button ng-verify="control:'general'" type="button" class="btn btn-primary" ng-click="VPNResourceNetAdd.save(VPNResourceNetAdd.data)">{{'Save'|T}}</button>
-    <button type="button" class="btn btn-default" ng-click="VPNResourceNetAdd.modalClose()">{{'Cancel'|T}}</button>
+    <button ng-verify="control:'general'" type="button" class="btn btn-primary"
+            ng-click="VPNResourceNetAdd.save(VPNResourceNetAdd.data)">{{'Save' | T}}
+    </button>
+    <button type="button" class="btn btn-default" ng-click="VPNResourceNetAdd.modalClose()">{{'Cancel' | T}}</button>
 </div>
\ No newline at end of file
Index: /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/vpn_resource.html
===================================================================
--- /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/vpn_resource.html	(revision 2477)
+++ /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/vpn_resource.html	(working copy)
@@ -3,12 +3,15 @@
         <div class="widget">
             <div class="table-toolbar">
                 <div class="btn-group">
-                    <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="VSiteVPNResource.refresh()"><i class="fa fa-refresh"></i></button>
-                    <button class="btn btn-link" title="{{ 'Add' | T }}" ng-click="VSiteVPNResource.showAddModal()"><i class="fa fa-plus-circle"></i></button>
+                    <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="VSiteVPNResource.refresh()"><i
+                            class="fa fa-refresh an-tab-icon"></i></button>
+                    <button class="btn btn-link" title="{{ 'Add' | T }}" ng-click="VSiteVPNResource.showAddModal()"><i
+                            class="fa fa-plus-circle an-tab-icon"></i></button>
                 </div>
             </div>
             <div class="table-wrapper">
-                <table st-table="displayedCollection" st-safe-src="VSiteVPNResource.tableData" class="table table-hover table-striped">
+                <table st-table="displayedCollection" st-safe-src="VSiteVPNResource.tableData"
+                       class="table table-hover table-striped">
                     <thead>
                     <tr>
                         <th class="d-num">No.</th>
@@ -19,7 +22,8 @@
                     <tr>
                         <th></th>
                         <th>
-                            <input st-search="name" placeholder="{{'Search by Name'|T}}" class="input-sm form-control" type="text" />
+                            <input st-search="name" placeholder="{{'Search by Name'|T}}" class="input-sm form-control"
+                                   type="text"/>
                         </th>
                         <th></th>
                         <th></th>
@@ -29,20 +33,27 @@
                     <tr ng-repeat="item in displayedCollection">
                         <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
                         <td>
-                            <a class="name" ui-sref="index.vsite_list.detail.vpn_resource.detail({service_name:VSiteVPNResource.vsite_name, device_name:VSiteVPNResource.device_name, vpn_name:item.name})">{{ item.name }}</a>
+                            <a class="name"
+                               ui-sref="index.vsite_list.detail.vpn_resource.detail({service_name:VSiteVPNResource.vsite_name, device_name:VSiteVPNResource.device_name, vpn_name:item.name})">{{ item.name
+                                }}</a>
                         </td>
                         <td>{{ VSiteVPNResource.get_role_name(item) }}</td>
                         <td style="padding-left: 0">
-                            <button class="btn-link" title="{{ 'Edit' | T }}" ng-click="VSiteVPNResource.edit(item)"><i class="array-edit"></i></button>
-                            <button class="btn-link" title="{{ 'Delete' | T }}" ng-click="VSiteVPNResource.delete(item)"><i class="array-delete"></i></button>
-                            <button class="btn-link" title="{{ 'Sync' | T }}" ng-click="VSiteVPNResource.sync(item)"><i class="array-init"></i></button>
+                            <button class="btn-link" title="{{ 'Edit' | T }}" ng-click="VSiteVPNResource.edit(item)"><i
+                                    class="array-edit an-row-icon"></i></button>
+                            <button class="btn-link" title="{{ 'Delete' | T }}"
+                                    ng-click="VSiteVPNResource.delete(item)"><i class="array-delete an-row-icon"></i>
+                            </button>
+                            <button class="btn-link" title="{{ 'Sync' | T }}" ng-click="VSiteVPNResource.sync(item)"><i
+                                    class="array-init an-row-icon"></i></button>
                         </td>
                     </tr>
                     </tbody>
                     <tfoot>
                     <tr>
                         <td colspan="4" class="text-center">
-                            <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)"></div>
+                            <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5"
+                                 st-page-change="onPageChange(newPage)"></div>
                         </td>
                     </tr>
                     </tfoot>
Index: /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/vpn_resource_add.html
===================================================================
--- /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/vpn_resource_add.html	(revision 2477)
+++ /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/vpn_resource_add.html	(working copy)
@@ -1,6 +1,6 @@
 <div class="modal-header">
     <button type="button" class="close" ng-click="VPNResourceAdd.modalClose()">&times;</button>
-    <h4 class="modal-title">{{'Add a New VPN Resource Group'|T}}</h4>
+    <h6 class="modal-title">{{'Add a New VPN Resource Group'|T}}</h6>
 </div>
 
 <div class="modal-body">
Index: /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/vpn_resource_detail.html
===================================================================
--- /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/vpn_resource_detail.html	(revision 2477)
+++ /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/vpn_resource_detail.html	(working copy)
@@ -2,24 +2,40 @@
     <div ncy-breadcrumb></div>
     <div class="tab-wrapper">
         <ul class="nav nav-tabs">
-            <li role="presentation" ng-class="{ active: url_contain('/vsite_list/detail/{{ device_name }}/{{ current_name }}/vpn_resource/{{ vpn_name }}/app') }">
-                <a ui-sref="index.vsite_list.detail.vpn_resource.detail.app">{{ 'Application-type VPN Resource Item' | T }}</a>
+            <li role="presentation"
+                ng-class="{ active: url_contain('/vsite_list/detail/{{ device_name }}/{{ current_name }}/vpn_resource/{{ vpn_name }}/app') }">
+                <a ui-sref="index.vsite_list.detail.vpn_resource.detail.app"><span
+                        class="tab-header">{{ 'Application-type VPN Resource Item' | T }}</span></a>
             </li>
-            <li role="presentation" ng-class="{ active: url_contain('/vsite_list/detail/{{ device_name }}/{{ current_name }}/vpn_resource/{{ vpn_name }}/exapp') }">
-                <a ui-sref="index.vsite_list.detail.vpn_resource.detail.exapp">{{ 'Application-type VPN Resource Excluded Item' | T }}</a>
+            <li role="presentation"
+                ng-class="{ active: url_contain('/vsite_list/detail/{{ device_name }}/{{ current_name }}/vpn_resource/{{ vpn_name }}/exapp') }">
+                <a ui-sref="index.vsite_list.detail.vpn_resource.detail.exapp"><span
+                        class="tab-header">{{ 'Application-type VPN Resource Excluded Item' | T }}</span></a>
             </li>
-            <li role="presentation" ng-class="{ active: url_contain('/vsite_list/detail/{{ device_name }}/{{ current_name }}/vpn_resource/{{ vpn_name }}/net') }">
-                <a ui-sref="index.vsite_list.detail.vpn_resource.detail.net">{{ 'Network-type VPN Resource Item' | T }}</a>
+            <li role="presentation"
+                ng-class="{ active: url_contain('/vsite_list/detail/{{ device_name }}/{{ current_name }}/vpn_resource/{{ vpn_name }}/net') }">
+                <a ui-sref="index.vsite_list.detail.vpn_resource.detail.net"><span
+                        class="tab-header">{{ 'Network-type VPN Resource Item' | T }}</span></a>
             </li>
-            <li role="presentation" ng-class="{ active: url_contain('/vsite_list/detail/{{ device_name }}/{{ current_name }}/vpn_resource/{{ vpn_name }}/exnet') }">
-                <a ui-sref="index.vsite_list.detail.vpn_resource.detail.exnet">{{ 'Network-type VPN Resource Excluded Item' | T }}</a>
+            <li role="presentation"
+                ng-class="{ active: url_contain('/vsite_list/detail/{{ device_name }}/{{ current_name }}/vpn_resource/{{ vpn_name }}/exnet') }">
+                <a ui-sref="index.vsite_list.detail.vpn_resource.detail.exnet"><span
+                        class="tab-header">{{ 'Network-type VPN Resource Excluded Item' | T }}</span></a>
             </li>
         </ul>
     </div>
     <div class="content-wrapper">
-        <div class="" ng-show="url_contain('/vsite_list/detail/{{ device_name }}/{{ current_name }}/vpn_resource/{{ vpn_name }}/app')" ui-view="app"></div>
-        <div class="" ng-show="url_contain('/vsite_list/detail/{{ device_name }}/{{ current_name }}/vpn_resource/{{ vpn_name }}/exapp')" ui-view="exapp"></div>
-        <div class="" ng-show="url_contain('/vsite_list/detail/{{ device_name }}/{{ current_name }}/vpn_resource/{{ vpn_name }}/net')" ui-view="net"></div>
-        <div class="" ng-show="url_contain('/vsite_list/detail/{{ device_name }}/{{ current_name }}/vpn_resource/{{ vpn_name }}/exnet')" ui-view="exnet"></div>
+        <div class=""
+             ng-show="url_contain('/vsite_list/detail/{{ device_name }}/{{ current_name }}/vpn_resource/{{ vpn_name }}/app')"
+             ui-view="app"></div>
+        <div class=""
+             ng-show="url_contain('/vsite_list/detail/{{ device_name }}/{{ current_name }}/vpn_resource/{{ vpn_name }}/exapp')"
+             ui-view="exapp"></div>
+        <div class=""
+             ng-show="url_contain('/vsite_list/detail/{{ device_name }}/{{ current_name }}/vpn_resource/{{ vpn_name }}/net')"
+             ui-view="net"></div>
+        <div class=""
+             ng-show="url_contain('/vsite_list/detail/{{ device_name }}/{{ current_name }}/vpn_resource/{{ vpn_name }}/exnet')"
+             ui-view="exnet"></div>
     </div>
 </div>
Index: /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/vpn_resource_edit.html
===================================================================
--- /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/vpn_resource_edit.html	(revision 2477)
+++ /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/vpn_resource_edit.html	(working copy)
@@ -1,6 +1,6 @@
 <div class="modal-header">
     <button type="button" class="close" ng-click="VPNResourceEdit.modalClose()">&times;</button>
-    <h4 class="modal-title">{{'Edit New VPN Resource Group'|T}}</h4>
+    <h6 class="modal-title">{{'Edit New VPN Resource Group'|T}}</h6>
 </div>
 
 <div class="modal-body">
Index: /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/vpn_resource_sync.html
===================================================================
--- /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/vpn_resource_sync.html	(revision 2477)
+++ /branches/amp_3_7/extensions/vpn_mgmt/webui/vpn/vpn_resource_sync.html	(working copy)
@@ -1,6 +1,6 @@
 <div class="modal-header">
     <button type="button" class="close" ng-click="VPNResourceSync.modalClose()">&times;</button>
-    <h4 class="modal-title">{{'Sync VPN Resource Group'|T}}</h4>
+    <h6 class="modal-title">{{'Sync VPN Resource Group'|T}}</h6>
 </div>
 
 <div class="modal-body">
Index: /branches/amp_3_7/extensions/vpn_mgmt/webui/vsite.html
===================================================================
--- /branches/amp_3_7/extensions/vpn_mgmt/webui/vsite.html	(revision 2477)
+++ /branches/amp_3_7/extensions/vpn_mgmt/webui/vsite.html	(working copy)
@@ -1,67 +1,90 @@
-<div class="widget">
-   <div class="widget-header">
-       <span>{{'Virtual Site List' | T}}</span>
-   </div>
-   <div class="">
-       <table st-table="displayedCollection" st-safe-src="VSiteService.serviceList" class="table table-hover">
-           <thead>
-           <tr>
-               <th class="v-num">No.</th>
-               <th class="v-name">{{ 'Service Name' | T }}</th>
-               <th class="v-device">{{ 'Device Name' | T }}</th>
-               <th class="v-group">{{ 'Device Group' | T }}</th>
-               <th class="v-ip">{{ 'IP Address' | T }}</th>
-               <th class="v-domain">{{ 'Domain' | T }}</th>
-               <th class="v-type">{{ 'Type' | T }}</th>
-           </tr>
-           <tr>
-               <th></th>
-               <th>
-                   <input st-search="name" placeholder="{{'Search by Service Name'|T}}" class="input-sm form-control" type="text" />
-               </th>
-               <th>
-                   <select class="input-sm form-control" st-input-event="change" st-search="device.name">
-                       <option value="">{{'All'|T}}</option>
-                       <option ng-repeat="row in VSiteService.serviceList | unique:'device.name'" value="{{row.device.name}}">{{row.device.name}}</option>
-                   </select>
-               </th>
-               <th>
-                   <select class="input-sm form-control" st-input-event="change" st-search="device.device_group">
-                       <option value="">{{'All'|T}}</option>
-                       <option ng-repeat="row in VSiteService.serviceList | unique:'device.device_group'" value="{{row.device.device_group}}">{{row.device.device_group}}</option>
-                   </select>
-               </th>
-               <th>
-                   <input st-search="ip_str" placeholder="{{'Search by IP Address'|T}}" class="input-sm form-control" type="text" />
-               </th>
-               <th>
-                  <input st-search="domain_str" placeholder="{{'Search by Domain'|T}}" class="input-sm form-control" type="text" />
-              </th>
-               <th></th>
-           </tr>
-           </thead>
-           <tbody>
-               <tr ng-repeat="item in displayedCollection">
-                   <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
-                   <td>
-                       <a class="name" ui-sref="index.vsite_list.detail({service_name:item.name, device_name:item.device.name})">{{ item.name }}</a>
-                   </td>
-                   <td>{{ item.device.name }}</td>
-                   <td>{{ item.device.device_group }}</td>
-                   <td>{{ item.ip_str }}</td>
-                   <td>{{ item.domain_str }}</td>
-                   <td>{{ item.type }}</td>
-               </tr>
-               <div style="margin-bottom: 5px;margin-top:5px;text-align: center" ng-if="!VSiteService.get_loading()"><img src="app/images/loading.gif"></div>
-           </tbody>
-           <tfoot>
-                <tr>
-                    <td colspan="7" class="text-center">
-                        <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)" st-template="app/modules/common/templates/page.html"></div>
-                    </td>
-                </tr>
-           </tfoot>
-       </table>
-   </div>
+<div class="row">
+    <div class="col-md-12">
+        <div class="widget">
+            <div class="widget-header">
+                <span class="tab-header-1">{{'Virtual Site List' | T}}</span>
+            </div>
+            <div class="">
+                <table st-table="displayedCollection" st-safe-src="VSiteService.serviceList" class="table table-hover">
+                    <thead>
+                    <tr>
+                        <th class="v-num">No.</th>
+                        <th class="v-name">{{ 'Service Name' | T }}</th>
+                        <th class="v-device">{{ 'Device Name' | T }}</th>
+                        <th class="v-group">{{ 'Device Group' | T }}</th>
+                        <th class="v-ip">{{ 'IP Address' | T }}</th>
+                        <th class="v-domain">{{ 'Domain' | T }}</th>
+                        <th class="v-type">{{ 'Type' | T }}</th>
+                    </tr>
+                    <tr>
+                        <th></th>
+                        <th>
+                            <input st-search="name" placeholder="{{'Search by Service Name'|T}}"
+                                   class="input-sm form-control"
+                                   type="text"/>
+                        </th>
+                        <th>
+                            <select class="input-sm form-control" st-input-event="change" st-search="device.name">
+                                <option value="">{{'All' | T}}</option>
+                                <option ng-repeat="row in VSiteService.serviceList | unique:'device.name'"
+                                        value="{{row.device.name}}">{{row.device.name}}
+                                </option>
+                            </select>
+                        </th>
+                        <th>
+                            <select class="input-sm form-control" st-input-event="change"
+                                    st-search="device.device_group">
+                                <option value="">{{'All' | T}}</option>
+                                <option ng-repeat="row in VSiteService.serviceList | unique:'device.device_group'"
+                                        value="{{row.device.device_group}}">{{row.device.device_group}}
+                                </option>
+                            </select>
+                        </th>
+                        <th>
+                            <input st-search="ip_str" placeholder="{{'Search by IP Address'|T}}"
+                                   class="input-sm form-control"
+                                   type="text"/>
+                        </th>
+                        <th>
+                            <input st-search="domain_str" placeholder="{{'Search by Domain'|T}}"
+                                   class="input-sm form-control"
+                                   type="text"/>
+                        </th>
+                        <th></th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr ng-repeat="item in displayedCollection">
+                        <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
+                        <td>
+                            <a class="name"
+                               ui-sref="index.vsite_list.detail({service_name:item.name, device_name:item.device.name})">{{ item.name
+                                }}</a>
+                        </td>
+                        <td>{{ item.device.name }}</td>
+                        <td>{{ item.device.device_group }}</td>
+                        <td>{{ item.ip_str }}</td>
+                        <td>{{ item.domain_str }}</td>
+                        <td>{{ item.type }}</td>
+                    </tr>
+                    <tr ng-if="displayedCollection.length === 0">
+                        <td colspan="7" class="text-center">No matching records found.</td>
+                    </tr>
+                    <div style="margin-bottom: 5px;margin-top:5px;text-align: center"
+                         ng-if="!VSiteService.get_loading()"><img
+                            src="app/images/loading.gif"></div>
+                    </tbody>
+                    <tfoot>
+                    <tr>
+                        <td colspan="7" class="text-center">
+                            <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5"
+                                 st-page-change="onPageChange(newPage)"
+                                 st-template="app/modules/common/templates/page.html"></div>
+                        </td>
+                    </tr>
+                    </tfoot>
+                </table>
+            </div>
+        </div>
+    </div>
 </div>
-
Index: /branches/amp_3_7/extensions/vpn_mgmt/webui/vsite_detail.html
===================================================================
--- /branches/amp_3_7/extensions/vpn_mgmt/webui/vsite_detail.html	(revision 2477)
+++ /branches/amp_3_7/extensions/vpn_mgmt/webui/vsite_detail.html	(working copy)
@@ -2,20 +2,27 @@
     <div ncy-breadcrumb></div>
     <div class="tab-wrapper">
         <ul class="nav nav-tabs">
-            <li role="presentation" ng-class="{ active: url_contain('/vsite_list/detail/{{ device_name }}/{{ current_name }}/vpn_resource') }">
-                <a ui-sref="index.vsite_list.detail.vpn_resource">{{ 'VPN Resource Group' | T }}</a>
+            <li role="presentation"
+                ng-class="{ active: url_contain('/vsite_list/detail/{{ device_name }}/{{ current_name }}/vpn_resource') }">
+                <a ui-sref="index.vsite_list.detail.vpn_resource"><span class="tab-header">{{ 'VPN Resource Group' | T
+                    }}</span></a>
             </li>
-            <li role="presentation" ng-class="{ active: url_contain('/vsite_list/detail/{{ device_name }}/{{ current_name }}/acl') }">
-                <a ui-sref="index.vsite_list.detail.acl">{{ 'ACL Resource Group' | T }}</a>
+            <li role="presentation"
+                ng-class="{ active: url_contain('/vsite_list/detail/{{ device_name }}/{{ current_name }}/acl') }">
+                <a ui-sref="index.vsite_list.detail.acl"><span class="tab-header">{{ 'ACL Resource Group' | T }}</span></a>
             </li>
-            <li role="presentation" ng-class="{ active: url_contain('/vsite_list/detail/{{ device_name }}/{{ current_name }}/hardwareid') }">
-                <a ui-sref="index.vsite_list.detail.hardwareid">{{ 'Hardware ID' | T }}</a>
+            <li role="presentation"
+                ng-class="{ active: url_contain('/vsite_list/detail/{{ device_name }}/{{ current_name }}/hardwareid') }">
+                <a ui-sref="index.vsite_list.detail.hardwareid"><span class="tab-header">{{ 'Hardware ID' | T }}</span></a>
             </li>
         </ul>
     </div>
     <div class="content-wrapper">
-        <div class="" ng-show="url_contain('/vsite_list/detail/{{ device_name }}/{{ current_name }}/vpn_resource')" ui-view="vpn_resource"></div>
-        <div class="" ng-show="url_contain('/vsite_list/detail/{{ device_name }}/{{ current_name }}/acl')" ui-view="acl"></div>
-        <div class="" ng-show="url_contain('/vsite_list/detail/{{ device_name }}/{{ current_name }}/hardwareid')" ui-view="hardwareid"></div>
+        <div class="" ng-show="url_contain('/vsite_list/detail/{{ device_name }}/{{ current_name }}/vpn_resource')"
+             ui-view="vpn_resource"></div>
+        <div class="" ng-show="url_contain('/vsite_list/detail/{{ device_name }}/{{ current_name }}/acl')"
+             ui-view="acl"></div>
+        <div class="" ng-show="url_contain('/vsite_list/detail/{{ device_name }}/{{ current_name }}/hardwareid')"
+             ui-view="hardwareid"></div>
     </div>
 </div>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/administrator/index.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/administrator/index.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/administrator/index.html	(working copy)
@@ -1,27 +1,25 @@
-<div>
-    <div>
+<div class="row">
+    <div class="col-md-12">
         <ul class="nav nav-tabs">
             <li role="presentation" ng-class="{ active: url_contain('/admin/userMgmt') }">
-                <a ui-sref="index.admin.userMgmt">{{ 'System Administrator' | T }}</a>
+                <a ui-sref="index.admin.userMgmt"><span class="tab-header">{{ 'System Administrator' | T }}</span></a>
             </li>
             <li role="presentation" ng-if="role_info.user_type !== 'Device Admin'"
                 ng-class="{ active: url_contain('/admin/roleMgmt') }">
-                <a ui-sref="index.admin.roleMgmt">{{ 'User Role' | T }}</a>
+                <a ui-sref="index.admin.roleMgmt"><span class="tab-header">{{ 'User Role' | T }}</span></a>
             </li>
             <li role="presentation" ng-class="{ active: url_contain('/admin/operLog') }">
-                <a ui-sref="index.admin.operLog">{{ 'Operation Log' | T }}</a>
+                <a ui-sref="index.admin.operLog"><span class="tab-header">{{ 'Operation Log' | T }}</span></a>
             </li>
             <li role="presentation" ng-class="{ active: url_contain('/admin/systemAction') }">
-                <a ui-sref="index.admin.systemAction">{{ 'System Shutdown/Reboot' | T }}</a>
+                <a ui-sref="index.admin.systemAction"><span class="tab-header">{{ 'System Shutdown/Reboot' | T }}</span></a>
             </li>
         </ul>
     </div>
-    <br>
-    <div class="">
+    <div class="content-wrapper">
         <div class="" ng-show="url_contain('/admin/userMgmt')" ui-view="userMgmt"></div>
         <div class="" ng-show="url_contain('/admin/roleMgmt')" ui-view="roleMgmt"></div>
         <div class="" ng-show="url_contain('/admin/operLog')" ui-view="operLog"></div>
         <div class="" ng-show="url_contain('/admin/systemAction')" ui-view="systemAction"></div>
     </div>
 </div>
-
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/administrator/operLog/operLog.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/administrator/operLog/operLog.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/administrator/operLog/operLog.html	(working copy)
@@ -1,82 +1,88 @@
-<div class="row">
-    <div class="col-md-12">
-        <div class="widget">
-            <div class="widget-header">
-                <span>{{'Operation Log' | T}}</span>
-            </div>
-            <div class="table-toolbar">
-                <div class="btn-group">
-                    <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="operLog.refresh()"><i class="fa fa-refresh"></i></button>
-                    <button ng-if="user_auth_data.system.admin.delete_operation_log" class="btn btn-link" title="{{ 'Clear' | T }}" ng-click="operLog.clear_operation_log()"><i class="array-delete"></i></button>
-                </div>
-            </div>
-            <div style="margin-bottom: 5px;margin-top:5px;text-align: center" ng-if="!operLog.logs"><img src="app/images/loading.gif"></div>
-            <div class="" st-table="operLog.logs" st-pipe="operLog.myServer" ng-if="operLog.logs">
-                <table class="table table-striped table-hover">
-                    <thead>
-                        <tr>
-                            <th class="i-num">No.</th>
-                            <th class="i-time" st-sort="time">{{ 'Time' | T }}</th>
-                            <th class="i-level">{{ 'Level' | T }}</th>
-                            <th class="i-username" st-sort="username">{{ 'User Name' | T }}</th>
-                            <th class="i-clientip" st-sort="client_ip">{{ 'IP' | T }}</th>
-                            <th class="i-module">{{ 'Module' | T }}</th>
-                            <th class="i-operation">{{ 'Operation' | T }}</th>
-                            <th></th>
-                        </tr>
-                        <tr>
-                            <th></th>
-                            <th></th>
-                            <th>
-                                <select class="input-sm form-control" st-input-event="change" st-search="level">
-                                    <option value="">{{'All'|T}}</option>
-                                    <option value="debug">Debug</option>
-                                    <option value="info">Info</option>
-                                    <option value="notice">Notice</option>
-                                    <option value="warning">Warning</option>
-                                    <option value="error">Error</option>
-                                    <option value="critical">Critical</option>
-                                </select>
-                            </th>
-                            <th><input st-search="username" placeholder="{{'Search by Username'|T}}" class="input-sm form-control" type="search"></th>
-                            <th><input st-search="client_ip" placeholder="{{'Search by IP'|T}}" class="input-sm form-control" type="search"></th>
-                            <th>
-                                <select class="input-sm form-control" st-input-event="change" st-search="module">
-                                    <option value="">{{'All'|T}}</option>
-                                    <option value="system">system</option>
-                                    <option value="device">device</option>
-                                    <option value="API">API</option>
-                                </select>
-                            </th>
-                            <th></th>
-                            <th></th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr ng-repeat="row in operLog.logs">
-                            <td class="i-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
-                            <td>{{ row.time }}</td>
-                            <td>{{ row.level }}</td>
-                            <td>{{ row.username }}</td>
-                            <td>{{ row.client_ip }}</td>
-                            <td>{{ row.module }}</td>
-                            <td>{{ row.operation}}</td>
-                            <td>
-                                <a ng-if="user_auth_data.system.admin.delete_operation_log" class="icon-box" title="{{ 'Delete' | T }}" ng-click="operLog.delete_operation_log(row)"><i class="array-delete"></i></a>
-                            </td>
-                        </tr>
-                    </tbody>
-                    <tfoot>
-                        <tr>
-                            <td colspan="9" class="text-center">
-                                <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="10" st-page-change="onPageChange(newPage)"st-template="app/modules/common/templates/page.html"></div>
-                            </td>
-                        </tr>
-                    </tfoot>
-                </table>
+<div class="col-md-12">
+    <div class="widget">
+        <div class="widget-header">
+            <span class="tab-header-1">{{'Operation Log' | T}}</span>
+        </div>
+        <div class="table-toolbar">
+            <div class="btn-group">
+                <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="operLog.refresh()"><i
+                    class="fa fa-refresh an-tab-icon"></i></button>
+                <button ng-if="user_auth_data.system.admin.delete_operation_log" class="btn btn-link"
+                        title="{{ 'Clear' | T }}" ng-click="operLog.clear_operation_log()"><i class="array-delete an-tab-icon"></i>
+                </button>
             </div>
         </div>
+        <div style="margin-bottom: 5px;margin-top:5px;text-align: center" ng-if="!operLog.logs"><img
+            src="app/images/loading.gif"></div>
+        <div class="" st-table="operLog.logs" st-pipe="operLog.myServer" ng-if="operLog.logs">
+            <table class="table table-striped table-hover">
+                <thead>
+                <tr>
+                    <th class="i-num">No.</th>
+                    <th class="i-time" st-sort="time">{{ 'Time' | T }}</th>
+                    <th class="i-level">{{ 'Level' | T }}</th>
+                    <th class="i-username" st-sort="username">{{ 'User Name' | T }}</th>
+                    <th class="i-clientip" st-sort="client_ip">{{ 'IP' | T }}</th>
+                    <th class="i-module">{{ 'Module' | T }}</th>
+                    <th class="i-operation">{{ 'Operation' | T }}</th>
+                    <th></th>
+                </tr>
+                <tr>
+                    <th></th>
+                    <th></th>
+                    <th>
+                        <select class="input-sm form-control" st-input-event="change" st-search="level">
+                            <option value="">{{'All' | T}}</option>
+                            <option value="debug">Debug</option>
+                            <option value="info">Info</option>
+                            <option value="notice">Notice</option>
+                            <option value="warning">Warning</option>
+                            <option value="error">Error</option>
+                            <option value="critical">Critical</option>
+                        </select>
+                    </th>
+                    <th><input st-search="username" placeholder="{{'Search by Username'|T}}"
+                               class="input-sm form-control" type="search"></th>
+                    <th><input st-search="client_ip" placeholder="{{'Search by IP'|T}}" class="input-sm form-control"
+                               type="search"></th>
+                    <th>
+                        <select class="input-sm form-control" st-input-event="change" st-search="module">
+                            <option value="">{{'All' | T}}</option>
+                            <option value="system">system</option>
+                            <option value="device">device</option>
+                            <option value="API">API</option>
+                        </select>
+                    </th>
+                    <th></th>
+                    <th></th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr ng-repeat="row in operLog.logs">
+                    <td class="i-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
+                    <td>{{ row.time }}</td>
+                    <td>{{ row.level }}</td>
+                    <td>{{ row.username }}</td>
+                    <td>{{ row.client_ip }}</td>
+                    <td>{{ row.module }}</td>
+                    <td>{{ row.operation}}</td>
+                    <td>
+                        <a ng-if="user_auth_data.system.admin.delete_operation_log" class="icon-box"
+                           title="{{ 'Delete' | T }}" ng-click="operLog.delete_operation_log(row)"><i
+                            class="array-delete an-row-icon"></i></a>
+                    </td>
+                </tr>
+                </tbody>
+                <tfoot>
+                <tr>
+                    <td colspan="9" class="text-center">
+                        <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="10"
+                             st-page-change="onPageChange(newPage)"
+                             st-template="app/modules/common/templates/page.html"></div>
+                    </td>
+                </tr>
+                </tfoot>
+            </table>
+        </div>
     </div>
-    
- </div>
-    
\ No newline at end of file
+</div>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/administrator/roleMgmt/modal/role-add.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/administrator/roleMgmt/modal/role-add.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/administrator/roleMgmt/modal/role-add.html	(working copy)
@@ -2,7 +2,7 @@
     <div class="modal-header">
         <button type="button" class="close" ng-click="roleAdd.close()" aria-label="Close"><span aria-hidden="true">&times;</span>
         </button>
-        <h5 class="modal-title">{{ 'Add User Role' | T}}</h5>
+        <h6 class="modal-title">{{ 'Add User Role' | T}}</h6>
     </div>
     <div class="modal-body">
         <form class="form-horizontal" name="add">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/administrator/roleMgmt/modal/role-device-group-manage.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/administrator/roleMgmt/modal/role-device-group-manage.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/administrator/roleMgmt/modal/role-device-group-manage.html	(working copy)
@@ -1,6 +1,6 @@
 <div class="modal-header">
     <button type="button" class="close" ng-click="roleDeviceGroupManage.close()">&times;</button>
-    <h4 class="modal-title">{{'Bind Devices'|T}}</h4>
+    <h6 class="modal-title">{{'Bind Devices'|T}}</h6>
 </div>
 
 <div class="modal-body">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/administrator/roleMgmt/modal/role-edit.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/administrator/roleMgmt/modal/role-edit.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/administrator/roleMgmt/modal/role-edit.html	(working copy)
@@ -2,7 +2,7 @@
     <div class="modal-header">
         <button type="button" class="close" ng-click="roleEdit.close()" aria-label="Close"><span aria-hidden="true">&times;</span>
         </button>
-        <h5 class="modal-title">{{ 'Edit User Role' | T}}</h5>
+        <h6 class="modal-title">{{ 'Edit User Role' | T}}</h6>
     </div>
     <div class="modal-body">
         <form class="form-horizontal" name="add">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/administrator/roleMgmt/roleMgmt.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/administrator/roleMgmt/roleMgmt.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/administrator/roleMgmt/roleMgmt.html	(working copy)
@@ -1,57 +1,56 @@
-<div class="row">
-    <div class="col-md-12">
-        <div class="widget">
-            <div class="table-toolbar">
-                <div class="btn-group">
-                    <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="roleMgmt.refresh()"><i
-                        class="fa fa-refresh"></i></button>
-                    <button ng-if="role_info.user_type === 'Super Admin'" class="btn btn-link" title="{{ 'Add' | T }}"
-                            ng-click="roleMgmt.addRole()"><i
-                        class="fa fa-plus-circle"></i></button>
-                </div>
-            </div>
-            <div class="table-wrapper">
-                <table st-table="displayedCollection" st-safe-src="roleMgmt.roleList"
-                       class="table table-hover table-striped">
-                    <thead>
-                    <tr>
-                        <th class="d-num">No.</th>
-                        <th class="d-name">{{ 'Role Name' | T }}</th>
-                        <th class="d-action">{{ 'Action' | T }}</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr ng-repeat="role in displayedCollection">
-                        <td>{{ $index + 1 }}</td>
-                        <td class="d-num" title="{{'Current User'|T}}">
-                            <span class="name" ng-click="roleMgmt.getDetail(role)">{{ role.role_name }}</span>
-                        </td>
-                        <td>
-                            <button class="btn-link" title="{{ 'Edit' | T }}" ng-click="roleMgmt.editRole(role)"
-                                    ng-if="role_info.user_type === 'Super Admin'"><i class="array-edit"
-                                                                                     style="font-size: 1.25em;"></i>
-                            </button>
-                            <a ui-sref="index.admin.roleMgmt.deviceGroupMap({name:role.role_name})" class="btn-link"
-                               title="{{ 'Device Management' | T }}"
-                               ng-click="roleMgmt.manageDeviceGroup(role)">
-                                <i class="array-backup" style="font-size: 1.25em;"></i></a>
-                            <button class="btn-link" title="{{ 'Delete' | T }}"
-                                    ng-if="role_info.user_type === 'Super Admin'"
-                                    ng-click="roleMgmt.deleteRole(role)">
-                                <i class="array-delete" style="font-size: 1.25em;"></i></button>
-                        </td>
-                    </tr>
-                    </tbody>
-                    <tfoot>
-                    <tr>
-                        <td colspan="5" class="text-center">
-                            <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5"
-                                 st-page-change="onPageChange(newPage)"></div>
-                        </td>
-                    </tr>
-                    </tfoot>
-                </table>
+<div class="col-md-12">
+    <div class="widget">
+        <div class="table-toolbar">
+            <div class="btn-group">
+                <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="roleMgmt.refresh()"><i
+                    class="fa fa-refresh an-tab-icon"></i></button>
+                <button ng-if="role_info.user_type === 'Super Admin'" class="btn btn-link" title="{{ 'Add' | T }}"
+                        ng-click="roleMgmt.addRole()"><i
+                    class="fa fa-plus-circle an-tab-icon"></i></button>
             </div>
         </div>
+        <div class="table-wrapper">
+            <table st-table="displayedCollection" st-safe-src="roleMgmt.roleList"
+                   class="table table-hover table-striped">
+                <thead>
+                <tr>
+                    <th class="d-num">No.</th>
+                    <th class="d-name">{{ 'Role Name' | T }}</th>
+                    <th class="d-action">{{ 'Action' | T }}</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr ng-repeat="role in displayedCollection">
+                    <td>{{ $index + 1 }}</td>
+                    <td class="d-num" title="{{'Current User'|T}}">
+                        <span class="name" ng-click="roleMgmt.getDetail(role)">{{ role.role_name }}</span>
+                    </td>
+                    <td>
+                        <button class="btn-link" title="{{ 'Edit' | T }}" ng-click="roleMgmt.editRole(role)"
+                                ng-if="role_info.user_type === 'Super Admin'"><i class="array-edit an-row-icon"
+                                                                                 style="font-size: 1.25em;"></i>
+                        </button>
+                        <a ui-sref="index.admin.roleMgmt.deviceGroupMap({name:role.role_name})" class="btn-link"
+                           title="{{ 'Device Management' | T }}"
+                           ng-click="roleMgmt.manageDeviceGroup(role)">
+                            <i class="array-backup an-row-icon" style="font-size: 1.25em;"></i></a>
+                        <button class="btn-link" title="{{ 'Delete' | T }}"
+                                ng-if="role_info.user_type === 'Super Admin'"
+                                ng-click="roleMgmt.deleteRole(role)">
+                            <i class="array-delete an-row-icon" style="font-size: 1.25em;"></i></button>
+                    </td>
+                </tr>
+                </tbody>
+                <tfoot>
+                <tr>
+                    <td colspan="5" class="text-center">
+                        <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5"
+                             st-page-change="onPageChange(newPage)"></div>
+                    </td>
+                </tr>
+                </tfoot>
+            </table>
+        </div>
     </div>
 </div>
+
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/administrator/systemAction/systemAction.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/administrator/systemAction/systemAction.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/administrator/systemAction/systemAction.html	(working copy)
@@ -1,59 +1,51 @@
-<div class="row">
+<div class="col-md-12">
     <div class="col-md-12">
-        <div class="col-md-12">
-            <div class="row">
-                <div class="widget">
-                    <div class="widget-header">
-                        <span>{{ 'System Shutdown' | T }}</span>
+        <div class="widget">
+            <div class="widget-header">
+                <span class="tab-header-1">{{ 'System Shutdown' | T }}</span>
+            </div>
+            <div>
+                <form class="form-horizontal" name="systemShutdownForm" unsaved-warning-form
+                      verify-scope="tipStyle: 1">
+                    <div class="form-group">
+                        <label class="col-md-3 control-label">{{'Option' | T}} </label>
+                        <div class="col-md-5">
+                            <select ng-model="systemAction.data.option" name="type" class="form-control">
+                                <option value="halt" title="Halt system but not turn off power.">
+                                    {{ 'HALT' | T}}
+                                </option>
+                                <option value="poweroff" title="Halt system and turn off power.">
+                                    {{ 'PowerOff' | T}}
+                                </option>
+                            </select>
+                        </div>
                     </div>
-                    <div>
-                        <form class="form-horizontal" name="systemShutdownForm" unsaved-warning-form
-                              verify-scope="tipStyle: 1">
-                            <div class="form-group">
-                                <label class="col-md-3 control-label">{{'Option' | T}}</label>
-                                <div class="col-md-5">
-                                    <select ng-model="systemAction.data.option" name="type" class="form-control">
-                                        <option value="halt" title="Halt system but not turn off power.">
-                                            {{ 'HALT' | T}}
-                                        </option>
-                                        <option value="poweroff" title="Halt system and turn off power.">
-                                            {{ 'Poweroff' | T}}
-                                        </option>
-                                    </select>
-                                </div>
-                            </div>
-                            <div class="form-group">
-                                <div class="col-md-offset-3 col-md-9">
-                                    <button ng-verify="control:'systemShutdownForm'" type="submit" class="btn btn-danger"
-                                            ng-click="systemAction.performSystemShutdown()">{{'Shutdown' | T}}
-                                    </button>
-                                </div>
-                            </div>
-                        </form>
+                    <div class="form-group">
+                        <div class="col-md-12 align-center">
+                            <button ng-verify="control:'systemShutdownForm'" type="submit" class="btn btn-danger"
+                                    ng-click="systemAction.performSystemShutdown()">{{'Shutdown' | T}}
+                            </button>
+                        </div>
                     </div>
-                </div>
+                </form>
             </div>
         </div>
     </div>
+</div>
+<div class="col-md-12">
     <div class="col-md-12">
-        <div class="col-md-12">
-            <div class="row">
-                <div class="widget">
-                    <div class="widget-header">
-                        <span>{{ 'System Reboot' | T }}</span>
-                    </div>
-                    <div>
-                        <div class="form-group">
-                            <div class="col-md-offset-3 col-md-9">
-                                <button class="btn btn-danger" ng-click="systemAction.performSystemReboot()">{{'Reboot
-                                    Now' | T}}
-                                </button>
-                            </div>
-                        </div>
+        <div class="widget">
+            <div class="widget-header">
+                <span class="tab-header-1">{{ 'System Reboot' | T }}</span>
+            </div>
+            <div>
+                <div class="form-group">
+                    <div class="col-md-12 align-center">
+                        <button class="btn btn-danger" ng-click="systemAction.performSystemReboot()">{{'Reboot Now' | T}}
+                        </button>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </div>
-
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/administrator/userMgmt/modal/user.add.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/administrator/userMgmt/modal/user.add.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/administrator/userMgmt/modal/user.add.html	(working copy)
@@ -1,9 +1,8 @@
 <div class="">
     <div class="modal-header">
-        <!-- <div class="title"><i class="array-add"></i>{{ 'Add System Administrator' | T}}</div> -->
         <button type="button" class="close" ng-click="userAdd.close()" aria-label="Close"><span aria-hidden="true">&times;</span>
         </button>
-        <h4 class="modal-title">{{ 'Add System Administrator' | T}}</h4>
+        <h6 class="modal-title">{{ 'Add System Administrator' | T}}</h6>
     </div>
     <div class="modal-body">
         <form class="form-horizontal" name="add">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/administrator/userMgmt/modal/user.auth.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/administrator/userMgmt/modal/user.auth.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/administrator/userMgmt/modal/user.auth.html	(working copy)
@@ -2,7 +2,7 @@
     <div class="modal-header">
         <button type="button" class="close" ng-click="userAuth.close()" aria-label="Close"><span aria-hidden="true">&times;</span>
         </button>
-        <h4><i class="fa fa-list-ul"></i>{{ 'User Authorization' | T}}</h4>
+        <h6><i class="fa fa-list-ul"></i>{{ 'User Authorization' | T}}</h6>
     </div>
     <div class="modal-body">
         <div ng-if="!userAuth.current_user_root" class="alert alert-info ng-binding" role="alert">{{'User Authorization
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/administrator/userMgmt/modal/user.edit.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/administrator/userMgmt/modal/user.edit.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/administrator/userMgmt/modal/user.edit.html	(working copy)
@@ -1,7 +1,7 @@
 <div class="modal-body" style="padding: 0">
     <div class="modal-header">
         <button type="button" class="close" ng-click="userEdit.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4><i class="array-edit"></i>{{ 'System Administrator' | T}}</h4>
+        <h6><i class="array-edit"></i>{{ 'System Administrator' | T}}</h6>
     </div>
     <div class="modal-body">
         <form name="add" class="form-horizontal">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/administrator/userMgmt/userMgmt.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/administrator/userMgmt/userMgmt.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/administrator/userMgmt/userMgmt.html	(working copy)
@@ -1,91 +1,90 @@
-<div class="row">
-    <div class="col-md-12">
-        <div class="widget">
-            <div class="table-toolbar">
-                <div class="btn-group">
-                    <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="userMgmt.refresh()"><i
-                        class="fa fa-refresh"></i></button>
-                    <button ng-if="userMgmt.root" class="btn btn-link" title="{{ 'Add' | T }}"
-                            ng-click="userMgmt.addUser()"><i class="fa fa-plus-circle"></i></button>
-                    <button ng-if="userMgmt.root" class="btn btn-link" title="{{ 'Export' | T }}"
-                            ng-click="userMgmt.export()"><i class="fa fa-sign-out"></i></button>
-                    <button ng-if="userMgmt.root" class="btn btn-link" title="{{ 'Import' | T }}"><i
-                        class="fa fa-sign-in"></i></button>
-                    <input title="{{ 'Import' | T }}" type="file" id="uploadfield" class="file form-control"
-                           nv-file-select uploader="userMgmt.fileUploader">
-                </div>
-            </div>
-            <div class="table-wrapper">
-                <table st-table="displayedCollection" st-safe-src="userMgmt.userList"
-                       class="table table-hover table-striped">
-                    <thead>
-                    <tr>
-                        <th class="d-num">No.</th>
-                        <th class="d-name">{{ 'Username' | T }}</th>
-                        <th class="d-type">{{ 'Type' | T }}</th>
-                        <th class="d-type">{{ 'Role Name' | T }}</th>
-                        <th class="d-name">{{ 'Email' | T }}</th>
-                        <th class="d-action">{{ 'Action' | T }}</th>
-                    </tr>
-                    <tr>
-                        <th></th>
-                        <th>
-                            <input st-search="username" placeholder="{{'Search by Username'|T}}"
-                                   class="input-sm form-control" type="text"/>
-                        </th>
-                        <th></th>
-                        <th><input st-search="email" placeholder="{{'Search by Email'|T}}" class="input-sm form-control"
-                                   type="text"/></th>
-                        <th></th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr ng-repeat="user in displayedCollection">
-                        <td style="font-weight:bold;font-style:oblique;color:red;" title="{{'Current User'|T}}"
-                            ng-if="userMgmt.current_user == user.username" class="d-num">{{ $index + 1 }}
-                        </td>
-                        <td ng-if="userMgmt.current_user != user.username" class="d-num">{{ ((currentPageIndex - 1) *
-                            pageSize) + $index + 1 }}
-                        </td>
-                        <td style="font-weight:bold;font-style:oblique;color:red;" title="{{'Current User'|T}}"
-                            ng-if="userMgmt.current_user == user.username">{{ user.username }}
-                        </td>
-                        <td ng-if="userMgmt.current_user != user.username">{{ user.username }}</td>
-                        <td ng-if="user.user_type && user.role_id != '0'"><span>{{ user.user_type }}</span></td>
-                        <td ng-if="user.role_id == '0' && user.root"><span>Super Admin</span></td>
-                        <td ng-if="user.role_id == '0' && !user.root"><span>Common Admin</span></td>
-                        <td><span ng-if="user.role_name">{{ user.role_name }}</span></td>
-                        <td>{{ user.email }}</td>
-                        <td ng-if="userMgmt.show_action_button(user)">
-                            <button class="btn-link" title="{{ 'Edit' | T }}" ng-click="userMgmt.editUserInfo(user)"><i
-                                class="array-edit"></i></button>
-                            <button ui-sref="index.admin.roleMgmt.deviceGroupMap({name:user.role_name})"
-                                    class="btn-link"
-                                    title="{{ 'Device Management' | T }}"
-                                    ng-disabled="user.user_type !== 'Device Admin'"
-                                    ng-click="userMgmt.manageDeviceGroup(user)">
-                                <i class="array-backup" style="font-size: 1.25em;"></i>
-                            </button>
-                            <button class="btn-link" title="{{ 'User Authorization' | T }}"
-                                    ng-click="userMgmt.editUserAuth(user)"><i class="fa fa-list-ul"></i></button>
-                            <button ng-disabled="userMgmt.current_user == user.username" class="btn-link"
-                                    title="{{ 'Delete' | T }}" ng-click="userMgmt.deleteUser(user)"><i
-                                class="array-delete"></i></button>
-                        </td>
-                        <td ng-if="!userMgmt.show_action_button(user)"></td>
-                    </tr>
-                    </tbody>
-                    <tfoot>
-                    <tr>
-                        <td colspan="5" class="text-center">
-                            <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5"
-                                 st-page-change="onPageChange(newPage)"></div>
-                        </td>
-                    </tr>
-                    </tfoot>
-                </table>
+<div class="col-md-12">
+    <div class="widget">
+        <div class="table-toolbar">
+            <div class="btn-group">
+                <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="userMgmt.refresh()"><i
+                    class="fa fa-refresh an-tab-icon"></i></button>
+                <button ng-if="userMgmt.root" class="btn btn-link" title="{{ 'Add' | T }}"
+                        ng-click="userMgmt.addUser()"><i class="fa fa-plus-circle an-tab-icon"></i></button>
+                <button ng-if="userMgmt.root" class="btn btn-link" title="{{ 'Export' | T }}"
+                        ng-click="userMgmt.export()"><i class="fa fa-sign-out an-tab-icon"></i></button>
+                <button ng-if="userMgmt.root" class="btn btn-link" title="{{ 'Import' | T }}"><i
+                    class="fa fa-sign-in an-tab-icon"></i></button>
+                <input title="{{ 'Import' | T }}" type="file" id="uploadfield" class="file form-control"
+                       nv-file-select uploader="userMgmt.fileUploader">
             </div>
         </div>
+        <div class="table-wrapper">
+            <table st-table="displayedCollection" st-safe-src="userMgmt.userList"
+                   class="table table-hover table-striped">
+                <thead>
+                <tr>
+                    <th class="d-num">No.</th>
+                    <th class="d-name">{{ 'Username' | T }}</th>
+                    <th class="d-type">{{ 'Type' | T }}</th>
+                    <th class="d-type">{{ 'Role Name' | T }}</th>
+                    <th class="d-name">{{ 'Email' | T }}</th>
+                    <th class="d-action">{{ 'Action' | T }}</th>
+                </tr>
+                <tr>
+                    <th></th>
+                    <th>
+                        <input st-search="username" placeholder="{{'Search by Username'|T}}"
+                               class="input-sm form-control" type="text"/>
+                    </th>
+                    <th></th>
+                    <th><input st-search="email" placeholder="{{'Search by Email'|T}}" class="input-sm form-control"
+                               type="text"/></th>
+                    <th></th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr ng-repeat="user in displayedCollection">
+                    <td style="font-weight:bold;font-style:oblique;color:red;" title="{{'Current User'|T}}"
+                        ng-if="userMgmt.current_user == user.username" class="d-num">{{ $index + 1 }}
+                    </td>
+                    <td ng-if="userMgmt.current_user != user.username" class="d-num">{{ ((currentPageIndex - 1) *
+                        pageSize) + $index + 1 }}
+                    </td>
+                    <td style="font-weight:bold;font-style:oblique;color:red;" title="{{'Current User'|T}}"
+                        ng-if="userMgmt.current_user == user.username">{{ user.username }}
+                    </td>
+                    <td ng-if="userMgmt.current_user != user.username">{{ user.username }}</td>
+                    <td ng-if="user.user_type && user.role_id != '0'"><span>{{ user.user_type }}</span></td>
+                    <td ng-if="user.role_id == '0' && user.root"><span>Super Admin</span></td>
+                    <td ng-if="user.role_id == '0' && !user.root"><span>Common Admin</span></td>
+                    <td><span ng-if="user.role_name">{{ user.role_name }}</span></td>
+                    <td>{{ user.email }}</td>
+                    <td ng-if="userMgmt.show_action_button(user)">
+                        <button class="btn-link" title="{{ 'Edit' | T }}" ng-click="userMgmt.editUserInfo(user)"><i
+                            class="array-edit an-row-icon"></i></button>
+                        <button ui-sref="index.admin.roleMgmt.deviceGroupMap({name:user.role_name})"
+                                class="btn-link"
+                                title="{{ 'Device Management' | T }}"
+                                ng-disabled="user.user_type !== 'Device Admin'"
+                                ng-click="userMgmt.manageDeviceGroup(user)">
+                            <i class="array-backup an-row-icon" style="font-size: 1.25em;"></i>
+                        </button>
+                        <button class="btn-link" title="{{ 'User Authorization' | T }}"
+                                ng-click="userMgmt.editUserAuth(user)"><i class="fa fa-list-ul an-row-icon"></i>
+                        </button>
+                        <button ng-disabled="userMgmt.current_user == user.username" class="btn-link"
+                                title="{{ 'Delete' | T }}" ng-click="userMgmt.deleteUser(user)"><i
+                            class="array-delete an-row-icon"></i></button>
+                    </td>
+                    <td ng-if="!userMgmt.show_action_button(user)"></td>
+                </tr>
+                </tbody>
+                <tfoot>
+                <tr>
+                    <td colspan="5" class="text-center">
+                        <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5"
+                             st-page-change="onPageChange(newPage)"></div>
+                    </td>
+                </tr>
+                </tfoot>
+            </table>
+        </div>
     </div>
 </div>
 
@@ -98,4 +97,3 @@
         opacity: 0;
     }
 </style>
-
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/common/templates/common_alert_dialog.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/common/templates/common_alert_dialog.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/common/templates/common_alert_dialog.html	(working copy)
@@ -1,6 +1,6 @@
 <div class="modal-header">
     <button type="button" class="close" ng-click="commonAlert.modalClose()">&times;</button>
-    <h4 class="modal-title">{{'Message' | T}}</h4>
+    <h6 class="modal-title">{{'Message' | T}}</h6>
 </div>
 <div class="modal-body">
     <div class="row" style="font-size: 15px; white-space: pre-wrap;text-align: center;">{{commonAlert.message}}</div>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/common/templates/confirm.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/common/templates/confirm.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/common/templates/confirm.html	(working copy)
@@ -1,8 +1,8 @@
 <div class="modal-header">
     <button type="button" class="close" ng-click="confirm.modalClose()">&times;</button>
-    <h4 class="modal-title">{{'Confirm Selected VF(s)'|T}}</h4>
+    <h6 class="modal-title">{{'Confirm Selected VF(s)'|T}}</h6>
 </div>
 <div class="modal-body">
     <button type="button" class="btn btn-primary" ng-click="confirm.confirm()">{{'Shared'|T}}</button>
     <button type="button" class="btn btn-primary" style="float: right;" ng-click="confirm.unconfirm()">{{'Dedicated'|T}}</button>
-</div>
\ No newline at end of file
+</div>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/common/templates/delete_confirm.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/common/templates/delete_confirm.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/common/templates/delete_confirm.html	(working copy)
@@ -1,18 +1,18 @@
 <div class="modal-header">
     <button type="button" class="close" ng-click="confirm.modalClose()">&times;</button>
-    <h4 class="modal-title">{{'Delete Confirm'|T}}</h4>
+    <h6 class="modal-title">{{'Delete Confirm' | T}}</h6>
 </div>
 <div class="modal-body confirm-info">
     {{confirm.info}}
 </div>
 <div class="modal-footer">
-    <button type="button" class="btn btn-default" ng-click="confirm.modalClose()">{{'Cancel'|T}}</button>
-    <button type="button" class="btn btn-primary" ng-click="confirm.confirm()">{{'Confirm'|T}}</button>
+    <button type="button" class="btn btn-default" ng-click="confirm.modalClose()">{{'Cancel' | T}}</button>
+    <button type="button" class="btn btn-primary" ng-click="confirm.confirm()">{{'Confirm' | T}}</button>
 </div>
 
-<style> 
+<style>
     .confirm-info {
         color: #F00;
         font-size: 15px;
-    };
-</style>
\ No newline at end of file
+    }
+</style>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/common/templates/engineering.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/common/templates/engineering.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/common/templates/engineering.html	(working copy)
@@ -1,6 +1,6 @@
 <div class="modal-header">
     <button type="button" class="close" ng-click="close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-    <h4 class="modal-title">{{ 'Engineering Mode' | T}}</h4>
+    <h6 class="modal-title">{{ 'Engineering Mode' | T}}</h6>
 </div>
 <div class="modal-body">
     <div class="row">
@@ -89,12 +89,12 @@
                         window.QuoteKeys = true;
                         function $id(id){ return document.getElementById(id); }
                         var IsArray = function(obj) {
-                            return  obj && 
-                                    typeof obj === 'object' && 
+                            return  obj &&
+                                    typeof obj === 'object' &&
                                     typeof obj.length === 'number' &&
                                     !(obj.propertyIsEnumerable('length'));
                         }
-        
+
                         var Process = function(data){
                             window.TAB = MultiplyString(2, window.SINGLE_TAB);
                             window.IsCollapsible = true;
@@ -111,17 +111,17 @@
                             }
                             $('.debug_info .fa-download').click(function(){
                                 var data_to_download = $('.Canvas .CodeContainer').text().replace(/\n/g, "\r\n");
-                                var blob = new Blob([data_to_download], {type: "text/plain"});  
-                                var fileName = 'debug_info.txt';  
+                                var blob = new Blob([data_to_download], {type: "text/plain"});
+                                var fileName = 'debug_info.txt';
                                 var a = document.createElement("a");
                                 a.id = 'debug_info';
-                                document.body.appendChild(a);  
+                                document.body.appendChild(a);
                                 if (navigator.appVersion.toString().indexOf('.NET') > 0) { // for IE browser
                                     window.navigator.msSaveBlob(blob, fileName);
                                 } else { // for other browsers
-                                    a.download = fileName;  
-                                    a.href = URL.createObjectURL(blob);  
-                                    a.click(); 
+                                    a.download = fileName;
+                                    a.href = URL.createObjectURL(blob);
+                                    a.click();
                                 }
                                 document.body.removeChild(document.getElementById('debug_info'));
                             });
@@ -130,7 +130,7 @@
                         window._regexpObj = new RegExp();
                         var ProcessObject = function(obj, indent, addComma, isArray, isPropertyContent){
                             var html = "";
-                            var comma = (addComma) ? "<span class='Comma'>,</span> " : ""; 
+                            var comma = (addComma) ? "<span class='Comma'>,</span> " : "";
                             var type = typeof obj;
                             var clpsHtml ="";
                             if (IsArray(obj)){
@@ -148,10 +148,10 @@
                             } else if (type == 'object') {
                                 if (obj == null){
                                     html += FormatLiteral("null", "", comma, indent, isArray, "Null");
-                                }else if (obj.constructor == window._dateObj.constructor) { 
-                                    html += FormatLiteral("new Date(" + obj.getTime() + ") /*" + obj.toLocaleString()+"*/", "", comma, indent, isArray, "Date"); 
+                                }else if (obj.constructor == window._dateObj.constructor) {
+                                    html += FormatLiteral("new Date(" + obj.getTime() + ") /*" + obj.toLocaleString()+"*/", "", comma, indent, isArray, "Date");
                                 }else if (obj.constructor == window._regexpObj.constructor) {
-                                    html += FormatLiteral("new RegExp(" + obj + ")", "", comma, indent, isArray, "RegExp"); 
+                                    html += FormatLiteral("new RegExp(" + obj + ")", "", comma, indent, isArray, "RegExp");
                                 }else{
                                     var numProps = 0;
                                     for(var prop in obj) numProps++;
@@ -175,7 +175,7 @@
                                 html += FormatLiteral(obj, "", comma, indent, isArray, "Boolean");
                             } else if (type == 'function') {
                                 if (obj.constructor == window._regexpObj.constructor) {
-                                    html += FormatLiteral("new RegExp(" + obj + ")", "", comma, indent, isArray, "RegExp"); 
+                                    html += FormatLiteral("new RegExp(" + obj + ")", "", comma, indent, isArray, "RegExp");
                                 } else {
                                     obj = FormatFunction(indent, obj);
                                     html += FormatLiteral(obj, "", comma, indent, isArray, "Function");
@@ -194,7 +194,7 @@
                             if(isArray) str = GetRow(indent, str);
                             return str;
                         }
-        
+
                         var FormatFunction = function(indent, obj){
                             var tabs = "";
                             for(var i = 0; i < indent; i++) tabs += window.TAB;
@@ -205,26 +205,26 @@
                             }
                             return str;
                         }
-        
+
                         var GetRow = function(indent, data, isPropertyContent){
                             var tabs = "";
                             for(var i = 0; i < indent && !isPropertyContent; i++) tabs += window.TAB;
                             if(data != null && data.length > 0 && data.charAt(data.length-1) != "\n")
                             data = data+"\n";
-                            return tabs+data;                       
-            
+                            return tabs+data;
+
                         }
-        
-        
+
+
                         var CollapseAllClicked = function(){
                             TraverseChildren($id("Canvas"), function(element){
                                 if(element.className == 'collapsible'){
                                     MakeContentVisible(element, false);
-                
+
                                 }
                             }, 0);
                         }
-        
+
                         var ExpandAllClicked = function(){
                             TraverseChildren($id("Canvas"), function(element){
                                 if(element.className == 'collapsible'){
@@ -232,7 +232,7 @@
                                 }
                             }, 0);
                         }
-        
+
                         var MakeContentVisible = function(element, visible){
                             var img = element.previousSibling.firstChild;
                             if(!!img.tagName && img.tagName.toLowerCase() == "img"){
@@ -240,14 +240,14 @@
                                 element.previousSibling.firstChild.src = visible ? window.ImgExpanded : window.ImgCollapsed;
                             }
                         }
-            
+
                         var TraverseChildren = function(element, func, depth){
                             for(var i = 0; i < element.childNodes.length; i++){
                                 TraverseChildren(element.childNodes[i], func, depth + 1);
                             }
                             func(element, depth);
                         }
-        
+
                         var ExpImgClicked = function(img){
                             var container = img.parentNode.nextSibling;
                             if(!container) return;
@@ -260,19 +260,19 @@
                             container.style.display = disp;
                             img.src = src;
                         }
-        
+
                         var CollapseLevel = function(level){
                             TraverseChildren($id("Canvas"), function(element, depth){
                                 if(element.className == 'collapsible'){
                                     if(depth >= level){
                                         MakeContentVisible(element, false);
                                     } else {
-                                        MakeContentVisible(element, true);  
+                                        MakeContentVisible(element, true);
                                     }
                                 }
                             }, 0);
                         }
-        
+
                         var MultiplyString = function(num, str){
                             var sb =[];
                             for(var i = 0; i < num; i++){
@@ -280,14 +280,14 @@
                             }
                             return sb.join("");
                         }
-        
+
                         var LinkToJson = function(){
                             var val = $id("RawJson").value;
                             val = escape(val.split('/n').join(' ').split('/r').join(' '));
                             $id("InvisibleLinkUrl").value = val;
                             $id("InvisibleLink").submit();
                         }
-                    </script>           
+                    </script>
               </div>
         </div>
         <div class="" ng-if="index == 4">
@@ -344,4 +344,4 @@
         margin-top: 30px;
         width: 1000px;
     }
-</style>
\ No newline at end of file
+</style>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/common/templates/licenseExpire.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/common/templates/licenseExpire.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/common/templates/licenseExpire.html	(working copy)
@@ -1,5 +1,5 @@
 <div class="modal-header">
-    <h4 class="modal-title">{{'Please Import License Key'|T}}</h4>
+    <h6 class="modal-title">{{'Please Import License Key'|T}}</h6>
 </div>
 
 <div class="modal-body">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/common/templates/pipe_action_modal.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/common/templates/pipe_action_modal.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/common/templates/pipe_action_modal.html	(working copy)
@@ -1,11 +1,11 @@
 <div class="modal-header" style="padding: 10px; color: #fff; background-color: #3e3d42;">
     <button type="button" class="close" ng-click="pipeAction.end_long_polling()">&times;</button>
-    <h4 class="modal-title">{{pipeAction.title|T}}</h4>
+    <h6 class="modal-title">{{pipeAction.title|T}}</h6>
 </div>
-<div class="modal-body" style="overflow: auto; height: 250px; padding: 20; word-wrap: break-word;">
+<div class="modal-body" style="overflow: auto; height: 250px; padding: 20px; word-wrap: break-word;">
     <p ng-bind-html="pipeAction.result | trust"></p>
 </div>
 <div class="modal-footer">
     <div style="margin-bottom: 15px;text-align: center" ng-hide="pipeAction.finished"><img src="app/images/loading.gif"></div>
     <button style="margin-bottom: 15px;text-align: center" type="button" class="btn btn-primary" ng-click="pipeAction.modalClose()" ng-show="pipeAction.finished">{{'Close'|T}}</button>
-</div>
\ No newline at end of file
+</div>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/common/templates/progress.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/common/templates/progress.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/common/templates/progress.html	(working copy)
@@ -1,6 +1,6 @@
 <div class="modal-header">
     <button type="button" class="close" ng-click="progress.modalClose()">&times;</button>
-    <h4 class="modal-title">{{'Loading...'|T}}</h4>
+    <h6 class="modal-title">{{'Loading...'|T}}</h6>
 </div>
 <div class="modal-body oem-progress">
     <div class="progress">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/common/templates/progress_with_value.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/common/templates/progress_with_value.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/common/templates/progress_with_value.html	(working copy)
@@ -1,6 +1,6 @@
 <div class="modal-header">
     <button type="button" class="close" ng-click="progress.modalClose()">&times;</button>
-    <h4 class="modal-title">{{'Loading...'|T}}</h4>
+    <h6 class="modal-title">{{'Loading...'|T}}</h6>
 </div>
 <div class="modal-body">
     <uib-progressbar max="max" type="info" value="value"><b>{{value}}%</b></uib-progressbar>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/config_template/modal/configTemp.batch.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/config_template/modal/configTemp.batch.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/config_template/modal/configTemp.batch.html	(working copy)
@@ -1,7 +1,7 @@
 <div>
     <div class="modal-header">
         <button type="button" class="close" ng-click="configBatch.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4><i class="array-batch"></i>{{ 'Batch Processing' | T}}</h4>
+        <h6><i class="array-batch"></i>{{ 'Batch Processing' | T}}</h6>
     </div>
     <div class="modal-body" style="overflow-y: visible">
         <form class="form-horizontal">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/config_template/modal/configTemp.check.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/config_template/modal/configTemp.check.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/config_template/modal/configTemp.check.html	(working copy)
@@ -1,7 +1,7 @@
 <div>
     <div class="modal-header">
         <button type="button" class="close" ng-click="configCheck.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4><i class="array-check"></i>{{ 'Compliance Check' | T}}</h4>
+        <h6><i class="array-check"></i>{{ 'Compliance Check' | T}}</h6>
     </div>
     <div class="modal-body">
         <form class="form-horizontal">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/config_template/tab_acl/modal/aclTemp.add.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/config_template/tab_acl/modal/aclTemp.add.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/config_template/tab_acl/modal/aclTemp.add.html	(working copy)
@@ -1,7 +1,7 @@
 <div>
     <div class="modal-header">
         <button type="button" class="close" ng-click="aclAdd.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4 class="modal-title">{{ 'Add ACL Template' | T}}</h4>
+        <h6 class="modal-title">{{ 'Add ACL Template' | T}}</h6>
     </div>
     <div class="modal-body">
         <form class="form-horizontal">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/config_template/tab_custom/modal/customTemp.add.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/config_template/tab_custom/modal/customTemp.add.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/config_template/tab_custom/modal/customTemp.add.html	(working copy)
@@ -1,7 +1,7 @@
 <div>
     <div class="modal-header">
         <button type="button" class="close" ng-click="customTempAdd.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4 class="modal-title">{{ 'Add New Custom Template' | T}}</h4>
+        <h6 class="modal-title">{{ 'Add New Custom Template' | T}}</h6>
     </div>
     <div class="modal-body">
         <form class="form-horizontal">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/config_template/tab_role/modal/role-add.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/config_template/tab_role/modal/role-add.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/config_template/tab_role/modal/role-add.html	(working copy)
@@ -1,8 +1,7 @@
 <div>
     <div class="modal-header">
-        <!-- <div class="title">{{ 'Add Role Template' | T}}</div> -->
         <button type="button" class="close" ng-click="roleConfigAdd.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4 class="modal-title">{{ 'Add Role Template' | T}}</h4>
+        <h6 class="modal-title">{{ 'Add Role Template' | T}}</h6>
     </div>
     <div class="modal-body">
         <form class="form-horizontal" name="add">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/config_template/tab_vpn/modal/vpnTemp.add.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/config_template/tab_vpn/modal/vpnTemp.add.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/config_template/tab_vpn/modal/vpnTemp.add.html	(working copy)
@@ -1,7 +1,7 @@
 <div>
     <div class="modal-header">
         <button type="button" class="close" ng-click="vpnAdd.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4 class="modal-title">{{ 'Add VPN Template' | T}}</h4>
+        <h6 class="modal-title">{{ 'Add VPN Template' | T}}</h6>
     </div>
     <div class="modal-body">
         <form class="form-horizontal">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/config.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/config.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/config.html	(working copy)
@@ -2,19 +2,18 @@
     <div class="col-md-12">
         <ul class="nav nav-tabs">
             <li role="presentation" ng-class="{ active: url_contain('/configuration/device') }">
-                <a ui-sref="index.configuration.device">{{ 'Device Configuration Files' | T }}</a>
+                <a ui-sref="index.configuration.device"><span class="tab-header">{{ 'Device Configuration Files' | T
+                    }}</span></a>
             </li>
             <li role="presentation" ng-class="{ active: url_contain('/configuration/system') }">
-                <a ui-sref="index.configuration.system">{{ 'Cloned Files' | T }}</a>
+                <a ui-sref="index.configuration.system"><span class="tab-header">{{ 'Cloned Files' | T }}</span></a>
             </li>
             <li role="presentation" ng-class="{ active: url_contain('/configuration/customize') }">
-                <a ui-sref="index.configuration.customize">{{ 'Customized Files' | T }}</a>
+                <a ui-sref="index.configuration.customize"><span class="tab-header">{{ 'Customized Files' | T }}</span></a>
             </li>
         </ul>
     </div>
-</div>
-<div class="row">
-     <div class="col-md-12">
+    <div class="content-wrapper">
         <div class="" ng-show="url_contain('/configuration/device')" ui-view="device"></div>
         <div class="" ng-show="url_contain('/configuration/system')" ui-view="system"></div>
         <div class="" ng-show="url_contain('/configuration/customize')" ui-view="customize"></div>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/apvconfig.edit.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/apvconfig.edit.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/apvconfig.edit.html	(working copy)
@@ -1,7 +1,7 @@
 <div>
     <div class="modal-header">
         <button type="button" class="close" ng-click="editAPVConfig.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4>{{ 'Edit Configuration' | T}}---{{editAPVConfig.file_name}}</h4>
+        <h6>{{ 'Edit Configuration' | T}}---{{editAPVConfig.file_name}}</h6>
 
     </div>
     <div class="modal-body" style="margin-left: 0px; padding-top: 0px; max-height: 600px;">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.add.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.add.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.add.html	(working copy)
@@ -1,7 +1,7 @@
 <div>
     <div class="modal-header">
         <button type="button" class="close" ng-click="addConfig.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4><i class="array-add"></i>{{ 'Add Config' | T}}</h4>
+        <h6><i class="array-add"></i>{{ 'Add Config' | T}}</h6>
     </div>
     <div class="modal-body">
         <form class="form-horizontal" name="configAddForm" verify-scope="tipStyle: 1">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.backup.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.backup.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.backup.html	(working copy)
@@ -1,7 +1,7 @@
 <div>
     <div class="modal-header">
         <button type="button" class="close" ng-click="backup.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4><i class="array-backup"></i>{{ 'Backup Configuration' | T}}</h4>
+        <h6><i class="array-backup"></i>{{ 'Backup Configuration' | T}}</h6>
 
     </div>
     <div class="modal-body">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.backupAll.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.backupAll.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.backupAll.html	(working copy)
@@ -1,7 +1,7 @@
 <div>
     <div class="modal-header">
         <button type="button" class="close" ng-click="backup.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4><i class="array-backup"></i>{{ 'Select Devices For Batch Backup' | T}}</h4>
+        <h6><i class="array-backup"></i>{{ 'Select Devices For Batch Backup' | T}}</h6>
     </div>
     <div class="modal-body">
         <form class="form-horizontal" name="configbackupForm" verify-scope="tipStyle: 1">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.check-mutil.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.check-mutil.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.check-mutil.html	(working copy)
@@ -1,7 +1,7 @@
 <div>
     <div class="modal-header">
         <button type="button" class="close" ng-click="checkMutil.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4><i class="fa fa-check-square-o" aria-hidden="true"></i>{{ 'Select Device' | T}}</h4>
+        <h6><i class="fa fa-check-square-o" aria-hidden="true"></i>{{ 'Select Device' | T}}</h6>
     </div>
     <div class="modal-body">
         <form class="form-horizontal">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.check.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.check.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.check.html	(working copy)
@@ -1,7 +1,7 @@
 <div>
     <div class="modal-header">
         <button type="button" class="close" ng-click="check.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4><i class="array-check"></i>{{ 'Configuration Comparison' | T}}</h4>
+        <h6><i class="array-check"></i>{{ 'Configuration Comparison' | T}}</h6>
     </div>
     <div class="modal-body">
         <form class="form-horizontal" name="configCheckForm" verify-scope="tipStyle: 1">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.clone.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.clone.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.clone.html	(working copy)
@@ -1,7 +1,7 @@
 <div>
     <div class="modal-header">
         <button type="button" class="close" ng-click="clone.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4 class=""><i class="array-copy"></i>{{ 'Clone Configuration' | T}}</h4>
+        <h6 class=""><i class="array-copy"></i>{{ 'Clone Configuration' | T}}</h6>
 
     </div>
     <div class="modal-body">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.complianceCheck.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.complianceCheck.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.complianceCheck.html	(working copy)
@@ -1,7 +1,7 @@
 <div>
     <div class="modal-header">
         <button type="button" class="close" ng-click="complianceCheck.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4><i class="array-check"></i>{{ 'Configuration Comparison' | T}}</h4>
+        <h6><i class="array-check"></i>{{ 'Configuration Comparison' | T}}</h6>
     </div>
     <div class="modal-body">
         <form class="form-horizontal" name="complianceCheckForm" verify-scope="tipStyle: 1">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.custom.add.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.custom.add.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.custom.add.html	(working copy)
@@ -1,7 +1,7 @@
 <div>
     <div class="modal-header">
         <button type="button" class="close" ng-click="addConfig.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4><i class="array-add"></i>{{ 'Create Customzied Config File' | T}}</h4>
+        <h6><i class="array-add"></i>{{ 'Create Customzied Config File' | T}}</h6>
     </div>
     <div class="modal-body">
         <form class="form-horizontal" name="customConfigAddForm" verify-scope="tipStyle: 1">
@@ -96,11 +96,11 @@
         margin-top: 30px;
         width: 940px;
     }
-    .file-box{ 
+    .file-box{
         position: relative;
-    } 
-    .file{ 
-        position: absolute; 
+    }
+    .file{
+        position: absolute;
         top: 0;
         opacity: 0;
     }
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.custom.add.type.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.custom.add.type.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.custom.add.type.html	(working copy)
@@ -1,7 +1,7 @@
 <div>
     <div class="modal-header">
         <button type="button" class="close" ng-click="addConfigType.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4>{{ 'Select Customized Configuration Type' | T}}</h4>
+        <h6>{{ 'Select Customized Configuration Type' | T}}</h6>
     </div>
     <div class="form-wrapper">
         <form class="form-horizontal" name="customizedBackupTypeForm" verify-scope="tipStyle: 1">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.custom.template.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.custom.template.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.custom.template.html	(working copy)
@@ -1,7 +1,7 @@
 <div>
     <div class="modal-header">
         <button type="button" class="close" ng-click="templateConfig.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4><i class="array-add"></i>{{ 'Create Customzied Template Config File' | T}}</h4>
+        <h6><i class="array-add"></i>{{ 'Create Customzied Template Config File' | T}}</h6>
     </div>
     <div class="modal-body">
         <form class="form-horizontal" name="customConfigAddForm" verify-scope="tipStyle: 1">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.custom.upload.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.custom.upload.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.custom.upload.html	(working copy)
@@ -1,7 +1,7 @@
 <div>
     <div class="modal-header">
         <button type="button" class="close" ng-click="uploadConfig.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4><i class="array-add"></i>{{ 'Create Customzied Config File' | T}}</h4>
+        <h6><i class="array-add"></i>{{ 'Create Customzied Config File' | T}}</h6>
     </div>
     <div class="modal-body">
         <form class="form-horizontal" name="customConfigUploadForm" verify-scope="tipStyle: 1">
@@ -93,11 +93,11 @@
 </div>
 
 <style>
-    .file-box{ 
+    .file-box{
         position: relative;
-    } 
-    .file{ 
-        position: absolute; 
+    }
+    .file{
+        position: absolute;
         top: 0;
         opacity: 0;
     }
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.detail.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.detail.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.detail.html	(working copy)
@@ -1,7 +1,7 @@
 <div>
     <div class="modal-header">
         <button type="button" class="close" ng-click="detail.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4>{{ 'Configuration' | T}}</h4>
+        <h6>{{ 'Configuration' | T}}</h6>
 
     </div>
     <div class="modal-body">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.edit-config.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.edit-config.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.edit-config.html	(working copy)
@@ -1,7 +1,7 @@
 <div>
     <div class="modal-header">
         <button type="button" class="close" ng-click="editConfig.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4>{{ 'Select VSite' | T}}</h4>
+        <h6>{{ 'Select VSite' | T}}</h6>
     </div>
     <div class="modal-body">
         <form class="form-horizontal" name="configEditForm" verify-scope="tipStyle: 1">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.edit.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.edit.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.edit.html	(working copy)
@@ -1,7 +1,7 @@
 <div>
     <div class="modal-header">
         <button type="button" class="close" ng-click="edit.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4>{{ 'Edit Configuration' | T}}---{{edit.vsname}}</h4>
+        <h6>{{ 'Edit Configuration' | T}}---{{edit.vsname}}</h6>
 
     </div>
     <div class="modal-body" style="margin-left: 0px; padding-top: 0px;">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.init.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.init.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.init.html	(working copy)
@@ -1,7 +1,7 @@
 <div>
     <div class="modal-header">
         <button type="button" class="close" ng-click="init.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4><i class="array-init"></i>{{ 'Apply Configuration' | T}}</h4>
+        <h6><i class="array-init"></i>{{ 'Apply Configuration' | T}}</h6>
     </div>
     <div class="modal-body">
         <form class="form-horizontal" name="configInitForm" verify-scope="tipStyle: 1">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.onekeycheck.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.onekeycheck.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.onekeycheck.html	(working copy)
@@ -1,7 +1,7 @@
 <div>
     <div class="modal-header">
         <button type="button" class="close" ng-click="onKeyCheck.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4 class="modal-title">{{ 'Configuration Comparison All' | T}}</h4>
+        <h6 class="modal-title">{{ 'Configuration Comparison All' | T}}</h6>
     </div>
     <div class="modal-body">
         <form class="form-horizontal">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.recover.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.recover.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.recover.html	(working copy)
@@ -1,7 +1,7 @@
 <div>
     <div class="modal-header">
         <button type="button" class="close" ng-click="recover.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4><i class="array-recover"></i>{{ 'Recover Configuration' | T}}</h4>
+        <h6><i class="array-recover"></i>{{ 'Recover Configuration' | T}}</h6>
     </div>
     <div class="modal-body">
         <form class="form-horizontal" name="configRecoverForm" verify-scope="tipStyle: 1">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.scheduleBackupAll.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.scheduleBackupAll.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.scheduleBackupAll.html	(working copy)
@@ -1,7 +1,7 @@
 <div>
     <div class="modal-header">
         <button type="button" class="close" ng-click="scheduleBackup.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4><i class="fa fa-history"></i>{{ 'Schedule Backup Configuration' | T}}</h4>
+        <h6><i class="fa fa-history"></i>{{ 'Schedule Backup Configuration' | T}}</h6>
 
     </div>
     <div class="modal-body">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.template.add.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.template.add.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.template.add.html	(working copy)
@@ -1,7 +1,7 @@
 <div>
     <div class="modal-header">
         <button type="button" class="close" ng-click="addTemplate.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4><i class="array-add"></i>{{ 'Add Template Keys' | T}}</h4>
+        <h6><i class="array-add"></i>{{ 'Add Template Keys' | T}}</h6>
     </div>
     <div class="modal-body">
         <form class="form-horizontal" name="configAddForm" verify-scope="tipStyle: 1">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.template.edit.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.template.edit.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.template.edit.html	(working copy)
@@ -1,7 +1,7 @@
 <div>
     <div class="modal-header">
         <button type="button" class="close" ng-click="editTemplate.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4><i class="array-add"></i>{{ 'Edit Template Keys' | T}}</h4>
+        <h6><i class="array-add"></i>{{ 'Edit Template Keys' | T}}</h6>
     </div>
     <div class="modal-body">
         <form class="form-horizontal" name="configAddForm" verify-scope="tipStyle: 1">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.template.keyval.edit.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.template.keyval.edit.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.template.keyval.edit.html	(working copy)
@@ -1,7 +1,7 @@
 <div>
     <div class="modal-header">
         <button type="button" class="close" ng-click="editTemplateKeyValue.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4>{{ 'Edit Device Template Key Default Value' | T}}</h4>
+        <h6>{{ 'Edit Device Template Key Default Value' | T}}</h6>
     </div>
     <div class="modal-body">
         <form class="form-horizontal" name="configAddForm" verify-scope="tipStyle: 1">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.versionCompare.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.versionCompare.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config.versionCompare.html	(working copy)
@@ -1,7 +1,7 @@
 <div>
     <div class="modal-header">
         <button type="button" class="close" ng-click="versionCompare.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4><i class="fa fa-exchange"></i>{{ 'Backup Version Compare' | T}}</h4>
+        <h6><i class="fa fa-exchange"></i>{{ 'Backup Version Compare' | T}}</h6>
 
     </div>
     <div class="modal-body">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config_task.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config_task.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config_task.html	(working copy)
@@ -1,7 +1,7 @@
 <div>
     <div class="modal-header">
         <button type="button" class="close" ng-click="task.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4 class="modal-title">{{ 'Config Task List' | T}}</h4>
+        <h6 class="modal-title">{{ 'Config Task List' | T}}</h6>
     </div>
     <div class="modal-body">
         <div id="ssl-check" class="widget">
@@ -66,4 +66,4 @@
     .modal-dialog {
         width: 800px;
     }
-</style>
\ No newline at end of file
+</style>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config_task_diff.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config_task_diff.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config_task_diff.html	(working copy)
@@ -1,7 +1,7 @@
 <div>
     <div class="modal-header">
         <button type="button" class="close" ng-click="diff.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4 class="modal-title">{{ 'Diff Information' | T}}</h4>
+        <h6 class="modal-title">{{ 'Diff Information' | T}}</h6>
     </div>
     <div class="modal-body">
         <div class="widget">
@@ -41,7 +41,7 @@
                         </div>
                     </div>
                 </div>
-                
+
             </div>
         </div>
     </div>
@@ -61,4 +61,4 @@
 th {
     width: 160px;
 }
-</style>
\ No newline at end of file
+</style>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config_task_output.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config_task_output.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/modal/config_task_output.html	(working copy)
@@ -1,7 +1,7 @@
 <div>
     <div class="modal-header">
         <button type="button" class="close" ng-click="output.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4 class="modal-title">{{ 'Apply Result' | T}}</h4>
+        <h6 class="modal-title">{{ 'Apply Result' | T}}</h6>
     </div>
     <div class="modal-body">
         <div class="widget">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/tabs/customize.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/tabs/customize.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/tabs/customize.html	(working copy)
@@ -1,53 +1,66 @@
-<div class="row">
-    <div class="col-md-12">
-        <div class="widget">
-            <div class="table-toolbar">
-                <div class="btn-group">
-                    <button class="btn btn-link" title="{{ 'Add' | T }}" ng-click="customize.add()"><i class="fa fa-plus-circle"></i></button>
-                    <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="customize.refresh()"><i class="fa fa-refresh"></i></button>
-                </div>
-            </div>
-            <div class="table-wrapper">
-                <div style="margin-bottom: 5px;margin-top:5px;text-align: center" ng-if="!customize.configList"><img src="app/images/loading.gif"></div>
-                <table st-table="displayedCollection" st-safe-src="customize.configList" class="table table-hover table-striped">
-                    <thead>
-                        <tr>
-                            <th class="d-num">No.</th>
-                            <th class="d-name">{{ 'File Name' | T }}</th>
-                            <th class="d-type">{{ 'File Type' | T }}</th>
-                            <th class="d-type">{{ 'Device Type' | T }}</th>
-                            <th class="d-ctime">{{ 'Create Time' | T }}</th>
-                            <th class="d-mtime">{{ 'Modify Time' | T }}</th>
-                            <th class="d-comment">{{ 'Comment' | T }}</th>
-                            <th class="d-action">{{ 'Action' | T }}</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr ng-repeat="configItem in displayedCollection">
-                            <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
-                            <td><a class="name" ng-click="customize.edit(configItem)">{{ configItem.name }}</a></td>
-                            <td>{{ configItem.file_type }}</td>
-                            <td>{{ configItem.device_type }}</td>
-                            <td>{{ configItem.create_time }}</td>
-                            <td>{{ configItem.modify_time }}</td>
-                            <td>{{ configItem.comment }}</td>
-                            <td>
-                                <a class="icon-box" title="{{ 'Configuration Comparison' | T }}" ng-if="configItem.file_type!='template'" ng-click="customize.compCheck(configItem)"><i class="array-check"></i></a>
-                                <a class="icon-box" title="{{ 'Apply Configuration' | T }}" ng-click="customize.apply(configItem)"><i class="array-init"></i></a>
-                                <a class="icon-box" title="{{ 'Tasks' | T }}" ng-click="customize.task(configItem)"><i class="fa fa-thumb-tack" uib-tooltip="{{ 'Click button to show task for this configuration.' | T}}" tooltip-is-open="configItem.tooltipIsOpen"></i></a>
-                                <a class="icon-box" title="{{ 'Delete' | T }}" ng-click="customize.delete(configItem)"><i class="array-delete"></i></a>
-                            </td>
-                        </tr>
-                    </tbody>
-                    <tfoot>
-                        <tr>
-                            <td colspan="7" class="text-center">
-                                <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)></div>
-                            </td>
-                        </tr>
-                    </tfoot>
-                </table>
+<div class="col-md-12">
+    <div class="widget">
+        <div class="table-toolbar">
+            <div class="btn-group">
+                <button class="btn btn-link" title="{{ 'Add' | T }}" ng-click="customize.add()"><i
+                    class="fa fa-plus-circle an-tab-icon"></i></button>
+                <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="customize.refresh()"><i
+                    class="fa fa-refresh an-tab-icon"></i></button>
             </div>
         </div>
+        <div class="table-wrapper">
+            <div style="margin-bottom: 5px;margin-top:5px;text-align: center" ng-if="!customize.configList"><img
+                src="app/images/loading.gif"></div>
+            <table st-table="displayedCollection" st-safe-src="customize.configList"
+                   class="table table-hover table-striped">
+                <thead>
+                <tr>
+                    <th class="d-num">No.</th>
+                    <th class="d-name">{{ 'File Name' | T }}</th>
+                    <th class="d-type">{{ 'File Type' | T }}</th>
+                    <th class="d-type">{{ 'Device Type' | T }}</th>
+                    <th class="d-ctime">{{ 'Create Time' | T }}</th>
+                    <th class="d-mtime">{{ 'Modify Time' | T }}</th>
+                    <th class="d-comment">{{ 'Comment' | T }}</th>
+                    <th class="d-action">{{ 'Action' | T }}</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr ng-repeat="configItem in displayedCollection">
+                    <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
+                    <td><a class="name" ng-click="customize.edit(configItem)">{{ configItem.name }}</a></td>
+                    <td>{{ configItem.file_type }}</td>
+                    <td>{{ configItem.device_type }}</td>
+                    <td>{{ configItem.create_time }}</td>
+                    <td>{{ configItem.modify_time }}</td>
+                    <td>{{ configItem.comment }}</td>
+                    <td>
+                        <a class="icon-box" title="{{ 'Configuration Comparison' | T }}"
+                           ng-if="configItem.file_type!='template'" ng-click="customize.compCheck(configItem)"><i
+                            class="array-check an-row-icon"></i></a>&nbsp;&nbsp;
+                        <a class="icon-box" title="{{ 'Apply Configuration' | T }}"
+                           ng-click="customize.apply(configItem)"><i class="array-init an-row-icon"></i></a>&nbsp;&nbsp;
+                        <a class="icon-box" title="{{ 'Tasks' | T }}" ng-click="customize.task(configItem)"><i
+                            class="fa fa-thumb-tack an-row-icon"
+                            uib-tooltip="{{ 'Click button to show task for this configuration.' | T}}"
+                            tooltip-is-open="configItem.tooltipIsOpen"></i></a>&nbsp;&nbsp;
+                        <a class="icon-box" title="{{ 'Delete' | T }}" ng-click="customize.delete(configItem)"><i
+                            class="array-delete an-row-icon"></i></a>
+                    </td>
+                </tr>
+                <tr ng-if="displayedCollection.length === 0">
+                    <td colspan="8" class="text-center">No matching records found.</td>
+                </tr>
+                </tbody>
+                <tfoot>
+                <tr>
+                    <td colspan="7" class="text-center">
+                        <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5"
+                             st-page-change="onPageChange(newPage)"></div>
+                    </td>
+                </tr>
+                </tfoot>
+            </table>
+        </div>
     </div>
 </div>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/tabs/customize_basic.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/tabs/customize_basic.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/tabs/customize_basic.html	(working copy)
@@ -1,18 +1,17 @@
-<div class="row">
-  <div class="col-md-12">
+<div class="col-md-12">
     <section>
         <ul class="nav nav-pills">
             <li ng-class="{ active:url_contain('/configuration/customize/default')}">
-               <a ui-sref="index.configuration.customize.default">{{'Custom Configuration'|T}}</a>
+                <a ui-sref="index.configuration.customize.default">{{'Custom Configuration' | T}}</a>
             </li>
             <li ng-class="{ active:url_contain('/configuration/customize/template')}">
-               <a ui-sref="index.configuration.customize.template">{{'Custom Template Parameters'|T}}</a>
+                <a ui-sref="index.configuration.customize.template">{{'Custom Template Parameters' | T}}</a>
             </li>
         </ul>
     </section>
-  </div>
 </div>
+
 <div class="panel-default">
     <div class="" ng-show="url_contain('/configuration/customize/default')" ui-view="default"></div>
     <div class="" ng-show="url_contain('/configuration/customize/template')" ui-view="template"></div>
-</div>
\ No newline at end of file
+</div>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/tabs/device.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/tabs/device.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/tabs/device.html	(working copy)
@@ -1,53 +1,64 @@
-<div class="row">
-    <div class="col-md-12">
-        <div class="widget">
-            <!-- <div class="widget-header">{{'Device Configuration Files'|T}}</div> -->
-            <div class="table-toolbar">
-                <div class="btn-group">
-                    <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="device.refreshTable()"><i class="array-refresh"></i></button>
-                    <button class="btn btn-link" title="{{ 'Backup' | T }}" ng-click="device.backupAll()"><i class="array-backup"></i></button>
-                    <button class="btn btn-link" title="{{ 'Configuration Comparison All' | T }}" ng-click="device.oneKeyCheck()"><i class="array-check"></i></button>
-                    <button class="btn btn-link" title="{{ 'Schedule Backup' | T }}" ng-click="device.schduleBackup()"><i class="fa fa-history"></i></button>
-                    <button class="btn btn-link" title="{{ 'Version Compare' | T }}" ng-click="device.versionCompare()"><i class="fa fa-exchange"></i></button>
-                </div>
-            </div>
-            <div class="table-wrapper">
-                <table st-table="displayedCollection" st-safe-src="device.deviceConfigList" class="table table-hover table-striped">
-                    <thead>
-                        <tr>
-                            <th class="d-num">No.</th>
-                            <th class="d-name">{{ 'Device Name' | T }}</th>
-                            <th class="d-type">{{ 'Device Type' | T }}</th>
-                            <th class="d-ctime">{{ 'Last Backup Time' | T }}</th>
-                            <th class="d-action">{{ 'Action' | T }}</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr ng-repeat="configItem in displayedCollection">
-                            <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
-                            <td><a class="name" ng-click="device.getConfig(configItem)">{{ configItem.name }}</a></td>
-                            <td>{{ configItem.device_type }}</td>
-                            <td>{{ configItem.last_backup_time }}</td>
-                            <td>
-                                <a class="icon-box" title="{{ 'View History Backup Files' | T }}" ui-sref="index.configuration.device.detail({name:configItem.name})" ng-click="device.info(configItem)"><i class="array-detail"></i></a>
-                                <a class="icon-box" title="{{ 'Compare Configuration with Last Backup File' | T }}" ng-click="device.singleCheck(configItem)"><i class="array-check"></i></a>
-                                <a class="icon-box" title="{{ 'Clone Configuration' | T }}" ng-click="device.cloneDeviceConfig(configItem)"><i class="array-copy"></i></a>
-                                <!--a class="icon-box" title="{{ 'Refresh' | T }}" ng-click="device.refresh(configItem)"><i class="array-refresh"></i></a-->
-                                <a class="icon-box" title="{{ 'Click button to show task for this configuration.' | T}}" ng-click="device.task(configItem)"><i class="fa fa-thumb-tack"></i></a>
-                                <a class="icon-box" title="{{ 'Backup Configuration' | T }}" ng-click="device.backup(configItem)"><i class="array-backup"></i></a>
-                                <!--<a class="icon-box" title="{{ 'Delete Configuration' | T }}" ng-click="device.delete(configItem)"><i class="array-delete"></i></a>-->
-                            </td>
-                        </tr>
-                    </tbody>
-                    <tfoot>
-                        <tr>
-                            <td colspan="5" class="text-center">
-                                <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)"></div>
-                            </td>
-                        </tr>
-                    </tfoot>
-                </table>
+<div class="col-md-12">
+    <div class="widget">
+        <div class="table-toolbar">
+            <div class="btn-group">
+                <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="device.refreshTable()"><i
+                    class="array-refresh an-tab-icon"></i></button>
+                <button class="btn btn-link" title="{{ 'Backup' | T }}" ng-click="device.backupAll()"><i
+                    class="array-backup an-tab-icon"></i></button>
+                <button class="btn btn-link" title="{{ 'Configuration Comparison All' | T }}"
+                        ng-click="device.oneKeyCheck()"><i class="array-check an-tab-icon"></i></button>
+                <button class="btn btn-link" title="{{ 'Schedule Backup' | T }}" ng-click="device.schduleBackup()"><i
+                    class="fa fa-history an-tab-icon"></i></button>
+                <button class="btn btn-link" title="{{ 'Version Compare' | T }}" ng-click="device.versionCompare()"><i
+                    class="fa fa-exchange an-tab-icon"></i></button>
             </div>
         </div>
+        <div class="table-wrapper">
+            <table st-table="displayedCollection" st-safe-src="device.deviceConfigList"
+                   class="table table-hover table-striped">
+                <thead>
+                <tr>
+                    <th class="d-num">No.</th>
+                    <th class="d-name">{{ 'Device Name' | T }}</th>
+                    <th class="d-type">{{ 'Device Type' | T }}</th>
+                    <th class="d-ctime">{{ 'Last Backup Time' | T }}</th>
+                    <th class="d-action">{{ 'Action' | T }}</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr ng-repeat="configItem in displayedCollection">
+                    <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
+                    <td><a class="name" ng-click="device.getConfig(configItem)">{{ configItem.name }}</a></td>
+                    <td>{{ configItem.device_type }}</td>
+                    <td>{{ configItem.last_backup_time }}</td>
+                    <td>
+                        <a class="icon-box" title="{{ 'View History Backup Files' | T }}"
+                           ui-sref="index.configuration.device.detail({name:configItem.name})"
+                           ng-click="device.info(configItem)"><i class="array-detail an-row-icon"></i></a>&nbsp;&nbsp;
+                        <a class="icon-box" title="{{ 'Compare Configuration with Last Backup File' | T }}"
+                           ng-click="device.singleCheck(configItem)"><i class="array-check an-row-icon"></i></a>&nbsp;&nbsp;
+                        <a class="icon-box" title="{{ 'Clone Configuration' | T }}"
+                           ng-click="device.cloneDeviceConfig(configItem)"><i class="array-copy an-row-icon"></i></a>&nbsp;&nbsp;
+                        <a class="icon-box" title="{{ 'Click button to show task for this configuration.' | T}}"
+                           ng-click="device.task(configItem)"><i class="fa fa-thumb-tack an-row-icon"></i></a>&nbsp;&nbsp;
+                        <a class="icon-box" title="{{ 'Backup Configuration' | T }}"
+                           ng-click="device.backup(configItem)"><i class="array-backup an-row-icon"></i></a>
+                    </td>
+                </tr>
+                <tr ng-if="displayedCollection.length === 0">
+                    <td colspan="5" class="text-center">No matching records found.</td>
+                </tr>
+                </tbody>
+                <tfoot>
+                <tr>
+                    <td colspan="5" class="text-center">
+                        <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5"
+                             st-page-change="onPageChange(newPage)"></div>
+                    </td>
+                </tr>
+                </tfoot>
+            </table>
+        </div>
     </div>
 </div>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/tabs/system.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/tabs/system.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/tabs/system.html	(working copy)
@@ -1,55 +1,64 @@
-<div class="row">
-    <!--div class="table-toolbar">
-        <a class="icon-box" title="{{ '' | T }}" ng-click="system.add()"><i class="array-add"></i></a>
-    </div -->
-    <div class="col-md-12">
-        <div class="widget">
-            <div class="table-toolbar">
-                <div class="btn-group">
-                    <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="system.refresh()"><i class="array-refresh"></i></button>
-                </div>
-            </div>
-            <div class="table-wrapper">
-                <table st-table="displayedCollection" st-safe-src="system.configList" class="table table-hover table-striped">
-                    <thead>
-                        <tr>
-                            <th class="d-num">No.</th>
-                            <th class="d-name">{{ 'File Name' | T }}</th>
-                            <th class="d-type">{{ 'File Type' | T }}</th>
-                            <th class="d-type">{{ 'Device Type' | T }}</th>
-                            <th class="d-ctime">{{ 'Create Time' | T }}</th>
-                            <th class="d-mtime">{{ 'Clone Source' | T }}</th>
-                            <th class="d-comment">{{ 'Comment' | T }}</th>
-                            <th class="d-action">{{ 'Action' | T }}</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr ng-repeat="configItem in displayedCollection">
-                            <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
-                            <td ng-click="system.editConfig(configItem)"><a class="name">{{ configItem.name }}</a></td>
-                            <td>{{ configItem.file_type }}</td>
-                            <td>{{ configItem.device_type }}</td>
-                            <td>{{ configItem.create_time }}</td>
-                            <td>{{ configItem.modify_time }}</td>
-                            <td>{{ configItem.comment }}</td>
-                            <td>
-                                <a class="icon-box" title="{{ 'Clone' | T }}" ng-click="system.clone(configItem)"><i class="array-copy"></i></a>
-                                <a class="icon-box" title="{{ 'Configuration Comparison' | T }}" ng-click="system.compCheck(configItem)"><i class="array-check"></i></a>
-                                <a class="icon-box" title="{{ 'Apply Configuration' | T }}" ng-if="configItem.file_type == 'system' || configItem.file_type == 'vs'" ng-click="system.init(configItem)"><i class="array-init"></i></a>
-                                <a class="icon-box" title="{{ 'Tasks' | T }}" ng-click="system.task(configItem)"><i class="fa fa-thumb-tack" uib-tooltip="{{ 'Click button to show task for this configuration.' | T}}" tooltip-is-open="configItem.tooltipIsOpen"></i></a>
-                                <a class="icon-box" title="{{ 'Delete' | T }}" ng-click="system.delete(configItem)"><i class="array-delete"></i></a>
-                            </td>
-                        </tr>
-                    </tbody>
-                    <tfoot>
-                        <tr>
-                            <td colspan="7" class="text-center">
-                                <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)"></div>
-                            </td>
-                        </tr>
-                    </tfoot>
-                </table>
+<div class="col-md-12">
+    <div class="widget">
+        <div class="table-toolbar">
+            <div class="btn-group">
+                <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="system.refresh()"><i
+                    class="array-refresh an-tab-icon"></i></button>
             </div>
         </div>
+        <div class="table-wrapper">
+            <table st-table="displayedCollection" st-safe-src="system.configList"
+                   class="table table-hover table-striped">
+                <thead>
+                <tr>
+                    <th class="d-num">No.</th>
+                    <th class="d-name">{{ 'File Name' | T }}</th>
+                    <th class="d-type">{{ 'File Type' | T }}</th>
+                    <th class="d-type">{{ 'Device Type' | T }}</th>
+                    <th class="d-ctime">{{ 'Create Time' | T }}</th>
+                    <th class="d-mtime">{{ 'Clone Source' | T }}</th>
+                    <th class="d-comment">{{ 'Comment' | T }}</th>
+                    <th class="d-action">{{ 'Action' | T }}</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr ng-repeat="configItem in displayedCollection">
+                    <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
+                    <td ng-click="system.editConfig(configItem)"><a class="name">{{ configItem.name }}</a></td>
+                    <td>{{ configItem.file_type }}</td>
+                    <td>{{ configItem.device_type }}</td>
+                    <td>{{ configItem.create_time }}</td>
+                    <td>{{ configItem.modify_time }}</td>
+                    <td>{{ configItem.comment }}</td>
+                    <td>
+                        <a class="icon-box" title="{{ 'Clone' | T }}" ng-click="system.clone(configItem)"><i
+                            class="array-copy an-row-icon"></i></a>&nbsp;&nbsp;
+                        <a class="icon-box" title="{{ 'Configuration Comparison' | T }}"
+                           ng-click="system.compCheck(configItem)"><i class="array-check an-row-icon"></i></a>&nbsp;&nbsp;
+                        <a class="icon-box" title="{{ 'Apply Configuration' | T }}"
+                           ng-if="configItem.file_type == 'system' || configItem.file_type == 'vs'"
+                           ng-click="system.init(configItem)"><i class="array-init an-row-icon"></i></a>&nbsp;&nbsp;
+                        <a class="icon-box" title="{{ 'Tasks' | T }}" ng-click="system.task(configItem)"><i
+                            class="fa fa-thumb-tack an-row-icon"
+                            uib-tooltip="{{ 'Click button to show task for this configuration.' | T}}"
+                            tooltip-is-open="configItem.tooltipIsOpen"></i></a>&nbsp;&nbsp;
+                        <a class="icon-box" title="{{ 'Delete' | T }}" ng-click="system.delete(configItem)"><i
+                            class="array-delete an-row-icon"></i></a>
+                    </td>
+                </tr>
+                <tr ng-if="displayedCollection.length === 0">
+                    <td colspan="8" class="text-center">No matching records found.</td>
+                </tr>
+                </tbody>
+                <tfoot>
+                <tr>
+                    <td colspan="7" class="text-center">
+                        <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5"
+                             st-page-change="onPageChange(newPage)"></div>
+                    </td>
+                </tr>
+                </tfoot>
+            </table>
+        </div>
     </div>
 </div>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/tabs/template.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/tabs/template.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/configuration/tabs/template.html	(working copy)
@@ -1,51 +1,59 @@
-<div class="row">
-    <rd-widget>
-        <div class="col-md-12">
-            <div class="widget">
-                <rd-widget-header icon="fa fa-server" title="{{'Template Key Word'|T}}">
-                </rd-widget-header>
-                <div class="table-toolbar">
-                    <div class="btn-group">
-                        <button class="btn btn-link" title="{{ 'Add' | T }}" ng-click="template.add()"><i class="fa fa-plus-circle"></i></button>
-                        <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="template.refresh()"><i class="fa fa-refresh"></i></button>
-                    </div>
-                </div>
-                <div class="table-wrapper">
-                    <table st-table="displayedCollection" st-safe-src="template.templateList" class="table table-hover table-striped">
-                        <thead>
-                            <tr>
-                                <th class="d-num">No.</th>
-                                <th class="d-name">{{ 'Template Key Word' | T }}</th>
-                                <th class="d-name">{{ 'Description' | T }}</th>
-                                <th class="d-name">{{ 'Default Value' | T }}</th>
-                                <th class="d-action">{{ 'Action' | T }}</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr ng-repeat="item in displayedCollection">
-                                <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
-                                <td>{{ item.key }}</td>
-                                <td>{{ item.description }}</td>
-                                <td>{{ item.default_value }}</td>
-                                <td>
-                                    <a class="icon-box" title="{{ 'Edit' | T }}" ng-click="template.edit(item)"><i class="array-edit"></i></a>
-                                    <a class="icon-box" title="{{ 'Delete' | T }}" ng-click="template.delete(item)"><i class="array-delete"></i></a>
-                                </td>
-                            </tr>
-                        </tbody>
-                        <tfoot>
-                            <tr>
-                                <td colspan="7" class="text-center">
-                                    <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)"></div>
-                                </td>
-                            </tr>
-                        </tfoot>
-                    </table>
+<rd-widget>
+    <div class="col-md-12">
+        <div class="widget">
+            <rd-widget-header icon="fa fa-server" title="{{'Template Key Word'|T}}" class="tab-header-1">
+            </rd-widget-header>
+            <div class="table-toolbar">
+                <div class="btn-group">
+                    <button class="btn btn-link" title="{{ 'Add' | T }}" ng-click="template.add()"><i
+                        class="fa fa-plus-circle an-tab-icon"></i></button>
+                    <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="template.refresh()"><i
+                        class="fa fa-refresh an-tab-icon"></i></button>
                 </div>
             </div>
+            <div class="table-wra   pper">
+                <table st-table="displayedCollection" st-safe-src="template.templateList"
+                       class="table table-hover table-striped">
+                    <thead>
+                    <tr>
+                        <th class="d-num">No.</th>
+                        <th class=" d-name">{{ 'Template Key Word' | T }}</th>
+                        <th class="d-name">{{ 'Description' | T }}</th>
+                        <th class="d-name">{{ 'Default Value' | T }}</th>
+                        <th class="d-action">{{ 'Action' | T }}</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr ng-repeat="item in displayedCollection">
+                        <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
+                        <td>{{ item.key }}</td>
+                        <td>{{ item.description }}</td>
+                        <td>{{ item.default_value }}</td>
+                        <td>
+                            <a class="icon-box" title="{{ 'Edit' | T }}" ng-click="template.edit(item)"><i
+                                class="array-edit an-row-icon"></i></a>&nbsp;&nbsp;
+                            <a class="icon-box" title="{{ 'Delete' | T }}" ng-click="template.delete(item)"><i
+                                class="array-delete an-row-icon"></i></a>
+                        </td>
+                    </tr>
+                    <tr ng-if="displayedCollection.length === 0">
+                        <td colspan="5" class="text-center">No matching records found.</td>
+                    </tr>
+                    </tbody>
+                    <tfoot>
+                    <tr>
+                        <td colspan="7" class="text-center">
+                            <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5"
+                                 st-page-change="onPageChange(newPage)"></div>
+                        </td>
+                    </tr>
+                    </tfoot>
+                </table>
+            </div>
         </div>
-    </rd-widget>
-</div>
+    </div>
+</rd-widget>
+
 <div class="row" ng-if="template.templateList.length > 0">
     <rd-widget>
         <div class="col-md-12">
@@ -54,37 +62,31 @@
                 </rd-widget-header>
                 <div class="table-toolbar">
                     <div class="btn-group">
-                        <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="template.refresh2()"><i class="fa fa-refresh"></i></button>
+                        <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="template.refresh2()"><i
+                            class="fa fa-refresh an-tab-icon"></i></button>
                     </div>
                 </div>
                 <div class="table-wrapper">
                     <table class="table table-hover table-striped">
                         <thead>
-                            <tr>
-                                <th class="d-num">No.</th>
-                                <th ng-repeat="item in template.templateKeyList">{{ item }}</th>
-                            </tr>
+                        <tr>
+                            <th class="d-num">No.</th>
+                            <th ng-repeat="item in template.templateKeyList">{{ item }}</th>
+                        </tr>
                         </thead>
                         <tbody>
-                            <tr ng-repeat="item in template.templateValueList">
-                                <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
-                                <td ng-repeat="each in item">{{ each }}</td>
-                                <td>
-                                    <a class="icon-box" title="{{ 'Edit' | T }}" ng-click="template.editKeyValue(item)"><i class="array-edit"></i></a>
-                                </td>
-                            </tr>
+                        <tr ng-repeat="item in template.templateValueList">
+                            <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
+                            <td ng-repeat="each in item">{{ each }}</td>
+                            <td>
+                                <a class="icon-box" title="{{ 'Edit' | T }}" ng-click="template.editKeyValue(item)"><i
+                                    class="array-edit an-row-icon"></i></a>
+                            </td>
+                        </tr>
                         </tbody>
-                       <!--  <tfoot>
-                            <tr>
-                                <td colspan="7" class="text-center">
-                                    <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)"></div>
-                                </td>
-                            </tr>
-                        </tfoot> -->
                     </table>
                 </div>
             </div>
         </div>
     </rd-widget>
 </div>
-
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/dashboard/dashboard.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/dashboard/dashboard.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/dashboard/dashboard.html	(working copy)
@@ -1,11 +1,13 @@
 <div class="row">
     <div class="col-md-12">
         <ul class="nav nav-tabs">
-            <li role="presentation" ng-if="plugin_contain('cm.monitoring')" ng-class="{ active: url_contain('/dashboard/overview') }">
-                <a ui-sref="index.dashboard.overview">{{'Overview'|T}}</a>
+            <li role="presentation" ng-if="plugin_contain('cm.monitoring')"
+                ng-class="{ active: url_contain('/dashboard/overview') }">
+                <a ui-sref="index.dashboard.overview"><span class="tab-header">{{'Overview' | T}}</span></a>
             </li>
             <li role="presentation" ng-class="{ active: url_contain('/dashboard/system_statistics') }">
-                <a ui-sref="index.dashboard.system_statistics">{{'System Statistics'|T}}</a>
+                <a ui-sref="index.dashboard.system_statistics"><span
+                    class="tab-header">{{'System Statistics' | T}}</span></a>
             </li>
         </ul>
     </div>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/dashboard/overview/overview.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/dashboard/overview/overview.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/dashboard/overview/overview.html	(working copy)
@@ -10,8 +10,9 @@
                     </div>
                     <div class="col-md-7">
                         <div style="float: left;">
-                            <span class="demonstration">{{'Total Alerts in 7 Days'|T}}</span>
-                            <span class="title-nub" ui-sref="index.monitoring.alerting.log({timeRange: '7d'})" style="cursor: pointer;">{{monitorOverview.alertingLogNum}}</span>
+                            <span class="demonstration">{{'Total Alerts in 7 Days' | T}}</span>
+                            <span class="title-nub" ui-sref="index.monitoring.alerting.log({timeRange: '7d'})"
+                                  style="cursor: pointer;">{{monitorOverview.alertingLogNum}}</span>
                         </div>
                     </div>
                 </div>
@@ -23,8 +24,10 @@
                     </div>
                     <div class="col-md-7">
                         <div>
-                            <span class="demonstration">{{'Is Alerting'|T}}</span>
-                            <span class="title-nub" ui-sref="index.monitoring.alerting.rule.threshold({state: 'alerting'})" style="cursor: pointer;">{{monitorOverview.alertingNum}}</span>
+                            <span class="demonstration">{{'Is Alerting' | T}}</span>
+                            <span class="title-nub"
+                                  ui-sref="index.monitoring.alerting.rule.threshold({state: 'alerting'})"
+                                  style="cursor: pointer;">{{monitorOverview.alertingNum}}</span>
                         </div>
                     </div>
                 </div>
@@ -39,8 +42,10 @@
                     </div>
                     <div class="col-md-7">
                         <div>
-                            <span class="demonstration">{{'Insufficient Data'|T}}</span>
-                            <span class="title-nub" ui-sref="index.monitoring.alerting.rule.threshold({state: 'no_data'})" style="cursor: pointer;">{{monitorOverview.noDataNum}}</span>
+                            <span class="demonstration">{{'Insufficient Data' | T}}</span>
+                            <span class="title-nub"
+                                  ui-sref="index.monitoring.alerting.rule.threshold({state: 'no_data'})"
+                                  style="cursor: pointer;">{{monitorOverview.noDataNum}}</span>
                         </div>
                     </div>
                 </div>
@@ -57,8 +62,9 @@
                 </div>
                 <div class="col-md-8" style="padding-right: 0">
                     <div style="float: left;">
-                        <span class="demonstration">{{'Total events in 7 Days'|T}}</span>
-                        <span class="title-nub" ui-sref="index.monitoring.event.query({timeRange: '7d'})" style="cursor: pointer;">{{monitorOverview.eventNum}}</span>
+                        <span class="demonstration">{{'Total events in 7 Days' | T}}</span>
+                        <span class="title-nub" ui-sref="index.monitoring.event.query({timeRange: '7d'})"
+                              style="cursor: pointer;">{{monitorOverview.eventNum}}</span>
                     </div>
                 </div>
             </div>
@@ -66,11 +72,12 @@
     </div>
 </div>
 
-<div class="row" ng-if="monitorOverview.enableMonitor" style="margin-bottom:15px">
+<div class="row" ng-if="monitorOverview.enableMonitor">
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ng-scope">
         <ul class="nav nav-tabs">
-            <li ng-repeat="tab in monitorOverview.tabList" ng-class="{ active: tab.name == monitorOverview.tab }" ng-click="monitorOverview.changeTab(tab.name)">
-                <a>{{ tab.verbose_name | T }}</a>
+            <li ng-repeat="tab in monitorOverview.tabList" ng-class="{ active: tab.name == monitorOverview.tab }"
+                ng-click="monitorOverview.changeTab(tab.name)">
+                <a><span class="tab-header">{{ tab.verbose_name | T }}</span></a>
             </li>
         </ul>
     </div>
@@ -78,36 +85,48 @@
         <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
             <div class="widget">
                 <div class="widget-header">
-                    <i class="fa fa-signal fa-fw" aria-hidden="true"></i>&nbsp;{{'CPU Usage'|T}} <span class="pull-right">{{'Top 5' | T}}</span>
+                    <span class="tab-header-1">
+                    <i class="fa fa-signal fa-fw" aria-hidden="true"></i>&nbsp;{{'CPU Usage' | T}} <span
+                        class="pull-right">{{'Top 5' | T}}</span>
+                        </span>
                 </div>
                 <div class="table-responsive">
                     <table class="table table-striped table-hover">
                         <thead>
-                            <tr>
-                                <th class="num">No.</th>
-                                <th class="name">{{'Device Name' | T}}</th>
-                                <th class="text-right">{{'Usage' | T}}</th>
-                            </tr>
+                        <tr>
+                            <th class="num">No.</th>
+                            <th class="name">{{'Device Name' | T}}</th>
+                            <th class="text-right">{{'Usage' | T}}</th>
+                        </tr>
                         </thead>
                         <tbody>
-                            <tr ng-show="monitorOverview.deviceLoading">
-                                <td colspan="3" class="text-center"><img src="app/images/loading-h2.gif"></td>
-                            </tr>
-                            <tr ng-repeat="item in monitorOverview.deviceLists.cpuUsageList">
-                                <td class="num">{{$index + 1}}</td>
-                                <td style="cursor: pointer;" ui-sref="index.monitoring.resource.device.detail({name: item.name, type: item.type, id: item.id})"><a class="name">{{ item.name }}</a></td>
-                                <td>
-                                    <div class="col-pb">
-                                        <div class="list-0">
-                                            <div class="progress" title="{{item.cpu_usage}}%">
-                                                <div class="progress-bar progress-bar-info" role="progressbar" ng-style="monitorOverview.getPercent(item.cpu_usage)" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
-                                                    <span>{{item.cpu_usage}}%</span>
-                                                </div>
+                        <tr ng-show="monitorOverview.deviceLoading">
+                            <td colspan="3" class="text-center"><img src="app/images/loading-h2.gif"></td>
+                        </tr>
+                        <tr ng-repeat="item in monitorOverview.deviceLists.cpuUsageList">
+                            <td class="num">{{$index + 1}}</td>
+                            <td style="cursor: pointer;"
+                                ui-sref="index.monitoring.resource.device.detail({name: item.name, type: item.type, id: item.id})">
+                                <a class="name">{{ item.name }}</a></td>
+                            <td>
+                                <div class="col-pb">
+                                    <div class="list-0">
+                                        <div class="progress" title="{{item.cpu_usage}}%">
+                                            <div class="progress-bar progress-bar-info" role="progressbar"
+                                                 ng-style="monitorOverview.getPercent(item.cpu_usage)"
+                                                 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
+                                                <span>{{item.cpu_usage}}%</span>
                                             </div>
                                         </div>
                                     </div>
-                                </td>
-                            </tr>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr ng-if="monitorOverview.deviceLists.cpuUsageList.length == 0  && !monitorOverview.deviceLoading">
+                            <td style="height: 48px;" colspan="5" class="text-center">
+                                {{ 'No matching records found.' | T }}
+                            </td>
+                        </tr>
                         </tbody>
                     </table>
                 </div>
@@ -116,37 +135,49 @@
         <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
             <div class="widget">
                 <div class="widget-header">
-                    <i class="fa fa-signal fa-fw" aria-hidden="true"></i>&nbsp;{{'Network Memory Usage'|T}} <span class="pull-right">{{'Top 5' | T}}</span>
+                    <span class="tab-header-1">
+                    <i class="fa fa-signal fa-fw" aria-hidden="true"></i>&nbsp;{{'Network Memory Usage' | T}} <span
+                        class="pull-right">{{'Top 5' | T}}</span>
+                    </span>
                 </div>
                 <div class="">
                     <div class="table-responsive">
                         <table class="table table-striped table-hover">
                             <thead>
-                                <tr>
-                                    <th class="num">No.</th>
-                                    <th class="name">{{'Device Name' | T}}</th>
-                                    <th class="text-right">{{'Usage' | T}}</th>
-                                </tr>
+                            <tr>
+                                <th class="num">No.</th>
+                                <th class="name">{{'Device Name' | T}}</th>
+                                <th class="text-right">{{'Usage' | T}}</th>
+                            </tr>
                             </thead>
                             <tbody>
-                                <tr ng-show="monitorOverview.deviceLoading">
-                                    <td colspan="3" class="text-center"><img src="app/images/loading-h2.gif"></td>
-                                </tr>
-                                <tr ng-repeat="item in monitorOverview.deviceLists.netMemUsageList">
-                                    <td class="num">{{$index + 1}}</td>
-                                    <td style="cursor: pointer;" ui-sref="index.monitoring.resource.device.detail({name: item.name, type: item.type, id: item.id})"><a class="name">{{ item.name}}</a></td>
-                                    <td>
-                                        <div class="col-pb">
-                                            <div class="list-0">
-                                                <div class="progress" title="{{item.net_mem_usage}}%">
-                                                    <div class="progress-bar progress-bar-info" role="progressbar" ng-style="monitorOverview.getPercent(item.net_mem_usage)" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
-                                                        <span>{{item.net_mem_usage}}%</span>
-                                                    </div>
+                            <tr ng-show="monitorOverview.deviceLoading">
+                                <td colspan="3" class="text-center"><img src="app/images/loading-h2.gif"></td>
+                            </tr>
+                            <tr ng-repeat="item in monitorOverview.deviceLists.netMemUsageList">
+                                <td class="num">{{$index + 1}}</td>
+                                <td style="cursor: pointer;"
+                                    ui-sref="index.monitoring.resource.device.detail({name: item.name, type: item.type, id: item.id})">
+                                    <a class="name">{{ item.name}}</a></td>
+                                <td>
+                                    <div class="col-pb">
+                                        <div class="list-0">
+                                            <div class="progress" title="{{item.net_mem_usage}}%">
+                                                <div class="progress-bar progress-bar-info" role="progressbar"
+                                                     ng-style="monitorOverview.getPercent(item.net_mem_usage)"
+                                                     aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
+                                                    <span>{{item.net_mem_usage}}%</span>
                                                 </div>
                                             </div>
                                         </div>
-                                    </td>
-                                </tr>
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr ng-if="monitorOverview.deviceLists.netMemUsageList.length == 0 && !monitorOverview.deviceLoading">
+                                <td style="height: 48px;" colspan="5" class="text-center">
+                                    {{ 'No matching records found.' | T }}
+                                </td>
+                            </tr>
                             </tbody>
                         </table>
                     </div>
@@ -156,29 +187,39 @@
         <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
             <div class="widget">
                 <div class="widget-header">
-                    <i class="fa fa-signal fa-fw"></i>&nbsp;{{'Network Throughput'|T}} <span class="pull-right">{{'Top 5' | T}}</span>
+                    <span class="tab-header-1">
+                    <i class="fa fa-signal fa-fw"></i>&nbsp;{{'Network Throughput' | T}} <span
+                        class="pull-right">{{'Top 5' | T}}</span>
+                    </span>
                 </div>
                 <div class="">
                     <div class="table-responsive">
                         <table class="table table-striped table-hover">
                             <thead>
-                                <tr>
-                                    <th class="num">No.</th>
-                                    <th class="name">{{'Device Name' | T}}</th>
-                                    <th>{{'Sent' | T}}</th>
-                                    <th>{{'Received' | T}}</th>
-                                </tr>
+                            <tr>
+                                <th class="num">No.</th>
+                                <th class="name">{{'Device Name' | T}}</th>
+                                <th>{{'Sent' | T}}</th>
+                                <th>{{'Received' | T}}</th>
+                            </tr>
                             </thead>
                             <tbody>
-                                <tr ng-show="monitorOverview.deviceLoading">
-                                    <td colspan="4" class="text-center"><img src="app/images/loading-h2.gif"></td>
-                                </tr>
-                                <tr ng-repeat="item in monitorOverview.deviceLists.throughputList">
-                                    <td class="num">{{$index + 1}}</td>
-                                    <td style="cursor: pointer;" ui-sref="index.monitoring.resource.device.detail({name: item.name, type: item.type, id: item.id})"><a class="name">{{ item.name}}</a></td>
-                                    <td><span class="label label-default">{{item.sent}}</span></td>
-                                    <td><span class="label label-default">{{item.received}}</span></td>
-                                </tr>
+                            <tr ng-show="monitorOverview.deviceLoading">
+                                <td colspan="4" class="text-center"><img src="app/images/loading-h2.gif"></td>
+                            </tr>
+                            <tr ng-repeat="item in monitorOverview.deviceLists.throughputList">
+                                <td class="num">{{$index + 1}}</td>
+                                <td style="cursor: pointer;"
+                                    ui-sref="index.monitoring.resource.device.detail({name: item.name, type: item.type, id: item.id})">
+                                    <a class="name">{{ item.name}}</a></td>
+                                <td><span class="label label-default">{{item.sent}}</span></td>
+                                <td><span class="label label-default">{{item.received}}</span></td>
+                            </tr>
+                            <tr ng-if="monitorOverview.deviceLists.throughputList.length == 0 && !monitorOverview.deviceLoading">
+                                <td style="height: 48px;" colspan="5" class="text-center">
+                                    {{ 'No matching records found.' | T }}
+                                </td>
+                            </tr>
                             </tbody>
                         </table>
                     </div>
@@ -190,26 +231,36 @@
         <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
             <div class="widget">
                 <div class="widget-header">
-                    <i class="fa fa-signal fa-fw" aria-hidden="true"></i>&nbsp;{{'Hits Number'|T}} <span class="pull-right">{{'Top 5' | T}}</span>
+                    <span class="tab-header-1">
+                    <i class="fa fa-signal fa-fw" aria-hidden="true"></i>&nbsp;{{'Hits Number' | T}} <span
+                        class="pull-right">{{'Top 5' | T}}</span>
+                    </span>
                 </div>
                 <div class="table-responsive">
                     <table class="table table-striped table-hover">
                         <thead>
-                            <tr>
-                                <th class="num">No.</th>
-                                <th class="name">{{'Service Name' | T}}</th>
-                                <th class="text-right">{{'Hits' | T}}</th>
-                            </tr>
+                        <tr>
+                            <th class="num">No.</th>
+                            <th class="name">{{'Service Name' | T}}</th>
+                            <th class="text-right">{{'Hits' | T}}</th>
+                        </tr>
                         </thead>
                         <tbody>
-                            <tr ng-show="monitorOverview.vsLoading">
-                                <td colspan="3" class="text-center"><img src="app/images/loading-h2.gif"></td>
-                            </tr>
-                            <tr ng-repeat="item in monitorOverview.vsLists.hitsList">
-                                <td class="num">{{$index + 1}}</td>
-                                <td style="cursor: pointer;" ui-sref="index.monitoring.resource.slb.virtual_service.detail({name: item.name, device_ip: item.device_ip, origin_type: 'SLB_vs'})"><a class="name">{{ item.name }}</a></td>
-                                <td><span class="label label-default">{{item.hits}}</span></td>
-                            </tr>
+                        <tr ng-show="monitorOverview.vsLoading">
+                            <td colspan="3" class="text-center"><img src="app/images/loading-h2.gif"></td>
+                        </tr>
+                        <tr ng-repeat="item in monitorOverview.vsLists.hitsList">
+                            <td class="num">{{$index + 1}}</td>
+                            <td style="cursor: pointer;"
+                                ui-sref="index.monitoring.resource.slb.virtual_service.detail({name: item.name, device_ip: item.device_ip, origin_type: 'SLB_vs'})">
+                                <a class="name">{{ item.name }}</a></td>
+                            <td><span class="label label-default">{{item.hits}}</span></td>
+                        </tr>
+                        <tr ng-if="monitorOverview.vsLists.hitsList.length == 0 && !monitorOverview.vsLoading">
+                            <td style="height: 48px;" colspan="5" class="text-center">
+                                {{ 'No matching records found.' | T }}
+                            </td>
+                        </tr>
                         </tbody>
                     </table>
                 </div>
@@ -218,26 +269,36 @@
         <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
             <div class="widget">
                 <div class="widget-header">
-                    <i class="fa fa-signal fa-fw" aria-hidden="true"></i>&nbsp;{{'Open Connections'|T}} <span class="pull-right">{{'Top 5' | T}}</span>
+                    <span class="tab-header-1">
+                    <i class="fa fa-signal fa-fw" aria-hidden="true"></i>&nbsp;{{'Open Connections' | T}} <span
+                        class="pull-right">{{'Top 5' | T}}</span>
+                        </span>
                 </div>
                 <div class="table-responsive">
                     <table class="table table-striped table-hover">
                         <thead>
-                            <tr>
-                                <th class="num">No.</th>
-                                <th class="name">{{'Service Name' | T}}</th>
-                                <th class="text-right">{{'Connections' | T}}</th>
-                            </tr>
+                        <tr>
+                            <th class="num">No.</th>
+                            <th class="name">{{'Service Name' | T}}</th>
+                            <th class="text-right">{{'Connections' | T}}</th>
+                        </tr>
                         </thead>
                         <tbody>
-                            <tr ng-show="monitorOverview.vsLoading">
-                                <td colspan="3" class="text-center"><img src="app/images/loading-h2.gif"></td>
-                            </tr>
-                            <tr ng-repeat="item in monitorOverview.vsLists.connectionsList">
-                                <td class="num">{{$index + 1}}</td>
-                                <td style="cursor: pointer;" ui-sref="index.monitoring.resource.slb.virtual_service.detail({name: item.name, device_ip: item.device_ip, origin_type: 'SLB_vs'})"><a class="name">{{ item.name }}</a></td>
-                                <td><span class="label label-default">{{item.connections}}</span></td>
-                            </tr>
+                        <tr ng-show="monitorOverview.vsLoading">
+                            <td colspan="3" class="text-center"><img src="app/images/loading-h2.gif"></td>
+                        </tr>
+                        <tr ng-repeat="item in monitorOverview.vsLists.connectionsList">
+                            <td class="num">{{$index + 1}}</td>
+                            <td style="cursor: pointer;"
+                                ui-sref="index.monitoring.resource.slb.virtual_service.detail({name: item.name, device_ip: item.device_ip, origin_type: 'SLB_vs'})">
+                                <a class="name">{{ item.name }}</a></td>
+                            <td><span class="label label-default">{{item.connections}}</span></td>
+                        </tr>
+                        <tr ng-if="monitorOverview.vsLists.connectionsList.length == 0 && !monitorOverview.vsLoading">
+                            <td style="height: 48px;" colspan="5" class="text-center">
+                                {{ 'No matching records found.' | T }}
+                            </td>
+                        </tr>
                         </tbody>
                     </table>
                 </div>
@@ -246,29 +307,39 @@
         <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
             <div class="widget">
                 <div class="widget-header">
-                    <i class="fa fa-signal fa-fw"></i>&nbsp;{{'Network Throughput'|T}} <span class="pull-right">{{'Top 5' | T}}</span>
+                    <span class="tab-header-1">
+                    <i class="fa fa-signal fa-fw"></i>&nbsp;{{'Network Throughput' | T}} <span
+                        class="pull-right">{{'Top 5' | T}}</span>
+                        </span>
                 </div>
                 <div class="">
                     <div class="table-responsive">
                         <table class="table table-striped table-hover">
                             <thead>
-                                <tr>
-                                    <th class="num">No.</th>
-                                    <th class="name">{{'Service Name' | T}}</th>
-                                    <th>{{'Sent' | T}}</th>
-                                    <th>{{'Received' | T}}</th>
-                                </tr>
+                            <tr>
+                                <th class="num">No.</th>
+                                <th class="name">{{'Service Name' | T}}</th>
+                                <th>{{'Sent' | T}}</th>
+                                <th>{{'Received' | T}}</th>
+                            </tr>
                             </thead>
                             <tbody>
-                                <tr ng-show="monitorOverview.vsLoading">
-                                    <td colspan="4" class="text-center"><img src="app/images/loading-h2.gif"></td>
-                                </tr>
-                                <tr ng-repeat="item in monitorOverview.vsLists.SLBThroughputList">
-                                    <td class="num">{{$index + 1}}</td>
-                                    <td style="cursor: pointer;" ui-sref="index.monitoring.resource.slb.virtual_service.detail({name: item.name, device_ip: item.device_ip, origin_type: 'SLB_vs'})"><a class="name">{{ item.name }}</a></td>
-                                    <td><span class="label label-default">{{item.sent}}</span></td>
-                                    <td><span class="label label-default">{{item.received}}</span></td>
-                                </tr>
+                            <tr ng-show="monitorOverview.vsLoading">
+                                <td colspan="4" class="text-center"><img src="app/images/loading-h2.gif"></td>
+                            </tr>
+                            <tr ng-repeat="item in monitorOverview.vsLists.SLBThroughputList">
+                                <td class="num">{{$index + 1}}</td>
+                                <td style="cursor: pointer;"
+                                    ui-sref="index.monitoring.resource.slb.virtual_service.detail({name: item.name, device_ip: item.device_ip, origin_type: 'SLB_vs'})">
+                                    <a class="name">{{ item.name }}</a></td>
+                                <td><span class="label label-default">{{item.sent}}</span></td>
+                                <td><span class="label label-default">{{item.received}}</span></td>
+                            </tr>
+                            <tr ng-if="monitorOverview.vsLists.SLBThroughputList.length == 0 && !monitorOverview.vsLoading">
+                                <td style="height: 48px;" colspan="5" class="text-center">
+                                    {{ 'No matching records found.' | T }}
+                                </td>
+                            </tr>
                             </tbody>
                         </table>
                     </div>
@@ -280,26 +351,36 @@
         <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
             <div class="widget">
                 <div class="widget-header">
-                    <i class="fa fa-signal fa-fw" aria-hidden="true"></i>&nbsp;{{'Outstanding Requests'|T}} <span class="pull-right">{{'Top 5' | T}}</span>
+                    <span class="tab-header-1">
+                    <i class="fa fa-signal fa-fw" aria-hidden="true"></i>&nbsp;{{'Outstanding Requests' | T}} <span
+                        class="pull-right">{{'Top 5' | T}}</span>
+                        </span>
                 </div>
                 <div class="table-responsive">
                     <table class="table table-striped table-hover">
                         <thead>
-                            <tr>
-                                <th class="num">No.</th>
-                                <th class="name">{{'Service Name' | T}}</th>
-                                <th class="text-right">{{'Requests' | T}}</th>
-                            </tr>
+                        <tr>
+                            <th class="num">No.</th>
+                            <th class="name">{{'Service Name' | T}}</th>
+                            <th class="text-right">{{'Requests' | T}}</th>
+                        </tr>
                         </thead>
                         <tbody>
-                            <tr ng-show="monitorOverview.rsLoading">
-                                <td colspan="3" class="text-center"><img src="app/images/loading-h2.gif"></td>
-                            </tr>
-                            <tr ng-repeat="item in monitorOverview.rsLists.rsCntOfReqList">
-                                <td class="num">{{$index + 1}}</td>
-                                <td style="cursor: pointer;" ui-sref="index.monitoring.resource.slb.real_service.detail({name: item.name, device_ip: item.device_ip, origin_type: 'SLB_rs'})"><a class="name">{{ item.name }}</a></td>
-                                <td><span class="label label-default">{{item.requests}}</span></td>
-                            </tr>
+                        <tr ng-show="monitorOverview.rsLoading">
+                            <td colspan="3" class="text-center"><img src="app/images/loading-h2.gif"></td>
+                        </tr>
+                        <tr ng-repeat="item in monitorOverview.rsLists.rsCntOfReqList">
+                            <td class="num">{{$index + 1}}</td>
+                            <td style="cursor: pointer;"
+                                ui-sref="index.monitoring.resource.slb.real_service.detail({name: item.name, device_ip: item.device_ip, origin_type: 'SLB_rs'})">
+                                <a class="name">{{ item.name }}</a></td>
+                            <td><span class="label label-default">{{item.requests}}</span></td>
+                        </tr>
+                        <tr ng-if="monitorOverview.rsLists.rsCntOfReqList.length == 0 && !monitorOverview.rsLoading">
+                            <td style="height: 48px;" colspan="5" class="text-center">
+                                {{ 'No matching records found.' | T }}
+                            </td>
+                        </tr>
                         </tbody>
                     </table>
                 </div>
@@ -308,26 +389,36 @@
         <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
             <div class="widget">
                 <div class="widget-header">
-                    <i class="fa fa-signal fa-fw" aria-hidden="true"></i>&nbsp;{{'Connections Per Second'|T}} <span class="pull-right">{{'Top 5' | T}}</span>
+                    <span class="tab-header-1">
+                    <i class="fa fa-signal fa-fw" aria-hidden="true"></i>&nbsp;{{'Connections Per Second' | T}} <span
+                        class="pull-right">{{'Top 5' | T}}</span>
+                        </span>
                 </div>
                 <div class="table-responsive">
                     <table class="table table-striped table-hover">
                         <thead>
-                            <tr>
-                                <th class="num">No.</th>
-                                <th class="name">{{'Service Name' | T}}</th>
-                                <th class="text-right">{{'Connections' | T}}</th>
-                            </tr>
+                        <tr>
+                            <th class="num">No.</th>
+                            <th class="name">{{'Service Name' | T}}</th>
+                            <th class="text-right">{{'Connections' | T}}</th>
+                        </tr>
                         </thead>
                         <tbody>
-                            <tr ng-show="monitorOverview.rsLoading">
-                                <td colspan="3" class="text-center"><img src="app/images/loading-h2.gif"></td>
-                            </tr>
-                            <tr ng-repeat="item in monitorOverview.rsLists.rsConnPerSecList">
-                                <td class="num">{{$index + 1}}</td>
-                                <td style="cursor: pointer;" ui-sref="index.monitoring.resource.slb.real_service.detail({name: item.name, device_ip: item.device_ip, origin_type: 'SLB_rs'})"><a class="name">{{ item.name }}</a></td>
-                                <td><span class="label label-default">{{item.connections}}</span></td>
-                            </tr>
+                        <tr ng-show="monitorOverview.rsLoading">
+                            <td colspan="3" class="text-center"><img src="app/images/loading-h2.gif"></td>
+                        </tr>
+                        <tr ng-repeat="item in monitorOverview.rsLists.rsConnPerSecList">
+                            <td class="num">{{$index + 1}}</td>
+                            <td style="cursor: pointer;"
+                                ui-sref="index.monitoring.resource.slb.real_service.detail({name: item.name, device_ip: item.device_ip, origin_type: 'SLB_rs'})">
+                                <a class="name">{{ item.name }}</a></td>
+                            <td><span class="label label-default">{{item.connections}}</span></td>
+                        </tr>
+                        <tr ng-if="monitorOverview.rsLists.rsConnPerSecList.length == 0 && !monitorOverview.rsLoading">
+                            <td style="height: 48px;" colspan="5" class="text-center">
+                                {{ 'No matching records found.' | T }}
+                            </td>
+                        </tr>
                         </tbody>
                     </table>
                 </div>
@@ -336,29 +427,39 @@
         <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
             <div class="widget">
                 <div class="widget-header">
-                    <i class="fa fa-signal fa-fw"></i>&nbsp;{{'Network Throughput'|T}} <span class="pull-right">{{'Top 5' | T}}</span>
+                    <span class="tab-header-1">
+                    <i class="fa fa-signal fa-fw"></i>&nbsp;{{'Network Throughput' | T}} <span
+                        class="pull-right">{{'Top 5' | T}}</span>
+                    </span>
                 </div>
                 <div class="">
                     <div class="table-responsive">
                         <table class="table table-striped table-hover">
                             <thead>
-                                <tr>
-                                    <th class="num">No.</th>
-                                    <th class="name">{{'Service Name' | T}}</th>
-                                    <th>{{'Sent' | T}}</th>
-                                    <th>{{'Received' | T}}</th>
-                                </tr>
+                            <tr>
+                                <th class="num">No.</th>
+                                <th class="name">{{'Service Name' | T}}</th>
+                                <th>{{'Sent' | T}}</th>
+                                <th>{{'Received' | T}}</th>
+                            </tr>
                             </thead>
                             <tbody>
-                                <tr ng-show="monitorOverview.rsLoading">
-                                    <td colspan="4" class="text-center"><img src="app/images/loading-h2.gif"></td>
-                                </tr>
-                                <tr ng-repeat="item in monitorOverview.rsLists.throughputList">
-                                    <td class="num">{{$index + 1}}</td>
-                                    <td style="cursor: pointer;" ui-sref="index.monitoring.resource.slb.real_service.detail({name: item.name, device_ip: item.device_ip, origin_type: 'SLB_rs'})"><a class="name">{{ item.name }}</a></td>
-                                    <td><span class="label label-default">{{item.sent}}</span></td>
-                                    <td><span class="label label-default">{{item.received}}</span></td>
-                                </tr>
+                            <tr ng-show="monitorOverview.rsLoading">
+                                <td colspan="4" class="text-center"><img src="app/images/loading-h2.gif"></td>
+                            </tr>
+                            <tr ng-repeat="item in monitorOverview.rsLists.throughputList">
+                                <td class="num">{{$index + 1}}</td>
+                                <td style="cursor: pointer;"
+                                    ui-sref="index.monitoring.resource.slb.real_service.detail({name: item.name, device_ip: item.device_ip, origin_type: 'SLB_rs'})">
+                                    <a class="name">{{ item.name }}</a></td>
+                                <td><span class="label label-default">{{item.sent}}</span></td>
+                                <td><span class="label label-default">{{item.received}}</span></td>
+                            </tr>
+                            <tr ng-if="monitorOverview.rsLists.throughputList.length == 0 && !monitorOverview.rsLoading">
+                                <td style="height: 48px;" colspan="5" class="text-center">
+                                    {{ 'No matching records found.' | T }}
+                                </td>
+                            </tr>
                             </tbody>
                         </table>
                     </div>
@@ -370,26 +471,36 @@
         <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
             <div class="widget">
                 <div class="widget-header">
-                    <i class="fa fa-signal fa-fw" aria-hidden="true"></i>&nbsp;{{'Sessions Number'|T}} <span class="pull-right">{{'Top 5' | T}}</span>
+                    <span class="tab-header-1">
+                    <i class="fa fa-signal fa-fw" aria-hidden="true"></i>&nbsp;{{'Sessions Number' | T}} <span
+                        class="pull-right">{{'Top 5' | T}}</span>
+                        </span>
                 </div>
                 <div class="table-responsive">
                     <table class="table table-striped table-hover">
                         <thead>
-                            <tr>
-                                <th class="num">No.</th>
-                                <th class="name">{{'Service Name' | T}}</th>
-                                <th class="text-right">{{'Sessions' | T}}</th>
-                            </tr>
+                        <tr>
+                            <th class="num">No.</th>
+                            <th class="name">{{'Service Name' | T}}</th>
+                            <th class="text-right">{{'Sessions' | T}}</th>
+                        </tr>
                         </thead>
                         <tbody>
-                            <tr ng-show="monitorOverview.sslvpnLoading">
-                                <td colspan="3" class="text-center"><img src="app/images/loading-h2.gif"></td>
-                            </tr>
-                            <tr ng-repeat="item in monitorOverview.sslvpnLists.sessionList">
-                                <td class="num">{{$index + 1}}</td>
-                                <td style="cursor: pointer;" ui-sref="index.monitoring.resource.sslvpn.detail({name: item.name, device_ip: item.device_ip})"><a class="name">{{ item.name }}</a></td>
-                                <td><span class="label label-default">{{item.active_sessions}}</span></td>
-                            </tr>
+                        <tr ng-show="monitorOverview.sslvpnLoading">
+                            <td colspan="3" class="text-center"><img src="app/images/loading-h2.gif"></td>
+                        </tr>
+                        <tr ng-repeat="item in monitorOverview.sslvpnLists.sessionList">
+                            <td class="num">{{$index + 1}}</td>
+                            <td style="cursor: pointer;"
+                                ui-sref="index.monitoring.resource.sslvpn.detail({name: item.name, device_ip: item.device_ip})">
+                                <a class="name">{{ item.name }}</a></td>
+                            <td><span class="label label-default">{{item.active_sessions}}</span></td>
+                        </tr>
+                        <tr ng-if="monitorOverview.sslvpnLists.sessionList.length == 0 && !monitorOverview.sslvpnLoading">
+                            <td style="height: 48px;" colspan="5" class="text-center">
+                                {{ 'No matching records found.' | T }}
+                            </td>
+                        </tr>
                         </tbody>
                     </table>
                 </div>
@@ -398,28 +509,38 @@
         <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
             <div class="widget">
                 <div class="widget-header">
-                    <i class="fa fa-signal fa-fw" aria-hidden="true"></i>&nbsp;{{'Client Throughput'|T}} <span class="pull-right">{{'Top 5' | T}}</span>
+                    <span class="tab-header-1">
+                    <i class="fa fa-signal fa-fw" aria-hidden="true"></i>&nbsp;{{'Client Throughput' | T}} <span
+                        class="pull-right">{{'Top 5' | T}}</span>
+                        </span>
                 </div>
                 <div class="table-responsive">
                     <table class="table table-striped table-hover">
                         <thead>
-                            <tr>
-                                <th class="num">No.</th>
-                                <th class="name">{{'Service Name' | T}}</th>
-                                <th>{{'Sent' | T}}</th>
-                                <th>{{'Received' | T}}</th>
-                            </tr>
+                        <tr>
+                            <th class="num">No.</th>
+                            <th class="name">{{'Service Name' | T}}</th>
+                            <th>{{'Sent' | T}}</th>
+                            <th>{{'Received' | T}}</th>
+                        </tr>
                         </thead>
                         <tbody>
-                            <tr ng-show="monitorOverview.sslvpnLoading">
-                                <td colspan="4" class="text-center"><img src="app/images/loading-h2.gif"></td>
-                            </tr>
-                            <tr ng-repeat="item in monitorOverview.sslvpnLists.clientThroughputList">
-                                <td class="num">{{$index + 1}}</td>
-                                <td style="cursor: pointer;" ui-sref="index.monitoring.resource.sslvpn.detail({name: item.name, device_ip: item.device_ip})"><a class="name">{{ item.name }}</a></td>
-                                <td><span class="label label-default">{{item.sent}}</span></td>
-                                <td><span class="label label-default">{{item.received}}</span></td>
-                            </tr>
+                        <tr ng-show="monitorOverview.sslvpnLoading">
+                            <td colspan="4" class="text-center"><img src="app/images/loading-h2.gif"></td>
+                        </tr>
+                        <tr ng-repeat="item in monitorOverview.sslvpnLists.clientThroughputList">
+                            <td class="num">{{$index + 1}}</td>
+                            <td style="cursor: pointer;"
+                                ui-sref="index.monitoring.resource.sslvpn.detail({name: item.name, device_ip: item.device_ip})">
+                                <a class="name">{{ item.name }}</a></td>
+                            <td><span class="label label-default">{{item.sent}}</span></td>
+                            <td><span class="label label-default">{{item.received}}</span></td>
+                        </tr>
+                        <tr ng-if="monitorOverview.sslvpnLists.clientThroughputList.length == 0 && !monitorOverview.sslvpnLoading">
+                            <td style="height: 48px;" colspan="5" class="text-center">
+                                {{ 'No matching records found.' | T }}
+                            </td>
+                        </tr>
                         </tbody>
                     </table>
                 </div>
@@ -428,28 +549,38 @@
         <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
             <div class="widget">
                 <div class="widget-header">
-                    <i class="fa fa-signal fa-fw"></i>&nbsp;{{'Server Throughput'|T}} <span class="pull-right">{{'Top 5' | T}}</span>
+                    <span class="tab-header-1">
+                    <i class="fa fa-signal fa-fw"></i>&nbsp;{{'Server Throughput' | T}} <span
+                        class="pull-right">{{'Top 5' | T}}</span>
+                    </span>
                 </div>
                 <div class="table-responsive">
                     <table class="table table-striped table-hover">
                         <thead>
-                            <tr>
-                                <th class="num">No.</th>
-                                <th class="name">{{'Service Name' | T}}</th>
-                                <th>{{'Sent' | T}}</th>
-                                <th>{{'Received' | T}}</th>
-                            </tr>
+                        <tr>
+                            <th class="num">No.</th>
+                            <th class="name">{{'Service Name' | T}}</th>
+                            <th>{{'Sent' | T}}</th>
+                            <th>{{'Received' | T}}</th>
+                        </tr>
                         </thead>
                         <tbody>
-                            <tr ng-show="monitorOverview.sslvpnLoading">
-                                <td colspan="4" class="text-center"><img src="app/images/loading-h2.gif"></td>
-                            </tr>
-                            <tr ng-repeat="item in monitorOverview.sslvpnLists.ServerThroughputList">
-                                <td class="num">{{$index + 1}}</td>
-                                <td style="cursor: pointer;" ui-sref="index.monitoring.resource.sslvpn.detail({name: item.name, device_ip: item.device_ip})"><a class="name">{{ item.name }}</a></td>
-                                <td><span class="label label-default">{{item.sent}}</span></td>
-                                <td><span class="label label-default">{{item.received}}</span></td>
-                            </tr>
+                        <tr ng-show="monitorOverview.sslvpnLoading">
+                            <td colspan="4" class="text-center"><img src="app/images/loading-h2.gif"></td>
+                        </tr>
+                        <tr ng-repeat="item in monitorOverview.sslvpnLists.ServerThroughputList">
+                            <td class="num">{{$index + 1}}</td>
+                            <td style="cursor: pointer;"
+                                ui-sref="index.monitoring.resource.sslvpn.detail({name: item.name, device_ip: item.device_ip})">
+                                <a class="name">{{ item.name }}</a></td>
+                            <td><span class="label label-default">{{item.sent}}</span></td>
+                            <td><span class="label label-default">{{item.received}}</span></td>
+                        </tr>
+                        <tr ng-if="monitorOverview.sslvpnLists.ServerThroughputList.length == 0 && !monitorOverview.sslvpnLoading">
+                            <td style="height: 48px;" colspan="5" class="text-center">
+                                {{ 'No matching records found.' | T }}
+                            </td>
+                        </tr>
                         </tbody>
                     </table>
                 </div>
@@ -460,26 +591,35 @@
         <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
             <div class="widget">
                 <div class="widget-header">
-                    <i class="fa fa-signal fa-fw" aria-hidden="true"></i>&nbsp;{{'Hits Number'|T}} <span class="pull-right">{{'Top 5' | T}}</span>
+                    <span class="tab-header-1">
+                    <i class="fa fa-signal fa-fw" aria-hidden="true"></i>&nbsp;{{'Hits Number' | T}} <span
+                        class="pull-right">{{'Top 5' | T}}</span>
+                        </span>
                 </div>
                 <div class="table-responsive">
                     <table class="table table-striped table-hover">
                         <thead>
-                            <tr>
-                                <th class="num">No.</th>
-                                <th class="name">{{'Link Name' | T}}</th>
-                                <th class="text-right">{{'Hits' | T}}</th>
-                            </tr>
+                        <tr>
+                            <th class="num">No.</th>
+                            <th class="name">{{'Link Name' | T}}</th>
+                            <th class="text-right">{{'Hits' | T}}</th>
+                        </tr>
                         </thead>
                         <tbody>
-                            <tr ng-show="monitorOverview.llbLoading">
-                                <td colspan="3" class="text-center"><img src="app/images/loading-h2.gif"></td>
-                            </tr>
-                            <tr ng-repeat="item in monitorOverview.llbLists.hitsList">
-                                <td class="num">{{$index + 1}}</td>
-                                <td style="cursor: pointer;" ui-sref="index.monitoring.resource.llb"><a class="name">{{ item[2] }}</a></td>
-                                <td><span class="label label-default">{{item[1]}}</span></td>
-                            </tr>
+                        <tr ng-show="monitorOverview.llbLoading">
+                            <td colspan="3" class="text-center"><img src="app/images/loading-h2.gif"></td>
+                        </tr>
+                        <tr ng-repeat="item in monitorOverview.llbLists.hitsList">
+                            <td class="num">{{$index + 1}}</td>
+                            <td style="cursor: pointer;" ui-sref="index.monitoring.resource.llb"><a
+                                class="name">{{ item[2] }}</a></td>
+                            <td><span class="label label-default">{{item[1]}}</span></td>
+                        </tr>
+                        <tr ng-if="monitorOverview.llbLists.hitsList.length == 0 && !monitorOverview.llbLoading">
+                            <td style="height: 48px;" colspan="5" class="text-center">
+                                {{ 'No matching records found.' | T }}
+                            </td>
+                        </tr>
                         </tbody>
                     </table>
                 </div>
@@ -488,26 +628,35 @@
         <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
             <div class="widget">
                 <div class="widget-header">
-                    <i class="fa fa-signal fa-fw" aria-hidden="true"></i>&nbsp;{{'Open Connections'|T}} <span class="pull-right">{{'Top 5' | T}}</span>
+                    <span class="tab-header-1">
+                    <i class="fa fa-signal fa-fw" aria-hidden="true"></i>&nbsp;{{'Open Connections' | T}} <span
+                        class="pull-right">{{'Top 5' | T}}</span>
+                        </span>
                 </div>
                 <div class="table-responsive">
                     <table class="table table-striped table-hover">
                         <thead>
-                            <tr>
-                                <th class="num">No.</th>
-                                <th class="name">{{'Link Name' | T}}</th>
-                                <th class="text-right">{{'Connections' | T}}</th>
-                            </tr>
+                        <tr>
+                            <th class="num">No.</th>
+                            <th class="name">{{'Link Name' | T}}</th>
+                            <th class="text-right">{{'Connections' | T}}</th>
+                        </tr>
                         </thead>
                         <tbody>
-                            <tr ng-show="monitorOverview.llbLoading">
-                                <td colspan="3" class="text-center"><img src="app/images/loading-h2.gif"></td>
-                            </tr>
-                            <tr ng-repeat="item in monitorOverview.llbLists.connectionsList">
-                                <td class="num">{{$index + 1}}</td>
-                                <td style="cursor: pointer;" ui-sref="index.monitoring.resource.llb"><a class="name">{{ item[2] }}</a></td>
-                                <td><span class="label label-default">{{item[1]}}</span></td>
-                            </tr>
+                        <tr ng-show="monitorOverview.llbLoading">
+                            <td colspan="3" class="text-center"><img src="app/images/loading-h2.gif"></td>
+                        </tr>
+                        <tr ng-repeat="item in monitorOverview.llbLists.connectionsList">
+                            <td class="num">{{$index + 1}}</td>
+                            <td style="cursor: pointer;" ui-sref="index.monitoring.resource.llb"><a
+                                class="name">{{ item[2] }}</a></td>
+                            <td><span class="label label-default">{{item[1]}}</span></td>
+                        </tr>
+                        <tr ng-if="monitorOverview.llbLists.connectionsList.length == 0 && !monitorOverview.llbLoading">
+                            <td style="height: 48px;" colspan="5" class="text-center">
+                                {{ 'No matching records found.' | T }}
+                            </td>
+                        </tr>
                         </tbody>
                     </table>
                 </div>
@@ -516,7 +665,10 @@
         <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
             <div class="widget">
                 <div class="widget-header">
-                    <i class="fa fa-signal fa-fw" aria-hidden="true"></i>&nbsp;{{'Network Throughput'|T}} <span class="pull-right">{{'Top 5' | T}}</span>
+                    <span class="tab-header-1">
+                    <i class="fa fa-signal fa-fw" aria-hidden="true"></i>&nbsp;{{'Network Throughput' | T}} <span
+                        class="pull-right">{{'Top 5' | T}}</span>
+                        </span>
                 </div>
                 <div class="table-responsive">
                     <table class="table table-striped table-hover">
@@ -534,10 +686,16 @@
                         </tr>
                         <tr ng-repeat="item in monitorOverview.llbLists.throughputList">
                             <td class="num">{{$index + 1}}</td>
-                            <td style="cursor: pointer;" ui-sref="index.monitoring.resource.llb"><a class="name">{{ item[4] }}</a></td>
+                            <td style="cursor: pointer;" ui-sref="index.monitoring.resource.llb"><a
+                                class="name">{{ item[4] }}</a></td>
                             <td><span class="label label-default">{{item[3]}}</span></td>
                             <td><span class="label label-default">{{item[2]}}</span></td>
                         </tr>
+                        <tr ng-if="monitorOverview.llbLists.throughputList.length == 0 && !monitorOverview.llbLoading">
+                            <td style="height: 48px;" colspan="5" class="text-center">
+                                {{ 'No matching records found.' | T }}
+                            </td>
+                        </tr>
                         </tbody>
                     </table>
                 </div>
@@ -547,16 +705,19 @@
 </div>
 
 <div class="row" ng-if="monitorOverview.enableAudit">
-    <div class="col-md-12 widget">
-        <div class="widget-header">
-            <span>{{'Auditing Log Data'|T}}</span>
-            <select class="pull-right" ng-model="monitorOverview.auditRange" ng-change="monitorOverview.getAuditingData()">
-                <option value="15m">{{ 'Last 15 minutes' |T}}</option>
-                <option value="1h">{{'Last 1 hour'|T}}</option>
-                <option value='24h'>{{'Last 24 hours'|T}}</option>
-                <option value='7d'>{{'Last 7 days'|T}}</option>
-                <option value='30d'>{{'Last 30 days'|T}}</option>
-            </select>
+    <div class="col-md-12">
+        <div class="widget">
+            <div class="widget-header">
+                <span class="tab-header-1">{{'Auditing Log Data' | T}}</span>
+                <select class="pull-right audit-log-drop-down" ng-model="monitorOverview.auditRange"
+                        ng-change="monitorOverview.getAuditingData()">
+                    <option value="15m">{{ 'Last 15 minutes' | T}}</option>
+                    <option value="1h">{{'Last 1 hour' | T}}</option>
+                    <option value='24h'>{{'Last 24 hours' | T}}</option>
+                    <option value='7d'>{{'Last 7 days' | T}}</option>
+                    <option value='30d'>{{'Last 30 days' | T}}</option>
+                </select>
+            </div>
         </div>
         <div class="col-md-8">
             <div class="graph-container">
@@ -568,30 +729,32 @@
                 <div class="table-responsive table-content" style="height:260px">
                     <table class="table table-striped table-hover">
                         <thead>
-                            <tr>
-                                <th>{{ 'Time' | T }}</th>
-                                <th>{{ 'Device IP' | T }}</th>
-                                <th>{{ 'LogID' | T }}</th>
-                                <th>{{ 'Severity' | T }}</th>
-                                <th></th>
-                            </tr>
+                        <tr>
+                            <th>{{ 'Time' | T }}</th>
+                            <th>{{ 'Device IP' | T }}</th>
+                            <th>{{ 'LogID' | T }}</th>
+                            <th>{{ 'Severity' | T }}</th>
+                            <th></th>
+                        </tr>
                         </thead>
                         <tbody>
-                            <tr ng-show="monitorOverview.auditLoading">
-                                <td colspan="5" class="text-center"><img src="app/images/loading-h2.gif"></td>
-                            </tr>
-                            <tr ng-repeat="item in displayedCollection">
-                                <td>{{ item.time }}</td>
-                                <td>{{ item.tag.remote_ip }}</td>
-                                <td>{{ item.tag.logid }}</td>
-                                <td>{{ item.tag.severity }}</td>
-                                <td>
-                                    <i class="fa fa-info-circle" title="{{item.source}}"></i>
-                                </td>
-                            </tr>
-                            <tr ng-if="displayedCollection.length == 0">
-                                <td style="height: 48px;" colspan="5" class="text-center">{{ 'No related auditing log' | T }}</td>
-                            </tr>
+                        <tr ng-show="monitorOverview.auditLoading">
+                            <td colspan="5" class="text-center"><img src="app/images/loading-h2.gif"></td>
+                        </tr>
+                        <tr ng-repeat="item in displayedCollection">
+                            <td>{{ item.time }}</td>
+                            <td>{{ item.tag.remote_ip }}</td>
+                            <td>{{ item.tag.logid }}</td>
+                            <td>{{ item.tag.severity }}</td>
+                            <td>
+                                <i class="fa fa-info-circle" title="{{item.source}}"></i>
+                            </td>
+                        </tr>
+                        <tr ng-if="displayedCollection.length == 0 && !monitorOverview.auditLoading">
+                            <td style="height: 48px;" colspan="5" class="text-center">
+                                {{ 'No matching records found.' | T }}
+                            </td>
+                        </tr>
                         </tbody>
                     </table>
                 </div>
@@ -604,8 +767,8 @@
 <style>
     .demonstration {
         display: block;
-        color: #56a0ca;
-        font-size: 13px;
+        color: #357;
+        font-size: 14px;
         line-height: 25px;
     }
 
@@ -628,7 +791,8 @@
         line-height: 60px;
         font-size: 26px;
     }
-</style>
-
-
 
+    .audit-log-drop-down {
+        margin-top: 8px;
+    }
+</style>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/dashboard/system_statistics/system_statistics.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/dashboard/system_statistics/system_statistics.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/dashboard/system_statistics/system_statistics.html	(working copy)
@@ -10,8 +10,9 @@
                     </div>
                     <div class="col-md-6">
                         <div style="float: left;">
-                            <span class="demonstration">{{'Devices'|T}}</span>
-                            <span class="title-nub" ng-click="systemStatistics.go('index.device')" style="cursor: pointer;">{{systemStatistics.deviceNum}}</span>
+                            <span class="demonstration">{{'Devices' | T}}</span>
+                            <span class="title-nub" ng-click="systemStatistics.go('index.device')"
+                                  style="cursor: pointer;">{{systemStatistics.deviceNum}}</span>
                         </div>
                     </div>
                 </div>
@@ -23,8 +24,9 @@
                     </div>
                     <div class="col-md-6">
                         <div>
-                            <span class="demonstration">{{'Services'|T}}</span>
-                            <span class="title-nub" ng-click="systemStatistics.go('index.slb_topology')" style="cursor: pointer;">{{systemStatistics.serviceNum}}</span>
+                            <span class="demonstration">{{'Services' | T}}</span>
+                            <span class="title-nub" ng-click="systemStatistics.go('index.slb_topology')"
+                                  style="cursor: pointer;">{{systemStatistics.serviceNum}}</span>
                         </div>
                     </div>
                 </div>
@@ -36,26 +38,12 @@
                     </div>
                     <div class="col-md-6">
                         <div>
-                            <span class="demonstration">{{'Tasks'|T}}</span>
-                            <span class="title-nub" ng-click="systemStatistics.go('index.task')" style="cursor: pointer;">{{systemStatistics.taskNum}}</span>
+                            <span class="demonstration">{{'Tasks' | T}}</span>
+                            <span class="title-nub" ng-click="systemStatistics.go('index.task')"
+                                  style="cursor: pointer;">{{systemStatistics.taskNum}}</span>
                         </div>
                     </div>
                 </div>
-                <!-- <div class="col-md-3" ng-if="systemStatistics.alertStatus">
-                    <div class="col-md-6">
-                        <div class="info-icon">
-                            <i class="fa fa-arraybell"></i>
-                        </div>
-                    </div>
-                    <div>
-                        <div class="col-md-6">
-                            <div>
-                                <span class="demonstration" ng-click="systemStatistics.go('index.monitoring.alerting')" style="cursor: pointer;">{{'Alerts'|T}}</span>
-                                <span class="title-nub">{{systemStatistics.alertNum}}</span>
-                            </div>
-                        </div>
-                    </div>
-                </div> -->
             </div>
         </div>
     </div>
@@ -65,9 +53,10 @@
     <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 ng-scope">
         <div class="graph box-shadow">
             <div class="graph-title">
-                <span>{{systemStatistics.LoadWidget.verbose_name}}</span>
+                <span class="tab-header-1">{{systemStatistics.LoadWidget.verbose_name}}</span>
             </div>
-            <div class="graph-container" composer-widget widget="systemStatistics.LoadWidget" style="height: 200px"></div>
+            <div class="graph-container" composer-widget widget="systemStatistics.LoadWidget"
+                 style="height: 200px"></div>
             <div class="graph-container">
                 <div class="col-md-6 graph ng-scope">
                     <div class="graph-container" liquid-graph="systemStatistics.CpuUsageWidget"></div>
@@ -81,22 +70,23 @@
     <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 ng-scope">
         <div class="graph box-shadow">
             <div class="graph-title">
-                <span>{{systemStatistics.TrafficWidget.verbose_name}}</span>
+                <span class="tab-header-1">{{systemStatistics.TrafficWidget.verbose_name}}</span>
             </div>
-            <div class="graph-container" composer-widget widget="systemStatistics.TrafficWidget" style="height: 200px"></div>
+            <div class="graph-container" composer-widget widget="systemStatistics.TrafficWidget"
+                 style="height: 200px"></div>
             <div class="graph-container" style="padding-top: 35px;">
                 <div class="col-md-6" style="padding-left: 25px;">
                     <div>
                         <span class="title-nub">{{systemStatistics.Outbound.value}}</span>
                         <span class="demonstration2">{{systemStatistics.Outbound.unit}}bps</span>
-                        <span class="demonstration">{{'Outbound'|T}}</span>
+                        <span class="demonstration">{{'Outbound' | T}}</span>
                     </div>
                 </div>
                 <div class="col-md-6" style="padding-left: 25px;">
                     <div>
                         <span class="title-nub">{{systemStatistics.Inbound.value}}</span>
                         <span class="demonstration2">{{systemStatistics.Outbound.unit}}bps</span>
-                        <span class="demonstration">{{'Inbound'|T}}</span>
+                        <span class="demonstration">{{'Inbound' | T}}</span>
                     </div>
                 </div>
             </div>
@@ -105,7 +95,7 @@
     <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 ng-scope">
         <div class="graph box-shadow">
             <div class="graph-title">
-                <span>{{systemStatistics.TaskWidget.title}}</span>
+                <span class="tab-header-1">{{systemStatistics.TaskWidget.title}}</span>
             </div>
             <div class="graph-container" statistic-simple-pie="systemStatistics.TaskWidget" style="height: 360px"></div>
         </div>
@@ -116,27 +106,27 @@
     <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 ng-scope">
         <div class="graph box-shadow">
             <div class="graph-title">
-                <span>{{systemStatistics.diskStatusWidget.title}}</span>
+                <span class="tab-header-1">{{systemStatistics.diskStatusWidget.title}}</span>
             </div>
             <div class="graph-container" disk-usage="systemStatistics.diskStatusWidget" style="height: 200px"></div>
             <div class="graph-container" style="padding-bottom: 15px;">
-                <div class="col-md-6 graph ng-scope">
+                <div class="col-md-6 graph ng-scope" style="margin-left: 6px;">
                     <div class="col-md-12">
                         <div>
                             <span class="title-nub">{{systemStatistics.readRate.value}}</span>
                             <span class="demonstration2">{{systemStatistics.readRate.unit}}B/s</span>
-                            <span class="demonstration">{{'Read Rate'|T}}</span>
+                            <span class="demonstration">{{'Read Rate' | T}}</span>
                         </div>
                     </div>
                     <div class="col-md-12">
                         <div>
                             <span class="title-nub">{{systemStatistics.writeRate.value}}</span>
                             <span class="demonstration2">{{systemStatistics.writeRate.unit}}B/s</span>
-                            <span class="demonstration">{{'Write Rate'|T}}</span>
+                            <span class="demonstration">{{'Write Rate' | T}}</span>
                         </div>
                     </div>
                 </div>
-                <div class="col-md-6 graph ng-scope">
+                <div class="col-md-6 graph ng-scope" style="margin-left: -6px;">
                     <div class="graph-container" liquid-graph="systemStatistics.DiskActivityWidget"></div>
                 </div>
             </div>
@@ -145,25 +135,20 @@
     <div class="col-lg-8 col-md-8 col-sm-6 col-xs-12">
         <div class="graph box-shadow">
             <div class="graph-title">
-                <span>{{ 'Devices' | T}}</span>
+                <span class="tab-header-1">{{ 'Devices' | T}}</span>
             </div>
-            <div class="graph-container" device-monitoring="systemStatistics.DeviceWidget" style="height: 360px; padding-bottom: 15px;"> </div>
+            <div class="graph-container" device-monitoring="systemStatistics.DeviceWidget"
+                 style="height: 360px; padding-bottom: 15px;"></div>
         </div>
     </div>
-    <!-- <div class="col-lg-8 col-md-8 col-sm-6 col-xs-12 graph" ng-repeat="widget in systemStatistics.diskUsageWidget">
-        <div class="graph-title">
-            <span>{{ widget.title | T}}</span>
-        </div>
-        <div class="graph-container" monitoring-usage="widget" style="height: 360px"></div>
-    </div> -->
 </div>
 
 
 <style>
     .demonstration {
         display: block;
-        color: #56a0ca;
-        font-size: 13px;
+        color: #357;
+        font-size: 14px;
         line-height: 25px;
     }
 
@@ -193,4 +178,4 @@
         width: 66px;
         font-size: 26px;
     }
-</style>
\ No newline at end of file
+</style>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/device/detail/config.controller.js
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/device/detail/config.controller.js	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/device/detail/config.controller.js	(working copy)
@@ -17,6 +17,8 @@
                 getInfo();
             }
 
+            configViewModal.configurationDetail = null;
+
             function getInfo() {
                 var deviceKey = window.localStorage.__deviceKey__;
                 deviceKey = JSON.parse(deviceKey);
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/device/detail/config.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/device/detail/config.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/device/detail/config.html	(working copy)
@@ -1,4 +1,4 @@
-<div class="row">
+<div class="row" ng-if="config.configurationDetail !== null">
     <div class="btn-group" style="margin-left: 15px;">
         <button class="btn btn-link" title="{{ 'Download configurations' | T }}"
                 ng-click="config.downloadDeviceConfig()"><i class="fa fa-download"></i></button>
@@ -9,4 +9,3 @@
         <pre>{{config.configurationDetail}}</pre>
     </div>
 </div>
-
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/device/detail/device-detail.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/device/detail/device-detail.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/device/detail/device-detail.html	(working copy)
@@ -1,24 +1,24 @@
-<div>
-    <div class="row">
-        <div class="col-md-12">
-            <div ncy-breadcrumb></div>
-        </div>
+<div class="row">
+    <div class="col-md-12">
+        <div ncy-breadcrumb></div>
     </div>
-    <div class="row">
-        <div class="col-md-12">
-            <div class="tab-wrapper">
-                <ul class="nav nav-tabs">
-                    <li role="presentation" ng-class="{ active: url_contain('/device/detail/{{ current_name }}/overview') }">
-                        <a ui-sref="index.device.detail.overview">{{ 'Basic Information' | T }}</a>
-                    </li>
-                    <li role="presentation" ng-class="{ active: url_contain('/device/detail/{{ current_name }}/config') }">
-                        <a ui-sref="index.device.detail.config">{{ 'Configuration' | T }}</a>
-                    </li>
-                    <li role="presentation" ng-class="{ active: url_contain('/device/detail/{{ current_name }}/setting') }">
-                        <a ui-sref="index.device.detail.setting">{{ 'Advanced Settings' | T}}</a>
-                    </li>
-                </ul>
-            </div>
+    <div class="col-md-12">
+        <div class="tab-wrapper">
+            <ul class="nav nav-tabs">
+                <li role="presentation"
+                    ng-class="{ active: url_contain('/device/detail/{{ current_name }}/overview') }">
+                    <a ui-sref="index.device.detail.overview"><span class="tab-header">{{ 'Basic Information' | T
+                        }}</span></a>
+                </li>
+                <li role="presentation" ng-class="{ active: url_contain('/device/detail/{{ current_name }}/config') }">
+                    <a ui-sref="index.device.detail.config"><span class="tab-header">{{ 'Configuration' | T
+                        }}</span></a>
+                </li>
+                <li role="presentation" ng-class="{ active: url_contain('/device/detail/{{ current_name }}/setting') }">
+                    <a ui-sref="index.device.detail.setting"><span
+                        class="tab-header">{{ 'Advanced Settings' | T}}</span></a>
+                </li>
+            </ul>
         </div>
     </div>
     <div class="content-wrapper">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/device/detail/overview.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/device/detail/overview.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/device/detail/overview.html	(working copy)
@@ -1,122 +1,107 @@
-<!-- <div class="row">
-    <div class="col-md-12">
-        <composer-timeselector widgets="widgets"></composer-timeselector>
-    </div>
-</div>
-<div class="row">
-    <div class="col-lg-6 col-md-6 col-xs-12 graph" ng-repeat="widget in widgets">
-        <div class="graph-title">
-            <i class="fa fa-{{ widget.icon }}"></i>
-            <span>{{widget.verbose_name|T}}</span>
-        </div>
-        <div class="graph-container device-overview" composer-widget widget="widget"></div>
-    </div>
-</div> -->
-<div ng-if="!overview.detail" style="margin-bottom: 5px;margin-top:5px;text-align: center"><img src="app/images/loading.gif"></div>
+<div ng-if="!overview.detail" style="margin-bottom: 5px;margin-top:5px;text-align: center"><img
+    src="app/images/loading.gif"></div>
 <div class="row" ng-if="overview.detail">
     <div class="btn-group" style="margin-left: 15px;">
-        <button class="btn btn-link" title="{{'Refresh from deivce'|T}}" ng-click="overview.refresh()"><i class="fa fa-refresh"></i></button>
-        <button class="btn btn-link" title="{{ 'Web UI' | T }}" ng-click="overview.webui(deviceItem)"><i class="array-webui"></i></button>
-        <button class="btn btn-link" title="{{ 'Web console' | T }}" ng-click="overview.terminal(deviceItem)"><i class="array-terminal"></i></button>
+        <button class="btn btn-link" title="{{'Refresh from deivce'|T}}" ng-click="overview.refresh()"><i
+            class="fa fa-refresh"></i></button>
+        <button class="btn btn-link" title="{{ 'Web UI' | T }}" ng-click="overview.webui(deviceItem)"><i
+            class="array-webui"></i></button>
+        <button class="btn btn-link" title="{{ 'Web console' | T }}" ng-click="overview.terminal(deviceItem)"><i
+            class="array-terminal"></i></button>
     </div>
 </div>
-<div class="row" ng-if="overview.detail && overview.detail.connection">
-    <div class="col-md-12">
-        <div class="widget">
-            <div class="widget-header">{{ 'Device Switch' | T}}</div>
-            <form class="form-horizontal">
-                <div class="form-group">
-                    <label class="col-md-3 control-label">{{'Enable Monitor'|T}}</label>
-                    <div class="col-md-9">
-                        <div class="switch">
-                            <input type="checkbox" bs-switch class="switch" ng-model="overview.snmp_enable" switch-active="true" ng-change="overview.enableSNMP()" resettable>
-                        </div>
+<div class="col-md-12" ng-if="overview.detail && overview.detail.connection">
+    <div class="widget">
+        <div class="widget-header tab-header-1">{{ 'Device Switch' | T}}</div>
+        <form class="form-horizontal">
+            <div class="form-group">
+                <label class="col-md-3 control-label">{{'Enable Monitor' | T}}</label>
+                <div class="col-md-9">
+                    <div class="switch">
+                        <input type="checkbox" bs-switch class="switch" ng-model="overview.snmp_enable"
+                               switch-active="true" ng-change="overview.enableSNMP()" resettable>
                     </div>
                 </div>
-            </form>
-        </div>
+            </div>
+        </form>
     </div>
 </div>
-<div class="row" ng-if="overview.detail">
-    <div class="col-md-12">
-        <div class="widget">
-            <div class="widget-header">{{ 'License Information' | T}}</div>
-            <div class="table-wrapper">
-                <table class="table table-hover table-striped">
-                    <tbody>
-                        <tr>
-                            <td>{{ 'License Key' | T}}</td>
-                            <th>{{ overview.detail.license_key }}</th>
-                        </tr>
-                        <tr>
-                            <td>{{ 'Expiration Date' | T}}</td>
-                            <th>{{ overview.detail.license_date }}</th>
-                        </tr>
-                        <tr ng-if="overview.detail.license_limit.length > 0">
-                            <td>{{ 'Licensed Limits' | T}}</td>
-                            <th>{{ overview.detail.license_limit }}</th>
-                        </tr>
-                        <tr>
-                            <td>{{ 'Licensed Features' | T}}</td>
-                            <th>{{ overview.detail.license_feature }}</th>
-                        </tr>
-                    </tbody>
-                </table>
+<div class="col-md-12" ng-if="overview.detail">
+    <div class="widget">
+        <div class="widget-header tab-header-1">{{ 'License Information' | T}}</div>
+        <div class="table-wrapper">
+            <table class="table table-hover table-striped" style="width: 100%">
+                <tbody>
+                <tr>
+                    <td>{{ 'License Key' | T}}</td>
+                    <th>{{ overview.detail.license_key }}</th>
+                </tr>
+                <tr>
+                    <td>{{ 'Expiration Date' | T}}</td>
+                    <th>{{ overview.detail.license_date }}</th>
+                </tr>
+                <tr ng-if="overview.detail.license_limit.length > 0">
+                    <td>{{ 'Licensed Limits' | T}}</td>
+                    <th>{{ overview.detail.license_limit }}</th>
+                </tr>
+                <tr>
+                    <td>{{ 'Licensed Features' | T}}</td>
+                    <th>{{ overview.detail.license_feature }}</th>
+                </tr>
+                </tbody>
+            </table>
 
-            </div>
         </div>
     </div>
 </div>
-<div class="row" ng-if="overview.detail">
-    <div class="col-md-12">
-        <div class="widget">
-            <div class="widget-header">{{ 'System Info' | T}}</div>
-            <div class="table-wrapper">
-                <table class="table table-hover table-striped">
-                    <tbody>
-                        <tr>
-                            <th>{{ 'Host name' | T}}</th>
-                            <td>{{ overview.detail.host_name }}</td>
-                        </tr>
-                        <tr>
-                            <th>{{ 'Model Type' | T}}</th>
-                            <td>{{ overview.detail.model }}</td>
-                        </tr>
-                        <tr>
-                            <th>{{ 'Serial Number' | T}}</th>
-                            <td>{{ overview.detail.serial_number }}</td>
-                        </tr>
-                        <tr>
-                            <th>{{ 'Build Version' | T}}</th>
-                            <td>{{ overview.detail.build_version }}</td>
-                        </tr>
-                        <tr>
-                            <th>{{ 'System CPU' | T}}</th>
-                            <td>{{ overview.detail.system_cpu }}</td>
-                        </tr>
-                        <tr>
-                            <th>{{ 'System RAM' | T}}</th>
-                            <td>{{ overview.detail.system_ram }}</td>
-                        </tr>
-                        <tr>
-                            <th>{{ 'System Boot Time' | T}}</th>
-                            <td>{{ overview.detail.system_boot_time }}</td>
-                        </tr>
-                        <tr>
-                            <th>{{ 'System Up Time' | T}}</th>
-                            <td>{{ overview.detail.system_up_time }}</td>
-                        </tr>
-                        <tr>
-                            <th>{{ 'Platform Build Date' | T}}</th>
-                            <td>{{ overview.detail.platform_bld_date }}</td>
-                        </tr>
-                        <tr>
-                            <th>{{ 'SSL Hardware' | T}}</th>
-                            <td>{{ overview.detail.ssl_hw }}</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+<div class="col-md-12" ng-if="overview.detail">
+    <div class="widget">
+        <div class="widget-header tab-header-1">{{ 'System Info' | T}}</div>
+        <div class="table-wrapper">
+            <table class="table table-hover table-striped" style="width:100%">
+                <tbody>
+                <tr>
+                    <th>{{ 'Host name' | T}}</th>
+                    <td>{{ overview.detail.host_name }}</td>
+                </tr>
+                <tr>
+                    <th>{{ 'Model Type' | T}}</th>
+                    <td>{{ overview.detail.model }}</td>
+                </tr>
+                <tr>
+                    <th>{{ 'Serial Number' | T}}</th>
+                    <td>{{ overview.detail.serial_number }}</td>
+                </tr>
+                <tr>
+                    <th>{{ 'Build Version' | T}}</th>
+                    <td>{{ overview.detail.build_version }}</td>
+                </tr>
+                <tr>
+                    <th>{{ 'System CPU' | T}}</th>
+                    <td>{{ overview.detail.system_cpu }}</td>
+                </tr>
+                <tr>
+                    <th>{{ 'System RAM' | T}}</th>
+                    <td>{{ overview.detail.system_ram }}</td>
+                </tr>
+                <tr>
+                    <th>{{ 'System Boot Time' | T}}</th>
+                    <td>{{ overview.detail.system_boot_time }}</td>
+                </tr>
+                <tr>
+                    <th>{{ 'System Up Time' | T}}</th>
+                    <td>{{ overview.detail.system_up_time }}</td>
+                </tr>
+                <tr>
+                    <th>{{ 'Platform Build Date' | T}}</th>
+                    <td>{{ overview.detail.platform_bld_date }}</td>
+                </tr>
+                <tr>
+                    <th>{{ 'SSL Hardware' | T}}</th>
+                    <td>{{ overview.detail.ssl_hw }}</td>
+                </tr>
+                </tbody>
+            </table>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/device/device.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/device/device.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/device/device.html	(working copy)
@@ -2,91 +2,121 @@
     <div class="col-md-12">
         <div class="widget">
             <div class="widget-header">
-                <span>{{ 'Managed Device' | T }}</span>
+                <span class="tab-header-1">{{ 'Managed Device' | T }}</span>
             </div>
             <div class="table-toolbar">
                 <div>
                     <div class="btn-group">
-                        <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="device.refresh()"><i class="fa fa-refresh"></i></button>
-                        <button ng-if="user_auth_data.device.device.add" class="btn btn-link" title="{{ 'Create a device' | T }}" ng-click="device.addDevice()"><i class="fa fa-plus-circle"></i></button>
-                        <button class="btn btn-link" title="{{ 'Check Device Build Info' | T }}" ng-click="device.check()" ng-if="device.deviceList.length > 0"><i class="fa fa-repeat"></i></button>
+                        <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="device.refresh()"><i
+                            class="fa fa-refresh an-tab-icon"></i></button>
+                        <button ng-if="user_auth_data.device.device.add" class="btn btn-link"
+                                title="{{ 'Create a device' | T }}" ng-click="device.addDevice()"><i
+                            class="fa fa-plus-circle an-tab-icon"></i></button>
+                        <button class="btn btn-link" title="{{ 'Check Device Build Info' | T }}"
+                                ng-click="device.check()" ng-if="device.deviceList.length > 0"><i
+                            class="fa fa-repeat an-tab-icon"></i></button>
                     </div>
                 </div>
             </div>
             <div class="">
-                <table st-table="displayedCollection" st-safe-src="device.deviceList" class="table table-hover table-striped">
+                <table st-table="displayedCollection" st-safe-src="device.deviceList"
+                       class="table table-hover table-striped">
                     <thead>
-                        <tr>
-                            <th class="d-num">No.</th>
-                            <th class="d-name">{{ 'Name' | T }}</th>
-                            <th class="d-name">{{ 'Device Group' | T }}</th>
-                            <th class="d-type">{{ 'Type' | T }}</th>
-                            <th class="d-model">{{ 'Model' | T }}</th>
-                            <th class="d-ip">{{ 'IP' | T }}</th>
-                            <th class="d-type">{{ 'Protocol' | T }}</th>
-                            <!-- <th class="d-port">{{ 'RESTful API Port' | T }}</th> -->
-                            <!-- <th class="d-port">{{ 'WebUI Port' | T }}</th> -->
-                            <th class="d-cont">{{ 'Connected' | T }}</th>
-                            <th class="d-action">{{ 'Action' | T }}</th>
-                        </tr>
-                        <tr ng-if="device.deviceList">
-                            <th></th>
-                            <th><input st-search="name" placeholder="{{'Search by Name'|T}}" class="input-sm form-control" type="text" /></th>
-                            <th><input st-search="device_group" placeholder="{{'Search by Group'|T}}" class="input-sm form-control" type="text" /></th>
-                            <th>
-                                <select class="input-sm form-control" st-input-event="change" st-search="type">
-                                    <option value="">{{'All'|T}}</option>
-                                    <option ng-repeat="row in device.deviceList | unique:'type'" value="{{row.type}}">{{row.type}}</option>
-                                </select>
-                            </th>
-                            <th><input st-search="model" placeholder="{{'Search by Model'|T}}" class="input-sm form-control" type="text" /></th>
-                            <th><input st-search="ip" placeholder="{{'Search by IP'|T}}" class="input-sm form-control" type="text" /></th>
-                            <!-- <th><input st-search="restapi_port" placeholder="{{'Search by Port'|T}}" class="input-sm form-control" type="text" /></th> -->
-                            <th>
-                                <select class="input-sm form-control" st-input-event="change" st-search="protocol">
-                                    <option value="">{{'All'|T}}</option>
-                                    <option value="restapi">{{'REST API'|T}}</option>
-                                    <option value="xmlrpc">{{'XML RPC'|T}}</option>
-                                </select>
-                            </th>
-                            <!-- <th><input st-search="webui_port" placeholder="{{'Search by Port'|T}}" class="input-sm form-control" type="text" /></th> -->
-                            <th></th>
-                            <th></th>
-                            <th></th>
-                        </tr>
+                    <tr>
+                        <th class="d-num">No.</th>
+                        <th class="d-name">{{ 'Name' | T }}</th>
+                        <th class="d-name">{{ 'Device Group' | T }}</th>
+                        <th class="d-type">{{ 'Type' | T }}</th>
+                        <th class="d-model">{{ 'Model' | T }}</th>
+                        <th class="d-ip">{{ 'IP' | T }}</th>
+                        <th class="d-type">{{ 'Protocol' | T }}</th>
+                        <!-- <th class="d-port">{{ 'RESTful API Port' | T }}</th> -->
+                        <!-- <th class="d-port">{{ 'WebUI Port' | T }}</th> -->
+                        <th class="d-cont">{{ 'Connected' | T }}</th>
+                        <th class="d-action">{{ 'Action' | T }}</th>
+                    </tr>
+                    <tr ng-if="device.deviceList">
+                        <th></th>
+                        <th><input st-search="name" placeholder="{{'Search by Name'|T}}" class="input-sm form-control"
+                                   type="text"/></th>
+                        <th><input st-search="device_group" placeholder="{{'Search by Group'|T}}"
+                                   class="input-sm form-control" type="text"/></th>
+                        <th>
+                            <select class="input-sm form-control" st-input-event="change" st-search="type">
+                                <option value="">{{'All' | T}}</option>
+                                <option ng-repeat="row in device.deviceList | unique:'type'" value="{{row.type}}">
+                                    {{row.type}}
+                                </option>
+                            </select>
+                        </th>
+                        <th><input st-search="model" placeholder="{{'Search by Model'|T}}" class="input-sm form-control"
+                                   type="text"/></th>
+                        <th><input st-search="ip" placeholder="{{'Search by IP'|T}}" class="input-sm form-control"
+                                   type="text"/></th>
+                        <!-- <th><input st-search="restapi_port" placeholder="{{'Search by Port'|T}}" class="input-sm form-control" type="text" /></th> -->
+                        <th>
+                            <select class="input-sm form-control" st-input-event="change" st-search="protocol">
+                                <option value="">{{'All' | T}}</option>
+                                <option value="restapi">{{'REST API' | T}}</option>
+                                <option value="xmlrpc">{{'XML RPC' | T}}</option>
+                            </select>
+                        </th>
+                        <!-- <th><input st-search="webui_port" placeholder="{{'Search by Port'|T}}" class="input-sm form-control" type="text" /></th> -->
+                        <th></th>
+                        <th></th>
+                        <th></th>
+                    </tr>
                     </thead>
                     <tbody>
-                        <tr ng-repeat="deviceItem in displayedCollection">
-                            <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
-                            <td><a ui-sref="index.device.detail({name:deviceItem.name})" class="name" ng-click="device.getDetail(deviceItem)">{{ deviceItem.name }}</a></td>
-                            <td>{{ deviceItem.device_group }}</td>
-                            <td>{{ deviceItem.type }}</td>
-                            <td>{{ deviceItem.model}}</td>
-                            <td>{{ deviceItem.ip}}</td>
-                            <td>{{ deviceItem.protocol_verbose}}</td>
-                            <!-- <td>{{ deviceItem.restapi_port }}</td> -->
-                            <!-- <td>{{ deviceItem.webui_port }}</td> -->
-                            <td>
-                                <div class="btn-group">
-                                    <button style="color:#5cb85c" ng-if="deviceItem.connection === true" class="btn btn-link" title="{{'Connected.'|T}}"><i class="fa fa-check-circle"></i></button>
-                                    <button style="color:#e02f44" ng-if="deviceItem.connection === false" class="btn btn-link" title="{{'Unconnected, please check the RESTful API service of device!'|T}}"><i class="fa fa-times-circle"></i></button>
-                                </div>
-                            </td>
-                            <td>
-                                <a class="icon-box" title="{{ 'License Information' | T }}" ng-click="device.licenseInfo(deviceItem)" style="margin-right: 2px;"><i class="array-licenese"></i></a>
-                                <a ng-if="deviceItem.connection === true" class="icon-box" title="{{ 'Web UI' | T }}" ng-href="{{deviceItem.webui}}" style="margin-right: 2px;" rel="noreferrer" target="_blank"><i class="array-webui"></i></a>
-                                <a ng-if="deviceItem.connection === true" class="icon-box" title="{{ 'Web console' | T }}" ng-click="device.terminal(deviceItem)" style="margin-right: 2px;"><i class="array-terminal"></i></a>
-                                <a ng-if="user_auth_data.device.device.save && deviceItem.connection === true" class="icon-box" title="{{ 'Save Configurations' | T }}" ng-click="device.saveConfigurations(deviceItem)" style="margin-right: 2px; font-size: 13px;"><i class="fa fa-floppy-o"></i></a>
-                                <a ng-if="user_auth_data.device.device.delete" class="icon-box" title="{{ 'Delete' | T }}" ng-click="device.deleteDevice(deviceItem)" style="margin-right: 2px;"><i class="array-delete"></i></a>
-                            </td>
-                        </tr>
+                    <tr ng-repeat="deviceItem in displayedCollection">
+                        <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
+                        <td><a ui-sref="index.device.detail({name:deviceItem.name})" class="name"
+                               ng-click="device.getDetail(deviceItem)">{{ deviceItem.name }}</a></td>
+                        <td>{{ deviceItem.device_group }}</td>
+                        <td>{{ deviceItem.type }}</td>
+                        <td>{{ deviceItem.model}}</td>
+                        <td>{{ deviceItem.ip}}</td>
+                        <td>{{ deviceItem.protocol_verbose}}</td>
+                        <!-- <td>{{ deviceItem.restapi_port }}</td> -->
+                        <!-- <td>{{ deviceItem.webui_port }}</td> -->
+                        <td>
+                            <div class="btn-group">
+                                <button style="color:#5cb85c" ng-if="deviceItem.connection === true"
+                                        class="btn btn-link" title="{{'Connected.'|T}}"><i
+                                    class="fa fa-check-circle an-row-icon-status"></i></button>
+                                <button style="color:#e02f44" ng-if="deviceItem.connection === false"
+                                        class="btn btn-link"
+                                        title="{{'Unconnected, please check the RESTful API service of device!'|T}}"><i
+                                    class="fa fa-times-circle an-row-icon-status"></i></button>
+                            </div>
+                        </td>
+                        <td>
+                            <a class="icon-box" title="{{ 'License Information' | T }}"
+                               ng-click="device.licenseInfo(deviceItem)" style="margin-right: 2px;"><i
+                                class="array-licenese an-row-icon"></i></a>&nbsp;
+                            <a ng-if="deviceItem.connection === true" class="icon-box" title="{{ 'Web UI' | T }}"
+                               ng-href="{{deviceItem.webui}}" style="margin-right: 2px;" rel="noreferrer"
+                               target="_blank"><i class="array-webui an-row-icon"></i></a>&nbsp;
+                            <a ng-if="deviceItem.connection === true" class="icon-box" title="{{ 'Web console' | T }}"
+                               ng-click="device.terminal(deviceItem)" style="margin-right: 2px;"><i
+                                class="array-terminal an-row-icon"></i></a>&nbsp;
+                            <a ng-if="user_auth_data.device.device.save && deviceItem.connection === true"
+                               class="icon-box" title="{{ 'Save Configurations' | T }}"
+                               ng-click="device.saveConfigurations(deviceItem)"
+                               style="margin-right: 2px; font-size: 13px;"><i class="fa fa-floppy-o an-row-icon"></i></a>&nbsp;
+                            <a ng-if="user_auth_data.device.device.delete" class="icon-box" title="{{ 'Delete' | T }}"
+                               ng-click="device.deleteDevice(deviceItem)" style="margin-right: 2px;"><i
+                                class="array-delete an-row-icon"></i></a>
+                        </td>
+                    </tr>
                     </tbody>
                     <tfoot>
-                        <tr>
-                            <td colspan="{{device.gridColSpan}}" class="text-center">
-                                <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)"></div>
-                            </td>
-                        </tr>
+                    <tr>
+                        <td colspan="{{device.gridColSpan}}" class="text-center">
+                            <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5"
+                                 st-page-change="onPageChange(newPage)"></div>
+                        </td>
+                    </tr>
                     </tfoot>
                 </table>
 
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/device/modal/device.add.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/device/modal/device.add.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/device/modal/device.add.html	(working copy)
@@ -1,8 +1,8 @@
 <div>
     <div class="modal-header">
-        <!-- <div class="title">{{ 'Add New Device' | T}}</div> -->
-        <button type="button" class="close" ng-click="deviceAdd.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4 class="modal-title">{{ 'Add New Device' | T}}</h4>
+        <button type="button" class="close" ng-click="deviceAdd.close()" aria-label="Close"><span aria-hidden="true">&times;</span>
+        </button>
+        <h6 class="modal-title">{{ 'Add New Device' | T}}</h6>
 
     </div>
     <div class="modal-body">
@@ -10,7 +10,8 @@
             <div class="form-group">
                 <label for="name" class="col-md-3 control-label"><sup>*</sup>{{ 'Device Name' | T }}</label>
                 <div class="col-md-8">
-                    <input ng-verify="required:true, max:32, min:1, skip_chainese_verify:true" type="text" class="form-control" ng-model="deviceAdd.name">
+                    <input ng-verify="required:true, max:32, min:1, skip_chainese_verify:true" type="text"
+                           class="form-control" ng-model="deviceAdd.name">
                 </div>
             </div>
             <div class="form-group">
@@ -54,17 +55,21 @@
 
             <div ng-if="deviceAdd.protocol == 'restapi'">
                 <div class="form-group">
-                    <label for="restapi_port" class="col-md-3 control-label"><sup>*</sup>{{ 'RESTful API Port' | T}}</label>
+                    <label for="restapi_port"
+                           class="col-md-3 control-label"><sup>*</sup>{{ 'RESTful API Port' | T}}</label>
                     <div class="col-md-8">
-                        <input ng-verify="required:true, max_length:65535, min_length:0" type="number" class="form-control" ng-model="deviceAdd.port">
+                        <input ng-verify="required:true, max_length:65535, min_length:0" type="number"
+                               class="form-control" ng-model="deviceAdd.port">
                     </div>
                 </div>
                 <div class="form-group">
-                    <label for="restapi_account" class="col-md-3 control-label"><sup>*</sup>{{ 'Restful Account' | T}}</label>
+                    <label for="restapi_account"
+                           class="col-md-3 control-label"><sup>*</sup>{{ 'Restful Account' | T}}</label>
                     <div class="col-md-8">
                         <div class="account-wrap">
                             <i class="array-user"></i>
-                            <input ng-verify="required:true" type="text" class="form-control" ng-model="deviceAdd.username" placeholder="{{ 'Username' | T}}">
+                            <input ng-verify="required:true" type="text" class="form-control"
+                                   ng-model="deviceAdd.username" placeholder="{{ 'Username' | T}}">
                         </div>
                     </div>
                 </div>
@@ -73,7 +78,8 @@
                     <div class="col-md-offset-3 col-md-8">
                         <div class="account-wrap">
                             <i class="array-password"></i>
-                            <input ng-verify="required:true" type="password" class="form-control" ng-model="deviceAdd.password" placeholder="{{ 'Password' | T}}">
+                            <input ng-verify="required:true" type="password" class="form-control"
+                                   ng-model="deviceAdd.password" placeholder="{{ 'Password' | T}}">
                         </div>
                     </div>
                 </div>
@@ -82,7 +88,8 @@
                 <div class="form-group">
                     <label for="restapi_port" class="col-md-3 control-label"><sup>*</sup>{{ 'XML RPC Port' | T}}</label>
                     <div class="col-md-8">
-                        <input ng-verify="required:true, max_length:65535, min_length:0" type="number" class="form-control" ng-model="deviceAdd.port">
+                        <input ng-verify="required:true, max_length:65535, min_length:0" type="number"
+                               class="form-control" ng-model="deviceAdd.port">
                     </div>
                 </div>
                 <div class="form-group">
@@ -90,7 +97,8 @@
                     <div class="col-md-8">
                         <div class="account-wrap">
                             <i class="array-user"></i>
-                            <input type="text" class="form-control" ng-model="deviceAdd.username" placeholder="{{ 'Username' | T}}">
+                            <input type="text" class="form-control" ng-model="deviceAdd.username"
+                                   placeholder="{{ 'Username' | T}}">
                         </div>
                     </div>
                 </div>
@@ -99,7 +107,8 @@
                     <div class="col-md-offset-3 col-md-8">
                         <div class="account-wrap">
                             <i class="array-password"></i>
-                            <input type="password" class="form-control" ng-model="deviceAdd.password" placeholder="{{ 'Password' | T}}">
+                            <input type="password" class="form-control" ng-model="deviceAdd.password"
+                                   placeholder="{{ 'Password' | T}}">
                         </div>
                     </div>
                 </div>
@@ -108,13 +117,15 @@
             <div class="form-group">
                 <label for="gateway_domain" class="col-md-3 control-label">{{ 'Gateway Domain' | T}}</label>
                 <div class="col-md-8">
-                    <input ng-verify="required:false" type="text" class="form-control" ng-model="deviceAdd.domain" maxlength="128">
+                    <input ng-verify="required:false" type="text" class="form-control" ng-model="deviceAdd.domain"
+                           maxlength="128">
                 </div>
             </div>
             <div class="form-group">
                 <label for="location" class="col-md-3 control-label">{{ 'Location' | T}}</label>
                 <div class="col-md-8">
-                    <input ng-verify="required:false" type="text" class="form-control" ng-model="deviceAdd.location" maxlength="128">
+                    <input ng-verify="required:false" type="text" class="form-control" ng-model="deviceAdd.location"
+                           maxlength="128">
                 </div>
             </div>
             <div class="form-group" ng-if="false">
@@ -131,7 +142,8 @@
 
             <div class="form-group" ng-if="false">
                 <div class="col-md-offset-3 col-md-8">
-                    <input ng-verify="required:false" type="text" class="form-control ip-input" ng-model="deviceAdd.firewallIP">
+                    <input ng-verify="required:false" type="text" class="form-control ip-input"
+                           ng-model="deviceAdd.firewallIP">
                 </div>
             </div>
 
@@ -148,7 +160,8 @@
             </div>
             <div class="form-group" ng-if="false">
                 <div class="col-md-offset-3 col-md-8">
-                    <input ng-verify="required:false" type="text" class="form-control ip-input" ng-model="deviceAdd.intranetIP">
+                    <input ng-verify="required:false" type="text" class="form-control ip-input"
+                           ng-model="deviceAdd.intranetIP">
                 </div>
             </div>
 
@@ -157,7 +170,8 @@
                 <div class="col-md-8">
                     <div class="account-wrap">
                         <i class="array-user"></i>
-                        <input ng-verify="required:true" type="text" class="form-control" ng-model="deviceAdd.console_username" placeholder="{{ 'Username' | T}}">
+                        <input ng-verify="required:true" type="text" class="form-control"
+                               ng-model="deviceAdd.console_username" placeholder="{{ 'Username' | T}}">
                     </div>
                 </div>
             </div>
@@ -165,7 +179,8 @@
                 <div class="col-md-offset-3 col-md-8">
                     <div class="account-wrap">
                         <i class="array-password"></i>
-                        <input ng-verify="required:true" type="password" class="form-control" ng-model="deviceAdd.console_password" placeholder="{{ 'Password' | T}}">
+                        <input ng-verify="required:true" type="password" class="form-control"
+                               ng-model="deviceAdd.console_password" placeholder="{{ 'Password' | T}}">
                     </div>
                 </div>
             </div>
@@ -174,10 +189,12 @@
                 <label class="col-md-3 control-label"><sup>*</sup>{{ 'Device Group' | T }}</label>
                 <div class="col-md-8">
                     <label class="radio-inline">
-                        <input type="radio" name="choiceDeviceGroup" ng-model="deviceAdd.deviceGroupFrom" value="created">{{ 'Created' | T }}
+                        <input type="radio" name="choiceDeviceGroup" ng-model="deviceAdd.deviceGroupFrom"
+                               value="created">{{ 'Created' | T }}
                     </label>
                     <label class="radio-inline">
-                        <input type="radio" name="choiceDeviceGroup" ng-model="deviceAdd.deviceGroupFrom" value="new">{{ 'New' | T}}
+                        <input type="radio" name="choiceDeviceGroup" ng-model="deviceAdd.deviceGroupFrom"
+                               value="new">{{ 'New' | T}}
                     </label>
                 </div>
             </div>
@@ -202,20 +219,23 @@
             <div class="form-group">
                 <label for="webui_port" class="col-md-3 control-label">{{ 'WebUI Port' | T}}</label>
                 <div class="col-md-8">
-                    <input ng-verify="required:true, min_length:1, max_length:65535" type="number" class="form-control" ng-model="deviceAdd.webui_port">
+                    <input ng-verify="required:true, min_length:1, max_length:65535" type="number" class="form-control"
+                           ng-model="deviceAdd.webui_port">
                 </div>
             </div>
             <div class="form-group">
                 <label for="enable_password" class="col-md-3 control-label">{{ 'Enable Password' | T}}</label>
                 <div class="col-md-8">
-                    <input ng-verify="required:false" type="password" class="form-control" ng-model="deviceAdd.enable_password">
+                    <input ng-verify="required:false" type="password" class="form-control"
+                           ng-model="deviceAdd.enable_password">
                 </div>
             </div>
             <div class="form-group">
                 <label for="enable" class="col-md-3 control-label">{{ 'Enable Log' | T}}</label>
                 <div class="col-md-8">
                     <label>
-                        <input type="checkbox" bs-switch class="switch" ng-model="deviceAdd.log_enable" switch-active="true" resettable>
+                        <input type="checkbox" bs-switch class="switch" ng-model="deviceAdd.log_enable"
+                               switch-active="true" resettable>
                     </label>
                 </div>
             </div>
@@ -223,7 +243,8 @@
                 <label for="backup_enable" class="col-md-3 control-label">{{ 'Backup Configuration' | T}}</label>
                 <div class="col-md-8">
                     <label>
-                        <input type="checkbox" bs-switch class="switch" ng-model="deviceAdd.backup_enable" switch-active="true" resettable>
+                        <input type="checkbox" bs-switch class="switch" ng-model="deviceAdd.backup_enable"
+                               switch-active="true" resettable>
                     </label>
                 </div>
             </div>
@@ -234,7 +255,9 @@
 
             <div class="form-group">
                 <div class="col-md-offset-3 col-md-8">
-                    <button ng-verify="control:'addDeviceForm'" class="btn btn-primary" ng-click="deviceAdd.submit()" id="addSubmit">{{ 'Create' | T}}</button>
+                    <button ng-verify="control:'addDeviceForm'" class="btn btn-primary" ng-click="deviceAdd.submit()"
+                            id="addSubmit">{{ 'Create' | T}}
+                    </button>
                     <button class="btn btn-default" ng-click="deviceAdd.close()">{{ 'Cancel' | T}}</button>
                 </div>
             </div>
@@ -249,4 +272,4 @@
         margin-top: 30px;
         width: 940px;
     }
-</style>
\ No newline at end of file
+</style>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/device/modal/device.build_check.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/device/modal/device.build_check.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/device/modal/device.build_check.html	(working copy)
@@ -1,7 +1,7 @@
 <div>
     <div class="modal-header">
         <button type="button" class="close" ng-click="devicecheck.modalClose()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4 class="modal-title">{{ 'Check Device Build Info' | T}}</h4>
+        <h6 class="modal-title">{{ 'Check Device Build Info' | T}}</h6>
     </div>
     <div class="modal-body">
         <div id="ssl-check" class="widget">
@@ -47,4 +47,4 @@
     .modal-dialog {
         width: 800px;
     }
-</style>
\ No newline at end of file
+</style>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/device/modal/device.license.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/device/modal/device.license.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/device/modal/device.license.html	(working copy)
@@ -1,7 +1,7 @@
 <div>
     <div class="modal-header">
         <button type="button" class="close" ng-click="license.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4><i class="array-licenese"></i>{{ 'License Status' | T}} - {{ license.deviceName }}</h4>
+        <h6><i class="array-licenese"></i>{{ 'License Status' | T}} - {{ license.deviceName }}</h6>
     </div>
     <div class="modal-body" ng-if="!license.updateSta">
         <div class="widget">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/device_group/device_group.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/device_group/device_group.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/device_group/device_group.html	(working copy)
@@ -1,16 +1,17 @@
-<div class="container-fluid">
-    <div class="row">
-        <rd-widget>
-            <rd-widget-header title="{{'Device Group'|T}}">
-            </rd-widget-header>
+<div class="row">
+    <div class="col-md-12">
+        <div class="widget">
+            <div class="widget-header">
+                <span class="tab-header-1">{{ 'Device Group' | T }}</span>
+            </div>
             <div class="table-toolbar">
                 <div class="">
                     <div class="btn-group">
                         <button title="{{'Refresh'|T}}" class="btn btn-link hive_enable_active"
-                                ng-click="table.refresh()"><i class="fa fa-refresh"></i></button>
+                                ng-click="table.refresh()"><i class="fa fa-refresh an-tab-icon"></i></button>
                         <button ng-if="role_info.user_type != 'Device Admin'" title="{{'Add a Device Group'|T}}"
                                 class="btn btn-link" ng-click="table.showGroupAddModal()"><i
-                            class="fa fa-plus-circle"></i></button>
+                            class="fa fa-plus-circle an-tab-icon"></i></button>
                     </div>
                 </div>
                 <div class="btn-group pull-right"></div>
@@ -21,9 +22,11 @@
                         <thead>
                         <tr>
                             <th>No.</th>
-                            <th st-sort="name" style="cursor: pointer;">{{'Name'|T}}</th>
-                            <th st-sort="device" style="cursor: pointer; min-width: 120px;">{{'Managed Devices'|T}}</th>
-                            <th>{{'Action'|T}}</th>
+                            <th st-sort="name" style="cursor: pointer;">{{'Name' | T}}</th>
+                            <th st-sort="device" style="cursor: pointer; min-width: 120px;">
+                                {{'Managed Devices' | T}}
+                            </th>
+                            <th>{{'Action' | T}}</th>
                         </tr>
                         </thead>
                         <tbody>
@@ -37,8 +40,9 @@
                                 <!--                                   title="{{'Manage Devices'|T}}" ng-click="table.manage(row)"><i-->
                                 <!--                                    class="array-edit"></i></a>-->
                                 <!--                                &nbsp;&nbsp;-->
-                                <a ng-if="role_info.user_type != 'Device Admin'" class="icon-box" style="cursor:pointer"
-                                   title="{{'Delete'|T}}" ng-click="table.delete(row)"><i class="array-delete"></i></a>
+                                <a ng-if="role_info.user_type != 'Device Admin'" class="icon-box"
+                                   style="cursor:pointer"
+                                   title="{{'Delete'|T}}" ng-click="table.delete(row)"><i class="array-delete an-row-icon"></i></a>
                             </td>
                         </tr>
                         </tbody>
@@ -52,6 +56,7 @@
                          st-page-change="onPageChange(newPage)"></div>
                 </div>
             </div>
-        </rd-widget>
+            </rd-widget>
+        </div>
     </div>
 </div>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/device_group/device_group_add.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/device_group/device_group_add.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/device_group/device_group_add.html	(working copy)
@@ -1,6 +1,6 @@
 <div class="modal-header">
     <button type="button" class="close" ng-click="deviceGroupAdd.modalClose()">&times;</button>
-    <h4 class="modal-title">{{'Add a Device Group'|T}}</h4>
+    <h6 class="modal-title">{{'Add a Device Group'|T}}</h6>
 </div>
 
 <div class="modal-body">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/device_group/device_group_manage.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/device_group/device_group_manage.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/device_group/device_group_manage.html	(working copy)
@@ -1,6 +1,6 @@
 <div class="modal-header">
     <button type="button" class="close" ng-click="deviceGroupManage.modalClose()">&times;</button>
-    <h4 class="modal-title">{{'Bind Devices'|T}}</h4>
+    <h6 class="modal-title">{{'Bind Devices'|T}}</h6>
 </div>
 
 <div class="modal-body">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/extension_mgmt/index.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/extension_mgmt/index.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/extension_mgmt/index.html	(working copy)
@@ -1,16 +1,15 @@
-<div>
-    <div>
+<div class="row">
+    <div class="col-md-12">
         <ul class="nav nav-tabs">
             <li role="presentation" ng-class="{ active: url_contain('/extension/list') }">
-                <a ui-sref="index.extension.list">{{ 'Extensions' | T }}</a>
+                <a ui-sref="index.extension.list"><span class="tab-header">{{ 'Extensions' | T }}</span></a>
             </li>
             <li role="presentation" ng-class="{ active: url_contain('/extension/log') }">
-                <a ui-sref="index.extension.log">{{ 'Logs' | T }}</a>
+                <a ui-sref="index.extension.log"><span class="tab-header">{{ 'Logs' | T }}</span></a>
             </li>
         </ul>
     </div>
-    <br>
-    <div class="">
+    <div class="content-wrapper">
         <div class="" ng-show="url_contain('/extension/list')" ui-view="list"></div>
         <div class="" ng-show="url_contain('/extension/log')" ui-view="log"></div>
     </div>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/extension_mgmt/list/list.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/extension_mgmt/list/list.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/extension_mgmt/list/list.html	(working copy)
@@ -1,52 +1,198 @@
-<div class="row">
-    <div class="col-md-12 col-lg-12 col-sm-12">
-        <!-- <button ng-disabled="extensionList.batch_mode" class="btn btn-link" title="{{'Change view'|T}}" ng-click="extensionList.change_display()"><i class="fa fa-binoculars"></i></button> -->
+<div class="col-md-12 col-lg-12 col-sm-12">
+    <div class="widget">
+        <div class="widget-header">
+            <span ng-if="!extensionList.batch_mode" class="tab-header-1">{{'Installed Extensions' | T}}</span>
+            <span ng-if="extensionList.batch_mode"
+                  class="tab-header-1">{{'Installed Extensions (edit mode)' | T}}</span>
+        </div>
+        <div class="table-toolbar"
+             ng-if="!extensionList.batch_mode && extensionList.display == 'metro' || extensionList.batch_mode">
+            <div class="btn-group">
+                <button ng-if="!extensionList.batch_mode && extensionList.display == 'metro'" class="btn btn-link"
+                        title="{{'Batch mode'|T}}" ng-click="extensionList.enter_batch_mode()"><i
+                    class="fa fa-wrench an-row-icon"></i></button>
+                <button ng-if="extensionList.batch_mode && user_auth_data.system.extension.uninstall"
+                        ng-disabled="extensionList.selected_extension_name_list.length == 0 || extensionList.selected_extension_name_list.length > 1"
+                        class="btn btn-link" title="{{'Uninstall'|T}}" ng-click="extensionList.uninstall()"><i
+                    class="fa fa-trash an-row-icon"></i></button>
+                <button ng-if="extensionList.batch_mode && user_auth_data.system.extension.enable"
+                        ng-disabled="extensionList.selected_extension_name_list.length == 0" class="btn btn-link"
+                        title="{{'Enable'|T}}" ng-click="extensionList.enable()"><i class="fa fa-play an-row-icon"></i>
+                </button>
+                <button ng-if="extensionList.batch_mode && user_auth_data.system.extension.disable"
+                        ng-disabled="extensionList.selected_extension_name_list.length == 0" class="btn btn-link"
+                        title="{{'Disable'|T}}" ng-click="extensionList.disable()"><i
+                    class="fa fa-stop an-row-icon"></i></button>
+                <button ng-if="extensionList.batch_mode && user_auth_data.system.extension.update"
+                        ng-disabled="extensionList.selected_extension_name_list.length == 0 || extensionList.selected_extension_name_list.length > 1"
+                        class="btn btn-link" title="{{'Update'|T}}" ng-click="extensionList.update()"><i
+                    class="fa fa-arrow-up an-row-icon"></i></button>
+                <button ng-if="extensionList.batch_mode" class="btn btn-link" title="{{'Exit edit mode'|T}}"
+                        ng-click="extensionList.exit_batch_mode()"><i class="fa fa-reply an-row-icon"></i></button>
+            </div>
+        </div>
+        <div class="panel panel-default" style="border: none;" ng-if="extensionList.display == 'metro'">
+            <div class="panel-body">
+                <div class="tile-header">
+                    <div class="tile-off">
+                        <span>{{'Disabled' | T}}: </span>
+                    </div>
+                    <div class="tile-on">
+                        <span>{{'Enabled' | T}}: </span>
+                    </div>
+                    <div ng-if="extensions_list" style="margin-top: 10px;">
+                        <select ng-model="extensionList.sort_rule_key"
+                                ng-change="extensionList.sort(extensionList.sort_rule_key)">
+                            <option ng-repeat="each in extensionList.sort_rule_keys" value="{{each}}">{{each | T}}
+                            </option>
+                        </select>
+                    </div>
+                </div>
+                <br>
+                <div class="tile-area no-padding">
+                    <div class="tile-container">
+                        <div style="margin-bottom: 15px;text-align: center" ng-hide="extensions_list"><img
+                            src="app/images/loading.gif"></div>
+                        <div ng-model="extensions_list" ng-if="extensionList.batch_mode"
+                             ng-repeat="each_extension in extensions_list" class="va-cube tile-small"
+                             ng-click="extensionList.select_extension(each_extension.name)"
+                             ng-class="{'element-selected':each_extension.selected}"
+                             ng-style="extensionList.get_extension_style(each_extension)">
+                                <span>
+                                    <i ng-if="each_extension.updates" class="fa fa-arrow-up an-row-icon"></i>
+                                </span>
+                            <div class="capacity-content">
+                                <span>{{each_extension.name}}</span>
+                            </div>
+                        </div>
+                        <div ng-model="extensions_list" ng-if="!extensionList.batch_mode"
+                             ng-repeat="each_extension in extensions_list" class="va-cube tile-small"
+                             data-role="popover" data-popover-mode="hover" data-popover-position="right"
+                             data-popover-text="{{each_extension.popover_text}}" data-popover-background="bg-cyan"
+                             data-popover-color="fg-white" ng-style="extensionList.get_extension_style(each_extension)">
+                                <span>
+                                    <i ng-if="each_extension.updates" class="fa fa-arrow-up an-row-icon"></i>
+                                </span>
+                            <div class="capacity-content">
+                                <span>{{each_extension.name}}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <rd-widget ng-if="extensionList.display == 'list'">
+            <div class="table-toolbar">
+                <div class="btn-group">
+                    <button class="btn btn-link" title="{{ 'Refresh' | T }}"
+                            ng-click="extensionList.refreshInstallList()"><i class="fa fa-refresh an-tab-icon"></i>
+                    </button>
+                </div>
+            </div>
+            <div class="table-container" st-table="displayedCollection" st-safe-src="extensions_list">
+                <div class="table-responsive table-content">
+                    <table class="table table-striped table-hover">
+                        <thead>
+                        <tr>
+                            <th>{{'No.' | T}}</th>
+                            <th st-sort="name" style="cursor: pointer;">{{'Name' | T}}</th>
+                            <th>{{'Description' | T}}</th>
+                            <th st-sort="version" style="cursor: pointer;">{{'Version' | T}}</th>
+                            <th>{{'Size' | T}}</th>
+                            <th st-sort="install_date" style="cursor: pointer;">{{'Last Update Time' | T}}</th>
+                            <th st-sort="status" style="cursor: pointer;">{{'Status' | T}}</th>
+                            <th st-sort="updates" style="cursor: pointer;">{{'Available Updates' | T}}</th>
+                            <th>{{'Action' | T}}</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <tr ng-repeat="row in displayedCollection">
+                            <td>{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
+                            <td>{{row.name}}</td>
+                            <td>{{row.description}}</td>
+                            <td>{{row.version}}<i ng-if="row.ver_diff" class="fa fa-exclamation-circle"
+                                                  style="color: #e02f44; margin-left: 3px;" aria-hidden="true"
+                                                  tooltip-placement="top"
+                                                  uib-tooltip="{{'The current extension package major version number is inconsistent with the system major version number. Please update this extension.' | T}}"></i>
+                            </td>
+                            <td>{{row.size}}</td>
+                            <td>{{row.install_date | date: 'yyyy-MM-dd HH:mm:ss' : '+0800'}}</td>
+                            <td>{{row.status | T}}</td>
+                            <!-- <td>{{row.install_date}}</td> -->
+                            <td ng-if="row.updates">{{row.updates}}</td>
+                            <td ng-if="!row.updates">N/A</td>
+                            <td>
+                                <div class="btn-group">
+                                    <button ng-if="user_auth_data.system.extension.update" ng-disabled="!row.updates"
+                                            class="btn btn-link" title="{{'Update'|T}}"
+                                            ng-click="extensionList.update(row)"><i
+                                        class="fa fa-arrow-up an-row-icon"></i></button>
+                                    <button ng-if="user_auth_data.system.extension.enable"
+                                            ng-disabled="row.status == 'enabled'" class="btn btn-link"
+                                            title="{{'Enable'|T}}" ng-click="extensionList.enable(row)"
+                                            style="margin-left: 6px;"><i class="fa fa-play an-row-icon"></i></button>
+                                    <button ng-if="user_auth_data.system.extension.disable"
+                                            ng-disabled="row.status == 'disabled'" class="btn btn-link"
+                                            title="{{'Disable'|T}}" ng-click="extensionList.disable(row)"
+                                            style="margin-left: 6px;"><i class="fa fa-stop an-row-icon"></i></button>
+                                    <button ng-if="user_auth_data.system.extension.uninstall" class="btn btn-link"
+                                            title="{{'Uninstall'|T}}" ng-click="extensionList.uninstall(row)"
+                                            style="margin-left: 6px;"><i class="fa fa-trash an-row-icon"></i></button>
+                                </div>
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div style="margin-bottom: 15px;text-align: center" ng-hide="extensions_list"><img
+                    src="app/images/loading.gif"></div>
+                <div class="table-pagination">
+                    <div st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)"
+                         st-pagination="" st-template="app/modules/common/templates/custom_pagination.html"></div>
+                </div>
+            </div>
+        </rd-widget>
+    </div>
+    <br ng-if="extensionList.display == 'metro'">
+    <div class="recommend">
         <div class="widget">
             <div class="widget-header">
-                <span ng-if="!extensionList.batch_mode">{{'Installed Extensions'|T}}</span>
-                <span ng-if="extensionList.batch_mode">{{'Installed Extensions (edit mode)'|T}}</span>
+                <span class="tab-header-1">{{'Available Extensions' | T}}</span>
             </div>
-            <div class="table-toolbar" ng-if="!extensionList.batch_mode && extensionList.display == 'metro' || extensionList.batch_mode">
+            <div class="table-toolbar"
+                 ng-if="!extensionList.batch_mode2 && extensionList.display == 'metro' || extensionList.batch_mode2">
                 <div class="btn-group">
-                    <button ng-if="!extensionList.batch_mode && extensionList.display == 'metro'" class="btn btn-link" title="{{'Batch mode'|T}}" ng-click="extensionList.enter_batch_mode()"><i class="fa fa-wrench"></i></button>
-                    <button ng-if="extensionList.batch_mode && user_auth_data.system.extension.uninstall" ng-disabled="extensionList.selected_extension_name_list.length == 0 || extensionList.selected_extension_name_list.length > 1" class="btn btn-link" title="{{'Uninstall'|T}}" ng-click="extensionList.uninstall()"><i class="fa fa-trash"></i></button>
-                    <button ng-if="extensionList.batch_mode && user_auth_data.system.extension.enable" ng-disabled="extensionList.selected_extension_name_list.length == 0" class="btn btn-link" title="{{'Enable'|T}}" ng-click="extensionList.enable()"><i class="fa fa-play"></i></button>
-                    <button ng-if="extensionList.batch_mode && user_auth_data.system.extension.disable" ng-disabled="extensionList.selected_extension_name_list.length == 0" class="btn btn-link" title="{{'Disable'|T}}" ng-click="extensionList.disable()"><i class="fa fa-stop"></i></button>
-                    <button ng-if="extensionList.batch_mode && user_auth_data.system.extension.update" ng-disabled="extensionList.selected_extension_name_list.length == 0 || extensionList.selected_extension_name_list.length > 1" class="btn btn-link" title="{{'Update'|T}}"  ng-click="extensionList.update()"><i class="fa fa-arrow-up"></i></button>
-                    <button ng-if="extensionList.batch_mode" class="btn btn-link" title="{{'Exit edit mode'|T}}" ng-click="extensionList.exit_batch_mode()"><i class="fa fa-reply"></i></button>
+                    <button ng-if="!extensionList.batch_mode2 && extensionList.display == 'metro'" class="btn btn-link"
+                            title="{{'Batch mode'|T}}" ng-click="extensionList.enter_batch_mode2()"><i
+                        class="fa fa-wrench an-row-icon"></i></button>
+                    <button ng-if="extensionList.batch_mode2 && user_auth_data.system.extension.install"
+                            ng-disabled="extensionList.selected_extension_name_list2.length == 0 || extensionList.selected_extension_name_list2.length > 1"
+                            class="btn btn-link" title="{{'Install'|T}}" ng-click="extensionList.install()">
+                        {{'Install' | T}}
+                    </button>
+                    <button ng-if="extensionList.batch_mode2" class="btn btn-link" title="{{'Exit edit mode'|T}}"
+                            ng-click="extensionList.exit_batch_mode2()"><i class="fa fa-reply an-row-icon"></i></button>
                 </div>
             </div>
             <div class="panel panel-default" style="border: none;" ng-if="extensionList.display == 'metro'">
                 <div class="panel-body">
-                    <div class="tile-header">
-                        <div class="tile-off">
-                            <span>{{'Disabled'|T}}: </span>
-                        </div>
-                        <div class="tile-on">
-                            <span>{{'Enabled'|T}}: </span>
-                        </div>
-                        <div ng-if="extensions_list" style="margin-top: 10px;">
-                            <select ng-model="extensionList.sort_rule_key" ng-change="extensionList.sort(extensionList.sort_rule_key)">
-                                <option ng-repeat="each in extensionList.sort_rule_keys" value="{{each}}">{{each|T}}</option>
-                            </select>
-                        </div>
-                    </div>
-                    <br>
                     <div class="tile-area no-padding">
                         <div class="tile-container">
-                            <div style="margin-bottom: 15px;text-align: center" ng-hide="extensions_list"><img src="app/images/loading.gif"></div>
-                            <div ng-model="extensions_list" ng-if="extensionList.batch_mode" ng-repeat="each_extension in extensions_list" class="va-cube tile-small" ng-click="extensionList.select_extension(each_extension.name)" ng-class="{'element-selected':each_extension.selected}" ng-style="extensionList.get_extension_style(each_extension)">
-                                <span>
-                                    <i ng-if="each_extension.updates" class="fa fa-arrow-up"></i>
-                                </span>
+                            <div ng-model="extensions_list" ng-if="extensionList.batch_mode2"
+                                 ng-repeat="each_extension in availableExtensionsList" class="va-cube tile-small"
+                                 ng-click="extensionList.select_extension2(each_extension.name)"
+                                 ng-class="{'element-selected':each_extension.selected}"
+                                 ng-style="extensionList.get_extension_style(each_extension)">
                                 <div class="capacity-content">
                                     <span>{{each_extension.name}}</span>
                                 </div>
                             </div>
-                            <div ng-model="extensions_list" ng-if="!extensionList.batch_mode" ng-repeat="each_extension in extensions_list" class="va-cube tile-small" data-role="popover" data-popover-mode="hover" data-popover-position="right" data-popover-text="{{each_extension.popover_text}}" data-popover-background="bg-cyan" data-popover-color="fg-white" ng-style="extensionList.get_extension_style(each_extension)">
-                                <span>
-                                    <i ng-if="each_extension.updates" class="fa fa-arrow-up"></i>
-                                </span>
+                            <div ng-model="availableExtensionsList" ng-if="!extensionList.batch_mode2"
+                                 ng-repeat="each_extension in availableExtensionsList" class="va-cube tile-small"
+                                 data-role="popover" data-popover-mode="hover" data-popover-position="right"
+                                 data-popover-text="{{each_extension.popover_text}}" data-popover-background="bg-cyan"
+                                 data-popover-color="fg-white"
+                                 ng-style="extensionList.get_extension_style(each_extension)">
                                 <div class="capacity-content">
                                     <span>{{each_extension.name}}</span>
                                 </div>
@@ -56,191 +202,124 @@
                 </div>
             </div>
             <rd-widget ng-if="extensionList.display == 'list'">
-                <div class="table-toolbar">
+                <div ng-if="!extensionList.repo_reachable">
+                    <form class="form-horizontal">
+                        {{ extensionList.available_repo_error | T}}
+                    </form>
+                </div>
+                <div ng-if="extensionList.availableloading" style="margin-bottom: 15px;text-align: center"><img
+                    src="app/images/loading.gif"></div>
+                <div class="table-toolbar" ng-if="extensionList.repo_reachable">
                     <div class="btn-group">
-                        <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="extensionList.refreshInstallList()"><i class="fa fa-refresh"></i></button>
+                        <button class="btn btn-link" title="{{ 'Refresh' | T }}"
+                                ng-click="extensionList.refreshAvailableList()"><i
+                            class="fa fa-refresh an-tab-icon"></i></button>
                     </div>
                 </div>
-                <div class="table-container" st-table="displayedCollection" st-safe-src="extensions_list">
+                <div ng-if="extensionList.repo_reachable" class="table-container" st-table="displayedCollection"
+                     st-safe-src="availableExtensionsList">
                     <div class="table-responsive table-content">
                         <table class="table table-striped table-hover">
                             <thead>
-                                <tr>
-                                    <th>{{'No.'|T}}</th>
-                                    <th st-sort="name" style="cursor: pointer;">{{'Name'|T}}</th>
-                                    <th>{{'Description'|T}}</th>
-                                    <th st-sort="version" style="cursor: pointer;">{{'Version'|T}}</th>
-                                    <th>{{'Size'|T}}</th>
-                                    <th st-sort="install_date" style="cursor: pointer;">{{'Last Update Time'|T}}</th>
-                                    <th st-sort="status" style="cursor: pointer;">{{'Status'|T}}</th>
-                                    <th st-sort="updates" style="cursor: pointer;">{{'Available Updates'|T}}</th>
-                                    <th>{{'Action'|T}}</th>
-                                </tr>
+                            <tr>
+                                <th>{{'No.' | T}}</th>
+                                <th st-sort="name" style="cursor: pointer;">{{'Name' | T}}</th>
+                                <th>{{'Arch' | T}}</th>
+                                <th st-sort="version" style="cursor: pointer;">{{'Version' | T}}</th>
+                                <th>{{'Release' | T}}</th>
+                                <th>{{'Size' | T}}</th>
+                                <th>{{'Repo' | T}}</th>
+                                <th>{{'Summary' | T}}</th>
+                                <!-- <th>{{'URL'|T}}</th> -->
+                                <!-- <th>{{'License'|T}}</th> -->
+                                <th>{{'Description' | T}}</th>
+                            </tr>
                             </thead>
                             <tbody>
-                                <tr ng-repeat="row in displayedCollection">
-                                    <td>{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
-                                    <td>{{row.name}}</td>
-                                    <td>{{row.description}}</td>
-                                    <td>{{row.version}}<i ng-if="row.ver_diff" class="fa fa-exclamation-circle" style="color: #e02f44; margin-left: 3px;" aria-hidden="true" tooltip-placement="top" uib-tooltip="{{'The current extension package major version number is inconsistent with the system major version number. Please update this extension.' | T}}"></i></td>
-                                    <td>{{row.size}}</td>
-                                    <td>{{row.install_date| date : 'yyyy-MM-dd HH:mm:ss' : '+0800'}}</td>
-                                    <td>{{row.status|T}}</td>
-                                    <!-- <td>{{row.install_date}}</td> -->
-                                    <td ng-if="row.updates">{{row.updates}}</td>
-                                    <td ng-if="!row.updates">N/A</td>
-                                    <td>
-                                        <div class="btn-group">
-                                            <button ng-if="user_auth_data.system.extension.update" ng-disabled="!row.updates" class="btn btn-link" title="{{'Update'|T}}" ng-click="extensionList.update(row)"><i class="fa fa-arrow-up"></i></button>
-                                            <button ng-if="user_auth_data.system.extension.enable" ng-disabled="row.status == 'enabled'" class="btn btn-link" title="{{'Enable'|T}}" ng-click="extensionList.enable(row)" style="margin-left: 6px;"><i class="fa fa-play"></i></button>
-                                            <button ng-if="user_auth_data.system.extension.disable" ng-disabled="row.status == 'disabled'" class="btn btn-link" title="{{'Disable'|T}}" ng-click="extensionList.disable(row)" style="margin-left: 6px;"><i class="fa fa-stop"></i></button>
-                                            <button ng-if="user_auth_data.system.extension.uninstall" class="btn btn-link" title="{{'Uninstall'|T}}" ng-click="extensionList.uninstall(row)" style="margin-left: 6px;"><i class="fa fa-trash"></i></button>
-                                        </div>
-                                    </td>
-                                </tr>
+                            <tr ng-repeat="row in displayedCollection">
+                                <td>{{$index + 1}}</td>
+                                <td>{{row.name}}</td>
+                                <td>{{row.arch}}</td>
+                                <td>{{row.version}}</td>
+                                <td>{{row.release}}</td>
+                                <td>{{row.size}}</td>
+                                <td>{{row.repo}}</td>
+                                <td>{{row.summary}}</td>
+                                <!-- <td>{{row.url}}</td> -->
+                                <!-- <td>{{row.license}}</td> -->
+                                <td>{{row.description}}</td>
+                                <td>
+                                    <div class="btn-group">
+                                        <button ng-if="user_auth_data.system.extension.install" title="{{'Install'|T}}"
+                                                class="btn btn-link" ng-click="extensionList.install(row)">
+                                            {{'Install' | T}}
+                                        </button>
+                                    </div>
+                                </td>
+                            </tr>
                             </tbody>
                         </table>
                     </div>
-                    <div style="margin-bottom: 15px;text-align: center" ng-hide="extensions_list"><img src="app/images/loading.gif"></div>
+                    <div style="margin-bottom: 15px;text-align: center" ng-hide="availableExtensionsList"><img
+                        src="app/images/loading.gif"></div>
                     <div class="table-pagination">
-                        <div st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)" st-pagination="" st-template="app/modules/common/templates/custom_pagination.html"></div>
+                        <div st-items-by-page="20" st-pagination=""
+                             st-template="app/modules/common/templates/custom_pagination.html"></div>
                     </div>
                 </div>
             </rd-widget>
         </div>
-        <br ng-if="extensionList.display == 'metro'">
-        <div class="recommend">
-            <div class="widget">
-                <div class="widget-header">
-                    <span>{{'Available Extensions'|T}}</span>
-                </div>
-                <div class="table-toolbar" ng-if="!extensionList.batch_mode2 && extensionList.display == 'metro' || extensionList.batch_mode2">
-                    <div class="btn-group">
-                        <button ng-if="!extensionList.batch_mode2 && extensionList.display == 'metro'" class="btn btn-link" title="{{'Batch mode'|T}}" ng-click="extensionList.enter_batch_mode2()"><i class="fa fa-wrench"></i></button>
-                        <button ng-if="extensionList.batch_mode2 && user_auth_data.system.extension.install" ng-disabled="extensionList.selected_extension_name_list2.length == 0 || extensionList.selected_extension_name_list2.length > 1" class="btn btn-link" title="{{'Install'|T}}"  ng-click="extensionList.install()">{{'Install'|T}}</button>
-                        <button ng-if="extensionList.batch_mode2" class="btn btn-link" title="{{'Exit edit mode'|T}}" ng-click="extensionList.exit_batch_mode2()"><i class="fa fa-reply"></i></button>
-                    </div>
-                </div>
-                <div class="panel panel-default" style="border: none;" ng-if="extensionList.display == 'metro'">
-                    <div class="panel-body">
-                        <div class="tile-area no-padding">
-                            <div class="tile-container">
-                                <div ng-model="extensions_list" ng-if="extensionList.batch_mode2" ng-repeat="each_extension in availableExtensionsList" class="va-cube tile-small" ng-click="extensionList.select_extension2(each_extension.name)" ng-class="{'element-selected':each_extension.selected}" ng-style="extensionList.get_extension_style(each_extension)">
-                                    <div class="capacity-content">
-                                        <span>{{each_extension.name}}</span>
-                                    </div>
-                                </div>
-                                <div ng-model="availableExtensionsList" ng-if="!extensionList.batch_mode2" ng-repeat="each_extension in availableExtensionsList" class="va-cube tile-small" data-role="popover" data-popover-mode="hover" data-popover-position="right" data-popover-text="{{each_extension.popover_text}}" data-popover-background="bg-cyan" data-popover-color="fg-white" ng-style="extensionList.get_extension_style(each_extension)">
-                                    <div class="capacity-content">
-                                        <span>{{each_extension.name}}</span>
-                                    </div>
-                                </div>
-                            </div>
+    </div>
+    <div class="widget" ng-if="user_auth_data.system.extension.update">
+        <div class="widget-header">
+            <span class="tab-header-1">{{'Update Extensions Manually' | T}}</span>
+        </div>
+        <rd-widget-body class="no-padding">
+            <div>
+                <form class="form-horizontal" name="updateManuallyForm" unsaved-warning-form verify-scope="tipStyle: 1">
+                    <div class="form-group">
+                        <label class="col-md-3 control-label">{{'Type' | T}}</label>
+                        <div class="col-md-5">
+                            <select name="type" class="form-control" ng-model="extensionList.type">
+                                <option value="url">{{ 'URL' | T}}</option>
+                                <option value="local">{{ 'Local' | T}}</option>
+                            </select>
                         </div>
                     </div>
-                </div>
-                <rd-widget ng-if="extensionList.display == 'list'">
-                    <div ng-if="!extensionList.repo_reachable">
-                        <form class="form-horizontal">
-                            {{ extensionList.available_repo_error | T}}
-                        </form>
-                    </div>
-                    <div ng-if="extensionList.availableloading" style="margin-bottom: 15px;text-align: center"><img src="app/images/loading.gif"></div>
-                    <div class="table-toolbar" ng-if="extensionList.repo_reachable">
-                        <div class="btn-group">
-                            <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="extensionList.refreshAvailableList()"><i class="fa fa-refresh"></i></button>
+                    <div class="form-group" ng-if="extensionList.type=='url'">
+                        <label class="col-md-3 control-label">{{'URL' | T}}</label>
+                        <div class="col-md-5">
+                            <input ng-verify type="text" class="form-control" placeholder=""
+                                   ng-model="extensionList.url">
                         </div>
                     </div>
-                    <div ng-if="extensionList.repo_reachable" class="table-container" st-table="displayedCollection" st-safe-src="availableExtensionsList">
-                        <div class="table-responsive table-content">
-                            <table class="table table-striped table-hover">
-                                <thead>
-                                    <tr>
-                                        <th>{{'No.'|T}}</th>
-                                        <th st-sort="name" style="cursor: pointer;">{{'Name'|T}}</th>
-                                        <th>{{'Arch'|T}}</th>
-                                        <th st-sort="version" style="cursor: pointer;">{{'Version'|T}}</th>
-                                        <th>{{'Release'|T}}</th>
-                                        <th>{{'Size'|T}}</th>
-                                        <th>{{'Repo'|T}}</th>
-                                        <th>{{'Summary'|T}}</th>
-                                        <!-- <th>{{'URL'|T}}</th> -->
-                                        <!-- <th>{{'License'|T}}</th> -->
-                                        <th>{{'Description'|T}}</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr ng-repeat="row in displayedCollection">
-                                        <td>{{$index + 1}}</td>
-                                        <td>{{row.name}}</td>
-                                        <td>{{row.arch}}</td>
-                                        <td>{{row.version}}</td>
-                                        <td>{{row.release}}</td>
-                                        <td>{{row.size}}</td>
-                                        <td>{{row.repo}}</td>
-                                        <td>{{row.summary}}</td>
-                                        <!-- <td>{{row.url}}</td> -->
-                                        <!-- <td>{{row.license}}</td> -->
-                                        <td>{{row.description}}</td>
-                                        <td>
-                                            <div class="btn-group">
-                                                <button ng-if="user_auth_data.system.extension.install" title="{{'Install'|T}}" class="btn btn-link" ng-click="extensionList.install(row)">{{'Install'|T}}</button>
-                                            </div>
-                                        </td>
-                                    </tr>
-                                </tbody>
-                            </table>
+                    <div class="form-group" ng-if="extensionList.type=='local'">
+                        <label class="col-md-3 control-label">{{'Local' | T}}</label>
+                        <div class="col-md-5">
+                            <div class="local">
+                                <input type="text" id="textfield" class="form-control">
+                                <button class="btn btn-primary" style="position: absolute; top: 0; right: 15px;">
+                                    {{'Browse' | T}}
+                                </button>
+                                <input type="file" id="uploadfield" class="file form-control" nv-file-select
+                                       uploader="extensionList.file_uploader"
+                                       onchange="document.getElementById('textfield').value=this.value.split('\\').pop()">
+                            </div>
                         </div>
-                        <div style="margin-bottom: 15px;text-align: center" ng-hide="availableExtensionsList"><img src="app/images/loading.gif"></div>
-                        <div class="table-pagination">
-                            <div st-items-by-page="20" st-pagination="" st-template="app/modules/common/templates/custom_pagination.html"></div>
+                    </div>
+                    <div class="form-group" ng-show="updateManuallyForm.$dirty">
+                        <div class="col-md-offset-3 col-md-9">
+                            <button ng-verify="control:'updateManuallyForm'" type="submit" class="btn btn-primary"
+                                    ng-click="extensionList.updateExtensionManually(updateManuallyForm)">{{'Update' | T}}
+                            </button>
+                            <button type="reset" class="btn btn-default btn-cancel"
+                                    ng-click="updateManuallyForm.$dirty=false;extensionList.cancel()">{{'Cancel' | T}}
+                            </button>
                         </div>
                     </div>
-                </rd-widget>
-            </div>
-        </div>
-        <div class="widget" ng-if="user_auth_data.system.extension.update">
-            <div class="widget-header">
-                <span>{{'Update Extensions Manually'|T}}</span>
+                </form>
             </div>
-            <rd-widget-body class="no-padding">
-                <div>
-                    <form class="form-horizontal" name="updateManuallyForm" unsaved-warning-form verify-scope="tipStyle: 1">
-                        <div class="form-group">
-                            <label class="col-md-3 control-label">{{'Type'|T}}</label>
-                            <div class="col-md-5">
-                                <select name="type" class="form-control" ng-model="extensionList.type">
-                                    <option value="url">{{ 'URL' | T}}</option>
-                                    <option value="local">{{ 'Local' | T}}</option>
-                                </select>
-                            </div>
-                        </div>
-                        <div class="form-group" ng-if="extensionList.type=='url'">
-                            <label class="col-md-3 control-label">{{'URL'|T}}</label>
-                            <div class="col-md-5">
-                                <input ng-verify type="text" class="form-control" placeholder="" ng-model="extensionList.url">
-                            </div>
-                        </div>
-                        <div class="form-group" ng-if="extensionList.type=='local'">
-                            <label class="col-md-3 control-label">{{'Local'|T}}</label>
-                            <div class="col-md-5">
-                                <div class="local">
-                                    <input type="text" id="textfield" class="form-control">
-                                    <button class="btn btn-primary" style="position: absolute; top: 0; right: 15px;">{{'Browse'|T}}</button>
-                                    <input type="file" id="uploadfield" class="file form-control" nv-file-select uploader="extensionList.file_uploader" onchange="document.getElementById('textfield').value=this.value.split('\\').pop()">
-                                </div>
-                            </div>
-                        </div>
-                        <div class="form-group" ng-show="updateManuallyForm.$dirty">
-                            <div class="col-md-offset-3 col-md-9">
-                                <button ng-verify="control:'updateManuallyForm'" type="submit" class="btn btn-primary" ng-click="extensionList.updateExtensionManually(updateManuallyForm)">{{'Update'|T}}</button>
-                                <button type="reset" class="btn btn-default btn-cancel" ng-click="updateManuallyForm.$dirty=false;extensionList.cancel()">{{'Cancel'|T}}</button>
-                            </div>
-                        </div>
-                    </form>
-                </div>
-            </rd-widget-body>
-        </div>
+        </rd-widget-body>
     </div>
 </div>
 
@@ -249,9 +328,11 @@
     .panel-body {
         padding: 10px;
     }
+
     .btn {
         padding: 6px 15px;
     }
+
     .subscribe {
         margin-bottom: 10px;
     }
@@ -274,19 +355,22 @@
         border: 1px dashed #d8d9da;
     }
 
-    .custom-table.table>tbody>tr:nth-of-type(odd) {
+    .custom-table.table > tbody > tr:nth-of-type(odd) {
         background-color: transparent;
     }
+
     .recommend.tile-small {
         height: 60px;
         width: 60px;
         background-color: #e45602;
     }
+
     .va-cube {
         border-radius: 5px;
         text-align: center;
         padding: 5px;
     }
+
     .capacity-content {
         position: relative;
         top: 50%;
@@ -301,8 +385,8 @@
 
     .tile-on span::after {
         content: "sss";
-        background: rgb(126,192,238);
-        color: rgb(126,192,238);
+        background: rgb(126, 192, 238);
+        color: rgb(126, 192, 238);
         border-radius: 5px;
     }
 
@@ -313,14 +397,15 @@
 
     .tile-off span::after {
         content: "sss";
-        background-color: rgb(170,170,170);
-        color: rgb(170,170,170);
+        background-color: rgb(170, 170, 170);
+        color: rgb(170, 170, 170);
         border-radius: 5px;
     }
 
     .input-group-addon {
         cursor: pointer;
     }
+
     .preview-content {
         padding: 10px;
         line-height: 25px;
@@ -334,24 +419,29 @@
     .popover.popover-shadow {
         max-width: 800px;
     }
-    .file-box{ 
+
+    .file-box {
         position: relative;
-    } 
-    .file{ 
-        position: absolute; 
+    }
+
+    .file {
+        position: absolute;
         top: 0;
         opacity: 0;
     }
+
     .file-box button {
         position: absolute;
         top: 0;
         right: 0;
         border-radius: 0;
     }
+
     .form-horizontal .nav-pills {
         width: 375px;
     }
+
     .form-horizontal .file-box {
         width: 370px;
     }
-</style>
\ No newline at end of file
+</style>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/extension_mgmt/log/log.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/extension_mgmt/log/log.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/extension_mgmt/log/log.html	(working copy)
@@ -1,46 +1,45 @@
-<div class="row">
-    <div class="col-md-12">
-        <div class="widget">
-            <div class="widget-header">
-                <span>{{'Extension Log' | T}}</span>
-            </div>
-            <div class="table-toolbar">
-                <div class="btn-group">
-                    <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="extensionLog.refresh()"><i class="fa fa-refresh"></i></button>
-                </div>
-            </div>
-            <div style="margin-bottom: 5px;margin-top:5px;text-align: center" ng-if="!extensionLog.logs"><img src="app/images/loading.gif"></div>
-            <div class="" st-table="displayedCollection" st-safe-src="extensionLog.logs">
-                <table class="table table-striped table-hover">
-                    <thead>
-                        <tr>
-                            <th class="i-num">No.</th>
-                            <th class="i-appname" st-sort="app_name">{{ 'Extension Name' | T }}</th>
-                            <th class="i-version" st-sort="build_version">{{ 'Action' | T }}</th>
-                            <th class="i-md5">{{ 'Time' | T }}</th>
-                            <th class="i-download-link">{{ 'Result' | T }}</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr ng-repeat="row in displayedCollection">
-                            <td class="i-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
-                            <td>{{ row.name }}</td>
-                            <td>{{ row.action }}</td>
-                            <td>{{ row.time }}</td>
-                            <td>{{ row.result}}</td>
-                        </tr>
-                    </tbody>
-                    <tfoot>
-                        <tr>
-                            <td colspan="8" class="text-center">
-                                <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)"></div>
-                            </td>
-                        </tr>
-                    </tfoot>
-                </table>
+<div class="col-md-12">
+    <div class="widget">
+        <div class="widget-header">
+            <span class="tab-header-1">{{'Extension Log' | T}}</span>
+        </div>
+        <div class="table-toolbar">
+            <div class="btn-group">
+                <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="extensionLog.refresh()"><i
+                    class="fa fa-refresh an-tab-icon"></i></button>
             </div>
         </div>
+        <div style="margin-bottom: 5px;margin-top:5px;text-align: center" ng-if="!extensionLog.logs"><img
+            src="app/images/loading.gif"></div>
+        <div class="" st-table="displayedCollection" st-safe-src="extensionLog.logs">
+            <table class="table table-striped table-hover">
+                <thead>
+                <tr>
+                    <th class="i-num">No.</th>
+                    <th class="i-appname" st-sort="app_name">{{ 'Extension Name' | T }}</th>
+                    <th class="i-version" st-sort="build_version">{{ 'Action' | T }}</th>
+                    <th class="i-md5">{{ 'Time' | T }}</th>
+                    <th class="i-download-link">{{ 'Result' | T }}</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr ng-repeat="row in displayedCollection">
+                    <td class="i-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
+                    <td>{{ row.name }}</td>
+                    <td>{{ row.action }}</td>
+                    <td>{{ row.time }}</td>
+                    <td>{{ row.result}}</td>
+                </tr>
+                </tbody>
+                <tfoot>
+                <tr>
+                    <td colspan="8" class="text-center">
+                        <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5"
+                             st-page-change="onPageChange(newPage)"></div>
+                    </td>
+                </tr>
+                </tfoot>
+            </table>
+        </div>
     </div>
-    
- </div>
-    
\ No newline at end of file
+</div>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/ha/device_ha/detail/base_settings.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/ha/device_ha/detail/base_settings.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/ha/device_ha/detail/base_settings.html	(working copy)
@@ -1,79 +1,100 @@
-<div class="row">
-    <div class="col-md-12">
-        <form class="form-horizontal" ng-if="base.haSettings" name="settingsForm" verify-scope="tipStyle: 1" unsaved-warning-form>
-            <div class="form-group">
-                <label class="col-md-3 control-label">{{ 'HA Status' | T}}</label>
-                <div class="col-md-6">
-                    <input type="checkbox" bs-switch class="switch" ng-model="base.haSettings.enable" switch-on-text="{{'Enable'|T}}" switch-off-text="{{'Disable'|T}}" switch-active="false" resettable disabled>
-                </div>
-            </div>
-            <div class="form-group">
-                <label for="gateway_domain" class="col-md-3 control-label">{{ 'ARP Interval' | T}}</label>
-                <div class="col-md-3">
-                    <input ng-verify="required:true" type="text" class="form-control" ng-model="base.haSettings.arp" resettable disabled>
-                </div>
-            </div>
-            <div class="form-group">
-                <label class="col-md-3 control-label">{{ 'Bootup Synconfig' | T}}</label>
-                <div class="col-md-6">
-                    <input type="checkbox" bs-switch class="switch" ng-model="base.haSettings.sync_bootup" switch-on-text="{{'Enable'|T}}" switch-off-text="{{'Disable'|T}}" switch-active="false" resettable disabled>
-                </div>
-            </div>
-            <div class="form-group">
-                <label class="col-md-3 control-label">{{ 'Runtime Synconfig' | T}}</label>
-                <div class="col-md-6">
-                    <input type="checkbox" bs-switch class="switch" ng-model="base.haSettings.sync_runtime" switch-on-text="{{'Enable'|T}}" switch-off-text="{{'Disable'|T}}" switch-active="false" resettable disabled>
-                </div>
-            </div>
-            <div class="form-group">
-                <label class="col-md-3 control-label">{{ 'HA Logging' | T}}</label>
-                <div class="col-md-6">
-                    <input type="checkbox" bs-switch class="switch" ng-model="base.haSettings.log_enable" switch-on-text="{{'Enable'|T}}" switch-off-text="{{'Disable'|T}}" switch-active="false" resettable disabled>
-                </div>
-            </div>
-            <div class="form-group">
-                <label for="gateway_domain" class="col-md-3 control-label">{{ 'HA Log Level' | T}}</label>
-                <div class="col-md-3">
-                    <input ng-verify="required:true" type="text" class="form-control" ng-model="base.haSettings.log_level" resettable disabled>
-                </div>
-            </div>
-            <div class="form-group">
-                <label class="col-md-3 control-label">{{ 'HA Floating MAC' | T}}</label>
-                <div class="col-md-6">
-                    <input type="checkbox" bs-switch class="switch" ng-model="base.haSettings.floatmac_enable" switch-on-text="{{'Enable'|T}}" switch-off-text="{{'Disable'|T}}" switch-active="false" resettable disabled>
-                </div>
-            </div>
-            <div class="form-group">
-                <label class="col-md-3 control-label">{{ 'HA FFO Link' | T}}</label>
-                <div class="col-md-6">
-                    <input type="checkbox" bs-switch class="switch" ng-model="base.haSettings.link_ffo" switch-on-text="{{'Enable'|T}}" switch-off-text="{{'Disable'|T}}" switch-active="false" resettable disabled>
-                </div>
-            </div>
-            <div class="form-group">
-                <label class="col-md-3 control-label">{{ 'HA Network Link' | T}}</label>
-                <div class="col-md-6">
-                    <input type="checkbox" bs-switch class="switch" ng-model="base.haSettings.link_network" switch-on-text="{{'Enable'|T}}" switch-off-text="{{'Disable'|T}}" switch-active="false" resettable disabled>
-                </div>
-            </div>
-            <div class="form-group">
-                <label class="col-md-3 control-label">{{ 'HA Consistency Check' | T}}</label>
-                <div class="col-md-6">
-                    <input type="checkbox" bs-switch class="switch" ng-model="base.haSettings.ha_consistency" switch-on-text="{{'Enable'|T}}" switch-off-text="{{'Disable'|T}}" switch-active="false" resettable disabled>
-                </div>
-            </div>
-            <div class="form-group">
-                <label class="col-md-3 control-label">{{ 'HA Peer Check' | T}}</label>
-                <div class="col-md-6">
-                    <input type="checkbox" bs-switch class="switch" ng-model="base.haSettings.ha_checkpeer" switch-on-text="{{'Enable'|T}}" switch-off-text="{{'Disable'|T}}" switch-active="false" resettable disabled>
-                </div>
-            </div>
-            <div class="form-group" ng-if="settingsForm.$dirty">
-                <div class="col-md-offset-3 col-md-6">
-                    <button ng-verify="control:'settingsForm'" class="btn btn-primary" ng-click="base.changeSetting(settingsForm)">{{ 'Save Changes' | T}}</button>
-                    <button class="btn btn-default" ng-click="settingsForm.$dirty=false;base.cancle()">{{ 'Cancel' | T}}</button>
-                </div>
-            </div>
-
-        </form>
-
+<div class="col-md-12">
+    <form class="form-horizontal" ng-if="base.haSettings" name="settingsForm" verify-scope="tipStyle: 1"
+          unsaved-warning-form>
+        <div class="form-group">
+            <label class="col-md-3 control-label">{{ 'HA Status' | T}}</label>
+            <div class="col-md-6">
+                <input type="checkbox" bs-switch class="switch" ng-model="base.haSettings.enable"
+                       switch-on-text="{{'Enable'|T}}" switch-off-text="{{'Disable'|T}}" switch-active="false"
+                       resettable disabled>
+            </div>
+        </div>
+        <div class="form-group">
+            <label for="gateway_domain" class="col-md-3 control-label">{{ 'ARP Interval' | T}}</label>
+            <div class="col-md-3">
+                <input ng-verify="required:true" type="text" class="form-control" ng-model="base.haSettings.arp"
+                       resettable disabled>
+            </div>
+        </div>
+        <div class="form-group">
+            <label class="col-md-3 control-label">{{ 'Bootup Synconfig' | T}}</label>
+            <div class="col-md-6">
+                <input type="checkbox" bs-switch class="switch" ng-model="base.haSettings.sync_bootup"
+                       switch-on-text="{{'Enable'|T}}" switch-off-text="{{'Disable'|T}}" switch-active="false"
+                       resettable disabled>
+            </div>
+        </div>
+        <div class="form-group">
+            <label class="col-md-3 control-label">{{ 'Runtime Synconfig' | T}}</label>
+            <div class="col-md-6">
+                <input type="checkbox" bs-switch class="switch" ng-model="base.haSettings.sync_runtime"
+                       switch-on-text="{{'Enable'|T}}" switch-off-text="{{'Disable'|T}}" switch-active="false"
+                       resettable disabled>
+            </div>
+        </div>
+        <div class="form-group">
+            <label class="col-md-3 control-label">{{ 'HA Logging' | T}}</label>
+            <div class="col-md-6">
+                <input type="checkbox" bs-switch class="switch" ng-model="base.haSettings.log_enable"
+                       switch-on-text="{{'Enable'|T}}" switch-off-text="{{'Disable'|T}}" switch-active="false"
+                       resettable disabled>
+            </div>
+        </div>
+        <div class="form-group">
+            <label for="gateway_domain" class="col-md-3 control-label">{{ 'HA Log Level' | T}}</label>
+            <div class="col-md-3">
+                <input ng-verify="required:true" type="text" class="form-control" ng-model="base.haSettings.log_level"
+                       resettable disabled>
+            </div>
+        </div>
+        <div class="form-group">
+            <label class="col-md-3 control-label">{{ 'HA Floating MAC' | T}}</label>
+            <div class="col-md-6">
+                <input type="checkbox" bs-switch class="switch" ng-model="base.haSettings.floatmac_enable"
+                       switch-on-text="{{'Enable'|T}}" switch-off-text="{{'Disable'|T}}" switch-active="false"
+                       resettable disabled>
+            </div>
+        </div>
+        <div class="form-group">
+            <label class="col-md-3 control-label">{{ 'HA FFO Link' | T}}</label>
+            <div class="col-md-6">
+                <input type="checkbox" bs-switch class="switch" ng-model="base.haSettings.link_ffo"
+                       switch-on-text="{{'Enable'|T}}" switch-off-text="{{'Disable'|T}}" switch-active="false"
+                       resettable disabled>
+            </div>
+        </div>
+        <div class="form-group">
+            <label class="col-md-3 control-label">{{ 'HA Network Link' | T}}</label>
+            <div class="col-md-6">
+                <input type="checkbox" bs-switch class="switch" ng-model="base.haSettings.link_network"
+                       switch-on-text="{{'Enable'|T}}" switch-off-text="{{'Disable'|T}}" switch-active="false"
+                       resettable disabled>
+            </div>
+        </div>
+        <div class="form-group">
+            <label class="col-md-3 control-label">{{ 'HA Consistency Check' | T}}</label>
+            <div class="col-md-6">
+                <input type="checkbox" bs-switch class="switch" ng-model="base.haSettings.ha_consistency"
+                       switch-on-text="{{'Enable'|T}}" switch-off-text="{{'Disable'|T}}" switch-active="false"
+                       resettable disabled>
+            </div>
+        </div>
+        <div class="form-group">
+            <label class="col-md-3 control-label">{{ 'HA Peer Check' | T}}</label>
+            <div class="col-md-6">
+                <input type="checkbox" bs-switch class="switch" ng-model="base.haSettings.ha_checkpeer"
+                       switch-on-text="{{'Enable'|T}}" switch-off-text="{{'Disable'|T}}" switch-active="false"
+                       resettable disabled>
+            </div>
+        </div>
+        <div class="form-group" ng-if="settingsForm.$dirty">
+            <div class="col-md-offset-3 col-md-6">
+                <button ng-verify="control:'settingsForm'" class="btn btn-primary"
+                        ng-click="base.changeSetting(settingsForm)">{{ 'Save Changes' | T}}
+                </button>
+                <button class="btn btn-default" ng-click="settingsForm.$dirty=false;base.cancle()">{{ 'Cancel' | T}}
+                </button>
+            </div>
+        </div>
+    </form>
 </div>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/ha/device_ha/detail/device_ha_detail.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/ha/device_ha/detail/device_ha_detail.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/ha/device_ha/detail/device_ha_detail.html	(working copy)
@@ -1,29 +1,32 @@
-<div>
-    <div class="row">
-        <div class="col-md-12">
-            <div ncy-breadcrumb></div>
-        </div>
+<div class="row">
+    <div class="col-md-12">
+        <div ncy-breadcrumb></div>
     </div>
-    <div class="row">
-        <div class="col-md-12">
-            <div class="tab-wrapper">
-                <ul class="nav nav-tabs">
-                    <li role="presentation" ng-class="{ active: url_contain('/ha/device_ha/detail/{{ current_name }}/base_settings') }">
-                        <a ui-sref="index.ha.device_ha.detail.base_settings">{{ 'Base Settings' | T }}</a>
-                    </li>
-                    <li role="presentation" ng-class="{ active: url_contain('/ha/device_ha/detail/{{ current_name }}/ha_unit') }">
-                        <a ui-sref="index.ha.device_ha.detail.ha_unit">{{ 'HA Unit' | T }}</a>
-                    </li>
-                    <li role="presentation" ng-class="{ active: url_contain('/ha/device_ha/detail/{{ current_name }}/ha_group') }">
-                        <a ui-sref="index.ha.device_ha.detail.ha_group">{{ 'HA Group' | T}}</a>
-                    </li>
-                </ul>
-            </div>
+    <div class="col-md-12">
+        <div class="tab-wrapper">
+            <ul class="nav nav-tabs">
+                <li role="presentation"
+                    ng-class="{ active: url_contain('/ha/device_ha/detail/{{ current_name }}/base_settings') }">
+                    <a ui-sref="index.ha.device_ha.detail.base_settings"><span class="tab-header">{{ 'Base Settings' | T
+                        }}</span></a>
+                </li>
+                <li role="presentation"
+                    ng-class="{ active: url_contain('/ha/device_ha/detail/{{ current_name }}/ha_unit') }">
+                    <a ui-sref="index.ha.device_ha.detail.ha_unit"><span class="tab-header">{{ 'HA Unit' | T
+                        }}</span></a>
+                </li>
+                <li role="presentation"
+                    ng-class="{ active: url_contain('/ha/device_ha/detail/{{ current_name }}/ha_group') }">
+                    <a ui-sref="index.ha.device_ha.detail.ha_group"><span class="tab-header">{{ 'HA Group' | T}}</span></a>
+                </li>
+            </ul>
         </div>
     </div>
     <div class="content-wrapper">
-        <div class="" ng-show="url_contain('/ha/device_ha/detail/{{ current_name }}/base_settings')" ui-view="base_settings"></div>
+        <div class="" ng-show="url_contain('/ha/device_ha/detail/{{ current_name }}/base_settings')"
+             ui-view="base_settings"></div>
         <div class="" ng-show="url_contain('/ha/device_ha/detail/{{ current_name }}/ha_unit')" ui-view="ha_unit"></div>
-        <div class="" ng-show="url_contain('/ha/device_ha/detail/{{ current_name }}/ha_group')" ui-view="ha_group"></div>
+        <div class="" ng-show="url_contain('/ha/device_ha/detail/{{ current_name }}/ha_group')"
+             ui-view="ha_group"></div>
     </div>
 </div>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/ha/device_ha/detail/ha_group.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/ha/device_ha/detail/ha_group.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/ha/device_ha/detail/ha_group.html	(working copy)
@@ -1,58 +1,65 @@
-<div class="row">
-    <div class="col-md-12">
-        <div class="widget">
-            <div class="table-toolbar">
-                <div class="btn-group">
-                    <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="group.refresh()"><i class="array-refresh"></i></button>
-                    <button class="btn btn-link" title="{{ 'Switch' | T }}" ng-click="group.switch()"><i class="fa fa fa-wrench"></i></button>
-                </div>
-            </div>
-            <div class="table-wrapper">
-                <table st-table="displayedCollection" st-safe-src="group.deviceHaGroupList" class="table table-hover table-striped">
-                    <thead>
-                        <tr>
-                            <th class="d-num">No.</th>
-                            <th class="d-id">{{ 'Group ID' | T }}</th>
-                            <th class="d-group">{{ 'HA Group' | T }}</th>
-                            <th class="d-mode">{{ 'Preemption Mode' | T }}</th>
-                            <!-- <th class="d-port">{{ 'Port' | T }}</th>
-                            <th class="d-ips">{{ 'Floating IPs' | T }}</th>
-                            <th class="d-ranges">{{ 'Floating IP Ranges' | T }}</th>
-                            <th class="d-priorities">{{ 'Group Priorities' | T }}</th> -->
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr ng-repeat="item in displayedCollection">
-                            <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
-                            <td>{{ item.id }}</td>
-                            <td>
-                                <div class="btn-group">
-                                    <button style="color:#5cb85c" ng-if="item.enable" class="btn btn-link" title="{{'Enable'|T}}"><i class="fa fa-check-circle"></i></button>
-                                    <button style="color:#e02f44" ng-if="!item.enable" class="btn btn-link" title="{{'Disable'|T}}"><i class="fa fa-times-circle"></i></button>
-                                </div>
-                            </td>
-                            <td>
-                                <div class="btn-group">
-                                    <button style="color:#5cb85c" ng-if="item.preempt" class="btn btn-link" title="{{'Enable'|T}}"><i class="fa fa-check-circle"></i></button>
-                                    <button style="color:#e02f44" ng-if="!item.preempt" class="btn btn-link" title="{{'Disable'|T}}"><i class="fa fa-times-circle"></i></button>
-                                </div>
-                            </td>
-                            <!-- <td>{{ item.port.length > 0 ? item.port : null }}</td>
-                            <td>{{ item.fip.length > 0 ? item.fip : null }}</td>
-                            <td>{{ item.fiprange.length > 0 ? item.fiprange : null }}</td>
-                            <td>{{ item.priority.length > 0 ? item.priority : null }}</td> -->
-                        </tr>
-                        <div style="margin-bottom: 5px;margin-top:5px;text-align: center" ng-if="!group.deviceHaGroupList"><img src="app/images/loading.gif"></div>
-                    </tbody>
-                    <tfoot>
-                        <tr>
-                            <td colspan="5" class="text-center">
-                                <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)"></div>
-                            </td>
-                        </tr>
-                    </tfoot>
-                </table>
+<div class="col-md-12">
+    <div class="widget">
+        <div class="table-toolbar">
+            <div class="btn-group">
+                <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="group.refresh()"><i
+                    class="array-refresh an-tab-icon"></i></button>
+                <button class="btn btn-link" title="{{ 'Switch' | T }}" ng-click="group.switch()"><i
+                    class="fa fa fa-wrench an-tab-icon"></i></button>
             </div>
         </div>
+        <div class="table-wrapper">
+            <table st-table="displayedCollection" st-safe-src="group.deviceHaGroupList"
+                   class="table table-hover table-striped">
+                <thead>
+                <tr>
+                    <th class="d-num">No.</th>
+                    <th class="d-id">{{ 'Group ID' | T }}</th>
+                    <th class="d-group">{{ 'HA Group' | T }}</th>
+                    <th class="d-mode">{{ 'Preemption Mode' | T }}</th>
+                    <!-- <th class="d-port">{{ 'Port' | T }}</th>
+                    <th class="d-ips">{{ 'Floating IPs' | T }}</th>
+                    <th class="d-ranges">{{ 'Floating IP Ranges' | T }}</th>
+                    <th class="d-priorities">{{ 'Group Priorities' | T }}</th> -->
+                </tr>
+                </thead>
+                <tbody>
+                <tr ng-repeat="item in displayedCollection">
+                    <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
+                    <td>{{ item.id }}</td>
+                    <td>
+                        <div class="btn-group">
+                            <button style="color:#5cb85c" ng-if="item.enable" class="btn btn-link"
+                                    title="{{'Enable'|T}}"><i class="fa fa-check-circle"></i></button>
+                            <button style="color:#e02f44" ng-if="!item.enable" class="btn btn-link"
+                                    title="{{'Disable'|T}}"><i class="fa fa-times-circle"></i></button>
+                        </div>
+                    </td>
+                    <td>
+                        <div class="btn-group">
+                            <button style="color:#5cb85c" ng-if="item.preempt" class="btn btn-link"
+                                    title="{{'Enable'|T}}"><i class="fa fa-check-circle"></i></button>
+                            <button style="color:#e02f44" ng-if="!item.preempt" class="btn btn-link"
+                                    title="{{'Disable'|T}}"><i class="fa fa-times-circle"></i></button>
+                        </div>
+                    </td>
+                    <!-- <td>{{ item.port.length > 0 ? item.port : null }}</td>
+                    <td>{{ item.fip.length > 0 ? item.fip : null }}</td>
+                    <td>{{ item.fiprange.length > 0 ? item.fiprange : null }}</td>
+                    <td>{{ item.priority.length > 0 ? item.priority : null }}</td> -->
+                </tr>
+                <div style="margin-bottom: 5px;margin-top:5px;text-align: center" ng-if="!group.deviceHaGroupList">
+                    <img src="app/images/loading.gif"></div>
+                </tbody>
+                <tfoot>
+                <tr>
+                    <td colspan="5" class="text-center">
+                        <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5"
+                             st-page-change="onPageChange(newPage)"></div>
+                    </td>
+                </tr>
+                </tfoot>
+            </table>
+        </div>
     </div>
 </div>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/ha/device_ha/detail/ha_unit.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/ha/device_ha/detail/ha_unit.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/ha/device_ha/detail/ha_unit.html	(working copy)
@@ -1,43 +1,45 @@
-<div class="row">
-    <div class="col-md-12">
-        <div class="widget">
-            <div class="table-toolbar">
-                <div class="btn-group">
-                    <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="unit.refresh()"><i class="array-refresh"></i></button>
-                </div>
-            </div>
-            <div class="table-wrapper">
-                <table st-table="displayedCollection" st-safe-src="unit.deviceHaUnitList" class="table table-hover table-striped">
-                    <thead>
-                        <tr>
-                            <th class="d-num">No.</th>
-                            <th class="d-name">{{ 'Unit Name' | T }}</th>
-                            <th class="d-ip">{{ 'Primary Link IP' | T }}</th>
-                            <th class="d-port">{{ 'Primary Link Port' | T }}</th>
-                            <!-- <th class="d-links">{{ 'Secondary Links' | T }}</th>
-                            <th class="d-conditions">{{ 'HA Health Check Conditions' | T }}</th> -->
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr ng-repeat="item in displayedCollection">
-                            <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
-                            <td>{{ item.name }}</td>
-                            <td>{{ item.ip }}</td>
-                            <td>{{ item.port }}</td>
-                            <!-- <td>{{ item.links.length > 0 ? item.links : null }}</td>
-                            <td>{{ item.ha_hc_gw.length > 0 ? item.ha_hc_gw : null }}</td> -->
-                        </tr>
-                        <div style="margin-bottom: 5px;margin-top:5px;text-align: center" ng-if="!unit.deviceHaUnitList"><img src="app/images/loading.gif"></div>
-                    </tbody>
-                    <tfoot>
-                        <tr>
-                            <td colspan="5" class="text-center">
-                                <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)"></div>
-                            </td>
-                        </tr>
-                    </tfoot>
-                </table>
+<div class="col-md-12">
+    <div class="widget">
+        <div class="table-toolbar">
+            <div class="btn-group">
+                <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="unit.refresh()"><i
+                    class="array-refresh an-tab-icon"></i></button>
             </div>
         </div>
+        <div class="table-wrapper">
+            <table st-table="displayedCollection" st-safe-src="unit.deviceHaUnitList"
+                   class="table table-hover table-striped">
+                <thead>
+                <tr>
+                    <th class="d-num">No.</th>
+                    <th class="d-name">{{ 'Unit Name' | T }}</th>
+                    <th class="d-ip">{{ 'Primary Link IP' | T }}</th>
+                    <th class="d-port">{{ 'Primary Link Port' | T }}</th>
+                    <!-- <th class="d-links">{{ 'Secondary Links' | T }}</th>
+                    <th class="d-conditions">{{ 'HA Health Check Conditions' | T }}</th> -->
+                </tr>
+                </thead>
+                <tbody>
+                <tr ng-repeat="item in displayedCollection">
+                    <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
+                    <td>{{ item.name }}</td>
+                    <td>{{ item.ip }}</td>
+                    <td>{{ item.port }}</td>
+                    <!-- <td>{{ item.links.length > 0 ? item.links : null }}</td>
+                    <td>{{ item.ha_hc_gw.length > 0 ? item.ha_hc_gw : null }}</td> -->
+                </tr>
+                <div style="margin-bottom: 5px;margin-top:5px;text-align: center" ng-if="!unit.deviceHaUnitList">
+                    <img src="app/images/loading.gif"></div>
+                </tbody>
+                <tfoot>
+                <tr>
+                    <td colspan="5" class="text-center">
+                        <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5"
+                             st-page-change="onPageChange(newPage)"></div>
+                    </td>
+                </tr>
+                </tfoot>
+            </table>
+        </div>
     </div>
 </div>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/ha/device_ha/device_ha.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/ha/device_ha/device_ha.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/ha/device_ha/device_ha.html	(working copy)
@@ -1,95 +1,111 @@
-<div class="row">
-    <div class="col-md-12">
-        <div class="widget">
-            <div class="table-toolbar">
-                <div class="btn-group">
-                    <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="ha.refresh()"><i class="array-refresh"></i></button>
-                </div>
-            </div>
-            <div class="table-wrapper">
-                <table st-table="displayedCollection" st-safe-src="ha.deviceHaList" class="table table-hover table-striped">
-                    <thead>
-                        <tr>
-                            <th>No.</th>
-                            <th>{{ 'Device Name' | T }}</th>
-                            <th>{{ 'HA Status' | T }}</th>
-                            <th>{{ 'ARP Interval' | T }}</th>
-                            <th>{{ 'Runtime Synconfig' | T }}</th>
-                            <th>{{ 'HA Logging' | T }}</th>
-                            <th>{{ 'HA Log Level' | T }}</th>
-                            <th>{{ 'HA Floating MAC' | T }}</th>
-                            <th>{{ 'HA FFO Link' | T }}</th>
-                            <!-- <th>{{ 'HA Network Link' | T }}</th>
-                            <th>{{ 'HA Consistency Check' | T }}</th>
-                            <th>{{ 'HA Peer Check' | T }}</th> -->
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr ng-repeat="item in displayedCollection">
-                            <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
-                            <td><a ui-sref="index.ha.device_ha.detail({name:item.device_name, settings:item})">{{ item.device_name }}</a></td>
-                            <td>
-                                <div class="btn-group">
-                                    <button style="color:#5cb85c" ng-if="item.enable" class="btn btn-link" title="{{'Enable'|T}}"><i class="fa fa-check-circle"></i></button>
-                                    <button style="color:#e02f44" ng-if="!item.enable" class="btn btn-link" title="{{'Disable'|T}}"><i class="fa fa-times-circle"></i></button>
-                                </div>
-                            </td>
-                            <td>{{ item.arp }}</td>
-                            <td>
-                                <div class="btn-group">
-                                    <button style="color:#5cb85c" ng-if="item.sync_runtime" class="btn btn-link" title="{{'Enable'|T}}"><i class="fa fa-check-circle"></i></button>
-                                    <button style="color:#e02f44" ng-if="!item.sync_runtime" class="btn btn-link" title="{{'Disable'|T}}"><i class="fa fa-times-circle"></i></button>
-                                </div>
-                            </td>
-                            <td>
-                                <div class="btn-group">
-                                    <button style="color:#5cb85c" ng-if="item.log_enable" class="btn btn-link" title="{{'Enable'|T}}"><i class="fa fa-check-circle"></i></button>
-                                    <button style="color:#e02f44" ng-if="!item.log_enable" class="btn btn-link" title="{{'Disable'|T}}"><i class="fa fa-times-circle"></i></button>
-                                </div>
-                            </td>
-                            <td>{{ item.log_level }}</td>
-                            <td>
-                                <div class="btn-group">
-                                    <button style="color:#5cb85c" ng-if="item.floatmac_enable" class="btn btn-link" title="{{'Enable'|T}}"><i class="fa fa-check-circle"></i></button>
-                                    <button style="color:#e02f44" ng-if="!item.floatmac_enable" class="btn btn-link" title="{{'Disable'|T}}"><i class="fa fa-times-circle"></i></button>
-                                </div>
-                            </td>
-                            <td>
-                                <div class="btn-group">
-                                    <button style="color:#5cb85c" ng-if="item.link_ffo" class="btn btn-link" title="{{'Enable'|T}}"><i class="fa fa-check-circle"></i></button>
-                                    <button style="color:#e02f44" ng-if="!item.link_ffo" class="btn btn-link" title="{{'Disable'|T}}"><i class="fa fa-times-circle"></i></button>
-                                </div>
-                            </td>
-                          <!--   <td>
-                                <div class="btn-group">
-                                    <button style="color:#5cb85c" ng-if="item.link_network" class="btn btn-link" title="{{'Enable'|T}}"><i class="fa fa-check-circle"></i></button>
-                                    <button style="color:#e02f44" ng-if="!item.link_network" class="btn btn-link" title="{{'Disable'|T}}"><i class="fa fa-times-circle"></i></button>
-                                </div>
-                            </td>
-                            <td>
-                                <div class="btn-group">
-                                    <button style="color:#5cb85c" ng-if="item.ha_consistency" class="btn btn-link" title="{{'Enable'|T}}"><i class="fa fa-check-circle"></i></button>
-                                    <button style="color:#e02f44" ng-if="!item.ha_consistency" class="btn btn-link" title="{{'Disable'|T}}"><i class="fa fa-times-circle"></i></button>
-                                </div>
-                            </td>
-                            <td>
-                                <div class="btn-group">
-                                    <button style="color:#5cb85c" ng-if="item.ha_checkpeer" class="btn btn-link" title="{{'Enable'|T}}"><i class="fa fa-check-circle"></i></button>
-                                    <button style="color:#e02f44" ng-if="!item.ha_checkpeer" class="btn btn-link" title="{{'Disable'|T}}"><i class="fa fa-times-circle"></i></button>
-                                </div>
-                            </td> -->
-                        </tr>
-                        <div style="margin-bottom: 5px;margin-top:5px;text-align: center" ng-if="!ha.deviceHaList"><img src="app/images/loading.gif"></div>
-                    </tbody>
-                    <tfoot>
-                        <tr>
-                            <td colspan="5" class="text-center">
-                                <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)"></div>
-                            </td>
-                        </tr>
-                    </tfoot>
-                </table>
+<div class="col-md-12">
+    <div class="widget">
+        <div class="table-toolbar">
+            <div class="btn-group">
+                <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="ha.refresh()"><i
+                    class="array-refresh an-tab-icon"></i></button>
             </div>
         </div>
+        <div class="table-wrapper">
+            <table st-table="displayedCollection" st-safe-src="ha.deviceHaList" class="table table-hover table-striped">
+                <thead>
+                <tr>
+                    <th>No.</th>
+                    <th>{{ 'Device Name' | T }}</th>
+                    <th>{{ 'HA Status' | T }}</th>
+                    <th>{{ 'ARP Interval' | T }}</th>
+                    <th>{{ 'Runtime Synconfig' | T }}</th>
+                    <th>{{ 'HA Logging' | T }}</th>
+                    <th>{{ 'HA Log Level' | T }}</th>
+                    <th>{{ 'HA Floating MAC' | T }}</th>
+                    <th>{{ 'HA FFO Link' | T }}</th>
+                    <!-- <th>{{ 'HA Network Link' | T }}</th>
+                    <th>{{ 'HA Consistency Check' | T }}</th>
+                    <th>{{ 'HA Peer Check' | T }}</th> -->
+                </tr>
+                </thead>
+                <tbody>
+                <tr ng-repeat="item in displayedCollection">
+                    <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
+                    <td><a
+                        ui-sref="index.ha.device_ha.detail({name:item.device_name, settings:item})">{{ item.device_name
+                        }}</a></td>
+                    <td>
+                        <div class="btn-group">
+                            <button style="color:#5cb85c" ng-if="item.enable" class="btn btn-link"
+                                    title="{{'Enable'|T}}"><i class="fa fa-check-circle"></i></button>
+                            <button style="color:#e02f44" ng-if="!item.enable" class="btn btn-link"
+                                    title="{{'Disable'|T}}"><i class="fa fa-times-circle"></i></button>
+                        </div>
+                    </td>
+                    <td>{{ item.arp }}</td>
+                    <td>
+                        <div class="btn-group">
+                            <button style="color:#5cb85c" ng-if="item.sync_runtime" class="btn btn-link"
+                                    title="{{'Enable'|T}}"><i class="fa fa-check-circle"></i></button>
+                            <button style="color:#e02f44" ng-if="!item.sync_runtime" class="btn btn-link"
+                                    title="{{'Disable'|T}}"><i class="fa fa-times-circle"></i></button>
+                        </div>
+                    </td>
+                    <td>
+                        <div class="btn-group">
+                            <button style="color:#5cb85c" ng-if="item.log_enable" class="btn btn-link"
+                                    title="{{'Enable'|T}}"><i class="fa fa-check-circle"></i></button>
+                            <button style="color:#e02f44" ng-if="!item.log_enable" class="btn btn-link"
+                                    title="{{'Disable'|T}}"><i class="fa fa-times-circle"></i></button>
+                        </div>
+                    </td>
+                    <td>{{ item.log_level }}</td>
+                    <td>
+                        <div class="btn-group">
+                            <button style="color:#5cb85c" ng-if="item.floatmac_enable" class="btn btn-link"
+                                    title="{{'Enable'|T}}"><i class="fa fa-check-circle"></i></button>
+                            <button style="color:#e02f44" ng-if="!item.floatmac_enable" class="btn btn-link"
+                                    title="{{'Disable'|T}}"><i class="fa fa-times-circle"></i></button>
+                        </div>
+                    </td>
+                    <td>
+                        <div class="btn-group">
+                            <button style="color:#5cb85c" ng-if="item.link_ffo" class="btn btn-link"
+                                    title="{{'Enable'|T}}"><i class="fa fa-check-circle"></i></button>
+                            <button style="color:#e02f44" ng-if="!item.link_ffo" class="btn btn-link"
+                                    title="{{'Disable'|T}}"><i class="fa fa-times-circle"></i></button>
+                        </div>
+                    </td>
+                    <!--   <td>
+                          <div class="btn-group">
+                              <button style="color:#5cb85c" ng-if="item.link_network" class="btn btn-link" title="{{'Enable'|T}}"><i class="fa fa-check-circle"></i></button>
+                              <button style="color:#e02f44" ng-if="!item.link_network" class="btn btn-link" title="{{'Disable'|T}}"><i class="fa fa-times-circle"></i></button>
+                          </div>
+                      </td>
+                      <td>
+                          <div class="btn-group">
+                              <button style="color:#5cb85c" ng-if="item.ha_consistency" class="btn btn-link" title="{{'Enable'|T}}"><i class="fa fa-check-circle"></i></button>
+                              <button style="color:#e02f44" ng-if="!item.ha_consistency" class="btn btn-link" title="{{'Disable'|T}}"><i class="fa fa-times-circle"></i></button>
+                          </div>
+                      </td>
+                      <td>
+                          <div class="btn-group">
+                              <button style="color:#5cb85c" ng-if="item.ha_checkpeer" class="btn btn-link" title="{{'Enable'|T}}"><i class="fa fa-check-circle"></i></button>
+                              <button style="color:#e02f44" ng-if="!item.ha_checkpeer" class="btn btn-link" title="{{'Disable'|T}}"><i class="fa fa-times-circle"></i></button>
+                          </div>
+                      </td> -->
+                </tr>
+                <tr ng-if="displayedCollection.length === 0">
+                    <td colspan="9" class="text-center">No matching records found.</td>
+                </tr>
+                <div style="margin-bottom: 5px;margin-top:5px;text-align: center" ng-if="!ha.deviceHaList"><img
+                    src="app/images/loading.gif"></div>
+                </tbody>
+                <tfoot>
+                <tr>
+                    <td colspan="5" class="text-center">
+                        <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5"
+                             st-page-change="onPageChange(newPage)"></div>
+                    </td>
+                </tr>
+                </tfoot>
+            </table>
+        </div>
     </div>
 </div>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/ha/ha.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/ha/ha.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/ha/ha.html	(working copy)
@@ -2,13 +2,13 @@
     <div class="col-md-12">
         <ul class="nav nav-tabs">
             <li role="presentation" ng-class="{ active: url_contain('/ha/device_ha') }">
-                <a ui-sref="index.ha.device_ha">{{ 'Device HA' | T }}</a>
+                <a ui-sref="index.ha.device_ha"><span class="tab-header"> {{ 'Device HA' | T }}</span></a>
             </li>
         </ul>
     </div>
 </div>
 <div class="row">
-     <div class="col-md-12">
+    <div class="col-md-12">
         <div class="" ng-show="url_contain('/ha/device_ha')" ui-view="device_ha"></div>
     </div>
 </div>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/image/image.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/image/image.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/image/image.html	(working copy)
@@ -2,76 +2,83 @@
     <div class="col-md-12">
         <div class="widget">
             <div class="widget-header">
-                <span>{{'Device Build' | T}}</span>
+                <span class="tab-header-1">{{'Device Build' | T}}</span>
             </div>
 
             <div class="table-toolbar">
                 <div class="btn-group">
-                    <button ng-if="user_auth_data.image.add" class="btn btn-link" title="{{ 'Add New Image' | T }}" ng-click="image.addImage()"><i class="fa fa-plus-circle"></i></button>
-                    <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="image.refresh()"><i class="fa fa-refresh"></i></button>
+                    <button ng-if="user_auth_data.image.add" class="btn btn-link" title="{{ 'Add New Image' | T }}"
+                            ng-click="image.addImage()"><i class="fa fa-plus-circle an-tab-icon"></i></button>
+                    <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="image.refresh()"><i
+                        class="fa fa-refresh an-tab-icon"></i></button>
                 </div>
-                <!-- <a class="icon-box" title="{{ 'Add New Image' | T }}" ng-click="image.addImage()"><i class="array-add"></i></a>
-                <a class="icon-box" title="{{ 'Refresh' | T }}" ng-click="image.refresh()"><i class="array-refresh"></i></a> -->
             </div>
             <div class="" st-table="displayedCollection" st-safe-src="image.imgData">
                 <table class="table table-striped table-hover">
                     <thead>
-                        <tr>
-                            <th class="i-num">No.</th>
-                            <th class="i-appname" st-sort="app_name">{{ 'Build Name' | T }}</th>
-                            <th class="i-version" st-sort="build_version">{{ 'Version' | T }}</th>
-                            <th class="i-md5">{{ 'MD5' | T }}</th>
-                            <th class="i-filesize">{{ 'File Size' | T }}</th>
-                            <th class="i-download-link">{{ 'Download Link' | T }}</th>
-                            <!-- <th class="i-location">{{ 'Location' | T }}</th> -->
-                            <th class="i-action">{{ 'Action' | T }}</th>
-                        </tr>
-                        <tr>
-                            <th></th>
-                            <th>
-                                <input st-search="app_name" placeholder="{{'Search by Name'|T}}" class="input-sm form-control" type="search" />
-                            </th>
-                            <th>
-                                <select class="input-sm form-control" st-input-event="change" st-search="build_version">
-        						<option value="">{{'All'|T}}</option>
-        						<option ng-repeat="row in image.imgData | unique:'build_version'" value="{{row.build_version}}">{{row.build_version}}</option>
-        					</select>
-                            </th>
-                            <th></th>
-                            <th></th>
-                            <th></th>
-                            <th></th>
-                            <th></th>
-                        </tr>
+                    <tr>
+                        <th class="i-num">No.</th>
+                        <th class="i-appname" st-sort="app_name">{{ 'Build Name' | T }}</th>
+                        <th class="i-version" st-sort="build_version">{{ 'Version' | T }}</th>
+                        <th class="i-md5">{{ 'MD5' | T }}</th>
+                        <th class="i-filesize">{{ 'File Size' | T }}</th>
+                        <th class="i-download-link">{{ 'Download Link' | T }}</th>
+                        <!-- <th class="i-location">{{ 'Location' | T }}</th> -->
+                        <th class="i-action">{{ 'Action' | T }}</th>
+                    </tr>
+                    <tr>
+                        <th></th>
+                        <th>
+                            <input st-search="app_name" placeholder="{{'Search by Name'|T}}"
+                                   class="input-sm form-control" type="search"/>
+                        </th>
+                        <th>
+                            <select class="input-sm form-control" st-input-event="change" st-search="build_version">
+                                <option value="">{{'All' | T}}</option>
+                                <option ng-repeat="row in image.imgData | unique:'build_version'"
+                                        value="{{row.build_version}}">{{row.build_version}}
+                                </option>
+                            </select>
+                        </th>
+                        <th></th>
+                        <th></th>
+                        <th></th>
+                        <th></th>
+                        <th></th>
+                    </tr>
                     </thead>
                     <tbody>
-                        <tr ng-repeat="row in displayedCollection">
-                            <td class="i-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
-                            <td>{{ row.app_name }}</td>
-                            <td>{{ row.build_version }}</td>
-                            <td><a class="name" ng-click="image.edit(row)">{{ row.md5_value }}</a></td>
-                            <td>{{ row.file_size }}</td>
-                            <td>{{ row.download_link }}</td>
-                            <!-- <td>{{ row.location}}</td> -->
-                            <td>
-                                <div class="btn-group">
-                                    <a ng-if="user_auth_data.image.add" class="icon-box" title="{{ 'Upload Build' | T }}" ng-click="image.uploadImage(row)"><i class="array-upload"></i></a>
-                                    <a ng-if="user_auth_data.image.system_update" class="icon-box" title="{{ 'System Update' | T }}" ng-click="image.systemUpdate(row)"><i class="array-refresh"></i></a>
-                                    <a ng-if="user_auth_data.image.delete" class="icon-box" title="{{ 'Delete' | T }}" ng-click="image.deleteImage(row)"><i class="array-delete"></i></a>
-                                </div>
-                            </td>
-                        </tr>
+                    <tr ng-repeat="row in displayedCollection">
+                        <td class="i-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
+                        <td>{{ row.app_name }}</td>
+                        <td>{{ row.build_version }}</td>
+                        <td><a class="name" ng-click="image.edit(row)">{{ row.md5_value }}</a></td>
+                        <td>{{ row.file_size }}</td>
+                        <td>{{ row.download_link }}</td>
+                        <!-- <td>{{ row.location}}</td> -->
+                        <td>
+                            <div class="btn-group">
+                                <a ng-if="user_auth_data.image.add" class="icon-box" title="{{ 'Upload Build' | T }}"
+                                   ng-click="image.uploadImage(row)"><i class="array-upload an-row-icon"></i></a>
+                                <a ng-if="user_auth_data.image.system_update" class="icon-box"
+                                   title="{{ 'System Update' | T }}" ng-click="image.systemUpdate(row)"><i
+                                    class="array-refresh an-row-icon"></i></a>
+                                <a ng-if="user_auth_data.image.delete" class="icon-box" title="{{ 'Delete' | T }}"
+                                   ng-click="image.deleteImage(row)"><i class="array-delete an-row-icon"></i></a>
+                            </div>
+                        </td>
+                    </tr>
                     </tbody>
                     <tfoot>
-                        <tr>
-                            <td colspan="8" class="text-center">
-                                <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)"></div>
-                            </td>
-                        </tr>
+                    <tr>
+                        <td colspan="8" class="text-center">
+                            <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5"
+                                 st-page-change="onPageChange(newPage)"></div>
+                        </td>
+                    </tr>
                     </tfoot>
                 </table>
             </div>
         </div>
     </div>
-
 </div>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/image/modal/image-add.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/image/modal/image-add.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/image/modal/image-add.html	(working copy)
@@ -2,7 +2,7 @@
 	<div class="modal-header">
 		<!-- <div class="title">{{ 'Add New Image' | T}}</div> -->
 		<button type="button" class="close" ng-click="imageAdd.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-		<h4 class="modal-title">{{ 'Add New Build' | T}}</h4>
+		<h6 class="modal-title">{{ 'Add New Build' | T}}</h6>
 	</div>
 	<div class="modal-body">
 		<form class="form-horizontal" verify-scope="tipStyle: 1" name="add">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/image/modal/image-edit.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/image/modal/image-edit.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/image/modal/image-edit.html	(working copy)
@@ -1,7 +1,7 @@
 <div class="">
     <div class="modal-header">
         <button type="button" class="close" ng-click="imageEdit.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4><i class="array-edit"></i>{{'Edit MD5' | T }}</h4>
+        <h6><i class="array-edit"></i>{{'Edit MD5' | T }}</h6>
     </div>
     <div class="modal-body">
         <form name="edit" verify-scope="tipStyle:1" class="form-horizontal">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/image/modal/image-upload.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/image/modal/image-upload.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/image/modal/image-upload.html	(working copy)
@@ -1,7 +1,7 @@
 <div class="">
 	<div class="modal-header">
 		<button type="button" class="close" ng-click="imageUpload.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-		<h4><i class="array-upload"></i>{{ 'Upload Build' | T}}</h4>
+		<h6><i class="array-upload"></i>{{ 'Upload Build' | T}}</h6>
 	</div>
 
 	<div class="modal-body">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/image/modal/system-update.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/image/modal/system-update.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/image/modal/system-update.html	(working copy)
@@ -1,7 +1,7 @@
 <div class="">
 	<div class="modal-header">
         <button type="button" class="close" ng-click="sysUpdate.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-		<h4><i class="array-refresh"></i>{{ 'System Update' | T}}</h4>
+		<h6><i class="array-refresh"></i>{{ 'System Update' | T}}</h6>
 
 	</div>
 	<div class="modal-body">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/login/login.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/login/login.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/login/login.html	(working copy)
@@ -1,55 +1,57 @@
 <div class="container array">
-     <div id="signin">
+    <div id="signin">
         <div class="row" style="height: 100%">
-            <div class="col-md-4 col-xs-4 login-left">
+            <div class="col-md-5 col-xs-5 login-left">
                 <div class="login-logo">
-                    <img src="./app/images/array_logo2.png" alt="Array Logo">
+                    <img src="./app/images/login/logo.png" alt="Array Networks" height="50px" width="150px">
                 </div>
                 <div class="login-text1">
-                    <span>AMP</span>
-                </div>
-                <div class="login-text2">
-                    <span>{{'Array Management Platform'|T}}</span>
+                    <span>{{'Array Management Platform' | T}}</span>
                 </div>
             </div>
-            <div class="col-md-8 col-xs-8 login-right">
+            <div class="col-md-7 col-xs-7 login-right">
                 <div class="text-center" style="color: #333;">
-                    <!-- <span>AMP Platform</span> -->
-                    <span>{{'WELCOME'|T}}</span>
+                    <span>{{'WELCOME' | T}}</span>
                 </div>
                 <div class="form-wrapper">
                     <form class="form-body" name="loginForm" novalidate method="post">
                         <div ng-if="!enable_passwd" class="form-group form-group-lg">
                             <i class="fa fa-arrayuser"></i>
-                            <input type="text" name="username" class="form-control" placeholder="{{'Username'|T}}" required autofocus ng-model="login.loginData.username">
+                            <input type="text" name="username" class="form-control" placeholder="{{'Username'|T}}"
+                                   required autofocus ng-model="login.loginData.username">
                             <div class="form-group form-group-lg has-error" ng-show="login.username_required">
-                                <p class="help-block">{{'Username is required.'|T}}</p>
+                                <p class="help-block">{{'Username is required.' | T}}</p>
                             </div>
                         </div>
                         <div ng-if="!enable_passwd" class="form-group form-group-lg">
                             <i class="fa fa-arraylock"></i>
-                            <input type="password" name="password" class="form-control" placeholder="{{'Password'|T}}" ng-model="login.loginData.password" required>
+                            <input type="password" name="password" class="form-control" placeholder="{{'Password'|T}}"
+                                   ng-model="login.loginData.password" required>
                             <div class="form-group form-group-lg has-error" ng-show="login.password_required">
-                                <p class="help-block">{{'Password is required.'|T}}</p>
+                                <p class="help-block">{{'Password is required.' | T}}</p>
                             </div>
                         </div>
                         <div ng-if="enable_passwd" class="form-group form-group-lg">
                             <i class="fa fa-arraylock"></i>
-                            <input type="password" name="enable_passwd" class="form-control" placeholder="{{'Enable Password'|T}}" ng-model="login.loginData.enable_password" required>
+                            <input type="password" name="enable_passwd" class="form-control"
+                                   placeholder="{{'Enable Password'|T}}" ng-model="login.loginData.enable_password"
+                                   required>
                             <div class="form-group form-group-lg has-error" ng-show="login.enable_password_required">
-                                <p class="help-block">{{'Enable password is required.'|T}}</p>
+                                <p class="help-block">{{'Enable password is required.' | T}}</p>
                             </div>
                         </div>
                         <input type="hidden" name="csrfmiddlewaretoken" value="KBTw4MBPOABt4FGY9Wt3LL4uJgHldgEt">
-                        <button type="submit" class="btn btn-primary btn-lg btn-block hive_enable_active" ng-click="login.submit(login.loginData)" style="margin-top: 25px;">{{'Sign in'|T}}</button>
+                        <button type="submit" class="btn btn-primary btn-lg btn-block hive_enable_active"
+                                ng-click="login.submit(login.loginData)" style="margin-top: 25px;">{{'Sign in' | T}}
+                        </button>
                         <div class="form-group form-group-lg has-error" ng-show="login.error">
-                            <p class="help-block">{{'Invalid Username or Password.'|T}}</p>
+                            <p class="help-block">{{'Invalid Username or Password.' | T}}</p>
                         </div>
                         <div class="form-group form-group-lg has-error" ng-show="login.enable_passwd_error">
-                            <p class="help-block">{{'Invalid Enable Password.'|T}}</p>
+                            <p class="help-block">{{'Invalid Enable Password.' | T}}</p>
                         </div>
                         <div class="form-group form-group-lg has-error" ng-show="login.license_expire_error">
-                            <p class="help-block">{{'License Has Been Expired.'|T}}</p>
+                            <p class="help-block">{{'License Has Been Expired.' | T}}</p>
                         </div>
                     </form>
                 </div>
@@ -69,32 +71,37 @@
         <form class="form-body" name="loginForm" novalidate method="post">
             <div ng-if="!enable_passwd" class="from-group">
                 <i class="fa array-user"></i>
-                <input type="text" name="username" class="form-control" placeholder="{{'Username'|T}}" required autofocus ng-model="login.loginData.username">
+                <input type="text" name="username" class="form-control" placeholder="{{'Username'|T}}" required
+                       autofocus ng-model="login.loginData.username">
                 <div class="form-group has-error" ng-show="login.username_required">
-                    <p class="help-block">{{'Username is required.'|T}}</p>
+                    <p class="help-block">{{'Username is required.' | T}}</p>
                 </div>
             </div>
             <div ng-if="!enable_passwd" class="form-group">
                 <i class="fa array-password"></i>
-                <input type="password" name="password" class="form-control" placeholder="{{'Password'|T}}" ng-model="login.loginData.password" required>
+                <input type="password" name="password" class="form-control" placeholder="{{'Password'|T}}"
+                       ng-model="login.loginData.password" required>
                 <div class="form-group has-error" ng-show="login.password_required">
-                    <p class="help-block">{{'Password is required.'|T}}</p>
+                    <p class="help-block">{{'Password is required.' | T}}</p>
                 </div>
             </div>
             <div ng-if="enable_passwd" class="form-group">
                 <i class="fa array-password"></i>
-                <input type="password" name="enable_passwd" class="form-control" placeholder="{{'Enable Password'|T}}" ng-model="login.loginData.enable_password" required>
+                <input type="password" name="enable_passwd" class="form-control" placeholder="{{'Enable Password'|T}}"
+                       ng-model="login.loginData.enable_password" required>
                 <div class="form-group has-error" ng-show="login.enable_password_required">
-                    <p class="help-block">{{'Enable password is required.'|T}}</p>
+                    <p class="help-block">{{'Enable password is required.' | T}}</p>
                 </div>
             </div>
             <input type="hidden" name="csrfmiddlewaretoken" value="KBTw4MBPOABt4FGY9Wt3LL4uJgHldgEt">
-            <button type="submit" class="btn btn-primary btn-block hive_enable_active" ng-click="login.submit(login.loginData)">{{'Sign in'|T}}</button>
+            <button type="submit" class="btn btn-primary btn-block hive_enable_active"
+                    ng-click="login.submit(login.loginData)">{{'Sign in' | T}}
+            </button>
             <div class="form-group form-group-lg has-error" ng-show="login.error">
-                <p class="help-block">{{'Invalid Username or Password.'|T}}</p>
+                <p class="help-block">{{'Invalid Username or Password.' | T}}</p>
             </div>
             <div class="form-group form-group-lg has-error" ng-show="login.enable_passwd_error">
-                <p class="help-block">{{'Invalid Enable Password.'|T}}</p>
+                <p class="help-block">{{'Invalid Enable Password.' | T}}</p>
             </div>
         </form>
     </div>
@@ -104,11 +111,3 @@
         </div>
     </div>
 </div>
-
-<style>
-  html {
-    /*overflow: hidden;*/
-  }
-</style>
-
-
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/main/navbar.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/main/navbar.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/main/navbar.html	(working copy)
@@ -7,28 +7,29 @@
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
             </button>
-            <a class="navbar-brand">
-                <img src="app/images/navbar/logo.png" alt="Array Logo" class="array">
-                <span class="oem oem-title" ng-controller="ampVersionCtrl">{{ 'Infosec Management Center' | T }} ({{ version }})</span>
-            </a>
-            <span class="title array" ng-controller="ampVersionCtrl">{{ 'Array Management Platform' | T }} ({{ version }})</span>
+            <span class="title array" ng-controller="ampVersionCtrl">{{ 'Array Management Platform' | T }}</span>
+<!--            <span class="title1 array" ng-controller="ampVersionCtrl">{{version}}</span>-->
         </div>
         <div class="collapse navbar-collapse" id="header-nav">
             <ul class="nav navbar-nav navbar-right" ng-controller="taskAndLogNotificationCtrl">
                 <li>
-                    <a ng-controller="EngineeringCtrl" ng-show="engineering_mode" ng-click="show_engineer_modal()" style="font-size: 21px; color: red;"><i title="{{'Engineering Mode'|T}}" class="fa fa-user-secret"></i></a>
+                    <a ng-controller="EngineeringCtrl" ng-show="engineering_mode" ng-click="show_engineer_modal()"
+                       style="font-size: 21px; color: red;"><i title="{{'Engineering Mode'|T}}"
+                                                               class="fa fa-user-secret"></i></a>
                 </li>
                 <li class="nav-item">
                     <a ng-click="showorHideDetail()">
                         <i title="{{ 'Task' | T }}" class="fa array-notify">
-                            <span class="badge" ng-show="task_notification_total" style="transform: scale(.6,.6);position: absolute;top: 22px; left: 20px; color:#ffffff;background-color: #d3163f; font-size: 15px">{{task_notification_total}}
+                            <span class="badge" ng-show="task_notification_total"
+                                  style="transform: scale(.6,.6);position: absolute;top: 22px; left: 20px; color:#ffffff;background-color: #d3163f; font-size: 15px">{{task_notification_total}}
                             </span>
                         </i>
                     </a>
                     <div ng-if="displayDetail" class="widget task-list">
                         <div class="widget-header">
-                            <i class="fa fa-tasks fa-fw"></i>&nbsp;{{'Task'|T}}
-                            <button type="button" class="btn btn-link btn-xs pull-right" ng-click="showorHideDetail()" style="height: 35px; padding: 0"><i class="fa fa-close"></i></button>
+                            <i class="fa fa-tasks fa-fw"></i>&nbsp;{{'Task' | T}}
+                            <button type="button" class="btn btn-link btn-xs pull-right" ng-click="showorHideDetail()"
+                                    style="height: 35px; padding: 0"><i class="fa fa-close"></i></button>
                         </div>
                         <div class="widget-body">
                             <div class="table-responsive">
@@ -42,30 +43,40 @@
                                     </tr>
                                     </thead>
                                     <tbody ng-if="!task_notification">
-                                        <tr><td colspan="4" class="text-center">{{'Loading...' | T }}</td></tr>
+                                    <tr>
+                                        <td colspan="4" class="text-center">{{'Loading...' | T }}</td>
+                                    </tr>
                                     </tbody>
                                     <tbody ng-if="task_notification && task_notification.length===0">
-                                        <tr><td colspan="4" class="text-center">{{'No data.' | T }}</td></tr>
+                                    <tr>
+                                        <td colspan="4" class="text-center">{{'No data.' | T }}</td>
+                                    </tr>
                                     </tbody>
                                     <tbody ng-if="task_notification.length>0">
-                                        <tr ng-repeat="note in task_notification | orderBy:'id':true">
-                                            <td>{{$index + 1}}</td>
-                                            <td class="task-text"><a ui-sref="index.task({'full_name' : note.full_name})" ng-click="" class="name" title="{{note.name}}">{{note.name}}</a></td>
-                                            <td class="task-text">{{note.type}}</td>
-                                            <td>
-                                                <span ng-if="note.state=='failed'"  title="{{note.description}}" style="color:#e02f44"><i class="array-failed"></i>&nbsp;{{'Failed'|T}}</span>
-                                                <span ng-if="note.state=='ongoing'" style="color:#327ab7;"><i class="array-ongoing"></i>&nbsp;{{'Ongoing'|T}}</span>
-                                                <span ng-if="note.state=='waiting'" style="color:#999999;"><i class="array-waiting"></i>&nbsp;{{'Waiting'|T}}</span>
-                                                <span ng-if="note.state=='done'" style="color:#5cb85c"><i class="array-done"></i>&nbsp;{{'Done'|T}}</span>
-                                            </td>
-                                        </tr>
+                                    <tr ng-repeat="note in task_notification | orderBy:'id':true">
+                                        <td>{{$index + 1}}</td>
+                                        <td class="task-text"><a ui-sref="index.task({'full_name' : note.full_name})"
+                                                                 ng-click="" class="name"
+                                                                 title="{{note.name}}">{{note.name}}</a></td>
+                                        <td class="task-text">{{note.type}}</td>
+                                        <td>
+                                            <span ng-if="note.state=='failed'" title="{{note.description}}"
+                                                  style="color:#e02f44"><i class="array-failed"></i>&nbsp;{{'Failed' | T}}</span>
+                                            <span ng-if="note.state=='ongoing'" style="color:#327ab7;"><i
+                                                class="array-ongoing"></i>&nbsp;{{'Ongoing' | T}}</span>
+                                            <span ng-if="note.state=='waiting'" style="color:#999999;"><i
+                                                class="array-waiting"></i>&nbsp;{{'Waiting' | T}}</span>
+                                            <span ng-if="note.state=='done'" style="color:#5cb85c"><i
+                                                class="array-done"></i>&nbsp;{{'Done' | T}}</span>
+                                        </td>
+                                    </tr>
                                     </tbody>
                                     <tfoot>
-                                        <tr>
-                                            <td colspan="4" class="text-center" style="text-align: center;">
-                                                <a ui-sref="index.task" ng-click="routeToTask()">{{ 'More Tasks' | T }}</a>
-                                            </td>
-                                        </tr>
+                                    <tr>
+                                        <td colspan="4" class="text-center" style="text-align: center;">
+                                            <a ui-sref="index.task" ng-click="routeToTask()">{{ 'More Tasks' | T }}</a>
+                                        </td>
+                                    </tr>
                                     </tfoot>
                                 </table>
                             </div>
@@ -73,91 +84,74 @@
                     </div>
                 </li>
                 <li uib-dropdown>
-                    <a href="" data-toggle="dropdown"><img title="{{'Notifications'|T}}" src="app/images/icon_message.png" style="width:25px; height: 22px;" ng-click="showNotification()"><span ng-if="log_notification.length > 0 && notification_reminder" class="red-point"></span></img></a>
+                    <a href="" data-toggle="dropdown"><img title="{{'Notifications'|T}}"
+                                                           src="app/images/icon_message.png"
+                                                           style="width:25px; height: 22px;"
+                                                           ng-click="showNotification()"><span
+                        ng-if="log_notification.length > 0 && notification_reminder" class="red-point"></span></img></a>
                     <ul class="dropdown-menu header-dropdown" style="width:440px;">
                         <li class="dropdown-header">
-                            <span style="font-size: large;">{{'Notifications'|T}}</span>
-                            <button ng-show="log_notification.length > 0" class="btn btn-link" style="float: right;" ng-click="more_notification()">{{ 'More' | T}}</button>
+                            <span style="font-size: large;">{{'Notifications' | T}}</span>
+                            <button ng-show="log_notification.length > 0" class="btn btn-link" style="float: right;"
+                                    ng-click="more_notification()">{{ 'More' | T}}
+                            </button>
                         </li>
                         <li class="divider"></li>
                         <li ng-if="log_notification.length == 0 " style="margin-left: 20px;">{{ "No data." | T}}</li>
-                        <li ng-if="log_notification.length > 0" style="margin-left: 20px;line-height: 25px;" ng-repeat="note in log_notification"><div style="width: 25px; display: inline-block;">{{$index + 1}}.</div> {{note.time}}: {{note.operation}}</li>
+                        <li ng-if="log_notification.length > 0" style="margin-left: 20px;line-height: 25px;"
+                            ng-repeat="note in log_notification">
+                            <div style="width: 25px; display: inline-block;">{{$index + 1}}.</div>
+                            {{note.time}}: {{note.operation}}
+                        </li>
                     </ul>
                 </li>
-                <!--<li class="nav-item">
-                    <a><i title="{{ 'Notifications' | T }}" class="fa array-notify"></i></a>
-                </li>-->
-                <li class="nav-item">
-                    <a ng-controller="DownloadCtrl" ng-click="userGuide()"><i title="{{ 'User Manual' | T }}" class="fa array-guide"></i></a>
-                </li>
                 <li>
-                    <a href="" ng-controller="TerminalCtrl" ng-click="connect()"><i title="{{ consoleTitle }}" class="fa array-terminal" style="font-size: 20px; color: #f5f5f5;"></i></a>
+                    <a href="" ng-controller="TerminalCtrl" ng-click="connect()"><i title="{{ consoleTitle }}"
+                                                                                    class="fa array-terminal"
+                                                                                    style="font-size: 20px; color: #f5f5f5;"></i></a>
                 </li>
                 <li ng-if="role_info['user_type'] != 'Device Admin'">
-                    <a href="" ng-controller="largeScreenCtrl" ng-click="largeScreen()"><i title="{{'Large Screen Display'|T }}" class="fa fa-television" style="font-size: 20px; color: #f5f5f5;"></i></a>
+                    <a href="" ng-controller="largeScreenCtrl" ng-click="largeScreen()"><i
+                        title="{{'Large Screen Display'|T }}" class="fa fa-television"
+                        style="font-size: 20px; color: #f5f5f5;"></i></a>
                 </li>
-                <li uib-dropdown ng-controller="ThemeSwitchingCtrl" ng-show="themes.length > 1">
-                    <a uib-dropdown-toggle><i title="{{'Theme'|T}}" class="fa fa-magic"></i></a>
-                    <ul class="dropdown-menu">
-                        <li ng-repeat="row in themes">
-                            <a href="" ng-click="switching(row.name)">{{row.verbose_name|T}} <i class="fa fa-check" ng-if="cur_theme == row.name"></i></a>
-                        </li>
-                        <!-- <li><a href="" ng-click="switching('dark')">{{'Dark'|T}} <i class="fa fa-check" ng-if="cur_theme == 'dark'"></i></a></li>
-                        <li class="divider"></li>
-                        <li><a href="" ng-click="switching('bright')">{{'Bright'|T}} <i class="fa fa-check" ng-if="cur_theme == 'bright'"></i></a></li>
-                        <li class="divider"></li>
-                        <li><a href="" ng-click="switching('oem')">{{'OEM'|T}} <i class="fa fa-check" ng-if="cur_theme == 'oem'"></i></a></li> -->
-                    </ul>
-                </li>
-                <li uib-dropdown ng-controller="LanguageSwitchingCtrl" ng-show="langs.length >= 1">
-                    <a uib-dropdown-toggle><i title="{{ 'Language' | T }}" class="fa array-lang"></i></a>
-                    <ul class="dropdown-menu">
-                        <li ng-repeat="row in langs">
-                            <a href="" ng-click="switching(row.name)">{{row.verbose_name|T}} <i class="fa fa-check" ng-if="cur_lang == row.name"></i></a>
-                        </li>
-                        <!-- <li><a href="" ng-click="switching('en')">English <i class="fa fa-check" ng-if="cur_lang == 'en'"></i></a></li>
-                        <li class="divider"></li>
-                        <li><a href="" ng-click="switching('zh-cn')">简体中文 <i class="fa fa-check" ng-if="cur_lang == 'zh-cn'"></i></a></li> -->
-                    </ul>
-                </li>
-                <!-- <li class="nav-item">
-                    <a><i title="{{ 'Download' | T }}" class="fa array-download"></i></a>
-                </li> -->
                 <li>
-                    <a href="" ng-controller="SaveConfigCtrl" ng-click="saveConfiguration()"><i title="{{'Save Configurations' | T}}" class="fa array-save"></i></a>
+                    <a href="" ng-controller="SaveConfigCtrl" ng-click="saveConfiguration()"><i
+                        title="{{'Save Configurations' | T}}" class="fa array-save"></i></a>
                 </li>
                 <li class="nav-item" uib-dropdown>
                     <a href="" uib-dropdown-toggle><i title="{{ 'Account' | T }}" class="fa array-profile"></i></a>
                     <ul class="dropdown-menu">
-                        <li class="dropdown-header" ng-controller="currentUserCtrl">{{ user }} ({{ role_info['user_type'] }})</li>
+                        <li class="dropdown-header" ng-controller="currentUserCtrl">{{ user }}
+                            ({{ role_info['user_type'] }})
+                        </li>
                         <li class="divider"></li>
                         <li class="link">
+                            <a ng-controller="DownloadCtrl" ng-click="userGuide()">
+                                <i title="{{ 'User Manual' | T }}" class="fa fa-download"></i> User Manual
+                            </a>
+                        </li>
+                        <!-- ToDo: Disabling theming for now, will bring back later-->
+<!--                        <li uib-dropdown ng-controller="ThemeSwitchingCtrl" ng-show="themes.length > 1">-->
+<!--                            <a uib-dropdown-toggle><i title="{{'Theme'|T}}" class="fa fa-magic"></i></a>-->
+<!--                            <ul class="dropdown-menu">-->
+<!--                                <li ng-repeat="row in themes">-->
+<!--                                    <a href="" ng-click="switching(row.name)">{{row.verbose_name | T}} <i-->
+<!--                                        class="fa fa-check"-->
+<!--                                        ng-if="cur_theme == row.name"></i>Switch</a>-->
+<!--                                </li>-->
+<!--                            </ul>-->
+<!--                        </li>-->
+                        <li class="link">
                             <a title="Logout" href="" ng-controller="ManualLogoutCtrl" ng-click="logout()">
                                 <i class="fa fa-power-off"></i>
-                                <span class="module-item-name">{{'Logout'|T}}</span>
+                                <span class="module-item-name"> {{'Logout' | T}}</span>
                             </a>
                         </li>
                     </ul>
                 </li>
             </ul>
         </div>
-        <!-- <form class="navbar-form navbar-right" id="searchForm" ng-controller="SearchCtrl">
-            <div class="form-group">
-                <input type="text" class="form-control" placeholder="Search" ng-keyup="inSearch($event)" ng-model="searchKey">
-            </div>
-            <div uib-dropdown>
-                <a uib-dropdown-toggle>
-                    <i class="search-btn fa fa-search" id="searchIron" ng-click="search()"></i>
-                </a>
-                <ul uib-dropdown-menu class="dropdown-menu">
-                    <li ng-if="searchResult.length == 0">{{ 'No Match' | T }}</li>
-                    <li ng-if="saerchResult.length > 0" ng-repeat="row in searchResult">
-                        <a href="{{row.url}}" target="_self" ng-click="jump(row.url)">{{ row.title }}</a>
-                        <a href="#" class="hit" ng-bind-html="row.highlight"></a>
-                    </li>
-                </ul>
-            </div>
-        </form> -->
     </div>
 </nav>
 
@@ -172,22 +166,22 @@
 </div>
 
 <style>
-html {
-    overflow-y: auto;
-}
-.red-point{
-    position: relative;
-}
+    html {
+        overflow-y: auto;
+    }
 
-.red-point::before{
-    content: " ";
-    border: 5px solid red;
-    border-radius: 10px;
-    position: absolute;
-    z-index: 1000;
-    right: 0%;
-    margin-right: -4px;
-    margin-top: -1px;
-}
-</style>
+    .red-point {
+        position: relative;
+    }
 
+    .red-point::before {
+        content: " ";
+        border: 5px solid red;
+        border-radius: 10px;
+        position: absolute;
+        z-index: 1000;
+        right: 0;
+        margin-right: -4px;
+        margin-top: -1px;
+    }
+</style>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/main/profile.js
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/main/profile.js	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/main/profile.js	(working copy)
@@ -2,52 +2,38 @@
     .module('cmApp')
     .constant('CMSettings', {
         'app': 'AMP',
-        'company_name':[
-            {
-                'name': 'Beijing Array Networks Co., Ltd.'
-            }, //first one as company name
+        //first one as default
+        'company_name': [
             {
                 'name': 'Array Networks, Inc.'
-            }
-        ],
-        'manual':[
-            {
-                'lang': 'en',
-                'link': {
-                    'user_guide': '/app/app/docs/Array_AMP_User_Guide_3_5_cn.pdf'
-                }
-            },
-            {
-                'lang': 'zh-cn',
-                'link': {
-                    'user_guide': '/app/app/docs/Array_AMP_User_Guide_3_5_cn.pdf'
-                }
             },
+        ],
+        'manual': [
             {
                 'lang': 'en',
                 'link': {
-                    'user_guide': '/app/app/docs/Array_AMP_User_Guide_3_2_1_en.pdf'
+                    'user_guide': '/app/app/docs/AMP_User_Guide_3.7_en.pdf'
                 }
             },
         ],
-        'language':[
+        'language': [
             {
                 'name': 'en',
                 'verbose_name': 'English'
-            }, //first one as default language
+            },
             {
                 'name': 'zh-cn',
-                'verbose_name': '简体中文'           
+                'verbose_name': '简体中文'
             }
         ],
-        'theme':[
-            {
-                'name': 'dark',
-                'verbose_name': 'Dark'   
-            }, //first one as default theme
+        'theme': [
             {
                 'name': 'bright',
-                'verbose_name': 'Bright'                  
-            }
+                'verbose_name': 'Bright'
+            },
+            {
+                'name': 'dark',
+                'verbose_name': 'Dark'
+            },
         ],
     });
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/main/sidebar.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/main/sidebar.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/main/sidebar.html	(working copy)
@@ -1,7 +1,7 @@
 <ul class="sidebar mainmenu">
     <i class="fa fa-outdent" id="sidebarToggle" ng-click="sidebar.show_or_hide()"></i>
     <li ng-repeat="module in sidebar.main" ng-if="module.show">
-        <span class="module-header">{{ module.title|T }}</span>
+<!--        <span class="module-header">{{ module.title|T }}</span>-->
         <div class="module-body">
             <ul>
                 <li ng-repeat="element in module.elements" ng-if="element.show" ng-class="{ 'has-submenu': element.submenu.state, 'no-submenu': !element.submenu.state, active:root_menu_active(element.url_prefix)}">
@@ -27,7 +27,7 @@
         </div>
     </li>
     <li ng-repeat="module in sidebar.extensions" ng-if="module.show">
-        <span class="module-header">{{ module.title|T }}</span>
+<!--        <span class="module-header">{{ module.title|T }}</span>-->
         <div class="module-body">
             <ul>
                 <li ng-repeat="element in module.elements" ng-if="element.show" ng-class="{ 'has-submenu': element.submenu.state, 'no-submenu': !element.submenu.state, active:root_menu_active(element.url_prefix)}">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/notification/channel/channel.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/notification/channel/channel.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/notification/channel/channel.html	(working copy)
@@ -1,78 +1,82 @@
-<div class="row">
-    <div class="col-lg-12">
-        <div class="widget">
-            <div class="widget-header">
-                <span>{{ 'Notification Channel' | T }}</span>
-            </div>
-            <div class="table-toolbar">
-                <div class="btn-group">
-                    <button class="btn btn-link" title="{{ 'Refresh Channel' | T }}" ng-click="notificationChannel.refresh()"><i class="fa fa-refresh"></i></button>
-                    <button class="btn btn-link " title="{{'New Channel'|T}}" ng-click="notificationChannel.add()"><i class="fa fa-plus-circle"></i></button>
-                </div>
-            </div>
-            <div class="table-wrapper" st-table="displayedCollection" st-safe-src="notificationChannel.channelList">
-                <table class="table table-striped table-hover">
-                    <thead>
-                        <tr>
-                            <th class="v-num">No.</th>
-                            <th class="d-name">{{ 'Channel Name' | T }}</th>
-                            <th class="d-type">{{ 'Channel Type' | T }}</th>
-                            <th class="d-default">{{ 'Default' | T }}</th>
-                            <th class="d-service">{{ 'Action' | T }}</th>
-                        </tr>
-                        <tr>
-                            <th></th>
-                            <th>
-                                <input st-search="name" placeholder="{{'Search by Channel Name'|T}}" class="input-sm form-control" type="text" />
-                            </th>
-                            <th>
-                                <select class="input-sm form-control" st-search="type">
-                                    <option value="">{{'All'|T}}</option>
-                                    <!-- <option value="dingding">{{ 'DingDing' | T}}</option>
-                                    <option value="LINE">{{ 'LINE' | T}}</option> -->
-                                    <option value="email">{{ 'Email' | T}}</option>
-                                    <option value="webhook">{{ 'webhook' | T}}</option>
-                                </select>
-                            </th>
-                            <th></th>
-                            <th></th>
-                        </tr>
-                    </thead>
-                    <tbody ng-if="!notificationChannel.loading">
-                        <tr ng-repeat="(num, item) in displayedCollection">
-                            <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
-                            <td style="cursor: pointer;" ui-sref="index.notification.channel.detail({id: item.id, name: item.name})">
-                                <a class="name">{{ item.name }}</a>
-                            </td>
-                            <td>{{ notificationChannel.parseChannelType(item.type) | T}}</td>
-                            <td>
-                                <div ng-show="item.is_default">
-                                    <i style="color:#5cb85c" class="fa fa-check-square"></i>
-                                </div>
-                                <div ng-hide="item.is_default">
-                                    <i style="color:#8e8e8e" class="fa fa-minus-square"></i>
-                                </div>
-                            </td>
-                            <td>
-                                <a title="{{'Delete'|T}}" class="" ng-click="notificationChannel.delete(item)">
-                                    <i class="fa fa-times-circle"></i>
-                                </a>
-                            </td>
-                        </tr>
-                        <tr ng-if="displayedCollection.length == 0">
-                            <td colspan="5" class="text-center">{{ 'You do not have any notification channels.' | T }}</td>
-                        </tr>
-                    </tbody>
-                    <tfoot>
-                        <tr>
-                            <td colspan="7" class="text-center">
-                                <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="10" st-page-change="onPageChange(newPage)" st-template="app/modules/common/templates/page.html"></div>
-                            </td>
-                        </tr>
-                    </tfoot>
-                </table>
+<div class="col-lg-12">
+    <div class="widget">
+        <div class="widget-header">
+            <span class="tab-header-1">{{ 'Notification Channel' | T }}</span>
+        </div>
+        <div class="table-toolbar">
+            <div class="btn-group">
+                <button class="btn btn-link" title="{{ 'Refresh Channel' | T }}"
+                        ng-click="notificationChannel.refresh()"><i class="fa fa-refresh an-tab-icon"></i></button>
+                <button class="btn btn-link " title="{{'New Channel'|T}}" ng-click="notificationChannel.add()"><i
+                    class="fa fa-plus-circle an-tab-icon"></i></button>
             </div>
-            <div style="text-align: center" ng-if="notificationChannel.loading"><img src="app/images/loading.gif"></div>
         </div>
+        <div class="table-wrapper" st-table="displayedCollection" st-safe-src="notificationChannel.channelList">
+            <table class="table table-striped table-hover">
+                <thead>
+                <tr>
+                    <th class="v-num">No.</th>
+                    <th class="d-name">{{ 'Channel Name' | T }}</th>
+                    <th class="d-type">{{ 'Channel Type' | T }}</th>
+                    <th class="d-default">{{ 'Default' | T }}</th>
+                    <th class="d-service">{{ 'Action' | T }}</th>
+                </tr>
+                <tr>
+                    <th></th>
+                    <th>
+                        <input st-search="name" placeholder="{{'Search by Channel Name'|T}}"
+                               class="input-sm form-control" type="text"/>
+                    </th>
+                    <th>
+                        <select class="input-sm form-control" st-search="type">
+                            <option value="">{{'All' | T}}</option>
+                            <!-- <option value="dingding">{{ 'DingDing' | T}}</option>
+                            <option value="LINE">{{ 'LINE' | T}}</option> -->
+                            <option value="email">{{ 'Email' | T}}</option>
+                            <option value="webhook">{{ 'webhook' | T}}</option>
+                        </select>
+                    </th>
+                    <th></th>
+                    <th></th>
+                </tr>
+                </thead>
+                <tbody ng-if="!notificationChannel.loading">
+                <tr ng-repeat="(num, item) in displayedCollection">
+                    <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
+                    <td style="cursor: pointer;"
+                        ui-sref="index.notification.channel.detail({id: item.id, name: item.name})">
+                        <a class="name">{{ item.name }}</a>
+                    </td>
+                    <td>{{ notificationChannel.parseChannelType(item.type) | T}}</td>
+                    <td>
+                        <div ng-show="item.is_default">
+                            <i style="color:#5cb85c" class="fa fa-check-square"></i>
+                        </div>
+                        <div ng-hide="item.is_default">
+                            <i style="color:#8e8e8e" class="fa fa-minus-square"></i>
+                        </div>
+                    </td>
+                    <td>
+                        <a title="{{'Delete'|T}}" class="" ng-click="notificationChannel.delete(item)">
+                            <i class="fa fa-times-circle an-row-icon"></i>
+                        </a>
+                    </td>
+                </tr>
+                <tr ng-if="displayedCollection.length == 0">
+                    <td colspan="5" class="text-center">{{ 'You do not have any notification channels.' | T }}</td>
+                </tr>
+                </tbody>
+                <tfoot>
+                <tr>
+                    <td colspan="7" class="text-center">
+                        <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="10"
+                             st-page-change="onPageChange(newPage)"
+                             st-template="app/modules/common/templates/page.html"></div>
+                    </td>
+                </tr>
+                </tfoot>
+            </table>
+        </div>
+        <div style="text-align: center" ng-if="notificationChannel.loading"><img src="app/images/loading.gif"></div>
     </div>
-</div>
\ No newline at end of file
+</div>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/notification/notification.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/notification/notification.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/notification/notification.html	(working copy)
@@ -2,15 +2,17 @@
     <div class="col-md-12">
         <ul class="nav nav-tabs">
             <li role="presentation" ng-class="{ active: url_contain('/notification/channel') }">
-                <a ui-sref="index.notification.channel">{{ 'Notification Channel' | T }}</a>
+                <a ui-sref="index.notification.channel"><span class="tab-header">{{ 'Notification Channel' | T }}</span></a>
             </li>
             <li role="presentation" ng-class="{ active: url_contain('/notification/setting') }">
-                <a ui-sref="index.notification.setting.mail">{{ 'Notification Setting' | T }}</a>
+                <a ui-sref="index.notification.setting.mail"><span class="tab-header">{{ 'Notification Setting' | T
+                    }}</span></a>
             </li>
         </ul>
     </div>
-</div>
-<div class="">
-    <div class="" ng-show="url_contain('/notification/channel')" ui-view="channel"></div>
-    <div class="" ng-show="url_contain('/notification/setting')" ui-view="setting"></div>
+
+    <div class="content-wrapper">
+        <div class="" ng-show="url_contain('/notification/channel')" ui-view="channel"></div>
+        <div class="" ng-show="url_contain('/notification/setting')" ui-view="setting"></div>
+    </div>
 </div>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/notification/setting/mail.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/notification/setting/mail.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/notification/setting/mail.html	(working copy)
@@ -1,70 +1,66 @@
-<div>
-    <form class="form-horizontal" name="mailform" verify-scope="tipStyle: 1" unsaved-warning-form>
-        <div class="form-group">
-            <label class="control-label col-md-3">{{ 'SMTP Enable' | T}}</label>
-            <div class="col-md-6">
-                <input bs-switch class="switch" ng-model="mailSetting.mail_server_info.enabled" type="checkbox" switch-active="true" resettable>
-            </div>
-        </div>
-        <div class="form-group">
-            <label class="control-label col-md-3">{{ 'SMTP Server' | T}}</label>
-            <div class="col-md-6">
-                <input ng-verify type="text" class="form-control" name="ip" ng-model="mailSetting.mail_server_info.host" maxlength="64" resettable>
-            </div>
-        </div>
-        <div class="form-group">
-            <label class="control-label col-md-3">{{ 'SMTP Port' | T}}</label>
-            <div class="col-md-6">
-                <input ng-verify type="number" class="form-control" name="port" ng-model="mailSetting.mail_server_info.port" max="65535" min="1" resettable>
-            </div>
-        </div>
-        <div class="form-group">
-            <label class="control-label col-md-3">{{ 'Username' | T}}</label>
-            <div class="col-md-6">
-                <input ng-verify type="text" class="form-control" name="user" ng-model="mailSetting.mail_server_info.user" resettable>
-            </div>
-        </div>
-        <div class="form-group">
-            <label class="control-label col-md-3">{{ 'Password' | T}}</label>
-            <div class="col-md-6">
-                <input ng-verify type="password" class="form-control" name="password" ng-model="mailSetting.mail_server_info.password" maxlength="64" resettable>
-            </div>
-        </div>
-        <div class="form-group">
-            <label class="control-label col-md-3">{{ 'Email Sender Address' | T}}</label>
-            <div class="col-md-6">
-                <input ng-verify type="email" class="form-control" name="sender" ng-model="mailSetting.mail_server_info.from_address" resettable>
-            </div>
-        </div>
-        <div class="form-group">
-            <label class="control-label col-md-3">{{ 'Email Sender Name' | T}}</label>
-            <div class="col-md-6">
-                <input ng-verify type="text" class="form-control" name="name" ng-model="mailSetting.mail_server_info.from_name" resettable>
-            </div>
-        </div>
-        <!-- <div class="form-group">
-            <label class="control-label col-md-3">{{ 'Ehlo Identity' | T}}</label>
-            <div class="col-md-6">
-                <input type="text" class="form-control" name="identity" ng-model="mailSetting.mail_server_info.ehlo_identity" resettable>
-            </div>
-        </div> -->
-        <!-- <div class="form-group">
-            <label class="control-label col-md-3">{{ 'Skip Verify' | T}}</label>
-            <div class="col-md-6">
-                <input bs-switch class="switch" ng-model="mailSetting.mail_server_info.skip_verify" type="checkbox" switch-active="true" resettable>
-            </div>
-        </div> -->
-        <!-- <div class="form-group">
-            <div class="col-md-offset-3 col-md-6">
-                <span class="msg">{{mailSetting.failed}}</span>
-            </div>
-        </div> -->
-        <div class="form-group col-md-offset-3">
-            <div class="col-md-offset-3 col-md-6">
-                <button ng-show="mailform.$dirty" class="btn btn-primary" ng-verify="control:'mailform'" ng-click="mailSetting.submit()">{{ 'Save Changes' | T}}</button>
-                <button ng-show="mailform.$dirty" type="reset" class="btn btn-default btn-cancel" ng-click="mailform.$dirty=false;mailSetting.cancel()">{{'Cancel'|T}}</button>
-                <!-- <button class="btn btn-success" ng-verify="control:'mailform'" ng-click="mailSetting.test()">{{ 'Send Test Mail' | T}}</button> -->
-            </div>
-        </div>
-    </form>
-</div>
\ No newline at end of file
+<div class="col-md-12">
+    <div class="widget">
+        <form class="form-horizontal" name="mailform" verify-scope="tipStyle: 1" unsaved-warning-form>
+            <div class="form-group">
+                <label class="control-label col-md-3">{{ 'SMTP Enable' | T}}</label>
+                <div class="col-md-6">
+                    <input bs-switch class="switch" ng-model="mailSetting.mail_server_info.enabled" type="checkbox"
+                           switch-active="true" resettable>
+                </div>
+            </div>
+            <div class="form-group">
+                <label class="control-label col-md-3">{{ 'SMTP Server' | T}}</label>
+                <div class="col-md-6">
+                    <input ng-verify type="text" class="form-control" name="ip"
+                           ng-model="mailSetting.mail_server_info.host"
+                           maxlength="64" resettable>
+                </div>
+            </div>
+            <div class="form-group">
+                <label class="control-label col-md-3">{{ 'SMTP Port' | T}}</label>
+                <div class="col-md-6">
+                    <input ng-verify type="number" class="form-control" name="port"
+                           ng-model="mailSetting.mail_server_info.port" max="65535" min="1" resettable>
+                </div>
+            </div>
+            <div class="form-group">
+                <label class="control-label col-md-3">{{ 'Username' | T}}</label>
+                <div class="col-md-6">
+                    <input ng-verify type="text" class="form-control" name="user"
+                           ng-model="mailSetting.mail_server_info.user" resettable>
+                </div>
+            </div>
+            <div class="form-group">
+                <label class="control-label col-md-3">{{ 'Password' | T}}</label>
+                <div class="col-md-6">
+                    <input ng-verify type="password" class="form-control" name="password"
+                           ng-model="mailSetting.mail_server_info.password" maxlength="64" resettable>
+                </div>
+            </div>
+            <div class="form-group">
+                <label class="control-label col-md-3">{{ 'Email Sender Address' | T}}</label>
+                <div class="col-md-6">
+                    <input ng-verify type="email" class="form-control" name="sender"
+                           ng-model="mailSetting.mail_server_info.from_address" resettable>
+                </div>
+            </div>
+            <div class="form-group">
+                <label class="control-label col-md-3">{{ 'Email Sender Name' | T}}</label>
+                <div class="col-md-6">
+                    <input ng-verify type="text" class="form-control" name="name"
+                           ng-model="mailSetting.mail_server_info.from_name" resettable>
+                </div>
+            </div>
+            <div class="form-group col-md-offset-3">
+                <div class="col-md-offset-3 col-md-6">
+                    <button ng-show="mailform.$dirty" class="btn btn-primary" ng-verify="control:'mailform'"
+                            ng-click="mailSetting.submit()">{{ 'Save Changes' | T}}
+                    </button>
+                    <button ng-show="mailform.$dirty" type="reset" class="btn btn-default btn-cancel"
+                            ng-click="mailform.$dirty=false;mailSetting.cancel()">{{'Cancel' | T}}
+                    </button>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/notification/setting/setting.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/notification/setting/setting.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/notification/setting/setting.html	(working copy)
@@ -1,13 +1,12 @@
-<div class="row">
-    <div class="col-md-12">
-        <ul class="nav nav-pills">
-            <li ng-class="{ active: url_contain('/notification/setting/mail') }">
-                <a ui-sref="index.notification.setting.mail">{{ 'SMTP Setting' | T }}</a>
-            </li>
-        </ul>
-    </div>
+<div class="col-md-12">
+    <ul class="nav nav-pills">
+        <li ng-class="{ active: url_contain('/notification/setting/mail') }">
+            <a ui-sref="index.notification.setting.mail"><span class="tab-header">{{ 'SMTP Setting' | T
+                }}</span></a>
+        </li>
+    </ul>
 </div>
-<div class="">
+
+<div class="content-wrapper">
     <div class="" ng-show="url_contain('/notification/setting/mail')" ui-view="mail"></div>
 </div>
-
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/slb_topology/real_service/basic.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/slb_topology/real_service/basic.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/slb_topology/real_service/basic.html	(working copy)
@@ -1,156 +1,186 @@
-<div class="row">
-    <div class="col-md-12 select-list">
-        <div class="widget">
-            <div class="widget-header">
-                <span>{{'Real Service' | T}}</span>
+<div class="col-md-12 select-list">
+    <div class="widget">
+        <div class="widget-header">
+            <span class="tab-header-1">{{'Real Service' | T}}</span>
+        </div>
+        <table>
+            <thead>
+            <tr>
+                <th style="padding: 5px 10px;"><input type="text" placeholder="{{'Exact Match Search by IP' | T}}"
+                                                      class="input-sm form-control"
+                                                      ng-model="RealServiceBasic.ipAddress"
+                                                      ng-change="RealServiceBasic.changeIP()"
+                                                      ng-disabled="RealServiceBasic.loading"></th>
+                <th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
+                <th style="padding: 5px 10px;">
+                    <select class="input-sm form-control" ng-model="RealServiceBasic.blockName"
+                            ng-change="RealServiceBasic.ipAddress = ''" ng-disabled="RealServiceBasic.loading">
+                        <option value=''>{{'Please Select Block' | T}}</option>
+                        <option ng-repeat="block in RealServiceBasic.blocks" value="{{block}}">{{ block }}</option>
+                    </select>
+                </th>
+                <th style="padding: 5px 10px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
+                <th style="padding: 5px 10px;">
+                    <select class="input-sm form-control" ng-model="RealServiceBasic.deviceName"
+                            ng-change="RealServiceBasic.ipAddress = ''" ng-disabled="RealServiceBasic.loading">
+                        <option value=''>{{'Please Select Device' | T}}</option>
+                        <option ng-repeat="device in RealServiceBasic.deviceList" value="{{device}}">{{ device }}
+                        </option>
+                    </select>
+                </th>
+                <th style="padding: 5px 10px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
+                <th style="padding: 5px 10px;">
+                    <button type="submit" class="btn btn-primary" ng-click="RealServiceBasic.refresh()"
+                            ng-disabled="RealServiceBasic.loading || (RealServiceBasic.blockName=='' && RealServiceBasic.ipAddress=='' && RealServiceBasic.deviceName=='')">
+                        {{'Search' | T}}
+                    </button>
+                </th>
+            </tr>
+            </thead>
+        </table>
+        <div class="table-toolbar">
+            <div class="row">
+                <div class="btn-group ">
+                    <!-- <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="RealServiceBasic.refresh()"><i class="fa fa-refresh"></i></button> -->
+                    <!-- <button ng-if="RealServiceBasic.root" class="btn btn-link" title="{{ 'Block' | T }}" ng-click="RealServiceBasic.block()"><i class="fa fa-tags"></i></button> -->
+                    <button ng-if="user_auth_data.topology.slb_topology.enable_rs" class="btn btn-link"
+                            title="{{ 'Enable' | T }}" ng-disabled="RealServiceBasic.selected()"
+                            ng-click="RealServiceBasic.enable(true)"><span class="fa fa-play an-tab-icon"></span></button>
+                    <button ng-if="user_auth_data.topology.slb_topology.disable_rs" class="btn btn-link"
+                            title="{{ 'Disable' | T }}" ng-disabled="RealServiceBasic.selected()"
+                            ng-click="RealServiceBasic.enable(false)"><span class="fa fa-stop an-tab-icon"></span></button>
+                    <button ng-if="user_auth_data.topology.slb_topology.edit_rs_weight" class="btn btn-link"
+                            title="{{ 'Weight' | T }}" ng-disabled="RealServiceBasic.selected()"
+                            ng-click="RealServiceBasic.weight()"><span class="fa fa-gavel an-tab-icon"></span></button>
+                </div>
             </div>
-            <table>
+        </div>
+        <div class="table-wrapper">
+            <table st-table="displayedCollection" st-safe-src="RealServiceBasic.serviceList"
+                   st-set-filter="realServiceFilter" class="table table-hover table-striped">
                 <thead>
-                    <tr>
-                        <th style="padding: 5px 10px;"><input type="text" placeholder="{{'Exact Match Search by IP' | T}}" class="input-sm form-control" ng-model="RealServiceBasic.ipAddress" ng-change="RealServiceBasic.changeIP()" ng-disabled="RealServiceBasic.loading"></th>
-                        <th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
-                        <th style="padding: 5px 10px;">
-                            <select class="input-sm form-control" ng-model="RealServiceBasic.blockName" ng-change="RealServiceBasic.ipAddress = ''" ng-disabled="RealServiceBasic.loading">
-                                <option value=''>{{'Please Select Block' | T}}</option>
-                                <option ng-repeat="block in RealServiceBasic.blocks" value="{{block}}">{{ block }}</option>
-                            </select>
-                        </th>
-                        <th style="padding: 5px 10px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
-                        <th style="padding: 5px 10px;">
-                            <select class="input-sm form-control" ng-model="RealServiceBasic.deviceName" ng-change="RealServiceBasic.ipAddress = ''" ng-disabled="RealServiceBasic.loading">
-                                <option value=''>{{'Please Select Device' | T}}</option>
-                                <option ng-repeat="device in RealServiceBasic.deviceList" value="{{device}}">{{ device }}</option>
-                            </select>
-                        </th>
-                        <th style="padding: 5px 10px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
-                        <th style="padding: 5px 10px;"><button type="submit" class="btn btn-primary" ng-click="RealServiceBasic.refresh()" ng-disabled="RealServiceBasic.loading || (RealServiceBasic.blockName=='' && RealServiceBasic.ipAddress=='' && RealServiceBasic.deviceName=='')">{{'Search' | T}}</button></th>
-                    </tr>
+                <tr>
+                    <th></th>
+                    <th class="d-num">No.</th>
+                    <th class="v-name">{{ 'Service Name' | T }}</th>
+                    <th class="v-type">{{ 'Block' | T }}</th>
+                    <th class="v-device">{{ 'Device Name' | T }}</th>
+                    <th class="d-name">{{ 'Device Group' | T }}</th>
+                    <th class="v-ip">{{ 'IP Address' | T }}</th>
+                    <th class="v-port">{{ 'Port' | T }}</th>
+                    <th class="v-enable">{{ 'Enable' | T }}</th>
+                    <th class="v-upDown">{{ 'UP/DOWN' | T }}</th>
+                    <th class="v-goup">{{ 'Group Weight' | T }}</th>
+                    <th class="d-max">{{ 'Max Connection' | T }}</th>
+                    <th class="d-up">{{ 'Up Check' | T }}</th>
+                    <th class="d-down">{{ 'Down Check' | T }}</th>
+                </tr>
+                <tr>
+                    <th>
+                        <input type="checkbox" ng-checked="RealServiceBasic.all"
+                               ng-click="RealServiceBasic.selectAll()"/>
+                    </th>
+                    <th></th>
+                    <th>
+                        <input st-search="service_name" placeholder="{{'Search by Service Name'|T}}"
+                               class="input-sm form-control" type="text"/>
+                    </th>
+                    <th>
+                        <!-- <select class="input-sm form-control" st-input-event="change" st-search="block">
+                            <option value="">{{'All'|T}}</option>
+                            <option ng-repeat="block in RealServiceBasic.blocks" value="{{block}}">{{ block }}</option>
+                        </select> -->
+                    </th>
+                    <th></th>
+                    <th></th>
+                    <!-- <th ng-if="!RealServiceBasic.loading">
+                        <st-select-multiple collection="RealServiceBasic.serviceList" predicate="device_name"></st-select-multiple>
+                    </th>
+                    <th ng-if="!RealServiceBasic.loading">
+                        <st-select-multiple collection="RealServiceBasic.serviceList" predicate="device_group"></st-select-multiple>
+                    </th> -->
+                    <th>
+                        <!-- <input st-search="ip" placeholder="{{'Exact Match Search by IP'|T}}" class="input-sm form-control" type="text" /> -->
+                    </th>
+                    <th></th>
+                    <th></th>
+                    <th></th>
+                    <th>
+                        <input st-search="group_name" placeholder="{{'Search by Group Name'|T}}"
+                               class="input-sm form-control" type="text"/>
+                    </th>
+                    <th></th>
+                    <th></th>
+                    <th></th>
+                </tr>
                 </thead>
+                <tbody ng-if="!RealServiceBasic.loading">
+                <tr st-select-row="item" st-select-mode="multiple" ng-repeat="(num, item) in displayedCollection">
+                    <td>
+                        <input type="checkbox" ng-checked="item.isSelected"/>
+                    </td>
+                    <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
+                    <td style="cursor: pointer;" ng-click="RealServiceBasic.detail(item)"><a
+                        class="name">{{ item.service_name }}</a></td>
+                    <td>
+                        <span class="label label-success" ng-repeat="block in item.blocks"
+                              style="margin-right: 4px">{{ block }}</span>
+                    </td>
+                    <td style="cursor: pointer;" ui-sref="index.device.detail({name:item.device.name})"
+                        ng-click="RealServiceBasic.setDetail(item.device)"><a class="name">{{ item.device.name }}</a>
+                    </td>
+                    <td>{{ item.device.device_group }}</td>
+                    <td>{{ item.ip }}</td>
+                    <td>{{ item.port }}</td>
+                    <td>
+                        <i ng-show="item.enable" style="color:#5cb85c" class="fa fa-check-circle"></i>
+                        <i ng-hide="item.enable" style="color:#e02f44" class="fa fa-minus-circle"></i>
+                    </td>
+                    <td>
+                        <i ng-show="item.upDown=='UP'" style="color:#5cb85c" class="fa fa-check-circle"></i>
+                        <i ng-show="item.upDown=='DOWN'" style="color:#e02f44" class="fa fa-minus-circle"></i>
+                        <span> {{ item.upDown }}</span>
+                    </td>
+                    <td>
+                        <div class="table-wrapper" ng-if="item.groups.length>0">
+                            <table st-table="itemCollection" st-safe-src="item.groups"
+                                   class="table table-hover table-striped">
+                                <!-- <thead>
+                                    <tr>
+                                        <th class="v-name">{{ 'Group Name' | T }}</th>
+                                        <th class="v-type">{{ 'Weight' | T }}</th>
+                                    </tr>
+                                </thead> -->
+                                <tbody>
+                                <tr ng-repeat="row in itemCollection">
+                                    <td>{{ row.group_name }}</td>
+                                    <td>{{ row.weight }}</td>
+                                </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                        <!-- <span class="label label-primary" ng-repeat="group in item.groups" style="margin-right: 4px">{{ group.group_name }}</span> -->
+                    </td>
+                    <td>{{ item.max_conn }}</td>
+                    <td>{{ item.hc_up }}</td>
+                    <td>{{ item.hc_down }}</td>
+                </tr>
+                <tr ng-if="displayedCollection.length === 0">
+                    <td colspan="14" class="text-center">No matching records found.</td>
+                </tr>
+                </tbody>
+                <tfoot>
+                <tr>
+                    <td colspan="7" class="text-center">
+                        <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="10"
+                             st-page-change="onPageChange(newPage)"
+                             st-template="app/modules/common/templates/page.html"></div>
+                    </td>
+                </tr>
+                </tfoot>
             </table>
-            <div class="table-toolbar">
-                <div class="row">
-                    <div class="btn-group ">
-                        <!-- <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="RealServiceBasic.refresh()"><i class="fa fa-refresh"></i></button> -->
-                        <!-- <button ng-if="RealServiceBasic.root" class="btn btn-link" title="{{ 'Block' | T }}" ng-click="RealServiceBasic.block()"><i class="fa fa-tags"></i></button> -->
-                        <button ng-if="user_auth_data.topology.slb_topology.enable_rs" class="btn btn-link" title="{{ 'Enable' | T }}" ng-disabled="RealServiceBasic.selected()" ng-click="RealServiceBasic.enable(true)"><span class="fa fa-play"></span></button>
-                        <button ng-if="user_auth_data.topology.slb_topology.disable_rs" class="btn btn-link" title="{{ 'Disable' | T }}" ng-disabled="RealServiceBasic.selected()" ng-click="RealServiceBasic.enable(false)"><span class="fa fa-stop"></span></button>
-                        <button ng-if="user_auth_data.topology.slb_topology.edit_rs_weight" class="btn btn-link" title="{{ 'Weight' | T }}" ng-disabled="RealServiceBasic.selected()" ng-click="RealServiceBasic.weight()"><span class="fa fa-gavel"></span></button>
-                    </div>
-                </div>
-            </div>
-            <div class="table-wrapper">
-                <table st-table="displayedCollection" st-safe-src="RealServiceBasic.serviceList" st-set-filter="realServiceFilter" class="table table-hover table-striped">
-                    <thead>
-                        <tr>
-                            <th></th>
-                            <th class="d-num">No.</th>
-                            <th class="v-name">{{ 'Service Name' | T }}</th>
-                            <th class="v-type">{{ 'Block' | T }}</th>
-                            <th class="v-device">{{ 'Device Name' | T }}</th>
-                            <th class="d-name">{{ 'Device Group' | T }}</th>
-                            <th class="v-ip">{{ 'IP Address' | T }}</th>
-                            <th class="v-port">{{ 'Port' | T }}</th>
-                            <th class="v-enable">{{ 'Enable' | T }}</th>
-                            <th class="v-upDown">{{ 'UP/DOWN' | T }}</th>
-                            <th class="v-goup">{{ 'Group Weight' | T }}</th>
-                            <th class="d-max">{{ 'Max Connection' | T }}</th>
-                            <th class="d-up">{{ 'Up Check' | T }}</th>
-                            <th class="d-down">{{ 'Down Check' | T }}</th>
-                        </tr>
-                        <tr>
-                            <th>
-                                <input type="checkbox" ng-checked="RealServiceBasic.all" ng-click="RealServiceBasic.selectAll()" />
-                            </th>
-                            <th></th>
-                            <th>
-                                <input st-search="service_name" placeholder="{{'Search by Service Name'|T}}" class="input-sm form-control" type="text" />
-                            </th>
-                            <th>
-                                <!-- <select class="input-sm form-control" st-input-event="change" st-search="block">
-                                    <option value="">{{'All'|T}}</option>
-                                    <option ng-repeat="block in RealServiceBasic.blocks" value="{{block}}">{{ block }}</option>
-                                </select> -->
-                            </th>
-                            <th></th>
-                            <th></th>
-                            <!-- <th ng-if="!RealServiceBasic.loading">
-                                <st-select-multiple collection="RealServiceBasic.serviceList" predicate="device_name"></st-select-multiple>
-                            </th>
-                            <th ng-if="!RealServiceBasic.loading">
-                                <st-select-multiple collection="RealServiceBasic.serviceList" predicate="device_group"></st-select-multiple>
-                            </th> -->
-                            <th>
-                                <!-- <input st-search="ip" placeholder="{{'Exact Match Search by IP'|T}}" class="input-sm form-control" type="text" /> -->
-                            </th>
-                            <th></th>
-                            <th></th>
-                            <th></th>
-                            <th>
-                                <input st-search="group_name" placeholder="{{'Search by Group Name'|T}}" class="input-sm form-control" type="text" />
-                            </th>
-                            <th></th>
-                            <th></th>
-                            <th></th>
-                        </tr>
-                    </thead>
-                    <tbody ng-if="!RealServiceBasic.loading">
-                        <tr st-select-row="item" st-select-mode="multiple" ng-repeat="(num, item) in displayedCollection">
-                            <td>
-                                <input type="checkbox" ng-checked="item.isSelected" />
-                            </td>
-                            <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
-                            <td style="cursor: pointer;" ng-click="RealServiceBasic.detail(item)"><a class="name">{{ item.service_name }}</a></td>
-                            <td>
-                                <span class="label label-success" ng-repeat="block in item.blocks" style="margin-right: 4px">{{ block }}</span>
-                            </td>
-                            <td style="cursor: pointer;" ui-sref="index.device.detail({name:item.device.name})" ng-click="RealServiceBasic.setDetail(item.device)"> <a class="name">{{ item.device.name }}</a></td>
-                            <td>{{ item.device.device_group }}</td>
-                            <td>{{ item.ip }}</td>
-                            <td>{{ item.port }}</td>
-                            <td>
-                                <i ng-show="item.enable" style="color:#5cb85c" class="fa fa-check-circle"></i>
-                                <i ng-hide="item.enable" style="color:#e02f44" class="fa fa-minus-circle"></i>
-                            </td>
-                            <td>
-                                <i ng-show="item.upDown=='UP'" style="color:#5cb85c" class="fa fa-check-circle"></i>
-                                <i ng-show="item.upDown=='DOWN'" style="color:#e02f44" class="fa fa-minus-circle"></i>
-                                <span> {{ item.upDown }}</span>
-                            </td>
-                            <td>
-                                <div class="table-wrapper" ng-if="item.groups.length>0">
-                                    <table st-table="itemCollection" st-safe-src="item.groups" class="table table-hover table-striped">
-                                        <!-- <thead>
-                                            <tr>
-                                                <th class="v-name">{{ 'Group Name' | T }}</th>
-                                                <th class="v-type">{{ 'Weight' | T }}</th>
-                                            </tr>
-                                        </thead> -->
-                                        <tbody>
-                                            <tr ng-repeat="row in itemCollection">
-                                                <td>{{ row.group_name }}</td>
-                                                <td>{{ row.weight }}</td>
-                                            </tr>
-                                        </tbody>
-                                    </table>
-                                </div>
-                                <!-- <span class="label label-primary" ng-repeat="group in item.groups" style="margin-right: 4px">{{ group.group_name }}</span> -->
-                            </td>
-                            <td>{{ item.max_conn }}</td>
-                            <td>{{ item.hc_up }}</td>
-                            <td>{{ item.hc_down }}</td>
-                        </tr>
-                    </tbody>
-                    <tfoot>
-                        <tr>
-                            <td colspan="7" class="text-center">
-                                <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="10" st-page-change="onPageChange(newPage)" st-template="app/modules/common/templates/page.html"></div>
-                            </td>
-                        </tr>
-                    </tfoot>
-                </table>
-            </div>
-            <div style="text-align: center" ng-if="RealServiceBasic.loading"><img src="app/images/loading.gif"></div>
         </div>
+        <div style="text-align: center" ng-if="RealServiceBasic.loading"><img src="app/images/loading.gif"></div>
     </div>
 </div>
 
@@ -162,4 +192,4 @@
         left: 95px;
         opacity: 0;
     }
-</style>
\ No newline at end of file
+</style>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/slb_topology/real_service/block.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/slb_topology/real_service/block.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/slb_topology/real_service/block.html	(working copy)
@@ -1,76 +1,87 @@
-<div class="row">
-    <div class="col-md-12 select-list">
-        <div class="widget" ng-if="RealServiceBlock.root">
-            <div class="widget-header">
-                <span>{{'Real Service Block' | T}}</span>
-            </div>
-            <div class="table-toolbar">
-                <div class="btn-group ">
-                    <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="RealServiceBlock.refreshBlock()"><span class="fa fa-refresh"></span></button>
-                    <button class="btn btn-link" title="{{ 'Add' | T }}" ng-click="RealServiceBlock.addBlock()"><span class="fa fa-plus-circle"></span></button>
-                    <button class="btn btn-link" title="{{ 'Export' | T }}" ng-click="RealServiceBlock.exportBlock()"><i class="fa fa-sign-out"></i></button>
-                    <button class="btn btn-link" title="{{ 'Import' | T }}"><i class="fa fa-sign-in"></i></button>
-                    <input title="{{ 'Import' | T }}" type="file" id="uploadfield" class="file form-control" nv-file-select uploader="RealServiceBlock.fileUploader">
-                </div>
-            </div>
-            <div class="table-wrapper">
-                <table st-table="displayedCollection" st-safe-src="RealServiceBlock.blockList" class="table table-hover table-striped">
-                    <thead>
-                        <tr>
-                            <th class="d-num">No.</th>
-                            <th class="v-name">{{ 'Block Name' | T }}</th>
-                            <th class="v-device">{{ 'Real Service' | T }}</th>
-                            <th class="v-device">{{ 'Action' | T }}</th>
-                        </tr>
-                        <tr>
-                            <th></th>
-                            <th>
-                                <input st-search="name" placeholder="{{'Search by Block Name'|T}}" class="input-sm form-control" type="text" />
-                            </th>
-                            <th></th>
-                            <th></th>
-                        </tr>
-                    </thead>
-                    <tbody ng-if="!RealServiceBlock.blockLoading">
-                        <tr ng-repeat="(num, item) in displayedCollection">
-                            <td class="d-num">{{ ((currentBlockPageIndex - 1) * pageSize) + $index + 1 }}</td>
-                            <td>{{ item.name }}</td>
-                            <td>
-                                <div class="table-wrapper">
-                                    <table class="table table-hover table-striped">
-                                        <tbody>
-                                            <tr ng-repeat="(key, value) in item.rs">
-                                                <td>{{ key }}</td>
-                                                <td>{{ value.join(', ') }}</td>
-                                            </tr>
-                                        </tbody>
-                                    </table>
-                                </div>
-                            </td>
-                            <td>
-                                <a title="{{'Edit'|T}}" class="" ng-click="RealServiceBlock.editBlock(item)">
-                                    <i class="fa fa-pencil"></i>
-                                </a>
-                                <a title="{{'Delete'|T}}" class="" ng-click="RealServiceBlock.deleteBlock(item)">
-                                    <i class="fa fa-times-circle"></i>
-                                </a>
-                            </td>
-                        </tr>
-                    </tbody>
-                    <tfoot>
-                        <tr>
-                            <td colspan="7" class="text-center">
-                                <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="10" st-page-change="onBlockPageChange(newPage)" st-template="app/modules/common/templates/page.html"></div>
-                            </td>
-                        </tr>
-                    </tfoot>
-                </table>
+<div class="col-md-12">
+    <div class="widget" ng-if="RealServiceBlock.root">
+        <div class="widget-header">
+            <span class="tab-header-1">{{'Real Service Block' | T}}</span>
+        </div>
+        <div class="table-toolbar">
+            <div class="btn-group ">
+                <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="RealServiceBlock.refreshBlock()">
+                    <span class="fa fa-refresh an-tab-icon"></span></button>
+                <button class="btn btn-link" title="{{ 'Add' | T }}" ng-click="RealServiceBlock.addBlock()"><span
+                    class="fa fa-plus-circle an-tab-icon"></span></button>
+                <button class="btn btn-link" title="{{ 'Export' | T }}" ng-click="RealServiceBlock.exportBlock()"><i
+                    class="fa fa-sign-out an-tab-icon"></i></button>
+                <button class="btn btn-link" title="{{ 'Import' | T }}"><i class="fa fa-sign-in an-tab-icon"></i>
+                </button>
+                <input title="{{ 'Import' | T }}" type="file" id="uploadfield" class="file form-control" nv-file-select
+                       uploader="RealServiceBlock.fileUploader">
             </div>
-            <div style="text-align: center" ng-if="RealServiceBlock.blockLoading"><img src="app/images/loading.gif"></div>
         </div>
+        <div class="table-wrapper">
+            <table st-table="displayedCollection" st-safe-src="RealServiceBlock.blockList"
+                   class="table table-hover table-striped">
+                <thead>
+                <tr>
+                    <th class="d-num">No.</th>
+                    <th class="v-name">{{ 'Block Name' | T }}</th>
+                    <th class="v-device">{{ 'Real Service' | T }}</th>
+                    <th class="v-device">{{ 'Action' | T }}</th>
+                </tr>
+                <tr>
+                    <th></th>
+                    <th>
+                        <input st-search="name" placeholder="{{'Search by Block Name'|T}}" class="input-sm form-control"
+                               type="text"/>
+                    </th>
+                    <th></th>
+                    <th></th>
+                </tr>
+                </thead>
+                <tbody ng-if="!RealServiceBlock.blockLoading">
+                <tr ng-repeat="(num, item) in displayedCollection">
+                    <td class="d-num">{{ ((currentBlockPageIndex - 1) * pageSize) + $index + 1 }}</td>
+                    <td>{{ item.name }}</td>
+                    <td>
+                        <div class="table-wrapper">
+                            <table class="table table-hover table-striped">
+                                <tbody>
+                                <tr ng-repeat="(key, value) in item.rs">
+                                    <td>{{ key }}</td>
+                                    <td>{{ value.join(', ') }}</td>
+                                </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </td>
+                    <td>
+                        <a title="{{'Edit'|T}}" class="" ng-click="RealServiceBlock.editBlock(item)">
+                            <i class="fa fa-pencil"></i>
+                        </a>
+                        <a title="{{'Delete'|T}}" class="" ng-click="RealServiceBlock.deleteBlock(item)">
+                            <i class="fa fa-times-circle"></i>
+                        </a>
+                    </td>
+                </tr>
+                <tr ng-if="displayedCollection.length === 0">
+                    <td colspan="4" class="text-center">No matching records found.</td>
+                </tr>
+                </tbody>
+                <tfoot>
+                <tr>
+                    <td colspan="7" class="text-center">
+                        <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="10"
+                             st-page-change="onBlockPageChange(newPage)"
+                             st-template="app/modules/common/templates/page.html"></div>
+                    </td>
+                </tr>
+                </tfoot>
+            </table>
+        </div>
+        <div style="text-align: center" ng-if="RealServiceBlock.blockLoading"><img src="app/images/loading.gif"></div>
     </div>
 </div>
 
+
 <style type="text/css">
     .file {
         position: absolute;
@@ -79,4 +90,4 @@
         left: 95px;
         opacity: 0;
     }
-</style>
\ No newline at end of file
+</style>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/slb_topology/real_service/real_service.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/slb_topology/real_service/real_service.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/slb_topology/real_service/real_service.html	(working copy)
@@ -1,17 +1,14 @@
-<div class="row">
-    <div class="col-md-12">
-        <ul class="nav nav-pills">
-            <li ng-class="{ active: url_contain('/slb_topology/rs/basic') }">
-                <a ui-sref="index.slb_topology.rs.basic">{{ 'Real Service' | T }}</a>
-            </li>
-            <li ng-class="{ active: url_contain('/slb_topology/rs/block') }" ng-if="RealService.root">
-                <a ui-sref="index.slb_topology.rs.block">{{ 'Real Service Block' | T }}</a>
-            </li>
-        </ul>
-    </div>
+<div class="col-md-12">
+    <ul class="nav nav-pills">
+        <li ng-class="{ active: url_contain('/slb_topology/rs/basic') }">
+            <a ui-sref="index.slb_topology.rs.basic"><span class="tab-header">{{ 'Real Service' | T }}</span></a>
+        </li>
+        <li ng-class="{ active: url_contain('/slb_topology/rs/block') }" ng-if="RealService.root">
+            <a ui-sref="index.slb_topology.rs.block"><span class="tab-header">{{ 'Real Service Block' | T }}</span></a>
+        </li>
+    </ul>
 </div>
-<div class="">
+<div class="content-wrapper">
     <div class="" ng-show="url_contain('/slb_topology/rs/basic')" ui-view="basic"></div>
     <div class="" ng-show="url_contain('/slb_topology/rs/block')" ui-view="block"></div>
 </div>
-
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/slb_topology/slb_topology.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/slb_topology/slb_topology.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/slb_topology/slb_topology.html	(working copy)
@@ -2,15 +2,16 @@
     <div class="col-md-12">
         <ul class="nav nav-tabs">
             <li role="presentation" ng-class="{ active: url_contain('/slb_topology/slb') }">
-                <a ui-sref="index.slb_topology.slb">{{ 'SLB Topology' | T }}</a>
+                <a ui-sref="index.slb_topology.slb"><span class="tab-header">{{ 'SLB Topology' | T }}</span></a>
             </li>
             <li role="presentation" ng-class="{ active: url_contain('/slb_topology/rs') }">
-                <a ui-sref="index.slb_topology.rs.basic">{{ 'Real Service' | T }}</a>
+                <a ui-sref="index.slb_topology.rs.basic"><span class="tab-header"> {{ 'Real Service' | T }}</span></a>
             </li>
         </ul>
     </div>
-</div>
-<div class="content-wrapper">
-    <div class="" ng-show="url_contain('/slb_topology/slb')" ui-view="slb"></div>
-    <div class="" ng-show="url_contain('/slb_topology/rs')" ui-view="rs"></div>
+
+    <div class="content-wrapper">
+        <div class="" ng-show="url_contain('/slb_topology/slb')" ui-view="slb"></div>
+        <div class="" ng-show="url_contain('/slb_topology/rs')" ui-view="rs"></div>
+    </div>
 </div>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/slb_topology/virtual_service/virtual_service.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/slb_topology/virtual_service/virtual_service.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/slb_topology/virtual_service/virtual_service.html	(working copy)
@@ -1,92 +1,122 @@
-<div class="row">
-    <div class="col-md-12">
-        <div class="widget">
-            <div class="alert alert-info" role="alert" ng-if="serviceMngtVirtualService.app == 'AMP'">{{'SLB topology display depends on APV version. For APV 10.3 version, the required version is 10.3.0.48 and later. For APV 10.3.1 version, the required version is 10.3.1.2 and later. For APV 8.6.1 version, the required version is 8.6.1.146 and later. Therefore, if you want to browse the related functions of the topology, please update the corresponding APV version.'|T}}</div>
-            <div class="alert alert-info" role="alert" ng-if="serviceMngtVirtualService.app == 'IMC'">{{'SLB topology display depends on NSAE/NETOPTI version. For NSAE 10.3 version, the required version is 10.3.0.14 and later. For NSAE 10.3.1 version, the required version is 10.3.1.2 and later. For NSAE 8.6.1 version, the required version is 8.6.1.50 and later. For NETOPTI 2.6.1 version, the required version is 2.6.1.29 and later. For NETOPTI 3.3 version, the required version is 3.3.0.3 and later. Therefore, if you want to browse the related functions of the topology, please update the corresponding NSAE/NETOPTI version.'|T}}</div>
-            <div class="widget-header">
-                <span>{{'SLB Topology' | T}}</span>
-            </div>
-            <div class="table-toolbar">
-                <div class="btn-group">
-                    <button class="btn-link" title="{{ 'Refresh' | T }}" ng-click="serviceMngtVirtualService.refresh()"><i class="fa fa-refresh"></i></button>
-                </div>
-            </div>
-            <div class="table-wrapper">
-                <table st-set-filter="customFilter" st-table="displayedCollection" st-safe-src="serviceMngtVirtualService.serviceList" class="table table-hover table-striped">
-                    <thead>
-                        <tr>
-                            <th class="v-num">No.</th>
-                            <th class="v-name">{{ 'Service Name' | T }}</th>
-                            <th class="v-type">{{ 'Type' | T }}</th>
-                            <th class="v-device">{{ 'Device Name' | T }}</th>
-                            <th class="v-device">{{ 'Device Group' | T }}</th>
-                            <th class="v-ip">{{ 'IP Address' | T }}</th>
-                            <th class="v-policy col-md-2"> {{'Policy' | T}}</th>
-                            <th class="v-group col-md-2"> {{'Group' | T}}</th>
-                            <th class="v-rs col-md-2"> {{'Real Service' | T}}</th>
-                        </tr>
-                        <tr>
-                            <th></th>
-                            <th>
-                                <input st-search="name" placeholder="{{'Search by Service Name'|T}}" class="input-sm form-control" type="text" />
-                            </th>
-                            <th></th>
-                            <th ng-if="serviceMngtVirtualService.get_loading()">
-                                <st-select-multiple collection="serviceMngtVirtualService.serviceList" predicate="device_name"></st-select-multiple>
-                            </th>
-                            <th ng-if="serviceMngtVirtualService.get_loading()">
-                                <st-select-multiple collection="serviceMngtVirtualService.serviceList" predicate="device_group"></st-select-multiple>
-                            </th>
-                            <th>
-                                <input st-search="ip" placeholder="{{'Search by IP Address'|T}}" class="input-sm form-control" type="text" />
-                            </th>
-                            <th></th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr ng-repeat="(num, item) in displayedCollection">
-                            <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
-                            <td ui-sref="index.slb_topology.slb.detail({name:item.name, device: item.device_name})" style="cursor: pointer;"><a title="{{ item.name }}">{{ item.name | E}}</a></td>
-                            <td>{{ item.type }}</td>
-                            <td style="cursor: pointer;" ui-sref="index.device.detail({name:item.device.name})" ng-click="serviceMngtVirtualService.setDetail(item.device)"> <a class="name">{{ item.device.name }}</a></td>
-                            <td>{{ item.device.device_group }}</td>
-                            <td>{{ item.ip }}</td>
-                            <td ng-if="item.policy_num < 2">
-                                <span class="basic" style='max-width:200px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:inline-block;vertical-align:middle;' title="{{ item.policy.name }}">{{ item.policy.name }}</span>
-                            </td>
-                            <td ng-if="item.policy_num < 2">
-                                <span class="basic" style='max-width:200px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:inline-block;vertical-align:middle;' title="{{ item.policy.group }}">{{ item.policy.group }}</span>
-                            </td>
-                            <td ng-if="item.policy_num < 2">
-                                <span class="basic" style='max-width:200px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:inline-block;vertical-align:middle;' title="{{ item.policy.rs }}">{{ item.policy.rs }}</span>
-                            </td>
-                            <td colspan="3" ng-if="item.policy_num > 1">
-                                <table class="table table-striped">
-                                    <tr ng-repeat="(idx, policy) in item.policy" ng-class="[{'active': num%2 == 0}, {'table-empty':num%2 == 1}]">
-                                        <td class="col-md-4">
-                                            <span class="basic" style='max-width:200px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:inline-block;vertical-align:middle;' title="{{ policy.name }}">{{ policy.name }}</span>
-                                        </td>
-                                        <td class="col-md-4">
-                                            <span class="basic" style='max-width:200px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:inline-block;vertical-align:middle;' title="{{ policy.group }}">{{ policy.group }}</span>
-                                        </td>
-                                        <td class="col-md-4">
-                                            <span class="basic" style='max-width:200px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:inline-block;vertical-align:middle;' title="{{ policy.rs }}">{{ policy.rs }}</span>
-                                        </td>
-                                    </tr>
-                                </table>
-                            </td>
-                        </tr>
-                        <div style="margin-bottom: 5px;margin-top:5px;text-align: center" ng-if="!serviceMngtVirtualService.get_loading()"><img src="app/images/loading.gif"></div>
-                    </tbody>
-                    <tfoot>
-                    <tr>
-                        <td colspan="7" class="text-center">
-                            <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="10" st-page-change="onPageChange(newPage)"st-template="app/modules/common/templates/page.html"></div>
-                        </td>
-                    </tr>
-                    </tfoot>
-                </table>
+<div class="col-md-12">
+    <div class="widget">
+        <div class="alert alert-info" role="alert" ng-if="serviceMngtVirtualService.app == 'AMP'">
+            {{'SLB topology display depends on APV version. For APV 10.3 version, the required version is 10.3.0.48 and later. For APV 10.3.1 version, the required version is 10.3.1.2 and later. For APV 8.6.1 version, the required version is 8.6.1.146 and later. Therefore, if you want to browse the related functions of the topology, please update the corresponding APV version.' | T}}
+        </div>
+        <div class="alert alert-info" role="alert" ng-if="serviceMngtVirtualService.app == 'IMC'">
+            {{'SLB topology display depends on NSAE/NETOPTI version. For NSAE 10.3 version, the required version is 10.3.0.14 and later. For NSAE 10.3.1 version, the required version is 10.3.1.2 and later. For NSAE 8.6.1 version, the required version is 8.6.1.50 and later. For NETOPTI 2.6.1 version, the required version is 2.6.1.29 and later. For NETOPTI 3.3 version, the required version is 3.3.0.3 and later. Therefore, if you want to browse the related functions of the topology, please update the corresponding NSAE/NETOPTI version.' | T}}
+        </div>
+        <div class="widget-header">
+            <span>{{'SLB Topology' | T}}</span>
+        </div>
+        <div class="table-toolbar">
+            <div class="btn-group">
+                <button class="btn-link" title="{{ 'Refresh' | T }}" ng-click="serviceMngtVirtualService.refresh()"><i
+                    class="fa fa-refresh an-tab-icon"></i></button>
             </div>
         </div>
+        <div class="table-wrapper">
+            <table st-set-filter="customFilter" st-table="displayedCollection"
+                   st-safe-src="serviceMngtVirtualService.serviceList" class="table table-hover table-striped">
+                <thead>
+                <tr>
+                    <th class="v-num">No.</th>
+                    <th class="v-name">{{ 'Service Name' | T }}</th>
+                    <th class="v-type">{{ 'Type' | T }}</th>
+                    <th class="v-device">{{ 'Device Name' | T }}</th>
+                    <th class="v-device">{{ 'Device Group' | T }}</th>
+                    <th class="v-ip">{{ 'IP Address' | T }}</th>
+                    <th class="v-policy col-md-2"> {{'Policy' | T}}</th>
+                    <th class="v-group col-md-2"> {{'Group' | T}}</th>
+                    <th class="v-rs col-md-2"> {{'Real Service' | T}}</th>
+                </tr>
+                <tr>
+                    <th></th>
+                    <th>
+                        <input st-search="name" placeholder="{{'Search by Service Name'|T}}"
+                               class="input-sm form-control" type="text"/>
+                    </th>
+                    <th></th>
+                    <th ng-if="serviceMngtVirtualService.get_loading()">
+                        <st-select-multiple collection="serviceMngtVirtualService.serviceList"
+                                            predicate="device_name"></st-select-multiple>
+                    </th>
+                    <th ng-if="serviceMngtVirtualService.get_loading()">
+                        <st-select-multiple collection="serviceMngtVirtualService.serviceList"
+                                            predicate="device_group"></st-select-multiple>
+                    </th>
+                    <th>
+                        <input st-search="ip" placeholder="{{'Search by IP Address'|T}}" class="input-sm form-control"
+                               type="text"/>
+                    </th>
+                    <th></th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr ng-repeat="(num, item) in displayedCollection">
+                    <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
+                    <td ui-sref="index.slb_topology.slb.detail({name:item.name, device: item.device_name})"
+                        style="cursor: pointer;"><a title="{{ item.name }}">{{ item.name | E}}</a></td>
+                    <td>{{ item.type }}</td>
+                    <td style="cursor: pointer;" ui-sref="index.device.detail({name:item.device.name})"
+                        ng-click="serviceMngtVirtualService.setDetail(item.device)"><a class="name">{{ item.device.name
+                        }}</a></td>
+                    <td>{{ item.device.device_group }}</td>
+                    <td>{{ item.ip }}</td>
+                    <td ng-if="item.policy_num < 2">
+                        <span class="basic"
+                              style='max-width:200px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:inline-block;vertical-align:middle;'
+                              title="{{ item.policy.name }}">{{ item.policy.name }}</span>
+                    </td>
+                    <td ng-if="item.policy_num < 2">
+                        <span class="basic"
+                              style='max-width:200px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:inline-block;vertical-align:middle;'
+                              title="{{ item.policy.group }}">{{ item.policy.group }}</span>
+                    </td>
+                    <td ng-if="item.policy_num < 2">
+                        <span class="basic"
+                              style='max-width:200px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:inline-block;vertical-align:middle;'
+                              title="{{ item.policy.rs }}">{{ item.policy.rs }}</span>
+                    </td>
+                    <td colspan="3" ng-if="item.policy_num > 1">
+                        <table class="table table-striped">
+                            <tr ng-repeat="(idx, policy) in item.policy"
+                                ng-class="[{'active': num%2 == 0}, {'table-empty':num%2 == 1}]">
+                                <td class="col-md-4">
+                                    <span class="basic"
+                                          style='max-width:200px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:inline-block;vertical-align:middle;'
+                                          title="{{ policy.name }}">{{ policy.name }}</span>
+                                </td>
+                                <td class="col-md-4">
+                                    <span class="basic"
+                                          style='max-width:200px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:inline-block;vertical-align:middle;'
+                                          title="{{ policy.group }}">{{ policy.group }}</span>
+                                </td>
+                                <td class="col-md-4">
+                                    <span class="basic"
+                                          style='max-width:200px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:inline-block;vertical-align:middle;'
+                                          title="{{ policy.rs }}">{{ policy.rs }}</span>
+                                </td>
+                            </tr>
+                        </table>
+                    </td>
+                </tr>
+                <tr ng-if="displayedCollection.length === 0">
+                    <td colspan="9" class="text-center">No matching records found.</td>
+                </tr>
+                <div style="margin-bottom: 5px;margin-top:5px;text-align: center"
+                     ng-if="!serviceMngtVirtualService.get_loading()"><img src="app/images/loading.gif"></div>
+                </tbody>
+                <tfoot>
+                <tr>
+                    <td colspan="7" class="text-center">
+                        <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="10"
+                             st-page-change="onPageChange(newPage)"
+                             st-template="app/modules/common/templates/page.html"></div>
+                    </td>
+                </tr>
+                </tfoot>
+            </table>
+        </div>
     </div>
-</div>
\ No newline at end of file
+</div>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/ssl_monitoring/ssl.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/ssl_monitoring/ssl.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/ssl_monitoring/ssl.html	(working copy)
@@ -1,66 +1,89 @@
-<div class="widget">
-    <div class="alert alert-info" role="alert" ng-if="sslMonitoring.app == 'AMP'">{{'SSL certificate display depends on APV version. For APV 10.3 version, the required version is 10.3.0.2 and later. For APV 10.3.1 version, the required version is 10.3.1.2 and later. For APV 8.6.1 version, the required version is 8.6.1.89 and later. Therefore, if you want to use the related functions of the SSL certificate, please update the corresponding APV version.'|T}}</div>
-    <div class="alert alert-info" role="alert" ng-if="sslMonitoring.app == 'IMC'">{{'SSL certificate display depends on NSAE/NETOPTI version. For NSAE 10.3 version, the required version is 10.3.0.1 and later. For NSAE 10.3.1 version, the required version is 10.3.1.2 and later. For NSAE 8.6.1 version, the required version is 8.6.1.33 and later. For NETOPTI 2.6.1 version, the required version is 2.6.1.18 and later. For NETOPTI 3.3 version, the required version is 3.3.0.2 and later. Therefore, if you want to use the related functions of the SSL certificate, please update the corresponding NSAE/NETOPTI version.'|T}}</div>
-    <div class="widget-header">
-        <span>{{'SSL Certificate' | T}}</span>
-    </div>
-    <div class="table-toolbar">
-        <div class="btn-group">
-            <button class="btn-link" title="{{ 'Refresh' | T }}" ng-click="sslMonitoring.refresh()"><i class="fa fa-refresh"></i></button>
-            <button class="btn-link" title="{{ 'Certificate Expire Check' | T }}" ng-click="sslMonitoring.check()"><i class="fa fa-repeat"></i></button>
+<div class="row">
+    <div class="col-md-12">
+        <div class="widget">
+            <div class="widget-header">
+                <span class="tab-header-1">{{'SSL Certificate' | T}}</span>
+            </div>
+            <div class="table-toolbar">
+                <div class="btn-group">
+                    <button class="btn-link" title="{{ 'Refresh' | T }}" ng-click="sslMonitoring.refresh()"><i
+                        class="fa fa-refresh an-tab-icon"></i></button>
+                    <button class="btn-link" title="{{ 'Certificate Expire Check' | T }}"
+                            ng-click="sslMonitoring.check()">
+                        <i class="fa fa-repeat an-tab-icon"></i></button>
+                </div>
+            </div>
+            <div class="alert alert-info" role="alert" ng-if="sslMonitoring.app == 'AMP'">
+                {{'SSL certificate display depends on APV version. For APV 10.3 version, the required version is 10.3.0.2 and later. For APV 10.3.1 version, the required version is 10.3.1.2 and later. For APV 8.6.1 version, the required version is 8.6.1.89 and later. Therefore, if you want to use the related functions of the SSL certificate, please update the corresponding APV version.' | T}}
+            </div>
+            <div class="alert alert-info" role="alert" ng-if="sslMonitoring.app == 'IMC'">
+                {{'SSL certificate display depends on NSAE/NETOPTI version. For NSAE 10.3 version, the required version is 10.3.0.1 and later. For NSAE 10.3.1 version, the required version is 10.3.1.2 and later. For NSAE 8.6.1 version, the required version is 8.6.1.33 and later. For NETOPTI 2.6.1 version, the required version is 2.6.1.18 and later. For NETOPTI 3.3 version, the required version is 3.3.0.2 and later. Therefore, if you want to use the related functions of the SSL certificate, please update the corresponding NSAE/NETOPTI version.' | T}}
+            </div>
+            <div st-table="displayedCollection" st-safe-src="sslMonitoring.sslDataList">
+                <table class="table table-striped table-hover">
+                    <thead>
+                    <tr>
+                        <th class="d-num">No.</th>
+                        <th class="d-name" style="width: auto;">{{ 'Service Name' | T }}</th>
+                        <th class="d-device" style="width: auto;">{{ 'Device Name' | T }}</th>
+                        <th class="d-devicegroup" style="width: auto;">{{ 'Device Group' | T }}</th>
+                        <th class="d-type" style="width: auto;">{{ 'Service Type' | T }}</th>
+                        <th class="d-host" style="width: auto;">{{ 'SSL Host Name' | T }}</th>
+                        <th class="d-status" style="width: auto;">{{ 'SSL Host Status' | T }}</th>
+                        <th></th>
+                    </tr>
+                    <tr>
+                        <th></th>
+                        <th>
+                            <input st-search="name" placeholder="{{'Search by Name'|T}}" class="input-sm form-control">
+                        </th>
+                        <th></th>
+                        <th></th>
+                        <th></th>
+                        <th></th>
+                        <th></th>
+                        <th></th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr ng-repeat="row in displayedCollection">
+                        <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
+                        <td>
+                            <a ng-if="row.host"
+                               ui-sref="index.ssl_monitoring.detail({device:row.device,name:row.name,host_name:row.host})"
+                               class="d-name">{{ row.name }}</a>
+                            <a ng-if="!row.host" ng-click="sslMonitoring.warn(row.name)" class="d-name">{{ row.name
+                                }}</a>
+                        </td>
+                        <td class="d-device">{{ row.device }}</td>
+                        <td class="d-devicegroup">{{ row.device_group }}</td>
+                        <td class="d-type">{{ row.type }}</td>
+                        <td class="d-host">{{ row.host }}</td>
+                        <td class="d-status">{{ row.status }}</td>
+                        <td>
+                            <a class="icon-box" title="{{ 'Edit' | T }}" ng-click="sslMonitoring.edit(row)"><i
+                                class="array-edit an-row-icon"></i></a>
+                        </td>
+                    </tr>
+                    <tr ng-if="displayedCollection.length === 0">
+                        <td colspan="8" class="text-center">No matching records found.</td>
+                    </tr>
+                    <div style="margin-bottom: 5px;margin-top:5px;text-align: center"
+                         ng-if="!sslMonitoring.get_loading()">
+                        <img
+                            src="app/images/loading.gif"></div>
+                    </tbody>
+                    <tfoot>
+                    <tr>
+                        <td colspan="7" class="text-center">
+                            <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5"
+                                 st-page-change="onPageChange(newPage)"
+                                 st-template="app/modules/common/templates/page.html"></div>
+                        </td>
+                    </tr>
+                    </tfoot>
+                </table>
+            </div>
         </div>
     </div>
-    <div st-table="displayedCollection" st-safe-src="sslMonitoring.sslDataList">
-        <table class="table table-striped table-hover">
-            <thead>
-                <tr>
-                    <th class="d-num">No.</th>
-                    <th class="d-name" style="width: auto;">{{ 'Service Name' | T }}</th>
-                    <th class="d-device" style="width: auto;">{{ 'Device Name' | T }}</th>
-                    <th class="d-devicegroup" style="width: auto;">{{ 'Device Group' | T }}</th>
-                    <th class="d-type" style="width: auto;">{{ 'Service Type' | T }}</th>
-                    <th class="d-host" style="width: auto;">{{ 'SSL Host Name' | T }}</th>
-                    <th class="d-status" style="width: auto;">{{ 'SSL Host Status' | T }}</th>
-                    <th></th>
-                </tr>
-                <tr>
-                    <th></th>
-                    <th>
-                        <input st-search="name" placeholder="{{'Search by Name'|T}}" class="input-sm form-control">
-                    </th>
-                    <th></th>
-                    <th></th>
-                    <th></th>
-                    <th></th>
-                    <th></th>
-                    <th></th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr ng-repeat="row in displayedCollection">
-                    <td class="d-num">{{ ((currentPageIndex - 1) * pageSize) + $index + 1 }}</td>
-                    <td>
-                        <a ng-if="row.host" ui-sref="index.ssl_monitoring.detail({device:row.device,name:row.name,host_name:row.host})" class="d-name">{{ row.name }}</a>
-                        <a ng-if="!row.host" ng-click="sslMonitoring.warn(row.name)" class="d-name">{{ row.name }}</a>
-                    </td>
-                    <td class="d-device">{{ row.device }}</td>
-                    <td class="d-devicegroup">{{ row.device_group }}</td>
-                    <td class="d-type">{{ row.type }}</td>
-                    <td class="d-host">{{ row.host }}</td>
-                    <td class="d-status">{{ row.status }}</td>
-                    <td>
-                        <a class="icon-box" title="{{ 'Edit' | T }}" ng-click="sslMonitoring.edit(row)"><i class="array-edit"></i></a>
-                    </td>
-                </tr>
-                <div style="margin-bottom: 5px;margin-top:5px;text-align: center" ng-if="!sslMonitoring.get_loading()"><img src="app/images/loading.gif"></div>
-            </tbody>
-            <tfoot>
-                <tr>
-                    <td colspan="7" class="text-center">
-                        <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5" st-page-change="onPageChange(newPage)" st-template="app/modules/common/templates/page.html"></div>
-                    </td>
-                </tr>
-            </tfoot>
-        </table>
-    </div>
 </div>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/ssl_monitoring/ssl_edit.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/ssl_monitoring/ssl_edit.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/ssl_monitoring/ssl_edit.html	(working copy)
@@ -1,7 +1,8 @@
 <div>
     <div class="modal-header">
-        <button type="button" class="close" ng-click="edit.modalClose()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4 class="modal-title">{{ 'Edit SSL Service' | T}}</h4>
+        <button type="button" class="close" ng-click="edit.modalClose()" aria-label="Close"><span aria-hidden="true">&times;</span>
+        </button>
+        <h6 class="modal-title">{{ 'Edit SSL Service' | T}}</h6>
     </div>
     <div class="modal-body">
         <form class="form-horizontal">
@@ -35,7 +36,7 @@
             <div class="form-group" ng-if="!edit.host && edit.new_host=='--Add New--'">
                 <label for="name" class="col-md-3 control-label"><sup>*</sup>{{ 'New SSL Host' | T }}</label>
                 <div class="col-md-8">
-                    <input type="text" class="form-control" ng-model="edit.new_host_name" >
+                    <input type="text" class="form-control" ng-model="edit.new_host_name">
                 </div>
             </div>
             <div class="form-group" ng-if="edit.host">
@@ -66,4 +67,4 @@
     .modal-dialog {
         width: 800px;
     }
-</style>
\ No newline at end of file
+</style>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/storage/log-location/log-location.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/storage/log-location/log-location.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/storage/log-location/log-location.html	(working copy)
@@ -1,57 +1,55 @@
 <div class="row">
     <div class="col-md-12">
         <div class="col-md-8">
-            <div class="row">
-                <div class="widget">
-                    <div class="widget-header">
-                        <span>{{ 'Log Location Configuration' | T }}</span>
-                    </div>
-                    <br>
-                    <div class="alert alert-info" role="alert"
-                         ng-if="!storageLogLocation.secondaryDisk.isDiskAvailable">
-                        In addition, AMP supports secondary storage for long-term log retention by mounting an external
-                        secondary storage device on the AMP. On successful mounting, users can avail this option by
-                        selecting 'Secondary' in the 'Choose Storage for Logs' menu below.
-                    </div>
-                    <div class="alert alert-info" role="alert" ng-if="storageLogLocation.secondaryDisk.isDiskAvailable">
-                        Users can enable the 'Secondary Storage' by selecting 'Secondary' option in the 'Choose Storage
-                        for Logs' menu below.
-                    </div>
-                    <div>
-                        <form class="form-horizontal" name="storageListForm" unsaved-warning-form>
-                            <div class="form-group">
-                                <label class="control-label col-md-3">{{ 'Choose Storage for Logs' | T }}</label>
-                                <div class="col-md-4">
-                                    <select name="role" class="form-control"
-                                            ng-model="storageLogLocation.secondaryDisk.logLocation">
-                                        <option ng-repeat="row in storageLogLocation.diskList" value="{{row.value}}">
-                                            {{row.name|T}}
-                                        </option>
-                                    </select>
-                                </div>
+            <div class="widget">
+                <div class="widget-header">
+                    <span class="tab-header-1">{{ 'Log Location Configuration' | T }}</span>
+                </div>
+                <br>
+                <div class="alert alert-info" role="alert"
+                     ng-if="!storageLogLocation.secondaryDisk.isDiskAvailable">
+                    In addition, AMP supports secondary storage for long-term log retention by mounting an external
+                    secondary storage device on the AMP. On successful mounting, users can avail this option by
+                    selecting 'Secondary' in the 'Choose Storage for Logs' menu below.
+                </div>
+                <div class="alert alert-info" role="alert" ng-if="storageLogLocation.secondaryDisk.isDiskAvailable">
+                    Users can enable the 'Secondary Storage' by selecting 'Secondary' option in the 'Choose Storage
+                    for Logs' menu below.
+                </div>
+                <div>
+                    <form class="form-horizontal" name="storageListForm" unsaved-warning-form>
+                        <div class="form-group">
+                            <label class="control-label col-md-3">{{ 'Choose Storage for Logs' | T }}</label>
+                            <div class="col-md-4">
+                                <select name="role" class="form-control"
+                                        ng-model="storageLogLocation.secondaryDisk.logLocation">
+                                    <option ng-repeat="row in storageLogLocation.diskList" value="{{row.value}}">
+                                        {{row.name | T}}
+                                    </option>
+                                </select>
                             </div>
-                            <br>
-                            <div class="form-group">
-                                <div class="col-md-offset-3 col-md-6">
-                                    <button ng-show="storageListForm.$dirty" class="btn btn-primary"
-                                            ng-click="storageLogLocation.changeLogLocation()">{{ 'Save Changes' | T}}
-                                    </button>
-                                    <button ng-show="storageListForm.$dirty" type="reset"
-                                            class="btn btn-default btn-cancel"
-                                            ng-click="storageListForm.$dirty=false;storageLogLocation.cancel()">
-                                        {{'Cancel'|T}}
-                                    </button>
-                                </div>
+                        </div>
+                        <br>
+                        <div class="form-group">
+                            <div class="col-md-offset-3 col-md-6">
+                                <button ng-show="storageListForm.$dirty" class="btn btn-primary"
+                                        ng-click="storageLogLocation.changeLogLocation()">{{ 'Save Changes' | T}}
+                                </button>
+                                <button ng-show="storageListForm.$dirty" type="reset"
+                                        class="btn btn-default btn-cancel"
+                                        ng-click="storageListForm.$dirty=false;storageLogLocation.cancel()">
+                                    {{'Cancel' | T}}
+                                </button>
                             </div>
-                        </form>
-                    </div>
+                        </div>
+                    </form>
                 </div>
             </div>
         </div>
         <div class="col-md-4">
             <div class="widget">
                 <div class="widget-header">
-                    <span>{{ 'Storage Management' | T }}</span>
+                    <span class="tab-header-1">{{ 'Storage Management' | T }}</span>
                 </div>
                 <div class="table-responsive table-content">
                     <table class="table table-striped table-hover">
@@ -94,56 +92,54 @@
             </div>
         </div>
     </div>
+</div>
+<div class="row">
     <div class="col-md-12">
         <div class="col-md-12">
-            <div class="row">
-                <div class="widget">
-                    <div class="widget-header">
-                        <span>{{ 'Archived Logs' | T }}</span>
-                    </div>
+            <div class="widget">
+                <div class="widget-header">
+                    <span class="tab-header-1">{{ 'Archived Logs' | T }}</span>
                 </div>
             </div>
-            <div class="row">
-                <div class="widget">
-                    <div class="table-toolbar">
-                        <button class="btn-link" title="{{ 'Create Archive' | T }}"
-                                ng-click="storageLogLocation.createLogArchive()"><i
-                            class="fa fa-2x fa-plus-circle"></i></button>
-                    </div>
-                    <div class="table-wrapper">
-                        <table st-table="displayedCollection" st-safe-src="storageLogLocation.logArchives"
-                               class="table table-hover table-striped">
-                            <thead>
-                            <tr>
-                                <th class="d-num">No.</th>
-                                <th class="d-name">{{ 'File Name' | T }}</th>
-                                <th class="d-action">{{ 'Action' | T }}</th>
-                            </tr>
-                            </thead>
-                            <tbody>
-                            <tr ng-repeat="archiveItem in displayedCollection">
-                                <td class="d-num">{{ $index + 1 }}</td>
-                                <td>{{ archiveItem }}</td>
-                                <td>
-                                    <a class="icon-box" title="{{ 'Unarchive' | T }}"
-                                       ng-click="storageLogLocation.performLogUnarchive(archiveItem)"><i
-                                        class="glyphicon glyphicon-upload"></i></a>
-                                </td>
-                            </tr>
-                            </tbody>
-                            <tfoot>
-                            <tr>
-                                <td colspan="3" class="text-center">
-                                    <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5"
-                                         st-page-change="onPageChange(newPage)"></div>
-                                </td>
-                            </tr>
-                            </tfoot>
-                        </table>
-                    </div>
-                    <p class="align-center" ng-if="storageLogLocation.logArchives.length == 0">No matching records
-                        found.</p><br>
+            <div class="widget">
+                <div class="table-toolbar">
+                    <button class="btn-link" title="{{ 'Create Archive' | T }}"
+                            ng-click="storageLogLocation.createLogArchive()"><i
+                        class="fa fa-2x fa-plus-circle"></i></button>
+                </div>
+                <div class="table-wrapper">
+                    <table st-table="displayedCollection" st-safe-src="storageLogLocation.logArchives"
+                           class="table table-hover table-striped">
+                        <thead>
+                        <tr>
+                            <th class="d-num">No.</th>
+                            <th class="d-name">{{ 'File Name' | T }}</th>
+                            <th class="d-action">{{ 'Action' | T }}</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <tr ng-repeat="archiveItem in displayedCollection">
+                            <td class="d-num">{{ $index + 1 }}</td>
+                            <td>{{ archiveItem }}</td>
+                            <td>
+                                <a class="icon-box" title="{{ 'Unarchive' | T }}"
+                                   ng-click="storageLogLocation.performLogUnarchive(archiveItem)"><i
+                                    class="glyphicon glyphicon-upload"></i></a>
+                            </td>
+                        </tr>
+                        </tbody>
+                        <tfoot>
+                        <tr>
+                            <td colspan="3" class="text-center">
+                                <div st-pagination="" st-items-by-page="pageSize" st-displayed-pages="5"
+                                     st-page-change="onPageChange(newPage)"></div>
+                            </td>
+                        </tr>
+                        </tfoot>
+                    </table>
                 </div>
+                <p class="align-center" ng-if="storageLogLocation.logArchives.length == 0">No matching records
+                    found.</p><br>
             </div>
         </div>
     </div>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/storage/log-location/modal/create-archive.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/storage/log-location/modal/create-archive.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/storage/log-location/modal/create-archive.html	(working copy)
@@ -3,7 +3,7 @@
         <button type="button" class="close" ng-click="createArchive.close()" aria-label="Close"><span
             aria-hidden="true">&times;</span>
         </button>
-        <h4 class="modal-title">{{ 'Create Archive' | T}}</h4>
+        <h6 class="modal-title">{{ 'Create Archive' | T}}</h6>
     </div>
     <div class="modal-body">
         <form class="form-horizontal" name="add">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/storage/log-location/modal/unarchive.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/storage/log-location/modal/unarchive.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/storage/log-location/modal/unarchive.html	(working copy)
@@ -3,7 +3,7 @@
         <button type="button" class="close" ng-click="unarchive.close()" aria-label="Close"><span
             aria-hidden="true">&times;</span>
         </button>
-        <h4 class="modal-title">{{ 'UnArchive' | T}}</h4>
+        <h6 class="modal-title">{{ 'UnArchive' | T}}</h6>
     </div>
     <div class="modal-body">
         <form class="form-horizontal" name="add">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/storage/primary/primary-storage.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/storage/primary/primary-storage.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/storage/primary/primary-storage.html	(working copy)
@@ -1,125 +1,143 @@
 <div class="row">
     <div class="col-md-12">
         <div class="col-md-8">
-            <div class="row">
-                <div class="widget">
-                    <div class="widget-header">
-                        <span>{{ 'Storage Clean' | T }}</span>
-                    </div>
-                    <div>
-                        <form class="form-horizontal" name="storageform" unsaved-warning-form>
-                            <div class="form-group">
-                                <label class="control-label col-md-3">{{ 'Scheduled cleaning' | T}}</label>
-                                <div class="col-md-6">
-                                    <input bs-switch class="switch" ng-model="primaryStorage.scheduleDetail.schedule" type="checkbox" switch-active="true" resettable>
-                                </div>
+            <div class="widget">
+                <div class="widget-header">
+                    <span class="tab-header-1">{{ 'Storage Clean' | T }}</span>
+                </div>
+                <div>
+                    <form class="form-horizontal" name="storageform" unsaved-warning-form>
+                        <div class="form-group">
+                            <label class="control-label col-md-3">{{ 'Scheduled cleaning' | T}}</label>
+                            <div class="col-md-6">
+                                <input bs-switch class="switch" ng-model="primaryStorage.scheduleDetail.schedule"
+                                       type="checkbox" switch-active="true" resettable>
                             </div>
-                            <div class="form-group">
-                                <label class="control-label col-md-3">
-                                    {{ 'Retention duration of Data' | T}}
-                                    <i class="fa fa-info-circle" data-role="popover" data-popover-mode="hover" data-popover-position="top" data-popover-text="{{'Data exceeding the set period will be deleted' | T}}" data-popover-background="bg-cyan" data-popover-color="fg-white"></i>
-                                </label>
-                                <div class="col-md-3" style="display: inline-flex;">
-                                    <input type="number" oninput="if(value>999){value=999}else if(value<1){value=1}" class="form-control" name="duration" ng-model="primaryStorage.scheduleDetail.duration" resettable>
-                                    <span style="font-size: 15px; padding: 10px 5px">{{ 'Day' | T}}</span>
-                                </div>
+                        </div>
+                        <div class="form-group">
+                            <label class="control-label col-md-3">
+                                {{ 'Retention duration of Data' | T}}
+                                <i class="fa fa-info-circle" data-role="popover" data-popover-mode="hover"
+                                   data-popover-position="top"
+                                   data-popover-text="{{'Data exceeding the set period will be deleted' | T}}"
+                                   data-popover-background="bg-cyan" data-popover-color="fg-white"></i>
+                            </label>
+                            <div class="col-md-3" style="display: inline-flex;">
+                                <input type="number" oninput="if(value>999){value=999}else if(value<1){value=1}"
+                                       class="form-control" name="duration"
+                                       ng-model="primaryStorage.scheduleDetail.duration" resettable>
+                                <span style="font-size: 15px; padding: 10px 5px">{{ 'Day' | T}}</span>
                             </div>
-                            <div class="form-group">
-                                <label class="control-label col-md-3">
-                                    {{ 'Maximum disk usage' | T}}
-                                    <i class="fa fa-info-circle" data-role="popover" data-popover-mode="hover" data-popover-position="top" data-popover-text="{{'Historical data is deleted when the disk limit is exceeded' | T}}" data-popover-background="bg-cyan" data-popover-color="fg-white"></i>
-                                </label>
-                                <div class="col-md-3" style="display: inline-flex;">
-                                    <input type="number" oninput="if(value>90){value=90}else if(value<50){value=50}" class="form-control" name="percent" ng-model="primaryStorage.scheduleDetail.percent" resettable>
-                                    <span style="font-size: 15px; padding: 10px 5px">{{ '%' }}</span>
-                                </div>
+                        </div>
+                        <div class="form-group">
+                            <label class="control-label col-md-3">
+                                {{ 'Maximum disk usage' | T}}
+                                <i class="fa fa-info-circle" data-role="popover" data-popover-mode="hover"
+                                   data-popover-position="top"
+                                   data-popover-text="{{'Historical data is deleted when the disk limit is exceeded' | T}}"
+                                   data-popover-background="bg-cyan" data-popover-color="fg-white"></i>
+                            </label>
+                            <div class="col-md-3" style="display: inline-flex;">
+                                <input type="number" oninput="if(value>90){value=90}else if(value<50){value=50}"
+                                       class="form-control" name="percent"
+                                       ng-model="primaryStorage.scheduleDetail.percent" resettable>
+                                <span style="font-size: 15px; padding: 10px 5px">{{ '%' }}</span>
                             </div>
-                            <div class="form-group">
-                                <div class="col-md-offset-3 col-md-6">
-                                    <button ng-show="storageform.$dirty" class="btn btn-primary" ng-click="primaryStorage.applyCrontab()">{{ 'Save Changes' | T}}</button>
-                                    <button ng-show="storageform.$dirty" type="reset" class="btn btn-default btn-cancel" ng-click="storageform.$dirty=false;primaryStorage.cancel()">{{'Cancel'|T}}</button>
-                                    <button class="btn btn-success" ng-click="primaryStorage.cleanup()">{{ 'Clean up immediately' | T}}</button>
-                                </div>
+                        </div>
+                        <div class="form-group">
+                            <div class="col-md-offset-3 col-md-6">
+                                <button ng-show="storageform.$dirty" class="btn btn-primary"
+                                        ng-click="primaryStorage.applyCrontab()">{{ 'Save Changes' | T}}
+                                </button>
+                                <button ng-show="storageform.$dirty" type="reset" class="btn btn-default btn-cancel"
+                                        ng-click="storageform.$dirty=false;primaryStorage.cancel()">{{'Cancel' | T}}
+                                </button>
+                                <button class="btn btn-success" ng-click="primaryStorage.cleanup()">
+                                    {{ 'Clean up immediately' | T}}
+                                </button>
                             </div>
-                        </form>
-                    </div>
+                        </div>
+                    </form>
                 </div>
             </div>
-            <div class="row">
-                <div class="widget">
-                    <div class="widget-header">
-                        <span>{{ 'Storage Management' | T }}</span>
-                    </div>
-                    <div class="table-responsive" ng-if="!primaryStorage.detailPage">
-                        <table class="table table-striped table-hover">
-                            <thead>
-                            <tr>
-                                <th class="name">{{'Module' | T}}</th>
-                                <th>{{'Disk Usage' | T}}</th>
-                                <th>{{'Disk Size' | T}}</th>
-                            </tr>
-                            </thead>
-                            <tbody>
-                            <tr ng-repeat="item in primaryStorage.moduleList" ng-mouseenter="primaryStorage.enter(item)">
-                                <td style="cursor: pointer;" ng-click="primaryStorage.detail(item)"><a>{{ item.name | T}}</a></td>
-                                <td>
-                                    <div class="col-pb" ng-if="item.sizeStr">
-                                        <div class="progress" title="{{item.usage}}%">
-                                            <div class="progress-bar progress-bar-info" role="progressbar" ng-style="primaryStorage.getPercent(item.usage)" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
-                                            </div>
+            <div class="widget">
+                <div class="widget-header">
+                    <span class="tab-header-1">{{ 'Storage Management' | T }}</span>
+                </div>
+                <div class="table-responsive" ng-if="!primaryStorage.detailPage">
+                    <table class="table table-striped table-hover">
+                        <thead>
+                        <tr>
+                            <th class="name">{{'Module' | T}}</th>
+                            <th>{{'Disk Usage' | T}}</th>
+                            <th>{{'Disk Size' | T}}</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <tr ng-repeat="item in primaryStorage.moduleList"
+                            ng-mouseenter="primaryStorage.enter(item)">
+                            <td style="cursor: pointer;" ng-click="primaryStorage.detail(item)">
+                                <a>{{ item.name | T}}</a></td>
+                            <td>
+                                <div class="col-pb" ng-if="item.sizeStr">
+                                    <div class="progress" title="{{item.usage}}%">
+                                        <div class="progress-bar progress-bar-info" role="progressbar"
+                                             ng-style="primaryStorage.getPercent(item.usage)" aria-valuenow="60"
+                                             aria-valuemin="0" aria-valuemax="100">
                                         </div>
                                     </div>
-                                    <div class="col-pb" ng-if="!item.sizeStr">
-                                        <i class="fa fa-spinner fa-spin" style="color:#e4701d;"></i>
-                                    </div>
-                                </td>
-                                <td>
-                                    <span>{{item.sizeStr}}</span>
-                                </td>
-                            </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                    <div class="table-responsive" ng-if="primaryStorage.detailPage">
-                        <div class="table-toolbar">
-                            <div class="">
-                                <div class="btn-group">
-                                    <button title="{{'Back'|T}}" class="btn btn-link hive_enable_active" ng-click="primaryStorage.detailPage = false">
-                                        <i class="fa fa-arrow-left"></i>
-                                    </button>
                                 </div>
+                                <div class="col-pb" ng-if="!item.sizeStr">
+                                    <i class="fa fa-spinner fa-spin" style="color:#e4701d;"></i>
+                                </div>
+                            </td>
+                            <td>
+                                <span>{{item.sizeStr}}</span>
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="table-responsive" ng-if="primaryStorage.detailPage">
+                    <div class="table-toolbar">
+                        <div class="">
+                            <div class="btn-group">
+                                <button title="{{'Back'|T}}" class="btn btn-link hive_enable_active"
+                                        ng-click="primaryStorage.detailPage = false">
+                                    <i class="fa fa-arrow-left"></i>
+                                </button>
                             </div>
                         </div>
-                        <table class="table table-striped table-hover" ng-if="!primaryStorage.detailloading">
-                            <thead>
-                            <tr>
-                                <th class="name">{{'Name' | T}}</th>
-                                <th>{{'Description' | T}}</th>
-                                <th>{{'Disk Size' | T}}</th>
-                                <th>{{'Action' | T}}</th>
-                            </tr>
-                            </thead>
-                            <tbody>
-                            <tr ng-repeat="item in primaryStorage.detailPaths">
-                                <td>{{ item.name | T}}</td>
-                                <td>{{ item.description | T}}</td>
-                                <td>{{ item.sizeStr }}</td>
-                                <td ng-if="item.ui_url">
-                                    <a ui-sref="index.{{ item.ui_url }}">{{'View' | T}}</a>
-                                </td>
-                            </tr>
-                            </tbody>
-                        </table>
-                        <div style="text-align: center" ng-if="primaryStorage.detailloading">
-                            <img src="app/images/loading.gif">
-                        </div>
+                    </div>
+                    <table class="table table-striped table-hover" ng-if="!primaryStorage.detailloading">
+                        <thead>
+                        <tr>
+                            <th class="name">{{'Name' | T}}</th>
+                            <th>{{'Description' | T}}</th>
+                            <th>{{'Disk Size' | T}}</th>
+                            <th>{{'Action' | T}}</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <tr ng-repeat="item in primaryStorage.detailPaths">
+                            <td>{{ item.name | T}}</td>
+                            <td>{{ item.description | T}}</td>
+                            <td>{{ item.sizeStr }}</td>
+                            <td ng-if="item.ui_url">
+                                <a ui-sref="index.{{ item.ui_url }}">{{'View' | T}}</a>
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                    <div style="text-align: center" ng-if="primaryStorage.detailloading">
+                        <img src="app/images/loading.gif">
                     </div>
                 </div>
             </div>
         </div>
         <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 graph ng-scope">
             <div class="graph-title">
-                <span>{{primaryStorage.diskStatusWidget.title}}</span>
+                <span class="tab-header-1">{{primaryStorage.diskStatusWidget.title}}</span>
             </div>
             <div class="graph-container" disk-usage-pie="primaryStorage.diskStatusWidget" style="height: 360px"></div>
         </div>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/task/modal/task_detail_dialog.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/task/modal/task_detail_dialog.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/task/modal/task_detail_dialog.html	(working copy)
@@ -1,6 +1,6 @@
 <div class="modal-header">
     <button type="button" class="close" ng-click="taskDetail.modalClose()">&times;</button>
-    <h4 class="modal-title">{{'Description' | T}}»&nbsp;{{taskDetail.message.name}}</h4>
+    <h6 class="modal-title">{{'Description' | T}}»&nbsp;{{taskDetail.message.name}}</h6>
 </div>
 <div class="modal-body">
     <pre class="content" style="font-size: 14px;line-height: 20px;">{{taskDetail.message.content}}</pre>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/task/task.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/task/task.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/task/task.html	(working copy)
@@ -2,12 +2,12 @@
     <div class="col-md-12">
         <div class="widget">
             <div class="widget-header">
-                <span>{{ 'Managed Task' | T }}</span>
+                <span class="tab-header-1">{{ 'Managed Task' | T }}</span>
             </div>
             <div class="table-toolbar">
                 <div class="btn-group">
-                    <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="task.refresh()"><i class="fa fa-refresh"></i></button>
-                    <button class="btn btn-link" title="{{ 'Clear' | T }}" ng-click="task.clear()"><i class="array-delete"></i></button>
+                    <button class="btn btn-link" title="{{ 'Refresh' | T }}" ng-click="task.refresh()"><i class="fa fa-refresh an-tab-icon"></i></button>
+                    <button class="btn btn-link" title="{{ 'Clear' | T }}" ng-click="task.clear()"><i class="array-delete an-tab-icon"></i></button>
                 </div>
                 <div class="pull-right task-dropdown">
                     <div ng-dropdown-multiselect="" class="multiselect" checkboxes="true" translation-texts="multiSelectTransition"
@@ -87,7 +87,7 @@
                             <td>
                                 <!-- <a class="icon-box" title="{{ 'Modify Date' | T }}" ng-click="task.modifyTask(taskItem)" ng-class="{'icon-disabled': taskItem.state != 'waiting'}"><i class="array-edit"></i></a>
                                 <a class="icon-box" title="{{ 'Restart' | T }}" ng-click="task.restartTask(taskItem)" ng-class="{'icon-disabled':taskItem.state!='failed'}"><i class="array-reboot"></i></a> -->
-                                <a ng-if="user_auth_data.system.task.delete" class="icon-box" title="{{ 'Delete' | T }}" ng-click="task.deleteTask(taskItem)"><i class="array-delete"></i></a>
+                                <a ng-if="user_auth_data.system.task.delete" class="icon-box" title="{{ 'Delete' | T }}" ng-click="task.deleteTask(taskItem)"><i class="array-delete an-row-icon"></i></a>
                             </td>
                         </tr>
                     </tbody>
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/vs/modal/vs.add.html
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/vs/modal/vs.add.html	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/modules/vs/modal/vs.add.html	(working copy)
@@ -1,7 +1,7 @@
 <div id="vs-add">
     <div class="modal-header">
         <button type="button" class="close" ng-click="vsAdd.close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4><i class="array-add"></i>{{ 'Add New VS' | T}}</h4>
+        <h6><i class="array-add"></i>{{ 'Add New VS' | T}}</h6>
 
     </div>
     <div class="modal-body">
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/styles/blue/less/ComposerUI/global/body.less
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/styles/blue/less/ComposerUI/global/body.less	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/styles/blue/less/ComposerUI/global/body.less	(working copy)
@@ -3,9 +3,10 @@
 }
 
 .graph-title {
-    line-height: 25px;
+    line-height: 35px;
     background-color: @table-head;
 }
+
 .graph .graph-container {
     background-color: #fff !important;
 }
@@ -19,43 +20,67 @@
         border-radius: 4px 4px 0 0;
     }
 }
+
 .design-tabs .nav-tabs li a {
-	padding: 3px 10px;
+    padding: 3px 10px;
 }
 
-.nav-pills>li>a {
+.nav-pills > li > a {
     background-color: #f5f5f5;
 }
 
 #canvas_container {
     background-color: #fff;
 }
+
 .task-list .widget-body {
     background-color: #f5f5f5;
 }
+
 .task-list .widget-body .table tbody tr td a.name {
     color: #333;
 }
+
 .task-list .widget-body .table tbody tr td {
     border-bottom: 1px solid #e8e7e7;
 }
+
 .form-horizontal {
     background-color: #fff;
 }
+
 .modal-header {
     background-color: @theme-color;
 }
+
 .modal-footer {
     background-color: @theme-color;
 }
+
 .topology-container {
     .fa-angle-double-right, .fa-angle-double-left {
         color: #1b3656;
     }
+
     .border-topology {
         border: 2px dashed #1b3656;
     }
 }
+
 .select-list tr.st-selected {
     background-color: #d7d7e2 !important
-}
\ No newline at end of file
+}
+
+.an-tab-icon {
+    color: #357;
+    font-size: 18px !important;
+}
+
+.an-row-icon {
+    color: #357;
+    font-size: 16px !important;
+}
+
+.an-row-icon-status {
+    font-size: 16px !important;
+}
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/styles/blue/less/ComposerUI/global/navbar.less
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/styles/blue/less/ComposerUI/global/navbar.less	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/styles/blue/less/ComposerUI/global/navbar.less	(working copy)
@@ -1,5 +1,5 @@
 .navbar {
-    background-color: #3576be;
+    background-color: #357;
     .navbar-brand {
         padding: 7px 0;
         width: 218px;
@@ -12,7 +12,7 @@
         }
     }
     .navbar-brand:hover {
-        background-color: #165499;
+        background-color: #165;
     }
 
     span.title {
@@ -22,6 +22,13 @@
         font-size: 16px;
         letter-spacing: 1px;
     }
+    span.title1 {
+        line-height: 45px;
+        color: #fff;
+        margin-left: 15px;
+        font-size: 12px;
+        letter-spacing: 1px;
+    }
     .brand-info {
        display: none;
     }
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/styles/blue/less/ComposerUI/global/sidebar.less
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/styles/blue/less/ComposerUI/global/sidebar.less	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/styles/blue/less/ComposerUI/global/sidebar.less	(working copy)
@@ -1,51 +1,53 @@
 .sidebar {
-	background-color: @bg;
-	.module-header {
-		font-size: 12px;
-		font-weight: 700;
-		line-height: 30px;
-
-		color: @black-transparent;
-	}
-	.module-body {
-		li {
-			&:first-child {
-			border-top: 1px solid @bg-active;
-			}
-			a {
-			color: @white-dark;
-			border-bottom: 1px solid @bg-active;
-			}
-			
+    background-color: #357;
+
+    .module-header {
+        font-size: 12px;
+        font-weight: 700;
+        line-height: 30px;
+        color: @black-transparent;
+    }
+
+    .module-body {
+        li {
+            &:first-child {
+                border-top: 1px solid @bg-active;
+            }
+
+            a {
+                color: @white-dark;
+                border-bottom: 1px solid @bg-active;
+            }
+
             &.has-submenu.active,
             &.has-submenu.active > span > a {
                 background-color: transparent;
-				//color: @white-dark;
-				color: #ff8c00;
+                color: @white-dark;
+                //color: #ff8c00;
             }
-			&.active {
-				a {
-					background-color: @bg-active;
-					color: @active;
-				}
-			}
-		}
-	}
+
+            &.active {
+                a {
+                    background-color: @bg-active;
+                    color: @active;
+                }
+            }
+        }
+    }
 }
 
 .sidebar .module-body li.active .submenu a {
     color: #cdcdcd;
     background-color: #24323e;
 }
+
 .sidebar .module-body li.active .submenu li.active a {
     color: #ff8c00;
     background-color: #202b33;
 }
 
 
-
-
-#sidebarToggle {    
-	color: @white;
+#sidebarToggle {
+    color: @white;
 }
 
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/styles/blue/less/custom/global.less
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/styles/blue/less/custom/global.less	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/styles/blue/less/custom/global.less	(working copy)
@@ -7,10 +7,14 @@
 }
 
 .row {
-	margin-right: -15px !important;
+    margin-right: -15px !important;
     margin-left: -15px !important;
+    div {
+        margin-bottom: 1px !important;
+    }
 }
-html,body {
+
+html, body {
     background-color: #efeff4 !important;
 }
 
@@ -20,21 +24,36 @@
     }
 }
 
-.navbar.page-nav{
+.navbar.page-nav {
     border-top: none;
     border-bottom-color: #ddd;
 }
 
 .page-nav {
-    padding-left:240px;
-    margin-bottom:15px;
+    padding-left: 240px;
+    margin-bottom: 15px;
 }
+
 .page-nav .navbar-content .btn-link {
     padding: 3px 12px;
     font-size: 18px;
 }
+
 .navbar-title i {
     margin-right: 10px;
     font-size: large;
 }
 
+.tab-header {
+    font-size: small;
+    font-weight: 500;
+}
+
+.tab-header-1 {
+    font-size: small;
+    font-weight: 500;
+}
+
+th {
+    font-weight: 500 !important;
+}
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/styles/general/ComposerUI/global/body.less
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/styles/general/ComposerUI/global/body.less	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/styles/general/ComposerUI/global/body.less	(working copy)
@@ -42,7 +42,7 @@
         width: 450px;
         top: 70px;
     }
-    
+
     input[type='checkbox'],
     input[type='file'],
     input[type='radio'] {
@@ -116,7 +116,7 @@
 
 #main {
     padding-left: 218px;
-    padding-top: 60px;
+    padding-top: 48px;
 }
 #main .nav + .container-fluid {
     margin-top: 15px;
@@ -312,7 +312,7 @@
             padding-left: 15px;
         }
     }
-    
+
 }
 .table-container {
     pre {
@@ -366,3 +366,57 @@
         width: 35px;
     }
 }
+
+.col-xs-1,
+.col-sm-1,
+.col-md-1,
+.col-lg-1,
+.col-xs-2,
+.col-sm-2,
+.col-md-2,
+.col-lg-2,
+.col-xs-3,
+.col-sm-3,
+.col-md-3,
+.col-lg-3,
+.col-xs-4,
+.col-sm-4,
+.col-md-4,
+.col-lg-4,
+.col-xs-5,
+.col-sm-5,
+.col-md-5,
+.col-lg-5,
+.col-xs-6,
+.col-sm-6,
+.col-md-6,
+.col-lg-6,
+.col-xs-7,
+.col-sm-7,
+.col-md-7,
+.col-lg-7,
+.col-xs-8,
+.col-sm-8,
+.col-md-8,
+.col-lg-8,
+.col-xs-9,
+.col-sm-9,
+.col-md-9,
+.col-lg-9,
+.col-xs-10,
+.col-sm-10,
+.col-md-10,
+.col-lg-10,
+.col-xs-11,
+.col-sm-11,
+.col-md-11,
+.col-lg-11,
+.col-xs-12,
+.col-sm-12,
+.col-md-12,
+.col-lg-12 {
+    position: relative;
+    min-height: 1px;
+    padding-left: 1px;
+    padding-right: 1px;
+}
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/styles/general/ComposerUI/global/login.less
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/styles/general/ComposerUI/global/login.less	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/styles/general/ComposerUI/global/login.less	(working copy)
@@ -31,17 +31,19 @@
                 margin-top: 35px;
                 text-align: center;
                 img {
-                    width: 50px;
+                    height: 45px;
+                    width: 150px;
                 }
             }
             .login-text1 {
                 padding-left: 15px;
                 margin-top: 35px;
                 line-height: 35px;
-                font-size: 30px;
+                font-size: 21px;
                 font-weight: 400;
                 color: #fff;
                 letter-spacing: 1px;
+                text-align: center;
             }
             .login-text2 {
                 margin-top: 25px;
@@ -79,12 +81,12 @@
                         padding-left: 40px;
                     }
                 }
-                
+
                 button.btn-primary {
                     background-color: #2960b0;
                     border-color: #2960b0
                 }
-                
+
             }
 
 
@@ -97,9 +99,9 @@
                 right: 0;
             }
         }
-        
+
     }
-} 
+}
 
 
 
@@ -112,4 +114,4 @@
 .fa-arraylock {
     background-image: url(../images/loggin-icon-passwd.png);
     background-size: 100%;
-}
\ No newline at end of file
+}
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/styles/general/ComposerUI/global/maincontent.less
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/styles/general/ComposerUI/global/maincontent.less	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/styles/general/ComposerUI/global/maincontent.less	(working copy)
@@ -5,9 +5,11 @@
 
             border: 1px solid @border;
             background-color: @white-transparent-dark;
+
             &.ui-sortable-helper {
                 background-color: @bg;
             }
+
             .file-icon {
                 line-height: 44px;
 
@@ -15,6 +17,7 @@
 
                 text-align: center;
             }
+
             .control-icon {
                 line-height: 44px;
 
@@ -24,9 +27,11 @@
 
                 background-color: @border;
             }
+
             .drag-icon {
                 float: right;
             }
+
             .remove-icon {
                 position: absolute;
                 top: -1px;
@@ -40,7 +45,10 @@
         }
     }
 }
+
 .modal-footer {
+    padding: 2px;
+
     .btn {
         &.btn-default {
             /*float: left;*/
@@ -57,9 +65,11 @@
 
     width: 100% !important;
     margin: 0;
+
     .modal-content {
         height: 100%;
     }
+
     .modal-body {
         position: absolute;
         top: 43px;
@@ -70,3 +80,7 @@
         max-height: none !important;
     }
 }
+
+.modal-header {
+    padding: 6px;
+}
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/styles/general/ComposerUI/global/navbar.less
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/styles/general/ComposerUI/global/navbar.less	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/styles/general/ComposerUI/global/navbar.less	(working copy)
@@ -14,9 +14,7 @@
     border-radius: 0;
     .navbar-title {
         line-height: 50px;
-
         margin: 0;
-
         color: @theme-color-font;
     }
     .navbar-brand {
@@ -102,7 +100,7 @@
     }
 }
 .navbar {
-    background-color: #3576be;
+    background-color: #357;
     .navbar-brand {
         padding: 7px 0;
         width: 218px;
@@ -115,7 +113,7 @@
         }
     }
     .navbar-brand:hover {
-        background-color: #165499;
+        background-color: #165;
     }
 
     span.title {
Index: /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/styles/general/ComposerUI/global/sidebar.less
===================================================================
--- /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/styles/general/ComposerUI/global/sidebar.less	(revision 2477)
+++ /branches/amp_3_7/src/webui/webui/htdocs/new/src/client/app/styles/general/ComposerUI/global/sidebar.less	(working copy)
@@ -115,7 +115,7 @@
     }
 }
 
-#sidebarToggle {    
+#sidebarToggle {
     font-size: 18px;
     cursor: pointer;
     padding: 15px;
@@ -125,12 +125,12 @@
         margin-left: 168px;
     }
 }
-.body-collapsed {    
-    #sidebarToggle {        
+.body-collapsed {
+    #sidebarToggle {
         margin-left: 0;
         transform: rotate(180deg);
     }
     .sidebar>li {
         margin-bottom: 20px;
     }
-}
\ No newline at end of file
+}
Index: /branches/amp_3_7/tools/requirements.txt
===================================================================
--- /branches/amp_3_7/tools/requirements.txt	(revision 0)
+++ /branches/amp_3_7/tools/requirements.txt	(working copy)
@@ -0,0 +1,45 @@
+APScheduler==3.3.1
+backports.ssl-match-hostname==3.5.0.1
+configobj==4.7.2
+decorator==3.4.0
+Django==1.5.12
+django-revproxy==0.10.0
+elasticsearch==6.0.0
+flup==1.0.2
+funcsigs==1.0.2
+futures==3.1.1
+influxdb==5.3.1
+iniparse==0.4
+ipaddress==1.0.16
+javapackages==1.0.0
+Jinja2==2.7.2
+lxml==3.2.1
+M2Crypto==0.25.1
+MarkupSafe==0.11
+msgpack==1.0.4
+perf==0.1
+Pillow==4.0.0
+psutil==5.0.0
+psycopg2==2.7.5
+pycurl==7.19.0
+pyftpdlib==1.5.2
+pygobject==3.22.0
+pygpgme==0.3
+pyliblzma==0.5.3
+python-linux-procfs==0.4.9
+pytz==2017.2
+pyudev==0.15
+pyxattr==0.5.1
+reportlab==3.4.0
+requests==2.13.0
+schedule==0.6.0
+schedutils==0.4
+six==1.10.0
+slip==0.4.0
+slip.dbus==0.4.0
+tftpy==0.6.2
+tzlocal==1.4
+urlgrabber==3.10
+urllib3==1.22
+Whoosh==2.7.4
+yum-metadata-parser==1.1.4
