Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sidebranch: address transition issues on replication engine and actions #9010

Merged
merged 26 commits into from May 21, 2020

Conversation

Monkeychip
Copy link
Contributor

@Monkeychip Monkeychip commented May 15, 2020

This PR focused on the transition issues we were seeing when calling various replication actions like "enable". Additionally, this PR makes it so the model inside the "replication" engine is now peeking at the cluster in the store, allowing it to be notified about changes, rather than making a copy of the cluster record, which would only update information (like lastWAL, etc) on a refresh of the routes. More details on each of these changes below.

  1. Replication Engine using peekRecord instead of findRecord when creating its model. I changed the top-parent route file (application.js) in the "replication" engine to peekRecord instead of findRecord. Unlike findRecord, peekRecord will notify you of changes (ember doc here). Before I did this change we had two cluster records, with id's "1" and "vault". The "vault" one was a copy of "1", but was never getting updated. See image:

Now, I am peeking at the record: 1. I am using the auth service to return the clusterId.

  1. Adding container divs to the top routes, so that when things were loading you didn't see a flash of components spanning 100% width.

  2. I removed replicationMode='dr' and mode='primary' from the DEFAULTS variable that during the replication-actions.js we were setting after performing some action on the cluster (e.,g. enabling, disabling, etc.). These specific properties in the DEFAULT object were overriding the default settings in the model. These now live in the initialization of the model, so there is no conflict. See mixin/replication-actions.js for the call of the this.reset() method. And reset is defined in replication-summary.js file which is where the DEFAULT object is defined.

  3. We were running into a capabilities-self permissions error when enabling a Performance Secondary from the vault.cluster.replication.index route. The reason for this is because the last step of the "enabling" action transitions you to the route vault.cluster.replication.mode.index page (e.g. the details page). On the vault.cluster.replication.mode.index route's model, we add to the cluster two variables "canAddSecondaries" and "canRevokeSecondary". See image:
    image

You can see in the image that we are hitting the capabilities-self endpoint to determine these variables. However, when we hit the transition to this page (the transition happens in the controller/replication-mode.js), the new performance secondary cluster was not ready, and so it would also hit a 403 permissions error when hitting the capabilities-self endpoint causing us to the land on an error page. The solution that seems the least disruptive to the flow, is to add a 1-second timeout before calling the transition. I added conditionals such that this 1-second wait should only happen in this situation (e.g. enabling a Performance Secondary from the vault.cluster.replicaton.index route). Here is a gif of the timeout being hit. I added some console logs to help you see it.

capabilities-self

  1. I added a property to the cluster model that captures a state in which dr.mode or performance.mode are undefined. This property is then used for adding a loader. mode here is only undefined during an initialization.

See gif in which I've add a console log to show when that state happens, the property is called replicationIsInitializing. This needs to be on the cluster and can't be a computed property on the route model, because I need it calculated every time the status endpoint is hit, and the cluster is created when the status endpoint is hit. I'm totally open to other suggestions though that would make this property less high up in the chain.

replicationTransition

NOTE:

  • I've QA all situations I can think of; however, a lot of this comes down to hitting things just right between when the "every-10-second" status/health endpoints are called. Thus, as you work in this space, it would be helpful to monitor your console when doing any type of replication-action.

