{$layout}
{$template "menu"}

<div>
    <div class="ui grid">
        <div class="eight wide column">
            <div class="ui segment center aligned"
                :class="{'green inverted': health.keySyncRate >= 0.99, 'red inverted': health.keySyncRate < 0.99}">
                <h2>全网私钥热加载成功率</h2>
                <div style="font-size: 3em; font-weight: bold; margin-bottom: 0.2rem;">{{ (health.keySyncRate *
                    100).toFixed(2) }}%</div>
            </div>
        </div>
        <div class="eight wide column">
            <div class="ui segment center aligned"
                :class="{'green inverted': health.decryptFailRate <= 0.001, 'red inverted': health.decryptFailRate > 0.001}">
                <h2>全网 ECH 解密失败阻断率</h2>
                <div style="font-size: 3em; font-weight: bold; margin-bottom: 0.2rem;">{{ (health.decryptFailRate *
                    100).toFixed(4) }}%</div>
            </div>
        </div>
    </div>

    <div class="ui margin"></div>

    <div class="ui menu text blue">
        <a href="/httpdns/ech" class="item active">生产证书轮换日志</a>
        <a href="/httpdns/ech/audit" class="item">降级操作审计</a>
    </div>
    <div class="ui divider"></div>

    <table class="ui table selectable celled" v-if="echLogs.length > 0">
        <thead>
            <tr>
                <th>发行版本号</th>
                <th>记录分发类型</th>
                <th>公钥</th>
                <th>发布时间</th>
                <th class="three wide">边缘扩散状态</th>
                <th class="twz op">受控回落通道</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="log in echLogs">
                <td><strong>{{log.version}}</strong><span v-if="log.isCurrent"
                        class="ui label tiny blue margin-left-sm">当前生效</span></td>
                <td><span class="ui label tiny basic">{{log.recordType}}</span></td>
                <td>
                    <div style="word-break: break-all; font-family: monospace; font-size: 0.9em; color:#666;"
                        :title="log.publicKey">
                        {{log.publicKey.substring(0,30)}}...{{log.publicKey.substring(log.publicKey.length-10)}}
                    </div>
                </td>
                <td>{{log.publishTime}}</td>
                <td>
                    <span v-if="log.syncStatus === 'success'" class="green">100% 同步</span>
                    <span v-else-if="log.syncStatus === 'syncing'" class="orange">正在扩散到 {{log.nodesPending}}
                        节点</span>
                    <span v-else-if="log.syncStatus === 'timeout'" class="red">部分节点超时</span>
                </td>
                <td>
                    <a href="" @click.prevent="openMfaRollback(log.id)" v-if="log.isCurrent" style="color:red">回滚降级
                        (MFA验证)</a>
                    <span class="disabled" v-else>-</span>
                </td>
            </tr>
        </tbody>
    </table>
</div>