improve uptime

src/modules/[chain]/statesync/index.vue

@@ -19,17 +19,10 @@ if(height.value > 2000) {
     hash.value = toHex(fromBase64(res.block_id.hash)).toUpperCase()
   })
 }
-const state = computed(() => {
+const rpcs = computed(() => {
-  const rpcs = blockchain.current?.endpoints?.rpc
+  return blockchain.current?.endpoints?.rpc
     ?.map((x) => x.address)
     .join(',');
-  return `[statesync]
-enable = true
-rpc_servers = "${rpcs}"
-trust_height = ${height.value || 'loading'}
-trust_hash = "${hash.value}"
-trust_period = "168h"  # 2/3 of unbonding time"
-`;
 });
 
 const appName = computed(() => {
@@ -77,7 +70,17 @@ onMounted(() => {
         We can configure Tendermint to use state sync in
         $DAEMON_HOME/config/config.toml.
         <br /><br />
-        <VTextarea auto-grow :model-value="state"></VTextarea>
+        <div class="mockup-code my-2">
+            <pre data-prefix=">"><code class="text-gray-400">[state-sync]</code></pre>
+            <pre data-prefix=">"><code class="text-gray-400">enable = true</code></pre>
+            <pre data-prefix=">"><code class="text-gray-400"></code></pre>
+            <pre data-prefix=">"><code class="text-gray-400">rpc_servers = "{{ rpcs }}"</code></pre>
+            <pre data-prefix=">"><code class="text-gray-400">trust_height = {{ height }} </code></pre>
+            <pre data-prefix=">"><code class="text-gray-400">trust_hash = "{{hash}}"</code></pre>
+            <pre data-prefix=">"><code class="text-gray-400"></code></pre>
+            <pre data-prefix=">"><code class="text-green-400"># 2/3 of unbonding time</code></pre>
+            <pre data-prefix=">"><code class="text-gray-400">trust_period = "168h"</code></pre>
+        </div>
         <br />
         3. Start the daemon: <code class="bg-base-200 text-gray-600 px-2 py-px mx-1 rounded shadow">{{ appName }} start</code>
         <br />
@@ -94,17 +97,15 @@ onMounted(() => {
         To make state sync works, we can enable snapshot in
         $DAEMON_HOME/config/app.toml
         <br /><br />
-        <VTextarea
+        <div class="mockup-code my-2">
-          auto-grow
+            <pre data-prefix=">"><code class="text-gray-400">[state-sync]</code></pre>
-          model-value="[state-sync]
+            <pre data-prefix=">"><code class="text-green-400"># snapshot-interval specifies the block interval at which local state sync snapshots are</code></pre>
-# snapshot-interval specifies the block interval at which local state sync snapshots are
+            <pre data-prefix=">"><code class="text-green-400"># taken (0 to disable). Must be a multiple of pruning-keep-every.</code></pre>
-# taken (0 to disable). Must be a multiple of pruning-keep-every.
+            <pre data-prefix=">"><code class="text-gray-400">snapshot-interval = 1000</code></pre>
-snapshot-interval = 1000
+            <pre data-prefix=">"><code class="text-gray-400"></code></pre>
-
+            <pre data-prefix=">"><code class="text-green-400"># snapshot-keep-recent specifies the number of recent snapshots to keep and serve (0 to keep all). Each snapshot is about 500MiB</code></pre>
-# snapshot-keep-recent specifies the number of recent snapshots to keep and serve (0 to keep all). Each snapshot is about 500MiB
+            <pre data-prefix=">"><code class="text-gray-400">snapshot-keep-recent = 2</code></pre>
-snapshot-keep-recent = 2"
+        </div>
-        >
-        </VTextarea>
       </div>
     </div>
   </div>

src/modules/[chain]/uptime/customize.vue

@@ -29,7 +29,7 @@ const selectChain = ref(chainStore.chainName)
 const validators = ref(stakingStore.validators)
 const keyword = ref("")
 
-if(local.value) Object.keys(local.value).map(chainName => {
+function loadSigningInfo(chainName: string) {
   const chain = dashboard.chains[chainName]
   if(chain && chain.endpoints.rest) {
     const client = CosmosRestClient.newDefault(chain.endpoints.rest[0].address)
@@ -37,16 +37,18 @@ if(local.value) Object.keys(local.value).map(chainName => {
       signingInfo.value[chainName] = resp.info
     })
   }
-  if(chainName === selectChain.value) {
+}
-    const vals = local.value[chainName]
+if(local.value) Object.keys(local.value).map(chainName => {
-    if(vals) {
+  loadSigningInfo(chainName)
-      selected.value = vals.map(x => x.address)
-    }
-  }
-
-  return chain
 })
 
+function initial() {
+  const vals = local.value[selectChain.value]
+  if(vals) {
+    selected.value = vals.map(x => x.address)
+  }
+}
+
 const filterValidators = computed(() => {
   if(keyword.value) {
     return validators.value.filter(x => x.description.moniker.indexOf(keyword.value) > -1)
@@ -74,6 +76,9 @@ const list = computed(() => {
 })
 
 function add() {
+  if(!signingInfo.value[selectChain.value]) {
+    loadSigningInfo(selectChain.value)
+  }
   const newList = [] as { name: string; address: string; }[]
   selected.value.forEach(x => {
     const validator = validators.value.find(v => (consensusPubkeyToHexAddress(v.consensus_pubkey) === x))
@@ -84,6 +89,7 @@ function add() {
   })
   if(!local.value) local.value = {}
   local.value[selectChain.value] = newList
+
   localStorage.setItem("uptime-validators", JSON.stringify(local.value))
 }
 
@@ -140,22 +146,24 @@ function color(v: string) {
           
         </div>
       </div>
-      <table class="table w-full">
+      <table class="table table-compact w-full">
         <thead>
           <tr>
+            <th>#</th>
             <th>Blockchain</th>
             <th>Validator</th>
-            <th>Missing Blocks</th>
             <th>Signed Blocks</th>
             <th>Last Jailed Time</th>
             <th>Tombstoned</th>
+            <th>Missing Blocks</th>
+            <th></th>
           </tr>
         </thead>
         <tbody>
-          <tr v-for="v in list">
+          <tr v-for="(v, i) in list" class="hover">
+            <td>{{ i+1 }}</td>
             <td class=" capitalize">{{ v.chainName }}</td>
             <td>{{ v.v.name }}</td>
-            <td><span v-if="v.sigingInfo" class="badge " :class="color( v.sigingInfo?.missed_blocks_counter)">{{ v.sigingInfo?.missed_blocks_counter }}</span></td>
             <td><span v-if="v.sigingInfo">{{ Number(v.sigingInfo.index_offset) - Number(v.sigingInfo.start_height) }}</span></td>
             <td>
               <div v-if="v.sigingInfo && !v.sigingInfo?.jailed_until.startsWith('1970')" class="text-xs flex flex-col">
@@ -164,6 +172,8 @@ function color(v: string) {
               </div>
             </td>
             <td class=" capitalize">{{ v.sigingInfo?.tombstoned }}</td>
+            <td><span v-if="v.sigingInfo" class="badge " :class="color( v.sigingInfo?.missed_blocks_counter)">{{ v.sigingInfo?.missed_blocks_counter }}</span></td>
+            <td class=""><RouterLink :to="`/${v.chainName}/uptime/#blocks`" class="btn btn-xs btn-primary">Blocks</RouterLink></td>
           </tr>
         </tbody>
       </table>
@@ -172,12 +182,11 @@ function color(v: string) {
     <label for="add-validator" class="btn btn-primary mt-5">Add Validators</label>
 
     <!-- Put this part before </body> tag -->
-    <input type="checkbox" id="add-validator" class="modal-toggle" />
+    <input type="checkbox" id="add-validator" class="modal-toggle" @change="initial" />
     <div class="modal">
       <div class="modal-box relative">
         <label for="add-validator" class="btn btn-sm btn-circle absolute right-2 top-2">✕</label>
         <h3 class="text-lg font-bold">Add Validators</h3>
-        <div class="py-4 max-h-60 overflow-y-auto">
           <div class="form-control my-5 border-2">
             <div class="input-group input-group-md">
             <select v-model="selectChain" class="select select-bordered capitalize" @change="changeChain">
@@ -188,13 +197,15 @@ function color(v: string) {
               <input v-model="keyword" type="text" class="input w-full" placeholder="keywords to filter validator">
             </div>
           </div>
+        <div class="py-4 max-h-60 overflow-y-auto">
+          
           <table class="table table-compact w-full hover">
             <thead>
               <tr><th>Validator</th><th></th></tr>
             </thead>
             <tbody>
-              <tr v-for="v in filterValidators">
+              <tr v-for="(v, i) in filterValidators">
-                <td><label :for="v.operator_address"><div class=" w-full">{{ v.description.moniker }}</div></label></td>
+                <td><label :for="v.operator_address"><div class=" w-full">{{ i+1 }}. {{ v.description.moniker }}</div></label></td>
                 <td><input :id="v.operator_address" v-model="selected" class="checkbox" type="checkbox" :value="consensusPubkeyToHexAddress(v.consensus_pubkey)"/></td>
               </tr>
             </tbody>

src/modules/[chain]/uptime/index.vue

@@ -99,7 +99,7 @@ const commits2 = computed(() => {
 onUnmounted(() => {
   live.value = false;
 });
-const tab = ref("3")
+const tab = ref(window.location.hash.search("block")>-1?"2":"3")
 function changeTab(v: string) {
   tab.value = v
 }