RubyGems - simple_apm - Versions diffs - 1.0.14 → 1.1.0 - Mend

simple_apm 1.0.14 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

checksums.yaml +5 -5
data/Rakefile +0 -5
data/app/assets/stylesheets/simple_apm/application.css +572 -1
data/app/controllers/simple_apm/apm_controller.rb +1 -0
data/app/models/simple_apm/action.rb +20 -1
data/app/models/simple_apm/request.rb +1 -0
data/app/views/layouts/simple_apm/application.html.erb +28 -61
data/app/views/simple_apm/apm/action_info.html.erb +72 -47
data/app/views/simple_apm/apm/actions.html.erb +49 -26
data/app/views/simple_apm/apm/dashboard.html.erb +100 -14
data/app/views/simple_apm/apm/data.html.erb +69 -32
data/app/views/simple_apm/apm/index.html.erb +35 -21
data/app/views/simple_apm/apm/show.html.erb +132 -82
data/lib/simple_apm/redis.rb +2 -2
data/lib/simple_apm/setting.rb +11 -1
data/lib/simple_apm/version.rb +1 -1
data/lib/simple_apm/worker.rb +3 -1
data/lib/simple_apm.rb +12 -9
metadata +37 -13

data/app/views/layouts/simple_apm/application.html.erb CHANGED Viewed

@@ -7,49 +7,11 @@
   <meta content="width=device-width, initial-scale=1.0" name="viewport">
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   <link rel="stylesheet" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
+  <%= stylesheet_link_tag "simple_apm/application", media: "all" %>
   <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.js"></script>
   <script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
