Skip to content

[SharedUX] Analytics No Data Page#130974

Closed
majagrubic wants to merge 85 commits intoelastic:mainfrom
majagrubic:analytics-empty-state-component
Closed

[SharedUX] Analytics No Data Page#130974
majagrubic wants to merge 85 commits intoelastic:mainfrom
majagrubic:analytics-empty-state-component

Conversation

@majagrubic
Copy link
Copy Markdown
Contributor

@majagrubic majagrubic commented Apr 26, 2022

Summary

This PR adds an Analytics-specific implementation of KibanaNoDataPage.
The inner component has no service dependencies, for easier testing and storybooking; it's not meant to be used by plugins directly.
The AnalyticsNoDataPage has service dependencies and can be used by plugins directly, by importing from shared-ux plugins.

Checklist

Delete any items that are not applicable to this PR.

For maintainers

@majagrubic
Copy link
Copy Markdown
Contributor Author

@elasticmachine merge upstream

@majagrubic majagrubic added v8.3.0 Team:SharedUX Platform AppEx-SharedUX (formerly Global Experience) t// release_note:enhancement labels Apr 28, 2022
@majagrubic majagrubic marked this pull request as ready for review April 28, 2022 14:52
@majagrubic majagrubic requested review from a team and cchaos April 28, 2022 14:52
@cchaos
Copy link
Copy Markdown
Contributor

cchaos commented Apr 28, 2022

I'm confused, why do we have a solution-specific component (Analytics) in Shared UX? I understand that Analytics doesn't really have a single folder/plugin to pull from, but I would venture we should make one specifically for Analaytics, not add into shared_ux.

@majagrubic
Copy link
Copy Markdown
Contributor Author

majagrubic commented Apr 29, 2022

But where else would the component live? As you said, there is no Analytics-specific plugin, and since the page is meant to be reused by multiple plugins, it feels shared_ux is the right place.

Copy link
Copy Markdown
Contributor

@cchaos cchaos left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 The design of the page LGTM. I can't speak to the eng of all the new services.

}
);

export const AnalyticsNoDataPageComponent = ({ kibanaGuideDocLink, onDataViewCreated }: Props) => {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we really need to create a dedicated component for the Analytics or could we expose different config object and then the solutions use the generic <KibanaNoDataPage /> component with those configs?

It seems that by only exposing the recommended config object it would still leave the possibility to customize some config if needed (e.g. the logo)

It also seems less verbose if we start to have multiple of those. WDYT?

Copy link
Copy Markdown
Contributor Author

@majagrubic majagrubic May 2, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Clint and I talked about having a config, that could be defined by each plugin the start time. We'd have almost like a register of configs, so we could do something like

const register  = useRegister();
const config = register.get(pluginName);

I think this is the next phase of the project. But for now, let's keep it simple. This will solve the problem at hand. What you're saying doesn't really clash with what we have; plugins can still use the generic <KibanaNoDataPage> component, which takes config as a prop.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok that could work too.

that could be defined by each plugin

I thought that "Analytics" encompasses multiple plugins so each individual plugin didn't have to provide the config (in which case they could directly pass it to the generic KibanaNoDataPage.

Just trying to see how we can lower the number of components/tests/stories we need to maintain. If you are on it with Clint all good 👍

@majagrubic
Copy link
Copy Markdown
Contributor Author

@elasticmachine merge upstream

@kibana-ci
Copy link
Copy Markdown

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
sharedUX 12 118 +106

Async chunks

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

id before after diff
sharedUX 0.0B 132.7KB +132.7KB

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id before after diff
sharedUX 0 1 +1

Page load bundle

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

id before after diff
sharedUX 2.1KB 5.1KB +2.9KB
Unknown metric groups

API count

id before after diff
@kbn/shared-ux-services 78 79 +1
sharedUX 4 8 +4
total +5

async chunk count

id before after diff
sharedUX 0 8 +8

miscellaneous assets size

id before after diff
sharedUX 0.0B 161.8KB +161.8KB

History

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

*/

import React from 'react';
import { withSuspense } from '@kbn/shared-ux-utility';
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We shouldn't be exporting this. Consumers should import directly from the package.


import { servicesFactory } from './services';

let services: SharedUxServices;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is an anti-pattern. We should not be keeping a module-level instance. Can you tell me why this is necessary?


public stop() {}
}
export const getSharedUXServices = () => services;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, we can not do this. This is exposing a stateful variable subject to a start contract in a module-level, stateless variable.

const services = getSharedUXServices();
const { kibanaGuideDocLink } = services.docLinks;
return (
<SharedUxServicesProvider {...services}>
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consuming plugins need to do this. Let me know if you need help working around this limitation, I can help.

Copy link
Copy Markdown
Contributor Author

@majagrubic majagrubic May 3, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is what I was trying to avoid. If each plugin needs to provide their own service contract and this can't be a
"plug-n-play" component, then I agree that this component is not much needed, as all it does is provide a pre-initialized config.

@majagrubic
Copy link
Copy Markdown
Contributor Author

Closing this as this will be moved to a package, and the current implementation is not mergeable.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

release_note:enhancement Team:SharedUX Platform AppEx-SharedUX (formerly Global Experience) t// v8.3.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants