[Monitoring] [Logstash] Add Config View #18597
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
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,121 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License; | ||
| * you may not use this file except in compliance with the Elastic License. | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| import { | ||
| EuiButtonEmpty, | ||
| EuiButtonIcon, | ||
| EuiCodeBlock, | ||
| EuiFlexGroup, | ||
| EuiFlexItem | ||
| } from '@elastic/eui'; | ||
|
|
||
| function renderStatementName(name, onVertexSelected) { | ||
| return ( | ||
| <EuiFlexItem | ||
| grow={false} | ||
| key="statementName" | ||
| > | ||
| <EuiButtonEmpty | ||
| color="text" | ||
| size="xs" | ||
| onClick={onVertexSelected} | ||
| flush="left" | ||
| > | ||
| <span className="configViewer__conditional">{name}</span> | ||
| </EuiButtonEmpty> | ||
| </EuiFlexItem> | ||
| ); | ||
| } | ||
|
|
||
| function renderIfStatement({ condition }, onVertexSelected) { | ||
| return [ | ||
| renderStatementName('if', onVertexSelected), | ||
| ( | ||
| <EuiFlexItem | ||
| key="ifContent" | ||
| grow={false} | ||
| > | ||
| <EuiCodeBlock | ||
| fontSize="s" | ||
| paddingSize="none" | ||
| transparentBackground={true} | ||
| > | ||
| {condition} | ||
| </EuiCodeBlock> | ||
| </EuiFlexItem> | ||
| ) | ||
| ]; | ||
| } | ||
|
|
||
| function getStatementBody({ | ||
| isIf, | ||
| statement, | ||
| statement: { vertex }, | ||
| onShowVertexDetails | ||
| }) { | ||
| const showVertexDetailsClicked = () => { onShowVertexDetails(vertex); }; | ||
|
|
||
| return isIf | ||
| ? renderIfStatement(statement, showVertexDetailsClicked) | ||
| : renderStatementName('else', showVertexDetailsClicked); | ||
| } | ||
|
|
||
| function getToggleIconType(isCollapsed) { | ||
| return isCollapsed ? 'arrowRight' : 'arrowDown'; | ||
| } | ||
|
|
||
| export function CollapsibleStatement(props) { | ||
| const { | ||
| collapse, | ||
| expand, | ||
| id, | ||
| isCollapsed | ||
| } = props; | ||
|
|
||
| const toggleClicked = () => { | ||
| if (isCollapsed) { | ||
| expand(id); | ||
| } else { | ||
| collapse(id); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <EuiFlexGroup | ||
| responsive={false} | ||
| gutterSize="none" | ||
| alignItems="center" | ||
| className="configViewer__statement" | ||
| > | ||
| <EuiFlexItem | ||
| key={id} | ||
| grow={false} | ||
| > | ||
| <EuiButtonIcon | ||
| aria-label | ||
| color="text" | ||
| iconType={getToggleIconType(isCollapsed)} | ||
| onClick={toggleClicked} | ||
| size="s" | ||
| /> | ||
| </EuiFlexItem> | ||
| {getStatementBody(props)} | ||
|
There was a problem hiding this comment. This is more of a nice to have, so feel free to push it off to a future PR: It'd be nice if <CollapsibleStatement ...>
<IfStatement .../>
</CollapsibleStatement>or <CollapsibleStatement ...>
<ElseStatement .../>
</CollapsibleStatement>There was a problem hiding this comment. I'd prefer to do this in a separate PR so we can get these existing changes merged faster, especially since there aren't any functional ramifications. It's tracked in #19844 and I will update the PR's description to include that in the set of follow-up work. |
||
| </EuiFlexGroup> | ||
| ); | ||
| } | ||
|
|
||
| CollapsibleStatement.propTypes = { | ||
| collapse: PropTypes.func.isRequired, | ||
| expand: PropTypes.func.isRequired, | ||
| id: PropTypes.string.isRequired, | ||
| isIf: PropTypes.bool.isRequired, | ||
| isCollapsed: PropTypes.bool.isRequired, | ||
| onShowVertexDetails: PropTypes.func.isRequired, | ||
| statement: PropTypes.object.isRequired, | ||
| }; | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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 it is better to use an EuiIcon here? Along with the other areas using ad-hoc omg tags? But that's not a blocking item IMHO and is perhaps better in a followup PR anyway.
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'll create an issue to track it. These changes are indirect to the scope of this PR, it's based on some cleanup that Dave did after he updated the styles.
EDIT: #20021