add consensus view

2022-08-26 14:56:49 +08:00 · 2022-08-26 14:56:49 +08:00 · e2f041a19f
commit e2f041a19f
parent b6dd542cb3
6 changed files with 83 additions and 101 deletions
--- a/src/@core/layouts/modules.js
+++ b/src/@core/layouts/modules.js
@ -25,6 +25,11 @@ export default () => ([
    title: 'uptime',
    route: 'uptime',
  },
+  {
+    scope: 'normal',
+    title: 'parameters',
+    route: 'parameters',
+  },
  {
    scope: 'normal',
    title: 'statesync',
@ -32,8 +37,8 @@ export default () => ([
  },
  {
    scope: 'normal',
-    title: 'parameters',
-    route: 'parameters',
+    title: 'consensus',
+    route: 'consensus',
  },
  {
    scope: 'cos-mos',
--- a/src/navigation/horizontal/index.js
+++ b/src/navigation/horizontal/index.js
@ -1 +0,0 @@
-// unimplement
--- a/src/navigation/vertical/index.js
+++ b/src/navigation/vertical/index.js
@ -36,6 +36,11 @@ function processMenu() {
      icon: 'LifeBuoyIcon',
    })
  }
+  chainMenus.push({
+    title: 'Github',
+    href: 'https://github.com/ping-pub/explorer',
+    icon: 'GithubIcon',
+  })
  chainMenus.push({
    title: 'Discord',
    href: 'https://discord.gg/CmjYVSr6GW',
@ -47,9 +52,9 @@ function processMenu() {
    icon: 'TwitterIcon',
  })
  chainMenus.push({
-    title: 'Github',
-    href: 'https://github.com/ping-pub/explorer',
-    icon: 'GithubIcon',
+    title: 'Telegram',
+    href: 'https://t.me/pingpub',
+    icon: 'SendIcon',
  })

  return chainMenus
--- a/src/router/index.js
+++ b/src/router/index.js
@ -362,11 +362,17 @@ const router = new VueRouter({
    },
    // common modules
    {
-      path: '/tools/consensus-states',
+      path: '/:chain/consensus',
      name: 'consensus',
      component: () => import('@/views/ConsensusStates.vue'),
      meta: {
-        layout: 'full',
+        pageTitle: 'Consensus State',
+        breadcrumb: [
+          {
+            text: 'Consensus State',
+            active: true,
+          },
+        ],
      },
    },
    {
--- a/src/views/ConsensusStates.vue
+++ b/src/views/ConsensusStates.vue
@ -1,36 +1,7 @@
 <template>
  <div class="container-md">
-    <full-header />
-    <b-card class="d-flex justify-content-start my-1">
-      <b-breadcrumb :items="navs" />
-    </b-card>
-
    <b-card>
      <b-row>
-        <b-col
-          sm="12"
-          md="4"
-        >
-          <v-select
-            v-model="selected"
-            :options="Object.values(chains)"
-            label="chain_name"
-            @input="onchange"
-          >
-            <template #no-options="">
-              Please select a chain.
-            </template>
-            <template #option="{ chain_name, logo }">
-              <b-avatar
-                :src="logo"
-                size="16"
-                variant="light-primary"
-                class="align-middle mr-50"
-              />
-              <span> {{ chain_name.toUpperCase() }}</span>
-            </template>
-          </v-select>
-        </b-col>
        <b-col>
          <b-input-group>
            <b-form-input
@ -40,7 +11,7 @@
            <b-input-group-append>
              <b-button
                variant="outline-primary"
-                @click="update()"
+                @click="onchange()"
              >
                Moniter
              </b-button>
@ -55,10 +26,11 @@
        {{ httpstatus }}: {{ httpStatusText }}
      </div>
    </b-card>
-    <b-card
-      v-if="roundState['height/round/step']"
-      :title="`Height/Round/Step: ${roundState['height/round/step']}`"
-    >
+    <b-card v-if="roundState['height/round/step']">
+      <b-card-title class="d-flex justify-content-between">
+        <span>Height/Round/Step: {{ roundState['height/round/step'] }}</span>
+        <small class="text-danger">Updated at {{ format(updatetime) }}</small>
+      </b-card-title>
      <div
        v-for="item in roundState.height_vote_set"
        :key="item.round"
@ -95,25 +67,35 @@
        /> Not Signed
      </b-card-footer>
    </b-card>
-    <app-footer class="mb-1" />
+
+    <b-alert
+      variant="info"
+      show
+    >
+      <h4 class="alert-heading">
+        Tips
+      </h4>
+      <div class="alert-body">
+        <span>If you want to change the default rpc endpoint. make sure that "https" and "CORS" are enabled on your server.</span>
+      </div>
+    </b-alert>
  </div>
 </template>

 <script>
 import {
-  BAvatar, BCardFooter, BRow, BCol,
-  BBreadcrumb, BCard, BCardBody, BInputGroup, BFormInput, BInputGroupAppend, BButton,
+  BAvatar, BCardFooter, BRow, BCol, BCardTitle, BAlert,
+  BCard, BCardBody, BInputGroup, BFormInput, BInputGroupAppend, BButton,
 } from 'bootstrap-vue'
 import fetch from 'node-fetch'
-import { consensusPubkeyToHexAddress, getLocalChains } from '@/libs/utils'
+import {
+  consensusPubkeyToHexAddress, getLocalChains, getCachedValidators, toDay,
+} from '@/libs/utils'
 import vSelect from 'vue-select'
-import AppFooter from '@/@core/layouts/components/AppFooter.vue'
-import FullHeader from './components/FullHeader.vue'

 export default {
  components: {
-    FullHeader,
-    BBreadcrumb,
+    BAlert,
    BRow,
    BCol,
    BCard,
@ -124,21 +106,13 @@ export default {
    BInputGroupAppend,
    BButton,
    BAvatar,
+    BCardTitle,
    vSelect,
-    AppFooter,
  },

  data() {
    const chains = getLocalChains()
    return {
-      navs: [
-        {
-          text: 'Tools',
-        },
-        {
-          text: 'Consensus Monitor',
-        },
-      ],
      showPrevote: false,
      httpstatus: 200,
      httpStatusText: '',
@ -146,20 +120,25 @@ export default {
      chains,
      vals: [],
      positions: [],
+      updatetime: new Date(),
+      rpc: '',
    }
  },
  computed: {
    selected() {
-      return this.$route.query.chain || this.chains[Object.keys(this.chains)[0]].chain_name
-    },
-    rpc() {
-      return `${this.chains[this.selected].rpc[0]}/consensus_state`
+      return this.$store.state.chains.selected.chain_name
    },
  },
  created() {
    this.validators()
+    this.rpc = `${this.chains[this.selected].rpc[0]}/consensus_state`
+    this.timer = setInterval(this.update, 6000)
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
  },
  methods: {
+    format: v => toDay(v, 'time'),
    color(i, txt) {
      if (i === this.roundState.proposer.index) {
        return txt === 'nil-Vote' ? 'outline-primary' : 'primary'
@ -167,46 +146,40 @@ export default {
      return txt === 'nil-Vote' ? 'outline-secondary' : 'success'
    },
    update() {
-      fetch(this.rpc).then(data => {
-        this.httpstatus = data.status
-        this.httpStatusText = data.httpStatusText
-        return data.json()
-      }).then(res => {
-        this.roundState = res.result.round_state
-      }).catch(err => {
-        this.httpstatus = 500
-        this.httpStatusText = err
-      })
+      this.updatetime = new Date()
+      if (this.httpstatus === 200) {
+        fetch(this.rpc).then(data => {
+          this.httpstatus = data.status
+          this.httpStatusText = data.httpStatusText
+          return data.json()
+        }).then(res => {
+          this.roundState = res.result.round_state
+        }).catch(err => {
+          this.httpstatus = 500
+          this.httpStatusText = err
+        })
+      }
    },
    validators() {
      const conf = this.chains[this.selected]
+      let vals = []
      this.$http.getValidatorList(conf).then(data => {
-        this.vals = data.map(x => {
+        vals = data
+      }).catch(() => {
+        vals = getCachedValidators(this.selected.chain_name) || []
+      }).finally(() => {
+        this.vals = vals.map(x => {
          const x2 = x
          x2.hex = consensusPubkeyToHexAddress(x.consensus_pubkey)
          return x2
        })
      })
    },
-    onchange(v) {
+    onchange() {
      this.httpstatus = 200
      this.httpStatusText = ''
      this.roundState = {}
-      this.selected = v.chain_name
-      this.rpc = `${v.rpc[0]}/consensus_state`
-      // used for mapping nil-vote validators
-      fetch(`${v.rpc[0]}/validators?per_page=100`).then(data => data.json()).then(res2 => {
-        this.positions = res2.result.validators
-        if (res2.result.total > 100) {
-          fetch(`${v.rpc[0]}/validators?page=2&per_page=100`).then(data => data.json()).then(res => {
-            this.positions = this.positions.concat(res.result.validators)
-          })
-        }
-      }).catch(err => {
-        this.httpstatus = 500
-        this.httpStatusText = err
-      })
-      this.validators()
+      // this.validators()
    },
    showName(i, text) {
      if (text === 'nil-Vote') {
--- a/src/views/StateSync.vue
+++ b/src/views/StateSync.vue
@ -10,18 +10,12 @@
    <b-card>
      <b-card-title>
        Starting New Node From State Sync
-        <b-badge
-          v-if="snapshot_provider?false:true"
-          variant="danger"
-        >
-          WIP
-        </b-badge>
      </b-card-title>
-      <b class="mt-1">1. Install Binary ({{ version }})</b><br>
+      <b class="mt-1">1. Install Binary (Version: {{ version }})</b><br>
      We need to install the binary first and make sure that the version is the one currently in use on mainnet.
      <br><br>
      <b class="mt-1">2. Enable State Sync</b><br>
-      We can configure Tendermint to use state sync in <code>$DAEMON_HOME/config/config.toml</code>, then start daemon.
+      We can configure Tendermint to use state sync in <code>$DAEMON_HOME/config/config.toml</code>.
      <ul class="mt-1">
        <li
          v-for="e in error"
@ -41,6 +35,8 @@
        class="my-1"
        @change="check()"
      />
+      <b class="mt-1">3. Start the daemon</b><br>
+      If you are resetting node, run <code>unsafe-reset-all</code> before you start the daemon.
    </b-card>

    <b-card>
@ -48,7 +44,6 @@
        Enable Snapshot For State Sync
      </b-card-title>
      To make state sync works, we can enable snapshot in <code>$DAEMON_HOME/config/app.toml</code>
-      and don't forget to share your snapshot server <a href="https://github.com/ping-pub/explorer/discussions">Here</a>
      <b-form-textarea
        id="snapshot"
        v-model="snapshot"
@ -62,12 +57,11 @@

 <script>
 import {
-  BCard, BCardTitle, BFormTextarea, BBadge,
+  BCard, BCardTitle, BFormTextarea,
 } from 'bootstrap-vue'

 export default {
  components: {
-    BBadge,
    BCard,
    BCardTitle,
    BFormTextarea,