diff --git a/ui/app/styles/core/progress.scss b/ui/app/styles/core/progress.scss index c615845dcf79..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,12 +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/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; 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 } diff --git a/ui/tests/integration/components/replication-dashboard-test.js b/ui/tests/integration/components/replication-dashboard-test.js index 7f012b40a561..54458b531dd1 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 = { @@ -27,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`<ReplicationDashboard @replicationDetails={{replicationDetails}} @clusterMode={{clusterMode}} @@ -47,8 +47,24 @@ module('Integration | Enterprise | Component | replication-dashboard', function( assert.dom('[data-test-flash-message]').doesNotExist('no flash message is displayed on render'); }); + test('it updates the dashboard when the replication mode has changed', async function(assert) { + await render(hbs`<ReplicationDashboard + @replicationDetails={{replicationDetails}} + @clusterMode={{clusterMode}} + @isSecondary={{isSecondary}} + />`); + + 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) { - this.set('replicationDetails', REPLICATION_DETAILS); this.set('isSecondary', false); await render(hbs`<ReplicationDashboard @@ -58,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) { @@ -94,5 +111,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'); }); });