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

Add uri decode to es_ui_shared and fix navigation issues with special characters #80835

Merged
merged 15 commits into from
Oct 28, 2020

Conversation

yuliacech
Copy link
Contributor

@yuliacech yuliacech commented Oct 16, 2020

Summary

Fixes #80661
This PR fixes several issues when navigating to Index Management pages with special characters in names:

  • viewing data stream in detail flyout by clicking on its name in the table
  • navigating to backing indices of a data stream (opens indices tab with data stream filter activated)
  • editing and saving an index template
  • navigating to Index Management from ILM filtering indices managed by a policy

Code changes

  • Double uri encoding (encodeURI + encodeURIComponent) for all links containing special characters (especially with dynamic resource names)
  • All components getting match params from react router need attemptToURIDecode to safely decode values.
  • When using filter in tables, its value needs to be enclosed in double quotes to be safely used with special characters (data_stream="%my_data_stream")
  • Encoding data stream name when sending ES requests

How to test

  • Data streams
Dev Tools commands
PUT /_ilm/policy/my-data-stream-policy
{
  "policy": {
    "phases": {
      "hot": {
        "actions": {
          "rollover": {
            "max_size": "25GB"
          }
        }
      },
      "delete": {
        "min_age": "30d",
        "actions": {
          "delete": {}
        }
      }
    }
  }
}

PUT /_index_template/my-data-stream-template
{
  "index_patterns": [ "%my-data-stream*" ],
  "data_stream": { },
  "priority": 200,
  "template": {
    "settings": {
      "index.lifecycle.name": "my-data-stream-policy"
    }
  }
}

POST /%25my-data-stream/_doc/
{
  "@timestamp": "2020-12-06T11:04:05.000Z",
  "user": {
    "id": "vlb44hny"
  },
  "message": "Login attempt failed"
}
  • Index template and index lifecycle policy with a special character can be created via UI

Release Note

Fixes issues in Index Management and ILM when resources have special characters in names

@yuliacech
Copy link
Contributor Author

@elasticmachine merge upstream

@yuliacech yuliacech changed the title Add uri decode to es_ui_shared and fix data stream issue with % name Add uri decode to es_ui_shared and fix navigation issues with special characters Oct 20, 2020
@yuliacech
Copy link
Contributor Author

@elasticmachine merge upstream

@yuliacech yuliacech added Feature:Index Management Index and index templates UI Team:Kibana Management Dev Tools, Index Management, Upgrade Assistant, ILM, Ingest Node Pipelines, and more v7.11.0 v8.0.0 Feature:ILM release_note:fix labels Oct 20, 2020
@yuliacech yuliacech marked this pull request as ready for review October 20, 2020 16:07
@yuliacech yuliacech requested a review from a team as a code owner October 20, 2020 16:07
@elasticmachine
Copy link
Contributor

Pinging @elastic/es-ui (Team:Elasticsearch UI)

@yuliacech yuliacech requested a review from sebelga October 21, 2020 12:04
@yuliacech
Copy link
Contributor Author

@elasticmachine merge upstream

1 similar comment
@yuliacech
Copy link
Contributor Author

@elasticmachine merge upstream

Copy link
Contributor

@sebelga sebelga left a comment

Choose a reason for hiding this comment

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

Great job @yuliacech ! Thanks for looking into this, I've tested all the scenario and it all works correctly except in one scenario.

I followed the steps from #80661

When I am in the indices list table, viewing the backing index

Screenshot 2020-10-22 at 13 01 38

When I click on the data stream, the app crashes

Screenshot 2020-10-22 at 13 01 58

