{$layout}
{$template "../menu"}

<div class="left-right-box-container">
    {$template "/left_menu"}

    <div class="right-box">
        <first-menu>
            <menu-item @click.prevent="createThreshold">[添加阈值]</menu-item>
        </first-menu>

        <b-empty v-if="thresholds.length == 0">暂时还没有设置阈值。</b-empty>
        <table class="ui table selectable celled" v-if="thresholds.length > 0">
            <thead>
                <tr>
                    <th>监控项</th>
                    <th>参数</th>
                    <th>操作符</th>
                    <th>对比值</th>
                    <th>统计时间段</th>
                    <th class="two wide">状态</th>
                    <th class="two op">操作</th>
                </tr>
            </thead>
            <tr v-for="threshold in thresholds">
                <td>{{threshold.itemName}}
                    <div v-if="threshold.node != null" style="margin-top: 0.3em">
                        <a :href="'/clusters/cluster/node/settings/thresholds?clusterId=' + clusterId + '&nodeId=' + threshold.node.id" class="ui label basic tiny" title="节点专属阈值设置"><span class="small">节点：{{threshold.node.name}}</span></a>
                    </div>
                </td>
                <td>{{threshold.paramName}}</td>
                <td>{{threshold.operatorName}}</td>
                <td>{{threshold.value}}<span v-if="threshold.paramIsPercent">%</span></td>
                <td>{{threshold.duration}}{{threshold.durationUnitName}}</td>
                <td>
                    <label-on :v-is-on="threshold.isOn"></label-on>
                </td>
                <td>
                    <a href="" @click.prevent="updateThreshold(threshold.id)">修改</a> &nbsp;
                    <a href="" @click.prevent="deleteThreshold(threshold.id)">删除</a>
                </td>
            </tr>
        </table>
    </div>
</div>