{$layout}
{$template "/datepicker"}


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

<form method="get" action="/ns/clusters/logs" class="ui form" autocomplete="off">
    <div class="ui fields inline">
        <div class="ui field">
            <input type="text" name="dayFrom" :placeholder="t('ns_clusters_logs_index@开始日期')" v-model="dayFrom" value="" style="width:8em" id="day-from-picker"/>
        </div>
        <div class="ui field">
            <input type="text" name="dayTo" :placeholder="t('ns_clusters_logs_index@结束日期')" v-model="dayTo" value="" style="width:8em" id="day-to-picker"/>
        </div>
        <div class="ui field">
            <b-select
                name="level"
                v-model="level"
                :options="[
                    {label: t('ns_clusters_logs_index@级别'), value: ''},
                    {label: t('ns_clusters_logs_index@错误'), value: 'error'},
                    {label: t('ns_clusters_logs_index@警告'), value: 'warning'},
                    {label: t('ns_clusters_logs_index@信息'), value: 'info'},
                    {label: t('ns_clusters_logs_index@成功'), value: 'success'},
                ]"
            ></b-select>

            <!-- <select class="ui dropdown" name="level" v-model="level">
                <option value="">{{t('ns_clusters_logs_index@级别')}}</option>
                <option value="error">{{t('ns_clusters_logs_index@错误')}}</option>
                <option value="warning">{{t('ns_clusters_logs_index@警告')}}</option>
                <option value="info">{{t('ns_clusters_logs_index@信息')}}</option>
                <option value="success">{{t('ns_clusters_logs_index@成功')}}</option>
            </select> -->
        </div>
        <div class="ui field">
            <input type="text" name="keyword" style="width:10em" v-model="keyword" :placeholder="t('ns_clusters_logs_index@关键词')"/>
        </div>
        <div class="ui field">
            <button type="submit" class="ui button">{{t('ns_clusters_logs_index@查询')}}</button>
        </div>
        <div class="ui field" v-if="dayFrom.length > 0 || dayTo.length > 0 || keyword.length > 0 || level.length > 0">
            <a href="/ns/clusters/logs">{{t('ns_clusters_logs_index@清除条件')}}</a>
        </div>
    </div>
</form>

<b-empty v-if="logs.length == 0">{{t('ns_clusters_logs_index@暂时还没有日志')}}</b-empty>

<b-table :data="logs" :columns="columns" :key="logs.length > 0 ? logs[0].id : 0" v-if="logs.length > 0">
    <template v-slot:cluster="scope">
        <link-icon :href="'/ns/clusters/cluster?clusterId=' + scope.row.node.cluster.id">{{scope.row.node.cluster.name}}</link-icon>
    </template>
    <template v-slot:node="scope">
        <link-icon :href="'/ns/clusters/cluster/node?clusterId=' + scope.row.node.cluster.id + '&nodeId=' + scope.row.node.id">{{scope.row.node.name}}</link-icon>
    </template>
    <template v-slot:message="scope">
         <node-log-row :v-log="scope.row" :v-keyword="keyword"></node-log-row>
    </template>
</b-table>

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