add missing blocks and filter by parameters

src/libs/fetch.js

@@ -71,8 +71,8 @@ export default class ChainFetch {
     return this.get(`/blocks/${height}`, config).then(data => Block.create(data))
   }
 
-  async getSlashingSigningInfo() {
+  async getSlashingSigningInfo(config = null) {
-    return this.get('/cosmos/slashing/v1beta1/signing_infos')
+    return this.get('/cosmos/slashing/v1beta1/signing_infos?pagination.limit=500', config)
   }
 
   async getTxs(hash) {
@@ -140,8 +140,8 @@ export default class ChainFetch {
     })
   }
 
-  async getValidatorList() {
+  async getValidatorList(config = null) {
-    return this.get('/staking/validators').then(data => {
+    return this.get('/staking/validators', config).then(data => {
       const vals = commonProcess(data).map(i => new Validator().init(i))
       localStorage.setItem(`validators-${this.config.chain_name}`, JSON.stringify(vals))
       return vals

src/views/Uptime.vue

@@ -32,13 +32,23 @@
           md="4"
           class="text-truncate"
         >
+          <div class="d-flex justify-content-between">
             <b-form-checkbox
               v-model="pinned"
               :value="`${chain}#${x.address}`"
-            class="custom-control-warning"
+              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] && missing[x.address].missed_blocks_counter > 0"
+              v-b-tooltip.hover.v-danger
+              :title="`missed blocks:${missing[x.address].missed_blocks_counter}`"
+              class="text-danger text-bolder"
+            >
+              {{ missing[x.address].missed_blocks_counter }}
+            </span>
+          </div>
           <div class="d-flex justify-content-between align-self-stretch flex-wrap">
             <div
               v-for="(b,i) in blocks"
@@ -68,6 +78,7 @@ import {
 import {
   consensusPubkeyToHexAddress, getCachedValidators, timeIn, toDay,
 } from '@/libs/utils'
+import { Bech32, toHex } from '@cosmjs/encoding'
 
 export default {
   components: {
@@ -115,6 +126,16 @@ export default {
     this.$http.getValidatorList().then(res => {
       this.validators = res
     })
+    this.$http.getSlashingSigningInfo().then(res => {
+      if (res.info) {
+        res.info.forEach(x => {
+          if (x.address) {
+            const hex = toHex(Bech32.decode(x.address).data).toUpperCase()
+            this.missing[hex] = x
+          }
+        })
+      }
+    })
     this.initBlocks()
   },
   beforeDestroy() {

src/views/UptimeMyChainBlocks.vue

@@ -23,6 +23,7 @@
           sm="12"
           class="text-truncate"
         >
+          <div class="d-flex justify-content-between">
             <b-form-checkbox
               v-model="pinned"
               :value="`${chain}#${x.address}`"
@@ -31,6 +32,15 @@
             >
               <span class="d-inline-block text-truncate font-weight-bold align-bottom"> {{ x.validator.moniker }} </span>
             </b-form-checkbox>
+            <span
+              v-if="missing[x.address] && missing[x.address].missed_blocks_counter > 0"
+              v-b-tooltip.hover.v-danger
+              :title="`missed blocks:${missing[x.address].missed_blocks_counter}`"
+              class="text-danger text-bolder"
+            >
+              {{ missing[x.address].missed_blocks_counter }}
+            </span>
+          </div>
           <div class="d-flex justify-content-between align-self-stretch flex-wrap">
             <div
               v-for="(b,i) in blocks"
@@ -60,6 +70,7 @@ import {
 import {
   getLocalChains, timeIn, toDay,
 } from '@/libs/utils'
+import { Bech32, toHex } from '@cosmjs/encoding'
 
 export default {
   name: 'Blocks',
@@ -105,6 +116,16 @@ export default {
   },
   created() {
     this.initBlocks()
+    this.$http.getSlashingSigningInfo(this.config).then(res => {
+      if (res.info) {
+        res.info.forEach(x => {
+          if (x.address) {
+            const hex = toHex(Bech32.decode(x.address).data).toUpperCase()
+            this.missing[hex] = x
+          }
+        })
+      }
+    })
   },
   beforeDestroy() {
     this.blocks = [] // clear running tasks if it is not finish

src/views/UptimeMyValidators.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container-md px-0">
-    <b-row>
+    <b-row v-if="chainVals">
       <b-col
         v-for="(x,index) in Object.keys(chainVals)"
         :key="index"
@@ -15,27 +15,42 @@
 
       </b-col>
     </b-row>
+    <b-alert
+      class="mt-2"
+      variant="success"
+      show
+    >
+      <div class="alert-heading">
+        Note
+      </div>
+      <div class="alert-body">
+        There are two ways to monitor your valdiators:
+        <li> Pin a validator on Uptime page.</li>
+        <li> Specify parameters like following: <pre>https://ping.pub/cosmos/uptime/my?validators={"sifchain":["FBADE9A30473BB9ED6DFA16BFB3838E028F33650"],"chain_name":["hexAddress"]}</pre></li>
+      </div>
+    </b-alert>
   </div>
 </template>
 
 <script>
 import {
-  BRow, BCol, VBTooltip,
+  BRow, BCol, VBTooltip, BAlert,
 } from 'bootstrap-vue'
-import { consensusPubkeyToHexAddress, getCachedValidators } from '@/libs/utils'
+import { consensusPubkeyToHexAddress, getCachedValidators, getLocalChains } from '@/libs/utils'
 import UptimeMyChainBlocks from './UptimeMyChainBlocks.vue'
 
 export default {
   components: {
     BRow,
     BCol,
+    BAlert,
     UptimeMyChainBlocks,
   },
   directives: {
     'b-tooltip': VBTooltip,
   },
   data() {
-    const pinned = (localStorage.getItem('pinned') || '').split(',').map(x => x.split('#')).reduce((a1, b) => {
+    let pinned = (localStorage.getItem('pinned') || '').split(',').map(x => x.split('#')).reduce((a1, b) => {
       const a = a1
       if (a[b[0]]) {
         a[b[0]].push(b[1])
@@ -44,17 +59,34 @@ export default {
       }
       return a
     }, {})
+    if (this.$route.query.validators) {
+      pinned = (JSON.parse(this.$route.query.validators))
+    }
 
     const chainVals = {}
+    if (pinned) {
+      const configs = getLocalChains()
       Object.keys(pinned).forEach(x => {
         const cached = JSON.parse(getCachedValidators(x))
+        if (cached) {
           const validators = []
           pinned[x].forEach(address => {
             const val = cached.find(v => address === consensusPubkeyToHexAddress(v.consensus_pubkey))
             if (val) validators.push({ address, validator: val.description })
           })
           chainVals[x] = validators
+        } else {
+          this.$http.getValidatorList(configs[x]).then((vals => {
+            const validators = []
+            pinned[x].forEach(address => {
+              const val = vals.find(v => address === consensusPubkeyToHexAddress(v.consensus_pubkey))
+              if (val) validators.push({ address, validator: val.description })
             })
+            this.$set(this.chainVals, x, validators)
+          }))
+        }
+      })
+    }
 
     return {
       chainVals,