-
Notifications
You must be signed in to change notification settings - Fork 8.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Revert "[Security solution] Guided onboarding rules (#1)"
This reverts commit 2bb0b7d56412480af04065912d2be7b8471637df.
- Loading branch information
Showing
9 changed files
with
216 additions
and
113 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
50 changes: 0 additions & 50 deletions
50
...gins/security_solution/public/common/components/guided_onboarding_tour/use_rules_tour.tsx
This file was deleted.
Oops, something went wrong.
118 changes: 118 additions & 0 deletions
118
...etection_engine/rule_management_ui/components/guided_onboarding/rules_management_tour.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| import type { EuiTourActions, EuiTourStepProps } from '@elastic/eui'; | ||
| import { EuiTourStep } from '@elastic/eui'; | ||
| import { noop } from 'lodash'; | ||
| import React, { useEffect, useMemo } from 'react'; | ||
| import useObservable from 'react-use/lib/useObservable'; | ||
| import { of } from 'rxjs'; | ||
| import { useKibana } from '../../../../common/lib/kibana'; | ||
| import { useFindRulesQuery } from '../../../rule_management/api/hooks/use_find_rules_query'; | ||
| import * as i18n from './translations'; | ||
| import { useIsElementMounted } from './use_is_element_mounted'; | ||
|
|
||
| export const INSTALL_PREBUILT_RULES_ANCHOR = 'install-prebuilt-rules-anchor'; | ||
| export const SEARCH_FIRST_RULE_ANCHOR = 'search-first-rule-anchor'; | ||
|
|
||
| export interface RulesFeatureTourContextType { | ||
| steps: EuiTourStepProps[]; | ||
| actions: EuiTourActions; | ||
| } | ||
|
|
||
| const GUIDED_ONBOARDING_RULES_FILTER = { | ||
| filter: '', | ||
| showCustomRules: false, | ||
| showElasticRules: true, | ||
| tags: ['Guided Onboarding'], | ||
| }; | ||
|
|
||
| export enum GuidedOnboardingRulesStatus { | ||
| 'inactive' = 'inactive', | ||
| 'installRules' = 'installRules', | ||
| 'activateRules' = 'activateRules', | ||
| 'completed' = 'completed', | ||
| } | ||
|
|
||
| export const RulesManagementTour = () => { | ||
| const { guidedOnboardingApi } = useKibana().services.guidedOnboarding; | ||
|
|
||
| const isRulesStepActive = useObservable( | ||
| guidedOnboardingApi?.isGuideStepActive$('security', 'rules') ?? of(false), | ||
| false | ||
| ); | ||
|
|
||
| const { data: onboardingRules } = useFindRulesQuery( | ||
| { filterOptions: GUIDED_ONBOARDING_RULES_FILTER }, | ||
| { enabled: isRulesStepActive } | ||
| ); | ||
|
|
||
| const tourStatus = useMemo(() => { | ||
| if (!isRulesStepActive || !onboardingRules) { | ||
| return GuidedOnboardingRulesStatus.inactive; | ||
| } | ||
|
|
||
| if (onboardingRules.total === 0) { | ||
| // Onboarding rules are not installed - show the install/update rules step | ||
| return GuidedOnboardingRulesStatus.installRules; | ||
| } | ||
|
|
||
| if (!onboardingRules.rules.some((rule) => rule.enabled)) { | ||
| // None of the onboarding rules is active - show the activate step | ||
| return GuidedOnboardingRulesStatus.activateRules; | ||
| } | ||
|
|
||
| // Rules are installed and enabled - the tour is completed | ||
| return GuidedOnboardingRulesStatus.completed; | ||
| }, [isRulesStepActive, onboardingRules]); | ||
|
|
||
| // Synchronize the current "internal" tour step with the global one | ||
| useEffect(() => { | ||
| if (isRulesStepActive && tourStatus === GuidedOnboardingRulesStatus.completed) { | ||
| guidedOnboardingApi?.completeGuideStep('security', 'rules'); | ||
| } | ||
| }, [guidedOnboardingApi, isRulesStepActive, tourStatus]); | ||
|
|
||
| /** | ||
| * Wait until the tour target elements are visible on the page and mount | ||
| * EuiTourStep components only after that. Otherwise, the tours would never | ||
| * show up on the page. | ||
| */ | ||
| const isInstallRulesAnchorMounted = useIsElementMounted(INSTALL_PREBUILT_RULES_ANCHOR); | ||
| const isSearchFirstRuleAnchorMounted = useIsElementMounted(SEARCH_FIRST_RULE_ANCHOR); | ||
|
|
||
| return ( | ||
| <> | ||
| {isInstallRulesAnchorMounted && ( | ||
| <EuiTourStep | ||
| title={i18n.INSTALL_PREBUILT_RULES_TITLE} | ||
| content={i18n.INSTALL_PREBUILT_RULES_CONTENT} | ||
| onFinish={noop} | ||
| step={1} | ||
| stepsTotal={2} | ||
| isOpen={tourStatus === GuidedOnboardingRulesStatus.installRules} | ||
| anchor={`#${INSTALL_PREBUILT_RULES_ANCHOR}`} | ||
| anchorPosition="downCenter" | ||
| footerAction={<div />} // Replace "Skip tour" with an empty element | ||
| /> | ||
| )} | ||
| {isSearchFirstRuleAnchorMounted && ( | ||
| <EuiTourStep | ||
| title={i18n.SEARCH_FIRST_RULE_TITLE} | ||
| content={i18n.SEARCH_FIRST_RULE_CONTENT} | ||
| onFinish={noop} | ||
| step={2} | ||
| stepsTotal={2} | ||
| isOpen={tourStatus === GuidedOnboardingRulesStatus.activateRules} | ||
| anchor={`#${SEARCH_FIRST_RULE_ANCHOR}`} | ||
| anchorPosition="upCenter" | ||
| footerAction={<div />} // Replace "Skip tour" with an empty element | ||
| /> | ||
| )} | ||
| </> | ||
| ); | ||
| }; |
36 changes: 36 additions & 0 deletions
36
...n/public/detection_engine/rule_management_ui/components/guided_onboarding/translations.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| import { i18n } from '@kbn/i18n'; | ||
|
|
||
| export const INSTALL_PREBUILT_RULES_TITLE = i18n.translate( | ||
| 'xpack.securitySolution.detectionEngine.rules.guidedOnboarding.installPrebuiltRules.title', | ||
| { | ||
| defaultMessage: 'Load the Elastic prebuilt rules', | ||
| } | ||
| ); | ||
|
|
||
| export const INSTALL_PREBUILT_RULES_CONTENT = i18n.translate( | ||
| 'xpack.securitySolution.detectionEngine.rules.guidedOnboarding.installPrebuiltRules.content', | ||
| { | ||
| defaultMessage: 'To get started you need to load the Elastic prebuilt rules.', | ||
| } | ||
| ); | ||
|
|
||
| export const SEARCH_FIRST_RULE_TITLE = i18n.translate( | ||
| 'xpack.securitySolution.detectionEngine.rules.guidedOnboarding.searchFirstRule.title', | ||
| { | ||
| defaultMessage: 'Search for Elastic Defend rules', | ||
| } | ||
| ); | ||
|
|
||
| export const SEARCH_FIRST_RULE_CONTENT = i18n.translate( | ||
| 'xpack.securitySolution.detectionEngine.rules.guidedOnboarding.searchFirstRule.content', | ||
| { | ||
| defaultMessage: 'Find the My First Alert rule and enable it.', | ||
| } | ||
| ); |
35 changes: 35 additions & 0 deletions
35
...etection_engine/rule_management_ui/components/guided_onboarding/use_is_element_mounted.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| import { useEffect, useState } from 'react'; | ||
|
|
||
| export const useIsElementMounted = (elementId: string) => { | ||
| const [isElementMounted, setIsElementMounted] = useState(false); | ||
|
|
||
| useEffect(() => { | ||
| const observer = new MutationObserver(() => { | ||
| const isElementFound = !!document.getElementById(elementId); | ||
|
|
||
| if (isElementFound && !isElementMounted) { | ||
| setIsElementMounted(true); | ||
| } | ||
|
|
||
| if (!isElementFound && isElementMounted) { | ||
| setIsElementMounted(false); | ||
| } | ||
| }); | ||
|
|
||
| observer.observe(document.body, { | ||
| childList: true, | ||
| subtree: true, | ||
| }); | ||
|
|
||
| return () => observer.disconnect(); | ||
| }, [isElementMounted, elementId]); | ||
|
|
||
| return isElementMounted; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.