{$layout}
{$template "menu"}

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

<form class="ui form" method="get" action="/clusters/monitors">
    <div class="ui fields inline">
        <div class="ui field">
            {{t('clusters_monitors@集群')}}:
        </div>
        <div class="ui field">
            <b-select
                name="clusterId"
                v-model="clusterId"
                :options="[
                    ...clusters.map(cluster => ({
                        label: cluster.name??'',
                        value: cluster.id??'',
                    }))
                ]"
            ></b-select>
            <!-- <select class="ui dropdown" name="clusterId" v-model="clusterId">
                <option v-for="cluster in clusters" :value="cluster.id">{{cluster.name}}</option>
            </select> -->
        </div>
        <div class="ui field">
            <button class="ui button" type="submit">{{t('clusters_monitors@查看')}}</button>
        </div>
    </div>
</form>

<b-empty v-if="tasks.length == 0">{{t('clusters_monitors@暂时还没有任务')}}</b-empty>

<table class="ui table selectable celled" v-if="tasks.length > 0">
    <thead>
        <tr>
            <th>{{t('clusters_monitors@节点')}}</th>
            <th>{{t('clusters_monitors@IP')}}</th>
            <th class="one wide">{{t('clusters_monitors@端口')}}</th>
            <th>{{t('clusters_monitors@综合延时')}}</th>
            <th>{{t('clusters_monitors@综合级别')}}</th>
            <th>{{t('clusters_monitors@综合连通率')}}</th>
        </tr>
    </thead>
    <tr v-for="task in tasks">
        <td>
            <span v-if="task.node.id > 0">{{task.node.name}}<link-icon :href="'/clusters/cluster/node?nodeId=' + task.node.id + '&clusterId=' + clusterId"></link-icon></span>
        </td>
        <td>
            {{task.ip}}<link-icon :href="'/clusters/ip-addrs/addr?addrId=' + task.addr.id"></link-icon>
        </td>
        <td>
            <span v-if="task.port > 0">{{task.port}}</span>
            <span v-else class="disabled">-</span>
        </td>
        <td>
            <span v-if="task.costMs > 0" :class="task.color">{{task.costMs}}ms</span>
            <span v-else class="disabled">-</span>
        </td>
        <td>
            <span :class="task.color">{{task.levelName}}</span>
        </td>
        <td>
            <span v-if="task.connectivity > 0" :class="task.color">{{task.connectivity}}%</span>
            <span v-else class="disabled">-</span>
        </td>
    </tr>
</table>

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