import React , { useCallback , useMemo } from 'react' ; import { FormattedMessage } from '@kbn/i18n-react' ; import { EuiButton } from '@elastic/eui' ; import { KibanaPageTemplate } from '../../../../../src/plugins/kibana_react/public' ; import { INTEGRATIONS_PLUGIN_ID } from '../../../fleet/common' ; import { pagePathGetters } from '../../../fleet/public' ; import { isModifiedEvent , isLeftClickEvent , useKibana } from '../common/lib/kibana' ; import { OsqueryIcon } from './osquery_icon' ; import { useBreadcrumbs } from '../common/hooks/use_breadcrumbs' ; import { OSQUERY_INTEGRATION_NAME } from '../../common' ; const OsqueryAppEmptyStateComponent = ( ) => { useBreadcrumbs ( 'base' ) ; const { application : { getUrlForApp , navigateToApp } , } = useKibana ( ) . services ; const integrationHref = useMemo ( ( ) => getUrlForApp ( INTEGRATIONS_PLUGIN_ID , { path : pagePathGetters . integration_details_overview ( { pkgkey : OSQUERY_INTEGRATION_NAME , } ) [ 1 ] , } ) , [ getUrlForApp ] ) ; const integrationClick = useCallback ( ( event ) => { if ( ! isModifiedEvent ( event ) && isLeftClickEvent ( event ) ) { event . preventDefault ( ) ; return navigateToApp ( INTEGRATIONS_PLUGIN_ID , { path : pagePathGetters . integration_details_overview ( { pkgkey : OSQUERY_INTEGRATION_NAME , } ) [ 1 ] , } ) ; } } , [ navigateToApp ] ) ; const pageHeader = useMemo ( ( ) => ( { iconType : OsqueryIcon , pageTitle : ( < FormattedMessage id = "xpack.osquery.emptyState.pageTitle" defaultMessage = "Add Osquery Manager" / > ) , description : ( < FormattedMessage id = "xpack.osquery.emptyState.pageDescription" defaultMessage = "Add this integration to run and schedule queries for Elastic Agent." / > ) , rightSideItems : [ < EuiButton key = "button" fill href = { integrationHref } onClick = { integrationClick } iconType = "plusInCircleFilled" > < FormattedMessage id = "xpack.osquery.emptyState.addOsqueryManagerButton" defaultMessage = "Add Osquery Manager" /> < /EuiButton>, ] , } ) , [ integrationClick , integrationHref ] ) ; return < KibanaPageTemplate isEmptyState = { true } pageHeader = { pageHeader } / > ; } ; export const OsqueryAppEmptyState = React . memo ( OsqueryAppEmptyStateComponent ) ;