-  <style>
-    footer {
-      text-align: center;
-      padding: 10px;
-      border-top: 1px solid #999999;
-    }
-    a.navbar-brand.active {
-      color: #00AEEF !important;
-    }
-    #page-container {
-      min-height: 80vh;
-    }
-    .select-apm-date {
-      width: auto;
-      float: right;
-      margin-top: 8px;
-    }
-    .select-apm-date > select {
-      display: inline-block;
-      width: auto;
-    }
-    .sql {
-      max-width: 300px;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      color: #00AEEF;
-      cursor: pointer;
-    }
-    pre {
-      white-space: pre-wrap;
-    }
-  </style>
   <script type="text/javascript">
       // JqueryDataTable自定义排序方法
       jQuery.extend(jQuery.fn.dataTableExt.oSort, {
@@ -79,11 +41,15 @@
   <%= csrf_meta_tags %>
 </head>
-<body>
-<div id="page-container">
-  <nav class="navbar navbar-default navbar-fixed-top">
-    <div class="container">
-      <div class="navbar-header">
+<body class="simple-apm">
+<div id="page-container" class="apm-shell">
+  <nav class="apm-topbar">
+    <div class="apm-topbar-inner">
+      <div class="apm-brand">
+        <span class="apm-brand-mark">SA</span>
+        <span class="apm-brand-name">Simple APM</span>
+      </div>
+      <div class="apm-nav">
         <%
           [
             [dashboard_path, 'Dashboard'],
@@ -98,36 +64,37 @@
           </a>
         <% end %>
       </div>
-      <div class="select-apm-date">
-        统计日期
+      <div class="select-apm-date apm-date-select">
+        <span>统计日期</span>
         <%= select_tag 'apm_date', options_for_select(SimpleApm::Redis.in_apm_days, apm_date), class: 'form-control' %>
       </div>
     </div>
   </nav>
-  <div class="container" style="margin-top: 55px">
+  <main class="apm-content">
     <%= yield %>
-  </div>
+  </main>
 </div>
-<footer style="text-align: center">
-  <% SimpleApm::Redis.simple_info.each do |k, v| %>
-    <label><%= k %>：</label><span><%= v %></span>
-  <% end %>
-  <p>
+<footer class="apm-footer">
+  <div class="apm-footer-status">
     <% if SimpleApm::Redis.running? %>
-      <span style="color: greenyellow">数据收集中……</span>
+      <span class="apm-status apm-status-ok">数据收集中</span>
     <% else %>
-      <span style="color: red">已暂停</span>
+      <span class="apm-status apm-status-danger">已暂停</span>
     <% end %>
-  </p>
+  </div>
+  <div class="apm-footer-meta">
+    <% SimpleApm::Redis.simple_info.each do |k, v| %>
+      <span><label><%= k %>：</label><%= v %></span>
+    <% end %>
+  </div>
 </footer>
 <div id="sql-modal" class="modal" aria-hidden="true" role="dialog" style="display: none;" tabindex="-1">
   <div class="modal-dialog modal-lg modal-dialog-popout">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <div class="panel-title">SQL</div>
+    <div class="apm-modal-panel">
+      <div class="apm-modal-header">
+        <div class="apm-modal-title">SQL</div>
       </div>
-      <div class="panel-body">
+      <div class="apm-modal-body">
         <pre class="modal-content" data-lang="SQL"></pre>
       </div>
     </div>

data/app/views/simple_apm/apm/action_info.html.erb CHANGED Viewed

@@ -1,48 +1,73 @@
-<h4>请求概况</h4>
-<h5><%= @action.name%></h5>
-<p>
-  <label>当日点击次数：</label>
-  <span><%= @action.click_count %></span>
-</p>
-<p>
-  <label>平均响应时间：</label>
-  <span><%= sec_str @action.time.to_f/@action.click_count.to_i %></span>
-</p>
-<p>
-  <label>最慢响应时间：</label>
-  <span><%= link_to sec_str(@action.slow_time), show_path(id: @action.slow_id) %></span>
-</p>
-<p>
-  <label>最快响应时间：</label>
-  <span><%= link_to sec_str(@action.fast_time), show_path(id: @action.fast_id) %></span>
-</p>
-<table class="table table-bordered">
-  <tr>
-    <th>响应时间</th>
-    <th>访问时间</th>
-    <th>内存波动</th>
-    <th>请求id</th>
-    <th>访问ip</th>
-    <th>server</th>
-  </tr>
-  <% @action.slow_requests.each do |slow_request| %>
-    <%
-      r = slow_request.request
-      next if r.blank?
-    %>
-    <tr>
-      <td>
-        <%= sec_str r.during %>
-        (DB: <%= sec_str r.db_runtime %> ,
-        View: <%= sec_str r.view_runtime %>
-        <%= "HTTP: #{sec_str r.net_http_during}" if r.net_http_during.to_f > 0 %>)
-      </td>
-      <td><%= time_label r.started %></td>
-      <td><%= r.memory_during.to_f.round(1) %></td>
-      <td><%= link_to r.request_id, show_path(id: r.request_id) %></td>
-      <td><%= r.remote_addr %></td>
-      <td><%= r.host %></td>
-    </tr>
-  <% end %>
-</table>
+<div class="apm-page-header">
+  <div>
+    <h1 class="apm-page-title">Action 概况</h1>
+    <p class="apm-page-subtitle"><%= @action.name %></p>
+  </div>
+</div>
+<div class="apm-metrics">
+  <div class="apm-stat">
+    <p class="apm-stat-label">当日点击次数</p>
+    <div class="apm-stat-value"><%= @action.click_count %></div>
+  </div>
+  <div class="apm-stat">
+    <p class="apm-stat-label">平均响应时间</p>
+    <div class="apm-stat-value"><%= sec_str @action.time.to_f/@action.click_count.to_i %></div>
+  </div>
+  <div class="apm-stat">
+    <p class="apm-stat-label">平均DB时间</p>
+    <div class="apm-stat-value"><%= sec_str @action.avg_db_time %></div>
+  </div>
+  <div class="apm-stat">
+    <p class="apm-stat-label">平均SQL次数</p>
+    <div class="apm-stat-value"><%= @action.avg_queries_count.round(1) %></div>
+  </div>
+  <div class="apm-stat">
+    <p class="apm-stat-label">最慢响应时间</p>
+    <div class="apm-stat-value"><%= link_to sec_str(@action.slow_time), show_path(id: @action.slow_id) %></div>
+    <div class="apm-stat-meta">最快 <%= link_to sec_str(@action.fast_time), show_path(id: @action.fast_id) %></div>
+  </div>
+</div>
+<section class="apm-panel">
+  <div class="apm-panel-header">
+    <div>
+      <h2 class="apm-panel-title">慢请求样本</h2>
+      <p class="apm-panel-subtitle">保留该 Action 下响应最慢的请求。</p>
+    </div>
+  </div>
+  <div class="apm-panel-body">
+    <div class="apm-table-wrap">
+      <table class="table table-bordered">
+        <tr>
+          <th>响应时间</th>
+          <th>访问时间</th>
+          <th>内存波动</th>
+          <th>请求id</th>
+          <th>访问ip</th>
+          <th>server</th>
+        </tr>
+        <% @action.slow_requests.each do |slow_request| %>
+          <%
+            r = slow_request.request
+            next if r.blank?
+          %>
+          <tr>
+            <td>
+              <%= sec_str r.during %>
+              (DB: <%= sec_str r.db_runtime %> ,
+              SQL: <%= r.queries_count.to_i %> ,
+              View: <%= sec_str r.view_runtime %>
+              <%= "HTTP: #{sec_str r.net_http_during}" if r.net_http_during.to_f > 0 %>)
+            </td>
+            <td><%= time_label r.started %></td>
+            <td><%= r.memory_during.to_f.round(1) %></td>
+            <td><%= link_to r.request_id, show_path(id: r.request_id) %></td>
+            <td><%= r.remote_addr %></td>
+            <td><%= r.host %></td>
+          </tr>
+        <% end %>
+      </table>
+    </div>
+  </div>
+</section>

data/app/views/simple_apm/apm/actions.html.erb CHANGED Viewed

@@ -1,34 +1,57 @@
-<table id="actions-table" class="table">
-  <thead>
-  <tr>
-    <th>Name</th>
-    <th>点击次数</th>
-    <th>平均响应时间</th>
-    <th>平均http访问时间</th>
-    <th>最快响应时间</th>
-    <th>最慢响应时间</th>
-  </tr>
-  </thead>
-  <tbody>
-  <% @actions.each do |action| %>
-    <tr>
-      <td><%= link_to action.name, action_info_path(action_name: action.name) %></td>
-      <td><%= action.click_count %></td>
-      <td><%= sec_str action.avg_time %></td>
-      <td><%= sec_str action.avg_http_time %></td>
-      <td><%= link_to sec_str(action.fast_time), show_path(id: action.fast_id) %></td>
-      <td><%= link_to sec_str(action.slow_time), show_path(id: action.slow_id) %></td>
-    </tr>
-  <% end %>
-  </tbody>
-</table>
+<div class="apm-page-header">
+  <div>
+    <h1 class="apm-page-title">Action 性能</h1>
+    <p class="apm-page-subtitle">按 Controller#Action 聚合访问次数、响应时间和 SQL 行为。</p>
+  </div>
+</div>
+<section class="apm-panel">
+  <div class="apm-panel-header">
+    <div>
+      <h2 class="apm-panel-title">Action 列表</h2>
+      <p class="apm-panel-subtitle">点击 Action 名称查看该接口的慢请求样本。</p>
+    </div>
+  </div>
+  <div class="apm-panel-body">
+    <div class="apm-table-wrap">
+      <table id="actions-table" class="table">
+        <thead>
+        <tr>
+          <th>Name</th>
+          <th>点击次数</th>
+          <th>平均响应时间</th>
+          <th>平均DB时间</th>
+          <th>平均SQL次数</th>
+          <th>平均http访问时间</th>
+          <th>最快响应时间</th>
+          <th>最慢响应时间</th>
+        </tr>
+        </thead>
+        <tbody>
+        <% @actions.each do |action| %>
+          <tr>
+            <td><%= link_to action.name, action_info_path(action_name: action.name) %></td>
+            <td><%= action.click_count %></td>
+            <td><%= sec_str action.avg_time %></td>
+            <td><%= sec_str action.avg_db_time %></td>
+            <td><%= action.avg_queries_count.round(1) %></td>
+            <td><%= sec_str action.avg_http_time %></td>
+            <td><%= link_to sec_str(action.fast_time), show_path(id: action.fast_id) %></td>
+            <td><%= link_to sec_str(action.slow_time), show_path(id: action.slow_id) %></td>
+          </tr>
+        <% end %>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</section>
 <script type="text/javascript">
   $(document).ready(function(){
       $('#actions-table').DataTable({
           iDisplayLength: 25,
           // 自定义的排序方法
-          aoColumnDefs: [ {sType: "sec", aTargets: [2,3,4]}]
+          aoColumnDefs: [ {sType: "sec", aTargets: [2,3,5,6]}]
       })
   })
-</script>
+</script>

data/app/views/simple_apm/apm/dashboard.html.erb CHANGED Viewed

@@ -1,37 +1,123 @@
-<div id="time_chart" style="height: 400px;width: auto"></div>
-<div id="hits_chart" style="height: 400px;width: auto"></div>
+<div class="apm-page-header">
+  <div>
+    <h1 class="apm-page-title">性能概览</h1>
+    <p class="apm-page-subtitle">按 10 分钟粒度观察响应时间和访问量趋势。</p>
+  </div>
+</div>
+<div class="apm-metrics">
+  <div class="apm-stat">
+    <p class="apm-stat-label">统计点</p>
+    <div class="apm-stat-value"><%= @x_names.length %></div>
+    <div class="apm-stat-meta">10 分钟区间</div>
+  </div>
+  <div class="apm-stat">
+    <p class="apm-stat-label">访问次数</p>
+    <div class="apm-stat-value"><%= @hits_arr.map(&:to_i).sum %></div>
+    <div class="apm-stat-meta">当前日期累计</div>
+  </div>
+  <div class="apm-stat">
+    <p class="apm-stat-label">最高平均响应</p>
+    <div class="apm-stat-value"><%= sec_str(@time_arr.map(&:to_f).max.to_f) %></div>
+    <div class="apm-stat-meta">区间峰值</div>
+  </div>
+  <div class="apm-stat">
+    <p class="apm-stat-label">当前采集</p>
+    <div class="apm-stat-value">
+      <% if SimpleApm::Redis.running? %>
+        <span class="apm-status apm-status-ok">运行中</span>
+      <% else %>
+        <span class="apm-status apm-status-danger">已暂停</span>
+      <% end %>
+    </div>
+    <div class="apm-stat-meta">Redis 状态</div>
+  </div>
+  <div class="apm-stat">
+    <p class="apm-stat-label">查询日期</p>
+    <div class="apm-stat-value"><%= SimpleApm::RedisKey.query_date || Time.now.strftime('%Y-%m-%d') %></div>
+    <div class="apm-stat-meta">可在右上角切换</div>
+  </div>
+</div>
+<div class="apm-grid">
+  <section class="apm-panel apm-col-6">
+    <div class="apm-panel-header">
+      <div>
+        <h2 class="apm-panel-title">响应时间</h2>
+        <p class="apm-panel-subtitle">每个时间段的平均响应耗时。</p>
+      </div>
+    </div>
+    <div class="apm-panel-body">
+      <div id="time_chart" class="apm-chart"></div>
+    </div>
+  </section>
+  <section class="apm-panel apm-col-6">
+    <div class="apm-panel-header">
+      <div>
+        <h2 class="apm-panel-title">访问次数</h2>
+        <p class="apm-panel-subtitle">每个时间段的请求数量。</p>
+      </div>
+    </div>
+    <div class="apm-panel-body">
+      <div id="hits_chart" class="apm-chart"></div>
+    </div>
+  </section>
+</div>
 <script>
   var time_chart = echarts.init(document.getElementById('time_chart')),
       hits_chart = echarts.init(document.getElementById('hits_chart'));
   time_chart.setOption({
-    title: {
-      text: '响应时间'
-    },
-    tooltip: {},
+    color: ['#0f766e'],
+    grid: {left: 48, right: 18, top: 24, bottom: 36},
+    tooltip: {trigger: 'axis'},
     xAxis: {
-      data: <%= @x_names.to_json.html_safe %>
+      data: <%= @x_names.to_json.html_safe %>,
+      axisLine: {lineStyle: {color: '#c8d2df'}},
+      axisLabel: {color: '#667085'}
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: {show: false},
+      splitLine: {lineStyle: {color: '#eef2f7'}},
+      axisLabel: {color: '#667085'}
     },
-    yAxis: {type: 'value'},
     series: [{
         type: 'line',
         smooth: true,
+        symbolSize: 6,
+        areaStyle: {color: 'rgba(15, 118, 110, 0.10)'},
         data: <%= @time_arr.to_json.html_safe %>
       }]
   })
   hits_chart.setOption({
-    title: {
-      text: '访问次数'
-    },
-    tooltip: {},
+    color: ['#2563eb'],
+    grid: {left: 48, right: 18, top: 24, bottom: 36},
+    tooltip: {trigger: 'axis'},
     xAxis: {
-      data: <%= @x_names.to_json.html_safe %>
+      data: <%= @x_names.to_json.html_safe %>,
+      axisLine: {lineStyle: {color: '#c8d2df'}},
+      axisLabel: {color: '#667085'}
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: {show: false},
+      splitLine: {lineStyle: {color: '#eef2f7'}},
+      axisLabel: {color: '#667085'}
     },
-    yAxis: {type: 'value'},
     series: [{
       type: 'line',
       smooth: true,
+      symbolSize: 6,
+      areaStyle: {color: 'rgba(37, 99, 235, 0.10)'},
       data: <%= @hits_arr.to_json.html_safe %>
     }]
   })
+  $(window).on('resize', function () {
+    time_chart.resize()
+    hits_chart.resize()
+  })
 </script>

data/app/views/simple_apm/apm/data.html.erb CHANGED Viewed

@@ -1,33 +1,70 @@
-<% if SimpleApm::Redis.running? %>
-  <%= link_to '暂停收集数据', data_delete_path(type: 'stop_data'), class: 'btn btn-warning btn-sm', 'data-confirm'=>'确定暂停吗？' %>
-<% else %>
-  <%= link_to '继续收集数据', data_delete_path(type: 'rerun_data'), class: 'btn btn-primary btn-sm' %>
-<% end %>
-<%= link_to '', data_delete_path(type: ''), class: 'btn' %>
-<p class="pull-right">
-  <span class="text-danger">删除数据：</span>
-  <%= link_to '保留一周数据', data_delete_path(type: 'week'), class: 'btn btn-danger', 'data-confirm' => '确定删除所有一周以前的数据？' %>
-  <%= link_to '保留一个月数据', data_delete_path(type: 'month'), class: 'btn btn-danger', 'data-confirm' => '确定删除所有一个月以前的数据？' %>
-</p>
+<div class="apm-page-header">
+  <div>
+    <h1 class="apm-page-title">数据管理</h1>
+    <p class="apm-page-subtitle">管理采集开关和历史 Redis 数据。</p>
+  </div>
+</div>
-<table class="table table-bordered">
-  <thead>
-  <tr>
-    <th>日期</th>
-    <th>请求数量</th>
-    <th>平均响应时间</th>
-    <th>操作</th>
-  </tr>
-  </thead>
-  <tbody>
-  <!--  {day: date_str, hits: hits, time: time, avg_time: avg_time}-->
-  <% @data.each do |d| %>
-    <tr>
-      <td><%= d[:day] %></td>
-      <td><%= d[:hits] %></td>
-      <td><%= sec_str d[:avg_time] %></td>
-      <td><%= link_to '删除', data_delete_path(date: d[:day]), 'data-confirm' => '确定删除？' %></td>
-    </tr>
-  <% end %>
-  </tbody>
-</table>
+<section class="apm-panel">
+  <div class="apm-panel-header">
+    <div>
+      <h2 class="apm-panel-title">采集状态</h2>
+      <p class="apm-panel-subtitle">暂停后 middleware 不再记录新的请求性能数据。</p>
+    </div>
+    <div class="apm-toolbar-actions">
+      <% if SimpleApm::Redis.running? %>
+        <span class="apm-status apm-status-ok">运行中</span>
+        <%= link_to '暂停收集数据', data_delete_path(type: 'stop_data'), class: 'btn btn-warning btn-sm', 'data-confirm'=>'确定暂停吗？' %>
+      <% else %>
+        <span class="apm-status apm-status-danger">已暂停</span>
+        <%= link_to '继续收集数据', data_delete_path(type: 'rerun_data'), class: 'btn btn-primary btn-sm' %>
+      <% end %>
+    </div>
+  </div>
+  <div class="apm-panel-body">
+    <div class="apm-toolbar">
+      <div>
+        <strong>删除数据</strong>
+        <p class="apm-page-subtitle">按保留周期清理历史数据，或删除单日数据。</p>
+      </div>
+      <div class="apm-toolbar-actions">
+        <%= link_to '保留一周数据', data_delete_path(type: 'week'), class: 'btn btn-danger', 'data-confirm' => '确定删除所有一周以前的数据？' %>
+        <%= link_to '保留一个月数据', data_delete_path(type: 'month'), class: 'btn btn-danger', 'data-confirm' => '确定删除所有一个月以前的数据？' %>
+      </div>
+    </div>
+  </div>
+</section>
+<section class="apm-panel">
+  <div class="apm-panel-header">
+    <div>
+      <h2 class="apm-panel-title">历史数据</h2>
+      <p class="apm-panel-subtitle">以日期为单位查看采集量和平均响应时间。</p>
+    </div>
+  </div>
+  <div class="apm-panel-body">
+    <div class="apm-table-wrap">
+      <table class="table table-bordered">
+        <thead>
+        <tr>
+          <th>日期</th>
+          <th>请求数量</th>
+          <th>平均响应时间</th>
+          <th>操作</th>
+        </tr>
+        </thead>
+        <tbody>
+        <!--  {day: date_str, hits: hits, time: time, avg_time: avg_time}-->
+        <% @data.each do |d| %>
+          <tr>
+            <td><%= d[:day] %></td>
+            <td><%= d[:hits] %></td>
+            <td><%= sec_str d[:avg_time] %></td>
+            <td><%= link_to '删除', data_delete_path(date: d[:day]), class: 'apm-danger-link', 'data-confirm' => '确定删除？' %></td>
+          </tr>
+        <% end %>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</section>

data/app/views/simple_apm/apm/index.html.erb CHANGED Viewed

@@ -1,24 +1,38 @@
-<style>
-  .container{
-    width: 90%;
-    min-width: 1200px;
-  }
-</style>
-<table id="slow-requests" class="table" style="width: 100%">
-  <thead>
-  <tr>
-    <th>请求时间</th>
-    <th>ActionName</th>
-    <th>TotalTime</th>
-    <th>DB</th>
-    <th>View</th>
-    <th>HTTP</th>
-    <th>Memory(Mb)</th>
-    <th>server</th>
-    <th>ip</th>
-  </tr>
-  </thead>
-</table>
+<div class="apm-page-header">
+  <div>
+    <h1 class="apm-page-title">慢事务列表</h1>
+    <p class="apm-page-subtitle">按响应耗时排序，快速定位 DB、SQL、View 和外部请求占比。</p>
+  </div>
+</div>
+<section class="apm-panel">
+  <div class="apm-panel-header">
+    <div>
+      <h2 class="apm-panel-title">请求样本</h2>
+      <p class="apm-panel-subtitle">默认加载最近的慢请求记录。</p>
+    </div>
+  </div>
+  <div class="apm-panel-body">
+    <div class="apm-table-wrap">
+      <table id="slow-requests" class="table">
+        <thead>
+        <tr>
+          <th>请求时间</th>
+          <th>ActionName</th>
+          <th>TotalTime</th>
+          <th>DB</th>
+          <th>SQL</th>
+          <th>View</th>
+          <th>HTTP</th>
+          <th>Memory(Mb)</th>
+          <th>server</th>
+          <th>ip</th>
+        </tr>
+        </thead>
+      </table>
+    </div>
+  </div>
+</section>
 <script type="text/javascript">
   $(document).ready(function () {