[CCR] Refactor redux for Auto-follow pattern detail panel #27491

sebelga · 2018-12-19T13:39:22Z

Before starting with the follower indices section of CCR I wanted to quickly refactor the detail panel to follow the redux architecture that I had put in place.

Until we have more complex requirements for our crud apps, I'd prefer to keep the store/reducers and actions simple to use and reason about.

The reasoning behind this refactor is:

Decouple the UI state from an item selected (this gives us more flexibility and would allow for e.g. to close the panel in a CSS transition and still have an item selected). The fact that the detail panel is opened or closed is a UI state.
The detail panel should just render its content and not care if it is opened or not. That's the job of its parent component.
As we have 2 ways to select an item (clicking on a table item or change the pattern query param in the URL), having a single source of truth to open or close the detail panel makes things easier.
Fewer redux boilerplate (action types, action creators and reducers).

elasticmachine · 2018-12-19T14:20:44Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-12-19T16:01:33Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-12-19T16:25:23Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-12-19T21:13:52Z

Pinging @elastic/es-ui

cjcenizal

Looks good overall, just had a few suggestions and questions.

cjcenizal · 2018-12-19T21:17:32Z

...tion/public/app/sections/home/auto_follow_pattern_list/auto_follow_pattern_list.container.js

  apiStatus: getApiStatus(scope)(state),
  apiError: getApiError(scope)(state),
  isAuthorized: isApiAuthorized(scope)(state),
-  isDetailPanelOpen: isDetailPanelOpen(state),
+  isDetailPanelOpened: isDetailPanelOpened(state),


Minor nit, but I think we should use the present tense in all booleans for consistency, unless the tense has some clear significance.

Ok! Was not sure if it was a mistake. So you prefer isClose to isClosed for example? I am not native but it sounds weird to me 😊

English is such a terrible language... "closed" is both the present and past tense, so complementary states would be isClosed and isOpen.

cjcenizal · 2018-12-19T21:31:25Z

...on/public/app/sections/home/auto_follow_pattern_list/components/detail_panel/detail_panel.js

      closeDetailPanel,
    } = this.props;

    if (!autoFollowPattern) {
      return null;
    }

+    const { name: autoFollowPatternName } = autoFollowPattern;


If the auto-follow pattern doesn't exist, then the name will be undefined. Compare this to Remote Clusters, which will still show you the name if the remote cluster can't be found.

cjcenizal · 2018-12-19T21:38:09Z

x-pack/plugins/cross_cluster_replication/public/app/store/actions/auto_follow_pattern.js

