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

<div class="left-right-box-container">

    <div class="right-box">
        <first-menu>
            <menu-item :href="'.?clusterId=' + clusterId">{{t('settings_ddosProtection_status@设置')}}</menu-item>
            <menu-item :href="'.status?clusterId=' + clusterId" class="active">{{t('settings_ddosProtection_status@状态')}}</menu-item>
        </first-menu>

        <loading-message v-if="isLoading">{{t('settings_ddosProtection_status@检查中请耐心等待')}}</loading-message>

        <b-empty v-if="!isLoading && results.length == 0">{{t('settings_ddosProtection_status@当前集群下暂时还没有节点')}}</b-empty>

        <b-table
            v-if="results.length > 0"
            :columns="columns"
            :data-source="results"
            :row-key="'nodeId'"
            size="middle"
            :show-header="true"
        >
            <!-- Node Name Slot -->
            <template slot="nodeNameSlot" slot-scope="{ text, record }">
                 <a :href="'/ns/clusters/cluster/node?clusterId=' + clusterId + '&nodeId=' + record.nodeId">{{record.nodeName}}</a>
                <div v-if="record.isPrior">
                    <a :href="'/ns/clusters/cluster/node/settings/ddos-protection?clusterId=' + clusterId + '&nodeId=' + record.nodeId">
                        <grey-label>{{t('settings_ddosProtection_status@定制')}}</grey-label>
                    </a>
                </div>
            </template>

            <!-- Result Slot -->
            <template slot="resultSlot" slot-scope="{ text, record }">
                <span class="green" v-if="record.isOk">{{record.message}}</span>
                <span class="red" v-if="!record.isOk">{{record.message}}</span>
            </template>

        </b-table>

        <div class="margin"></div>
        <a-button @click="reload">{{t('settings_ddosProtection_status@刷新')}}</a-button>
    </div>
</div>