-
Notifications
You must be signed in to change notification settings - Fork 8k
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
[Monitoring] [Logstash] Add Config View #18597
Changes from all commits
9c4d9d1
47e90ba
d7e8f9c
9ccd97d
7aceaf9
c27d4b3
208f1cc
f56cfd4
7c1c9a1
096c7da
bcdbfa8
406d2be
97c7b77
6474119
79b7172
1add4c1
ca7d35b
fcb8407
f43affe
7fa88d5
c35d134
431edbc
39459e7
669ca91
a05f5d0
4d87d52
32946d2
f3e9927
5254c70
33d6413
8c7b9e0
a3b9bed
0ab6b51
56d77f1
fcb2452
c580e5e
c7a92de
4536b27
d845795
1f667cc
da426f3
1689b94
c991bb1
a91dc56
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
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. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 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. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 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, | ||
}; |
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