forked from elastic/kibana
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
🌊 Streams: Management base page (elastic#201649)
<img width="659" alt="Screenshot 2024-11-25 at 17 50 18" src="https://github.com/user-attachments/assets/1f623207-a5cb-4a76-9d0e-c4ff811ab854"> This PR adds an empty placeholder for the different parts of the management tab which will be filled later on by follow-up PRs like elastic#201427 Changes: * Make the whole tree of wrapper elements flex so eventual page content can easily grow to the full height of the viewport. This is important for the preview view for routing and parsing. Doing this required some changes to existing listing and detail pages which just took the part of the page they actually needed. The changes come down to setting `grow: false` on the header wrapper and `grow: true` on the content wrapper * Introduce another routing layer: `{key}/{tab}/{subtab}` to support the two-leveled tabs of management. As our routing helpers don't support optional path variables, I slightly extended them to pass through the `optional` flag so the stream detail component can try to parse the path for both key/tab and key/tab/subtab and go with whatever works. * Add the second tabbing layer for the management view component and add placeholders for the three subtabs we are going to need. * Pass through a callback to refresh the stream definition that's passed down - this will come in handy in the various management views because the user can make changes and we want to update the stream definition once the change is submitted --------- Co-authored-by: Dario Gieselaar <[email protected]>
- Loading branch information
1 parent
01c18c2
commit 40411b4
Showing
12 changed files
with
287 additions
and
99 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
18 changes: 18 additions & 0 deletions
18
x-pack/plugins/streams_app/public/components/stream_detail_enriching/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
| import { StreamDefinition } from '@kbn/streams-plugin/common'; | ||
| import React from 'react'; | ||
|
|
||
| export function StreamDetailEnriching({ | ||
| definition: _definition, | ||
| refreshDefinition: _refreshDefinition, | ||
| }: { | ||
| definition?: StreamDefinition; | ||
| refreshDefinition: () => void; | ||
| }) { | ||
| return <>{'TODO'}</>; | ||
| } |
92 changes: 92 additions & 0 deletions
92
x-pack/plugins/streams_app/public/components/stream_detail_management/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
| import React from 'react'; | ||
| import { i18n } from '@kbn/i18n'; | ||
| import { StreamDefinition } from '@kbn/streams-plugin/common'; | ||
| import { EuiButtonGroup, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; | ||
| import { useStreamsAppParams } from '../../hooks/use_streams_app_params'; | ||
| import { RedirectTo } from '../redirect_to'; | ||
| import { useStreamsAppRouter } from '../../hooks/use_streams_app_router'; | ||
| import { StreamDetailRouting } from '../stream_detail_routing'; | ||
| import { StreamDetailEnriching } from '../stream_detail_enriching'; | ||
| import { StreamDetailSchemaEditor } from '../stream_detail_schema_editor'; | ||
|
|
||
| type ManagementSubTabs = 'route' | 'enrich' | 'schemaEditor'; | ||
|
|
||
| function isValidManagementSubTab(value: string): value is ManagementSubTabs { | ||
| return ['route', 'enrich', 'schemaEditor'].includes(value); | ||
| } | ||
|
|
||
| export function StreamDetailManagement({ | ||
| definition, | ||
| refreshDefinition, | ||
| }: { | ||
| definition?: StreamDefinition; | ||
| refreshDefinition: () => void; | ||
| }) { | ||
| const { | ||
| path: { key, subtab }, | ||
| } = useStreamsAppParams('/{key}/management/{subtab}'); | ||
| const router = useStreamsAppRouter(); | ||
|
|
||
| const tabs = { | ||
| route: { | ||
| content: ( | ||
| <StreamDetailRouting definition={definition} refreshDefinition={refreshDefinition} /> | ||
| ), | ||
| label: i18n.translate('xpack.streams.streamDetailView.routingTab', { | ||
| defaultMessage: 'Streams Partitioning', | ||
| }), | ||
| }, | ||
| enrich: { | ||
| content: ( | ||
| <StreamDetailEnriching definition={definition} refreshDefinition={refreshDefinition} /> | ||
| ), | ||
| label: i18n.translate('xpack.streams.streamDetailView.enrichingTab', { | ||
| defaultMessage: 'Extract field', | ||
| }), | ||
| }, | ||
| schemaEditor: { | ||
| content: ( | ||
| <StreamDetailSchemaEditor definition={definition} refreshDefinition={refreshDefinition} /> | ||
| ), | ||
| label: i18n.translate('xpack.streams.streamDetailView.schemaEditorTab', { | ||
| defaultMessage: 'Schema editor', | ||
| }), | ||
| }, | ||
| }; | ||
|
|
||
| if (!isValidManagementSubTab(subtab)) { | ||
| return ( | ||
| <RedirectTo path="/{key}/management/{subtab}" params={{ path: { key, subtab: 'route' } }} /> | ||
| ); | ||
| } | ||
|
|
||
| const selectedTabObject = tabs[subtab]; | ||
|
|
||
| return ( | ||
| <EuiFlexGroup direction="column" gutterSize="none"> | ||
| <EuiFlexItem grow={false}> | ||
| <EuiButtonGroup | ||
| legend="Management tabs" | ||
| idSelected={subtab} | ||
| onChange={(optionId) => { | ||
| router.push('/{key}/management/{subtab}', { | ||
| path: { key, subtab: optionId }, | ||
| query: {}, | ||
| }); | ||
| }} | ||
| options={Object.keys(tabs).map((id) => ({ | ||
| id, | ||
| label: tabs[id as ManagementSubTabs].label, | ||
| }))} | ||
| /> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem grow>{selectedTabObject.content}</EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
18 changes: 18 additions & 0 deletions
18
x-pack/plugins/streams_app/public/components/stream_detail_routing/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
| import { StreamDefinition } from '@kbn/streams-plugin/common'; | ||
| import React from 'react'; | ||
|
|
||
| export function StreamDetailRouting({ | ||
| definition: _definition, | ||
| refreshDefinition: _refreshDefinition, | ||
| }: { | ||
| definition?: StreamDefinition; | ||
| refreshDefinition: () => void; | ||
| }) { | ||
| return <>{'TODO'}</>; | ||
| } |
18 changes: 18 additions & 0 deletions
18
x-pack/plugins/streams_app/public/components/stream_detail_schema_editor/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
| import { StreamDefinition } from '@kbn/streams-plugin/common'; | ||
| import React from 'react'; | ||
|
|
||
| export function StreamDetailSchemaEditor({ | ||
| definition: _definition, | ||
| refreshDefinition: _refreshDefinition, | ||
| }: { | ||
| definition?: StreamDefinition; | ||
| refreshDefinition: () => void; | ||
| }) { | ||
| return <>{'TODO'}</>; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.