add group
This commit is contained in:
liangping
parent
efbf2731e0
commit
43e403c061
@ -1,107 +1,163 @@
|
||||
<template>
|
||||
<div class="px-0">
|
||||
<b-card>
|
||||
<b-alert
|
||||
variant="danger"
|
||||
:show="syncing"
|
||||
>
|
||||
<div class="alert-body">
|
||||
<span>No new blocks have been produced since <strong>{{ latestTime }}</strong> </span>
|
||||
</div>
|
||||
</b-alert>
|
||||
<b-card
|
||||
no-body
|
||||
class="mb-1"
|
||||
>
|
||||
<b-button
|
||||
to="./uptime/my"
|
||||
variant="primary"
|
||||
>
|
||||
Browse favorite only
|
||||
</b-button>
|
||||
<b-input-group>
|
||||
<b-input-group-prepend is-text>
|
||||
<b-form-checkbox
|
||||
v-model="missedFilter"
|
||||
v-b-tooltip.hover
|
||||
title="Only missed blocks"
|
||||
name="viewMissed"
|
||||
/>
|
||||
</b-input-group-prepend>
|
||||
<b-form-input
|
||||
v-model="query"
|
||||
placeholder="Keywords to filter validators"
|
||||
/>
|
||||
</b-input-group>
|
||||
</b-card>
|
||||
<b-row>
|
||||
<b-col
|
||||
v-for="(x,index) in uptime"
|
||||
:key="index"
|
||||
sm="12"
|
||||
md="4"
|
||||
xl="3"
|
||||
class="text-truncate"
|
||||
>
|
||||
<div class="d-flex justify-content-between">
|
||||
<b-form-checkbox
|
||||
v-model="pinned"
|
||||
:value="`${chain}#${x.address}`"
|
||||
class="custom-control-warning text-truncate"
|
||||
@change="pinValidator(`${chain}#${x.address}`)"
|
||||
><span class="d-inline-block text-truncate font-weight-bold align-bottom">{{ index+1 }} {{ x.validator.moniker }}</span>
|
||||
</b-form-checkbox>
|
||||
<span v-if="missing[x.address]">
|
||||
<b-badge
|
||||
v-if="missing[x.address].missed_blocks_counter > 0"
|
||||
v-b-tooltip.hover.v-danger
|
||||
variant="light-danger"
|
||||
:title="`${missing[x.address].missed_blocks_counter} missed blocks`"
|
||||
class="text-danger text-bolder"
|
||||
>
|
||||
{{ missing[x.address].missed_blocks_counter }}
|
||||
</b-badge>
|
||||
<b-badge
|
||||
v-else
|
||||
v-b-tooltip.hover.v-success
|
||||
variant="light-success"
|
||||
title="Perfect! No missed blocks"
|
||||
>
|
||||
0
|
||||
</b-badge>
|
||||
</span>
|
||||
</div>
|
||||
<b-skeleton-wrapper :loading="loading">
|
||||
<template #loading>
|
||||
<b-skeleton width="100%" />
|
||||
</template>
|
||||
<template #default>
|
||||
<div class="d-flex justify-content-between align-self-stretch flex-wrap">
|
||||
<div
|
||||
v-for="(b,i) in blocks"
|
||||
:key="i"
|
||||
style="width:1.5%;"
|
||||
><router-link :to="`./blocks/${b.height}`">
|
||||
<div
|
||||
v-b-tooltip.hover.v-second
|
||||
:title="b.height"
|
||||
:class="b.sigs && b.sigs[x.address] ? b.sigs[x.address] : 'bg-light-success'"
|
||||
class="m-auto"
|
||||
> </div>
|
||||
</router-link>
|
||||
</div>
|
||||
<b-tabs>
|
||||
<b-tab title="Group By Validator">
|
||||
<b-card>
|
||||
<b-alert
|
||||
variant="danger"
|
||||
:show="syncing"
|
||||
>
|
||||
<div class="alert-body">
|
||||
<span>No new blocks have been produced since <strong>{{ latestTime }}</strong> </span>
|
||||
</div>
|
||||
</b-alert>
|
||||
<b-card
|
||||
no-body
|
||||
class="mb-1"
|
||||
>
|
||||
<b-row>
|
||||
<b-col md="3">
|
||||
<h4>#{{ height }}</h4>
|
||||
</b-col>
|
||||
<b-col md="9">
|
||||
<b-input-group>
|
||||
<b-input-group-prepend is-text>
|
||||
<b-form-checkbox
|
||||
v-model="missedFilter"
|
||||
v-b-tooltip.hover
|
||||
title="Only missed blocks"
|
||||
name="viewMissed"
|
||||
/>
|
||||
</b-input-group-prepend>
|
||||
<b-form-input
|
||||
v-model="query"
|
||||
placeholder="Keywords to filter validators"
|
||||
/>
|
||||
<b-input-group-append>
|
||||
<b-button
|
||||
to="./uptime/my"
|
||||
variant="primary"
|
||||
>
|
||||
Favorite
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-card>
|
||||
<b-row>
|
||||
<b-col
|
||||
v-for="(x,index) in uptime"
|
||||
:key="index"
|
||||
sm="12"
|
||||
md="4"
|
||||
xl="3"
|
||||
class="text-truncate"
|
||||
>
|
||||
<div class="d-flex justify-content-between">
|
||||
<b-form-checkbox
|
||||
v-model="pinned"
|
||||
:value="`${chain}#${x.address}`"
|
||||
class="custom-control-warning text-truncate"
|
||||
@change="pinValidator(`${chain}#${x.address}`)"
|
||||
><span class="d-inline-block text-truncate font-weight-bold align-bottom">{{ index+1 }} {{ x.validator.moniker }}</span>
|
||||
</b-form-checkbox>
|
||||
<span v-if="missing[x.address]">
|
||||
<b-badge
|
||||
v-if="missing[x.address].missed_blocks_counter > 0"
|
||||
v-b-tooltip.hover.v-danger
|
||||
variant="light-danger"
|
||||
:title="`${missing[x.address].missed_blocks_counter} missed blocks`"
|
||||
class="text-danger text-bolder"
|
||||
>
|
||||
{{ missing[x.address].missed_blocks_counter }}
|
||||
</b-badge>
|
||||
<b-badge
|
||||
v-else
|
||||
v-b-tooltip.hover.v-success
|
||||
variant="light-success"
|
||||
title="Perfect! No missed blocks"
|
||||
>
|
||||
0
|
||||
</b-badge>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</b-skeleton-wrapper>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-card>
|
||||
<b-skeleton-wrapper :loading="loading">
|
||||
<template #loading>
|
||||
<b-skeleton width="100%" />
|
||||
</template>
|
||||
<template #default>
|
||||
<div class="d-flex justify-content-between align-self-stretch flex-wrap">
|
||||
<div
|
||||
v-for="(b,i) in blocks"
|
||||
:key="i"
|
||||
style="width:1.5%;"
|
||||
><router-link :to="`./blocks/${b.height}`">
|
||||
<div
|
||||
v-b-tooltip.hover.v-second
|
||||
:title="b.height"
|
||||
:class="b.sigs && b.sigs[x.address] ? b.sigs[x.address] : 'bg-light-success'"
|
||||
class="m-auto"
|
||||
> </div>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</b-skeleton-wrapper>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-card>
|
||||
</b-tab>
|
||||
<b-tab title="Group By Proposer">
|
||||
<b-card>
|
||||
<b-row>
|
||||
<b-col
|
||||
md="3"
|
||||
sm="12"
|
||||
>
|
||||
<h4>#{{ height }}</h4>
|
||||
</b-col>
|
||||
<b-col
|
||||
sm="12"
|
||||
md="9"
|
||||
>
|
||||
<b-input-group
|
||||
prepend="Qty of absent validators"
|
||||
>
|
||||
<b-form-input
|
||||
id="threshold"
|
||||
v-model="threshold"
|
||||
placeholder="Absent validator number in blocks"
|
||||
/>
|
||||
</b-input-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
</b-card>
|
||||
|
||||
<b-row>
|
||||
<b-col
|
||||
v-for="(x, i) in proposerViewData"
|
||||
:key="i"
|
||||
md="4"
|
||||
sm="12"
|
||||
class="text-truncate"
|
||||
>
|
||||
{{ x.name }}
|
||||
<b-badge :variant="x.counter > 0 ? 'light-danger': 'light-success'">
|
||||
{{ x.counter }} / {{ x.proposed }}
|
||||
</b-badge>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
</b-tab>
|
||||
</b-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
BSkeleton, BSkeletonWrapper,
|
||||
BSkeleton, BSkeletonWrapper, BInputGroupAppend, BTabs, BTab, BFormGroup,
|
||||
BRow, BCol, VBTooltip, BFormInput, BCard, BAlert, BFormCheckbox, BButton, BBadge, BInputGroup, BInputGroupPrepend,
|
||||
} from 'bootstrap-vue'
|
||||
|
||||
@ -115,6 +171,7 @@ export default {
|
||||
BRow,
|
||||
BCol,
|
||||
BFormInput,
|
||||
BFormGroup,
|
||||
BCard,
|
||||
BAlert,
|
||||
BButton,
|
||||
@ -124,6 +181,9 @@ export default {
|
||||
BSkeleton,
|
||||
BSkeletonWrapper,
|
||||
BInputGroupPrepend,
|
||||
BInputGroupAppend,
|
||||
BTabs,
|
||||
BTab,
|
||||
},
|
||||
directives: {
|
||||
'b-tooltip': VBTooltip,
|
||||
@ -132,6 +192,7 @@ export default {
|
||||
const { chain } = this.$route.params
|
||||
const pinned = localStorage.getItem('pinned') ? localStorage.getItem('pinned').split(',') : ''
|
||||
return {
|
||||
height: 0,
|
||||
loading: true,
|
||||
missedFilter: false,
|
||||
pinned,
|
||||
@ -142,6 +203,11 @@ export default {
|
||||
blocks: Array.from('0'.repeat(50)).map(x => ({ sigs: {}, height: Number(x) })),
|
||||
syncing: false,
|
||||
latestTime: '',
|
||||
threshold: 10,
|
||||
proposers: {},
|
||||
absentValsInBlock: {},
|
||||
numOfBlock: 1000,
|
||||
temp: 0,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -157,10 +223,30 @@ export default {
|
||||
}
|
||||
return rets
|
||||
},
|
||||
// Compose data for group by proposer
|
||||
proposerViewData() {
|
||||
const valCounter = {}
|
||||
this.validators.forEach(x => {
|
||||
valCounter[this.hex2base64(consensusPubkeyToHexAddress(x.consensus_pubkey))] = {
|
||||
name: x.description.moniker,
|
||||
counter: 0,
|
||||
proposed: 0,
|
||||
}
|
||||
})
|
||||
Object.keys(this.proposers).forEach(height => {
|
||||
const num = this.absentValsInBlock[height] || 0
|
||||
if (valCounter[this.proposers[height]]) {
|
||||
if (num > this.threshold) {
|
||||
valCounter[this.proposers[height]].counter += 1 // (num >= Number(this.threshold) ? 1 : 0)
|
||||
}
|
||||
valCounter[this.proposers[height]].proposed += 1
|
||||
}
|
||||
})
|
||||
return Object.values(valCounter).sort((a, b) => b.counter - a.counter)
|
||||
},
|
||||
},
|
||||
created() {
|
||||
const cached = JSON.parse(getCachedValidators(this.$route.params.chain))
|
||||
|
||||
if (cached) {
|
||||
this.validators = cached
|
||||
}
|
||||
@ -216,7 +302,7 @@ export default {
|
||||
blocks.push({ sigs, height })
|
||||
this.blocks = blocks
|
||||
|
||||
this.timer = setInterval(this.fetch_latest, 6000)
|
||||
this.timer = setInterval(this.fetch_latest, 1000)
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
@ -231,16 +317,30 @@ export default {
|
||||
return toBase64(fromHex(v))
|
||||
},
|
||||
fetch_status(height, resolve) {
|
||||
const block = this.blocks.find(b => b.height === height)
|
||||
if (block) {
|
||||
this.$http.getBlockByHeight(height).then(res => {
|
||||
resolve()
|
||||
this.$http.getBlockByHeight(height).then(res => {
|
||||
resolve()
|
||||
const block = this.blocks.find(b => b.height === height)
|
||||
// update valiators states
|
||||
if (block) {
|
||||
const sigs = this.initColor()
|
||||
res.block.last_commit.signatures.forEach(x => {
|
||||
if (x.validator_address) sigs[x.validator_address] = 'bg-success'
|
||||
})
|
||||
this.$set(block, 'sigs', sigs)
|
||||
})
|
||||
}
|
||||
|
||||
// update proposer states
|
||||
this.count(res.block)
|
||||
})
|
||||
},
|
||||
/// count how many absent valiators in a block
|
||||
count(block) {
|
||||
const count = block.last_commit.signatures.reduce((p, c) => (c.block_id_flag !== 'BLOCK_ID_FLAG_COMMIT' ? p + 1 : p), 0)
|
||||
// Notes: block.header.height == last_commint.height + 1
|
||||
this.$set(this.proposers, block.header.height, block.header.proposer_address)
|
||||
this.$set(this.absentValsInBlock, block.last_commit.height, count)
|
||||
if (count >= this.threshold) {
|
||||
this.temp += 1
|
||||
}
|
||||
},
|
||||
fetch_latest() {
|
||||
@ -249,12 +349,14 @@ export default {
|
||||
res.block.last_commit.signatures.forEach(x => {
|
||||
if (x.validator_address) sigs[x.validator_address] = 'bg-success'
|
||||
})
|
||||
this.height = res.block.header.height
|
||||
const block = this.blocks.find(b => b.height === res.block.last_commit.height)
|
||||
if (typeof block === 'undefined') { // mei
|
||||
// this.$set(block, 0, typeof sigs !== 'undefined')
|
||||
if (this.blocks.length >= 50) this.blocks.shift()
|
||||
this.blocks.push({ sigs, height: res.block.last_commit.height })
|
||||
}
|
||||
this.count(res.block)
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user