[Security Solution][DQD] Add historical results tour guide #195971
Assignees
Labels
8.16 candidate
Feature:Data Health Quality
Data health quality dashboard and related features
Team:Threat Hunting:Explore
Team:Threat Hunting
Security Solution Threat Hunting Team
Comments
kapral18
added
8.16 candidate
and removed
needs-team
kapral18
added
Team:Threat Hunting
|
Pinging @elastic/security-threat-hunting (Team:Threat Hunting) |
|
Pinging @elastic/security-threat-hunting-explore (Team:Threat Hunting:Explore) |
kapral18
added a commit
to kapral18/kibana
that referenced
this issue
Oct 15, 2024
kapral18
added a commit
that referenced
this issue
Oct 15, 2024
addresses #195971 This PR adds missing new historical results feature tour guide. ## Tour guide features: - ability to maintain visual presence while collapsing accordions in list-view - move from list-view to flyout view and back - seamlessly integrates with existing opening flyout and history tab functionality ## PR decisions with explanation: - data-tour-element has been introduced on select elements (like first actions of each first row) to avoid polluting every single element with data-test-subj. This way it's imho specific and semantically more clear what the elements are for. - early on I tried to control the anchoring with refs but some eui elements don't allow passing refs like EuiTab, so instead a more simpler and straightforward approach with dom selectors has been chosen - localStorage key name has been picked in accordance with other instances of usage `securitySolution.dataQualityDashboard.historicalResultsTour.v8.16.isActive` the name includes the full domain + the version when it's introduced. And since this tour step is a single step there is no need to stringify an object with `isTourActive` in and it's much simpler to just bake the activity state into the name and make the value just a boolean. ## UI Demo ### Anchor reposition demo (listview + flyout) https://github.com/user-attachments/assets/0f961c51-0e36-48ca-aab4-bef3b0d1269e ### List view tour guide try it + reload demo https://github.com/user-attachments/assets/ca1f5fda-ee02-4a48-827c-91df757a8ddf ### FlyOut Try It + reload demo https://github.com/user-attachments/assets/d0801ac3-1ed1-4e64-9d6b-3140b8402bdf ### Manual history tab selection path + reload demo https://github.com/user-attachments/assets/34dbb447-2fd6-4dc0-a4f5-682c9c65cc8b ### Manual open history view path + reload demo https://github.com/user-attachments/assets/945dd042-fc12-476e-8d23-f48c9ded9f65 ### Dismiss list view tour guide + reload demo https://github.com/user-attachments/assets/d20d1416-827f-46f2-9161-a3c0a8cbd932 ### Dismiss FlyOut tour guide + reload demo https://github.com/user-attachments/assets/8f085f59-20a9-49f0-b5b3-959c4719f5cb ### Serverless empty pattern handling + reposition demo https://github.com/user-attachments/assets/4af5939e-663c-4439-a3fc-deff2d4de7e4
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this issue
Oct 15, 2024
…96127) addresses elastic#195971 This PR adds missing new historical results feature tour guide. ## Tour guide features: - ability to maintain visual presence while collapsing accordions in list-view - move from list-view to flyout view and back - seamlessly integrates with existing opening flyout and history tab functionality ## PR decisions with explanation: - data-tour-element has been introduced on select elements (like first actions of each first row) to avoid polluting every single element with data-test-subj. This way it's imho specific and semantically more clear what the elements are for. - early on I tried to control the anchoring with refs but some eui elements don't allow passing refs like EuiTab, so instead a more simpler and straightforward approach with dom selectors has been chosen - localStorage key name has been picked in accordance with other instances of usage `securitySolution.dataQualityDashboard.historicalResultsTour.v8.16.isActive` the name includes the full domain + the version when it's introduced. And since this tour step is a single step there is no need to stringify an object with `isTourActive` in and it's much simpler to just bake the activity state into the name and make the value just a boolean. ## UI Demo ### Anchor reposition demo (listview + flyout) https://github.com/user-attachments/assets/0f961c51-0e36-48ca-aab4-bef3b0d1269e ### List view tour guide try it + reload demo https://github.com/user-attachments/assets/ca1f5fda-ee02-4a48-827c-91df757a8ddf ### FlyOut Try It + reload demo https://github.com/user-attachments/assets/d0801ac3-1ed1-4e64-9d6b-3140b8402bdf ### Manual history tab selection path + reload demo https://github.com/user-attachments/assets/34dbb447-2fd6-4dc0-a4f5-682c9c65cc8b ### Manual open history view path + reload demo https://github.com/user-attachments/assets/945dd042-fc12-476e-8d23-f48c9ded9f65 ### Dismiss list view tour guide + reload demo https://github.com/user-attachments/assets/d20d1416-827f-46f2-9161-a3c0a8cbd932 ### Dismiss FlyOut tour guide + reload demo https://github.com/user-attachments/assets/8f085f59-20a9-49f0-b5b3-959c4719f5cb ### Serverless empty pattern handling + reposition demo https://github.com/user-attachments/assets/4af5939e-663c-4439-a3fc-deff2d4de7e4 (cherry picked from commit c448593)
kibanamachine
added a commit
that referenced
this issue
Oct 16, 2024
…6127) (#196456) # Backport This will backport the following commits from `main` to `8.x`: - [[Security Solution][DQD] Add historical results tour guide (#196127)](#196127) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Karen Grigoryan","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-10-15T23:18:50Z","message":"[Security Solution][DQD] Add historical results tour guide (#196127)\n\naddresses #195971\r\n\r\nThis PR adds missing new historical results feature tour guide.\r\n\r\n## Tour guide features:\r\n- ability to maintain visual presence while collapsing accordions in\r\nlist-view\r\n- move from list-view to flyout view and back\r\n- seamlessly integrates with existing opening flyout and history tab\r\nfunctionality\r\n\r\n## PR decisions with explanation:\r\n- data-tour-element has been introduced on select elements (like first\r\nactions of each first row) to avoid polluting every single element with\r\ndata-test-subj. This way it's imho specific and semantically more clear\r\nwhat the elements are for.\r\n- early on I tried to control the anchoring with refs but some eui\r\nelements don't allow passing refs like EuiTab, so instead a more simpler\r\nand straightforward approach with dom selectors has been chosen\r\n- localStorage key name has been picked in accordance with other\r\ninstances of usage\r\n`securitySolution.dataQualityDashboard.historicalResultsTour.v8.16.isActive`\r\nthe name includes the full domain + the version when it's introduced.\r\nAnd since this tour step is a single step there is no need to stringify\r\nan object with `isTourActive` in and it's much simpler to just bake the\r\nactivity state into the name and make the value just a boolean.\r\n\r\n## UI Demo\r\n\r\n### Anchor reposition demo (listview + flyout)\r\n\r\nhttps://github.com/user-attachments/assets/0f961c51-0e36-48ca-aab4-bef3b0d1269e\r\n\r\n### List view tour guide try it + reload demo\r\n\r\nhttps://github.com/user-attachments/assets/ca1f5fda-ee02-4a48-827c-91df757a8ddf\r\n\r\n### FlyOut Try It + reload demo\r\n\r\nhttps://github.com/user-attachments/assets/d0801ac3-1ed1-4e64-9d6b-3140b8402bdf\r\n\r\n### Manual history tab selection path + reload demo\r\n\r\nhttps://github.com/user-attachments/assets/34dbb447-2fd6-4dc0-a4f5-682c9c65cc8b\r\n\r\n### Manual open history view path + reload demo\r\n\r\nhttps://github.com/user-attachments/assets/945dd042-fc12-476e-8d23-f48c9ded9f65\r\n\r\n### Dismiss list view tour guide + reload demo\r\n\r\nhttps://github.com/user-attachments/assets/d20d1416-827f-46f2-9161-a3c0a8cbd932\r\n\r\n### Dismiss FlyOut tour guide + reload demo\r\n\r\nhttps://github.com/user-attachments/assets/8f085f59-20a9-49f0-b5b3-959c4719f5cb\r\n\r\n### Serverless empty pattern handling + reposition demo\r\n\r\nhttps://github.com/user-attachments/assets/4af5939e-663c-4439-a3fc-deff2d4de7e4","sha":"c448593d546f6200b0d2d35bce043bef521f41a6","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["v9.0.0","Team:Threat Hunting","release_note:feature","Team:Threat Hunting:Explore","backport:prev-minor"],"title":"[Security Solution][DQD] Add historical results tour guide","number":196127,"url":"https://github.com/elastic/kibana/pull/196127","mergeCommit":{"message":"[Security Solution][DQD] Add historical results tour guide (#196127)\n\naddresses #195971\r\n\r\nThis PR adds missing new historical results feature tour guide.\r\n\r\n## Tour guide features:\r\n- ability to maintain visual presence while collapsing accordions in\r\nlist-view\r\n- move from list-view to flyout view and back\r\n- seamlessly integrates with existing opening flyout and history tab\r\nfunctionality\r\n\r\n## PR decisions with explanation:\r\n- data-tour-element has been introduced on select elements (like first\r\nactions of each first row) to avoid polluting every single element with\r\ndata-test-subj. This way it's imho specific and semantically more clear\r\nwhat the elements are for.\r\n- early on I tried to control the anchoring with refs but some eui\r\nelements don't allow passing refs like EuiTab, so instead a more simpler\r\nand straightforward approach with dom selectors has been chosen\r\n- localStorage key name has been picked in accordance with other\r\ninstances of usage\r\n`securitySolution.dataQualityDashboard.historicalResultsTour.v8.16.isActive`\r\nthe name includes the full domain + the version when it's introduced.\r\nAnd since this tour step is a single step there is no need to stringify\r\nan object with `isTourActive` in and it's much simpler to just bake the\r\nactivity state into the name and make the value just a boolean.\r\n\r\n## UI Demo\r\n\r\n### Anchor reposition demo (listview + flyout)\r\n\r\nhttps://github.com/user-attachments/assets/0f961c51-0e36-48ca-aab4-bef3b0d1269e\r\n\r\n### List view tour guide try it + reload demo\r\n\r\nhttps://github.com/user-attachments/assets/ca1f5fda-ee02-4a48-827c-91df757a8ddf\r\n\r\n### FlyOut Try It + reload demo\r\n\r\nhttps://github.com/user-attachments/assets/d0801ac3-1ed1-4e64-9d6b-3140b8402bdf\r\n\r\n### Manual history tab selection path + reload demo\r\n\r\nhttps://github.com/user-attachments/assets/34dbb447-2fd6-4dc0-a4f5-682c9c65cc8b\r\n\r\n### Manual open history view path + reload demo\r\n\r\nhttps://github.com/user-attachments/assets/945dd042-fc12-476e-8d23-f48c9ded9f65\r\n\r\n### Dismiss list view tour guide + reload demo\r\n\r\nhttps://github.com/user-attachments/assets/d20d1416-827f-46f2-9161-a3c0a8cbd932\r\n\r\n### Dismiss FlyOut tour guide + reload demo\r\n\r\nhttps://github.com/user-attachments/assets/8f085f59-20a9-49f0-b5b3-959c4719f5cb\r\n\r\n### Serverless empty pattern handling + reposition demo\r\n\r\nhttps://github.com/user-attachments/assets/4af5939e-663c-4439-a3fc-deff2d4de7e4","sha":"c448593d546f6200b0d2d35bce043bef521f41a6"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/196127","number":196127,"mergeCommit":{"message":"[Security Solution][DQD] Add historical results tour guide (#196127)\n\naddresses #195971\r\n\r\nThis PR adds missing new historical results feature tour guide.\r\n\r\n## Tour guide features:\r\n- ability to maintain visual presence while collapsing accordions in\r\nlist-view\r\n- move from list-view to flyout view and back\r\n- seamlessly integrates with existing opening flyout and history tab\r\nfunctionality\r\n\r\n## PR decisions with explanation:\r\n- data-tour-element has been introduced on select elements (like first\r\nactions of each first row) to avoid polluting every single element with\r\ndata-test-subj. This way it's imho specific and semantically more clear\r\nwhat the elements are for.\r\n- early on I tried to control the anchoring with refs but some eui\r\nelements don't allow passing refs like EuiTab, so instead a more simpler\r\nand straightforward approach with dom selectors has been chosen\r\n- localStorage key name has been picked in accordance with other\r\ninstances of usage\r\n`securitySolution.dataQualityDashboard.historicalResultsTour.v8.16.isActive`\r\nthe name includes the full domain + the version when it's introduced.\r\nAnd since this tour step is a single step there is no need to stringify\r\nan object with `isTourActive` in and it's much simpler to just bake the\r\nactivity state into the name and make the value just a boolean.\r\n\r\n## UI Demo\r\n\r\n### Anchor reposition demo (listview + flyout)\r\n\r\nhttps://github.com/user-attachments/assets/0f961c51-0e36-48ca-aab4-bef3b0d1269e\r\n\r\n### List view tour guide try it + reload demo\r\n\r\nhttps://github.com/user-attachments/assets/ca1f5fda-ee02-4a48-827c-91df757a8ddf\r\n\r\n### FlyOut Try It + reload demo\r\n\r\nhttps://github.com/user-attachments/assets/d0801ac3-1ed1-4e64-9d6b-3140b8402bdf\r\n\r\n### Manual history tab selection path + reload demo\r\n\r\nhttps://github.com/user-attachments/assets/34dbb447-2fd6-4dc0-a4f5-682c9c65cc8b\r\n\r\n### Manual open history view path + reload demo\r\n\r\nhttps://github.com/user-attachments/assets/945dd042-fc12-476e-8d23-f48c9ded9f65\r\n\r\n### Dismiss list view tour guide + reload demo\r\n\r\nhttps://github.com/user-attachments/assets/d20d1416-827f-46f2-9161-a3c0a8cbd932\r\n\r\n### Dismiss FlyOut tour guide + reload demo\r\n\r\nhttps://github.com/user-attachments/assets/8f085f59-20a9-49f0-b5b3-959c4719f5cb\r\n\r\n### Serverless empty pattern handling + reposition demo\r\n\r\nhttps://github.com/user-attachments/assets/4af5939e-663c-4439-a3fc-deff2d4de7e4","sha":"c448593d546f6200b0d2d35bce043bef521f41a6"}}]}] BACKPORT--> Co-authored-by: Karen Grigoryan <[email protected]>
kapral18
added
the
Feature:Data Health Quality
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Acceptance criteria:
The text was updated successfully, but these errors were encountered: