{$layout}
{$template "menu"}

<style>
.httpdns-log-summary {
    color: #556070;
    font-size: 12px;
    line-height: 1.6;
    white-space: nowrap;
}

.httpdns-log-summary code {
    font-size: 12px;
}
</style>

<form method="get" action="/httpdns/resolveLogs" class="ui form" autocomplete="off">
    <div class="ui fields inline">
        <div class="ui field">
            <select class="ui dropdown" name="clusterId" v-model="clusterId">
                <option value="">[集群]</option>
                <option v-for="cluster in clusters" :value="cluster.id">{{cluster.name}}</option>
            </select>
        </div>
        <div class="ui field">
            <select class="ui dropdown" name="nodeId" v-model="nodeId">
                <option value="">[节点]</option>
                <option v-for="node in nodes" :value="node.id" v-if="clusterId == '' || clusterId == node.clusterId">{{node.name}}</option>
            </select>
        </div>
        <div class="ui field">
            <input type="text" name="appId" v-model="appId" placeholder="AppID" style="width:10em" />
        </div>
        <div class="ui field">
            <input type="text" name="domain" v-model="domain" placeholder="域名" style="width:13em" />
        </div>
        <div class="ui field">
            <select class="ui dropdown" name="status" v-model="status">
                <option value="">[状态]</option>
                <option value="success">解析成功</option>
                <option value="failed">解析失败</option>
            </select>
        </div>
        <div class="ui field">
            <input type="text" name="keyword" v-model="keyword" placeholder="应用/域名/IP/结果IP" style="width:14em" />
        </div>
        <div class="ui field">
            <button type="submit" class="ui button">查询</button>
        </div>
        <div class="ui field" v-if="clusterId.toString().length > 0 || nodeId.toString().length > 0 || appId.length > 0 || domain.length > 0 || status.length > 0 || keyword.length > 0">
            <a href="/httpdns/resolveLogs">[清除条件]</a>
        </div>
    </div>
</form>

<p class="comment" v-if="resolveLogs.length == 0">暂时还没有解析日志。</p>

<div style="overflow-x:auto;" v-if="resolveLogs.length > 0">
    <table class="ui table selectable celled">
        <thead>
        <tr>
            <th>集群</th>
            <th>节点</th>
            <th>域名</th>
            <th>类型</th>
            <th>概要</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="log in resolveLogs">
            <td>{{log.clusterName}}</td>
            <td>{{log.nodeName}}</td>
            <td>{{log.domain}}</td>
            <td>{{log.query}}</td>
            <td>
                <div class="httpdns-log-summary">
                    {{log.time}}
                    | {{log.appName}}（<code>{{log.appId}}</code>）
                    | <code>{{log.clientIp}}</code>
                    | {{log.os}}/{{log.sdkVersion}}
                    | {{log.query}} {{log.domain}} ->
                    <code v-if="log.ips && log.ips.length > 0">{{log.ips}}</code>
                    <span class="grey" v-else>[无记录]</span>
                    |
                    <span class="green" v-if="log.status == 'success'"><strong>成功</strong></span>
                    <span class="red" v-else><strong>失败</strong></span>
                    <span class="grey" v-if="log.errorCode != 'none'">（{{log.errorCode}}）</span>
                    | {{log.costMs}}ms
                </div>
            </td>
        </tr>
        </tbody>
    </table>
</div>