ctx.core.elasticsearch.legacy.client.callAsCurrentUser('transport.request', {
path: `/_data_stream/${name}/_stats`,
path: `/_data_stream/${encodeURIComponent(name)}`,
Copy link
Contributor

Choose a reason for hiding this comment

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

I am surprised that we need to use transport.request here and not in other places (e.g. "cross_cluster_replication" plugin which I do think also allow the same special chars.).
Not sure how you tested here but could you do the same test with a follower index or auto_follow pattern?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

You are right, @sebelga ! I reverted the getDataStream route back to using custom client. As I understand it: the custom client adds encoding automatically when provided with a parameter. When using request (like here for stats), we need to encode manually.

@yuliacech
Copy link
Contributor Author

Thanks a lot for your review, @sebelga! I fixed the navigation from indices back to data streams, nice catch :D
Also, tested cross cluster replication and it's a bit broken when used with special characters, I'll create an issue to track that.

@yuliacech
Copy link
Contributor Author

@elasticmachine merge upstream

1 similar comment
@yuliacech
Copy link
Contributor Author

@elasticmachine merge upstream

* under the License.
*/

export const attemptToURIDecode = (value: string) => {
Copy link
Contributor

Choose a reason for hiding this comment

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

Can we add some unit tests for this function? I'd like to see cases that clarify the nuance behind result being overwritten once on line 23 and then immediately overwritten again on line 24. I'd also expect the test cases to communicate the use cases for this function to someone who's wondering when and how they should use it.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks for review, @cjcenizal ! I added a comment when to use this function and tests with examples. I deleted decodeURI since I found out that it's already done in react router.

@yuliacech
Copy link
Contributor Author

@elasticmachine merge upstream

@yuliacech
Copy link
Contributor Author

@elasticmachine merge upstream

@kibanamachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

@kbn/optimizer bundle module count

id before after diff
esUiShared 207 208 +1
indexManagement 509 508 -1
ingestPipelines 493 491 -2
total -2

async chunks size

id before after diff
indexLifecycleManagement 312.1KB 312.1KB +5.0B
indexManagement 1.6MB 1.6MB -324.0B
ingestPipelines 813.1KB 812.9KB -136.0B
total -455.0B

page load bundle size

id before after diff
esUiShared 303.2KB 303.5KB +241.0B
indexManagement 122.8KB 122.4KB -356.0B
ingestPipelines 41.9KB 42.0KB +153.0B
total +38.0B

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

Copy link
Contributor

@sebelga sebelga left a comment

Choose a reason for hiding this comment

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

Thanks for making the changes @yuliacech ! Tested locally and works as expected 👍

@yuliacech yuliacech merged commit 2a94139 into elastic:master Oct 28, 2020
yuliacech added a commit to yuliacech/kibana that referenced this pull request Oct 28, 2020
… characters (elastic#80835)

* Add uri decode to es_ui_shared and fix data stream issue with % name

* Add a test for data streams tab opened for name with a dollar sign

* Import uri decode function from es_ui_shared and fix navigation issues for filters

* Add tests for data streams with special characters in name

* Revert react router navigate changes (is done in a separate PR)

* Reverting changes to dataManagement es client and get data stream api route

* Fix data stream name filter when activated from a url parameter

* Clean up for better consistency and fixes after
elastic#81664

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
yuliacech added a commit that referenced this pull request Oct 28, 2020
… characters (#80835) (#81897)

* Add uri decode to es_ui_shared and fix data stream issue with % name

* Add a test for data streams tab opened for name with a dollar sign

* Import uri decode function from es_ui_shared and fix navigation issues for filters

* Add tests for data streams with special characters in name

* Revert react router navigate changes (is done in a separate PR)

* Reverting changes to dataManagement es client and get data stream api route

* Fix data stream name filter when activated from a url parameter

* Clean up for better consistency and fixes after
#81664

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
gmmorris added a commit to gmmorris/kibana that referenced this pull request Oct 29, 2020
…kibana into alerts/convert-to-tm-intervals

* 'alerts/convert-to-tm-intervals' of github.com:gmmorris/kibana: (88 commits)
  fixed jest
  APM Experiments settings (elastic#81554)
  [Resolver] Enable resolver test plugin tests (elastic#81339)
  Add TS project references for inspector  (elastic#81792)
  Add uri decode to es_ui_shared and fix navigation issues with special characters (elastic#80835)
  [Fleet] Rename ingestManager translations fleet (elastic#81837)
  [Logs UI] Transmit and render array field values in log entries (elastic#81385)
  Audit Logging: use the original url (elastic#81282)
  [User experience] Fix JS error rate (elastic#81512)
  [UX] Add median/percentile info in titles (elastic#79824)
  Support export for SO with circular refs (elastic#81582)
  Get rid of  global types (elastic#81739)
  [APM] Fix precommit script (elastic#81594)
  skips overview tests (elastic#81877)
  [Security Solution][Case] Fix connector's labeling (elastic#81824)
  Added simple test, which only covers successful case when edit happened right after task was complete previous execution
  [Maps] Fix EMS test (elastic#81856)
  [Security Solutions][Detections] - Fix bug, last response not showing for disabled rules (elastic#81783)
  skip flaky suite (elastic#81853)
  Fixed type checks and unit tests
  ...
@yuliacech yuliacech deleted the url_decode branch December 3, 2020 10:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature:ILM Feature:Index Management Index and index templates UI release_note:fix Team:Kibana Management Dev Tools, Index Management, Upgrade Assistant, ILM, Ingest Node Pipelines, and more v7.11.0 v8.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Index Management] Error when a data stream contains a % character (dollar sign)
5 participants