Merge pull request #2187 from cosmos/jordan/2183-block-loader

Jordan/2183 fix page network block loading
luniehq · Mar 7, 2019 · b71889b · b71889b
2 parents 0f4d1b3 + 12a2352
commit b71889b
Show file tree

Hide file tree

Showing 14 changed files with 273 additions and 70 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -35,10 +35,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Added
 
 - [\#1306](https://github.com/cosmos/voyager/issues/1306) Withdraw fee distribution rewards @fedekunze
+- [\#2183](https://github.com/cosmos/voyager/issues/2183) Loading block to network block loader @jbibla
 - [\#1875](https://github.com/cosmos/voyager/issues/1875) optimistic updates for proposal creation @faboweb
 - [\#1876](https://github.com/cosmos/voyager/issues/1876) optimistic updates for depositing on proposals @faboweb
 
-
 ### Changed
 
 - [\#2128](https://github.com/cosmos/voyager/pull/2128) remove loading status on validator page when disconnected from the network @fedekunze

diff --git a/app/src/renderer/assets/images/loader.svg b/app/src/renderer/assets/images/loader.svg
diff --git a/app/src/renderer/components/governance/TabParameters.vue b/app/src/renderer/components/governance/TabParameters.vue
@@ -17,7 +17,7 @@
               {{
                 governanceParameters.parameters.deposit.min_deposit
                   ? minimumDeposit
-                  : `n/a`
+                  : `--`
               }}
             </dd>
           </dl>
@@ -37,7 +37,7 @@
               {{
                 governanceParameters.parameters.deposit.max_deposit_period
                   ? depositPeriodInDays + ` days`
-                  : `n/a`
+                  : `--`
               }}
             </dd>
           </dl>
@@ -62,9 +62,9 @@
               {{
                 governanceParameters.parameters.tallying.threshold
                   ? `${parseFloat(
-                    governanceParameters.parameters.tallying.threshold
-                  ) * 100} %`
-                  : `n/a`
+                      governanceParameters.parameters.tallying.threshold
+                    ) * 100} %`
+                  : `--`
               }}
             </dd>
           </dl>
@@ -82,9 +82,9 @@
               {{
                 governanceParameters.parameters.tallying.veto
                   ? `${parseFloat(
-                    governanceParameters.parameters.tallying.veto
-                  ) * 100} %`
-                  : `n/a`
+                      governanceParameters.parameters.tallying.veto
+                    ) * 100} %`
+                  : `--`
               }}
             </dd>
           </dl>
@@ -105,7 +105,7 @@
               {{
                 governanceParameters.parameters.tallying.governance_penalty
                   ? governanceParameters.parameters.tallying.governance_penalty
-                  : `n/a`
+                  : `--`
               }}
             </dd>
           </dl>
@@ -124,9 +124,9 @@
               {{
                 governanceParameters.parameters.tallying.quorum
                   ? `${parseFloat(
-                    governanceParameters.parameters.tallying.quorum
-                  ) * 100} %`
-                  : `n/a`
+                      governanceParameters.parameters.tallying.quorum
+                    ) * 100} %`
+                  : `--`
               }}
             </dd>
           </dl>
@@ -151,7 +151,7 @@
               {{
                 governanceParameters.parameters.voting.voting_period
                   ? votingPeriodInDays + ` days`
-                  : `n/a`
+                  : `--`
               }}
             </dd>
           </dl>

diff --git a/app/src/renderer/components/network/PageBlock.vue b/app/src/renderer/components/network/PageBlock.vue
@@ -6,11 +6,13 @@
         <div class="row">
           <div class="page-profile__header__info">
             <div class="page-profile__status-and-title">
-              <h2 class="page-profile__title">
-                Block {{ blockTitle }}
-              </h2>
+              <h2 class="page-profile__title">Block {{ blockTitle }}</h2>
               <h3 class="page-profile__subtitle">
-                {{ block.block_meta && block.block_meta.block_id ? block.block_meta.block_id.hash : '' }}
+                {{
+                  block.block_meta && block.block_meta.block_id
+                    ? block.block_meta.block_id.hash
+                    : ""
+                }}
               </h3>
             </div>
           </div>
@@ -29,7 +31,9 @@
           <div class="column">
             <dl class="info_dl colored_dl">
               <dt>Transactions</dt>
-              <dd>{{ block.block && block.block.data.txs || `No Transactions` }}</dd>
+              <dd>
+                {{ (block.block && block.block.data.txs) || `No Transactions` }}
+              </dd>
             </dl>
           </div>
         </div>
@@ -40,7 +44,12 @@
           <div class="column">
             <dl class="info_dl colored_dl">
               <dt>Evidence</dt>
-              <dd>{{ block.block && block.block.evidence.evidence || `No Evidence` }}</dd>
+              <dd>
+                {{
+                  (block.block && block.block.evidence.evidence) ||
+                    `No Evidence`
+                }}
+              </dd>
             </dl>
           </div>
         </div>
@@ -81,11 +90,11 @@ export default {
       ]
     },
     blockTitle({ num, block } = this) {
-      if (!block.block) return `n/a`
+      if (!block.block) return `--`
       return `#` + num.prettyInt(block.block.header.height)
     },
     blockTime({ moment, block } = this) {
-      if (!block.block) return `n/a`
+      if (!block.block) return `--`
       return moment(block.block.header.time).format(`MMM Do YYYY, HH:mm:ss`)
     }
   },

diff --git a/app/src/renderer/components/network/PageNetwork.vue b/app/src/renderer/components/network/PageNetwork.vue
@@ -12,47 +12,51 @@
                 class="page-profile__status"
               />
               <h2 class="page-profile__title">
-                {{ lastHeader.chain_id }}
+                {{ lastHeader.chain_id || `--` }}
               </h2>
             </div>
           </div>
         </div>
         <div class="row">
           <dl class="info_dl colored_dl">
             <dt>Block Height</dt>
-            <dd>{{ `#` + num.prettyInt(lastHeader.height) }}</dd>
+            <dd>{{ `#` + num.prettyInt(lastHeader.height) || `--` }}</dd>
           </dl>
           <dl class="info_dl colored_dl">
             <dt>Last Block</dt>
-            <dd>{{ lastBlock }}</dd>
+            <dd>{{ lastBlock || `--` }}</dd>
           </dl>
           <dl class="info_dl colored_dl">
             <dt>Transactions</dt>
-            <dd>{{ lastHeader.total_txs }}</dd>
+            <dd>{{ lastHeader.total_txs || `--` }}</dd>
           </dl>
           <dl class="info_dl colored_dl">
             <dt>Number of Validators</dt>
-            <dd>{{ delegates.delegates.length }}</dd>
+            <dd>{{ delegates.delegates.length || `--` }}</dd>
           </dl>
         </div>
         <div class="row">
           <div class="column">
             <dl class="info_dl">
               <dt>Total Liquid {{ bondDenom }}</dt>
               <dd id="loose_tokens">
-                {{ pool.pool && pool.pool.not_bonded_tokens ? num.pretty(
-                  num.atoms(pool.pool.not_bonded_tokens)
-                ) : `n/a` }}
+                {{
+                  pool.pool && pool.pool.not_bonded_tokens
+                    ? num.full(num.atoms(pool.pool.not_bonded_tokens))
+                    : `--`
+                }}
               </dd>
             </dl>
           </div>
           <div class="column">
             <dl class="info_dl">
               <dt>Total Delegated {{ bondDenom }}</dt>
               <dd id="bonded_tokens">
-                {{ pool.pool && pool.pool.bonded_tokens ? num.pretty(
-                  num.atoms(pool.pool.bonded_tokens)
-                ) : `n/a` }}
+                {{
+                  pool.pool && pool.pool.bonded_tokens
+                    ? num.full(num.atoms(pool.pool.bonded_tokens))
+                    : `--`
+                }}
               </dd>
             </dl>
           </div>
@@ -63,6 +67,14 @@
           <panel-sort :properties="properties" />
         </thead>
         <tbody>
+          <tr v-if="blocks.length === 0" class="block data-table__row">
+            <td>
+              <img class="loading-icon" src="~assets/images/loader.svg" />
+            </td>
+            <td>
+              <img class="loading-icon" src="~assets/images/loader.svg" />
+            </td>
+          </tr>
           <tr
             v-for="block in blocks"
             :key="block.header.height"

diff --git a/app/src/renderer/components/staking/LiValidator.vue b/app/src/renderer/components/staking/LiValidator.vue
@@ -7,17 +7,16 @@
         class="data-table__row__info__image"
         width="48"
         height="48"
-      >
+      />
       <img
         v-else
         class="data-table__row__info__image data-table__row__info__image--no-img"
         src="~assets/images/validator-icon.svg"
         width="48"
         height="48"
-      >
+      />
       <div class="data-table__row__info__container">
         <span
-
           v-tooltip.top="status"
           :class="statusColor"
           class="data-table__row__info__container__status"
@@ -45,10 +44,10 @@
       }}
     </td>
     <td class="li-validator__rewards data-table__row__cell__separator">