-        dispatch(closeAutoFollowPatternDetailPanel());
+      const ids = arrify(id);
+      const autoFollowPatternId = getSelectedAutoFollowPatternId(getState());
+      if (ids.some(_id => autoFollowPatternId === _id)) {


The original code anticipated that the deletion request could fail for the selected auto-follow pattern. It looks like the new code doesn't anticipate that case and will close the detail panel regardless of the request failing or succeeding. Is this correct? If so, then I think the first case makes more sense from the user's perspective. What do you think?

This is inside the onSuccess handler so will only be executed if the deletion succeeded. But it made me realize that I should change the if statement to if (ids.includes(autoFollowPatternId)) 😊

cjcenizal · 2018-12-19T21:44:48Z

...e/auto_follow_pattern_list/components/auto_follow_pattern_table/auto_follow_pattern_table.js

@@ -152,7 +152,7 @@ export const AutoFollowPatternTable = injectI18n(
            }),
            icon: 'pencil',
            onClick: ({ name }) => {
-              editAutoFollowPattern(name);
+              selectAutoFollowPattern(name);


Why do we need to select the auto-follow pattern here? I just tried removing this line and the editing functionality seemed to work fine.

On a separate note, I think we may want to implement this the way we did in Remote Clusters, so that this is a link with an href instead of a button with an onClick. This way people could open this in a new tab or copy the URL if they wanted to for some reason: https://github.com/elastic/kibana/blob/master/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_table/remote_cluster_table.js#L183

It works because, when there is no selection the edit component looks at the route param and fetches from the server (which is what happens on a page refresh). I'll change it to an href, good point

elasticmachine · 2018-12-20T09:16:19Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

…ate "pattern" query params

sebelga · 2018-12-20T10:55:57Z

Thanks for the review @cjcenizal @jen-huang ! I made all the changes and manage to simplify even more 😊 by removing the middleware to update the history and putting the state that opens or closes the detail panel locally on the <AutoFollowPatternList /> component.

The only use case not supported is if the user starts editing the pattern query param in the url. I don't think this would ever be needed as the user has the table with the list of auto-follow pattern right on the screen.

elasticmachine · 2018-12-20T11:26:19Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

sebelga · 2018-12-20T14:27:54Z

retest

elasticmachine · 2018-12-20T15:08:24Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-12-20T18:23:05Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

cjcenizal

I had a few minor suggestions, but I'm also a bit uncomfortable with how complex AutoFollowPatternList has become. 😅

I also found a bug which we should fix. If you click the "Edit" icon in a row and then hit the back button, the detail panel opens up. I think this is because we're recycling the pattern selection for both the detail panel and edit form?

Because I won't be here for some time, I'll leave it to you and the rest of the team to decide how to move forward with regard to my other comments. 😄

cjcenizal · 2018-12-20T18:10:04Z

...er_replication/public/app/sections/home/auto_follow_pattern_list/auto_follow_pattern_list.js

-        openDetailPanel(patternName);
-      } else if (isDetailPanelOpen) {
-        closeDetailPanel();
+    componentDidUpdate(_, prevState) {


Instead of _ can we use prevProps, which is more conventional? It seems unusual and potentially confusing to use _.

cjcenizal · 2018-12-20T18:12:58Z

...app/sections/home/auto_follow_pattern_list/components/detail_panel/detail_panel.container.js

+const mapDispatchToProps = (dispatch) => ({
+  // The actual closing of the panel is done in the <AutoFollowPatternList />
+  // component as it listens to the URL query change
+  closeDetailPanel: () => dispatch(selectAutoFollowPattern(null)),


The logic might be a little easier to follow if the owner (AutoFollowPatternList) were to provide this callback instead of the container. Then the comment becomes a little less necessary because all of the related logic is already in front of you.

Great point

cjcenizal · 2018-12-20T18:17:06Z

x-pack/plugins/cross_cluster_replication/public/app/store/actions/auto_follow_pattern.js

-        dispatch(closeAutoFollowPatternDetailPanel());
+      const ids = arrify(id);
+      const autoFollowPatternId = getSelectedAutoFollowPatternId(getState());
+      if (ids.includes(autoFollowPatternId)) {


In the logic above this point, we're surfacing both error toasts (for when an auto-follow pattern fails to be deleted) and success toasts (for when an auto-follow pattern is deleted). So isn't this onSuccess callback invoked when there is a partial failure during a bulk delete? If this is the case, the original logic results in a better UX in the event that the auto-follow pattern in the detail panel has failed to be deleted, because we're checking response.itemsDeleted instead of ids.

Sorry totally missed that, yes of course it should be response.itemsDeleted. Thanks for pointing it out

cjcenizal · 2018-12-20T18:21:18Z

...on/public/app/sections/home/auto_follow_pattern_list/components/detail_panel/detail_panel.js

-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiFlexItem>
+          {autoFollowPattern && (


Nice improvement here to render the "Close" button when the pattern is missing. Could you apply it to Remote Clusters, too?

cjcenizal · 2018-12-20T18:36:47Z

...er_replication/public/app/sections/home/auto_follow_pattern_list/auto_follow_pattern_list.js

    }

+    static getDerivedStateFromProps({ autoFollowPatternId }, { lastAutoFollowPatternId }) {


Just a personal DX anecdote... as I read this code, I found myself having to trace the logic through three lifecycle methods: componentDidMount, getDerivedStateFromProps, and componentDidUpdate. I then had to also factor in what would happen when the user clicks a row (a new pattern is selected, triggering getDerivedStateFromProps). This took me a few minutes to wrap my head around, and then I was still left wondering why we're storing lastAutoFollowPatternId. Through experimentation by removing the logic it supports, I found that its purpose is to prevent an infinite render loop.

To be honest, I feel like this code has become more complex with this change. What is the benefit this complexity brings us?

ComponentDidMount is pretty clear I think, it mounts and checks for the presence of a pattern in the query params. I understand what u say about the 2 other lifecycle methods, I will see how this could be improved.
There is never a benefit when complexity comes in 😊 I thought that using a middleware to change a URL on a single page was also a bit complex, mainly because you had to remember that it existed and that it was there that the search params were being changed. So I tried to move the logic as close as possible to the page (section) component.

I don't want to block the PR on this while I'm out.

…-follow pattern

sebelga · 2018-12-21T08:43:12Z

@cjcenizal @jen-huang Mea-culpa about my initial idea to have a single id for both detail and edit views. You were right that it adds a mental overhead and complexity in the code.
I added a commit to have 2 ids in the store: one for the detail panel and one for the edit view. I do think though that having the panel opened or closed is a local state of the list component so I left it like that.

About the complexity of having a lifecycle (componentDidUpdate) to manage the query param and deep link, IMO it might be a bit complex but it is easier to follow than having a separate middleware totally outside the component.

In order for you to forgive my stubbornness, I followed your advice @cjcenizal and replaced the api-middelware by a redux-thunk action. It does indeed remove another layer of complexity. 😊

@jen-huang Can you do test it locally and make sure I didn't leave anything behind? Thanks!!

elasticmachine · 2018-12-21T09:42:07Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

sebelga · 2018-12-21T13:23:57Z

I will merge this PR and fix any regressions on a separate PR if there are any.

* [CCR] Refactor redux for Auto-follow pattern detail panel (elastic#27491) * [CCR] Refactor redux for Auto-follow pattern detail panel * [CCR] Small refactor * [CCR] Change to present tense * [CCR] Display auto-follow pattern name even if it does not exist * [CCR] Use href to edit auto-follow pattern + remove middelware to update "pattern" query params * [CCR] Fix navigation back bug + set 2 ids for detail and edit an auto-follow pattern * [CCR] Replace api middleware with redux-thunk action * [CCR] Show detail footer close button even when cluster is not valid * [CCR] Add endpoints for fetching and creating follower indices (elastic#27646) * Add GET /follower_indices endpoint with deserialization logic and tests. * Add POST /follower_indices endpoint with serialization logic and tests. * [CCR] Add unit tests for RemoteClusterForm, RemoteClusterList, and RemoteClusterTable (elastic#27647) * Use componentDidUpdate instead of getDerivedStateFromProps. * Add unit tests for RemoteClusterForm, RemoteClusterList, and RemoteClusterTable. * Add jest mock for eui `makeId()` utility and get deterministic aria IDs for snapshots * Update snapshot for Remote Cluster list test * [CCR] Follower indices table and detail panel (elastic#27804) * Store for follower indices * Initial work for follower indices table and detail panel * Fix load auto-follow stats load as middleware was removed * [CCR] Create follower index UI form (elastic#27864) * Initial setup Follower Index form * Working form without client validation * Add client side validation for follower index * Add client validation to check if index already exist * Improve error message when leader index does not exist * Remove update method for follower index * Clear api error on field change * Fix i18n error * Update snapshots * [CCR] Add pause, resume, and unfollow actions for follower indices (elastic#28305) * Add pause and resume follower index routes * Add unfollow route * Add api methods for new routes * Adjust routes to have bulk capabilities, add corresponding actions * Refresh list after pausing/resuming, remove items after unfollowing * First pass at UI for pause and unfollow (and resume, but that is not visible due to ES stats response) * Handle additional conditions needed for unfollowing leader index, add placeholder code to deduce paused status * PR feedback * [CCR] Advanced settings UI for follower indices (elastic#28267) * Add client side validation of advanced settings form * Move form entry row to separate component * Add server side serialization for advanced settings * Ignore advanced settings input when that section is hidden. - Cache and restore input when the section is shown again. * [CCR] Show remote cluster validation in CCR forms, and add edit follower index (elastic#28778) * [CCR] Advanced settings component * Remove preview active on toggle settings * Add client side validation of advanced settings form * Move form entry row to separate component * Add title to panel * Add i18n translation of advanced settings * Update Follower index form with toggle for advanced settings * Add server side serialisation for advanced settings * Make code review changes * Fix test: mock constant dependency * Add section to edit follower index * Show confirm modal before updating follower index * Add edit icon in table + update server endpoint to pause / resume * [CCR] Show remote cluster validation in follower index form & auto-follow pattern form * PR feedback, cleanup form sizes, add redirect to edit remote cluster * Fix routing, remove unused code, adjust auto follow pattern edit loading error page * Adjust error messages and make remote cluster not found edit page the same * Fix functionality as result of merge * Fix validation, reorder actions, fix tests, and address feedback * PR feedback and fix validation pt 2 * Adjust remote cluster validation * Fix i18n * Fix api error not showing on add follower form * [CCR] Integrate new follower index info ES API (elastic#29153) * Integrate new follower index info ES API * Collate data from follower stats and info apis when retrieving all followers and single follower * Add follower settings info to detail panel * Add paused/active UI state * Surface follower default settings to UI * Adjust tests * Address PR feedback * Update snapshots * [CCR] Surface license errors in-app and refine permissions error UI. (elastic#29228) * Fix camelcasing bug in XPackInfo. * Silently swallow API error when checking for index name availability. * Fix typo in followerIndexForm fatal error. * Add permissions check before allowing user to access the app. * Refine wording of CCR permission denied page, to specify cluster privileges. (elastic#29533) * [CCR] Improve form error handling and general UX (elastic#29419) * Remove unnecessary eslint disable-line * [CCR] Implement Advanced Settings design feedback (elastic#29543) * Use EuiSwitch to toggle advanced settings in Create Follower Index form. * Move 'optional' from each Advanced Setting field to the section heading. * Change Advanced Settings switch label and description to emphasize that you can customize them or use the defaults. * Prepopulate Advanced Settings fields with default values. * When editing a follower index, check if advanced settings have been edited and open them if so. * Add 'Reset to default' button below advanced settings fields if their values are different than the default. * Remove 'Default' copy from Advanced Settings descriptions. * Simplify toggleAdvancedSettings function, add comments, and fix React console error. * [CCR] Follower index list fixes from design feedback (elastic#29484) * Delete remote cluster settings before updating * Fix detail panel z-index * Remove default descriptor from follower index detail panel setting values * Follower index confirm action copy adjustments * Change z-index styling to use EUI vars * [CCR] Improve remote clusters test coverage (elastic#29487) * Add Jest test for RemoteClusterForm validation state. * Extract validation functions out of RemoteClusterForm and add unit tests. - Return null instead of undefined from validators. * Add unit tests for different types of remote clusters in RemoteClusterTable. * Add unit test for RemoteClusterList empty prompt. * Add tests verifying behavior for row link, row delete button, and detail panel delete button. - Use getRouterLinkProps to assign onClick and href to edit buttons in row and detail panel. * [CCR] Adjust spacing around descriptions in list views, link to transport port docs, etc (elastic#29789) * Adjust spacing around description around descriptions in list views so that it's even on top and bottom. * Add link to transport port docs from Remote Cluster form. * Move 'View in Index Management' link from the detail panel body into the footer. * Re-order follower index form sections: remote cluster, leader index, follower index. (elastic#29885) * Fix deep-linking to follower index after creating/updating it. (elastic#29865) * [CCR] Copy edits (elastic#29676) * Use 'Resume/pause data replication' in context menu and row actions. * Update copy of 'Update' confirm modal for a paused follower index. * Update copy of 'Update' confirm modal for an active follower index. * Update copy of 'Pause data replication' confirm modal. * Update copy of 'Resume data replication' confirm modal. * Update copy for permissions check. * Update copy of table empty state. * Update copy around tables. * Update form copy. * Update copy for RemoteClustersFormField callouts. * Convert 'data replication' -> 'replication'. * Update copy for Unfollow confirm modal. * Update copy for form API error and Auto-follow Patterns table. * Update form save button labels to be 'Create' and 'Update'. * Move API errors to bottom of form, into same position as sync validation errors. Remove spacer from SectionError implementation. * [CCR] Open index after unfollowing leader (elastic#29887) * Open index after unfollowing leader, fix some variable names * Fix typo * Add comment * [CCR] IE and Screen reader accesibility (elastic#29731) * Fix api endpoit for auto-follow stats * Prevent letter wrapping in IE for the Remote cluster "connection" table column * Move inline style to CSS class to fix IE flex bug * [CCR] Add callout to paused follower index detail panel (elastic#30013) * Add callout to paused follower index detail panel * Update copy * Skip call to ccr stats api if follower index is paused (elastic#30027) * [CCR] Add integration tests for follower indices (elastic#30064) * [CCR] Add integration tests for follower indices * Import advanced settings value from app constants

* [CCR] Refactor redux for Auto-follow pattern detail panel (#27491) * [CCR] Refactor redux for Auto-follow pattern detail panel * [CCR] Small refactor * [CCR] Change to present tense * [CCR] Display auto-follow pattern name even if it does not exist * [CCR] Use href to edit auto-follow pattern + remove middelware to update "pattern" query params * [CCR] Fix navigation back bug + set 2 ids for detail and edit an auto-follow pattern * [CCR] Replace api middleware with redux-thunk action * [CCR] Show detail footer close button even when cluster is not valid * [CCR] Add endpoints for fetching and creating follower indices (#27646) * Add GET /follower_indices endpoint with deserialization logic and tests. * Add POST /follower_indices endpoint with serialization logic and tests. * [CCR] Add unit tests for RemoteClusterForm, RemoteClusterList, and RemoteClusterTable (#27647) * Use componentDidUpdate instead of getDerivedStateFromProps. * Add unit tests for RemoteClusterForm, RemoteClusterList, and RemoteClusterTable. * Add jest mock for eui `makeId()` utility and get deterministic aria IDs for snapshots * Update snapshot for Remote Cluster list test * [CCR] Follower indices table and detail panel (#27804) * Store for follower indices * Initial work for follower indices table and detail panel * Fix load auto-follow stats load as middleware was removed * [CCR] Create follower index UI form (#27864) * Initial setup Follower Index form * Working form without client validation * Add client side validation for follower index * Add client validation to check if index already exist * Improve error message when leader index does not exist * Remove update method for follower index * Clear api error on field change * Fix i18n error * Update snapshots * [CCR] Add pause, resume, and unfollow actions for follower indices (#28305) * Add pause and resume follower index routes * Add unfollow route * Add api methods for new routes * Adjust routes to have bulk capabilities, add corresponding actions * Refresh list after pausing/resuming, remove items after unfollowing * First pass at UI for pause and unfollow (and resume, but that is not visible due to ES stats response) * Handle additional conditions needed for unfollowing leader index, add placeholder code to deduce paused status * PR feedback * [CCR] Advanced settings UI for follower indices (#28267) * Add client side validation of advanced settings form * Move form entry row to separate component * Add server side serialization for advanced settings * Ignore advanced settings input when that section is hidden. - Cache and restore input when the section is shown again. * [CCR] Show remote cluster validation in CCR forms, and add edit follower index (#28778) * [CCR] Advanced settings component * Remove preview active on toggle settings * Add client side validation of advanced settings form * Move form entry row to separate component * Add title to panel * Add i18n translation of advanced settings * Update Follower index form with toggle for advanced settings * Add server side serialisation for advanced settings * Make code review changes * Fix test: mock constant dependency * Add section to edit follower index * Show confirm modal before updating follower index * Add edit icon in table + update server endpoint to pause / resume * [CCR] Show remote cluster validation in follower index form & auto-follow pattern form * PR feedback, cleanup form sizes, add redirect to edit remote cluster * Fix routing, remove unused code, adjust auto follow pattern edit loading error page * Adjust error messages and make remote cluster not found edit page the same * Fix functionality as result of merge * Fix validation, reorder actions, fix tests, and address feedback * PR feedback and fix validation pt 2 * Adjust remote cluster validation * Fix i18n * Fix api error not showing on add follower form * [CCR] Integrate new follower index info ES API (#29153) * Integrate new follower index info ES API * Collate data from follower stats and info apis when retrieving all followers and single follower * Add follower settings info to detail panel * Add paused/active UI state * Surface follower default settings to UI * Adjust tests * Address PR feedback * Update snapshots * [CCR] Surface license errors in-app and refine permissions error UI. (#29228) * Fix camelcasing bug in XPackInfo. * Silently swallow API error when checking for index name availability. * Fix typo in followerIndexForm fatal error. * Add permissions check before allowing user to access the app. * Refine wording of CCR permission denied page, to specify cluster privileges. (#29533) * [CCR] Improve form error handling and general UX (#29419) * Remove unnecessary eslint disable-line * [CCR] Implement Advanced Settings design feedback (#29543) * Use EuiSwitch to toggle advanced settings in Create Follower Index form. * Move 'optional' from each Advanced Setting field to the section heading. * Change Advanced Settings switch label and description to emphasize that you can customize them or use the defaults. * Prepopulate Advanced Settings fields with default values. * When editing a follower index, check if advanced settings have been edited and open them if so. * Add 'Reset to default' button below advanced settings fields if their values are different than the default. * Remove 'Default' copy from Advanced Settings descriptions. * Simplify toggleAdvancedSettings function, add comments, and fix React console error. * [CCR] Follower index list fixes from design feedback (#29484) * Delete remote cluster settings before updating * Fix detail panel z-index * Remove default descriptor from follower index detail panel setting values * Follower index confirm action copy adjustments * Change z-index styling to use EUI vars * [CCR] Improve remote clusters test coverage (#29487) * Add Jest test for RemoteClusterForm validation state. * Extract validation functions out of RemoteClusterForm and add unit tests. - Return null instead of undefined from validators. * Add unit tests for different types of remote clusters in RemoteClusterTable. * Add unit test for RemoteClusterList empty prompt. * Add tests verifying behavior for row link, row delete button, and detail panel delete button. - Use getRouterLinkProps to assign onClick and href to edit buttons in row and detail panel. * [CCR] Adjust spacing around descriptions in list views, link to transport port docs, etc (#29789) * Adjust spacing around description around descriptions in list views so that it's even on top and bottom. * Add link to transport port docs from Remote Cluster form. * Move 'View in Index Management' link from the detail panel body into the footer. * Re-order follower index form sections: remote cluster, leader index, follower index. (#29885) * Fix deep-linking to follower index after creating/updating it. (#29865) * [CCR] Copy edits (#29676) * Use 'Resume/pause data replication' in context menu and row actions. * Update copy of 'Update' confirm modal for a paused follower index. * Update copy of 'Update' confirm modal for an active follower index. * Update copy of 'Pause data replication' confirm modal. * Update copy of 'Resume data replication' confirm modal. * Update copy for permissions check. * Update copy of table empty state. * Update copy around tables. * Update form copy. * Update copy for RemoteClustersFormField callouts. * Convert 'data replication' -> 'replication'. * Update copy for Unfollow confirm modal. * Update copy for form API error and Auto-follow Patterns table. * Update form save button labels to be 'Create' and 'Update'. * Move API errors to bottom of form, into same position as sync validation errors. Remove spacer from SectionError implementation. * [CCR] Open index after unfollowing leader (#29887) * Open index after unfollowing leader, fix some variable names * Fix typo * Add comment * [CCR] IE and Screen reader accesibility (#29731) * Fix api endpoit for auto-follow stats * Prevent letter wrapping in IE for the Remote cluster "connection" table column * Move inline style to CSS class to fix IE flex bug * [CCR] Add callout to paused follower index detail panel (#30013) * Add callout to paused follower index detail panel * Update copy * Skip call to ccr stats api if follower index is paused (#30027) * [CCR] Add integration tests for follower indices (#30064) * [CCR] Add integration tests for follower indices * Import advanced settings value from app constants

* [CCR] Follower index CRUD (#27936) * [CCR] Refactor redux for Auto-follow pattern detail panel (#27491) * [CCR] Refactor redux for Auto-follow pattern detail panel * [CCR] Small refactor * [CCR] Change to present tense * [CCR] Display auto-follow pattern name even if it does not exist * [CCR] Use href to edit auto-follow pattern + remove middelware to update "pattern" query params * [CCR] Fix navigation back bug + set 2 ids for detail and edit an auto-follow pattern * [CCR] Replace api middleware with redux-thunk action * [CCR] Show detail footer close button even when cluster is not valid * [CCR] Add endpoints for fetching and creating follower indices (#27646) * Add GET /follower_indices endpoint with deserialization logic and tests. * Add POST /follower_indices endpoint with serialization logic and tests. * [CCR] Add unit tests for RemoteClusterForm, RemoteClusterList, and RemoteClusterTable (#27647) * Use componentDidUpdate instead of getDerivedStateFromProps. * Add unit tests for RemoteClusterForm, RemoteClusterList, and RemoteClusterTable. * Add jest mock for eui `makeId()` utility and get deterministic aria IDs for snapshots * Update snapshot for Remote Cluster list test * [CCR] Follower indices table and detail panel (#27804) * Store for follower indices * Initial work for follower indices table and detail panel * Fix load auto-follow stats load as middleware was removed * [CCR] Create follower index UI form (#27864) * Initial setup Follower Index form * Working form without client validation * Add client side validation for follower index * Add client validation to check if index already exist * Improve error message when leader index does not exist * Remove update method for follower index * Clear api error on field change * Fix i18n error * Update snapshots * [CCR] Add pause, resume, and unfollow actions for follower indices (#28305) * Add pause and resume follower index routes * Add unfollow route * Add api methods for new routes * Adjust routes to have bulk capabilities, add corresponding actions * Refresh list after pausing/resuming, remove items after unfollowing * First pass at UI for pause and unfollow (and resume, but that is not visible due to ES stats response) * Handle additional conditions needed for unfollowing leader index, add placeholder code to deduce paused status * PR feedback * [CCR] Advanced settings UI for follower indices (#28267) * Add client side validation of advanced settings form * Move form entry row to separate component * Add server side serialization for advanced settings * Ignore advanced settings input when that section is hidden. - Cache and restore input when the section is shown again. * [CCR] Show remote cluster validation in CCR forms, and add edit follower index (#28778) * [CCR] Advanced settings component * Remove preview active on toggle settings * Add client side validation of advanced settings form * Move form entry row to separate component * Add title to panel * Add i18n translation of advanced settings * Update Follower index form with toggle for advanced settings * Add server side serialisation for advanced settings * Make code review changes * Fix test: mock constant dependency * Add section to edit follower index * Show confirm modal before updating follower index * Add edit icon in table + update server endpoint to pause / resume * [CCR] Show remote cluster validation in follower index form & auto-follow pattern form * PR feedback, cleanup form sizes, add redirect to edit remote cluster * Fix routing, remove unused code, adjust auto follow pattern edit loading error page * Adjust error messages and make remote cluster not found edit page the same * Fix functionality as result of merge * Fix validation, reorder actions, fix tests, and address feedback * PR feedback and fix validation pt 2 * Adjust remote cluster validation * Fix i18n * Fix api error not showing on add follower form * [CCR] Integrate new follower index info ES API (#29153) * Integrate new follower index info ES API * Collate data from follower stats and info apis when retrieving all followers and single follower * Add follower settings info to detail panel * Add paused/active UI state * Surface follower default settings to UI * Adjust tests * Address PR feedback * Update snapshots * [CCR] Surface license errors in-app and refine permissions error UI. (#29228) * Fix camelcasing bug in XPackInfo. * Silently swallow API error when checking for index name availability. * Fix typo in followerIndexForm fatal error. * Add permissions check before allowing user to access the app. * Refine wording of CCR permission denied page, to specify cluster privileges. (#29533) * [CCR] Improve form error handling and general UX (#29419) * Remove unnecessary eslint disable-line * [CCR] Implement Advanced Settings design feedback (#29543) * Use EuiSwitch to toggle advanced settings in Create Follower Index form. * Move 'optional' from each Advanced Setting field to the section heading. * Change Advanced Settings switch label and description to emphasize that you can customize them or use the defaults. * Prepopulate Advanced Settings fields with default values. * When editing a follower index, check if advanced settings have been edited and open them if so. * Add 'Reset to default' button below advanced settings fields if their values are different than the default. * Remove 'Default' copy from Advanced Settings descriptions. * Simplify toggleAdvancedSettings function, add comments, and fix React console error. * [CCR] Follower index list fixes from design feedback (#29484) * Delete remote cluster settings before updating * Fix detail panel z-index * Remove default descriptor from follower index detail panel setting values * Follower index confirm action copy adjustments * Change z-index styling to use EUI vars * [CCR] Improve remote clusters test coverage (#29487) * Add Jest test for RemoteClusterForm validation state. * Extract validation functions out of RemoteClusterForm and add unit tests. - Return null instead of undefined from validators. * Add unit tests for different types of remote clusters in RemoteClusterTable. * Add unit test for RemoteClusterList empty prompt. * Add tests verifying behavior for row link, row delete button, and detail panel delete button. - Use getRouterLinkProps to assign onClick and href to edit buttons in row and detail panel. * [CCR] Adjust spacing around descriptions in list views, link to transport port docs, etc (#29789) * Adjust spacing around description around descriptions in list views so that it's even on top and bottom. * Add link to transport port docs from Remote Cluster form. * Move 'View in Index Management' link from the detail panel body into the footer. * Re-order follower index form sections: remote cluster, leader index, follower index. (#29885) * Fix deep-linking to follower index after creating/updating it. (#29865) * [CCR] Copy edits (#29676) * Use 'Resume/pause data replication' in context menu and row actions. * Update copy of 'Update' confirm modal for a paused follower index. * Update copy of 'Update' confirm modal for an active follower index. * Update copy of 'Pause data replication' confirm modal. * Update copy of 'Resume data replication' confirm modal. * Update copy for permissions check. * Update copy of table empty state. * Update copy around tables. * Update form copy. * Update copy for RemoteClustersFormField callouts. * Convert 'data replication' -> 'replication'. * Update copy for Unfollow confirm modal. * Update copy for form API error and Auto-follow Patterns table. * Update form save button labels to be 'Create' and 'Update'. * Move API errors to bottom of form, into same position as sync validation errors. Remove spacer from SectionError implementation. * [CCR] Open index after unfollowing leader (#29887) * Open index after unfollowing leader, fix some variable names * Fix typo * Add comment * [CCR] IE and Screen reader accesibility (#29731) * Fix api endpoit for auto-follow stats * Prevent letter wrapping in IE for the Remote cluster "connection" table column * Move inline style to CSS class to fix IE flex bug * [CCR] Add callout to paused follower index detail panel (#30013) * Add callout to paused follower index detail panel * Update copy * Skip call to ccr stats api if follower index is paused (#30027) * [CCR] Add integration tests for follower indices (#30064) * [CCR] Add integration tests for follower indices * Import advanced settings value from app constants * Disable flaky follower indices API integration tests.

[CCR] Refactor redux for Auto-follow pattern detail panel

43db32e

sebelga requested review from cjcenizal and jen-huang December 19, 2018 13:39

[CCR] Small refactor

a7e764a

sebelga changed the base branch from master to feature/ccr December 19, 2018 15:48

cjcenizal added Feature:CCR and Remote Clusters Team:Kibana Management Dev Tools, Index Management, Upgrade Assistant, ILM, Ingest Node Pipelines, and more labels Dec 19, 2018

cjcenizal previously requested changes Dec 19, 2018

View reviewed changes

sebelga added 2 commits December 20, 2018 09:27

[CCR] Change to present tense

d173c56

[CCR] Display auto-follow pattern name even if it does not exist

f5df213

[CCR] Use href to edit auto-follow pattern + remove middelware to upd…

ae7947e

…ate "pattern" query params

Merge branch 'feature/ccr' into feature/ccr_refactor_redux

e33a410

cjcenizal reviewed Dec 20, 2018

View reviewed changes

sebelga added 2 commits December 21, 2018 09:22

[CCR] Fix navigation back bug + set 2 ids for detail and edit an auto…

591a536

…-follow pattern

[CCR] Replace api middleware with redux-thunk action

0c4af91

sebelga added 2 commits December 21, 2018 09:47

Merge branch 'feature/ccr' into feature/ccr_refactor_redux

dd4fcbb

[CCR] Show detail footer close button even when cluster is not valid

3d0f446

sebelga merged commit e958eee into elastic:feature/ccr Dec 21, 2018

sebelga deleted the feature/ccr_refactor_redux branch December 21, 2018 13:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[CCR] Refactor redux for Auto-follow pattern detail panel #27491

[CCR] Refactor redux for Auto-follow pattern detail panel #27491

sebelga commented Dec 19, 2018 •

edited

Loading

elasticmachine commented Dec 19, 2018

elasticmachine commented Dec 19, 2018

elasticmachine commented Dec 19, 2018

elasticmachine commented Dec 19, 2018

cjcenizal left a comment

cjcenizal Dec 19, 2018

sebelga Dec 20, 2018 •

edited

Loading

cjcenizal Dec 20, 2018

cjcenizal Dec 19, 2018

sebelga Dec 20, 2018

cjcenizal Dec 19, 2018 •

edited

Loading

sebelga Dec 20, 2018 •

edited

Loading

cjcenizal Dec 19, 2018

sebelga Dec 20, 2018 •

edited

Loading

elasticmachine commented Dec 20, 2018

sebelga commented Dec 20, 2018

elasticmachine commented Dec 20, 2018

sebelga commented Dec 20, 2018

elasticmachine commented Dec 20, 2018

elasticmachine commented Dec 20, 2018

cjcenizal left a comment

cjcenizal Dec 20, 2018

sebelga Dec 21, 2018

cjcenizal Dec 20, 2018

sebelga Dec 21, 2018

cjcenizal Dec 20, 2018 •

edited

Loading

sebelga Dec 21, 2018

cjcenizal Dec 20, 2018

cjcenizal Dec 20, 2018

sebelga Dec 21, 2018

sebelga commented Dec 21, 2018

elasticmachine commented Dec 21, 2018

sebelga commented Dec 21, 2018

		}

		static getDerivedStateFromProps({ autoFollowPatternId }, { lastAutoFollowPatternId }) {

[CCR] Refactor redux for Auto-follow pattern detail panel #27491

[CCR] Refactor redux for Auto-follow pattern detail panel #27491

Conversation

sebelga commented Dec 19, 2018 • edited Loading

elasticmachine commented Dec 19, 2018

💚 Build Succeeded

elasticmachine commented Dec 19, 2018

💚 Build Succeeded

elasticmachine commented Dec 19, 2018

💚 Build Succeeded

elasticmachine commented Dec 19, 2018

cjcenizal left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sebelga Dec 20, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cjcenizal Dec 19, 2018 • edited Loading

Choose a reason for hiding this comment

sebelga Dec 20, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sebelga Dec 20, 2018 • edited Loading

Choose a reason for hiding this comment

elasticmachine commented Dec 20, 2018

💚 Build Succeeded

sebelga commented Dec 20, 2018

elasticmachine commented Dec 20, 2018

💔 Build Failed

sebelga commented Dec 20, 2018

elasticmachine commented Dec 20, 2018

💔 Build Failed

elasticmachine commented Dec 20, 2018

💔 Build Failed

cjcenizal left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cjcenizal Dec 20, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sebelga commented Dec 21, 2018

elasticmachine commented Dec 21, 2018

💚 Build Succeeded

sebelga commented Dec 21, 2018

sebelga commented Dec 19, 2018 •

edited

Loading

sebelga Dec 20, 2018 •

edited

Loading

cjcenizal Dec 19, 2018 •

edited

Loading

sebelga Dec 20, 2018 •

edited

Loading

sebelga Dec 20, 2018 •

edited

Loading

cjcenizal Dec 20, 2018 •

edited

Loading