redis-live.html 9.22 KB
<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Redis</title>
    <link rel="stylesheet" href="/dist/css/redis-live.css" />
</head>
<body>
    <header class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed">
        <a class="pure-menu-heading" href="">Redis</a>
        <ul class="pure-menu-list pure-form">
                <li class="pure-menu-item pure-menu-selected" id="">
                    <select id="cloudSelect">
                    </select>
                </li>
                <li class="pure-menu-item pure-menu-selected" id="">
                    <select id="clusterSelect">
                    </select>
                </li>
            </ul>
    </header>

    <div class="gragh-box">
        <section class="sct-s-p srv-item">
            <h4>服务器列表</h4>
            <div id="srvList" class="box srv-list-box">
            </div>
        </section>
        <section class="sct-s-p pure-item">
            <h4>服务器单项指标</h4>
            <div class="pure-form top-box">
                <select name="" id="srvTimeSelect">
                    <option value="5">5分钟</option>
                    <option value="30">30分钟</option>
                    <option value="60">1小时</option>
                    <option value="120">2小时</option>
                    <option value="180">3小时</option>
                    <option value="360">6小时</option>
                    <option value="720">12小时</option>
                    <option value="1440">24小时</option>
                </select>
                <select name="" id="srvGraphSelect">
                </select>
            </div>
            <div id="srv" class="graph-box"></div>
        </section>
        <section class="sct-s-p">
            <h4>命令总数</h4>
            <div class="pure-form top-box">
                <select name="" id="cpSelect">
                    <option value="5">5分钟</option>
                    <option value="30">30分钟</option>
                    <option value="60">1小时</option>
                    <option value="120">2小时</option>
                    <option value="180">3小时</option>
                    <option value="360">6小时</option>
                    <option value="720">12小时</option>
                    <option value="1440">24小时</option>
                </select>
            </div>
            <div id="cp" class="graph-box"></div>
        </section>
        <section class="sct-s-p">
            <h4>全集群读写并发</h4>
            <div class="pure-form top-box">
                <select name="" id="mcSelect">
                    <option value="5">5分钟</option>
                    <option value="30">30分钟</option>
                    <option value="60">1小时</option>
                    <option value="120">2小时</option>
                    <option value="180">3小时</option>
                    <option value="360">6小时</option>
                    <option value="720">12小时</option>
                    <option value="1440">24小时</option>
                </select>
            </div>
            <div id="mc" class="graph-box"></div>
        </section>
        <section class="sct-s-p">
            <h4>错误曲线</h4>
            <div class="pure-form top-box">
                <select name="" id="epSelect">
                    <option value="5">5分钟</option>
                    <option value="30">30分钟</option>
                    <option value="60">1小时</option>
                    <option value="120">2小时</option>
                    <option value="180">3小时</option>
                    <option value="360">6小时</option>
                    <option value="720">12小时</option>
                    <option value="1440">24小时</option>
                </select>
            </div>
            <div id="ep" class="graph-box"></div>
        </section>
        <section class="sct-s-p">
            <h4>Top CMD</h4>
            <div class="pure-form top-box">
                <select name="" id="tcSelect">
                    <option value="5">5分钟</option>
                    <option value="30">30分钟</option>
                    <option value="60">1小时</option>
                    <option value="120">2小时</option>
                    <option value="180">3小时</option>
                    <option value="360">6小时</option>
                    <option value="720">12小时</option>
                    <option value="1440">24小时</option>
                </select>
            </div>
            <div class="box table-box">
                <table class="pure-table">
                <thead>
                    <tr>
                        <th style="width: 30%">模板 Key</th>
                        <th style="width: 25%">服务</th>
                        <th style="width: 10%">命令</th>
                        <th style="width: 7%"></th>
                        <th style="width: 7%"></th>
                        <th style="width: 11%">数据结构</th>
                        <th style="width: 10%">同步</th>
                    </tr>
                </thead>
                <tbody id="tcTbody"></tbody>
                </table>
            </div>
        </section>
        <section class="sct-s-p">
            <h4>Top 命中率低</h4>
            <div class="pure-form top-box">
                <select name="" id="tmSelect">
                    <option value="5">5分钟</option>
                    <option value="30">30分钟</option>
                    <option value="60">1小时</option>
                    <option value="120">2小时</option>
                    <option value="180">3小时</option>
                    <option value="360">6小时</option>
                    <option value="720">12小时</option>
                    <option value="1440">24小时</option>
                </select>
            </div>
            <div class="box table-box">
                <table class="pure-table">
                <thead>
                    <tr>
                        <th style="width: 30%">模板 Key</th>
                        <th style="width: 25%">服务</th>
                        <th style="width: 10%">Hit 率</th>
                        <th style="width: 7%"></th>
                        <th style="width: 7%"></th>
                        <th style="width: 11%">数据结构</th>
                        <th style="width: 10%">同步</th>
                    </tr>
                </thead>
                <tbody id="tmTbody"></tbody>
                </table>
            </div>
        </section>
        <section class="sct-s-p">
            <h4>RedisOpsStatistics</h4>
            <div class="pure-form top-box">
                <span class="total-page">总页数:<span id="totalPage"></span></span>
                <select name="" id="rosSelect">
                    <option value="5">5分钟</option>
                    <option value="30">30分钟</option>
                    <option value="60">1小时</option>
                    <option value="120">2小时</option>
                    <option value="180">3小时</option>
                    <option value="360">6小时</option>
                    <option value="720">12小时</option>
                    <option value="1440">24小时</option>
                </select>
                <button type="button" class="pure-button pure-button-primary" id="rosFilterBtn">筛选</button>
                <select name="context" id="rosContextSelect"></select>
                <input type="text" placeholder="模板key" id="keyTemplateInput" />
            </div>
            <div class="box table-box">
                <table class="pure-table">
                    <thead>
                        <tr>
                            <th style="width: 15%">模板 Key</th>
                            <th style="width: 8%">服务</th>
                            <th style="width: 6%">Err 率</th>
                            <th style="width: 6%">Hit 率</th>
                            <th style="width: 12%">响应时间(ms)</th>
                            <th style="width: 12%">数据结构</th>
                            <th style="width: 7%">同步</th>
                            <th style="width: 10%">超时</th>
                            <th style="width: 5%"></th>
                            <th style="width: 7%">读并发</th>
                            <th style="width: 5%"></th>
                            <th style="width: 7%">写并发</th>
                        </tr>
                    </thead>
                    <tbody id="rosTbody"></tbody>
                </table>
                <div id="pageSlipt" class="page-slipt">
                    <button class="pure-button first">首页</button>
                    <button class="pure-button prev pure-button-disabled">上一页</button>
                    <button class="pure-button next">下一页</button>
                    <button class="pure-button last">末页</button>
                </div>
            </div>
            <div id="cp" class="graph-box"></div>
        </section>
    </div>
    <script src="/dist/js/redis-live.js"></script>
</body>
</html>