@Monkeychip Monkeychip marked this pull request as draft May 15, 2020 21:05
@Monkeychip Monkeychip added the ui label May 15, 2020
model() {
return this.store.findRecord('cluster', 'vault');
return this.store.peekRecord('cluster', 1);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this one change is what makes it so the replication engine receives updated information off the cluster, and here is the 1 that I mention in the PR write up.

{{/if}}
</ul>
</nav>
<section class="section">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just added section and div to file so it wouldn't span the whole width while waiting to load.

@onDisable={{action "onDisable"}}
/>
{{/if}}
<section class="section">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just added section and div to file so it wouldn't span the whole width while waiting to load.

@noelledaley
Copy link
Contributor

noelledaley commented May 15, 2020

nice work and thank you for such an extensive write up! let's all put our heads together on this one on monday.

in the meantime, i'm adding some TODOs here that i found while QAing:

  • fix link & console error after disabling dr. this only
    image
  • route to perf secondary after enabling: after i designated a cluster as a perf secondary, i was taken to the same generic replication screen with the same console error as above. when i tried to navigate elsewhere in the UI and then click on the 'performance secondary' link in the status menu, i also got that error:
    image

@@ -101,7 +101,7 @@
</div>
<div class="level-right">
{{#if replicationDisabled}}
{{#link-to "vault.cluster.replication.mode.index" cluster.name mode class="button is-primary"}}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

because we are using peekRecord, this was causing a console error. I can't exactly explain why the peekRecord now adds a vault.cluster.replication to the link to helper here, but it does. Here was the error, you can see the link-to is trying to hit vault.cluster.replication.vault.cluster.replication.mode.index
image

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👏

@@ -66,24 +72,13 @@ export default Component.extend(ReplicationActions, DEFAULTS, {
this.setProperties(DEFAULTS);
},

transitionTo: computed('mode', 'replicationMode', function() {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had originally created this to handle DR secondary transition issues, but this is being reverted to how it is in master, and the transition conditions are handled in the controller/replication-mode.js

@@ -28,6 +28,16 @@ export default Fragment.extend({
? 'bootstrapping'
: (this.get('isSecondary') && 'secondary') || (this.get('isPrimary') && 'primary');
}),
modeForHeader: computed('mode', function() {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This separates out a specific property for the mode displayed in the Header. We needed one that wasn't also moonlighting for a property from the URL (e.g. modeForUrl).
image

Copy link
Contributor

@chelshaw chelshaw left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a couple minor things, great work!

ui/app/models/replication-attributes.js Outdated Show resolved Hide resolved
waitForNewClusterToInit: task(function*(replicationMode) {
// waiting for the newly enabled cluster to init
// this ensures we don't hit a capabilities-self error, called in the model of the mode/index route
yield timeout(1000);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't love arbitrary timeouts, but I trust you that this was necessary. For diligence: is there a way to kick this off after the other thing has finished from the index route? Looks like it does the transition fine when the mode is dr ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It has everything to do with hitting the model on the route it's transitioning to. For DR it's not transitioning to the same route, only in this specific case (Enabling a Performance Secondary) does it follow this flow: index ->transitionTo-> mode/index. Because this is where that transitionTo occurs, this is the only place I was able to interrupt it before hitting the routes' model that calls the capabilities-self endpoint. Essentially, right here is the last step before we transition. There's nothing - at least that I could tell - that we could wait for to complete. We don't appear to know what's happening with the cluster's initialization at this point. 🤷‍♀️

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i was thinking about this too -- an arbitrary timeout feels like it could have the potential to be flaky. i know you have tried many ideas, but have you considered moving the fetch for canAddSecondary and such into the controller? i took a cursory glance at the ember guides for controllers and noticed:

Controllers are used as an extension of the model loaded from the Route. Any attributes or actions that we want to share with components used on that Route could be defined on the Controller and passed down through the Route’s template.

i'm not super confident it this, but technically we are trying to compute the capabilities after the model hook returns the vault cluster with replication enabled, so it might fit. 🤷‍♀️

https://guides.emberjs.com/release/routing/controllers/#toc_where-and-when-to-use-controllers

i'm not sure, but some guidance from others would be helpful here too -- @meirish, @DingoEatingFuzz, or @johncowen, do any of you have advice for us on how to ensure a network request in the model doesn't happen until the model is already "ready"?

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not having looked massively at this code yet, my question would be:

What's the 'signal' so you know when this is 'ready'?

It sounds like there isn't one?

There's nothing - at least that I could tell - that we could wait for to complete.

So a follow up question would be, whilst potentially horrible, is there something you could poll so you know when this is 'ready'?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm yeah that's tricky - I'd expect replication status or cluster status to tell you if it's bootstrapping (or some other status as it's changing). Alternatively does every request return a 40x error? If so you could poll until you don't get 40x's (not great, but more of signal like John mentioned). Or even poll the capabilities-self endpoint and catch the errors until it doesn't return one.

…dReplicationMode, it's super confusing when seeing replicationMode being duplicated throughout the computed components. this clarifies its computed only for formatting
@Monkeychip Monkeychip marked this pull request as ready for review May 20, 2020 21:30
// TODO handle error
}
/// onEnable is a method available only to route vault.cluster.replication.index
// if action 'enable' is called from vault.cluster.replication.mode.index this method is not called
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

when you say 'this method is not called', do you mean that we never hit this conditional and execute line 94 if we're on the vault.cluster.replication.mode.index?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We hit the conditional, but because it can't find the method 'onEnable' it just stops. There is some refactoring here that could help, but onEnable is used by a lot of the actions I wasn't dealing with so I just added a comment as it's a gotchya when trying to problem solve.

@@ -1,4 +1,4 @@
<div class="is-flex-v-centered is-flex-1 loader-inner-page" >
<div class="is-flex-v-centered is-flex-1 loader-inner-page" data-test-layout-loading>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this def doesn't need to change, but as an FYI since this component already has a unique class name like loader-inner-page, it doesn't necessarily need a data-test-* attribute. comes down to personal preference, i suppose :D

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah good to know. Any chance you can add this to your Ember learn on testing 🙂📖

assert.dom('[data-test-layout-loading]').doesNotExist();
});

test('it renders loader when clusterId is unknown', async function(assert) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe you could add a test here to test when the cluster is bootstrapping as well?

@Monkeychip Monkeychip merged commit 83c8944 into ui/replication-status-discoverability May 21, 2020
@Monkeychip Monkeychip deleted the ui/transition-fixes branch May 21, 2020 21:48
noelledaley added a commit that referenced this pull request Jun 18, 2020
* Sidebranch: add new route on DR secondary (#8640)

* setup, not complete

* update routing

* clean up

* add test

* add link from status menu

* clean up

* fixes per pr comments

* revert back to two if statements due to refresh bug

* Sidebranch: Setup Replication Page as component to be consumed in all pages for project (#8661)

* setup, not complete

* update routing

* clean up

* add test

* add link from status menu

* clean up

* fixes per pr comments

* setup dashboard with contextual components, and toggle

* setup option to show tabs or not

* handle conditional nav menu

* pass in whole model object

* rename to replication-page

* clean up

* clean up based on pr feedback

* fix linting error

* Sidebranch: setup replication dashboard with scss and initial card components (#8670)

* setup replication dashboard with scss and initial card components

* sync with Noelles changes and clean up the inner grid container inside the selectable card

* set up nested contextual components for selectable-cards

* setup component for table row

* address walk through notes

* remove name selectable from card component as it is not selectable

* add missing space

* Ui/dr primary/initial page setup (#8671)

* add helperText param to InfoTableRow

* initial page setup

* format card with padding and correct number of rows

* style card titles with margin

* move styles inside replication class; add todos

* move replication-summary styles into core app so hot reloading works

* prevent known secondaries card from being cut off on the right hand side

* make cards have the correct column span

* make code elements inside tables black

* WIP - start VltTable component

* simplify css

* renamed VltTable to ReplicationTable and use divs instead of table elements

* fix position of known secondaries

* use table element for secondaries card

* add todo

* move replication components to replication engine

* Revert "move replication components to replication engine"

This reverts commit 2228b83.

* move ReplicationPrimaryCards to components

* remove hover box shadow since cards are not selectable yet

* only apply padding to replication selectable-cards

* specify replication vlt-table in classname

* move replication toggle and toggle into core addon

* remove extra toolbar border

* remove duplicate css

* move ReplicationTableRows to core addon and use them on DR primary page

* clean up todos

* add jsdoc comments

* rename ReplicationTable to KnownSecondaries

* update replicaiton table api to accept flexible data

* rename replicationAttrs to data

* move replication components to core addon

* Ui/dr primary components (#8711)

* populate table with actual secondary ids

* add todo

* make KnownSecondariesCard component

* move KnownSecondariesCard styles to own file

* add EmptyState when there are no known secondaries

* fix known secondaries manage link

* fix Add Secondary link; bring in capabilities model to repliation index route so we can check for adding secondaries

* fix JSDOC comments and updata data to replicationAttrs

* Sidebranch: DR Secondary Dashboard - pr4 (#8706)

* setup styling for delta

* clean up

* replication table remove and rename model to data

* remove old replication header component now that it is in addons

* move replication secondary card component

* calc delta

* clean up

* remove unused components that are now in addon

* address pr comments

* remove test

* fix failing test

* address pr comments

* attempting to fix test

* move to computed components

* fix test error

* fix state of null error

* Sidebranch: DR Secondary Dashboard state message handlers (#8741)

* setup styling for delta

* clean up

* replication table remove and rename model to data

* remove old replication header component now that it is in addons

* move replication secondary card component

* calc delta

* clean up

* remove unused components that are now in addon

* address pr comments

* remove test

* fix failing test

* address pr comments

* attempting to fix test

* initial setup before merge updates

* move to computed components

* fix test error

* fix state of null error

* clean up

* setup alert banner and documentation link

* setup alert banner with second icon

* remove underscore to dash

* add in missing error messages

* add connection-state shutdown

* add storybook update to alert banner

* pr comments

* move css class to helper class

* address pr comments

* add in connection states correct endpoint

* Ui/dr dashboard tests (#8732)

* initial test setup

* use margin when there are no knownsecondaries

* set up replication tests in ember engine

* set knownSecondaries

* move tests to host app and set resolver

* finish known-secondaries-card-test

* make knownSecondaries array match the API response

* add known secondaries table test

* oops, remove stories directory

* wip - replication table rows test

* remove extra code

* finish replication table rows tests

* add | Enterprise | to test module

* remove unncessary assertion:

* show dynamic state glyph (#8747)

* show dynamic state glyph

* show state glyph after state

* move LearnLink into core addon

* make ReplicationDocLink component

* prevent double lines at the bottom of the dashboard

* Sidebranch: dr-secondary-dashboard-pr7 (#8792)

* move dr to higher level component and setup isDisabled for error state when dr mode is disabled.

* add in error messages final

* refactor transistion on submit handler focused on dr secondary

* handle transition

* update empty state component to include icon and add empty state to details page

* fix spelling

* address pr comments

* merge with replication branch

* remove component structure for replication-secondary-card

* compute title and error message

* make specific empty state messages

* fix test

* address pr comments

* regenerate the storyboook for empty state

* Replication Primary Dashboard: handle errors (#8845)

* use h3 instead of code elements

* use correct property names for StateDisplay

* WIP

* remove todo

* move cluster states into a map; make status menu icon match cluster state

* show error in state card using the same state map in the cluster model

* whitespace

* move cluster-states into a helper and update usage

* use circle success icon for stream-wals because that is the ideal state

* more refactoring of cluster state display

* use new cluster-states helper

* whitespace

* use clusterStates helper in replication secondary card

* remove extra import

* add default values for when state isn't recognized

* make sure that state exists before getting state details from clusterStates helper

* be more strict when state cannot be found

* use brace expansion to fix linting error

* add tests for error states

* fix text wrapping issue on secondary cards; make titles match mocks

* use unknown if metric isn't foudn

* remove extra border on selectable card when there is an error

* use outline square in status menu for error

* Ui/replication/refactor dashboard components (#8878)

* use ReplicationDashboard component

* move syncing and alert banners into dashboard component

* only show primary cluster addr if dashboard is for a secondary

* use ReplicationPage and Dashboard

* move isSecondary to page component

* remove duplication

* remove dead code

* refactored table rows

* make sure dashboards update data when we are switching between mclusterModes and replicationTypes

* clarified replicationMode and clusterMode

* remove extra margin

* get rid of data

* remove syncProgress

* remove Enterprise filter from tests so component tests are run

* Ui/replication/primary reindexing (#8906)

* fix typo

* fetch replication/mode/status and pass to dashboard component

* add reindexing stage to AlertBanner; use real value for isReindexing

* remove dr since we don't need it anymore

* add indentation

* remove TODO

* capitalize reindexing_stage and make progress 0 by default

* remove Toggle since we don't need it anymore

* get allllll the variables at once

* only run secondary details test on enterprise

* Sidebranch: component and acceptance tests (#8903)

* address secondary card overflow issue

* setup replicaiton header test

* address secondary card overflow issue

* setup replication secondary card test

* setup replicaiton header test

* setup replicaiton page test

* setup replication secondary card test

* setup replication dashboard test

* setup replicaiton page test

* remove unused code

* fix overflow

* finish test for rep dashboard

* update rep secondary card test

* finish rep header test

* fix rep table rows and header test

* fix header test

* fix missing data-test-primary-cluster

* add to secondary test

* remove pauseTest

* add to enterprise replication test

* add mode to dr secondary test

* remove pauseTest

* add enterprise to test

* amend per pr commments

* re organize rep secondary card test

* adjust error heights with design input

* move const around in rep secondary card test

* move const around and message for rep dashboard test

* amend per pr review comments

* remove styling from grid-item-left

* remove dup hasErrorClass key

* quick fix

* test failure fix

* fix test due to merge

* remove hasErrorClass

* modify test message

* Sidebranch: remove delta, toggle, and make auto-refresh (#8945)

* change styling

* remove replication toggle

* modifications for auto refresh and final removal of delta and last wal

* fix refresh issue by removing replicationMode on this.reset which conflicts with the same property being set on the cluster model

* remove comments

* add unknown placeholder

* add auto refresh to other components and remove mention of toggle

* remove meep and primary cluster heading area

* ensure status menu displays replication state, not just one (#8959)

* Add Replication Reindexing Progress Bar (#8975)

* whitespace

* rename consts

* rename variables

* test that dashboard shows a reindexing alert banner

* standardize shamir and ui wizard progress bar

* make new progressbar component

* just kidding, we can use the html5 progress bar

* make top margins consistent across primary and secondary dashboards

* clean up AlertBanner JSDocs and markdown

* show a progress bar inside an AlertBanner if cluster is reindexing

* add example AlertBanner with Progress Bar

* add reindexing tests

* add a tiny left margin to progress bars inside alert banners

* keep old class names in wizard to prevent bug, but keep consistent progress background color

* use spacing variables

* remove extra border when secondary card has an error

* make card header sizes and weight consistent

* Sidebranch: Performance Secondary Dashboard (#8956)

* setup rep dashboard to dynamically take in the component to render and dynamically setup the css based on mode of cluster

* conditional pass in the correct props to the Dashboard.card component and add margin to reindexing alertBanner

* update replication dashboard test

* add performance secondary test and clean up replication-secondary-card test

* fix message

* replace cluster-id with secondaryId

* remove reindexing test as its a duplicate of the branch noelle is working on

* cleanup

* address pr comments

* small test fixes

* add secondaryId to header test

* fix tests description

* Ui/replication/test update (#8995)

* make sure progress bar updates and animates

* ensure dashboard updates when replication mode has changed

* make sure we update isSyncing when state has changed

* wip - console log statements to see if components are getting new attrs

* Revert "wip - console log statements to see if components are getting new attrs"

This reverts commit d05219b.

* style progress bar in mozilla; allow testing the progress bar in storybook

* test that primary and secondary card container don't display at the same time

* prepare KnownSecondariesTable for backend compatibility (#9029)

* Ui/replication mgmt action block (#9053)

This does some low-impact work to prepare for the refactor of replication-actions. Includes:

- Move modal to addon in lib/core
- Update modal to take a "type" param which changes the header color + icon
- Add tests for modal changes
- Add action-block style only component
- Add styles-only replication-action grid that the action-blocks will live inside of

* Sidebranch: address transition issues on replication engine and actions (#9010)

* small formatting changes

* change findRecord to peekRecord so it keeps track of the changing data.

* add styling such that when page is loading it does not spread across the whole page

* help with reload and styling on replication route

* initial setup for new flow that handles adding a perf secondary, and also some on a dr secondary

* clean up

* add loader on rep page for situations when data is still loading, and add loading mode in header, seperate from the modeForUrl used in other places to help transistion

* fix transitionTo when coming from different replication.mode vs replication.index route

* set default of mode for radio checkboxes after removing from DEFAULTS var

* reset and cont using onEnable because TransitionTo is not working inside of component

* remove console

* the reason we were getting transition errors :(

* remove modeObjecT

* fix error by removing peek record from application and moving it lower down in a property replicationAttrs

* Readd back space

* this one really does fix the issue

* add back peek record and add conditional to isLoadingData

* figure out cluster id from service instead of hardcoded

* fix capabilities-self error by adding a 1 sceond delay for when transition from replication.index to replication.mode.index on enable performance secondary

* remove attempt to circumvent the peekRecord in application

* add to replication page tests and clarify replicationMode to formattedReplicationMode, it's super confusing when seeing replicationMode being duplicated throughout the computed components.  this clarifies its computed only for formatting

* fix repetive conditional

* capture the state when either dr.mode or performance.mode are undefined, which happens during a transition.  If this is the case add a loader on the replicationindex page.

* address some pr comments

* small change

* add bootstrapping mode to test

* add Replication Learn Links to wizard (#9106)

* Ui/summary dashboard (#9079)

* move key value to lib/core/addon so I can use inside replication engine

* setup summary dasbhoard on replication summary component

* set title for summary dashboard

* do not show replication table rows on summary dashboard

* show that last_wal updates every 10 seconds

* show replication table rows on individual dashboards, but not summary

* remove extra bottom border on replication-dashboard

* add replicationDetailsSummary object and replication-summary-card

* setup structure and data calcs of replication summary card

* fix links and styling on summary card

* breadcrumbs

* match state title on summary dashboard to individual dashboards

* add margin below replication header

* update breadcrumbs to show replication mode

* align details link right

* add margin below tabs in replication header

* user helper-text to make card text styling consistent across dashboards

* remove unneeded code

* add bottom border to summary state

* add bottom margin to summary dashboard

* add negative margins to bring values closer to related cell

* fix failing test due to data-test attribute change and make storybook component for replication-summary-card

* setup replication summary card test.  I suspect we'll move the hasError test to the dashboard where the error will show around the state display

* add to replication acceptance test for new summary dashboard

* remove pauseTest

* add is-active to li element

* clean up

* dashboard test and clean up

* addressing pr comments

* fix replication/null/status error

* add JSDocs for rep page and rep dash

* more pr cleanup

* remove conditional and fix styling blue link

* fix conditional on when loading summary dashboard to check for primary on both. wrap code in div so it lands on another line.

Co-authored-by: Noelle Daley <adriannenoelle@gmail.com>

* change message with bold 'not' if primary (#9112)

* Add JSDocs to components (#9125)

* jsdocs

* remove todo that is no longer relevant

* clean up wording

* wordsmithing

* fix spelling

* example for clusterMode

* Replication Management Sidebranch: Replication Action Disable (#9061)

Set up dr-secondary management page with new action flow

* Create confirmation-modal component

* Refactor replication-dr-secondary splash page to replication manage page

* Refactor replication-action-disable component to use confirmation modal

* Add details/manage tab to replication-dr-secondary section

* Refactor Replication Action: Promote to use modal flow (#9122)

* Ui/replication mgmt/reindex action (#9126)

* Replication Management Sidebranch: Replication Action Disable (#9061)

* Ui/replication mgmt/recover action (#9127)

* Replication Management Sidebranch: Replication Action Recover (#9061)

* Close link-to tag in header (#9139)

Fixes bad merge conflict

* UI: Fix replication management tests (#9136)

* do not show replication mode or id when replication isn't enabled

* fix broken tag

* fill in confirmation text when disabling replication in tests

* fix typo

* fix demote primary test selector

* add test selectors and update tests to match new format

* fill in Performance when disabling performance secondary

* Ui/replication mgmt/update primary action (#9149)

* Update Primary replication action uses modal flow

* Update modal max-height to accommodate for the navbar

* Ui/secondary token flow dr (#9150)

* setup token modal flow

* calc expirationDate

* fix date-format test after moving it in addon

* fix icon conditional in modal title

* decode token to get epoch expiration date and convert

* handle clicking outside of modal

* remove extra copy button

* add modal check in rep  acceptance test

* look only at day and month and remove console

* fix spelling

* cleanup

* replace dr with variable

* make string check longer in test

* fix test variables

* refactor enterprise test for secondary token flow

* make cluster model property replicationModeForDisplay to handle all cases where we were either conditionally displaying the DR, Disaster Recovery, etc. or where we were hardcoding it into the hbs.  For situations where it was DR before, I am now keeping it more consistent and using Disaster Recovery as on the manage page we do not show the Diaster Recovery (DR) anywhere.

* set initial value for ttl picker to fix issue where itwas setting seconds to minutes

* clean up

* add comment about ttl picker

* Add known primaries info table (#9152)

* replace primaryClusterAddr with knownPrimaryClusterAddrs

* rename state to Status; fix css layout

* add InfoTable component

* only show label column if there is a label

* add grid-item-middle class

* whitespace

* fix grid layout

* die tagName, die

* set table max-height

* prep InfoTable for Storybook

* ensure cards always have the same height

* remove duplicate max height since vlt-table already has max-height

* add InfoTable tests

* add InfoTable to Storybook

* organize grid item css; rename for consistency

* add sticky header to table

* add sticky-header class to keep table styles in scope

* whoops, do not use fake data

* Ui/rep design updates (#9169)

* show secondaryId in table rows

* show primary_cluster_addr in table rows

* remove cluster Ids from replication headers

* Ui/fix enable overflow (#9173)

* only show primary_cluster_addr for primary

* fix overflow on replication index

* remove display from cluster-states because it is not used anywhere

* fix missing replication mode from description

* add comments

* use helper to consolidate replication descriptions

* fix text wrapping on medium screen sizes

* Ui/replication mgmt/demote action (#9168)

* Replication demote action uses modal flow

Co-authored-by: Noelle Daley <adriannenoelle@gmail.com>
Co-authored-by: Angel Garbarino <argarbarino@gmail.com>

* Ui/replication merge cleanup 2 (#9212)

* replace with replicationModeForDisplay that is defined on the cluster

* fix spelling on replication and confirmed with design for placeholder when Not defined

* remove extra div with box class

* change manage link to take you to the secondaries manage as it's within the known secondaries card

* fix scroll always showing by adding auto, and decreasing the height.  WIP

* add empty state to known_primary_cluster_addrs

* address pr comments

* Add real connected state and API address (#9219)

* fix title of secondary card

* show connected status

* fix tests

* fix enterprise test (#9229)

* fix enterprise test

* add n

* add another n

* Ui/replication mgmt/generate token action (#9187)

Generate operation token flow from replication DR Secondary. Clicking 'Cancel' on the modal after the operation has started results in cancelling generate operation and restarting the process.

* use none set instead of not defined

Co-authored-by: Noelle Daley <noelledaley@users.noreply.github.com>
Co-authored-by: Chelsea Shaw <chelshaw.dev@gmail.com>
Co-authored-by: Noelle Daley <adriannenoelle@gmail.com>
noelledaley added a commit that referenced this pull request Jul 17, 2020
* Sidebranch: add new route on DR secondary (#8640)

* setup, not complete

* update routing

* clean up

* add test

* add link from status menu

* clean up

* fixes per pr comments

* revert back to two if statements due to refresh bug

* Sidebranch: Setup Replication Page as component to be consumed in all pages for project (#8661)

* setup, not complete

* update routing

* clean up

* add test

* add link from status menu

* clean up

* fixes per pr comments

* setup dashboard with contextual components, and toggle

* setup option to show tabs or not

* handle conditional nav menu

* pass in whole model object

* rename to replication-page

* clean up

* clean up based on pr feedback

* fix linting error

* Sidebranch: setup replication dashboard with scss and initial card components (#8670)

* setup replication dashboard with scss and initial card components

* sync with Noelles changes and clean up the inner grid container inside the selectable card

* set up nested contextual components for selectable-cards

* setup component for table row

* address walk through notes

* remove name selectable from card component as it is not selectable

* add missing space

* Ui/dr primary/initial page setup (#8671)

* add helperText param to InfoTableRow

* initial page setup

* format card with padding and correct number of rows

* style card titles with margin

* move styles inside replication class; add todos

* move replication-summary styles into core app so hot reloading works

* prevent known secondaries card from being cut off on the right hand side

* make cards have the correct column span

* make code elements inside tables black

* WIP - start VltTable component

* simplify css

* renamed VltTable to ReplicationTable and use divs instead of table elements

* fix position of known secondaries

* use table element for secondaries card

* add todo

* move replication components to replication engine

* Revert "move replication components to replication engine"

This reverts commit 2228b83.

* move ReplicationPrimaryCards to components

* remove hover box shadow since cards are not selectable yet

* only apply padding to replication selectable-cards

* specify replication vlt-table in classname

* move replication toggle and toggle into core addon

* remove extra toolbar border

* remove duplicate css

* move ReplicationTableRows to core addon and use them on DR primary page

* clean up todos

* add jsdoc comments

* rename ReplicationTable to KnownSecondaries

* update replicaiton table api to accept flexible data

* rename replicationAttrs to data

* move replication components to core addon

* Ui/dr primary components (#8711)

* populate table with actual secondary ids

* add todo

* make KnownSecondariesCard component

* move KnownSecondariesCard styles to own file

* add EmptyState when there are no known secondaries

* fix known secondaries manage link

* fix Add Secondary link; bring in capabilities model to repliation index route so we can check for adding secondaries

* fix JSDOC comments and updata data to replicationAttrs

* Sidebranch: DR Secondary Dashboard - pr4 (#8706)

* setup styling for delta

* clean up

* replication table remove and rename model to data

* remove old replication header component now that it is in addons

* move replication secondary card component

* calc delta

* clean up

* remove unused components that are now in addon

* address pr comments

* remove test

* fix failing test

* address pr comments

* attempting to fix test

* move to computed components

* fix test error

* fix state of null error

* Sidebranch: DR Secondary Dashboard state message handlers (#8741)

* setup styling for delta

* clean up

* replication table remove and rename model to data

* remove old replication header component now that it is in addons

* move replication secondary card component

* calc delta

* clean up

* remove unused components that are now in addon

* address pr comments

* remove test

* fix failing test

* address pr comments

* attempting to fix test

* initial setup before merge updates

* move to computed components

* fix test error

* fix state of null error

* clean up

* setup alert banner and documentation link

* setup alert banner with second icon

* remove underscore to dash

* add in missing error messages

* add connection-state shutdown

* add storybook update to alert banner

* pr comments

* move css class to helper class

* address pr comments

* add in connection states correct endpoint

* Ui/dr dashboard tests (#8732)

* initial test setup

* use margin when there are no knownsecondaries

* set up replication tests in ember engine

* set knownSecondaries

* move tests to host app and set resolver

* finish known-secondaries-card-test

* make knownSecondaries array match the API response

* add known secondaries table test

* oops, remove stories directory

* wip - replication table rows test

* remove extra code

* finish replication table rows tests

* add | Enterprise | to test module

* remove unncessary assertion:

* show dynamic state glyph (#8747)

* show dynamic state glyph

* show state glyph after state

* move LearnLink into core addon

* make ReplicationDocLink component

* prevent double lines at the bottom of the dashboard

* Sidebranch: dr-secondary-dashboard-pr7 (#8792)

* move dr to higher level component and setup isDisabled for error state when dr mode is disabled.

* add in error messages final

* refactor transistion on submit handler focused on dr secondary

* handle transition

* update empty state component to include icon and add empty state to details page

* fix spelling

* address pr comments

* merge with replication branch

* remove component structure for replication-secondary-card

* compute title and error message

* make specific empty state messages

* fix test

* address pr comments

* regenerate the storyboook for empty state

* Replication Primary Dashboard: handle errors (#8845)

* use h3 instead of code elements

* use correct property names for StateDisplay

* WIP

* remove todo

* move cluster states into a map; make status menu icon match cluster state

* show error in state card using the same state map in the cluster model

* whitespace

* move cluster-states into a helper and update usage

* use circle success icon for stream-wals because that is the ideal state

* more refactoring of cluster state display

* use new cluster-states helper

* whitespace

* use clusterStates helper in replication secondary card

* remove extra import

* add default values for when state isn't recognized

* make sure that state exists before getting state details from clusterStates helper

* be more strict when state cannot be found

* use brace expansion to fix linting error

* add tests for error states

* fix text wrapping issue on secondary cards; make titles match mocks

* use unknown if metric isn't foudn

* remove extra border on selectable card when there is an error

* use outline square in status menu for error

* Ui/replication/refactor dashboard components (#8878)

* use ReplicationDashboard component

* move syncing and alert banners into dashboard component

* only show primary cluster addr if dashboard is for a secondary

* use ReplicationPage and Dashboard

* move isSecondary to page component

* remove duplication

* remove dead code

* refactored table rows

* make sure dashboards update data when we are switching between mclusterModes and replicationTypes

* clarified replicationMode and clusterMode

* remove extra margin

* get rid of data

* remove syncProgress

* remove Enterprise filter from tests so component tests are run

* Ui/replication/primary reindexing (#8906)

* fix typo

* fetch replication/mode/status and pass to dashboard component

* add reindexing stage to AlertBanner; use real value for isReindexing

* remove dr since we don't need it anymore

* add indentation

* remove TODO

* capitalize reindexing_stage and make progress 0 by default

* remove Toggle since we don't need it anymore

* get allllll the variables at once

* only run secondary details test on enterprise

* Sidebranch: component and acceptance tests (#8903)

* address secondary card overflow issue

* setup replicaiton header test

* address secondary card overflow issue

* setup replication secondary card test

* setup replicaiton header test

* setup replicaiton page test

* setup replication secondary card test

* setup replication dashboard test

* setup replicaiton page test

* remove unused code

* fix overflow

* finish test for rep dashboard

* update rep secondary card test

* finish rep header test

* fix rep table rows and header test

* fix header test

* fix missing data-test-primary-cluster

* add to secondary test

* remove pauseTest

* add to enterprise replication test

* add mode to dr secondary test

* remove pauseTest

* add enterprise to test

* amend per pr commments

* re organize rep secondary card test

* adjust error heights with design input

* move const around in rep secondary card test

* move const around and message for rep dashboard test

* amend per pr review comments

* remove styling from grid-item-left

* remove dup hasErrorClass key

* quick fix

* test failure fix

* fix test due to merge

* remove hasErrorClass

* modify test message

* Sidebranch: remove delta, toggle, and make auto-refresh (#8945)

* change styling

* remove replication toggle

* modifications for auto refresh and final removal of delta and last wal

* fix refresh issue by removing replicationMode on this.reset which conflicts with the same property being set on the cluster model

* remove comments

* add unknown placeholder

* add auto refresh to other components and remove mention of toggle

* remove meep and primary cluster heading area

* ensure status menu displays replication state, not just one (#8959)

* Add Replication Reindexing Progress Bar (#8975)

* whitespace

* rename consts

* rename variables

* test that dashboard shows a reindexing alert banner

* standardize shamir and ui wizard progress bar

* make new progressbar component

* just kidding, we can use the html5 progress bar

* make top margins consistent across primary and secondary dashboards

* clean up AlertBanner JSDocs and markdown

* show a progress bar inside an AlertBanner if cluster is reindexing

* add example AlertBanner with Progress Bar

* add reindexing tests

* add a tiny left margin to progress bars inside alert banners

* keep old class names in wizard to prevent bug, but keep consistent progress background color

* use spacing variables

* remove extra border when secondary card has an error

* make card header sizes and weight consistent

* Sidebranch: Performance Secondary Dashboard (#8956)

* setup rep dashboard to dynamically take in the component to render and dynamically setup the css based on mode of cluster

* conditional pass in the correct props to the Dashboard.card component and add margin to reindexing alertBanner

* update replication dashboard test

* add performance secondary test and clean up replication-secondary-card test

* fix message

* replace cluster-id with secondaryId

* remove reindexing test as its a duplicate of the branch noelle is working on

* cleanup

* address pr comments

* small test fixes

* add secondaryId to header test

* fix tests description

* Ui/replication/test update (#8995)

* make sure progress bar updates and animates

* ensure dashboard updates when replication mode has changed

* make sure we update isSyncing when state has changed

* wip - console log statements to see if components are getting new attrs

* Revert "wip - console log statements to see if components are getting new attrs"

This reverts commit d05219b.

* style progress bar in mozilla; allow testing the progress bar in storybook

* test that primary and secondary card container don't display at the same time

* prepare KnownSecondariesTable for backend compatibility (#9029)

* Ui/replication mgmt action block (#9053)

This does some low-impact work to prepare for the refactor of replication-actions. Includes:

- Move modal to addon in lib/core
- Update modal to take a "type" param which changes the header color + icon
- Add tests for modal changes
- Add action-block style only component
- Add styles-only replication-action grid that the action-blocks will live inside of

* Sidebranch: address transition issues on replication engine and actions (#9010)

* small formatting changes

* change findRecord to peekRecord so it keeps track of the changing data.

* add styling such that when page is loading it does not spread across the whole page

* help with reload and styling on replication route

* initial setup for new flow that handles adding a perf secondary, and also some on a dr secondary

* clean up

* add loader on rep page for situations when data is still loading, and add loading mode in header, seperate from the modeForUrl used in other places to help transistion

* fix transitionTo when coming from different replication.mode vs replication.index route

* set default of mode for radio checkboxes after removing from DEFAULTS var

* reset and cont using onEnable because TransitionTo is not working inside of component

* remove console

* the reason we were getting transition errors :(

* remove modeObjecT

* fix error by removing peek record from application and moving it lower down in a property replicationAttrs

* Readd back space

* this one really does fix the issue

* add back peek record and add conditional to isLoadingData

* figure out cluster id from service instead of hardcoded

* fix capabilities-self error by adding a 1 sceond delay for when transition from replication.index to replication.mode.index on enable performance secondary

* remove attempt to circumvent the peekRecord in application

* add to replication page tests and clarify replicationMode to formattedReplicationMode, it's super confusing when seeing replicationMode being duplicated throughout the computed components.  this clarifies its computed only for formatting

* fix repetive conditional

* capture the state when either dr.mode or performance.mode are undefined, which happens during a transition.  If this is the case add a loader on the replicationindex page.

* address some pr comments

* small change

* add bootstrapping mode to test

* add Replication Learn Links to wizard (#9106)

* Ui/summary dashboard (#9079)

* move key value to lib/core/addon so I can use inside replication engine

* setup summary dasbhoard on replication summary component

* set title for summary dashboard

* do not show replication table rows on summary dashboard

* show that last_wal updates every 10 seconds

* show replication table rows on individual dashboards, but not summary

* remove extra bottom border on replication-dashboard

* add replicationDetailsSummary object and replication-summary-card

* setup structure and data calcs of replication summary card

* fix links and styling on summary card

* breadcrumbs

* match state title on summary dashboard to individual dashboards

* add margin below replication header

* update breadcrumbs to show replication mode

* align details link right

* add margin below tabs in replication header

* user helper-text to make card text styling consistent across dashboards

* remove unneeded code

* add bottom border to summary state

* add bottom margin to summary dashboard

* add negative margins to bring values closer to related cell

* fix failing test due to data-test attribute change and make storybook component for replication-summary-card

* setup replication summary card test.  I suspect we'll move the hasError test to the dashboard where the error will show around the state display

* add to replication acceptance test for new summary dashboard

* remove pauseTest

* add is-active to li element

* clean up

* dashboard test and clean up

* addressing pr comments

* fix replication/null/status error

* add JSDocs for rep page and rep dash

* more pr cleanup

* remove conditional and fix styling blue link

* fix conditional on when loading summary dashboard to check for primary on both. wrap code in div so it lands on another line.

Co-authored-by: Noelle Daley <adriannenoelle@gmail.com>

* change message with bold 'not' if primary (#9112)

* Add JSDocs to components (#9125)

* jsdocs

* remove todo that is no longer relevant

* clean up wording

* wordsmithing

* fix spelling

* example for clusterMode

* Replication Management Sidebranch: Replication Action Disable (#9061)

Set up dr-secondary management page with new action flow

* Create confirmation-modal component

* Refactor replication-dr-secondary splash page to replication manage page

* Refactor replication-action-disable component to use confirmation modal

* Add details/manage tab to replication-dr-secondary section

* Refactor Replication Action: Promote to use modal flow (#9122)

* Ui/replication mgmt/reindex action (#9126)

* Replication Management Sidebranch: Replication Action Disable (#9061)

* Ui/replication mgmt/recover action (#9127)

* Replication Management Sidebranch: Replication Action Recover (#9061)

* Close link-to tag in header (#9139)

Fixes bad merge conflict

* UI: Fix replication management tests (#9136)

* do not show replication mode or id when replication isn't enabled

* fix broken tag

* fill in confirmation text when disabling replication in tests

* fix typo

* fix demote primary test selector

* add test selectors and update tests to match new format

* fill in Performance when disabling performance secondary

* Ui/replication mgmt/update primary action (#9149)

* Update Primary replication action uses modal flow

* Update modal max-height to accommodate for the navbar

* Ui/secondary token flow dr (#9150)

* setup token modal flow

* calc expirationDate

* fix date-format test after moving it in addon

* fix icon conditional in modal title

* decode token to get epoch expiration date and convert

* handle clicking outside of modal

* remove extra copy button

* add modal check in rep  acceptance test

* look only at day and month and remove console

* fix spelling

* cleanup

* replace dr with variable

* make string check longer in test

* fix test variables

* refactor enterprise test for secondary token flow

* make cluster model property replicationModeForDisplay to handle all cases where we were either conditionally displaying the DR, Disaster Recovery, etc. or where we were hardcoding it into the hbs.  For situations where it was DR before, I am now keeping it more consistent and using Disaster Recovery as on the manage page we do not show the Diaster Recovery (DR) anywhere.

* set initial value for ttl picker to fix issue where itwas setting seconds to minutes

* clean up

* add comment about ttl picker

* Add known primaries info table (#9152)

* replace primaryClusterAddr with knownPrimaryClusterAddrs

* rename state to Status; fix css layout

* add InfoTable component

* only show label column if there is a label

* add grid-item-middle class

* whitespace

* fix grid layout

* die tagName, die

* set table max-height

* prep InfoTable for Storybook

* ensure cards always have the same height

* remove duplicate max height since vlt-table already has max-height

* add InfoTable tests

* add InfoTable to Storybook

* organize grid item css; rename for consistency

* add sticky header to table

* add sticky-header class to keep table styles in scope

* whoops, do not use fake data

* Ui/rep design updates (#9169)

* show secondaryId in table rows

* show primary_cluster_addr in table rows

* remove cluster Ids from replication headers

* Ui/fix enable overflow (#9173)

* only show primary_cluster_addr for primary

* fix overflow on replication index

* remove display from cluster-states because it is not used anywhere

* fix missing replication mode from description

* add comments

* use helper to consolidate replication descriptions

* fix text wrapping on medium screen sizes

* Ui/replication mgmt/demote action (#9168)

* Replication demote action uses modal flow

Co-authored-by: Noelle Daley <adriannenoelle@gmail.com>
Co-authored-by: Angel Garbarino <argarbarino@gmail.com>

* Ui/replication merge cleanup 2 (#9212)

* replace with replicationModeForDisplay that is defined on the cluster

* fix spelling on replication and confirmed with design for placeholder when Not defined

* remove extra div with box class

* change manage link to take you to the secondaries manage as it's within the known secondaries card

* fix scroll always showing by adding auto, and decreasing the height.  WIP

* add empty state to known_primary_cluster_addrs

* address pr comments

* Add real connected state and API address (#9219)

* fix title of secondary card

* show connected status

* fix tests

* fix enterprise test (#9229)

* fix enterprise test

* add n

* add another n

* Ui/replication mgmt/generate token action (#9187)

Generate operation token flow from replication DR Secondary. Clicking 'Cancel' on the modal after the operation has started results in cancelling generate operation and restarting the process.

* use none set instead of not defined

Co-authored-by: Noelle Daley <noelledaley@users.noreply.github.com>
Co-authored-by: Chelsea Shaw <chelshaw.dev@gmail.com>
Co-authored-by: Noelle Daley <adriannenoelle@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants