[Logs onboarding] Design feedback

[yngrdyn]

After merging PR158307 and PR159207 we received the following feedback from UX:

Tasks

Beta Give feedback

1. Make sure inputs in configure logs step occupy the whole width
2. Fix copy button in apiKey callout, currently is cropped
3. Add space bellow action buttons (back and continue)

This feedback have been captured in this internal document.

[elasticmachine]

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

[isaclfreire]

Hello!
After the latest round of reviews, I made a list of fixes for the 8.10 release divided by page:

Landing page

• Update the copy in the page subtitle with “Select your method for collecting data into Observability.”
• Remove badges (Quickstart, in a few minutes, setup guide, integrations, sample data) from all cards
• Remove ‘skip for now’ link
• 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.”
• Add system icon to system logs card
• 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.”
• Add logging icon to stream logs card
• Remove horizontal line below the cards’ title
• Add “Elastic agent” badge to system logs card and stream log files
• Change CTA button text with ‘Get started’ of both system logs and stream log files card.
• Link ‘Get started’ button from Stream log files directly to the stream log files onboarding flow (remove the select logs step)
• Remove the cards shadow and add 1px stroke Core/lightShade
• Add 2px stroke Text/accentText around system logs card + Quickstart badge on top of the card
• Remove ‘sample data’ card
• Change APM card title with “Collect application performance data” and description with “Collect traces, logs, and metrics from OpenTelemetry or APM custom agent.”
• Add secondary CTA button to APM card with the text “Get started” that links to the current flow
• Add Elastic APM logo and Open Telemetry logo to APM card
• Change Kubernetes card title with “Collect Kubernetes clusters data” and description with “Collect logs and metrics from Kubernetes clusters with Elastic agent.”
• Add Kubernetes logo to Kubernetes card that links to the current setup guide
• Add secondary CTA button to Kubernetes card with the text “Get started”
• 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”
• Add secondary CTA button to Integrations card with the text “Start exploring” that links to the Integrations page with ‘logs’ in the search bar
• 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)
• [ ] Add ‘Give feedback’ button to the subheader on top right

---

Stream log files config page

• Change page title into “Stream log files to Elastic”
• Remove stepper
• Remove ’Stream log files to Elastic’ title inside the white box
• Add tooltip to Dataset name with the text “Provide a dataset name to help identify the source of your logs in future uses. Defaults to the name of the log file.”
• Add Dataset name input placeholder with “Give your logs a name”
• Change helper text on Dataset name input to “All lowercase, max 100 chars, special characters will be replaced with ‘_’.”
• Add tooltip to Service name with the text “Provide a service name to allow for distributed services running on multiple hosts to correlate the related instances.”
• Add Service name input placeholder with “Give your service a name”
• Add tooltip to Namespace (under advanced settings) with the text “Provide a namespace to customize the grouping of your logs. Defaults to the default namespace."

[isaclfreire]

The last page missing should be the 'Install shipper'. I am still working on the feedback and will update this issue later.

[isaclfreire]

Here's the missing part:

Install shipper page

• Change page title into “Install shipper to collect logs”
• Remove stepper
• Remove ’Install shipper to collect data’ title inside the white box
• Change first paragraph with “To collect the data from your system and stream it to Elastic, you first need to install a shipping tool on the machine generating the logs. In this case, the shipper is an Agent developed by Elastic.”
• Expand next steps as the previous steps get completed, to avoid the page getting too long
• Collapse completed steps as the user moves forward, to avoid the page getting too long. The user should be able to click on the completed step to ‘expand’ it again
• Change text in first step (Install the Elastic agent) with “Select your platform, and run the install command in your terminal to enroll and start the Elastic Agent. Do this for each host. Review host requirements and other installation options before installing.”
• “Host requirements…” should open a link in a new tab to: https://www.elastic.co/guide/en/fleet/8.7/elastic-agent-installation.html
• Move up automatic config download switch before the agent download code block
• Change switch text to “Automatically download the agent’s config” and add tooltip: “Turn on to add a string to the following code block that downloads the agent's standard configuration to your host during installation. Turn off to manually configure the agent in the next step.”
• When the users turn on the switch, we need to show a callout with the following text: “Automatically downloading the agent config will overwrite any existing agent config on your host.”
• During the completion of the first step ‘Install the Elastic agent’ provide users with callouts that appear as things happen: first Elastic agent download, then Elastic agent extracted… and so on
• If the user has the switch on (to automatically download the config), they should also receive the callout confirmation that the config was written to the yml file
• Change paragraph text of ‘Configure the Elastic agent’ step to “Add the following configuration to the elastic-agent.yml on the host where you installed the Elastic agent.”
• Change step 3 titles to “Ship logs to Elastic Observability” (default state), “Waiting for Logs to be shipped...” (Loading state) and “Logs are being shipped!” (Success state)
• Change the style of ‘back’ button to Empty + add arrowLeft icon with primary color
• [ ] Change ‘Inspect’ button with default style, primary color. The button should become active only when the full installation flow is finished
• [ ] Open the inspect of the installation in a flyout to avoid interrupting the user flow

[gbamparop]

Thanks for adding these @isaclfreire, I think it's preferable to create new issues instead of opening new ones, unless the initial scope was not addressed.

[isaclfreire]

Update: I removed the Logs explorer page fixes, since we're still discussing about having an MVP Discover for logs and how would it look like. Might be useful to create a dedicated issue to that to collect comments. Wdyt @gbamparop? I can do it

[gbamparop]

Update: I removed the Logs explorer page fixes, since we're still discussing about having an MVP Discover for logs and how would it look like. Might be useful to create a dedicated issue to that to collect comments. Wdyt @gbamparop? I can do it

That would help, please do thanks!

[isaclfreire]

Great, I am tracking the discussion in this issue.

[yngrdyn]

The missing point regarding expandable steps was moved to #162483.