[Security Solution][Rule details] - Updates rule details page to allow tabs to be a part of url

[yctercero]

Summary

Similar to how the Hosts page maintains the tab state in the URL, recreating that in the rule details page. This is in anticipation of some of the exceptions UI changes being worked on where this would create a better user experience.

• Existing urls that do not contain the tabName param default to the Alerts tab (this is exactly what happens now, so no change in functionality now)
• Sample url: /app/security/rules/id/fbfc7b80-2551-11ed-ac93-0fcc3d73cc25/rule_exceptions
• Tab name also shows up in the breadcrumb

Testing

• Navigate to a rule details url from prior to this change (or just make sure that it doesn't include a tab name) - rule should load with the Alerts tab active
• Select the exceptions tab. Refresh page - exceptions tab should remain active
• Breadcrumbs should be updated as you change tabs
• Selecting to filter by alert id from the execution results tab properly updates the selected tab to Alerts and applies expected filter

Checklist

• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Documentation was added for features that require explanation or tutorials
• Unit or functional tests were updated or added to match the most common scenarios
• Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
• Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
• If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
• This was checked for cross-browser compatibility

[elasticmachine]

Pinging @elastic/security-solution (Team: SecuritySolution)

[yctercero]

@elasticmachine merge upstream

[xcrzx]

Thanks, @yctercero, for addressing all the comments 🙌

Tested locally and found one last thing. Rule IDs are becoming a part of APM transaction names:

Rule IDs are high cardinality fields and should not be propagated to the execution context. Otherwise, it would be very hard to analyze APM transactions as similar pages wouldn't be appropriately grouped. To fix that, please apply the following diff, it replaces rule IDs with the :detailName placeholder:

diff --git a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/details/index.tsx b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/details/index.tsx
index fedeb9a1e9c..4dd6f6c9e92 100644
--- a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/details/index.tsx
+++ b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/details/index.tsx
@@ -805,7 +805,7 @@ const RuleDetailsPageComponent: React.FC<DetectionEngineComponentProps> = ({
             </Display>
             <StyledMinHeightTabContainer>
               <Switch>
-                <Route path={`/rules/id/${ruleId}/:tabName(${RuleDetailTabs.alerts})`}>
+                <Route path={`/rules/id/:detailName/:tabName(${RuleDetailTabs.alerts})`}>
                   <>
                     <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
                       <EuiFlexItem grow={false}>
@@ -855,7 +855,7 @@ const RuleDetailsPageComponent: React.FC<DetectionEngineComponentProps> = ({
                     )}
                   </>
                 </Route>
-                <Route path={`/rules/id/${ruleId}/:tabName(${RuleDetailTabs.exceptions})`}>
+                <Route path={`/rules/id/:detailName/:tabName(${RuleDetailTabs.exceptions})`}>
                   <ExceptionsViewer
                     ruleId={ruleId ?? ''}
                     ruleName={rule?.name ?? ''}
@@ -867,10 +867,10 @@ const RuleDetailsPageComponent: React.FC<DetectionEngineComponentProps> = ({
                     onRuleChange={refreshRule}
                   />
                 </Route>
-                <Route path={`/rules/id/${ruleId}/:tabName(${RuleDetailTabs.executionResults})`}>
+                <Route path={`/rules/id/:detailName/:tabName(${RuleDetailTabs.executionResults})`}>
                   <ExecutionLogTable ruleId={ruleId} selectAlertsTab={navigateToAlertsTab} />
                 </Route>
-                <Route path={`/rules/id/${ruleId}/:tabName(${RuleDetailTabs.executionEvents})`}>
+                <Route path={`/rules/id/:detailName/:tabName(${RuleDetailTabs.executionEvents})`}>
                   <ExecutionEventsTable ruleId={ruleId} />
                 </Route>
               </Switch>

[yctercero]

@elasticmachine merge upstream

[yctercero]

@elasticmachine merge upstream

[yctercero]

@elasticmachine merge upstream

[semd]

LGTM! branch tested, all looks good 🚀

[michaelolo24]

🎉 Awesome work! LGTM! 🚀

[yctercero]

@elasticmachine merge upstream

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: df8437c
• Cloud Deployment

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
securitySolution	5.7MB	6.4MB	⚠️ +700.8KB

History

• 💚 Build #68809 succeeded 0d5cdb3
• 💚 Build #68530 succeeded ede3533
• 💔 Build #68517 failed efaff0e
• 💚 Build #68488 succeeded 28daf9a
• 💚 Build #68427 succeeded bda7329

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

cc @yctercero