-
Notifications
You must be signed in to change notification settings - Fork 8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Monitoring] [Logstash] Add Config View (#18597)
* Patch ConfigView changes from x-pack-kibana to OSS Kibana. * Remove old css. * Update style for queue statement. * WIP modifying based on designer feedback. * Add flatten function and list class. * Rename functions to be more descriptive. * WIP checkin. Modify components to handle flattened object list. * Finish moving flatten logic into classes, add tests. * Simplify flattening, remove non-native dependency. Add more tests. * Add defaults to simplify function call. * Refactor two blocks into a function. * Begin adapting components for list. * Add collapse functionality. * Add expand functionality. * Nested collapsed elements remain collapsed on parent expansion. * Style section headers. * Update Plugin statement styles. * Add DetailDrawer support. * Update statement formatting. * Add stats to plugin element rows. * Resolve conflicts. * Remove obsolete code. * Reorganize code. * Remove warnings. * Add PropTypes. Add keys to arrays and iterables. * Update color for borders/buttons. * Add stat class. Clean up code. * Convert plugin statement component from class to function. * Update queue metrics message. * Update style to make view more responsive. * Change section heading size. * Remove gutter from metrics group. * Change name "stat" to "metric". * Remove obsolete export line, simplify declaration, based on PR feedback. * Add new functional component in place of model class. * Add PropTypes to several components. Rename a function. Add keys to metrics. * Convert stateless classes to functional components. * Prefer ES6 syntax over bindings for Component methods. * Do not render statement section if there are no statements. * design cleanup for pipeline viewer * Update CSS to add min-height to page. * Rename "elements" to "statements". Delete unused LESS variables. * Revert naming of "statements" to "elements" for StatementList component. * Update jest snapshots for DetailDrawer.
- Loading branch information
1 parent
5be1989
commit b01dc53
Showing
14 changed files
with
893 additions
and
53 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
121 changes: 121 additions & 0 deletions
121
...g/public/components/logstash/pipeline_viewer/views/config_viewer/collapsible_statement.js
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)} | ||
| </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.