| <template> |
| <div class="app-container"> |
| <div class="createPost-container"> |
| <el-form :inline="true" :model="postForm" class="form-container"> |
| <el-form-item :label="$t('tenant.label')"> |
| <el-select v-model="postForm.tenant" placeholder="select tenant" @change="getNamespacesList(postForm.tenant)"> |
| <el-option v-for="(item,index) in tenantsListOptions" :key="item+index" :label="item" :value="item"/> |
| </el-select> |
| </el-form-item> |
| <el-form-item :label="$t('namespace.label')"> |
| <el-select v-model="postForm.namespace" placeholder="select namespace" @change="getTopicsList()"> |
| <el-option v-for="(item,index) in namespacesListOptions" :key="item+index" :label="item" :value="item"/> |
| </el-select> |
| </el-form-item> |
| <el-form-item :label="$t('topic.label')"> |
| <el-select v-model="postForm.topic" placeholder="select topic" @change="generatePartitions()"> |
| <el-option v-for="(item,index) in topicsListOptions" :key="item+index" :label="item" :value="item"/> |
| </el-select> |
| </el-form-item> |
| <el-form-item :label="$t('topic.partition')"> |
| <el-select v-model="postForm.partition" :disabled="partitionDisabled" placeholder="select partition" @change="onPartitionChanged()"> |
| <el-option v-for="(item,index) in partitionsListOptions" :key="item+index" :label="item" :value="item"/> |
| </el-select> |
| </el-form-item> |
| </el-form> |
| <el-form v-if="replicatedClusters.length > 0" :inline="true" :model="clusterForm" class="form-container"> |
| <el-form-item :label="$t('table.cluster')"> |
| <el-radio-group v-model="clusterForm.cluster" @change="onClusterChanged()"> |
| <el-radio-button |
| v-for="cluster in replicatedClusters" |
| :key="cluster" |
| :label="cluster"/> |
| </el-radio-group> |
| </el-form-item> |
| </el-form> |
| </div> |
| <el-tabs v-model="activeName" @tab-click="handleClick"> |
| <el-tab-pane :label="$t('tabs.overview')" name="overview"> |
| <el-row :gutter="12"> |
| <el-col :span="12"> |
| <el-card style="height: 305px"> |
| <h4>{{ $t('topic.info') }}</h4> |
| <el-table |
| :data="infoData" |
| :show-header="false" |
| border |
| style="width: 100%"> |
| <el-table-column :label="$t('topic.column')" prop="infoColumn"/> |
| <el-table-column :label="$t('topic.data')" prop="data"/> |
| </el-table> |
| <el-button |
| class="filter-item" |
| type="danger" |
| style="margin-top:15px;" |
| icon="el-icon-download" |
| @click="handleUnload"> |
| {{ $t('topic.unload') }} |
| </el-button> |
| </el-card> |
| </el-col> |
| <el-col v-if="nonPersistent===false" :span="4"> |
| <el-card> |
| <h4>{{ $t('topic.status') }}</h4> |
| <el-button |
| v-if="terminateStatus !== 'Terminated'" |
| type="primary" |
| circle |
| class="circle"> |
| <span class="circle-font">{{ terminateStatus }}</span> |
| </el-button> |
| <el-button |
| v-if="terminateStatus === 'Terminated'" |
| type="info" |
| circle |
| class="circle" |
| disabled> |
| <span class="circle-font">{{ terminateStatus }}</span> |
| </el-button> |
| <el-button |
| v-if="terminateStatus !== 'Terminated'" |
| type="primary" |
| style="display:block;margin-top:15px;margin-left:auto;margin-right:auto;" |
| icon="el-icon-close" |
| @click="handleTerminate"> |
| {{ $t('topic.terminate') }} |
| </el-button> |
| <el-button |
| v-if="terminateStatus === 'Terminated'" |
| type="info" |
| style="display:block;margin-top:15px;margin-left:auto;margin-right:auto;" |
| icon="el-icon-close" |
| disabled |
| @click="handleTerminate"> |
| {{ $t('topic.terminate') }} |
| </el-button> |
| </el-card> |
| </el-col> |
| <el-col v-if="nonPersistent===false" :span="4"> |
| <el-card> |
| <h4>{{ $t('topic.compactionName') }}</h4> |
| <el-button |
| v-if="compaction === 'NOT_RUN' || compaction === 'SUCCESS'" |
| type="primary" |
| circle |
| class="circle"> |
| <span class="circle-font">{{ compaction }}</span> |
| </el-button> |
| <el-button |
| v-if="compaction === 'RUNNING'" |
| type="success" |
| circle |
| class="circle"> |
| <span class="circle-font">{{ compaction }}</span> |
| </el-button> |
| <el-button |
| v-if="compaction === 'ERROR'" |
| type="danger" |
| circle |
| class="circle"> |
| <span class="circle-font">{{ compaction }}</span> |
| </el-button> |
| <el-button |
| v-if="compaction !== 'RUNNING' && compaction !== 'ERROR'" |
| type="primary" |
| style="display:block;margin-top:15px;margin-left:auto;margin-right:auto;" |
| icon="el-icon-minus" |
| @click="handleCompaction"> |
| {{ $t('topic.compaction') }} |
| </el-button> |
| <el-button |
| v-if="compaction === 'ERROR'" |
| type="danger" |
| style="display:block;margin-top:15px;margin-left:auto;margin-right:auto;" |
| icon="el-icon-minus" |
| @click="handleCompaction"> |
| {{ $t('topic.compaction') }} |
| </el-button> |
| <el-button |
| v-if="compaction === 'RUNNING'" |
| type="success" |
| style="display:block;margin-top:15px;margin-left:auto;margin-right:auto;" |
| icon="el-icon-minus" |
| disabled |
| @click="handleCompaction"> |
| {{ $t('topic.compaction') }} |
| </el-button> |
| </el-card> |
| </el-col> |
| <el-col v-if="nonPersistent===false" :span="4"> |
| <el-card> |
| <h4>{{ $t('topic.offloadName') }}</h4> |
| <el-button |
| v-if="offload === 'NOT_RUN' || offload === 'SUCCESS'" |
| type="primary" |
| circle |
| class="circle"> |
| <span class="circle-font">{{ offload }}</span> |
| </el-button> |
| <el-button |
| v-if="offload === 'RUNNING'" |
| type="success" |
| circle |
| class="circle"> |
| <span class="circle-font">{{ offload }}</span> |
| </el-button> |
| <el-button |
| v-if="offload === 'ERROR'" |
| type="danger" |
| circle |
| class="circle"> |
| <span class="circle-font">{{ offload }}</span> |
| </el-button> |
| <el-button |
| v-if="offload !== 'RUNNING'" |
| type="primary" |
| style="display:block;margin-top:15px;margin-left:auto;margin-right:auto;" |
| icon="el-icon-refresh" |
| @click="handleOffload"> |
| {{ $t('topic.offload') }} |
| </el-button> |
| <el-button |
| v-if="offload === 'RUNNING'" |
| type="success" |
| style="display:block;margin-top:15px;margin-left:auto;margin-right:auto;" |
| icon="el-icon-refresh" |
| disabled |
| @click="handleOffload"> |
| {{ $t('topic.offload') }} |
| </el-button> |
| </el-card> |
| </el-col> |
| </el-row> |
| <el-table |
| :data="topicStats" |
| 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>{{ $t('topic.producer.producers') }}</h4> |
| <el-row :gutter="24"> |
| <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 24}" :xl="{span: 24}"> |
| <el-table |
| v-loading="producersListLoading" |
| :key="producerTableKey" |
| :data="producersList" |
| border |
| fit |
| highlight-current-row |
| style="width: 100%;"> |
| <el-table-column :label="$t('topic.producer.producerId')" min-width="50px" align="center"> |
| <template slot-scope="scope"> |
| <span>{{ scope.row.producerId }}</span> |
| </template> |
| </el-table-column> |
| <el-table-column :label="$t('topic.producer.producerName')" min-width="30px" align="center"> |
| <template slot-scope="scope"> |
| <span>{{ scope.row.producerName }}</span> |
| </template> |
| </el-table-column> |
| <el-table-column :label="$t('common.inMsg')" min-width="30px" align="center"> |
| <template slot-scope="scope"> |
| <span>{{ scope.row.inMsg }}</span> |
| </template> |
| </el-table-column> |
| <el-table-column :label="$t('common.inBytes')" min-width="30px" align="center"> |
| <template slot-scope="scope"> |
| <span>{{ scope.row.inBytes }}</span> |
| </template> |
| </el-table-column> |
| <el-table-column :label="$t('topic.producer.avgMsgSize')" min-width="30px" align="center"> |
| <template slot-scope="scope"> |
| <span>{{ scope.row.avgMsgSize }}</span> |
| </template> |
| </el-table-column> |
| <el-table-column :label="$t('topic.producer.address')" min-width="30px" align="center"> |
| <template slot-scope="scope"> |
| <span>{{ scope.row.address }}</span> |
| </template> |
| </el-table-column> |
| <el-table-column :label="$t('topic.producer.since')" min-width="30px" align="center"> |
| <template slot-scope="scope"> |
| <span>{{ scope.row.since }}</span> |
| </template> |
| </el-table-column> |
| </el-table> |
| </el-col> |
| </el-row> |
| <h4>{{ $t('topic.subscription.subscriptions') }}</h4> |
| <el-row :gutter="24"> |
| <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 24}" :xl="{span: 24}"> |
| <el-table |
| v-loading="subscriptionsListLoading" |
| :key="subscriptionTableKey" |
| :data="subscriptionsList" |
| border |
| fit |
| highlight-current-row |
| style="width: 100%;"> |
| <el-table-column :label="$t('topic.subscription.name')" min-width="50px" align="center"> |
| <template slot-scope="scope"> |
| <router-link :to="scope.row.subscriptionLink" class="link-type"> |
| <span>{{ scope.row.subscription }}</span> |
| </router-link> |
| </template> |
| </el-table-column> |
| <el-table-column :label="$t('topic.subscription.type')" min-width="30px" align="center"> |
| <template slot-scope="scope"> |
| <span>{{ scope.row.type }}</span> |
| </template> |
| </el-table-column> |
| <el-table-column :label="$t('common.outMsg')" min-width="30px" align="center"> |
| <template slot-scope="scope"> |
| <span>{{ scope.row.outMsg }}</span> |
| </template> |
| </el-table-column> |
| <el-table-column :label="$t('common.outBytes')" min-width="30px" align="center"> |
| <template slot-scope="scope"> |
| <span>{{ scope.row.outBytes }}</span> |
| </template> |
| </el-table-column> |
| <el-table-column :label="$t('topic.subscription.msgExpired')" min-width="30px" align="center"> |
| <template slot-scope="scope"> |
| <span>{{ scope.row.msgExpired }}</span> |
| </template> |
| </el-table-column> |
| <el-table-column :label="$t('topic.subscription.backlog')" min-width="30px" align="center"> |
| <template slot-scope="scope"> |
| <span>{{ scope.row.backlog }}</span> |
| <el-dropdown> |
| <span class="el-dropdown-link"><i class="el-icon-more"/></span> |
| <el-dropdown-menu slot="dropdown"> |
| <router-link :to="scope.row.subscriptionLink + '?topTab=backlogOperation&leftTab=skip'" class="link-type"> |
| <el-dropdown-item command="skip">{{ $t('topic.subscription.skip') }}</el-dropdown-item> |
| </router-link> |
| <router-link :to="scope.row.subscriptionLink + '?topTab=backlogOperation&leftTab=expire'" class="link-type"> |
| <el-dropdown-item command="expire">{{ $t('topic.subscription.expire') }}</el-dropdown-item> |
| </router-link> |
| <router-link :to="scope.row.subscriptionLink + '?topTab=backlogOperation&leftTab=clear'" class="link-type"> |
| <el-dropdown-item command="clear">{{ $t('topic.subscription.clear') }}</el-dropdown-item> |
| </router-link> |
| <router-link :to="scope.row.subscriptionLink + '?topTab=backlogOperation&leftTab=reset'" class="link-type"> |
| <el-dropdown-item command="reset">{{ $t('topic.subscription.reset') }}</el-dropdown-item> |
| </router-link> |
| </el-dropdown-menu> |
| </el-dropdown> |
| </template> |
| </el-table-column> |
| </el-table> |
| </el-col> |
| </el-row> |
| </el-tab-pane> |
| <el-tab-pane v-if="nonPersistent===false" :label="$t('tabs.storage')" name="storage"> |
| <el-row :gutter="12"> |
| <el-col :span="8"> |
| <el-card class="box-card" shadow="always"> |
| <div slot="header" class="clearfix"> |
| <span>{{ $t('topic.subscription.storageSize') }}</span> |
| </div> |
| <el-button type="primary" class="circle"> |
| <span style="font-size: 200%;">{{ storageSize }}</span> |
| </el-button> |
| </el-card> |
| </el-col> |
| <el-col :span="8"> |
| <el-card class="box-card" shadow="always"> |
| <div slot="header" class="clearfix"> |
| <span>{{ $t('topic.subscription.entries') }}</span> |
| </div> |
| <el-button type="primary" class="circle"> |
| <span style="font-size: 200%;">{{ entries }}</span> |
| </el-button> |
| </el-card> |
| </el-col> |
| <el-col :span="8"> |
| <el-card class="box-card" shadow="always"> |
| <div slot="header" class="clearfix"> |
| <span>{{ $t('topic.subscription.segments') }}</span> |
| </div> |
| <el-button type="primary" class="circle"> |
| <span style="font-size: 200%;">{{ segments }}</span> |
| </el-button> |
| </el-card> |
| </el-col> |
| </el-row> |
| <h4>{{ $t('topic.segment.label') }}</h4> |
| <el-row :gutter="24"> |
| <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 24}" :xl="{span: 24}"> |
| <el-table |
| v-loading="segmentsListLoading" |
| :key="segmentTableKey" |
| :data="segmentsList" |
| border |
| fit |
| highlight-current-row |
| style="width: 100%;"> |
| <el-table-column :label="$t('topic.segment.ledgerId')" min-width="50px" align="center"> |
| <template slot-scope="scope"> |
| <span>{{ scope.row.ledgerId }}</span> |
| </template> |
| </el-table-column> |
| <el-table-column :label="$t('topic.segment.entries')" min-width="30px" align="center"> |
| <template slot-scope="scope"> |
| <span>{{ scope.row.entries }}</span> |
| </template> |
| </el-table-column> |
| <el-table-column :label="$t('topic.segment.size')" min-width="30px" align="center"> |
| <template slot-scope="scope"> |
| <span>{{ scope.row.size }}</span> |
| </template> |
| </el-table-column> |
| <el-table-column :label="$t('topic.segment.status')" min-width="30px" align="center"> |
| <template slot-scope="scope"> |
| <span>{{ scope.row.status }}</span> |
| </template> |
| </el-table-column> |
| <el-table-column :label="$t('topic.segment.offload')" min-width="30px" align="center"> |
| <template slot-scope="scope"> |
| <span>{{ scope.row.offload }}</span> |
| </template> |
| </el-table-column> |
| </el-table> |
| </el-col> |
| </el-row> |
| <h4>{{ $t('topic.cursor.cursors') }}</h4> |
| <el-row :gutter="24"> |
| <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 24}" :xl="{span: 24}"> |
| <el-table |
| v-loading="cursorListLoading" |
| :key="cursorTableKey" |
| :data="cursorsList" |
| border |
| fit |
| highlight-current-row |
| style="width: 100%;"> |
| <el-table-column :label="$t('topic.cursor.label')" min-width="50px" align="center"> |
| <template slot-scope="scope"> |
| <span>{{ scope.row.name }}</span> |
| </template> |
| </el-table-column> |
| <el-table-column :label="$t('topic.cursor.markDeletePosition')" min-width="30px" align="center"> |
| <template slot-scope="scope"> |
| <span>{{ scope.row.markDeletePosition }}</span> |
| </template> |
| </el-table-column> |
| <el-table-column :label="$t('topic.cursor.readPosition')" min-width="30px" align="center"> |
| <template slot-scope="scope"> |
| <span>{{ scope.row.readPosition }}</span> |
| </template> |
| </el-table-column> |
| <el-table-column :label="$t('topic.cursor.waitingReadOp')" min-width="30px" align="center"> |
| <template slot-scope="scope"> |
| <span>{{ scope.row.waitingReadOp }}</span> |
| </template> |
| </el-table-column> |
| <el-table-column :label="$t('topic.cursor.pendingReadOp')" min-width="30px" align="center"> |
| <template slot-scope="scope"> |
| <span>{{ scope.row.pendingReadOps }}</span> |
| </template> |
| </el-table-column> |
| <el-table-column :label="$t('topic.cursor.numberOfEntriesSinceFirstNotAckedMessage')" min-width="30px" align="center"> |
| <template slot-scope="scope"> |
| <span>{{ scope.row.numberOfEntriesSinceFirstNotAckedMessage }}</span> |
| </template> |
| </el-table-column> |
| </el-table> |
| </el-col> |
| </el-row> |
| </el-tab-pane> |
| <el-tab-pane :label="$t('tabs.policies')" name="policies"> |
| <h4>{{ $t('topic.policy.authentication') }} |
| <el-tooltip :content="authorizationContent" class="item" effect="dark" placement="top"> |
| <i class="el-icon-info"/> |
| </el-tooltip> |
| </h4> |
| <hr class="split-line"> |
| <el-form> |
| <el-tag |
| v-for="tag in dynamicTags" |
| :label="tag" |
| :key="tag" |
| :disable-transitions="false" |
| style="margin-top:20px" |
| class="role-el-tag"> |
| <div> |
| <span> {{ tag }} </span> |
| </div> |
| <el-select |
| v-model="roleMap[tag]" |
| multiple |
| placeholder="Please Select Options" |
| style="width:300px;" |
| @change="handleChangeOptions(tag)"> |
| <el-option |
| v-for="item in roleMapOptions[tag]" |
| :key="item.value" |
| :label="item.label" |
| :value="item.value" |
| style="width:300px"/> |
| </el-select> |
| <el-button @click.prevent="handleClose(tag)">{{ $t('topic.delete') }}</el-button> |
| </el-tag> |
| <el-form-item style="margin-top:30px"> |
| <el-input |
| v-if="inputVisible" |
| ref="saveTagInput" |
| v-model="inputValue" |
| style="margin-right:10px;width:200px;vertical-align:top" |
| size="small" |
| class="input-new-tag" |
| @keyup.enter.native="handleInputConfirm" |
| @blur="handleInputConfirm" |
| /> |
| <el-button @click="showInput()">{{ $t('topic.addRole') }}</el-button> |
| <!-- <el-button @click="revokeAllRole()">Revoke All</el-button> --> |
| </el-form-item> |
| </el-form> |
| <h4 style="color:#E57470">{{ $t('common.dangerZone') }}</h4> |
| <hr class="danger-line"> |
| <el-button type="danger" class="button" @click="handleDeleteTopic">{{ $t('topic.deleteTopic') }}</el-button> |
| </el-tab-pane> |
| </el-tabs> |
| <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="30%"> |
| <el-form label-position="top"> |
| <el-form-item v-if="dialogStatus==='delete'"> |
| <h4>{{ $t('topic.deleteTopicMessage') }}</h4> |
| </el-form-item> |
| <el-form-item> |
| <el-button type="primary" @click="deleteTopic">{{ $t('table.confirm') }}</el-button> |
| <el-button @click="dialogFormVisible=false">{{ $t('table.cancel') }}</el-button> |
| </el-form-item> |
| </el-form> |
| </el-dialog> |
| </div> |
| </template> |
| |
| <script> |
| import { fetchTenants } from '@/api/tenants' |
| import { fetchNamespaces, getClusters } from '@/api/namespaces' |
| import { |
| fetchTopicsByPulsarManager, |
| getBundleRangeOnCluster, |
| getTopicBrokerOnCluster, |
| unloadOnCluster, |
| fetchTopicStats, |
| fetchTopicStatsInternal, |
| terminateOnCluster, |
| compactOnCluster, |
| compactionStatusOnCluster, |
| offloadOnCluster, |
| offloadStatusOnCluster, |
| deleteTopicOnCluster, |
| getPermissionsOnCluster, |
| grantPermissionsOnCluster, |
| revokePermissionsOnCluster |
| } from '@/api/topics' |
| import Pagination from '@/components/Pagination' // Secondary package based on el-pagination |
| import { formatBytes } from '@/utils/index' |
| import { numberFormatter } from '@/filters/index' |
| |
| const defaultForm = { |
| persistent: '', |
| tenant: '', |
| namespace: '', |
| topic: '', |
| partition: '' |
| } |
| const defaultClusterForm = { |
| cluster: '' |
| } |
| export default { |
| name: 'TopicInfo', |
| components: { |
| Pagination |
| }, |
| data() { |
| return { |
| postForm: Object.assign({}, defaultForm), |
| clusterForm: Object.assign({}, defaultClusterForm), |
| replicatedClusters: [], |
| tenantsListOptions: [], |
| namespacesListOptions: [], |
| topicsListOptions: [], |
| activeName: 'overview', |
| topicStats: [], |
| infoData: [], |
| terminateStatus: '', |
| compaction: 'NOT RUN', |
| offload: 'NOT RUN', |
| producersListLoading: false, |
| producerTableKey: 0, |
| producersList: [], |
| producersTotal: 0, |
| producersListQuery: { |
| page: 1, |
| limit: 0 |
| }, |
| subscriptionsListLoading: false, |
| subscriptionTableKey: 0, |
| subscriptionsList: [], |
| subscriptionsTotal: 0, |
| subscriptionsListQuery: { |
| page: 1, |
| limit: 0 |
| }, |
| segmentsListLoading: false, |
| segmentTableKey: 0, |
| segmentsList: [], |
| storageSize: 0, |
| entries: 0, |
| segments: 0, |
| dynamicTags: [], |
| inputVisible: false, |
| inputValue: '', |
| roleValue: [], |
| roleMap: {}, |
| roleMapOptions: {}, |
| roleOptions: [{ |
| value: 'consume', |
| label: this.$i18n.t('role_actions.consume') |
| }, { |
| value: 'produce', |
| label: this.$i18n.t('role_actions.produce') |
| }, { |
| value: 'functions', |
| label: this.$i18n.t('role_actions.functions') |
| }], |
| authorizationContent: this.$i18n.t('topic.policy.authorizationContent'), |
| topicName: '', |
| firstInit: false, |
| firstInitTopic: false, |
| cursorTableKey: 0, |
| cursorsList: [], |
| cursorListLoading: false, |
| currentTabName: '', |
| nonPersistent: false, |
| textMap: { |
| delete: this.$i18n.t('topic.deleteTopic') |
| }, |
| dialogFormVisible: false, |
| dialogStatus: '', |
| topicPartitions: {}, |
| partitionDisabled: false, |
| partitionsListOptions: [], |
| routeTopic: '', |
| routeTopicPartition: -1, |
| routeCluster: '', |
| loaded: false |
| } |
| }, |
| created() { |
| this.postForm.persistent = this.$route.params && this.$route.params.persistent |
| this.postForm.tenant = this.$route.params && this.$route.params.tenant |
| this.postForm.namespace = this.$route.params && this.$route.params.namespace |
| this.postForm.topic = this.$route.params && this.$route.params.topic |
| this.clusterForm.cluster = this.$route.query && this.$route.query.cluster |
| this.routeCluster = this.clusterForm.cluster |
| this.tenantNamespaceTopic = this.postForm.tenant + '/' + this.postForm.namespace + '/' + this.postForm.topic |
| if (this.postForm.topic.indexOf('-partition-') > 0) { |
| var splitTopic = this.postForm.topic.split('-partition-') |
| this.postForm.partition = splitTopic[1] |
| this.postForm.topic = splitTopic[0] |
| } else { |
| this.postForm.partition = '-1' |
| this.partitionDisabled = true |
| } |
| this.routeTopic = this.postForm.topic |
| this.routeTopicPartition = this.postForm.partition |
| if (this.$route.query) { |
| if (this.$route.query.tab) { |
| this.activeName = this.$route.query.tab |
| } else { |
| this.activeName = 'overview' |
| } |
| } |
| this.currentTabName = this.activeName |
| if (this.postForm.persistent === 'persistent') { |
| this.nonPersistent = false |
| } else if (this.postForm.persistent === 'non-persistent') { |
| this.nonPersistent = true |
| } |
| this.topicName = this.postForm.persistent + '://' + this.tenantNamespaceTopic |
| this.firstInit = true |
| this.firstInitTopic = true |
| this.getRemoteTenantsList() |
| this.getNamespacesList(this.postForm.tenant) |
| this.getTopicsList() |
| this.initBundleRange() |
| this.initTopicBroker() |
| this.initTopicStats() |
| this.getReplicatedClusters() |
| if (!this.nonPersistent) { |
| this.initTerminateAndSegments() |
| this.getCompactionStatus() |
| this.getOffloadStatus() |
| } |
| this.loaded = true |
| this.initPermissions() |
| }, |
| methods: { |
| onClusterChanged() { |
| if (this.loaded && this.routeCluster !== this.clusterForm.cluster) { |
| this.reload() |
| } |
| }, |
| onPartitionChanged() { |
| if (this.loaded && parseInt(this.routeTopicPartition) !== parseInt(this.postForm.partition)) { |
| this.reload() |
| } |
| }, |
| generatePartitions() { |
| var partitions = parseInt(this.topicPartitions[this.postForm.topic]) |
| this.partitionsListOptions = [] |
| if (partitions > 0) { |
| this.partitionDisabled = false |
| if (this.postForm.partition === '-1') { |
| this.postForm.partition = '' |
| } |
| for (var i = 0; i < partitions; i++) { |
| this.partitionsListOptions.push(i) |
| } |
| } else { |
| this.partitionDisabled = true |
| this.postForm.partition = '-1' |
| if (this.loaded && this.routeTopic !== this.postForm.topic) { |
| this.reload() |
| } |
| } |
| }, |
| getRemoteTenantsList() { |
| fetchTenants().then(response => { |
| if (!response.data) return |
| for (var i = 0; i < response.data.total; i++) { |
| this.tenantsListOptions.push(response.data.data[i].tenant) |
| } |
| }) |
| }, |
| getOffloadStatus() { |
| offloadStatusOnCluster(this.getCurrentCluster(), this.postForm.persistent, this.getFullTopic()).then(response => { |
| if (!response.data) return |
| this.offload = response.data.status |
| }) |
| }, |
| getCompactionStatus() { |
| compactionStatusOnCluster(this.getCurrentCluster(), this.postForm.persistent, this.getFullTopic()).then(response => { |
| if (!response.data) return |
| this.compaction = response.data.status |
| }) |
| }, |
| initTopicStats() { |
| fetchTopicStats(this.postForm.persistent, this.getFullTopic()).then(response => { |
| if (!response.data) return |
| this.topicStats.push({ |
| inMsg: numberFormatter(response.data.msgRateIn, 2), |
| outMsg: numberFormatter(response.data.msgRateOut, 2), |
| inBytes: formatBytes(response.data.msgThroughputIn), |
| outBytes: formatBytes(response.data.msgThroughputOut) |
| }) |
| for (var i in response.data.publishers) { |
| this.producersList.push({ |
| 'producerId': response.data.publishers[i].producerId, |
| 'producerName': response.data.publishers[i].producerName, |
| 'inMsg': numberFormatter(response.data.publishers[i].msgRateIn, 2), |
| 'inBytes': formatBytes(response.data.publishers[i].msgThroughputIn), |
| 'avgMsgSize': numberFormatter(response.data.publishers[i].averageMsgSize, 2), |
| 'address': response.data.publishers[i].address, |
| 'since': response.data.publishers[i].connectedSince |
| }) |
| } |
| for (var s in response.data.subscriptions) { |
| var type = '' |
| if (response.data.subscriptions[s].hasOwnProperty('type')) { |
| type = response.data.subscriptions[s].type |
| } |
| this.subscriptionsList.push({ |
| 'subscription': s, |
| 'outMsg': numberFormatter(response.data.subscriptions[s].msgRateOut, 2), |
| 'outBytes': formatBytes(response.data.subscriptions[s].msgThroughputOut), |
| 'msgExpired': numberFormatter(response.data.subscriptions[s].msgRateExpired, 2), |
| 'backlog': response.data.subscriptions[s].msgBacklog, |
| 'type': type, |
| // subscriptions/:persistent/:tenant/:namespace/:topic/:subscription/subscription |
| 'subscriptionLink': '/management/subscriptions/' + this.postForm.persistent + '/' + this.getFullTopic() + '/' + s + '/subscription' |
| }) |
| } |
| this.storageSize = formatBytes(response.data.storageSize, 0) |
| }) |
| }, |
| initBundleRange() { |
| getBundleRangeOnCluster(this.getCurrentCluster(), this.postForm.persistent, this.getFullTopic()).then(response => { |
| if (!response.data) return |
| this.infoData.push({ |
| infoColumn: 'bundle', |
| data: response.data |
| }) |
| }) |
| }, |
| initTopicBroker() { |
| getTopicBrokerOnCluster(this.getCurrentCluster(), this.postForm.persistent, this.getFullTopic()).then(response => { |
| if (!response.data) return |
| this.infoData.push({ |
| infoColumn: 'broker', |
| data: response.data.brokerUrl |
| }) |
| this.infoData.push({ |
| infoColumn: 'httpUrl', |
| data: response.data.httpUrl |
| }) |
| }) |
| }, |
| initTerminateAndSegments() { |
| fetchTopicStatsInternal(this.postForm.persistent, this.getFullTopic()).then(response => { |
| if (!response.data) return |
| this.terminateStatus = response.data.state |
| this.segments = response.data.ledgers.length |
| var lastIndex = this.segments - 1 |
| for (var i in response.data.ledgers) { |
| if (lastIndex === parseInt(i)) { |
| this.segmentsList.push({ |
| 'ledgerId': response.data.ledgers[i]['ledgerId'], |
| 'entries': response.data.currentLedgerEntries, |
| 'size': numberFormatter(response.data.currentLedgerSize, 2), |
| 'offload': response.data.ledgers[i]['offloaded'], |
| 'status': 'opening' |
| }) |
| } else { |
| this.segmentsList.push({ |
| 'ledgerId': response.data.ledgers[i]['ledgerId'], |
| 'entries': response.data.ledgers[i]['entries'], |
| 'size': numberFormatter(response.data.ledgers[i]['size'], 2), |
| 'offload': response.data.ledgers[i]['offloaded'], |
| 'status': 'closing' |
| }) |
| } |
| } |
| this.entries = numberFormatter(response.data.numberOfEntries, 0) |
| for (var c in response.data.cursors) { |
| this.cursorsList.push({ |
| 'name': c, |
| 'markDeletePosition': response.data.cursors[c].markDeletePosition, |
| 'readPosition': response.data.cursors[c].readPosition, |
| 'waitingReadOp': response.data.cursors[c].waitingReadOp, |
| 'pendingReadOps': response.data.cursors[c].pendingReadOps, |
| 'numberOfEntriesSinceFirstNotAckedMessage': response.data.cursors[c].numberOfEntriesSinceFirstNotAckedMessage |
| }) |
| } |
| }) |
| }, |
| getNamespacesList(tenant) { |
| // reset the namespaces, topics and clusters list |
| this.namespacesListOptions = [] |
| this.topicsListOptions = [] |
| this.replicatedClusters = [] |
| if (this.firstInit) { |
| this.firstInit = false |
| } else { |
| this.postForm.namespace = '' |
| this.postForm.topic = '' |
| this.clusterForm.cluster = this.routeCluster || '' |
| } |
| fetchNamespaces(tenant, this.query).then(response => { |
| if (!response.data) return |
| let namespace = [] |
| for (var i = 0; i < response.data.data.length; i++) { |
| namespace = response.data.data[i].namespace |
| this.namespacesListOptions.push(namespace) |
| } |
| }) |
| }, |
| getReplicatedClusters() { |
| if (this.postForm.tenant && this.postForm.namespace) { |
| getClusters(this.postForm.tenant, this.postForm.namespace).then(response => { |
| if (!response.data) { |
| return |
| } |
| this.replicatedClusters = response.data |
| if (response.data.length > 0) { |
| this.clusterForm.cluster = this.routeCluster || this.replicatedClusters[0] |
| } |
| }) |
| } |
| }, |
| getTopicsList() { |
| this.getReplicatedClusters() |
| this.topicsListOptions = [] |
| this.partitionsListOptions = [] |
| if (this.firstInitTopic) { |
| this.firstInitTopic = false |
| } else { |
| this.postForm.topic = '' |
| this.postForm.partition = '' |
| } |
| fetchTopicsByPulsarManager(this.postForm.tenant, this.postForm.namespace).then(response => { |
| if (!response.data) return |
| for (var i in response.data.topics) { |
| this.topicsListOptions.push(response.data.topics[i]['topic']) |
| this.topicPartitions[response.data.topics[i]['topic']] = response.data.topics[i]['partitions'] |
| if (response.data.topics[i]['topic'] === this.postForm.topic) { |
| this.generatePartitions() |
| } |
| } |
| }) |
| }, |
| reload() { |
| this.$router.push({ path: '/management/topics/' + this.postForm.persistent + |
| '/' + this.getFullTopic() + '/topic?tab=' + this.currentTabName + '&cluster=' + this.getCurrentCluster() }) |
| }, |
| getCurrentCluster() { |
| return this.clusterForm.cluster || '' |
| }, |
| handleClick(tab, event) { |
| this.currentTabName = tab.name |
| this.$router.push({ |
| query: { |
| 'tab': tab.name, |
| 'cluster': this.getCurrentCluster() |
| } |
| }) |
| }, |
| handleUnload() { |
| unloadOnCluster(this.getCurrentCluster(), this.postForm.persistent, this.getFullTopic()).then(response => { |
| this.$notify({ |
| title: 'success', |
| message: this.$i18n.t('topic.notification.unloadTopicSuccess'), |
| type: 'success', |
| duration: 3000 |
| }) |
| }) |
| }, |
| handleTerminate() { |
| terminateOnCluster(this.getCurrentCluster(), this.postForm.persistent, this.getFullTopic()).then(response => { |
| this.$notify({ |
| title: 'success', |
| message: this.$i18n.t('topic.notification.terminateTopicSuccess'), |
| type: 'success', |
| duration: 3000 |
| }) |
| this.initTerminateAndSegments() |
| }) |
| }, |
| initPermissions() { |
| getPermissionsOnCluster(this.getCurrentCluster(), this.postForm.persistent, this.getFullTopic()).then(response => { |
| if (!response.data) return |
| for (var key in response.data) { |
| this.dynamicTags.push(key) |
| this.roleMap[key] = response.data[key] |
| this.roleMapOptions[key] = this.roleOptions |
| } |
| }) |
| }, |
| handleClose(tag) { |
| this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1) |
| revokePermissionsOnCluster(this.getCurrentCluster(), this.postForm.persistent, this.getFullTopic(), tag).then(response => { |
| this.$notify({ |
| title: 'success', |
| message: this.$i18n.t('namespace.notification.removeRoleSuccess'), |
| type: 'success', |
| duration: 3000 |
| }) |
| delete this.roleMap[tag] |
| delete this.roleMapOptions[tag] |
| }) |
| }, |
| showInput() { |
| this.inputVisible = true |
| this.$nextTick(_ => { |
| this.$refs.saveTagInput.$refs.input.focus() |
| }) |
| }, |
| handleInputConfirm() { |
| const inputValue = this.inputValue |
| if (inputValue) { |
| if (this.roleMap.hasOwnProperty(inputValue)) { |
| this.$message({ |
| message: this.$i18n.t('role.roleAlreadyExists'), |
| type: 'error' |
| }) |
| this.inputVisible = false |
| this.inputValue = '' |
| return |
| } |
| grantPermissionsOnCluster(this.getCurrentCluster(), this.postForm.persistent, this.getFullTopic(), inputValue, this.roleMap[inputValue]).then(response => { |
| this.$notify({ |
| title: 'success', |
| message: this.$i18n.t('namespace.notification.addRoleSuccess'), |
| type: 'success', |
| duration: 3000 |
| }) |
| this.dynamicTags.push(inputValue) |
| this.roleMap[inputValue] = [] |
| this.roleMapOptions[inputValue] = this.roleOptions |
| }) |
| } |
| this.inputVisible = false |
| this.inputValue = '' |
| }, |
| handleChangeOptions(role) { |
| grantPermissionsOnCluster(this.getCurrentCluster(), this.postForm.persistent, this.getFullTopic(), role, this.roleMap[role]).then(response => { |
| this.$notify({ |
| title: 'success', |
| message: this.$i18n.t('namespace.notification.addRoleActionsSuccess'), |
| type: 'success', |
| duration: 3000 |
| }) |
| }) |
| this.$forceUpdate() |
| }, |
| getFullTopic() { |
| var fullTopic = this.postForm.tenant + '/' + this.postForm.namespace + '/' + this.postForm.topic |
| if (parseInt(this.postForm.partition) >= 0) { |
| fullTopic += '-partition-' + this.postForm.partition |
| } |
| return fullTopic |
| }, |
| handleCompaction() { |
| compactOnCluster(this.getCurrentCluster(), this.postForm.persistent, this.getFullTopic()).then(response => { |
| this.$notify({ |
| title: 'success', |
| message: this.$i18n.t('topic.notification.startCompactionSuccess'), |
| type: 'success', |
| duration: 3000 |
| }) |
| this.getCompactionStatus() |
| }) |
| }, |
| handleOffload() { |
| offloadOnCluster(this.getCurrentCluster(), this.postForm.persistent, this.getFullTopic()).then(response => { |
| this.$notify({ |
| title: 'success', |
| message: this.$i18n.t('topic.notification.startOffloadSuccess'), |
| type: 'success', |
| duration: 3000 |
| }) |
| }) |
| this.getOffloadStatus() |
| }, |
| handleDeleteTopic() { |
| this.dialogStatus = 'delete' |
| this.dialogFormVisible = true |
| }, |
| deleteTopic() { |
| deleteTopicOnCluster(this.getCurrentCluster(), this.postForm.persistent, this.getFullTopic()).then(response => { |
| this.$notify({ |
| title: 'success', |
| message: this.$i18n.t('topic.notification.deleteTopicSuccess'), |
| type: 'success', |
| duration: 3000 |
| }) |
| this.$router.push({ path: '/management/namespaces/' + this.postForm.tenant + '/' + this.postForm.namespace + '/namespace?tab=topics' }) |
| }) |
| } |
| } |
| } |
| </script> |
| |
| <style> |
| .role-el-tag { |
| background-color: #fff !important; |
| border: none !important; |
| font-size: 16px !important; |
| color: black !important; |
| } |
| .split-line { |
| background: #e6e9f3; |
| border: none; |
| height: 1px; |
| } |
| .circle { |
| height: 150px !important; |
| width: 150px !important; |
| border-radius: 100% !important; |
| display:block; |
| margin:0 auto; |
| } |
| .el-icon-more { |
| transform: rotate(90deg); |
| -ms-transform: rotate(90deg); /* IE 9 */ |
| -moz-transform: rotate(90deg); /* Firefox */ |
| -webkit-transform: rotate(90deg); /* Safari 和 Chrome */ |
| -o-transform: rotate(90deg); /* Opera */ |
| } |
| .square { |
| width: 150px; |
| height: 150px; |
| display:block; |
| margin:0 auto; |
| } |
| .danger-line { |
| background: red; |
| border: none; |
| height: 1px; |
| } |
| </style> |