-      {{ rewards || "n/a" }}
+      {{ rewards || "--" }}
     </td>
     <td class="li-validator__voting-power">
-      {{ validator.percent_of_vote ? validator.percent_of_vote : `n/a` }}
+      {{ validator.percent_of_vote ? validator.percent_of_vote : `--` }}
     </td>
     <td class="li-validator__uptime">
       {{ uptime }}
@@ -57,7 +56,7 @@
       {{ commission }}
     </td>
     <td class="li-validator__slashes">
-      n/a
+      --
     </td>
   </tr>
 </template>
@@ -104,7 +103,7 @@ export default {
         const uptimeRollingWindow = info.signed_blocks_counter / rollingWindow
         return `${this.num.pretty(uptimeRollingWindow * 100)}%`
       }
-      return `n/a`
+      return `--`
     },
     yourVotes() {
       return this.committedDelegations[this.validator.operator_address]

diff --git a/app/src/renderer/components/staking/TabStakingParameters.vue b/app/src/renderer/components/staking/TabStakingParameters.vue
@@ -22,7 +22,7 @@
                 {{
                   stakingParameters.parameters.unbonding_time
                     ? unbondingTimeInDays + ` days`
-                    : `n/a`
+                    : `--`
                 }}
               </dd>
             </dl>
@@ -40,7 +40,7 @@
                 {{
                   stakingParameters.parameters.max_validators
                     ? stakingParameters.parameters.max_validators
-                    : `n/a`
+                    : `--`
                 }}
               </dd>
             </dl>

diff --git a/test/e2e/delegation.js b/test/e2e/delegation.js
@@ -11,7 +11,7 @@ const {
  * NOTE: don't use a global `let client = app.client` as the client object changes when restarting the app
  */
 
-test(`delegation`, async function(t) {
+test(`delegation`, async function (t) {
   const { app } = await getApp(t)
   // app.env.COSMOS_MOCKED = false
   await restart(app)
@@ -22,7 +22,7 @@ test(`delegation`, async function(t) {
   // default values from e2e mounted node
   const bondedStake = 100
 
-  t.test(`Validators`, async function(t) {
+  t.test(`Validators`, async function (t) {
     // Select the Validators tab.
     await app.client.click(`//a[normalize-space() = 'Validators']`)
 
@@ -154,7 +154,7 @@ test(`delegation`, async function(t) {
     t.end()
   })
 
-  t.test(`showing transactions`, async function(t) {
+  t.test(`showing transactions`, async function (t) {
     await navigate(app, `Transactions`)
 
     // delegated
@@ -173,7 +173,7 @@ test(`delegation`, async function(t) {
     t.end()
   })
 
-  t.test(`Parameters`, async function(t) {
+  t.test(`Parameters`, async function (t) {
     await navigate(app, `Staking`)
     await app.client.click(`//a[normalize-space() = 'Parameters']`)
     await t.ok(
@@ -191,7 +191,7 @@ test(`delegation`, async function(t) {
       `Shows staking parameters`
     )
     await t.ok(
-      !(await app.client.isExisting(`//dd[contains(text(), "n/a")]`)),
+      !(await app.client.isExisting(`//dd[contains(text(), "--")]`)),
       `all parameters and pool fields are defined`
     )
     await t.ok(

diff --git a/test/unit/specs/components/network/PageNetwork.spec.js b/test/unit/specs/components/network/PageNetwork.spec.js
@@ -61,7 +61,21 @@ describe(`PageNetwork`, () => {
     })
   })
 
-  it(`has the expected html structure`, () => {
+  it(`should display the network page with data and the blocks table`, () => {
+    expect(wrapper.vm.$el).toMatchSnapshot()
+  })
+
+  it(`should display the network page with the blocks table in a loading state`, () => {
+    $store.getters.blocks = []
+
+    wrapper = shallowMount(PageNetwork, {
+      localVue,
+      mocks: {
+        $store
+      },
+      stubs: [`router-link`]
+    })
+
     expect(wrapper.vm.$el).toMatchSnapshot()
   })