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.
[SLOs] Show transformed roll up transform query (elastic#182829)
## Summary Show aggs query in transform and allow opening in dev tools directly <img width="1726" alt="image" src="https://github.com/elastic/kibana/assets/3505601/f54cd155-eaae-497f-b795-6e29916792b9"> --------- Co-authored-by: kibanamachine <[email protected]>
- Loading branch information
1 parent
91d2c5f
commit 5118fff
Showing
9 changed files
with
273 additions
and
60 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
41 changes: 41 additions & 0 deletions
41
...solution/slo/public/pages/slo_edit/components/common/slo_inspect/code_block_accordion.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,41 @@ | ||
| /* | ||
| * 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 React, { ReactNode } from 'react'; | ||
| import { EuiAccordion, EuiCodeBlock, EuiTitle } from '@elastic/eui'; | ||
|
|
||
| export function CodeBlockAccordion({ | ||
| id, | ||
| label, | ||
| json, | ||
| extraAction, | ||
| children, | ||
| }: { | ||
| id: string; | ||
| label: string; | ||
| json?: any; | ||
| extraAction?: ReactNode; | ||
| children?: ReactNode; | ||
| }) { | ||
| return ( | ||
| <EuiAccordion | ||
| id={id} | ||
| extraAction={extraAction} | ||
| buttonContent={ | ||
| <EuiTitle size="xs"> | ||
| <h3>{label}</h3> | ||
| </EuiTitle> | ||
| } | ||
| > | ||
| {children ?? ( | ||
| <EuiCodeBlock language="json" fontSize="m" paddingSize="m" isCopyable={true}> | ||
| {JSON.stringify(json, null, 2)} | ||
| </EuiCodeBlock> | ||
| )} | ||
| </EuiAccordion> | ||
| ); | ||
| } |
19 changes: 19 additions & 0 deletions
19
...bility_solution/slo/public/pages/slo_edit/components/common/slo_inspect/loading_state.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,19 @@ | ||
| /* | ||
| * 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, EuiLoadingSpinner } from '@elastic/eui'; | ||
| import React from 'react'; | ||
|
|
||
| export function LoadingState() { | ||
| return ( | ||
| <EuiFlexGroup alignItems="center" justifyContent="center" style={{ height: '100%' }}> | ||
| <EuiFlexItem grow={false}> | ||
| <EuiLoadingSpinner size="xl" /> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| ); | ||
| } |
124 changes: 124 additions & 0 deletions
124
...lity_solution/slo/public/pages/slo_edit/components/common/slo_inspect/req_code_viewer.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,124 @@ | ||
| /* | ||
| * 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. | ||
| */ | ||
|
|
||
| /* eslint-disable @elastic/eui/href-or-on-click */ | ||
|
|
||
| import { EuiButtonEmpty, EuiCopy, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui'; | ||
| import { i18n } from '@kbn/i18n'; | ||
| import { XJsonLang } from '@kbn/monaco'; | ||
| import React, { ReactNode, useCallback } from 'react'; | ||
| import { CodeEditor } from '@kbn/code-editor'; | ||
| import { compressToEncodedURIComponent } from 'lz-string'; | ||
| import { useKibana } from '../../../../../utils/kibana_react'; | ||
|
|
||
| interface RequestCodeViewerProps { | ||
| value: string; | ||
| } | ||
|
|
||
| const copyToClipboardLabel = i18n.translate('xpack.slo.requests.copyToClipboardLabel', { | ||
| defaultMessage: 'Copy to clipboard', | ||
| }); | ||
|
|
||
| export function RequestCodeViewer({ value }: RequestCodeViewerProps) { | ||
| const { | ||
| application: { navigateToUrl }, | ||
| share: { | ||
| url: { locators }, | ||
| }, | ||
| } = useKibana().services; | ||
|
|
||
| // "Open in Console" button | ||
| const devToolsDataUri = compressToEncodedURIComponent(value); | ||
| const consoleHref = locators | ||
| .get('CONSOLE_APP_LOCATOR') | ||
| ?.useUrl({ loadFrom: `data:text/plain,${devToolsDataUri}` }); | ||
|
|
||
| const handleDevToolsLinkClick = useCallback( | ||
| () => consoleHref && navigateToUrl && navigateToUrl(consoleHref), | ||
| [consoleHref, navigateToUrl] | ||
| ); | ||
|
|
||
| const actions: Array<{ name: string; action: ReactNode }> = []; | ||
|
|
||
| actions.push({ | ||
| name: 'openInConsole', | ||
| action: ( | ||
| <EuiButtonEmpty | ||
| size="xs" | ||
| flush="right" | ||
| iconType="wrench" | ||
| href={consoleHref} | ||
| onClick={handleDevToolsLinkClick} | ||
| data-test-subj="inspectorRequestOpenInConsoleButton" | ||
| > | ||
| {openInConsoleLabel} | ||
| </EuiButtonEmpty> | ||
| ), | ||
| }); | ||
|
|
||
| return ( | ||
| <EuiFlexGroup | ||
| direction="column" | ||
| gutterSize="s" | ||
| wrap={false} | ||
| responsive={false} | ||
| css={{ height: 800 }} | ||
| > | ||
| <EuiFlexItem grow={false}> | ||
| <EuiSpacer size="s" /> | ||
| <EuiFlexGroup justifyContent="flexEnd" gutterSize="m" wrap> | ||
| <EuiFlexItem grow={false}> | ||
| <div> | ||
| <EuiCopy textToCopy={value}> | ||
| {(copy) => ( | ||
| <EuiButtonEmpty | ||
| size="xs" | ||
| flush="right" | ||
| iconType="copyClipboard" | ||
| onClick={copy} | ||
| data-test-subj="inspectorRequestCopyClipboardButton" | ||
| > | ||
| {copyToClipboardLabel} | ||
| </EuiButtonEmpty> | ||
| )} | ||
| </EuiCopy> | ||
| </div> | ||
| </EuiFlexItem> | ||
| {!!actions && | ||
| actions.map((item) => ( | ||
| <EuiFlexItem grow={false} key={item.name}> | ||
| <div>{item.action}</div> | ||
| </EuiFlexItem> | ||
| ))} | ||
| </EuiFlexGroup> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem grow={true} data-test-subj="inspectorRequestCodeViewerContainer"> | ||
| <CodeEditor | ||
| languageId={XJsonLang.ID} | ||
| value={value} | ||
| options={{ | ||
| readOnly: true, | ||
| lineNumbers: 'off', | ||
| fontSize: 12, | ||
| minimap: { | ||
| enabled: false, | ||
| }, | ||
| folding: true, | ||
| scrollBeyondLastLine: false, | ||
| wordWrap: 'on', | ||
| wrappingIndent: 'indent', | ||
| automaticLayout: true, | ||
| }} | ||
| /> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| ); | ||
| } | ||
|
|
||
| const openInConsoleLabel = i18n.translate('xpack.slo.requests.openInConsoleLabel', { | ||
| defaultMessage: 'Open in Console', | ||
| }); |
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
Oops, something went wrong.