mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 01:38:56 -04:00
[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:
parent
b6c768e408
commit
3fdb04d294
2 changed files with 102 additions and 2 deletions
|
@ -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.
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
};
|
Loading…
Add table
Add a link
Reference in a new issue