diff --git a/app/src/renderer/components/common/AppMenu.vue b/app/src/renderer/components/common/AppMenu.vue index 8ec6f9e9c2..d77d6bbfb4 100644 --- a/app/src/renderer/components/common/AppMenu.vue +++ b/app/src/renderer/components/common/AppMenu.vue @@ -6,7 +6,7 @@ menu.app-menu list-item(to="/staking" exact @click.native="close" title="Delegates") list-item(to="/validators" exact @click.native="close" title="Validators" v-bind:class="{ 'active': isValidatorPage }") list-item(to="/proposals" exact @click.native="close" title="Proposals" v-if="config.devMode") - list-item(to="/blockchain" exact @click.native="close" title="Blocks") + list-item(to="/blocks" exact @click.native="close" title="Blocks") connectivity user-pane diff --git a/app/src/renderer/components/common/NiFormMsg.vue b/app/src/renderer/components/common/NiFormMsg.vue index 277359333a..b44c3b66ad 100644 --- a/app/src/renderer/components/common/NiFormMsg.vue +++ b/app/src/renderer/components/common/NiFormMsg.vue @@ -70,17 +70,17 @@ export default { content '' font-family 'Material Icons' padding-right 0.35rem - + .ni-form-msg.ni-form-msg--error color danger - + .ni-form-msg.ni-form-msg--error:before content 'error' color danger - + .ni-form-msg.ni-form-msg--desc color warning - + .ni-form-msg.ni-form-msg--desc:before content 'priority_high' color warning diff --git a/app/src/renderer/components/common/NiModalSearch.vue b/app/src/renderer/components/common/NiModalSearch.vue index 5ac2fceb0c..668dd9b1d0 100644 --- a/app/src/renderer/components/common/NiModalSearch.vue +++ b/app/src/renderer/components/common/NiModalSearch.vue @@ -1,21 +1,48 @@ diff --git a/app/src/renderer/components/monitor/PageBlocks.vue b/app/src/renderer/components/monitor/PageBlocks.vue new file mode 100644 index 0000000000..f50c5f22d4 --- /dev/null +++ b/app/src/renderer/components/monitor/PageBlocks.vue @@ -0,0 +1,90 @@ + + + + + diff --git a/app/src/renderer/routes.js b/app/src/renderer/routes.js index 60cd55f337..27f29d22a4 100644 --- a/app/src/renderer/routes.js +++ b/app/src/renderer/routes.js @@ -27,8 +27,8 @@ export default [ }, // MONITOR - { path: '/block/:block', name: 'block', component: monitor('Block') }, - { path: '/blockchain', name: 'blockchain', component: monitor('Blockchain') }, + { path: '/blocks', name: 'blocks', component: monitor('Blocks') }, + { path: '/blocks/:block', name: 'block', component: monitor('Block') }, { path: '/validators', name: 'validators', component: monitor('Validators') }, { path: '/validators/:validator', diff --git a/app/src/renderer/vuex/modules/blockchain.js b/app/src/renderer/vuex/modules/blockchain.js index ec2c151ffe..81f20f08bb 100644 --- a/app/src/renderer/vuex/modules/blockchain.js +++ b/app/src/renderer/vuex/modules/blockchain.js @@ -7,7 +7,8 @@ export default ({ commit, node }) => { urlSuffix: '-node0.testnets.interblock.io', status: {}, abciInfo: {}, - topAvgTxRate: 0 + topAvgTxRate: 0, + blocks: [] } const mutations = { @@ -31,13 +32,18 @@ export default ({ commit, node }) => { } } - // function getBlocks () { - // node.rpc.subscribe({ event: 'NewBlockHeader' }, (err, event) => { - // if (err) return console.error('error subscribing to new block headers', err) - // console.log(event) - // }) - // } - // getBlocks() + function subscribe () { + node.rpc.subscribe({ query: "tm.event = 'NewBlock'" }, (err, event) => { + if (err) return console.error('error subscribing to new block headers', err) + + state.blocks.unshift(event.data.data.block) + + if (state.blocks.length === 20) { + state.blocks.pop() + } + }) + } + subscribe() setTimeout(() => { mutations.getStatus(state) diff --git a/app/src/renderer/vuex/modules/filters.js b/app/src/renderer/vuex/modules/filters.js index f0e0ef383c..4caf182bc5 100644 --- a/app/src/renderer/vuex/modules/filters.js +++ b/app/src/renderer/vuex/modules/filters.js @@ -6,6 +6,12 @@ export default ({ commit }) => { query: '' } }, + blocks: { + search: { + visible: false, + query: '' + } + }, delegates: { search: { visible: false, @@ -32,6 +38,10 @@ export default ({ commit }) => { } } const mutations = { + resetSearch (state, type) { + state[type].search.visible = false + state[type].search.query = '' + }, setSearchVisible (state, [type, bool]) { state[type].search.visible = bool }, diff --git a/test/unit/specs/components/common/__snapshots__/NiModalSearch.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiModalSearch.spec.js.snap index 10e83678ab..41c20d2469 100644 --- a/test/unit/specs/components/common/__snapshots__/NiModalSearch.spec.js.snap +++ b/test/unit/specs/components/common/__snapshots__/NiModalSearch.spec.js.snap @@ -7,26 +7,41 @@ exports[`NiModalSearch has the expected html structure 1`] = `
- - + + +
+ + `; diff --git a/test/unit/specs/components/monitor/PageBlocks.spec.js b/test/unit/specs/components/monitor/PageBlocks.spec.js new file mode 100644 index 0000000000..487b1e9c12 --- /dev/null +++ b/test/unit/specs/components/monitor/PageBlocks.spec.js @@ -0,0 +1,31 @@ +import setup from '../../../helpers/vuex-setup' +import htmlBeautify from 'html-beautify' +import PageBlocks from 'renderer/components/monitor/PageBlocks' + +describe('PageBlocks', () => { + let wrapper, store + let {mount} = setup() + + beforeEach(() => { + let instance = mount(PageBlocks, { + stubs: { + 'modal-search': '' + } + }) + wrapper = instance.wrapper + store = instance.store + + store.commit('setSearchQuery', ['blocks', '']) + + wrapper.update() + }) + + it('has the expected html structure', () => { + expect(htmlBeautify(wrapper.html())).toMatchSnapshot() + }) + + it('should show the search on click', () => { + wrapper.vm.setSearch(true) + expect(store.commit).toHaveBeenCalledWith('setSearchVisible', ['blocks', true]) + }) +}) diff --git a/test/unit/specs/components/monitor/__snapshots__/PageBlocks.spec.js.snap b/test/unit/specs/components/monitor/__snapshots__/PageBlocks.spec.js.snap new file mode 100644 index 0000000000..5e4be593f2 --- /dev/null +++ b/test/unit/specs/components/monitor/__snapshots__/PageBlocks.spec.js.snap @@ -0,0 +1,130 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`PageBlocks has the expected html structure 1`] = ` +"
+
+
+
+
+

+ Block Explorer +

+
+
+

+
+
+ +
+ +
+ +
+
+
+ +
+
+
+
+
+ Current Block +
+ +
+
+
+ +
+
+ +
+
+
+ Block Height +
+
+ 0 +
+
+
+ chevron_rightmy_location +
+
+ +
+
+
+ +
+
+
+ Block Time +
+
+ Loading… +
+
+
+
+
+
+
+ +
+
+
+ Block Hash +
+
+
+
+
+
+
+
+
+
+
+
+
+ Latest Blocks +
+ +
+
+
+
+
+
+ +
+
+
+ Block Height +
+
+ # of Transactions +
+
+
+
+
+
+
+
+
" +`; diff --git a/test/unit/specs/components/staking/__snapshots__/PageDelegates.spec.js.snap b/test/unit/specs/components/staking/__snapshots__/PageDelegates.spec.js.snap index 4b26796b07..354b92c181 100644 --- a/test/unit/specs/components/staking/__snapshots__/PageDelegates.spec.js.snap +++ b/test/unit/specs/components/staking/__snapshots__/PageDelegates.spec.js.snap @@ -212,26 +212,41 @@ exports[`PageDelegates should filter the delegates 1`] = `
- - + + +
+ +
- - + + +
+ +