<template>
  <div class="app-container">
    <div class="createPost-container">
      <el-form ref="postForm" class="form-container">
        <div class="createPost-main-container">
          <el-row>
            <el-col :span="12">
              <div class="postInfo-container">
                <el-row>
                  <el-col :span="8">
                    <el-form-item class="postInfo-container-item">
                      <el-select v-model="cluster" placeholder="select clusters">
                        <el-option v-for="(item,index) in clusterListOptions" :key="item+index" :label="item" :value="item"/>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
    <div class="filter-container">
      <el-input :placeholder="$t('table.namespace')" v-model="listQuery.namespace" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{ $t('table.search') }}</el-button>
      <el-button v-waves class="filter-item" type="primary" @click="getBrokerConfig">{{ $t('table.config') }}</el-button>
      <el-button v-waves class="filter-item" type="primary" @click="getBrokerInternalConfig">{{ $t('table.internalConfig') }}</el-button>
      <el-button v-waves class="filter-item" type="primary" @click="getBrokerRuntimeConfig">{{ $t('table.runtimeConfig') }}</el-button>
      <el-button v-waves class="filter-item" type="primary" @click="getBrokersDynamicConfigValues">{{ $t('table.dynamicConfig') }}</el-button>
      <el-button v-waves class="filter-item" type="primary" @click="getBrokersHealth">{{ $t('table.healthCheck') }}</el-button>
    </div>
    <div>
      <el-row :gutter="8">
        <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 14}" :xl="{span: 14}" style="padding-right:8px;margin-bottom:30px;">
          <el-table
            v-loading="listLoading"
            :key="tableKey"
            :data="list"
            border
            fit
            highlight-current-row
            style="width: 100%;">
            <el-table-column :label="$t('table.brokers')" min-width="50px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.brokers }}</span>
              </template>
            </el-table-column>
            <el-table-column :label="$t('table.namespace')" min-width="50px" align="center">
              <template slot-scope="scope">
                <span class="link-type" @click="getBrokersNamespaceConfig(scope.row)">{{ scope.row.namespace }}</span>
              </template>
            </el-table-column>
            <el-table-column :label="$t('table.actions')" align="center" width="240" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">{{ $t('table.edit') }}</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getBrokers" />
        </el-col>
        <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 10}" :xl="{span: 10}" style="margin-bottom:30px;">
          <jsonEditor :value="jsonValue"/>
        </el-col>
      </el-row>
      <el-dialog :visible.sync="dialogFormVisible">
        <el-form ref="temp" :rules="rules" :model="temp" label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
          <div v-if="dialogStatus==='update'">
            <el-form-item :label="$t('table.configName')" prop="configName">
              <el-input v-model="temp.configName"/>
            </el-form-item>
            <el-form-item :label="$t('table.configValue')" prop="configValue">
              <el-input v-model="temp.configValue"/>
            </el-form-item>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
          <el-button type="primary" @click="confirmUpdate()">{{ $t('table.confirm') }}</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>

import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import jsonEditor from '@/components/JsonEditor'
import { fetchClusters } from '@/api/clusters'
import {
  fetchBrokers,
  fetchBrokersConfiguration,
  fetchBrokersInternalConfiguration,
  fetchBrokersRuntimeConfiguration,
  fetchBrokersOwnedNamespaces,
  fetchBrokersDynamicConfiguration,
  fetchBrokersHealth,
  updateBrokersDynamicConfiguration
} from '@/api/brokers'
import { validateEmpty } from '@/utils/validate'
import waves from '@/directive/waves' // Waves directive

