[Observability] New "No Data" screens #107709

cchaos · 2021-08-04T23:28:44Z

Observability work for #107682

✅ APM -- Split to new PR #111630

Historical context

hasHistoricalAgentData() (see details below)
learn more url: core.docLinks.links.observability.guide
Add data url: /app/home#/tutorial/apm

Adds logic to dynamically show the no data screen on APM.

A new API was created GET /api/apm/has_data which looks if there is any data available in the APM indices.

Removed the hasHistoricalData from the services API.

Removed the old empty message that was located inside the service inventory page.

Added API tests

When there is no data:

When there is data:

Originally posted by @cauemarcondes in cchaos#31

✅ Getting Started -- Split to new PR #111803

Historical context

NEEDS LOGIC
learn more url: core.docLinks.links.observability.guide
Add data url: /app/home#/tutorial_directory/logging

✅ Overview -- Split to new PR #111803

Historical context

Logic based on const { hasAnyData } = useHasData();
learn more url: core.docLinks.links.observability.guide
Add data url: /app/home#/tutorial_directory/logging

✅ Logs @afgomez (Closes #111386)

Logic based on useLogSourceContext().sourceStatus?.logIndexStatus !== "missin"
learn more url: core.docLinks.links.observability.guide
Add data url: /app/home#/tutorial_directory/logging

Screenshot

✅ Uptime @shahzad31 / @justinkambic -- Split to a new PR #112403

Historical context

- [x] Logic based on `const { data } = useSelector(indexStatusSelector)` - [x] `learn more` url: [`core.docLinks.links.observability.guide`](https://www.elastic.co/guide/en/kibana/master/observability.html) - [x] `Add data` url: `/app/home#/tutorial/uptimeMonitors`

✅ User Experience -- Split to new PR #111866

Historical context

Logic based on !totalPageViews
learn more url: core.docLinks.links.observability.guide
Add data url: /app/home#/tutorial/apm

✅ Observability Metrics @afgomez (closes #111387)

Logic based on const { metricIndicesExist } = useContext(Source.Context); which currently doesn't take into account the default metrics index
learn more url: core.docLinks.links.observability.guide
Add data url: /app/home#/tutorial/metrics

Screenshot

Checklist

Delete any items that are not applicable to this PR.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Unit or functional tests were updated or added to match the most common scenarios

…iring down custom styles of Enterprise Search cards

with temp `falsy` statement. Needs hook

…creens

x-pack/plugins/apm/public/components/routing/templates/apm_main_template.tsx

cchaos

Observability: cc @jasonrhodes

I've made PR comments where I need help getting/checking the logic. The locations where the new page contents is passed to the template is the best location I have found for each of the Obs solutions as it should prevent the render of any subsequent pages and can be the entire page (with still showing the solution navigation).

The next thing we'd like to tackle is getting the top menu bar's Add Data buttons going to the right places and possibly also displaying the right content when there's no data. But that does not have to be this PR.

x-pack/plugins/apm/public/components/routing/templates/apm_main_template.tsx

x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx

x-pack/plugins/infra/public/pages/logs/page_template.tsx

cchaos · 2021-08-06T21:51:45Z

x-pack/plugins/infra/public/pages/metrics/page_template.tsx

+  const { metricIndicesExist } = useContext(Source.Context);
+  const noDataConfig: KibanaPageTemplateProps['noDataConfig'] = metricIndicesExist
+    ? undefined
+    : {
+        solution: 'Observability',
+        pageTitle: 'Set up Metrics for Observability!',


Metrics

I think you can use:

const { metricIndicesExist } = useSource();

and just import useSource instead of Source from that same file.

But they both seem to be doing the same thing. @simianhacker @neptunian could you just confirm that this will correctly return whether metrics indices exist at this point in the app?

Looks like useSource requires a parameter of sourceId.

OK ... interesting. I'm not sure how it works the way you're doing it, then, but if it does, great!

Well, that's what I want to confirm. 😆

@weltenwort if you have a minute can you help me confirm whether this context access is expected to work without designating the source ID? I don't want to tell Caroline to "just use 'default' here" because that seems bad, but I wasn't able to figure out how we are supposed to interact with this...

x-pack/plugins/observability/public/pages/overview/index.tsx

x-pack/plugins/uptime/public/routes.tsx

snide · 2021-08-09T15:37:28Z

@gchaps We'll need some help for UI text on this one. Specifically the difference between using Integrations with Agent vs. using Beats on their own.

The core differences:

Integrations with Agent provide a continuous system that auto-upgrades related assets (like dashboards).
Fleet provides orchestration of Agents for easier central management and dedicated policies for data ingestion
An agent is installed once (per server), with the integrations being one-click installs on top of agent beyond it.
Beats require a separate Beat to be installed for every integration.
Integrations with Agents through Fleet is our longer term future.

The reasons not to go with Integrations with Agent right now are:

The integrations (in Observability) is not yet GA
Beats may provide some functionality that the Fleet system does not yet provide (yet)

From our designs we'll be using cards to show off the choice. The only difference per solution would be the suggested method (which would hinge on whether the related integration is GA). I'd like to distill these two cards into a short sentence.

Use beats when...
Use Integrations with Agent when...

Yell if you need more context.

gchaps · 2021-08-09T17:57:48Z

@dedemorton, @bmorelli25 Can you please look at the the request for text on the Beats and Elastic Agent cards?

I'd prefer we didn't use "Confused on which to use?". I'd rather the text give in the card give enough info and then include just the link "Check our docs for more information".

Setup Beats > Set up Beats

…ta_screens

shahzad31 · 2021-10-04T18:20:33Z

@elasticmachine merge upstream

snide · 2021-10-05T20:28:14Z

@elasticmachine merge upstream

snide · 2021-10-06T04:25:11Z

@elasticmachine merge upstream

Jest tests passed locally after a merge. 🎲

shahzad31 · 2021-10-06T08:01:41Z

@elasticmachine merge upstream

kibanamachine · 2021-10-06T11:38:31Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`infra`	966	965	-1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`infra`	938.7KB	938.0KB	-670.0B
`observability`	355.2KB	355.2KB	+13.0B
`uptime`	569.1KB	569.1KB	-36.0B
total			-693.0B

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`kibanaReact`	94.1KB	94.2KB	+37.0B

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

snide · 2021-10-06T12:40:42Z

snide

Reviewed locally. Looks good. Merging this since we've had trouble with tests and now have green. Set the auto-backport flags.

kibanamachine · 2021-10-06T12:53:06Z

💔 Backport failed

Status	Branch	Result
❌	7.x	Commit could not be cherrypicked due to conflicts

To backport manually run:
node scripts/backport --pr 107709

* [Observability] New "No Data" screens (#107709) Adds empty states for all of Obs that lead to their various ingest flows. * merge conflicts * Fix missing DTS addition to template Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> Co-authored-by: cchaos <caroline.horn@elastic.co>

cchaos added 2 commits August 4, 2021 19:15

Initial commit of new NoDataPage and accompanying cards

202fba7

Adding to Security Solution and forcing view in TemplateWrapper

e6c1290

cchaos added the WIP Work in progress label Aug 4, 2021

cchaos requested review from snide and johnbarrierwilson August 4, 2021 23:28

cchaos added 16 commits August 4, 2021 19:29

Center page

0ac66b8

Better customizations & sorting on recommended

5274c96

Adding custom size to Solution Nav Avatar for reuse and working on pa…

66445f8

…iring down custom styles of Enterprise Search cards

Put SetupGuideCTA back

495e905

Fix TS

4600e9a

Added empty state to Infra/Logs

80e2063

Added to APM

d7c2e29

with temp `falsy` statement. Needs hook

Added to Metrics template

4563cad

Added to Uptime and fixed layouts

b774ecb

Fixing UX layout

b2ce1c3

Merge remote-tracking branch 'upstream/master' into design/add_data_s…

5f98d10

…creens

Faked in for UX

ab8c4bd

Removing outer template from no data page

c981540

Optimizing some prop usages

549ee0a

Making noDataConfig a view in KibanaPageTemplate

8c0acc4

Working on links

67c7b6a

sorenlouv reviewed Aug 6, 2021

View reviewed changes

x-pack/plugins/apm/public/components/routing/templates/apm_main_template.tsx Outdated Show resolved Hide resolved

cchaos commented Aug 6, 2021

View reviewed changes

cchaos mentioned this pull request Aug 9, 2021

[Uptime] Bug: Page template background doesn't extend to the full height #102311

Closed

cchaos added 2 commits August 9, 2021 11:59

Obs Getting Started page (without solution nav)

6e4e53b

Cleanup

7850037

cchaos added 2 commits August 9, 2021 14:09

Fix i18n

a0128dd

Dev docs

0f3b96b

Alejandro Fernández Gómez and others added 5 commits October 1, 2021 14:50

Fix metrics no indices test

847fec7

Fix more tests

d2fbe0f

Fix logEntryRate test

e976f05

Fix spaces tests

a6507b2

Merge branch 'master' of github.com:elastic/kibana into design/add_da…

f0142d9

…ta_screens

kibanamachine and others added 6 commits October 4, 2021 14:20

Merge branch 'master' into design/add_data_screens

6923af0

update timeout

94cc373

Fix even more tests

83b50e0

update test

1a9bf58

Fix test for new index patterns

7ac8c56

Merge branch 'master' into design/add_data_screens

87d5be8

Merge branch 'master' into design/add_data_screens

9461716

Merge branch 'master' into design/add_data_screens

b3164c5

kibanamachine and others added 2 commits October 6, 2021 04:01

Merge branch 'master' into design/add_data_screens

69abe1d

remove uptime flaky test

0707c30

snide added the auto-backport Deprecated - use backport:version if exact versions are needed label Oct 6, 2021

snide approved these changes Oct 6, 2021

View reviewed changes

snide merged commit 74da7d3 into elastic:master Oct 6, 2021

snide mentioned this pull request Oct 6, 2021

[7.x] [Observability] New "No Data" screens (#107709) #114099

Merged

cchaos deleted the design/add_data_screens branch October 19, 2021 18:08

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Observability] New "No Data" screens #107709

[Observability] New "No Data" screens #107709

cchaos commented Aug 4, 2021 •

edited

Loading

cchaos left a comment •

edited

Loading

cchaos Aug 6, 2021

jasonrhodes Aug 12, 2021

cchaos Aug 12, 2021

jasonrhodes Aug 12, 2021

cchaos Aug 12, 2021

jasonrhodes Aug 13, 2021

snide commented Aug 9, 2021

gchaps commented Aug 9, 2021 •

edited

Loading

shahzad31 commented Oct 4, 2021

snide commented Oct 5, 2021

snide commented Oct 6, 2021

shahzad31 commented Oct 6, 2021

kibanamachine commented Oct 6, 2021

snide commented Oct 6, 2021

snide left a comment

kibanamachine commented Oct 6, 2021

[Observability] New "No Data" screens #107709

[Observability] New "No Data" screens #107709

Conversation

cchaos commented Aug 4, 2021 • edited Loading

Observability work for #107682

✅ APM -- Split to new PR #111630

✅ Getting Started -- Split to new PR #111803

✅ Overview -- Split to new PR #111803

✅ Logs @afgomez (Closes #111386)

✅ Uptime @shahzad31 / @justinkambic -- Split to a new PR #112403

✅ User Experience -- Split to new PR #111866

✅ Observability Metrics @afgomez (closes #111387)

Checklist

cchaos left a comment • edited Loading

Choose a reason for hiding this comment

cchaos Aug 6, 2021

Choose a reason for hiding this comment

jasonrhodes Aug 12, 2021

Choose a reason for hiding this comment

cchaos Aug 12, 2021

Choose a reason for hiding this comment

jasonrhodes Aug 12, 2021

Choose a reason for hiding this comment

cchaos Aug 12, 2021

Choose a reason for hiding this comment

jasonrhodes Aug 13, 2021

Choose a reason for hiding this comment

snide commented Aug 9, 2021

gchaps commented Aug 9, 2021 • edited Loading

shahzad31 commented Oct 4, 2021

snide commented Oct 5, 2021

snide commented Oct 6, 2021

shahzad31 commented Oct 6, 2021

kibanamachine commented Oct 6, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

History

snide commented Oct 6, 2021

snide left a comment

Choose a reason for hiding this comment

kibanamachine commented Oct 6, 2021

💔 Backport failed

cchaos commented Aug 4, 2021 •

edited

Loading

cchaos left a comment •

edited

Loading

gchaps commented Aug 9, 2021 •

edited

Loading