| <!-- |
| |
| Licensed under the Apache License, Version 2.0 (the "License"); |
| you may not use this file except in compliance with the License. |
| You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| |
| --> |
| <template> |
| <div class="app-container"> |
| <div class="createPost-container"> |
| <el-form :inline="true" :model="postForm" class="form-container"> |
| <el-form-item class="postInfo-container-item" label="Cluster"> |
| <el-select v-model="postForm.cluster" placeholder="select cluster" @change="getBrokersList()"> |
| <el-option v-for="(item,index) in clustersListOptions" :key="item+index" :label="item" :value="item"/> |
| </el-select> |
| </el-form-item> |
| <el-form-item class="postInfo-container-item" label="Broker"> |
| <el-select v-model="postForm.broker" placeholder="select broker" @change="changeBrokerInfo()"> |
| <el-option v-for="(item,index) in brokersListOptions" :key="item+index" :label="item" :value="item"/> |
| </el-select> |
| </el-form-item> |
| <el-button type="primary" @click="handleHeartBeat">Heartbeat</el-button> |
| <el-button type="primary" @click="handleRuntimeConfig">Runtime Config</el-button> |
| </el-form> |
| <el-table |
| :data="brokerStats" |
| border |
| style="width: 100%"> |
| <el-table-column :label="$t('common.inMsg')" prop="inMsg"/> |
| <el-table-column :label="$t('common.outMsg')" prop="outMsg"/> |
| <el-table-column :label="$t('common.inBytes')" prop="inBytes"/> |
| <el-table-column :label="$t('common.outBytes')" prop="outBytes"/> |
| </el-table> |
| <h4>Owned Namespaces</h4> |
| <el-table |
| :key="bundleTableKey" |
| :data="bundleList" |
| border |
| fit |
| highlight-current-row |
| style="width: 100%;"> |
| <el-table-column :label="$t('tenant.label')" align="center" min-width="100px"> |
| <template slot-scope="scope"> |
| <router-link :to="'/management/tenants/tenantInfo/' + scope.row.tenant + '?tab=namespaces'" class="link-type"> |
| <span>{{ scope.row.tenant }}</span> |
| </router-link> |
| </template> |
| </el-table-column> |
| <el-table-column :label="$t('namespace.label')" align="center" min-width="100px"> |
| <template slot-scope="scope"> |
| <router-link :to="'/management/namespaces/' + scope.row.tenant + '/' + scope.row.namespace + '/namespace?tab=overview'" class="link-type"> |
| <span>{{ scope.row.namespace }}</span> |
| </router-link> |
| </template> |
| </el-table-column> |
| <el-table-column :label="$t('namespace.bundle.label')" align="center" min-width="100px"> |
| <template slot-scope="scope"> |
| <span>{{ scope.row.bundle }}</span> |
| </template> |
| </el-table-column> |
| <el-table-column :label="$t('namespace.bundle.operation')" align="center" class-name="small-padding fixed-width"> |
| <template slot-scope="scope"> |
| <el-button size="medium" type="danger" icon="el-icon-download" @click="handleUnloadBundle(scope.row)">Unload</el-button> |
| </template> |
| </el-table-column> |
| </el-table> |
| <h4>Namespace Isolation Policies</h4> |
| <el-table |
| :data="isolationPolicyList" |
| border |
| fit |
| highlight-current-row |
| style="width: 100%;"> |
| <el-table-column :label="$t('ip.nameLabel')" align="center" min-width="100px"> |
| <template slot-scope="scope"> |
| <router-link :to="'/management/clusters/' + scope.row.cluster + '/' + scope.row.isolationPolicy + '/namespaceIsolationPolicy'" class="link-type"> |
| <span>{{ scope.row.isolationPolicy }}</span> |
| </router-link> |
| </template> |
| </el-table-column> |
| <el-table-column :label="$t('ip.numPBLabel')" align="center" min-width="100px"> |
| <template slot-scope="scope"> |
| <span>{{ scope.row.primaryBrokers }}</span> |
| </template> |
| </el-table-column> |
| <el-table-column :label="$t('ip.numSBLabel')" align="center" min-width="100px"> |
| <template slot-scope="scope"> |
| <span>{{ scope.row.secondaryBrokers }}</span> |
| </template> |
| </el-table-column> |
| </el-table> |
| <el-dialog :visible.sync="dialogFormVisible"> |
| <jsonEditor :value="jsonValue"/> |
| </el-dialog> |
| </div> |
| </div> |
| </template> |
| |
| <script> |
| import { fetchClusters } from '@/api/clusters' |
| import { fetchBrokerStatsMetrics, fetchBrokerStatsTopics } from '@/api/brokerStats' |
| import { fetchBrokersHealth, fetchBrokers } from '@/api/brokers' |
| import { fetchIsolationPolicies } from '@/api/isolationPolicies' |
| import { unloadBundleOnBroker } from '@/api/namespaces' |
| import { fetchBrokersRuntimeConfiguration } from '@/api/brokers' |
| import jsonEditor from '@/components/JsonEditor' |
| import Pagination from '@/components/Pagination' // Secondary package based on el-pagination |
| import MdInput from '@/components/MDinput' |
| import { isValidResponse } from '@/utils/http' |
| import { formatBytes } from '@/utils/index' |
| import { numberFormatter } from '@/filters/index' |
| |
| const defaultForm = { |
| cluster: '', |
| broker: '' |
| } |
| export default { |
| name: 'BrokerInfo', |
| components: { |
| Pagination, |
| MdInput, |
| jsonEditor |
| }, |
| data() { |
| return { |
| postForm: Object.assign({}, defaultForm), |
| clustersListOptions: [], |
| brokersListOptions: [], |
| brokerStats: [], |
| bundleTableKey: 0, |
| bundleList: [], |
| isolationPolicyList: [], |
| isolationPolicyTableKey: 0, |
| dialogFormVisible: false, |
| jsonValue: {}, |
| firstInit: false |
| } |
| }, |
| created() { |
| this.postForm.cluster = this.$route.params && this.$route.params.cluster |
| this.postForm.broker = this.$route.params && this.$route.params.broker |
| this.firstInit = true |
| this.getBrokerInfo() |
| this.getBrokerStats() |
| this.getIsolationPolicy() |
| this.getClusterList() |
| this.getBrokersList() |
| }, |
| methods: { |
| getBrokerInfo() { |
| fetchBrokerStatsTopics(this.postForm.broker).then(response => { |
| if (!response.data) return |
| this.brokerStatsTopic = response.data |
| if ((typeof this.brokerStatsTopic) === 'string') { |
| // failed to fetch broker stats |
| this.brokerStatsTopic = {} |
| this.$notify({ |
| title: 'error', |
| message: 'Failed to fetch broker stats from broker ' + this.postForm.broker, |
| type: 'error', |
| duration: 3000 |
| }) |
| } |
| for (var tenantNamespace in this.brokerStatsTopic) { |
| var tn = tenantNamespace.split('/') |
| for (var bundle in this.brokerStatsTopic[tenantNamespace]) { |
| var ownedNamespace = {} |
| ownedNamespace['tenant'] = tn[0] |
| ownedNamespace['namespace'] = tn[1] |
| ownedNamespace['bundle'] = bundle |
| this.bundleList.push(ownedNamespace) |
| } |
| } |
| }) |
| }, |
| changeBrokerInfo() { |
| this.$router.push({ path: '/management/brokers/' + this.postForm.cluster + '/' + this.postForm.broker + '/broker' }) |
| }, |
| getBrokerStats() { |
| var throughputIn = 0 |
| var throughputOut = 0 |
| var bandwidthIn = 0 |
| var bandwidthOut = 0 |
| fetchBrokerStatsMetrics(this.postForm.broker).then(response => { |
| for (var m = 0; m < response.data.length; m++) { |
| if (response.data[m].dimensions.hasOwnProperty('namespace')) { |
| if (response.data[m].dimensions.namespace.split('/').length === 2) { |
| throughputIn += response.data[m].metrics.brk_in_tp_rate |
| throughputOut += response.data[m].metrics.brk_out_tp_rate |
| bandwidthIn += response.data[m].metrics.brk_in_rate |
| bandwidthOut += response.data[m].metrics.brk_out_rate |
| } |
| } |
| } |
| this.brokerStats.push({ |
| 'inBytes': formatBytes(throughputIn), |
| 'outBytes': formatBytes(throughputOut), |
| 'inMsg': numberFormatter(bandwidthIn, 2), |
| 'outMsg': numberFormatter(bandwidthOut, 2) |
| }) |
| }) |
| }, |
| getClusterList() { |
| fetchClusters(this.listQuery).then(response => { |
| if (!response.data) return |
| for (var i = 0; i < response.data.data.length; i++) { |
| this.clustersListOptions.push(response.data.data[i].cluster) |
| } |
| }) |
| }, |
| getIsolationPolicy() { |
| fetchIsolationPolicies(this.postForm.cluster).then(res => { |
| var tempIsolationPolicy = [] |
| for (var policy in res.data) { |
| for (var i in res.data[policy].primary) { |
| var regexPrimary = new RegExp(res.data[policy].primary[i]) |
| if (regexPrimary.test(this.postFormbroker)) { |
| if (tempIsolationPolicy.indexOf(policy) < 0) { |
| tempIsolationPolicy.push(policy) |
| } |
| } |
| } |
| for (var j in res.data[policy].secondary) { |
| var regexSecondary = new RegExp(res.data[policy].secondary[j]) |
| if (regexSecondary.test(this.postFormbroker)) { |
| if (tempIsolationPolicy.indexOf(policy) < 0) { |
| tempIsolationPolicy.push(policy) |
| } |
| } |
| } |
| if (tempIsolationPolicy.indexOf(policy) >= 0) { |
| this.isolationPolicyList.push({ |
| 'cluster': this.postForm.cluster, |
| 'isolationPolicy': policy, |
| 'primaryBrokers': res.data[policy].primary.length, |
| 'secondaryBrokers': res.data[policy].secondary.length |
| }) |
| } |
| } |
| }) |
| }, |
| getBrokersList() { |
| fetchBrokers(this.postForm.cluster).then(response => { |
| if (!response.data) return |
| if (this.firstInit) { |
| this.firstInit = false |
| } else { |
| this.postForm.broker = '' |
| } |
| this.brokersListOptions = [] |
| for (var i = 0; i < response.data.data.length; i++) { |
| this.brokersListOptions.push(response.data.data[i].broker) |
| } |
| }) |
| }, |
| handleUnloadBundle(row) { |
| unloadBundleOnBroker(this.postForm.broker, row.tenant + '/' + row.namespace, row.bundle).then(response => { |
| if (isValidResponse(response)) { |
| this.$notify({ |
| title: 'success', |
| message: 'Successfully unload namespace bundle from the broker', |
| type: 'success', |
| duration: 3000 |
| }) |
| } else { |
| this.$notify({ |
| title: 'error', |
| message: 'Failed to unload namespace bundle from the broker : ' + response.data, |
| type: 'error', |
| duration: 3000 |
| }) |
| } |
| }) |
| }, |
| handleHeartBeat() { |
| fetchBrokersHealth(this.postForm.broker).then(response => { |
| if (isValidResponse(response)) { |
| this.$notify({ |
| title: 'success', |
| message: 'Health Check success', |
| type: 'success', |
| duration: 3000 |
| }) |
| } else { |
| this.$notify({ |
| title: 'error', |
| message: 'Health Check failed: \n' + response.data, |
| type: 'error', |
| duration: 3000 |
| }) |
| } |
| }) |
| }, |
| handleRuntimeConfig() { |
| fetchBrokersRuntimeConfiguration(this.postForm.broker).then(response => { |
| this.dialogFormVisible = true |
| this.jsonValue = response.data |
| }) |
| } |
| } |
| } |
| </script> |
