-
Notifications
You must be signed in to change notification settings - Fork 8.2k
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.
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
Management - New platform api #52579
Management - New platform api #52579
Conversation
…ement app registry to new platform side
💔 Build FailedHistory
To update your PR or re-run it, just comment with: |
euiIconType: 'logoElasticsearch', | ||
}); | ||
|
||
return { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Will the NP Management API offer an equivalent to the LP deregister
function? Security uses this today to hide the security section if Security becomes disabled, either via license change, or ES config change. /cc @azasypkin
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ManagementApp
provides .disable()
and .enable()
for similar functionality.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Spaces changes LGTM
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM for design. The hard-coded pixel values have been removed; use of _index.scss
files looks good.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@@ -0,0 +1,204 @@ | |||
/* |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In this /components
folder would be nice to have each component in its own folder.
constructor() { | ||
this.sections = []; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Seems constructor is not doing anything.
private sharedInterface = { | ||
getSection: this.getSection.bind(this), | ||
getSectionsEnabled: this.getSectionsEnabled.bind(this), | ||
getAllSections: this.getAllSections.bind(this), | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe these functions could be defined here directly.
private sharedInterface = {
getSection: (sectionId: ManagementSection['id']) =>
this.sections.find(section => section.id === sectionId),
getSectionsEnabled: () =>
this.sections
.filter(section => section.getAppsEnabled().length > 0)
.sort((a, b) => a.order - b.order),
getAllSections: () => this.sections,
};
getAllSections: this.getAllSections.bind(this), | ||
}; | ||
|
||
public setup = ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Curious, why is setup
defined as instance member instead of a method?
public setup = ( | |
public setup( |
}; | ||
}; | ||
|
||
public start = (navigateToApp: CoreStart['application']['navigateToApp']) => ({ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
public start = (navigateToApp: CoreStart['application']['navigateToApp']) => ({ | |
public start(navigateToApp: CoreStart['application']['navigateToApp']) => ({ |
mobileTitle={this.renderMobileTitle()} | ||
isOpenOnMobile={this.state.isSideNavOpenOnMobile} | ||
toggleOpenOnMobile={this.toggleOpenOnMobile} | ||
// @ts-ignore |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This comment seems not necessary.
|
||
const sectionVisible = (section: LegacySection | LegacyApp) => !section.disabled && section.visible; | ||
|
||
export const sideNavItems = (sections: ManagementSection[], selectedId: string) => |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
export const sideNavItems = (sections: ManagementSection[], selectedId: string) => | |
const sideNavItems = (sections: ManagementSection[], selectedId: string) => |
@@ -22,7 +22,7 @@ import { IndexedArray } from '../../../../legacy/ui/public/indexed_array'; | |||
|
|||
const listeners = []; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Curious, why listerners
are defined at module scope instead of being a member of LegacyManagementSection
instance.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No particular reason. I'd prefer to leave it alone since this pr doesn't modify that file and the legacy code will be removed soon.
} | ||
|
||
export type ManagementSectionMount = ( | ||
params: ManagementAppMountParams |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
From the RFC my understanding was that Management app would use core's context containers, i.e. this function would have initial context
argument:
params: ManagementAppMountParams | |
context, params: ManagementAppMountParams |
Here is the RFC example.
And it would be implement like in this example.
But since the RFC context containers were deprecated and platform team said they will replace them by the Binder Service. Not sure what the status is on the binder service, and if there was a discussion to use the binder service here instead. Is it planned to be used here?
Currently I understand the plugins using Management app should instead use core.getStartServices()
method to receive the start core
and plugins
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Perhaps we should have a conversation with @joshdover about this. I've been confused about the purpose of context containers and I'm therefore uncertain of anything we're discussing in relationship to them.
Let's discuss via slack or zoom since I think we should even up on needs / expectations before talking interfaces.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
spoke with @streamich and his questions are mainly regarding what the platform team is providing rather than this implementation.
getSections={getSections} | ||
selectedId={id} | ||
legacySections={getLegacyManagementSections().items} | ||
mountedCallback={async element => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
mountedCallback={async element => { | |
onMount={async element => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also, maybe instead of handling mount/unmount here, the <ManagementChrome>
component could receive the mount
function and handle the mount/unmount internally?
<ManagementChrome
mount={() => mount({
basePath,
element,
setBreadcrumbs,
})}
/>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I've left this alone as my attempt at this didn't simplify things. I kind of like keeping ManagementChrome
dumb, at least its a very simple separation of concerns.
@streamich about the icon suggestion - I do think that it would be better to have a fallback icon for sections without an icon. @elastic/kibana-design |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The test plugin is a great addition!
It would have been nice if this PR used ManagementChrome
in core_plugins
already, but I assume this can be done in a follow up PR.
I also support most of @streamich comments.
Otherwise, tested on Ubuntu \ Chrome and LGTM.
@streamich regarding alignment without an icon - that strikes me as an EUI issue. |
It's not an EUI issue, as we do allow the list to have no icons and therefore needs to be fully left aligned.
Simply use the |
* implement management new platform api
* master: (23 commits) [Vis: Default editor] Reactify the timelion editor (elastic#52990) [Discover] fix histogram min interval (elastic#53979) [Telemetry] [Monitoring] Only retry fetching usage once monito… (elastic#54309) [docs][APM] Add runtime index config documentation (elastic#53907) [SIEM] Detection engine timeline (elastic#53783) Filter scripted fields preview field list to source fields (elastic#53826) Management - New platform api (elastic#52579) Reset region and Account when switching inventory (elastic#54287) [SIEM] [Case] Case workflow api schema (elastic#51535) Code coverage setup on CI (elastic#49003) [ML] DF Analytics Results: adds link to docs (elastic#54189) Update schemas boolean, byteSize, and duration to coerce strings (elastic#54177) [Metrics UI] Pass relevant shouldAllowEdit capabilities into SettingsPage (elastic#49781) [Canvas] Fixes bugs with autoplay and refresh (elastic#53149) [ML] DF Analytics Classification: ensure confusion matrix can be fetched (elastic#53629) Fix Vega react eslint errors (elastic#54259) Remove non existing codeowners (elastic#54274) use correct type (elastic#54244) [Dashboard] Removing 100% as dshDashboardViewport height (elastic#54263) add `examples/` to no-restricted-path config (elastic#54252) ...
💚 Build SucceededHistory
To update your PR or re-run it, just comment with: |
Summary
Addresses #51540
Implements Kibana platform management api along side the legacy management api, as documented here - #43631
but with the following modifications
getAvailable
has been removed. It depends upon thecapabilities
api but this is an incomplete solution for determining whether a given management app should be displayed.ManagementApp
will provideenable
anddisable
methods which plugins can use as appropriate.getEnabledApps
replaces it, which filters on enabled and sorts on order.mount
function forManagementApp
will provide asetBreadcrumbs
function available via theparams
argument. It providescore.chrome.setBreadcrumbs
functionality but provides the top level breadcrumb.Implementation note - Each management section is registered as a top level app inside a ui chrome (the management sidebar) rather than a single management app with extensions.
Checklist
Use
strikethroughsto remove checklist items you don't feel are applicable to this PR.[ ] This was checked for cross-browser compatibility, including a check against IE11[ ] Any text added follows EUI's writing guidelines, uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/master/packages/kbn-i18n/README.md)[ ] Documentation was added for features that require explanation or tutorials[ ] This was checked for keyboard-only and screenreader accessibilityFor maintainers
Dev Docs
Management API for Kibana Platform
Management API for Kibana Platform implemented. Demonstration code available at
test/plugin_functional/plugins/management_test_plugin/public/plugin.tsx