redis-live.html 8.45 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">
            <h4>服务器列表</h4>
            <div id="srvList" class="box srv-list-box">
            </div>
        </section>
        <section class="sct-s-p">
            <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>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>keyTemplate</th>
                        <th>context</th>
                        <th>command</th>
                        <th>write</th>
                        <th>read</th>
                        <th>struct</th>
                        <th>sync</th>
                        <th>ip</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>keyTemplate</th>
                        <th>context</th>
                        <th>hitRate</th>
                        <th>write</th>
                        <th>read</th>
                        <th>struct</th>
                        <th>sync</th>
                        <th>ip</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>
                <input type="text" placeholder="服务" id="keyTemplateInput">
                <input type="text" placeholder="模板key" id="contextInput">
            </div>
            <div class="box table-box">
                <table class="pure-table pure-table-horizontal">
                    <thead>
                        <tr>
                            <th>模板key</th>
                            <!-- <th>响应时间</th> -->
                            <!-- <th>命令总数</th> -->
                            <th>服务</th>
                            <!-- <th>err</th> -->
                            <th>err率</th>
                            <!-- <th>get</th> -->
                            <!-- <th>hit</th> -->
                            <th>hit率</th>
                            <!-- <th>incrOrdecr</th> -->
                            <th>IP</th>
                            <th></th>
                            <th>读并发</th>
                            <th>响应时间(ms)</th>
                            <th>结构</th>
                            <th>同步</th>
                            <th>超时</th>
                            <th>写并发</th>
                            <th></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>