export default {
  name: 'Brokers',
  components: {
    Pagination,
    jsonEditor
  },
  directives: { waves },
  data() {
    return {
      list: null,
      loading: false,
      listLoading: true,
      tableKey: 0,
      localList: [],
      searchList: [],
      cluster: '',
      clusterListOptions: [],
      listQuery: {
        broker: '',
        page: 1,
        limit: 20
      },
      total: 0,
      jsonValue: {},
      dialogFormVisible: false,
      dialogStatus: '',
      temp: {
        configName: '',
        configValue: ''
      },
      rules: {
        configName: [{ required: true, message: 'config name is required', trigger: 'blur' }],
        configValue: [{ required: true, message: 'config value is required', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.getRemoteClusters()
  },
  created() {
    this.getBrokers()
  },
  methods: {
    getRemoteClusters() {
      fetchClusters(this.listQuery).then(response => {
        for (var i = 0; i < response.data.length; i++) {
          this.clusterListOptions.push(response.data[i])
        }
      })
    },
    getBrokers() {
      if (this.localList.length > 0) {
        setTimeout(() => {
          this.localPaging()
        }, 0.5 * 1000)
      } else {
        this.listLoading = true
        if (this.cluster == null || this.cluster.length <= 0) {
          this.cluster = 'standalone'
        }
        fetchBrokers(this.cluster).then(response => {
          for (var i = 0; i < response.data.length; i++) {
            this.localList.push({
              'brokers': response.data[i],
              'namespace': 'namespaceConfig'
            })
          }
          this.total = this.localList.length
          this.list = this.localList.slice((this.listQuery.page - 1) * this.listQuery.limit, this.listQuery.limit * this.listQuery.page)
          // Just to simulate the time of the request
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
      }
    },
    localPaging() {
      this.listLoading = true
      if (!validateEmpty(this.listQuery.broker)) {
        this.searchList = []
        for (var i = 0; i < this.localList.length; i++) {
          if (this.localList[i]['brokers'].indexOf(this.listQuery.broker) !== -1) {
            this.searchList.push(this.localList[i])
          }
        }
        this.total = this.searchList.length
        this.list = this.searchList.slice((this.listQuery.page - 1) * this.listQuery.limit, this.listQuery.limit * this.listQuery.page)
      } else {
        this.total = this.localList.length
        this.list = this.localList.slice((this.listQuery.page - 1) * this.listQuery.limit, this.listQuery.limit * this.listQuery.page)
      }
      this.listLoading = false
    },
    handleFilter() {
      this.getBrokers()
    },
    handleUpdate() {
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['temp'].clearValidate()
      })
    },
    confirmUpdate() {
      this.$refs['temp'].validate((valid) => {
        if (valid) {
          updateBrokersDynamicConfiguration(this.temp.configName, this.temp.configValue).then(response => {
            this.$notify({
              title: 'success',
              message: 'Set config success',
              type: 'success',
              duration: 3000
            })
            this.dialogFormVisible = false
          })
        }
      })
    },
    getBrokerConfig() {
      fetchBrokersConfiguration().then(response => {
        this.$notify({
          title: 'success',
          message: 'Get config success',
          type: 'success',
          duration: 3000
        })
        this.jsonValue = response.data
      })
    },
    getBrokerInternalConfig() {
      fetchBrokersInternalConfiguration().then(response => {
        this.$notify({
          title: 'success',
          message: 'Get config success',
          type: 'success',
          duration: 3000
        })
        this.jsonValue = response.data
      })
    },
    getBrokerRuntimeConfig() {
      fetchBrokersRuntimeConfiguration().then(response => {
        this.$notify({
          title: 'success',
          message: 'Get config success',
          type: 'success',
          duration: 3000
        })
        this.jsonValue = response.data
      })
    },
    getBrokersNamespaceConfig(row) {
      fetchBrokersOwnedNamespaces(this.cluster, row.brokers).then(response => {
        this.$notify({
          title: 'success',
          message: 'Get namespace config success',
          type: 'success',
          duration: 3000
        })
        this.jsonValue = response.data
      })
    },
    getBrokersDynamicConfigValues() {
      fetchBrokersDynamicConfiguration().then(response => {
        this.$notify({
          title: 'success',
          message: 'Get dynamic config success',
          type: 'success',
          duration: 3000
        })
        this.jsonValue = response.data
      })
    },
    getBrokersHealth() {
      fetchBrokersHealth().then(response => {
        if (response.data === 'ok') {
          this.$notify({
            title: 'success',
            message: 'Health Check success',
            type: 'success',
            duration: 3000
          })
        } else {
          this.$notify({
            title: 'error',
            message: 'Health Check failed',
            type: 'error',
            duration: 3000
          })
        }
      })
    }
  }
}
</script>