{$layout}
{$template "reporter_menu"}

<div class="ui margin"></div>
<form class="ui form" action="/clusters/monitors/reporters/reporter/results">
    <input type="hidden" name="reporterId" :value="reporter.id"/>
    <div class="ui fields inline">
        <div class="ui field">
            <b-select
                name="level"
                v-model="level"
                :options="[
                    {label: '[级别]', value: ''},
                    ...levels.map(level => ({
                        label: level.name??'',
                        value: level.code??'',
                    }))
                ]"
            ></b-select>

            <!-- <select class="ui dropdown" name="level" v-model="level">
                <option value="">[级别]</option>
                <option v-for="level in levels" :value="level.code">{{level.name}}</option>
            </select> -->
        </div>
        <div class="ui field">
            <button class="ui button" type="submit">搜索</button> &nbsp;
            <a :href="Tea.url('$', {reporterId: reporter.id})" v-if="level.length > 0">[清除条件]</a>
        </div>
    </div>
</form>

<b-empty v-if="results.length == 0">暂时还没有监控结果。</b-empty>

<table class="ui table celled selectable" v-if="results.length > 0">
    <thead>
        <tr>
            <th class="two wide">类型</th>
            <th class="two wide">检测时间</th>
            <th class="four wide">对象</th>
            <th class="one wide">级别</th>
            <th class="two wide">耗时</th>
            <th>错误信息</th>
        </tr>
    </thead>
    <tr v-for="result in results">
        <td>{{result.typeName}}</td>
        <td>{{result.updatedTime}}</td>
        <td>{{result.targetDesc}}
            <span v-if="result.type == 'ipAddr'"><link-icon :href="'/clusters/ip-addrs/addr?addrId=' + result.targetId"></link-icon></span>
        </td>
        <td>
            <span :class="result.color">{{result.levelName}}</span>
        </td>
        <td>
            <span v-if="result.isOk" :class="result.color">{{result.costMs}}ms</span>
            <span v-else class="disabled">-</span>
        </td>
        <td>
            <span v-if="!result.isOk" class="red">{{result.error}}</span>
            <span v-else class="disabled">-</span>
        </td>
    </tr>
</table>

<div class="page" v-html="filterPageContent(page)"></div>