index.html

{% extends './base.html' %}

{% block title %}Redis Ctl{% endblock %}

{% block head %}
<style>
tr.adv-user-display { background-color: #ffc0c0; }
.error-only .node-healthy { display: none }
.migrating-only .node-stable { display: none }
</style>
<script src='/static/js/cluster_task.js'></script>
<script src='/static/js/redis_node.js'></script>
{% endblock %}

{% block body %}
<div class="panel panel-success">
  <div class="panel-heading panel-heading-hide-content"><strong data-localize='clusters-info'>Clusters Info</strong></div>
  <table class='table table-striped text-center'>
    <thead>
      <tr>
        <th>#</th>
        <th style='width: 320px;' data-localize='cluster-description'>Description</th>
        <th data-localize='nodes-num'>Redis</th>
        <th data-localize='proxy-num'>Proxy</th>
      </tr>
    </thead>
    <tbody>
    {% autoescape false %}
        {% for cluster in clusters %}
            {{ render('components/cluster/row.html', cluster=cluster) }}
        {% endfor %}
    {% endautoescape %}
    </tbody>
  </table>
</div>
<div class="panel panel-success">
  <div class="panel-heading panel-heading-hide-content">
    <div class="row">
      <div class='col-xs-4' style="margin-top: 10px;">
        <strong data-localize='nodes-info'>Redis Info</strong>
      </div>
      <div class='col-xs-4' style="float:right">
        <select class="select-primary" id="selectmenu">
          <option value='all' data-localize='opt-all-nodes'>All</option>
          <option value='error' data-localize='opt-error-only'>Unreachables</option>
          <option value='migrating' data-localize='opt-migrating-only'>Migrating</option>
        </select>
      </div>
    </div>
  </div>
  <table class='table table-striped text-center'>
    <thead>
      <tr>
        <th data-localize='address'>Address</th>
        <th data-localize='node-memory-usage'>Memory Usage</th>
        <th data-localize='cluster'>Cluster</th>
        <th data-localize='node-ops'></th>
      </tr>
    </thead>
    <tbody>
    {% autoescape false %}
        {% for node in nodes %}
            {{ render('components/node/row.html', node=node, stats_enabled=stats_enabled) }}
        {% endfor %}
    {% endautoescape %}
    </tbody>
  </table>
</div>
<script>
$('select').select2({dropdownCssClass: 'dropdown-inverse'});
$(function() {
    $('#selectmenu').change(function() {
        var chooseValues = $('#selectmenu').val();
        switch (chooseValues) {
            case 'error':
                return setDisplayClass('error-only');
            case 'migrating':
                return setDisplayClass('migrating-only');
            default:
                return clearDisplayClasses();
            }
    });
    function clearDisplayClasses() {
        return $('#nodes-area').removeClass('error-only').removeClass('migrating-only');
    }
    function setDisplayClass(cls) {
        clearDisplayClasses().addClass(cls);
    }
});
</script>

{% endblock %}