Skip to content

Commit

Permalink
[Asset Inventory] Initializing onboarding screen (#213302)
Browse files Browse the repository at this point in the history
## Summary

It closes #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
  • Loading branch information
opauloh authored Mar 6, 2025
1 parent b6c768e commit 3fdb04d
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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.
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
);
};

0 comments on commit 3fdb04d

Please sign in to comment.