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.
feat(investigate): add basic esql widget back (elastic#189092)
Related to elastic#189091 This PR decouples the NotesWidget and EsqlWidget from the previous AddWidgetUI, so we can have them both on the page. It's a step forward the expected design. There is some missing element, like the visualization selector which I'll add later. I've also removed the global kuery filter as it is not on the design. Things not implemented in this PR: - edit widget - date range filter (using default 15min from the page) - lot of cleanup of unused feature Screenshots | -- |   Testing: - Run some data forge scripts: `node x-pack/scripts/data_forge.js --events-per-cycle 50 --lookback now-3d --dataset fake_stack --install-kibana-assets --kibana-url http://localhost:5601/kibana` - Go to http://localhost:5601/kibana/app/investigate/new#/ - Create an observation chart based on this esql query: `FROM kbn-data-forge-fake_stack.admin-console-* | keep @timestamp, http.response.* | LIMIT 103` --------- Co-authored-by: kibanamachine <[email protected]> Co-authored-by: Panagiota Mitsopoulou <[email protected]>
- Loading branch information
3 people
authored
Jul 29, 2024
1 parent
5a09ec9
commit 829d22c
Showing
23 changed files
with
249 additions
and
960 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
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
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
26 changes: 26 additions & 0 deletions
26
...ck/plugins/observability_solution/investigate_app/public/components/add_note_ui/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,26 @@ | ||
| /* | ||
| * 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 { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; | ||
| import type { AuthenticatedUser } from '@kbn/core/public'; | ||
| import type { GlobalWidgetParameters, OnWidgetAdd } from '@kbn/investigate-plugin/public'; | ||
| import React from 'react'; | ||
| import { NoteWidgetControl } from '../note_widget_control'; | ||
|
|
||
| type AddWidgetUIProps = { | ||
| user: Pick<AuthenticatedUser, 'full_name' | 'username'>; | ||
| onWidgetAdd: OnWidgetAdd; | ||
| } & GlobalWidgetParameters; | ||
|
|
||
| export function AddNoteUI({ user, onWidgetAdd }: AddWidgetUIProps) { | ||
| return ( | ||
| <EuiFlexGroup direction="column" gutterSize="s"> | ||
| <EuiFlexItem grow={false}> | ||
| <NoteWidgetControl user={user} onWidgetAdd={onWidgetAdd} /> | ||
| </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
152 changes: 152 additions & 0 deletions
152
...ins/observability_solution/investigate_app/public/components/add_observation_ui/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,152 @@ | ||
| /* | ||
| * 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 { EuiButton, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiPanel, EuiTitle } from '@elastic/eui'; | ||
| import { css } from '@emotion/css'; | ||
| import { TextBasedLangEditor } from '@kbn/esql/public'; | ||
| import { i18n } from '@kbn/i18n'; | ||
| import { GlobalWidgetParameters, OnWidgetAdd } from '@kbn/investigate-plugin/public'; | ||
| import React from 'react'; | ||
| import { EsqlWidgetPreview } from './esql_widget_preview'; | ||
|
|
||
| type Props = { | ||
| onWidgetAdd: OnWidgetAdd; | ||
| } & GlobalWidgetParameters; | ||
|
|
||
| const emptyPreview = css` | ||
| padding: 36px 0px 36px 0px; | ||
| `; | ||
|
|
||
| export function AddObservationUI({ onWidgetAdd, timeRange, filters }: Props) { | ||
| const [isOpen, setIsOpen] = React.useState(false); | ||
|
|
||
| const [isExpanded, setIsExpanded] = React.useState(false); | ||
| const [query, setQuery] = React.useState({ esql: '' }); | ||
| const [submittedQuery, setSubmittedQuery] = React.useState({ esql: '' }); | ||
| const [isPreviewOpen, setIsPreviewOpen] = React.useState(false); | ||
|
|
||
| const resetState = () => { | ||
| setIsExpanded(false); | ||
| setIsPreviewOpen(false); | ||
| setQuery({ esql: '' }); | ||
| setSubmittedQuery({ esql: '' }); | ||
| }; | ||
|
|
||
| if (!isOpen) { | ||
| return ( | ||
| <EuiFlexGroup gutterSize="s" direction="row" alignItems="flexEnd"> | ||
| <EuiFlexItem grow={true}> | ||
| <EuiButton | ||
| data-test-subj="investigateAppAddObservationUIAddAnObservationChartButton" | ||
| iconType="plusInCircle" | ||
| onClick={() => setIsOpen(true)} | ||
| > | ||
| {i18n.translate( | ||
| 'xpack.investigateApp.addObservationUI.addAnObservationChartButtonLabel', | ||
| { defaultMessage: 'Add an observation chart' } | ||
| )} | ||
| </EuiButton> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <EuiPanel paddingSize="l" grow={false}> | ||
| <EuiFlexGroup direction="column" gutterSize="m"> | ||
| <EuiFlexItem grow={true}> | ||
| <EuiTitle size="s"> | ||
| <h3> | ||
| {i18n.translate( | ||
| 'xpack.investigateApp.addObservationUI.h2.addAnObservationChartLabel', | ||
| { defaultMessage: 'Add an observation chart' } | ||
| )} | ||
| </h3> | ||
| </EuiTitle> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem grow={true}> | ||
| <EuiPanel color="subdued" hasShadow={false}> | ||
| <EuiFlexGroup direction="column" gutterSize="m"> | ||
| <EuiFlexItem> | ||
| <TextBasedLangEditor | ||
| query={query} | ||
| onTextLangQueryChange={setQuery} | ||
| onTextLangQuerySubmit={async (nextSubmittedQuery) => { | ||
| if (nextSubmittedQuery) { | ||
| setSubmittedQuery(nextSubmittedQuery); | ||
| setIsPreviewOpen(true); | ||
| } | ||
| }} | ||
| errors={undefined} | ||
| warning={undefined} | ||
| expandCodeEditor={(expanded: boolean) => { | ||
| setIsExpanded(() => expanded); | ||
| }} | ||
| isCodeEditorExpanded={isExpanded} | ||
| hideMinimizeButton={false} | ||
| editorIsInline={false} | ||
| hideRunQueryText | ||
| isLoading={false} | ||
| disableSubmitAction | ||
| isDisabled={false} | ||
| hideTimeFilterInfo | ||
| /> | ||
| </EuiFlexItem> | ||
|
|
||
| {!isPreviewOpen ? ( | ||
| <EuiFlexGroup | ||
| direction="column" | ||
| alignItems="center" | ||
| gutterSize="l" | ||
| className={emptyPreview} | ||
| > | ||
| <EuiFlexItem grow={false}> | ||
| <EuiIcon type="image" size="xxl" /> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem grow={false}> | ||
| <p> | ||
| {i18n.translate( | ||
| 'xpack.investigateApp.addObservationUI.p.selectADataSourceLabel', | ||
| { defaultMessage: 'Select a data source to generate a preview chart' } | ||
| )} | ||
| </p> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| ) : ( | ||
| <EsqlWidgetPreview | ||
| filters={filters} | ||
| esqlQuery={submittedQuery.esql} | ||
| timeRange={timeRange} | ||
| onWidgetAdd={(widget) => { | ||
| resetState(); | ||
| return onWidgetAdd(widget); | ||
| }} | ||
| /> | ||
| )} | ||
| </EuiFlexGroup> | ||
| </EuiPanel> | ||
| </EuiFlexItem> | ||
| <EuiFlexGroup> | ||
| <EuiFlexItem grow={false}> | ||
| <EuiButton | ||
| color="text" | ||
| data-test-subj="investigateAppAddObservationUICancelButton" | ||
| onClick={() => { | ||
| resetState(); | ||
| setIsOpen(false); | ||
| }} | ||
| > | ||
| {i18n.translate('xpack.investigateApp.addObservationUI.cancelButtonLabel', { | ||
| defaultMessage: 'Cancel', | ||
| })} | ||
| </EuiButton> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| </EuiFlexGroup> | ||
| </EuiPanel> | ||
| ); | ||
| } |
Oops, something went wrong.