index.tmpl 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. {{template "header.tmpl" .}}
  2. </head>
  3. <body>
  4. {{template "navbar.tmpl" .}}
  5. <div class="container-fluid">
  6. <table class="table table-bordered table-striped">
  7. <thead>
  8. <tr>
  9. <th colspan="23" class="text-center">Redis列表&nbsp;[<a href="#" id="btn_refresh">刷新</a>]</th>
  10. </tr>
  11. <tr>
  12. <th>ID</th>
  13. <th>服务地址</th>
  14. <th>备注</th>
  15. <th>版本号</th>
  16. <th>进程ID</th>
  17. <th>上线时长</th>
  18. <th>CPU(USR/SYS)</th>
  19. <th>OPS/QPS</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 (typeof item.Data.db0 == 'undefined') {
  49. item.Data.db0 = '-';
  50. }
  51. var qps = parseInt(item.Data.instantaneous_ops_per_sec), qps_flag = '';
  52. if (qps > 30000) {
  53. qps_flag = 'danger';
  54. } else if (qps > 10000) {
  55. qps_flag = 'warning';
  56. }
  57. var maxmemory = parseInt(item.Data.maxmemory), maxmemory_flag = '';
  58. if (maxmemory == 0) {
  59. maxmemory_flag = 'danger';
  60. }
  61. var used_memory_pc = (maxmemory > 0 ? parseInt(item.Data.used_memory) / maxmemory : 0), used_memory_flag = '';
  62. if (used_memory_pc > 0.9) {
  63. maxmemory_flag = 'danger';
  64. } else if (used_memory_pc > 0.8) {
  65. maxmemory_flag = 'warning';
  66. }
  67. var evicted_keys_flag = parseInt(item.Data.evicted_keys) > 0 ? 'warning' : '';
  68. var connected_clients_flag = parseInt(item.Data.connected_clients) > 1000 ? 'warning' : '';
  69. var blocked_clients_flag = parseInt(item.Data.blocked_clients) > 0 ? 'warning' : '';
  70. html += `<tr>
  71. <td>${item.Id}</td>
  72. <td>${item.Address}</td>
  73. <td>${item.Remark}</td>
  74. <td>${item.Data.redis_version}</td>
  75. <td>${item.Data.process_id}</td>
  76. <td>${item.Data.uptime_in_days}天</td>
  77. <td>${item.Data.used_cpu_user}<i class="text-primary">s</i>/${item.Data.used_cpu_sys}<i class="text-primary">s</i></td>
  78. <td class="${qps_flag}">${item.Data.instantaneous_ops_per_sec}</td>
  79. <td>${item.Data.total_system_memory_human}</td>
  80. <td class="${maxmemory_flag}">${item.Data.maxmemory_human}</td>
  81. <td class="${used_memory_flag}'">${item.Data.used_memory_human}</td>
  82. <td>${item.Data.maxmemory_policy}</td>
  83. <td>${item.Data.expired_keys}</td>
  84. <td class="${evicted_keys_flag}">${item.Data.evicted_keys}</td>
  85. <td class="${connected_clients_flag}">${item.Data.connected_clients}</td>
  86. <td class="${blocked_clients_flag}">${item.Data.blocked_clients}</td>
  87. <td>${item.Data.rejected_connections}</td>
  88. <td>${item.Data.keyspace_hits}</td>
  89. <td>${item.Data.keyspace_misses}</td>
  90. <td>${item.Data.db0}</td>
  91. <td><a href="#" data-value="${item.Id}">查看</a></td>
  92. </tr>`;
  93. }
  94. $('#list').html(html);
  95. $('#list a').click(function(){
  96. var id = $(this).attr('data-value');
  97. $.get('/index/info', {'id': id}, function(resp){
  98. if (resp && resp.data) {
  99. var html = '<table class="table table-bordered table-striped">';
  100. html += '<thead><th>Key</th><th>值</th></tr></thead><tbody>';
  101. for(var k in resp.data.Data) {
  102. html += '<tr>';
  103. html += '<td>' + k + '</td>';
  104. html += '<td>' + resp.data.Data[k] + '</td>';
  105. html += '</tr>';
  106. }
  107. html += '</tbody></table>';
  108. $.alert({
  109. 'title': 'Redis [' + resp.data.Address + '] 状态详情',
  110. 'content': html,
  111. 'size': 'modal-lg'
  112. });
  113. }
  114. }, 'json');
  115. return false;
  116. });
  117. }
  118. }, 'json');
  119. }
  120. $('#btn_refresh').click(function(){
  121. load_stats();
  122. return false;
  123. });
  124. load_stats();
  125. });
  126. </script>
  127. </body>
  128. </html>