EUIFication: Grok Debugger #20027
EUIFication: Grok Debugger #20027
Conversation
💔 Build Failed |
💔 Build Failed |
💔 Build Failed |
💔 Build Failed |
💔 Build Failed |
💔 Build Failed |
ycombinator
force-pushed
the
dev-tools/grokdebugger/eui-fication
branch
from
b47020c to
3049a9a
Compare
💔 Build Failed |
💔 Build Failed |
ycombinator
force-pushed
the
dev-tools/grokdebugger/eui-fication
branch
from
bf395b2 to
bcfadf0
Compare
💚 Build Succeeded |
| return ( | ||
| <EuiFormRow | ||
| label="Structured Data" | ||
| data-test-subj="aceEventOutput" |
There was a problem hiding this comment.
I think we need to add fullWidth here to make it expand to 100% width of the container.
| label="Structured Data" | ||
| data-test-subj="aceEventOutput" | ||
| > | ||
| <EuiCodeEditor |
There was a problem hiding this comment.
How about wrapping this in EuiPanel? Same for PatternInput, EventInput, and the code editor in CustomPatternsInput.
<EuiPanel paddingSize="s">
<EuiCodeEditor
mode="json"
isReadOnly
width="100%"
height="340px"
value={JSON.stringify(value, null, 2)}
setOptions={{
highlightActiveLine: false,
highlightGutterLine: false,
}}
/>
</EuiPanel>Then it will look like this:
| buttonContent="Custom Patterns" | ||
| data-test-subj="btnToggleCustomPatternsInput" | ||
| > | ||
| <EuiCallOut |
There was a problem hiding this comment.
How about adding a <EuiSpacer size="m" /> above this call out? This will give it a bit of breathing room:
ycombinator
force-pushed
the
dev-tools/grokdebugger/eui-fication
branch
from
9f5f05e to
68e948f
Compare
|
@cjcenizal Thanks for the UI feedback; I've made the changes you suggested and the UI looks much better! I've also updated the PR description with more-detailed test steps. Finally, I made some small code changes in 61faa84 and 68e948f to handle clearing out of state better. Ready for your 👀 again. |
💔 Build Failed |
|
|
||
| const app = uiModules.get('xpack/grokdebugger'); | ||
|
|
||
| app.directive('grokdebugger', function ($injector) { |
There was a problem hiding this comment.
Love how much less Angular I'm seeing in this PR!
|
CI is failing on Grok Debugger functional tests; I'm working on updating those. |
💚 Build Succeeded |
* Move <kbn-dev-tools-app> Angular wrapper directive usage into route template * Move sole directive into new directives folder * WIP checkin: basic conversion to React components * Fix sample custom patterns indentation * Remove custom CSS * Wrap button in EuiFormRow + define isSimulateDisabled * Wire up simulate * Cleanup * Ace formatting options * Better styling * Adding spacing between custom patterns and simulate button * Fixing form row widths * Removing form row around button * Add indentation/newlines in structured output * Error handling * Use constants * Removing no-longer-used code * Implement syntax highlighting via custom mode * Making functional tests pass * Adding trailing comma back * Removing fixed heights * Removing unnecessary styles * Make Event Output form row full width as well * Wrapping EuiCodeEditors in EuiPanels * Adding spacer before callout; making spacing around callout consistent * Clear out custom patterns from request if field is cleared out * Clear out simulation results before attempting simulation * Set state with untrimmed value
|
Backported to:
|
This PR converts the Grok Debugger code to use React and EUI components. There should be no functional changes to the Grok Debugger as a result of this PR.
Before this PR
After this PR
Testing this PR
The functional tests for this feature haven't changed in this PR (except a small change to how the Ace editor elements are selected) but if you want to test things manually, you just need to make sure that the following features work the same in this PR as they did before (in
master):