Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Observability Onboarding] Removes hover effect from use case selection #180303

Merged
merged 1 commit into from
Apr 8, 2024
Merged

[Observability Onboarding] Removes hover effect from use case selection #180303

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
183 changes: 45 additions & 138 deletions ...observability_onboarding/public/application/onboarding_flow_form/onboarding_flow_form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,10 @@ import {
EuiFlexItem,
EuiCard,
EuiIcon,
EuiFlexGrid,
EuiAvatar,
useEuiTheme,
EuiFlexGrid,
useGeneratedHtmlId,
} from '@elastic/eui';

interface UseCaseOption {
Expand All @@ -37,39 +38,12 @@ export const OnboardingFlowForm: FunctionComponent = () => {
'xpack.observability_onboarding.experimentalOnboardingFlow.euiCheckableCard.collectAndAnalyzeMyLabel',
{ defaultMessage: 'Collect and analyze my logs' }
),
description: (
<ul>
<li>
{i18n.translate(
'xpack.observability_onboarding.onboardingFlowForm.li.detectPatternsAndOutliersLabel',
{
defaultMessage:
'Detect patterns and outliers with log categorization and anomaly detection.',
}
)}
</li>
<li>
{i18n.translate(
'xpack.observability_onboarding.onboardingFlowForm.li.troubleshootInRealTimeLabel',
{ defaultMessage: 'Troubleshoot in real time with live tail.' }
)}
</li>
<li>
{i18n.translate(
'xpack.observability_onboarding.onboardingFlowForm.li.getInsightsFromStructuredLabel',
{
defaultMessage:
'Get insights from structured and unstructured logs in minutes.',
}
)}
</li>
<li>
{i18n.translate(
'xpack.observability_onboarding.onboardingFlowForm.li.deployAndManageLogsLabel',
{ defaultMessage: 'Deploy and manage logs at petabyte scale.' }
)}
</li>
</ul>
description: i18n.translate(
'xpack.observability_onboarding.onboardingFlowForm.detectPatternsAndOutliersLabel',
{
defaultMessage:
'Detect patterns, troubleshoot in real time, gain insights from logs.',
}
),
},
{
Expand All @@ -78,45 +52,12 @@ export const OnboardingFlowForm: FunctionComponent = () => {
'xpack.observability_onboarding.experimentalOnboardingFlow.euiCheckableCard.monitorMyApplicationPerformanceLabel',
{ defaultMessage: 'Monitor my application performance' }
),
description: (
<ul>
<li>
{i18n.translate(
'xpack.observability_onboarding.onboardingFlowForm.li.captureAndAnalyzeDistributedLabel',
{
defaultMessage:
'Capture and analyze distributed transactions, traces, and profiling data for your applications.',
}
)}
</li>
<li>
{i18n.translate(
'xpack.observability_onboarding.onboardingFlowForm.li.identifyPerformanceBottlenecksWithLabel',
{
defaultMessage:
'Identify performance bottlenecks with automated and curated visual representation of all dependencies.',
}
)}
</li>
<li>
{i18n.translate(
'xpack.observability_onboarding.onboardingFlowForm.li.drillIntoAnomaliesTransactionLabel',
{
defaultMessage:
'Drill into anomalies, transaction details, errors and metrics for deeper analysis.',
}
)}
</li>
<li>
{i18n.translate(
'xpack.observability_onboarding.onboardingFlowForm.li.useMachineLearningToLabel',
{
defaultMessage:
'Use machine learning to automatically detect anomalies.',
}
)}
</li>
</ul>
description: i18n.translate(
'xpack.observability_onboarding.onboardingFlowForm.captureAndAnalyzeDistributedLabel',
{
defaultMessage:
'Collect distributed traces and catch application performance problems.',
}
),
},
{
Expand All @@ -125,48 +66,18 @@ export const OnboardingFlowForm: FunctionComponent = () => {
'xpack.observability_onboarding.experimentalOnboardingFlow.euiCheckableCard.monitorMyInfrastructureLabel',
{ defaultMessage: 'Monitor my infrastructure' }
),
description: (
<ul>
<li>
{i18n.translate(
'xpack.observability_onboarding.onboardingFlowForm.li.builtOnPowerfulElasticsearchLabel',
{
defaultMessage:
'Built on powerful Elasticsearch, stream in and scale infrastructure metrics from your systems, cloud, network, and other infrastructure sources',
}
)}
</li>
<li>
{i18n.translate(
'xpack.observability_onboarding.onboardingFlowForm.li.getLogicalAndPhysicalLabel',
{
defaultMessage:
'Get logical and physical views of your infrastructure topology.',
}
)}
</li>
<li>
{i18n.translate(
'xpack.observability_onboarding.onboardingFlowForm.li.breakDownApplicationAndLabel',
{
defaultMessage:
'Break down application and infrastructure silos for faster root cause detection',
}
)}
</li>
</ul>
description: i18n.translate(
'xpack.observability_onboarding.onboardingFlowForm.builtOnPowerfulElasticsearchLabel',
{
defaultMessage:
'Stream infrastructure metrics and accelerate root cause detection by breaking down silos.',
}
),
},
];

const radioGroupId = useGeneratedHtmlId({ prefix: 'onboardingUseCase' });
const [selectedId, setSelectedId] = useState<string>();
const [hoveredId, setHoveredId] = useState<string>();

const visibleOption = hoveredId
? options.find((option) => option.id === hoveredId)
: selectedId
? options.find((option) => option.id === selectedId)
: undefined;

const { euiTheme } = useEuiTheme();

Expand All @@ -183,34 +94,30 @@ export const OnboardingFlowForm: FunctionComponent = () => {
)}
/>
<EuiSpacer size="m" />
<EuiFlexGroup css={{ margin: `calc(${euiTheme.size.xxl} / 2)` }}>
<EuiFlexItem css={{ fontWeight: 'bold' }}>
{options.map((option, index) => (
<div
key={option.id}
onMouseEnter={() => setHoveredId(option.id)}
onMouseLeave={() => setHoveredId(undefined)}
>
{/* Using EuiSpacer instead of EuiFlexGroup to ensure spacing is part of hit area for mouse hover effect */}
{index > 0 && <EuiSpacer size="m" />}
<EuiCheckableCard
id={option.id}
label={option.label}
checked={selectedId === option.id}
onChange={() => setSelectedId(option.id)}
/>
</div>
))}
</EuiFlexItem>
<EuiFlexItem>
{visibleOption && (
<EuiPanel color="subdued">
<EuiText size="s" color="subdued">
{visibleOption.description}
</EuiText>
</EuiPanel>
)}
</EuiFlexItem>
<EuiFlexGroup
css={{ margin: `calc(${euiTheme.size.xxl} / 2)` }}
gutterSize="m"
direction="column"
>
{options.map((option, index) => (
<EuiFlexItem key={option.id}>
<EuiCheckableCard
id={`${radioGroupId}_${option.id}`}
name={radioGroupId}
label={
<>
<EuiText css={{ fontWeight: 'bold' }}>{option.label}</EuiText>
<EuiSpacer size="s" />
<EuiText color="subdued" size="s">
{option.description}
</EuiText>
</>
}
checked={selectedId === option.id}
onChange={() => setSelectedId(option.id)}
/>
</EuiFlexItem>
))}
</EuiFlexGroup>

{selectedId && (
Expand Down
Loading