mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
[Observability Onboarding] Update question contents to match new designs (#184866)
## Summary Resolves #184108. Resolves #181855. Updates the o11y onboarding flow's first question to match our latest designs. This includes changing the avatar icon at the beginning of the flow, updating the copy for the first question, adding a list of integration icons that pertain to each question, and including a badge to indicate that the user can add additional integrations for each option. From a technical perspective, I have added a type to indicate the supported icon values. Many of these logos are natively supported by EUI, but I did introduce three new SVG to the plugin's assets folder. ### Before <img width="1403" alt="image" src="9472b386-713b-4365-8f5e-1f76435d978f"> ### After <img width="703" alt="image" src="0a54194a-406d-4e1b-b96f-efc6588f55a6">
This commit is contained in:
Justin Kambic
GitHub
parent
9e52d98d2b
commit
ac6a8a283f
4 changed files with 110 additions and 19 deletions
|
|
@ -8,6 +8,7 @@ import { i18n } from '@kbn/i18n';
|
|||
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { FormattedMessage } from '@kbn/i18n-react';
|
||||
import { useKibana } from '@kbn/kibana-react-plugin/public';
|
||||
import type { FunctionComponent } from 'react';
|
||||
import {
|
||||
EuiAvatar,
|
||||
|
|
@ -20,6 +21,8 @@ import {
|
|||
EuiTitle,
|
||||
useGeneratedHtmlId,
|
||||
useEuiTheme,
|
||||
EuiBadge,
|
||||
EuiIcon,
|
||||
} from '@elastic/eui';
|
||||
|
||||
import { useSearchParams } from 'react-router-dom-v5-compat';
|
||||
|
|
@ -33,8 +36,23 @@ interface UseCaseOption {
|
|||
id: Category;
|
||||
label: string;
|
||||
description: React.ReactNode;
|
||||
logos?: SupportedLogo[];
|
||||
showIntegrationsBadge?: boolean;
|
||||
}
|
||||
|
||||
type SupportedLogo =
|
||||
| 'aws'
|
||||
| 'azure'
|
||||
| 'docker'
|
||||
| 'dotnet'
|
||||
| 'prometheus'
|
||||
| 'gcp'
|
||||
| 'java'
|
||||
| 'javascript'
|
||||
| 'kubernetes'
|
||||
| 'nginx'
|
||||
| 'opentelemetry';
|
||||
|
||||
export const OnboardingFlowForm: FunctionComponent = () => {
|
||||
const options: UseCaseOption[] = [
|
||||
{
|
||||
|
|
@ -50,6 +68,8 @@ export const OnboardingFlowForm: FunctionComponent = () => {
|
|||
'Detect patterns, gain insights from logs, get alerted when surpassing error thresholds',
|
||||
}
|
||||
),
|
||||
logos: ['azure', 'aws', 'nginx', 'gcp'],
|
||||
showIntegrationsBadge: true,
|
||||
},
|
||||
{
|
||||
id: 'apm',
|
||||
|
|
@ -64,6 +84,7 @@ export const OnboardingFlowForm: FunctionComponent = () => {
|
|||
'Catch application problems, get alerted on performance issues or SLO breaches, expedite root cause analysis and remediation',
|
||||
}
|
||||
),
|
||||
logos: ['opentelemetry', 'java', 'javascript', 'dotnet'],
|
||||
},
|
||||
{
|
||||
id: 'infra',
|
||||
|
|
@ -78,6 +99,8 @@ export const OnboardingFlowForm: FunctionComponent = () => {
|
|||
'Check my system’s health, get alerted on performance issues or SLO breaches, expedite root cause analysis and remediation',
|
||||
}
|
||||
),
|
||||
logos: ['kubernetes', 'prometheus', 'docker', 'opentelemetry'],
|
||||
showIntegrationsBadge: true,
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -129,12 +152,11 @@ export const OnboardingFlowForm: FunctionComponent = () => {
|
|||
return (
|
||||
<EuiPanel hasBorder paddingSize="xl">
|
||||
<TitleWithIcon
|
||||
iconType="indexRollupApp"
|
||||
iconType="createSingleMetricJob"
|
||||
title={i18n.translate(
|
||||
'xpack.observability_onboarding.experimentalOnboardingFlow.strong.startCollectingYourDataLabel',
|
||||
{
|
||||
defaultMessage:
|
||||
'Start collecting your data by selecting one of the following use cases',
|
||||
defaultMessage: 'What do you want to monitor?',
|
||||
}
|
||||
)}
|
||||
/>
|
||||
|
|
@ -155,6 +177,27 @@ export const OnboardingFlowForm: FunctionComponent = () => {
|
|||
<EuiText color="subdued" size="s">
|
||||
{option.description}
|
||||
</EuiText>
|
||||
{(option.logos || option.showIntegrationsBadge) && (
|
||||
<>
|
||||
<EuiSpacer size="m" />
|
||||
<EuiFlexGroup gutterSize="s" responsive={false}>
|
||||
{option.logos?.map((logo) => (
|
||||
<EuiFlexItem key={logo} grow={false}>
|
||||
<LogoIcon logo={logo} />
|
||||
</EuiFlexItem>
|
||||
))}
|
||||
{option.showIntegrationsBadge && (
|
||||
<EuiBadge color="hollow">
|
||||
<FormattedMessage
|
||||
defaultMessage="+ Integrations"
|
||||
id="xpack.observability_onboarding.experimentalOnboardingFlow.form.addIntegrations"
|
||||
description="A badge indicating that the user can add additional observability integrations to their deployment via this option"
|
||||
/>
|
||||
</EuiBadge>
|
||||
)}
|
||||
</EuiFlexGroup>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
checked={option.id === searchParams.get('category')}
|
||||
|
|
@ -241,22 +284,7 @@ interface TitleWithIconProps {
|
|||
const TitleWithIcon: FunctionComponent<TitleWithIconProps> = ({ title, iconType }) => (
|
||||
<EuiFlexGroup responsive={false} gutterSize="m" alignItems="center">
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiAvatar
|
||||
size="l"
|
||||
name={title}
|
||||
iconType={iconType}
|
||||
iconSize="l"
|
||||
color="subdued"
|
||||
css={{
|
||||
/**
|
||||
* Nudges the icon a bit to the
|
||||
* right because it's not symmetrical and
|
||||
* look off-center by default. This makes
|
||||
* it visually centered.
|
||||
*/
|
||||
padding: '24px 22px 24px 26px',
|
||||
}}
|
||||
/>
|
||||
<EuiAvatar size="l" name={title} iconType={iconType} iconSize="l" color="subdued" />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiTitle size="s">
|
||||
|
|
@ -278,3 +306,35 @@ function scrollIntoViewWithOffset(element: HTMLElement, offset = 0) {
|
|||
top: element.getBoundingClientRect().top - document.body.getBoundingClientRect().top - offset,
|
||||
});
|
||||
}
|
||||
|
||||
function useIconForLogo(logo?: SupportedLogo): string | undefined {
|
||||
const {
|
||||
services: { http },
|
||||
} = useKibana();
|
||||
switch (logo) {
|
||||
case 'aws':
|
||||
return 'logoAWS';
|
||||
case 'azure':
|
||||
return 'logoAzure';
|
||||
case 'gcp':
|
||||
return 'logoGCP';
|
||||
case 'kubernetes':
|
||||
return 'logoKubernetes';
|
||||
case 'nginx':
|
||||
return 'logoNginx';
|
||||
case 'prometheus':
|
||||
return 'logoPrometheus';
|
||||
case 'docker':
|
||||
return 'logoDocker';
|
||||
default:
|
||||
return http?.staticAssets.getPluginAssetHref(`${logo}.svg`);
|
||||
}
|
||||
}
|
||||
|
||||
function LogoIcon({ logo }: { logo: SupportedLogo }) {
|
||||
const iconType = useIconForLogo(logo);
|
||||
if (iconType) {
|
||||
return <EuiIcon type={iconType} />;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_2274_29569)">
|
||||
<g clip-path="url(#clip1_2274_29569)">
|
||||
<path d="M0.451148 11.0944C0.391428 11.0954 0.33216 11.0839 0.277092 11.0607C0.222024 11.0375 0.172351 11.0031 0.131213 10.9597C0.0889455 10.9178 0.0555417 10.8678 0.0330022 10.8127C0.0104626 10.7576 -0.00074907 10.6985 3.88237e-05 10.6389C-0.000387935 10.5794 0.0109889 10.5204 0.0335078 10.4653C0.0560266 10.4103 0.0892385 10.3602 0.131213 10.3181C0.171948 10.274 0.221471 10.2389 0.276581 10.2151C0.331693 10.1914 0.391163 10.1795 0.451148 10.1802C0.511046 10.1801 0.570339 10.1922 0.625366 10.2159C0.680393 10.2397 0.729985 10.2745 0.771084 10.3181C0.813782 10.3599 0.84768 10.4097 0.870764 10.4649C0.893847 10.52 0.905646 10.5792 0.905457 10.6389C0.906015 10.6988 0.894386 10.7581 0.871279 10.8132C0.848174 10.8684 0.814079 10.9182 0.771084 10.9597C0.729596 11.0027 0.679858 11.0368 0.624871 11.0599C0.569883 11.0831 0.510788 11.0948 0.451148 11.0944Z" fill="#621EE5"/>
|
||||
<path d="M6.80859 11.0144H5.97036L2.97257 6.35019C2.89789 6.23527 2.83568 6.11268 2.787 5.9845H2.76141C2.7899 6.2508 2.80059 6.51872 2.7934 6.78646V11.0144H2.11194V5.1665H2.99816L5.91597 9.74728C6.03754 9.93761 6.11647 10.0681 6.15273 10.1386H6.16872C6.13497 9.85339 6.12106 9.56613 6.12713 9.27894V5.1665H6.80859V11.0144Z" fill="#621EE5"/>
|
||||
<path d="M11.4215 11.0144H8.32129V5.1665H11.2775V5.78562H9.01875V7.72956H11.1239V8.34546H9.01875V10.3728H11.4247L11.4215 11.0144Z" fill="#621EE5"/>
|
||||
<path d="M15.9999 5.78562H14.3042V11.0144H13.6228V5.78562H11.9463V5.1665H15.9999V5.78562Z" fill="#621EE5"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_2274_29569">
|
||||
<rect width="16" height="16" fill="white"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip1_2274_29569">
|
||||
<rect width="16" height="6" fill="white" transform="translate(0 5.1665)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.95038 12.3734C3.49039 13.0607 7.44711 14.4805 10.5795 13.1385C10.0664 12.939 9.69843 12.709 9.69843 12.709C8.30167 12.973 7.65373 12.9938 6.3858 12.8489C5.33935 12.7291 5.95038 12.3734 5.95038 12.3734ZM10.2045 11.0327C8.35307 11.3889 7.28368 11.3775 5.92923 11.2377C4.88189 11.1294 5.56751 10.6218 5.56751 10.6218C2.85822 11.5211 7.07578 12.5416 10.8624 11.434C10.4599 11.2922 10.2045 11.0327 10.2045 11.0327ZM11.6553 3.26828C11.6554 3.26828 6.17815 4.63581 8.794 7.65029C9.56615 8.53921 8.59148 9.3384 8.59148 9.3384C8.59148 9.3384 10.5512 8.32695 9.65138 7.05978C8.81067 5.87862 8.16619 5.29182 11.6553 3.26828ZM12.9368 13.6691C12.9368 13.6691 13.3892 14.0421 12.4385 14.3304C10.6309 14.878 4.91368 15.0431 3.32568 14.3523C2.75529 14.1039 3.82545 13.7595 4.16217 13.6868C4.51325 13.6108 4.71372 13.6247 4.71372 13.6247C4.07898 13.1777 0.610361 14.5027 2.9523 14.8827C9.33825 15.9179 14.593 14.4165 12.9368 13.6691ZM10.7421 9.78112C11.049 9.57168 11.473 9.3898 11.473 9.3898C11.473 9.3898 10.2651 9.60578 9.06164 9.70691C7.58836 9.83047 6.00806 9.85483 5.21477 9.74869C3.3367 9.49759 6.24442 8.80684 6.24442 8.80684C6.24442 8.80684 5.11491 8.73045 3.72649 9.4021C2.08428 10.1962 7.78858 10.5581 10.7421 9.78112ZM11.461 11.7224C11.4472 11.7595 11.401 11.8013 11.401 11.8013C15.4095 10.7476 13.9357 8.08687 12.0191 8.76031C11.8509 8.81979 11.7627 8.95809 11.7627 8.95809C11.7627 8.95809 11.869 8.91528 12.106 8.86581C13.0749 8.66393 14.4631 10.1628 11.461 11.7224ZM8.07352 8.77788C7.4821 7.44111 5.47663 6.27161 8.07441 4.22C11.3136 1.66324 9.65151 0 9.65151 0C10.3219 2.64149 7.2865 3.4394 6.19084 5.08443C5.44472 6.20535 6.55704 7.40983 8.07352 8.77788ZM11.5694 15.4108C9.11009 15.8738 6.07651 15.8198 4.27779 15.5229C4.27779 15.5229 4.64617 15.8279 6.53961 15.9498C9.42054 16.134 13.8457 15.8473 13.9503 14.484C13.9505 14.484 13.7491 15.0008 11.5694 15.4108Z" fill="#EA2D2E"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -0,0 +1,10 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_2274_29567)">
|
||||
<path d="M1.33346 11.497L2.95865 10.5071C3.27224 11.0666 3.55746 11.54 4.24164 11.54C4.89744 11.54 5.311 11.2818 5.311 10.2776V3.44838H7.30678V10.306C7.30678 12.3863 6.09506 13.3332 4.32717 13.3332C2.7306 13.3332 1.80384 12.5011 1.33337 11.4968L1.33346 11.497ZM8.39082 11.2817L10.0159 10.3349C10.4437 11.038 10.9997 11.5544 11.9833 11.5544C12.8103 11.5544 13.3376 11.1383 13.3376 10.5644C13.3376 9.87579 12.7959 9.63184 11.8835 9.23025L11.3846 9.01485C9.94467 8.39812 8.98955 7.62334 8.98955 5.98778C8.98955 4.48131 10.13 3.3335 11.9121 3.3335C13.1809 3.3335 14.0933 3.77833 14.749 4.94041L13.195 5.94479C12.8528 5.32789 12.4823 5.08401 11.912 5.08401C11.3275 5.08401 10.9568 5.45704 10.9568 5.94479C10.9568 6.54733 11.3275 6.79137 12.1828 7.1644L12.6817 7.37955C14.3782 8.11133 15.3334 8.85731 15.3334 10.5358C15.3334 12.3436 13.922 13.3335 12.026 13.3335C10.1727 13.3335 8.9752 12.444 8.39074 11.2818" fill="black"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_2274_29567">
|
||||
<rect width="16" height="16" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
Loading…
Add table
Add a link
Reference in a new issue