[Asset Inventory] Initializing onboarding screen (#213302)

## Summary

It closes https://github.com/elastic/kibana/issues/210714

This PR adds the Initializing screen shown during the initialization
step of the Asset Inventory onboarding.

## Recording


https://github.com/user-attachments/assets/01631884-60bb-417c-9f36-3b37ca8de4a4
This commit is contained in:
Paulo Silva 2025-03-06 14:13:08 -08:00 committed by GitHub
parent b6c768e408
commit 3fdb04d294
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 102 additions and 2 deletions

View file

@ -10,6 +10,7 @@ import type { FC, PropsWithChildren } from 'react';
import { GetStarted } from './get_started';
import { AssetInventoryLoading } from '../asset_inventory_loading';
import { useAssetInventoryStatus } from '../../hooks/use_asset_inventory_status';
import { Initializing } from './initializing';
/**
* This component serves as a wrapper to render appropriate onboarding screens
@ -29,8 +30,8 @@ export const AssetInventoryOnboarding: FC<PropsWithChildren> = ({ children }) =>
switch (status) {
case 'disabled': // The user has not yet started the onboarding process.
return <GetStarted />;
case 'initializing': // Todo: The onboarding process is currently initializing.
return <div>{'Initializing...'}</div>;
case 'initializing': // The onboarding process is currently initializing.
return <Initializing />;
case 'empty': // Todo: Onboarding cannot proceed because no relevant data was found.
return <div>{'No data found.'}</div>;
case 'permission_denied': // Todo: User lacks the necessary permissions to proceed.

View file

@ -0,0 +1,99 @@
/*
* 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 React from 'react';
import {
EuiEmptyPrompt,
EuiButton,
EuiTitle,
EuiFlexGroup,
EuiFlexItem,
EuiLoadingLogo,
EuiText,
EuiIcon,
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import { useKibana } from '@kbn/kibana-react-plugin/public';
import { INTEGRATIONS_PLUGIN_ID } from '@kbn/fleet-plugin/common';
import { InventoryTitle } from '../inventory_title';
import { CenteredWrapper } from './centered_wrapper';
const TEST_SUBJ = 'assetInventory:onboarding:initializing';
export const Initializing = () => {
const { application } = useKibana().services;
return (
<EuiFlexGroup>
<EuiFlexItem>
<InventoryTitle />
<CenteredWrapper>
<EuiEmptyPrompt
data-test-subj={TEST_SUBJ}
icon={<EuiLoadingLogo logo="logoSecurity" size="xl" />}
title={
<h2>
<FormattedMessage
id="xpack.securitySolution.assetInventory.onboarding.initializing.title"
defaultMessage="Initializing Asset Inventory"
/>
</h2>
}
color="plain"
body={
<FormattedMessage
id="xpack.securitySolution.assetInventory.onboarding.initializing.description"
defaultMessage="Your Asset Inventory is being set up. This may take a few moments as we prepare to provide you with centralized visibility into your assets. Check back shortly to start exploring your assets."
/>
}
footer={
<EuiFlexGroup alignItems="center">
<EuiFlexItem grow={false}>
<EuiIcon type="fleetApp" size="xl" />
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexGroup direction="column" alignItems="flexStart" gutterSize="none">
<EuiFlexItem>
<EuiTitle size="xxs">
<strong>
<FormattedMessage
id="xpack.securitySolution.assetInventory.initializing.exploreTitle"
defaultMessage="Explore Asset Integrations"
/>
</strong>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem>
<EuiText size="s">
<FormattedMessage
id="xpack.securitySolution.assetInventory.initializing.exploreDescription"
defaultMessage="Explore the out-of-the-box integrations we provide to connect your data sources."
/>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
size="s"
iconType="plusInCircle"
onClick={() => application?.navigateToApp(INTEGRATIONS_PLUGIN_ID)}
>
<FormattedMessage
id="xpack.securitySolution.assetInventory.initializing.addIntegration"
defaultMessage="Add integration"
/>
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
}
/>
</CenteredWrapper>
</EuiFlexItem>
</EuiFlexGroup>
);
};