From c73c478c269329367ee0835ea2ff320b2d0cfdc7 Mon Sep 17 00:00:00 2001 From: Noelle Daley Date: Wed, 13 May 2020 17:10:28 -0700 Subject: [PATCH 1/7] make sure progress bar updates and animates --- ui/app/styles/core/progress.scss | 1 + .../integration/components/replication-dashboard-test.js | 8 ++++++++ 2 files changed, 9 insertions(+) diff --git a/ui/app/styles/core/progress.scss b/ui/app/styles/core/progress.scss index c615845dcf79..577154e9a948 100644 --- a/ui/app/styles/core/progress.scss +++ b/ui/app/styles/core/progress.scss @@ -21,4 +21,5 @@ // style the progress bar .progress[value]::-webkit-progress-value { border-radius: $radius; + transition: width 1s ease-out; } diff --git a/ui/tests/integration/components/replication-dashboard-test.js b/ui/tests/integration/components/replication-dashboard-test.js index 7f012b40a561..b1c23b595427 100644 --- a/ui/tests/integration/components/replication-dashboard-test.js +++ b/ui/tests/integration/components/replication-dashboard-test.js @@ -1,6 +1,7 @@ import { module, test } from 'qunit'; import { setupRenderingTest } from 'ember-qunit'; import { render } from '@ember/test-helpers'; +import { assign } from '@ember/polyfills'; import hbs from 'htmlbars-inline-precompile'; const REPLICATION_DETAILS = { @@ -94,5 +95,12 @@ module('Integration | Enterprise | Component | replication-dashboard', function( IS_REINDEXING.reindex_building_progress, 'shows the reindexing progress inside the alert banner' ); + + const reindexingInProgress = assign({}, IS_REINDEXING, { reindex_building_progress: 27000 }); + this.set('replicationDetails', reindexingInProgress); + + assert + .dom('.message-title>.progress') + .hasValue(reindexingInProgress.reindex_building_progress, 'updates the reindexing progress'); }); }); From 4abcd03d81dfc821bc014385389cf2951e9804b7 Mon Sep 17 00:00:00 2001 From: Noelle Daley Date: Wed, 13 May 2020 18:04:55 -0700 Subject: [PATCH 2/7] ensure dashboard updates when replication mode has changed --- .../components/replication-dashboard-test.js | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/ui/tests/integration/components/replication-dashboard-test.js b/ui/tests/integration/components/replication-dashboard-test.js index b1c23b595427..a5b92003be7e 100644 --- a/ui/tests/integration/components/replication-dashboard-test.js +++ b/ui/tests/integration/components/replication-dashboard-test.js @@ -28,13 +28,12 @@ module('Integration | Enterprise | Component | replication-dashboard', function( setupRenderingTest(hooks); hooks.beforeEach(function() { + this.set('replicationDetails', REPLICATION_DETAILS); this.set('clusterMode', 'secondary'); this.set('isSecondary', true); }); test('it renders', async function(assert) { - this.set('replicationDetails', REPLICATION_DETAILS); - await render(hbs``); + + assert.dom('[data-test-selectable-card-container="secondary"]').exists(); + + this.set('clusterMode', 'primary'); + this.set('isSecondary', false); + + assert.dom('[data-test-selectable-card-container="primary"]').exists(); + }); + test('it renders the primary selectable-card-container when the cluster is a primary', async function(assert) { - this.set('replicationDetails', REPLICATION_DETAILS); this.set('isSecondary', false); await render(hbs` Date: Wed, 13 May 2020 18:09:14 -0700 Subject: [PATCH 3/7] make sure we update isSyncing when state has changed --- ui/lib/core/addon/components/replication-dashboard.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/lib/core/addon/components/replication-dashboard.js b/ui/lib/core/addon/components/replication-dashboard.js index 854a78615c1a..e0d3a1ca95f5 100644 --- a/ui/lib/core/addon/components/replication-dashboard.js +++ b/ui/lib/core/addon/components/replication-dashboard.js @@ -9,7 +9,7 @@ export default Component.extend({ data: null, replicationDetails: null, isSecondary: null, - isSyncing: computed('replicationDetails', 'isSecondary', function() { + isSyncing: computed('replicationDetails.{state}', 'isSecondary', function() { const { state } = this.replicationDetails; const isSecondary = this.isSecondary; return isSecondary && state && clusterStates([state]).isSyncing; From d05219ba6c14c64a9f2e867892476faf7dad4659 Mon Sep 17 00:00:00 2001 From: Noelle Daley Date: Wed, 13 May 2020 18:21:13 -0700 Subject: [PATCH 4/7] wip - console log statements to see if components are getting new attrs --- ui/lib/core/addon/components/replication-dashboard.js | 6 ++++++ ui/lib/core/addon/components/replication-page.js | 1 + ui/lib/replication/addon/components/replication-summary.js | 1 + 3 files changed, 8 insertions(+) diff --git a/ui/lib/core/addon/components/replication-dashboard.js b/ui/lib/core/addon/components/replication-dashboard.js index e0d3a1ca95f5..f5e71868ac30 100644 --- a/ui/lib/core/addon/components/replication-dashboard.js +++ b/ui/lib/core/addon/components/replication-dashboard.js @@ -9,6 +9,12 @@ export default Component.extend({ data: null, replicationDetails: null, isSecondary: null, + + didReceiveAttrs() { + this._super(arguments); + console.log('the dashboard component received new attrs!'); + }, + isSyncing: computed('replicationDetails.{state}', 'isSecondary', function() { const { state } = this.replicationDetails; const isSecondary = this.isSecondary; diff --git a/ui/lib/core/addon/components/replication-page.js b/ui/lib/core/addon/components/replication-page.js index e68e76838d86..e14b977642ee 100644 --- a/ui/lib/core/addon/components/replication-page.js +++ b/ui/lib/core/addon/components/replication-page.js @@ -17,6 +17,7 @@ export default Component.extend({ didReceiveAttrs() { this._super(arguments); this.getReplicationModeStatus.perform(); + console.log('did the page receive new attrs???'); }, getReplicationModeStatus: task(function*() { let resp; diff --git a/ui/lib/replication/addon/components/replication-summary.js b/ui/lib/replication/addon/components/replication-summary.js index 078946f519fd..5e4d4140b817 100644 --- a/ui/lib/replication/addon/components/replication-summary.js +++ b/ui/lib/replication/addon/components/replication-summary.js @@ -28,6 +28,7 @@ export default Component.extend(ReplicationActions, DEFAULTS, { if (initialReplicationMode) { this.set('replicationMode', initialReplicationMode); } + console.log('did the summary receive new attrs?'); }, showModeSummary: false, initialReplicationMode: null, From 4c808086f8ae0c2519e1ecf9d8b7b8b5bfc6b47e Mon Sep 17 00:00:00 2001 From: Noelle Daley Date: Thu, 14 May 2020 16:50:39 -0700 Subject: [PATCH 5/7] Revert "wip - console log statements to see if components are getting new attrs" This reverts commit d05219ba6c14c64a9f2e867892476faf7dad4659. --- ui/lib/core/addon/components/replication-dashboard.js | 6 ------ ui/lib/core/addon/components/replication-page.js | 1 - ui/lib/replication/addon/components/replication-summary.js | 1 - 3 files changed, 8 deletions(-) diff --git a/ui/lib/core/addon/components/replication-dashboard.js b/ui/lib/core/addon/components/replication-dashboard.js index f5e71868ac30..e0d3a1ca95f5 100644 --- a/ui/lib/core/addon/components/replication-dashboard.js +++ b/ui/lib/core/addon/components/replication-dashboard.js @@ -9,12 +9,6 @@ export default Component.extend({ data: null, replicationDetails: null, isSecondary: null, - - didReceiveAttrs() { - this._super(arguments); - console.log('the dashboard component received new attrs!'); - }, - isSyncing: computed('replicationDetails.{state}', 'isSecondary', function() { const { state } = this.replicationDetails; const isSecondary = this.isSecondary; diff --git a/ui/lib/core/addon/components/replication-page.js b/ui/lib/core/addon/components/replication-page.js index e14b977642ee..e68e76838d86 100644 --- a/ui/lib/core/addon/components/replication-page.js +++ b/ui/lib/core/addon/components/replication-page.js @@ -17,7 +17,6 @@ export default Component.extend({ didReceiveAttrs() { this._super(arguments); this.getReplicationModeStatus.perform(); - console.log('did the page receive new attrs???'); }, getReplicationModeStatus: task(function*() { let resp; diff --git a/ui/lib/replication/addon/components/replication-summary.js b/ui/lib/replication/addon/components/replication-summary.js index 5e4d4140b817..078946f519fd 100644 --- a/ui/lib/replication/addon/components/replication-summary.js +++ b/ui/lib/replication/addon/components/replication-summary.js @@ -28,7 +28,6 @@ export default Component.extend(ReplicationActions, DEFAULTS, { if (initialReplicationMode) { this.set('replicationMode', initialReplicationMode); } - console.log('did the summary receive new attrs?'); }, showModeSummary: false, initialReplicationMode: null, From d060393fc6f511e2c3c1b093ac0077a449f4ec6d Mon Sep 17 00:00:00 2001 From: Noelle Daley Date: Fri, 15 May 2020 15:05:35 -0700 Subject: [PATCH 6/7] style progress bar in mozilla; allow testing the progress bar in storybook --- ui/app/styles/core/progress.scss | 13 +++++++++++-- ui/lib/core/stories/alert-banner.stories.js | 8 +++++++- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/ui/app/styles/core/progress.scss b/ui/app/styles/core/progress.scss index 577154e9a948..ceb4f8e9827e 100644 --- a/ui/app/styles/core/progress.scss +++ b/ui/app/styles/core/progress.scss @@ -1,5 +1,8 @@ .progress { + -webkit-appearance: none; + -moz-appearance: none; background: $progress-bar-background-color; + box-shadow: inset 0 0 0 1px $ui-gray-200; border-radius: $radius; margin-bottom: 0; &.is-small { @@ -13,13 +16,19 @@ } } -// style the container +// style the container in chrome .progress[value]::-webkit-progress-bar { box-shadow: inset 0 0 0 1px $ui-gray-200; } -// style the progress bar +// style the bar in chrome .progress[value]::-webkit-progress-value { border-radius: $radius; transition: width 1s ease-out; } + +// style the bar in firefox +.progress[value]::-moz-progress-bar { + border-radius: $radius; + transition: width 1s ease-out; +} diff --git a/ui/lib/core/stories/alert-banner.stories.js b/ui/lib/core/stories/alert-banner.stories.js index b479a16ff3b4..9ddc726695a1 100644 --- a/ui/lib/core/stories/alert-banner.stories.js +++ b/ui/lib/core/stories/alert-banner.stories.js @@ -1,10 +1,16 @@ import hbs from 'htmlbars-inline-precompile'; import { storiesOf } from '@storybook/ember'; import notes from './alert-banner.md'; +import { withKnobs, object } from '@storybook/addon-knobs'; import { MESSAGE_TYPES } from '../addon/helpers/message-types.js'; storiesOf('Alerts/AlertBanner/', module) .addParameters({ options: { showPanel: false } }) + .addDecorator( + withKnobs({ + escapeHTML: false, + }) + ) .add( 'AlertBanner', () => ({ @@ -30,7 +36,7 @@ storiesOf('Alerts/AlertBanner/', module) context: { type: 'info', message: 'Here is a message.', - progressBar: { value: 75, max: 100 }, + progressBar: object('Progress Bar', { value: 75, max: 100 }), }, }), { notes } From 89406885fe11e2ff1e10baec6f9be533a8cd1f0f Mon Sep 17 00:00:00 2001 From: Noelle Daley Date: Fri, 15 May 2020 15:42:46 -0700 Subject: [PATCH 7/7] test that primary and secondary card container don't display at the same time --- ui/tests/integration/components/replication-dashboard-test.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/ui/tests/integration/components/replication-dashboard-test.js b/ui/tests/integration/components/replication-dashboard-test.js index a5b92003be7e..54458b531dd1 100644 --- a/ui/tests/integration/components/replication-dashboard-test.js +++ b/ui/tests/integration/components/replication-dashboard-test.js @@ -55,11 +55,13 @@ module('Integration | Enterprise | Component | replication-dashboard', function( />`); assert.dom('[data-test-selectable-card-container="secondary"]').exists(); + assert.dom('[data-test-selectable-card-container="primary"]').doesNotExist(); this.set('clusterMode', 'primary'); this.set('isSecondary', false); assert.dom('[data-test-selectable-card-container="primary"]').exists(); + assert.dom('[data-test-selectable-card-container="secondary"]').doesNotExist(); }); test('it renders the primary selectable-card-container when the cluster is a primary', async function(assert) { @@ -72,6 +74,7 @@ module('Integration | Enterprise | Component | replication-dashboard', function( />`); assert.dom('[data-test-selectable-card-container="primary"]').exists(); + assert.dom('[data-test-selectable-card-container="secondary"]').doesNotExist(); }); test('it renders an alert banner if the dashboard is syncing', async function(assert) {