{$layout}
{$template "menu"}

<div class="margin"></div>
{$template "/datepicker"}

<style>
.httpdns-runtime-level {
    font-weight: 600;
}
</style>

<form method="get" action="/httpdns/runtimeLogs" class="ui form small" 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="dayFrom" placeholder="开始日期" v-model="dayFrom" style="width:7.8em"
                id="day-from-picker" />
        </div>
        <div class="ui field">
            <input type="text" name="dayTo" placeholder="结束日期" v-model="dayTo" style="width:7.8em" id="day-to-picker" />
        </div>
        <div class="ui field">
            <select class="ui dropdown" name="level" v-model="level">
                <option value="">[级别]</option>
                <option value="error">error</option>
                <option value="warning">warning</option>
                <option value="info">info</option>
                <option value="success">success</option>
            </select>
        </div>
        <div class="ui field">
            <input type="text" name="keyword" v-model="keyword" placeholder="类型/详情/节点" />
        </div>
        <div class="ui field">
            <button type="submit" class="ui button small">查询</button>
        </div>
        <div class="ui field"
            v-if="clusterId.toString().length > 0 || nodeId.toString().length > 0 || dayFrom.length > 0 || dayTo.length > 0 || keyword.length > 0 || level.length > 0">
            <a href="/httpdns/runtimeLogs">[清除条件]</a>
        </div>
    </div>
</form>

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

<not-found-box v-if="runtimeLogs.length == 0">暂时还没有运行日志。</not-found-box>

<table class="ui table selectable celled" v-if="runtimeLogs.length > 0">
    <thead>
        <tr>
            <th>时间</th>
            <th>集群</th>
            <th>节点</th>
            <th>级别</th>
            <th>类型</th>
            <th>详情</th>
            <th>次数</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="log in runtimeLogs">
            <td>{{log.createdTime}}</td>
            <td>{{log.clusterName}}</td>
            <td>{{log.nodeName}}</td>
            <td>
                <span
                    class="httpdns-runtime-level"
                    :class="{red:log.level == 'error', orange:log.level == 'warning', green:log.level == 'success'}">{{log.level}}</span>
            </td>
            <td><code>{{log.tag}}</code></td>
            <td>{{log.description}}</td>
            <td>{{log.count}}</td>
        </tr>
    </tbody>
</table>