[Security Solution] New Add Data Page #112142
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -23,6 +23,10 @@ import { | |
| } from './bottom_bar'; | ||
| import { useShowTimeline } from '../../../common/utils/timeline/use_show_timeline'; | ||
| import { gutterTimeline } from '../../../common/lib/helpers'; | ||
| import { useSourcererScope } from '../../../common/containers/sourcerer'; | ||
| import { OverviewEmpty } from '../../../overview/components/overview_empty'; | ||
| import { ENDPOINT_METADATA_INDEX } from '../../../../common/constants'; | ||
| import { useFetchIndex } from '../../../common/containers/source'; | ||
|
|
||
| /* eslint-disable react/display-name */ | ||
|
|
||
|
|
@@ -73,11 +77,16 @@ export const SecuritySolutionTemplateWrapper: React.FC<SecuritySolutionPageWrapp | |
| const { show: isShowingTimelineOverlay } = useDeepEqualSelector((state) => | ||
| getTimelineShowStatus(state, TimelineId.active) | ||
| ); | ||
| const endpointMetadataIndex = useMemo<string[]>(() => { | ||
| return [ENDPOINT_METADATA_INDEX]; | ||
| }, []); | ||
| const [, { indexExists: metadataIndexExists }] = useFetchIndex(endpointMetadataIndex, true); | ||
| const { indicesExist } = useSourcererScope(); | ||
| const securityIndicesExist = indicesExist || metadataIndexExists; | ||
|
|
||
| // StyledKibanaPageTemplate is a styled EuiPageTemplate. Security solution currently passes the header and page content as the children of StyledKibanaPageTemplate, as opposed to using the pageHeader prop, which may account for any style discrepancies, such as the bottom border not extending the full width of the page, between EuiPageTemplate and the security solution pages. | ||
|
|
||
| return securityIndicesExist ? ( | ||
|
Contributor
There was a problem hiding this comment. if we're doing this check all the way up here, should we perhaps remove it from downstream? Ex: These are just a few spots. Also, what about the rules page? currently, we will show it even if no index exists
Contributor
Author
There was a problem hiding this comment. @stephmilovic I'm happy to remove the checks downstream, however note that this check does include one more index with the metadata index, so show/hiding this Add Data screen has one additional check. Thoughts? Should we still remove all downstream checks?
We also have a couple pages that displayed without having data such as Trusted Apps and Event Filters. The intention here is to have a consistent "Empty State" across all apps. Based on this conversation with @cchaos I think the UX/Design team is open to more granular "Empty State" views in apps in the next iteration.
Contributor
There was a problem hiding this comment. Yep, the next step will the the in-page empty states. We're working our way through the user's journey. 😄
Contributor
There was a problem hiding this comment. ok, so if your check is
Contributor
Author
There was a problem hiding this comment. @stephmilovic yes, I see your point on things not being consistent. The condition should still be You can see it in this commit : 7de5044 let me know if this looks OK
Contributor
Author
There was a problem hiding this comment. @stephmilovic and I spoke offline. We'd like the same empty state to still be available for the other pages in the event that we have Commit: 27c39b7 |
||
| <StyledKibanaPageTemplate | ||
| $isTimelineBottomBarVisible={isTimelineBottomBarVisible} | ||
| $isShowingTimelineOverlay={isShowingTimelineOverlay} | ||
|
|
@@ -98,5 +107,7 @@ export const SecuritySolutionTemplateWrapper: React.FC<SecuritySolutionPageWrapp | |
| {children} | ||
| </EuiPanel> | ||
| </StyledKibanaPageTemplate> | ||
| ) : ( | ||
| <OverviewEmpty /> | ||
| ); | ||
| }); | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -6,105 +6,57 @@ | |
| */ | ||
|
|
||
| import React, { useMemo } from 'react'; | ||
| import { i18n } from '@kbn/i18n'; | ||
| import { useKibana } from '../../../common/lib/kibana'; | ||
| import { ADD_DATA_PATH } from '../../../../common/constants'; | ||
| import { pagePathGetters } from '../../../../../fleet/public'; | ||
| import { SOLUTION_NAME } from '../../../../public/common/translations'; | ||
| import { useUserPrivileges } from '../../../common/components/user_privileges'; | ||
|
|
||
| import { | ||
| KibanaPageTemplate, | ||
| NoDataPageActionsProps, | ||
| } from '../../../../../../../src/plugins/kibana_react/public'; | ||
|
|
||
| const OverviewEmptyComponent: React.FC = () => { | ||
| const { http, docLinks } = useKibana().services; | ||
| const basePath = http.basePath.get(); | ||
| const canAccessFleet = useUserPrivileges().endpointPrivileges.canAccessFleet; | ||
| const integrationsPathComponents = pagePathGetters.integrations_all({ category: 'security' }); | ||
|
Contributor
Author
There was a problem hiding this comment. I'm using this to get the integrations + category link for use with this "Add Data" screen. The URL we're picking up is This navigates us to the Integrations page, however, it doesn't seem the The result I see is that it navigates to the integrations page, but it drops the
If I selected Security, I do see Select "Security" - After refresh, Security is dropped: Is there a bug here? Should I be able to navigate to the Integrations page with a Category selected?
Contributor
There was a problem hiding this comment. this is almost certainly a bug, you should definitely be able to browse to a specific category given the URL path. could you file a separate issue? thanks in advance!
Contributor
Author
There was a problem hiding this comment. Thanks @jen-huang - I filed the above in this ticket: #112871 @cchaos note on the above - as it stands, this navigation won't sort the integrations by Security until the above bug is fixed. The navigation still works, but the user won't see the Security integrations sorted. We could merge this as is and it should work after the bug is fixed. Thoughts?
Contributor
There was a problem hiding this comment. Sounds good. Let's not block this PR because of the routing bug.
Contributor
There was a problem hiding this comment. FYI this bug was fixed so this should work now. let me know if you still encounter issues
Contributor
Author
There was a problem hiding this comment. thanks @jen-huang ! Just tested it and it works great!
|
||
|
|
||
| const agentAction: NoDataPageActionsProps = useMemo( | ||
| () => ({ | ||
| elasticAgent: { | ||
| href: `${basePath}${integrationsPathComponents[0]}${integrationsPathComponents[1]}`, | ||
| description: i18n.translate( | ||
| 'xpack.securitySolution.pages.emptyPage.beatsCard.description', | ||
| { | ||
| defaultMessage: | ||
| 'Use Elastic Agent to collect security events and protect your endpoints from threats. Manage your agents in Fleet and add integrations with a single click.', | ||
| } | ||
| ), | ||
| }, | ||
| }), | ||
| [basePath, integrationsPathComponents] | ||
| ); | ||
|
|
||
| const beatsAction: NoDataPageActionsProps = useMemo( | ||
| () => ({ | ||
| beats: { | ||
| href: `${basePath}${ADD_DATA_PATH}`, | ||
| }, | ||
| }), | ||
| [basePath] | ||
| ); | ||
|
|
||
| return ( | ||
| <KibanaPageTemplate | ||
| data-test-subj="empty-page" | ||
| noDataConfig={{ | ||
| solution: SOLUTION_NAME, | ||
| actions: canAccessFleet ? agentAction : beatsAction, | ||
| docsLink: docLinks.links.siem.gettingStarted, | ||
| }} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fwiw,
react/display-namewas originally added because we weren't setting the react display name and we added a linter rule for it and disabled it as a fast way to get it into the codebase. However, this linter rule where possible should be removed. You don't have to do it here, but just mentioning it. Information is here: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/display-name.mdBasically it helps us debug React applications. (Again background info, you don't have to do anything in this PR).
...But with this enabled at the file level it makes it easy for devs to continue to create things without the name being set...