add filter

This commit is contained in:
liangping 2022-03-19 11:39:17 +08:00
parent a8acd8e21f
commit 732c6ee922
3 changed files with 65 additions and 24 deletions

View File

@ -19,10 +19,20 @@
> >
Browse favorite only Browse favorite only
</b-button> </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 <b-form-input
v-model="query" v-model="query"
placeholder="Keywords to filter validators" placeholder="Keywords to filter validators"
/> />
</b-input-group>
</b-card> </b-card>
<b-row> <b-row>
<b-col <b-col
@ -40,15 +50,27 @@
@change="pinValidator(`${chain}#${x.address}`)" @change="pinValidator(`${chain}#${x.address}`)"
><span class="d-inline-block text-truncate font-weight-bold align-bottom">{{ index+1 }} {{ x.validator.moniker }}</span> ><span class="d-inline-block text-truncate font-weight-bold align-bottom">{{ index+1 }} {{ x.validator.moniker }}</span>
</b-form-checkbox> </b-form-checkbox>
<span
v-if="missing[x.address]"
>
<b-badge <b-badge
v-if="missing[x.address] && missing[x.address].missed_blocks_counter > 0" v-if="missing[x.address].missed_blocks_counter > 0"
v-b-tooltip.hover.v-danger v-b-tooltip.hover.v-danger
variant="light-danger" variant="light-danger"
:title="`missed blocks: ${missing[x.address].missed_blocks_counter}`" :title="`${missing[x.address].missed_blocks_counter} missed blocks`"
class="text-danger text-bolder" class="text-danger text-bolder"
> >
{{ missing[x.address].missed_blocks_counter }} {{ missing[x.address].missed_blocks_counter }}
</b-badge> </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> </div>
<div class="d-flex justify-content-between align-self-stretch flex-wrap"> <div class="d-flex justify-content-between align-self-stretch flex-wrap">
<div <div
@ -73,7 +95,7 @@
<script> <script>
import { import {
BRow, BCol, VBTooltip, BFormInput, BCard, BAlert, BFormCheckbox, BButton, BBadge, BRow, BCol, VBTooltip, BFormInput, BCard, BAlert, BFormCheckbox, BButton, BBadge, BInputGroup, BInputGroupPrepend,
} from 'bootstrap-vue' } from 'bootstrap-vue'
import { import {
@ -91,6 +113,8 @@ export default {
BButton, BButton,
BBadge, BBadge,
BFormCheckbox, BFormCheckbox,
BInputGroup,
BInputGroupPrepend,
}, },
directives: { directives: {
'b-tooltip': VBTooltip, 'b-tooltip': VBTooltip,
@ -99,6 +123,7 @@ export default {
const { chain } = this.$route.params const { chain } = this.$route.params
const pinned = localStorage.getItem('pinned') ? localStorage.getItem('pinned').split(',') : '' const pinned = localStorage.getItem('pinned') ? localStorage.getItem('pinned').split(',') : ''
return { return {
missedFilter: false,
pinned, pinned,
chain, chain,
query: '', query: '',
@ -113,10 +138,14 @@ export default {
uptime() { uptime() {
const vals = this.query ? this.validators.filter(x => String(x.description.moniker).indexOf(this.query) > -1) : this.validators const vals = this.query ? this.validators.filter(x => String(x.description.moniker).indexOf(this.query) > -1) : this.validators
vals.sort((a, b) => b.delegator_shares - a.delegator_shares) vals.sort((a, b) => b.delegator_shares - a.delegator_shares)
return vals.map(x => ({ const rets = vals.map(x => ({
validator: x.description, validator: x.description,
address: consensusPubkeyToHexAddress(x.consensus_pubkey), address: consensusPubkeyToHexAddress(x.consensus_pubkey),
})) }))
if (this.missedFilter) {
return rets.filter(x => this.missing[x.address].missed_blocks_counter > 0)
}
return rets
}, },
}, },
created() { created() {

View File

@ -32,15 +32,27 @@
> >
<span class="d-inline-block text-truncate font-weight-bold align-bottom"> {{ x.validator.moniker }} </span> <span class="d-inline-block text-truncate font-weight-bold align-bottom"> {{ x.validator.moniker }} </span>
</b-form-checkbox> </b-form-checkbox>
<span
v-if="missing[x.address]"
>
<b-badge <b-badge
v-if="missing[x.address] && missing[x.address].missed_blocks_counter > 0" v-if="missing[x.address].missed_blocks_counter > 0"
v-b-tooltip.hover.v-danger v-b-tooltip.hover.v-danger
variant="light-danger" variant="light-danger"
:title="`missed blocks: ${missing[x.address].missed_blocks_counter}`" :title="`${missing[x.address].missed_blocks_counter} missed blocks`"
class="text-danger text-bolder" class="text-danger text-bolder"
> >
{{ missing[x.address].missed_blocks_counter }} {{ missing[x.address].missed_blocks_counter }}
</b-badge> </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> </div>
<div class="d-flex justify-content-between align-self-stretch flex-wrap"> <div class="d-flex justify-content-between align-self-stretch flex-wrap">
<div <div

View File

@ -24,8 +24,8 @@
Note Note
</div> </div>
<div class="alert-body"> <div class="alert-body">
There are two ways to monitor your valdiators: There are two ways to monitor your validators:
<li> Pin a validator on Uptime page.</li> <li> Pin a validator on Uptime pages.</li>
<li> Specify parameters like following: <pre>https://ping.pub/cosmos/uptime/my?validators={"sifchain":["FBADE9A30473BB9ED6DFA16BFB3838E028F33650"],"chain_name":["hexAddress"]}</pre></li> <li> Specify parameters like following: <pre>https://ping.pub/cosmos/uptime/my?validators={"sifchain":["FBADE9A30473BB9ED6DFA16BFB3838E028F33650"],"chain_name":["hexAddress"]}</pre></li>
</div> </div>
</b-alert> </b-alert>