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

Jump to bottom

[Logs Onboarding] Add client-side routing support for individual steps #159500

Closed
ogupte opened this issue Jun 12, 2023 · 2 comments · Fixed by #161230
Closed

[Logs Onboarding] Add client-side routing support for individual steps #159500

ogupte opened this issue Jun 12, 2023 · 2 comments · Fixed by #161230
Assignees
@yngrdyn
Labels
8.10 candidate apm:test-plan-done Pull request that was successfully tested during the test plan Feature:Logs Onboarding Logs Onboarding feature Feature: Observability Onboarding Team:obs-ux-logs Observability Logs User Experience Team

Comments

@ogupte
Copy link
Contributor

ogupte commented Jun 12, 2023

Currently navigation in using the wizard context is handled entirely as state changes. It works well, but it would be better if we could also define client-side route paths that update the browser's history for better accessibility (support for 'back' button) as well as navigation triggers for telemetry/analytics.
@botelastic botelastic bot added the needs-team Issues missing a team label label Jun 12, 2023
@ogupte ogupte added the Team:APM - DEPRECATED Use Team:obs-ux-infra_services. label Jun 12, 2023
@elasticmachine
Copy link
Contributor

Pinging @elastic/apm-ui (Team:APM)

@botelastic botelastic bot removed the needs-team Issues missing a team label label Jun 12, 2023
@yngrdyn yngrdyn self-assigned this Jun 30, 2023
This was referenced Jul 5, 2023
Merged
Merged
yngrdyn added a commit that referenced this issue Jul 14, 2023
@yngrdyn
[Logs onboarding] Landing page style changed (#161542)
89d6cff 
Relates to #159655.

### Changes

This PR include the following changes:

- [x] Update the copy in the page subtitle with “Select your method for
collecting data into Observability.”
- [x] Remove badges (Quickstart, in a few minutes, setup guide,
integrations, sample data) from all cards
- [x] Remove ‘skip for now’ link
- [x] Change system logs card title with “Stream host system logs” and
card description with “The quickest path to onboard log data from your
own machine or server.”
- [x] Add system icon to system logs card
- [x] Change custom logs card title with “Stream log files” and card
description with “Stream any logs into Elastic in a simple way and
explore their data.”
- [x] Add logging icon to stream logs card 
- [x] Remove horizontal line below the cards’ title
- [x] Add “Elastic agent” badge to system logs card and stream log files
- [x] Change CTA button text with ‘Get started’ of both system logs and
stream log files card.
- [x] Remove the cards shadow and add 1px stroke Core/lightShade
- [x] Add 2px stroke Text/accentText around system logs card +
Quickstart badge on top of the card
- [x] Remove ‘sample data’ card
- [x] Change APM card title with “Collect application performance data”
and description with “Collect traces, logs, and metrics from
OpenTelemetry or APM custom agent.”
- [x] Add secondary CTA button to APM card with the text “Get started”
that links to the current flow
- [x] Add Elastic APM logo and Open Telemetry logo to APM card
- [x] Change Kubernetes card title with “Collect Kubernetes clusters
data” and description with “Collect logs and metrics from Kubernetes
clusters with Elastic agent.”
- [x] Add Kubernetes logo to Kubernetes card that links to the current
setup guide
- [x] Add secondary CTA button to Kubernetes card with the text “Get
started”
- [x] Create custom card for integrations with logs from: Amazon
Kinesis, AWS, Apache, Nginx, Google Cloud Platform, Azure and card title
“Explore 300+ ways of ingesting data with our integrations”
- [x] Add secondary CTA button to Integrations card with the text “Start
exploring” that links to the Integrations page with ‘logs’ in the search
bar
- [x] Add quick links to Integrations card to Use sample data (link to
actual flow) + Upload file (link to actual flow) + AWS Firehose (link to
docs:
https://www.elastic.co/guide/en/kinesis/current/aws-firehose-setup-guide.html)

### Missing
- [ ] Link ‘Get started’ button from Stream log files directly to the
stream log files onboarding flow (remove the select logs step)

This will be addressed in a follow up Pr since it's depending on
#159500.

### Screenshots

#### Before
<img width="2222" alt="image"
src="https://github.com/elastic/kibana/assets/1313018/d9120656-7357-4bf0-b8c8-6ce1a85e731c">

#### After
<img width="2225" alt="image"
src="https://github.com/elastic/kibana/assets/1313018/83275710-c9eb-45ac-a3b3-42ca4debf9a6">
yngrdyn added a commit that referenced this issue Jul 14, 2023
@yngrdyn
[Logs onboarding] Add client side routing support for individual steps (
86e7aca 
#161230)

Closes #159500.

This PR focuses on adding client-site routing support to the wizard
developed for observability_onboarding plugin.

### Changes
- Added routes for each step of the wizard.
- Added support for `history.push` and `history.goBack` in wizard
context.
- Added basePath to wizard provider.



https://github.com/elastic/kibana/assets/1313018/c32e25b3-2470-41a4-8c34-f2dd5ea7c366
@yngrdyn
Copy link
Contributor

yngrdyn commented Aug 17, 2023

Tested in edge-lite.
We have defined main urls per flow:

  • System logs: app/observabilityOnboarding/systemLogs.
  • Custom logs: app/observabilityOnboarding/customLogs
    • Install elastic agent step app/observabilityOnboarding/customLogs/installElasticAgent

I have also search for these urls in fullStory and they are searchable
image

@yngrdyn yngrdyn added the apm:test-plan-done Pull request that was successfully tested during the test plan label Aug 17, 2023
@gbamparop gbamparop added Team:obs-ux-logs Observability Logs User Experience Team Feature:Logs Onboarding Logs Onboarding feature and removed Team:APM - DEPRECATED Use Team:obs-ux-infra_services. apm:logs-onboarding labels Oct 10, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@yngrdyn yngrdyn

Labels
8.10 candidate apm:test-plan-done Pull request that was successfully tested during the test plan Feature:Logs Onboarding Logs Onboarding feature Feature: Observability Onboarding Team:obs-ux-logs Observability Logs User Experience Team
Projects
None yet
Milestone
No milestone
4 participants
@yngrdyn @ogupte @gbamparop @elasticmachine