index.tmpl 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. {{template "header.tmpl" .}}
  2. </head>
  3. <body>
  4. {{template "navbar.tmpl" .}}
  5. <div class="container-fluid">
  6. <h4 class="text-center">Redis实时状态查看&nbsp;<small>[<a href="#" id="btn_refresh">刷新</a>]</small></h4>
  7. <hr />
  8. <table class="table table-bordered table-striped">
  9. <thead>
  10. <tr>
  11. <th>ID</th>
  12. <th>服务地址</th>
  13. <th>备注</th>
  14. <th>版本号</th>
  15. <th>进程ID</th>
  16. <th>上线时长</th>
  17. <th>CPU(USR/SYS)</th>
  18. <th>OPS/QPS</th>
  19. <th>系统内存</th>
  20. <th>分配内存</th>
  21. <th>已用内存</th>
  22. <th>淘汰策略</th>
  23. <th>回写规则</th>
  24. <th>过期数</th>
  25. <th>丢弃数</th>
  26. <th>当前连接</th>
  27. <th>阻塞连接</th>
  28. <th>拒绝连接</th>
  29. <th>取命中</th>
  30. <th>取未命中</th>
  31. <th>DB0使用</th>
  32. <th>详情</th>
  33. </tr>
  34. </thead>
  35. <tbody id="list"></tbody>
  36. </table>
  37. </div>
  38. <script type="text/javascript">
  39. var $SESS = {{.Sess}};
  40. $(function(){
  41. function load_stats() {
  42. $('#list').empty();
  43. $.get("/index/stats", {}, function(resp){
  44. if (resp && resp.errno == 0) {
  45. var html = '';
  46. for (var i=0; i<resp.data.length; i++) {
  47. var item = resp.data[i];
  48. if (item.Error == '') {
  49. if (typeof item.Data.db0 == 'undefined') {
  50. item.Data.db0 = '-';
  51. }
  52. var qps = parseInt(item.Data.instantaneous_ops_per_sec), qps_flag = '';
  53. if (qps > 30000) {
  54. qps_flag = 'danger';
  55. } else if (qps > 10000) {
  56. qps_flag = 'warning';
  57. }
  58. var maxmemory = parseInt(item.Data.maxmemory), maxmemory_flag = '';
  59. if (maxmemory == 0) {
  60. maxmemory_flag = 'danger';
  61. }
  62. var used_memory_pc = (maxmemory > 0 ? parseInt(item.Data.used_memory) / maxmemory : 0), used_memory_flag = '';
  63. if (used_memory_pc > 0.9) {
  64. maxmemory_flag = 'danger';
  65. } else if (used_memory_pc > 0.8) {
  66. maxmemory_flag = 'warning';
  67. }
  68. var evicted_keys_flag = parseInt(item.Data.evicted_keys) > 0 ? 'warning' : '';
  69. var connected_clients_flag = parseInt(item.Data.connected_clients) > 1000 ? 'warning' : '';
  70. var blocked_clients_flag = parseInt(item.Data.blocked_clients) > 0 ? 'warning' : '';
  71. var used_cpu_user = parseInt(item.Data.used_cpu_user);
  72. var used_cpu_sys = parseInt(item.Data.used_cpu_sys);
  73. html += `<tr>
  74. <td>${item.Id}</td>
  75. <td>${item.Address}</td>
  76. <td>${item.Remark}</td>
  77. <td>${item.Data.redis_version}</td>
  78. <td>${item.Data.process_id}</td>
  79. <td>${item.Data.uptime_in_days}天</td>
  80. <td>${used_cpu_user}<i class="text-primary">s</i>/${used_cpu_sys}<i class="text-primary">s</i></td>
  81. <td class="${qps_flag}">${item.Data.instantaneous_ops_per_sec}</td>
  82. <td>${item.Data.total_system_memory_human}</td>
  83. <td class="${maxmemory_flag}">${item.Data.maxmemory_human}</td>
  84. <td class="${used_memory_flag}'">${item.Data.used_memory_human}</td>
  85. <td>${item.Data.maxmemory_policy}</td>
  86. <td>${item.Data.save}</td>
  87. <td>${item.Data.expired_keys}</td>
  88. <td class="${evicted_keys_flag}">${item.Data.evicted_keys}</td>
  89. <td class="${connected_clients_flag}">${item.Data.connected_clients}</td>
  90. <td class="${blocked_clients_flag}">${item.Data.blocked_clients}</td>
  91. <td>${item.Data.rejected_connections}</td>
  92. <td>${item.Data.keyspace_hits}</td>
  93. <td>${item.Data.keyspace_misses}</td>
  94. <td>${item.Data.db0}</td>
  95. <td><a href="#" data-value="${item.Id}">查看</a></td>
  96. </tr>`;
  97. } else {
  98. html += `<tr>
  99. <td>${item.Id}</td>
  100. <td>${item.Address}</td>
  101. <td>${item.Remark}</td>
  102. <td colspan="21" class="danger">${item.Error}</td>
  103. </tr>`;
  104. }
  105. }
  106. $('#list').html(html);
  107. $('#list a').click(function(){
  108. var id = $(this).attr('data-value');
  109. $.get('/index/info', {'id': id}, function(resp){
  110. if (resp && resp.data) {
  111. var html = '<table class="table table-bordered table-striped">';
  112. html += '<thead><th>Key</th><th>值</th></tr></thead><tbody>';
  113. for(var k in resp.data.Data) {
  114. html += '<tr>';
  115. html += '<td>' + k + '</td>';
  116. html += '<td>' + resp.data.Data[k] + '</td>';
  117. html += '</tr>';
  118. }
  119. html += '</tbody></table>';
  120. $.alert({
  121. 'title': 'Redis [' + resp.data.Address + '] 状态详情',
  122. 'content': html,
  123. 'size': 'modal-lg'
  124. });
  125. }
  126. }, 'json');
  127. return false;
  128. });
  129. }
  130. }, 'json');
  131. }
  132. $('#btn_refresh').click(function(){
  133. load_stats();
  134. return false;
  135. });
  136. load_stats();
  137. });
  138. </script>
  139. </body>
  140. </html>