mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 01:13:23 -04:00
Bump React@17 (#128239)
This commit is contained in:
Patryk Kopyciński
GitHub
parent
65e48ac3c8
commit
5b7a8d84cb
139 changed files with 1118 additions and 1758 deletions
72
package.json
72
package.json
|
|
@ -91,6 +91,8 @@
|
|||
"**/refractor/prismjs": "~1.27.0",
|
||||
"**/trim": "1.0.1",
|
||||
"**/typescript": "4.6.3",
|
||||
"**/use-composed-ref": "^1.3.0",
|
||||
"**/use-latest": "^1.2.1",
|
||||
"@tanstack/query-core": "^4.2.1",
|
||||
"globby/fast-glob": "3.2.7",
|
||||
"puppeteer/node-fetch": "^2.6.7"
|
||||
|
|
@ -390,7 +392,7 @@
|
|||
"color": "^4.2.3",
|
||||
"commander": "^4.1.1",
|
||||
"compare-versions": "3.5.1",
|
||||
"constate": "^1.3.2",
|
||||
"constate": "^3.3.2",
|
||||
"content-disposition": "^0.5.4",
|
||||
"copy-to-clipboard": "^3.0.8",
|
||||
"core-js": "^3.23.5",
|
||||
|
|
@ -499,7 +501,7 @@
|
|||
"pluralize": "3.1.0",
|
||||
"polished": "^3.7.2",
|
||||
"pretty-ms": "6.0.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"prop-types": "^15.8.1",
|
||||
"proxy-from-env": "1.0.0",
|
||||
"puid": "1.0.7",
|
||||
"puppeteer": "^10.2.0",
|
||||
|
|
@ -507,38 +509,38 @@
|
|||
"rbush": "^3.0.1",
|
||||
"re-resizable": "^6.1.1",
|
||||
"re2": "1.17.4",
|
||||
"react": "^16.14.0",
|
||||
"react": "^17.0.2",
|
||||
"react-ace": "^7.0.5",
|
||||
"react-beautiful-dnd": "^13.1.0",
|
||||
"react-color": "^2.13.8",
|
||||
"react-dom": "^16.14.0",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-dropzone": "^4.2.9",
|
||||
"react-fast-compare": "^2.0.4",
|
||||
"react-grid-layout": "^0.16.2",
|
||||
"react-focus-on": "^3.6.0",
|
||||
"react-grid-layout": "^1.3.4",
|
||||
"react-hook-form": "^7.30.0",
|
||||
"react-intl": "^2.8.0",
|
||||
"react-is": "^16.13.1",
|
||||
"react-markdown": "^4.3.1",
|
||||
"react-is": "^17.0.2",
|
||||
"react-markdown": "^6.0.3",
|
||||
"react-moment-proptypes": "^1.7.0",
|
||||
"react-monaco-editor": "^0.41.2",
|
||||
"react-popper-tooltip": "^2.10.1",
|
||||
"react-redux": "^7.2.0",
|
||||
"react-resizable": "^1.7.5",
|
||||
"react-resize-detector": "^4.2.0",
|
||||
"react-reverse-portal": "^1.0.4",
|
||||
"react-popper-tooltip": "^3.1.1",
|
||||
"react-redux": "^7.2.8",
|
||||
"react-resizable": "^3.0.4",
|
||||
"react-resize-detector": "^7.1.1",
|
||||
"react-reverse-portal": "^2.1.0",
|
||||
"react-router": "^5.2.0",
|
||||
"react-router-config": "^5.1.1",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"react-router-redux": "^4.0.8",
|
||||
"react-shortcuts": "^2.0.0",
|
||||
"react-sizeme": "^2.6.6",
|
||||
"react-shortcuts": "^2.1.0",
|
||||
"react-sizeme": "^3.0.2",
|
||||
"react-syntax-highlighter": "^15.3.1",
|
||||
"react-tiny-virtual-list": "^2.2.0",
|
||||
"react-use": "^15.3.8",
|
||||
"react-virtualized": "^9.21.2",
|
||||
"react-virtualized": "^9.22.3",
|
||||
"react-vis": "^1.8.1",
|
||||
"react-visibility-sensor": "^5.1.1",
|
||||
"recompose": "^0.26.0",
|
||||
"recompose": "^0.30.0",
|
||||
"reduce-reducers": "^1.0.4",
|
||||
"redux": "^4.1.0",
|
||||
"redux-actions": "^2.6.5",
|
||||
|
|
@ -694,11 +696,13 @@
|
|||
"@storybook/addon-storyshots": "^6.4.22",
|
||||
"@storybook/addons": "^6.4.22",
|
||||
"@storybook/api": "^6.4.22",
|
||||
"@storybook/client-api": "^6.4.22",
|
||||
"@storybook/components": "^6.4.22",
|
||||
"@storybook/core": "^6.4.22",
|
||||
"@storybook/core-common": "^6.4.22",
|
||||
"@storybook/core-events": "^6.4.22",
|
||||
"@storybook/node-logger": "^6.4.22",
|
||||
"@storybook/preview-web": "^6.4.22",
|
||||
"@storybook/react": "^6.4.22",
|
||||
"@storybook/testing-react": "^1.2.4",
|
||||
"@storybook/theming": "^6.4.22",
|
||||
|
|
@ -734,7 +738,7 @@
|
|||
"@types/deep-freeze-strict": "^1.1.0",
|
||||
"@types/delete-empty": "^2.0.0",
|
||||
"@types/ejs": "^3.0.6",
|
||||
"@types/enzyme": "^3.10.8",
|
||||
"@types/enzyme": "^3.10.12",
|
||||
"@types/eslint": "^7.28.0",
|
||||
"@types/express": "^4.17.13",
|
||||
"@types/extract-zip": "^1.6.2",
|
||||
|
|
@ -761,7 +765,6 @@
|
|||
"@types/intl-relativeformat": "^2.1.0",
|
||||
"@types/jest": "^26.0.22",
|
||||
"@types/jest-axe": "^3.5.3",
|
||||
"@types/jest-specific-snapshot": "^0.5.5",
|
||||
"@types/joi": "^17.2.3",
|
||||
"@types/jquery": "^3.3.31",
|
||||
"@types/js-levenshtein": "^1.1.0",
|
||||
|
|
@ -1065,23 +1068,22 @@
|
|||
"@types/pngjs": "^3.4.0",
|
||||
"@types/prettier": "^2.3.2",
|
||||
"@types/pretty-ms": "^5.0.0",
|
||||
"@types/prop-types": "^15.7.3",
|
||||
"@types/prop-types": "^15.7.5",
|
||||
"@types/rbush": "^3.0.0",
|
||||
"@types/react": "^16.14.25",
|
||||
"@types/react": "^17.0.45",
|
||||
"@types/react-beautiful-dnd": "^13.0.0",
|
||||
"@types/react-dom": "^16.9.15",
|
||||
"@types/react-grid-layout": "^0.16.7",
|
||||
"@types/react-dom": "^17.0.17",
|
||||
"@types/react-grid-layout": "^1.3.2",
|
||||
"@types/react-intl": "^2.3.15",
|
||||
"@types/react-is": "^16.7.2",
|
||||
"@types/react-redux": "^7.1.9",
|
||||
"@types/react-resize-detector": "^4.0.1",
|
||||
"@types/react-is": "^17.0.3",
|
||||
"@types/react-resize-detector": "^6.1.0",
|
||||
"@types/react-router": "^5.1.7",
|
||||
"@types/react-router-config": "^5.0.2",
|
||||
"@types/react-router-dom": "^5.1.5",
|
||||
"@types/react-test-renderer": "^16.9.1",
|
||||
"@types/react-virtualized": "^9.18.7",
|
||||
"@types/react-test-renderer": "^17.0.2",
|
||||
"@types/react-virtualized": "^9.21.21",
|
||||
"@types/react-vis": "^1.11.9",
|
||||
"@types/recompose": "^0.30.6",
|
||||
"@types/recompose": "^0.30.10",
|
||||
"@types/reduce-reducers": "^1.0.0",
|
||||
"@types/redux-actions": "^2.6.1",
|
||||
"@types/redux-logger": "^3.0.8",
|
||||
|
|
@ -1121,6 +1123,7 @@
|
|||
"@typescript-eslint/eslint-plugin": "^5.20.0",
|
||||
"@typescript-eslint/parser": "^5.20.0",
|
||||
"@typescript-eslint/typescript-estree": "^5.20.0",
|
||||
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
|
||||
"@yarnpkg/lockfile": "^1.1.0",
|
||||
"abab": "^2.0.4",
|
||||
"aggregate-error": "^3.1.0",
|
||||
|
|
@ -1166,8 +1169,6 @@
|
|||
"dpdm": "3.5.0",
|
||||
"ejs": "^3.1.8",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-adapter-react-16": "^1.15.6",
|
||||
"enzyme-adapter-utils": "^1.14.0",
|
||||
"enzyme-to-json": "^3.6.1",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
|
|
@ -1215,16 +1216,15 @@
|
|||
"jest-config": "^26",
|
||||
"jest-diff": "^26.6.2",
|
||||
"jest-environment-jsdom": "^26.6.2",
|
||||
"jest-environment-jsdom-thirteen": "^1.0.1",
|
||||
"jest-mock": "^26.6.2",
|
||||
"jest-raw-loader": "^1.0.1",
|
||||
"jest-runtime": "^26",
|
||||
"jest-silent-reporter": "^0.5.0",
|
||||
"jest-snapshot": "^26.6.2",
|
||||
"jest-specific-snapshot": "2.0.0",
|
||||
"jest-specific-snapshot": "^4.0.0",
|
||||
"jest-styled-components": "^7.0.3",
|
||||
"jimp": "^0.14.0",
|
||||
"jsdom": "13.1.0",
|
||||
"jsdom": "^16.4.0",
|
||||
"json-schema-typed": "^8.0.1",
|
||||
"json5": "^1.0.1",
|
||||
"jsondiffpatch": "0.4.1",
|
||||
|
|
@ -1264,10 +1264,10 @@
|
|||
"proxy": "^1.0.2",
|
||||
"q": "^1.5.1",
|
||||
"raw-loader": "^3.1.0",
|
||||
"react-test-renderer": "^16.14.0",
|
||||
"react-test-renderer": "^17.0.2",
|
||||
"regenerate": "^1.4.0",
|
||||
"resolve": "^1.22.0",
|
||||
"rxjs-marbles": "^5.0.6",
|
||||
"rxjs-marbles": "^7.0.1",
|
||||
"sass-loader": "^10.3.1",
|
||||
"selenium-webdriver": "^4.4.0",
|
||||
"simple-git": "^3.10.0",
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
import React, { Fragment } from 'react';
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { filter } from 'rxjs/operators';
|
||||
import { Subscription } from 'rxjs';
|
||||
|
|
@ -72,7 +72,7 @@ export class UserBannerService {
|
|||
</div>
|
||||
}
|
||||
>
|
||||
<ReactMarkdownLazy renderers={{ root: Fragment }} source={content.trim()} />
|
||||
<ReactMarkdownLazy>{content.trim()}</ReactMarkdownLazy>
|
||||
</React.Suspense>
|
||||
|
||||
<EuiButton type="primary" size="s" onClick={() => banners.remove(id!)}>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,6 @@
|
|||
*/
|
||||
|
||||
import { configure } from 'enzyme';
|
||||
import Adapter from 'enzyme-adapter-react-16';
|
||||
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
|
||||
|
||||
configure({ adapter: new Adapter() });
|
||||
|
|
|
|||
|
|
@ -67,6 +67,7 @@ export const LICENSE_ALLOWED = [
|
|||
'WTFPL',
|
||||
'Nuclide software',
|
||||
'Python-2.0',
|
||||
'(Apache-2.0 AND MIT)',
|
||||
];
|
||||
|
||||
// The following list only applies to licenses that
|
||||
|
|
|
|||
|
|
@ -182,7 +182,6 @@ export const TitleField = ({
|
|||
isInvalid={isInvalid}
|
||||
value={field.value}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) => {
|
||||
e.persist();
|
||||
let query = e.target.value;
|
||||
if (query.length === 1 && !appendedWildcard && canAppendWildcard(query)) {
|
||||
query += '*';
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ import { searchSourceInstanceMock } from '@kbn/data-plugin/common/search/search_
|
|||
import { findTestSubject } from '@elastic/eui/lib/test';
|
||||
jest.mock('./discover_main_app', () => {
|
||||
return {
|
||||
DiscoverMainApp: jest.fn(),
|
||||
DiscoverMainApp: jest.fn().mockReturnValue(<></>),
|
||||
};
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -226,21 +226,6 @@ exports[`<CodeEditor /> is rendered 1`] = `
|
|||
</div>
|
||||
</mockMonacoEditor>
|
||||
</Component>
|
||||
<ResizeDetector
|
||||
handleHeight={true}
|
||||
handleWidth={true}
|
||||
nodeType="div"
|
||||
onResize={[Function]}
|
||||
querySelector={null}
|
||||
refreshMode="debounce"
|
||||
refreshRate={1000}
|
||||
skipOnMount={false}
|
||||
targetDomEl={null}
|
||||
>
|
||||
<ChildWrapper>
|
||||
<div />
|
||||
</ChildWrapper>
|
||||
</ResizeDetector>
|
||||
</div>
|
||||
</CodeEditor>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -43,7 +43,15 @@ const logs = `
|
|||
[Sun Mar 7 21:16:17 2004] [error] [client xx.xx.xx.xx] File does not exist: /home/httpd/twiki/view/Main/WebHome
|
||||
`;
|
||||
|
||||
class ResizeObserver {
|
||||
observe() {}
|
||||
unobserve() {}
|
||||
disconnect() {}
|
||||
}
|
||||
|
||||
describe('<CodeEditor />', () => {
|
||||
window.ResizeObserver = ResizeObserver;
|
||||
|
||||
test('is rendered', () => {
|
||||
const component = mountWithIntl(
|
||||
<CodeEditor languageId="loglang" height={250} value={logs} onChange={() => {}} />
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
*/
|
||||
|
||||
import React, { useState, useRef, useCallback, useMemo, useEffect, KeyboardEvent } from 'react';
|
||||
import ReactResizeDetector from 'react-resize-detector';
|
||||
import { useResizeDetector } from 'react-resize-detector';
|
||||
import ReactMonacoEditor from 'react-monaco-editor';
|
||||
import {
|
||||
htmlIdGenerator,
|
||||
|
|
@ -186,6 +186,13 @@ export const CodeEditor: React.FC<Props> = ({
|
|||
_editor.current?.layout();
|
||||
}, []);
|
||||
|
||||
useResizeDetector({
|
||||
handleWidth: true,
|
||||
handleHeight: true,
|
||||
onResize: _updateDimensions,
|
||||
refreshMode: 'debounce',
|
||||
});
|
||||
|
||||
const startEditing = useCallback(() => {
|
||||
setIsHintActive(false);
|
||||
_editor.current?.focus();
|
||||
|
|
@ -469,12 +476,6 @@ export const CodeEditor: React.FC<Props> = ({
|
|||
}}
|
||||
/>
|
||||
</FullScreenDisplay>
|
||||
<ReactResizeDetector
|
||||
handleWidth
|
||||
handleHeight
|
||||
onResize={_updateDimensions}
|
||||
refreshMode="debounce"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,20 +6,16 @@
|
|||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
import React, { Fragment } from 'react';
|
||||
import React from 'react';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
|
||||
const markdownRenderers = {
|
||||
root: Fragment,
|
||||
};
|
||||
|
||||
export interface MarkdownSimpleProps {
|
||||
children: string;
|
||||
}
|
||||
|
||||
// Render markdown string into JSX inside of a Fragment.
|
||||
export const MarkdownSimple = ({ children }: MarkdownSimpleProps) => (
|
||||
<ReactMarkdown renderers={markdownRenderers}>{children}</ReactMarkdown>
|
||||
<ReactMarkdown>{children}</ReactMarkdown>
|
||||
);
|
||||
|
||||
// Needed for React.lazy
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
import React, { Fragment } from 'react';
|
||||
import React from 'react';
|
||||
import { History } from 'history';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { EuiLoadingSpinner } from '@elastic/eui';
|
||||
|
|
@ -20,7 +20,7 @@ import { KibanaThemeProvider } from '../theme';
|
|||
const ReactMarkdown = React.lazy(() => import('react-markdown'));
|
||||
const ErrorRenderer = (props: { children: string }) => (
|
||||
<React.Suspense fallback={<EuiLoadingSpinner />}>
|
||||
<ReactMarkdown renderers={{ root: Fragment }} {...props} />
|
||||
<ReactMarkdown {...props} />
|
||||
</React.Suspense>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -122,7 +122,8 @@ describe('renderApp (APM)', () => {
|
|||
};
|
||||
};
|
||||
|
||||
it('renders the app', () => {
|
||||
it('renders the app', async () => {
|
||||
const promise = Promise.resolve();
|
||||
const mountProps = getApmMountProps();
|
||||
|
||||
let unmount: () => void;
|
||||
|
|
@ -131,6 +132,11 @@ describe('renderApp (APM)', () => {
|
|||
unmount = renderApmApp(mountProps);
|
||||
});
|
||||
|
||||
// fake promise to wait for to ensure the app is mounted
|
||||
await act(async () => {
|
||||
await promise;
|
||||
});
|
||||
|
||||
expect(() => {
|
||||
unmount();
|
||||
}).not.toThrowError();
|
||||
|
|
|
|||
|
|
@ -67,7 +67,6 @@ export const WorkpadApp: FC<Props> = ({ deselectElement, isWriteable, workpad })
|
|||
<div
|
||||
id={CANVAS_LAYOUT_STAGE_CONTENT_SELECTOR}
|
||||
className={CANVAS_LAYOUT_STAGE_CONTENT_SELECTOR}
|
||||
onMouseDown={deselectElement}
|
||||
>
|
||||
{/* NOTE: canvasWorkpadContainer is used for exporting */}
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -5,11 +5,7 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import { MouseEventHandler } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { Dispatch } from 'redux';
|
||||
// @ts-expect-error untyped local
|
||||
import { selectToplevelNodes } from '../../state/actions/transient';
|
||||
import { canUserWrite } from '../../state/selectors/app';
|
||||
import { getWorkpad, isWriteable } from '../../state/selectors/workpad';
|
||||
import { WorkpadApp as Component } from './workpad_app.component';
|
||||
|
|
@ -20,17 +16,7 @@ export { WORKPAD_CONTAINER_ID } from './workpad_app.component';
|
|||
|
||||
const WorkpadAppComponent = withElementsLoadedTelemetry(Component);
|
||||
|
||||
const mapDispatchToProps = (dispatch: Dispatch): { deselectElement: MouseEventHandler } => ({
|
||||
deselectElement: (ev) => {
|
||||
ev.stopPropagation();
|
||||
dispatch(selectToplevelNodes([]));
|
||||
},
|
||||
});
|
||||
|
||||
export const WorkpadApp = connect(
|
||||
(state: State) => ({
|
||||
isWriteable: isWriteable(state) && canUserWrite(state),
|
||||
workpad: getWorkpad(state),
|
||||
}),
|
||||
mapDispatchToProps
|
||||
)(WorkpadAppComponent);
|
||||
export const WorkpadApp = connect((state: State) => ({
|
||||
isWriteable: isWriteable(state) && canUserWrite(state),
|
||||
workpad: getWorkpad(state),
|
||||
}))(WorkpadAppComponent);
|
||||
|
|
|
|||
|
|
@ -5,8 +5,11 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import React, { useCallback } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { addColor, removeColor } from '../../state/actions/workpad';
|
||||
import { getWorkpadColors } from '../../state/selectors/workpad';
|
||||
import { ColorPickerPopover, Props } from '../color_picker_popover';
|
||||
|
||||
const strings = {
|
||||
|
|
@ -17,9 +20,17 @@ const strings = {
|
|||
};
|
||||
|
||||
export const WorkpadColorPicker = (props: Props) => {
|
||||
const dispatch = useDispatch();
|
||||
const onAddColor = useCallback((payload) => dispatch(addColor(payload)), [dispatch]);
|
||||
const onRemoveColor = useCallback((payload) => dispatch(removeColor(payload)), [dispatch]);
|
||||
const colors = useSelector(getWorkpadColors);
|
||||
|
||||
return (
|
||||
<ColorPickerPopover
|
||||
{...props}
|
||||
onAddColor={onAddColor}
|
||||
onRemoveColor={onRemoveColor}
|
||||
colors={colors}
|
||||
hasButtons={true}
|
||||
ariaLabel={strings.getBackgroundColorLabel()}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -5,20 +5,4 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import { connect } from 'react-redux';
|
||||
import { addColor, removeColor } from '../../state/actions/workpad';
|
||||
import { getWorkpadColors } from '../../state/selectors/workpad';
|
||||
|
||||
import { WorkpadColorPicker as Component } from './workpad_color_picker.component';
|
||||
import { State } from '../../../types';
|
||||
|
||||
const mapStateToProps = (state: State) => ({
|
||||
colors: getWorkpadColors(state),
|
||||
});
|
||||
|
||||
const mapDispatchToProps = {
|
||||
onAddColor: addColor,
|
||||
onRemoveColor: removeColor,
|
||||
};
|
||||
|
||||
export const WorkpadColorPicker = connect(mapStateToProps, mapDispatchToProps)(Component);
|
||||
export { WorkpadColorPicker } from './workpad_color_picker.component';
|
||||
|
|
|
|||
|
|
@ -5,11 +5,15 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import React, { MouseEventHandler } from 'react';
|
||||
import React, { useCallback } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
|
||||
// @ts-expect-error untyped local
|
||||
import { fetchAllRenderables } from '../../../state/actions/elements';
|
||||
import { getInFlight } from '../../../state/selectors/resolved_args';
|
||||
import { ToolTipShortcut } from '../../tool_tip_shortcut';
|
||||
|
||||
const strings = {
|
||||
|
|
@ -23,30 +27,31 @@ const strings = {
|
|||
}),
|
||||
};
|
||||
|
||||
export interface Props {
|
||||
doRefresh: MouseEventHandler<HTMLButtonElement>;
|
||||
inFlight: boolean;
|
||||
}
|
||||
export const RefreshControl = () => {
|
||||
const dispatch = useDispatch();
|
||||
const inFlight = useSelector(getInFlight);
|
||||
const doRefresh = useCallback(() => dispatch(fetchAllRenderables()), [dispatch]);
|
||||
|
||||
export const RefreshControl = ({ doRefresh, inFlight }: Props) => (
|
||||
<EuiToolTip
|
||||
position="bottom"
|
||||
content={
|
||||
<span>
|
||||
{strings.getRefreshTooltip()}
|
||||
<ToolTipShortcut namespace="EDITOR" action="REFRESH" />
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<EuiButtonIcon
|
||||
disabled={inFlight}
|
||||
iconType="refresh"
|
||||
aria-label={strings.getRefreshAriaLabel()}
|
||||
onClick={doRefresh}
|
||||
data-test-subj="canvas-refresh-control"
|
||||
/>
|
||||
</EuiToolTip>
|
||||
);
|
||||
return (
|
||||
<EuiToolTip
|
||||
position="bottom"
|
||||
content={
|
||||
<span>
|
||||
{strings.getRefreshTooltip()}
|
||||
<ToolTipShortcut namespace="EDITOR" action="REFRESH" />
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<EuiButtonIcon
|
||||
disabled={inFlight}
|
||||
iconType="refresh"
|
||||
aria-label={strings.getRefreshAriaLabel()}
|
||||
onClick={doRefresh}
|
||||
data-test-subj="canvas-refresh-control"
|
||||
/>
|
||||
</EuiToolTip>
|
||||
);
|
||||
};
|
||||
|
||||
RefreshControl.propTypes = {
|
||||
doRefresh: PropTypes.func.isRequired,
|
||||
|
|
|
|||
|
|
@ -5,19 +5,4 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import { connect } from 'react-redux';
|
||||
// @ts-expect-error untyped local
|
||||
import { fetchAllRenderables } from '../../../state/actions/elements';
|
||||
import { getInFlight } from '../../../state/selectors/resolved_args';
|
||||
import { State } from '../../../../types';
|
||||
import { RefreshControl as Component } from './refresh_control.component';
|
||||
|
||||
const mapStateToProps = (state: State) => ({
|
||||
inFlight: getInFlight(state),
|
||||
});
|
||||
|
||||
const mapDispatchToProps = {
|
||||
doRefresh: fetchAllRenderables,
|
||||
};
|
||||
|
||||
export const RefreshControl = connect(mapStateToProps, mapDispatchToProps)(Component);
|
||||
export { RefreshControl } from './refresh_control.component';
|
||||
|
|
|
|||
|
|
@ -76,7 +76,6 @@ const setupHandler = (commit: CommitFn, canvasOrigin: CanvasOriginFn, zoomScale?
|
|||
return;
|
||||
}
|
||||
|
||||
e.stopPropagation();
|
||||
const { x, y } = localMousePosition(canvasOrigin, clientX, clientY, zoomScale);
|
||||
commit('mouseEvent', { event: 'mouseUp', x, y, altKey, metaKey, shiftKey, ctrlKey });
|
||||
resetHandler();
|
||||
|
|
@ -123,7 +122,6 @@ const handleMouseDown = (
|
|||
return;
|
||||
}
|
||||
|
||||
e.stopPropagation();
|
||||
if (buttons !== 1 || !commit) {
|
||||
resetHandler();
|
||||
return; // left-click only
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import { AllCasesSelectorModal } from '.';
|
|||
import { TestProviders } from '../../../common/mock';
|
||||
import { AllCasesList } from '../all_cases_list';
|
||||
|
||||
jest.mock('../all_cases_list');
|
||||
jest.mock('../all_cases_list', () => ({ AllCasesList: jest.fn().mockReturnValue(<></>) }));
|
||||
|
||||
const onRowClick = jest.fn();
|
||||
const defaultProps = {
|
||||
|
|
@ -57,8 +57,7 @@ describe('AllCasesSelectorModal', () => {
|
|||
</TestProviders>
|
||||
);
|
||||
|
||||
// @ts-ignore idk what this mock style is but it works ¯\_(ツ)_/¯
|
||||
expect(AllCasesList.type.mock.calls[0][0]).toEqual(
|
||||
expect((AllCasesList as unknown as jest.Mock).mock.calls[0][0]).toEqual(
|
||||
expect.objectContaining({
|
||||
hiddenStatuses: fullProps.hiddenStatuses,
|
||||
isSelectorView: true,
|
||||
|
|
|
|||
|
|
@ -40,7 +40,9 @@ jest.mock('../../containers/use_get_tags');
|
|||
jest.mock('../../containers/use_get_case');
|
||||
jest.mock('../../containers/configure/use_connectors');
|
||||
jest.mock('../../containers/use_post_push_to_service');
|
||||
jest.mock('../user_actions/timestamp');
|
||||
jest.mock('../user_actions/timestamp', () => ({
|
||||
UserActionTimestamp: () => <></>,
|
||||
}));
|
||||
jest.mock('../../common/navigation/hooks');
|
||||
jest.mock('../../common/hooks');
|
||||
jest.mock('../connectors/resilient/api');
|
||||
|
|
|
|||
|
|
@ -30,7 +30,9 @@ import { useGetTags } from '../../../containers/use_get_tags';
|
|||
jest.mock('../../../containers/use_get_case_user_actions');
|
||||
jest.mock('../../../containers/configure/use_connectors');
|
||||
jest.mock('../../../containers/use_post_push_to_service');
|
||||
jest.mock('../../user_actions/timestamp');
|
||||
jest.mock('../../user_actions/timestamp', () => ({
|
||||
UserActionTimestamp: () => <></>,
|
||||
}));
|
||||
jest.mock('../../../common/navigation/hooks');
|
||||
jest.mock('../../../containers/use_get_action_license');
|
||||
jest.mock('../../../containers/use_get_tags');
|
||||
|
|
|
|||
|
|
@ -49,7 +49,9 @@ jest.mock('../../containers/use_get_case');
|
|||
jest.mock('../../containers/use_get_case_metrics');
|
||||
jest.mock('../../containers/configure/use_connectors');
|
||||
jest.mock('../../containers/use_post_push_to_service');
|
||||
jest.mock('../user_actions/timestamp');
|
||||
jest.mock('../user_actions/timestamp', () => ({
|
||||
UserActionTimestamp: () => <></>,
|
||||
}));
|
||||
jest.mock('../../common/lib/kibana');
|
||||
jest.mock('../../common/navigation/hooks');
|
||||
jest.mock('../../containers/api');
|
||||
|
|
|
|||
|
|
@ -53,7 +53,9 @@ const defaultProps = {
|
|||
};
|
||||
|
||||
jest.mock('../../containers/use_update_comment');
|
||||
jest.mock('./timestamp');
|
||||
jest.mock('./timestamp', () => ({
|
||||
UserActionTimestamp: () => <></>,
|
||||
}));
|
||||
jest.mock('../../common/lib/kibana');
|
||||
|
||||
const useUpdateCommentMock = useUpdateComment as jest.Mock;
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
|
||||
import React from 'react';
|
||||
|
||||
import { act } from '@testing-library/react';
|
||||
import { getContext } from 'kea';
|
||||
|
||||
import { chartPluginMock } from '@kbn/charts-plugin/public/mocks';
|
||||
|
|
@ -47,7 +48,7 @@ describe('renderApp', () => {
|
|||
const unmount = renderApp(MockApp, kibanaDeps, pluginData);
|
||||
expect(mockContainer.querySelector('.hello-world')).not.toBeNull();
|
||||
|
||||
unmount();
|
||||
act(() => unmount());
|
||||
expect(mockContainer.innerHTML).toEqual('');
|
||||
});
|
||||
|
||||
|
|
@ -60,20 +61,30 @@ describe('renderApp', () => {
|
|||
};
|
||||
|
||||
describe('Enterprise Search apps', () => {
|
||||
afterEach(() => unmount());
|
||||
afterEach(() => {
|
||||
act(() => {
|
||||
unmount();
|
||||
});
|
||||
});
|
||||
|
||||
it('renders EnterpriseSearchOverview', () => {
|
||||
mount(EnterpriseSearchOverview);
|
||||
act(() => {
|
||||
mount(EnterpriseSearchOverview);
|
||||
});
|
||||
expect(mockContainer.querySelector('.kbnPageTemplate')).not.toBeNull();
|
||||
});
|
||||
|
||||
it('renders AppSearch', () => {
|
||||
mount(AppSearch);
|
||||
act(() => {
|
||||
mount(AppSearch);
|
||||
});
|
||||
expect(mockContainer.querySelector('.setupGuide')).not.toBeNull();
|
||||
});
|
||||
|
||||
it('renders WorkplaceSearch', () => {
|
||||
mount(WorkplaceSearch);
|
||||
act(() => {
|
||||
mount(WorkplaceSearch);
|
||||
});
|
||||
expect(mockContainer.querySelector('.setupGuide')).not.toBeNull();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -132,7 +132,7 @@ export const PackagePolicyInputStreamConfig: React.FunctionComponent<{
|
|||
<Fragment>
|
||||
<EuiSpacer size="s" />
|
||||
<EuiText size="s" color="subdued">
|
||||
<ReactMarkdown source={packageInputStream.description} />
|
||||
<ReactMarkdown>{packageInputStream.description}</ReactMarkdown>
|
||||
</EuiText>
|
||||
</Fragment>
|
||||
) : null}
|
||||
|
|
|
|||
|
|
@ -155,7 +155,7 @@ export const PackagePolicyInputVarField: React.FunctionComponent<{
|
|||
</EuiText>
|
||||
) : null
|
||||
}
|
||||
helpText={<ReactMarkdown source={description} />}
|
||||
helpText={description && <ReactMarkdown children={description} />}
|
||||
>
|
||||
{field}
|
||||
</EuiFormRow>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
import type { AppMountParameters } from '@kbn/core/public';
|
||||
import type { FC } from 'react';
|
||||
import React, { useEffect, useMemo } from 'react';
|
||||
import { createPortalNode, InPortal, OutPortal } from 'react-reverse-portal';
|
||||
import { createHtmlPortalNode, InPortal, OutPortal } from 'react-reverse-portal';
|
||||
|
||||
import { toMountPoint } from '@kbn/kibana-react-plugin/public';
|
||||
|
||||
|
|
@ -18,7 +18,7 @@ export interface Props {
|
|||
}
|
||||
|
||||
export const HeaderPortal: FC<Props> = ({ children, setHeaderActionMenu, theme$ }) => {
|
||||
const portalNode = useMemo(() => createPortalNode(), []);
|
||||
const portalNode = useMemo(() => createHtmlPortalNode(), []);
|
||||
|
||||
useEffect(() => {
|
||||
setHeaderActionMenu((element) => {
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@ import {
|
|||
EuiTableHeaderCell,
|
||||
EuiTableRow,
|
||||
EuiTableRowCell,
|
||||
EuiText,
|
||||
} from '@elastic/eui';
|
||||
import React from 'react';
|
||||
import type { TransformOptions } from 'react-markdown';
|
||||
|
||||
/** prevents links to the new pages from accessing `window.opener` */
|
||||
const REL_NOOPENER = 'noopener';
|
||||
|
|
@ -30,42 +30,25 @@ const CODE_LANGUAGE_OVERRIDES: Record<string, string> = {
|
|||
$yml: 'yml',
|
||||
};
|
||||
|
||||
export const markdownRenderers = {
|
||||
root: ({ children }: { children: React.ReactNode[] }) => (
|
||||
<EuiText grow={true}>{children}</EuiText>
|
||||
),
|
||||
table: ({ children }: { children: React.ReactNode[] }) => (
|
||||
<table className="euiTable euiTable--responsive">{children}</table>
|
||||
),
|
||||
tableRow: ({ children }: { children: React.ReactNode[] }) => (
|
||||
<EuiTableRow>{children}</EuiTableRow>
|
||||
),
|
||||
tableCell: ({ isHeader, children }: { isHeader: boolean; children: React.ReactNode[] }) => {
|
||||
return isHeader ? (
|
||||
<EuiTableHeaderCell>{children}</EuiTableHeaderCell>
|
||||
) : (
|
||||
<EuiTableRowCell>{children}</EuiTableRowCell>
|
||||
);
|
||||
},
|
||||
export const markdownRenderers: TransformOptions['components'] = {
|
||||
table: ({ children }) => <table className="euiTable euiTable--responsive">{children}</table>,
|
||||
tr: ({ children }) => <EuiTableRow>{children}</EuiTableRow>,
|
||||
th: ({ children }) => <EuiTableHeaderCell>{children}</EuiTableHeaderCell>,
|
||||
td: ({ children }) => <EuiTableRowCell>{children}</EuiTableRowCell>,
|
||||
// the headings used in markdown don't match our page so mapping them to the appropriate one
|
||||
heading: ({ level, children }: { level: number; children: React.ReactNode[] }) => {
|
||||
switch (level) {
|
||||
case 1:
|
||||
return <h3>{children}</h3>;
|
||||
case 2:
|
||||
return <h4>{children}</h4>;
|
||||
case 3:
|
||||
return <h5>{children}</h5>;
|
||||
default:
|
||||
return <h6>{children}</h6>;
|
||||
}
|
||||
},
|
||||
h1: ({ children }) => <h3>{children}</h3>,
|
||||
h2: ({ children }) => <h4>{children}</h4>,
|
||||
h3: ({ children }) => <h5>{children}</h5>,
|
||||
h4: ({ children }) => <h6>{children}</h6>,
|
||||
h5: ({ children }) => <h6>{children}</h6>,
|
||||
h6: ({ children }) => <h6>{children}</h6>,
|
||||
link: ({ children, href }: { children: React.ReactNode[]; href?: string }) => (
|
||||
<EuiLink href={href} target="_blank" rel={`${REL_NOOPENER} ${REL_NOFOLLOW} ${REL_NOREFERRER}`}>
|
||||
{children}
|
||||
</EuiLink>
|
||||
),
|
||||
code: ({ language, value }: { language: string; value: string }) => {
|
||||
// @ts-expect-error update types
|
||||
code: ({ language, value }) => {
|
||||
let parsedLang = language;
|
||||
|
||||
// Some integrations export code block content that includes language tags that have since
|
||||
|
|
|
|||
|
|
@ -43,11 +43,11 @@ export function Readme({
|
|||
return (
|
||||
<Fragment>
|
||||
{markdown !== undefined ? (
|
||||
<ReactMarkdown
|
||||
transformImageUri={handleImageUri}
|
||||
renderers={markdownRenderers}
|
||||
source={markdown}
|
||||
/>
|
||||
<EuiText grow={true}>
|
||||
<ReactMarkdown transformImageUri={handleImageUri} components={markdownRenderers}>
|
||||
{markdown}
|
||||
</ReactMarkdown>
|
||||
</EuiText>
|
||||
) : (
|
||||
<EuiText>
|
||||
{/* simulates a long page of text loading */}
|
||||
|
|
|
|||
|
|
@ -40,7 +40,9 @@ import './search_bar.scss';
|
|||
|
||||
const isMac = navigator.platform.toLowerCase().indexOf('mac') >= 0;
|
||||
|
||||
const blurEvent = new FocusEvent('blur');
|
||||
const blurEvent = new FocusEvent('focusout', {
|
||||
bubbles: true,
|
||||
});
|
||||
|
||||
const sortByScore = (a: GlobalSearchResult, b: GlobalSearchResult): number => {
|
||||
if (a.score < b.score) return 1;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
*/
|
||||
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import React, { useContext } from 'react';
|
||||
import React from 'react';
|
||||
import { transparentize } from 'polished';
|
||||
|
||||
import { euiStyled } from '@kbn/kibana-react-plugin/common';
|
||||
|
|
@ -17,7 +17,7 @@ import {
|
|||
LogEntryColumnWidths,
|
||||
} from './log_entry_column';
|
||||
import { ASSUMED_SCROLLBAR_WIDTH } from './vertical_scroll_panel';
|
||||
import { LogPositionState } from '../../../containers/logs/log_position';
|
||||
import { useLogPositionStateContext } from '../../../containers/logs/log_position';
|
||||
import { localizedDate } from '../../../../common/formatters/datetime';
|
||||
import {
|
||||
LogColumnRenderConfiguration,
|
||||
|
|
@ -30,7 +30,7 @@ export const LogColumnHeaders: React.FunctionComponent<{
|
|||
columnConfigurations: LogColumnRenderConfiguration[];
|
||||
columnWidths: LogEntryColumnWidths;
|
||||
}> = ({ columnConfigurations, columnWidths }) => {
|
||||
const { firstVisiblePosition } = useContext(LogPositionState.Context);
|
||||
const { firstVisiblePosition } = useLogPositionStateContext();
|
||||
return (
|
||||
<LogColumnHeadersWrapper>
|
||||
{columnConfigurations.map((columnConfiguration) => {
|
||||
|
|
|
|||
|
|
@ -105,4 +105,5 @@ export const useLogFilterState = ({ indexPattern }: { indexPattern: DataViewBase
|
|||
};
|
||||
};
|
||||
|
||||
export const LogFilterState = createContainer(useLogFilterState);
|
||||
export const [LogFilterStateProvider, useLogFilterStateContext] =
|
||||
createContainer(useLogFilterState);
|
||||
|
|
|
|||
|
|
@ -6,13 +6,13 @@
|
|||
*/
|
||||
|
||||
import * as rt from 'io-ts';
|
||||
import React, { useContext } from 'react';
|
||||
import React from 'react';
|
||||
import { Query } from '@kbn/es-query';
|
||||
import { replaceStateKeyInQueryString, UrlStateContainer } from '../../../utils/url_state';
|
||||
import { LogFilterState } from './log_filter_state';
|
||||
import { useLogFilterStateContext } from './log_filter_state';
|
||||
|
||||
export const WithLogFilterUrlState: React.FC = () => {
|
||||
const { filterQuery, applyLogFilterQuery } = useContext(LogFilterState.Context);
|
||||
const { filterQuery, applyLogFilterQuery } = useLogFilterStateContext();
|
||||
|
||||
return (
|
||||
<UrlStateContainer
|
||||
|
|
|
|||
|
|
@ -6,12 +6,12 @@
|
|||
*/
|
||||
|
||||
import createContainer from 'constate';
|
||||
import { useState, useContext } from 'react';
|
||||
import { useState } from 'react';
|
||||
import useThrottle from 'react-use/lib/useThrottle';
|
||||
import { useLogEntryHighlights } from './log_entry_highlights';
|
||||
import { useLogSummaryHighlights } from './log_summary_highlights';
|
||||
import { useNextAndPrevious } from './next_and_previous';
|
||||
import { LogPositionState } from '../log_position';
|
||||
import { useLogPositionStateContext } from '../log_position';
|
||||
import { TimeKey } from '../../../../common/time';
|
||||
|
||||
const FETCH_THROTTLE_INTERVAL = 3000;
|
||||
|
|
@ -32,9 +32,8 @@ export const useLogHighlightsState = ({
|
|||
filterQuery,
|
||||
}: UseLogHighlightsStateProps) => {
|
||||
const [highlightTerms, setHighlightTerms] = useState<string[]>([]);
|
||||
const { visibleMidpoint, jumpToTargetPosition, startTimestamp, endTimestamp } = useContext(
|
||||
LogPositionState.Context
|
||||
);
|
||||
const { visibleMidpoint, jumpToTargetPosition, startTimestamp, endTimestamp } =
|
||||
useLogPositionStateContext();
|
||||
|
||||
const throttledStartTimestamp = useThrottle(startTimestamp, FETCH_THROTTLE_INTERVAL);
|
||||
const throttledEndTimestamp = useThrottle(endTimestamp, FETCH_THROTTLE_INTERVAL);
|
||||
|
|
@ -89,4 +88,5 @@ export const useLogHighlightsState = ({
|
|||
};
|
||||
};
|
||||
|
||||
export const LogHighlightsState = createContainer(useLogHighlightsState);
|
||||
export const [LogHighlightsStateProvider, useLogHighlightsStateContext] =
|
||||
createContainer(useLogHighlightsState);
|
||||
|
|
|
|||
|
|
@ -249,4 +249,5 @@ export const useLogPositionState: () => LogPositionStateParams & LogPositionCall
|
|||
return { ...state, ...callbacks };
|
||||
};
|
||||
|
||||
export const LogPositionState = createContainer(useLogPositionState);
|
||||
export const [LogPositionStateProvider, useLogPositionStateContext] =
|
||||
createContainer(useLogPositionState);
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import React, { useContext, useMemo } from 'react';
|
||||
import React, { useMemo } from 'react';
|
||||
|
||||
import { pickTimeKey } from '../../../../common/time';
|
||||
import { replaceStateKeyInQueryString, UrlStateContainer } from '../../../utils/url_state';
|
||||
import { LogPositionState, LogPositionStateParams } from './log_position_state';
|
||||
import { useLogPositionStateContext, LogPositionStateParams } from './log_position_state';
|
||||
import { isValidDatemath, datemathToEpochMillis } from '../../../utils/datemath';
|
||||
|
||||
/**
|
||||
|
|
@ -35,7 +35,7 @@ export const WithLogPositionUrlState = () => {
|
|||
endDateExpression,
|
||||
updateDateRange,
|
||||
initialize,
|
||||
} = useContext(LogPositionState.Context);
|
||||
} = useLogPositionStateContext();
|
||||
const urlState = useMemo(
|
||||
() => ({
|
||||
position: visibleMidpoint ? pickTimeKey(visibleMidpoint) : null,
|
||||
|
|
|
|||
|
|
@ -5,12 +5,11 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import { useContext } from 'react';
|
||||
import useThrottle from 'react-use/lib/useThrottle';
|
||||
import { useLogViewContext } from '../../../hooks/use_log_view';
|
||||
import { RendererFunction } from '../../../utils/typed_react';
|
||||
import { LogFilterState } from '../log_filter';
|
||||
import { LogPositionState } from '../log_position';
|
||||
import { useLogFilterStateContext } from '../log_filter';
|
||||
import { useLogPositionStateContext } from '../log_position';
|
||||
import { LogSummaryBuckets, useLogSummary } from './log_summary';
|
||||
|
||||
const FETCH_THROTTLE_INTERVAL = 3000;
|
||||
|
|
@ -25,8 +24,8 @@ export const WithSummary = ({
|
|||
}>;
|
||||
}) => {
|
||||
const { logViewId } = useLogViewContext();
|
||||
const { filterQuery } = useContext(LogFilterState.Context);
|
||||
const { startTimestamp, endTimestamp } = useContext(LogPositionState.Context);
|
||||
const { filterQuery } = useLogFilterStateContext();
|
||||
const { startTimestamp, endTimestamp } = useLogPositionStateContext();
|
||||
|
||||
// Keep it reasonably updated for the `now` case, but don't reload all the time when the user scrolls
|
||||
const throttledStartTimestamp = useThrottle(startTimestamp, FETCH_THROTTLE_INTERVAL);
|
||||
|
|
|
|||
|
|
@ -26,7 +26,8 @@ export const useLogViewConfiguration = () => {
|
|||
};
|
||||
};
|
||||
|
||||
export const LogViewConfiguration = createContainer(useLogViewConfiguration);
|
||||
export const [LogViewConfigurationProvider, useLogViewConfigurationContext] =
|
||||
createContainer(useLogViewConfiguration);
|
||||
|
||||
/**
|
||||
* constants
|
||||
|
|
|
|||
|
|
@ -42,4 +42,5 @@ export const useViewLogInContext = (
|
|||
];
|
||||
};
|
||||
|
||||
export const ViewLogInContext = createContainer(useViewLogInContext);
|
||||
export const [ViewLogInContextProvider, useViewLogInProviderContext] =
|
||||
createContainer(useViewLogInContext);
|
||||
|
|
|
|||
|
|
@ -5,10 +5,14 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import React, { useContext, useMemo } from 'react';
|
||||
import React, { useMemo } from 'react';
|
||||
|
||||
import { UrlStateContainer } from '../../utils/url_state';
|
||||
import { availableTextScales, LogViewConfiguration, TextScale } from './log_view_configuration';
|
||||
import {
|
||||
availableTextScales,
|
||||
useLogViewConfigurationContext,
|
||||
TextScale,
|
||||
} from './log_view_configuration';
|
||||
|
||||
interface LogTextviewUrlState {
|
||||
textScale?: TextScale;
|
||||
|
|
@ -16,9 +20,7 @@ interface LogTextviewUrlState {
|
|||
}
|
||||
|
||||
export const WithLogTextviewUrlState = () => {
|
||||
const { textScale, textWrap, setTextScale, setTextWrap } = useContext(
|
||||
LogViewConfiguration.Context
|
||||
);
|
||||
const { textScale, textWrap, setTextScale, setTextWrap } = useLogViewConfigurationContext();
|
||||
|
||||
const urlState = useMemo(() => ({ textScale, wrap: textWrap }), [textScale, textWrap]);
|
||||
|
||||
|
|
|
|||
|
|
@ -6,12 +6,12 @@
|
|||
*/
|
||||
|
||||
import { set } from '@kbn/safer-lodash-set';
|
||||
import React, { useContext, useMemo } from 'react';
|
||||
import React, { useMemo } from 'react';
|
||||
import { ThrowReporter } from 'io-ts/lib/ThrowReporter';
|
||||
import { UrlStateContainer } from '../../utils/url_state';
|
||||
import {
|
||||
MetricsExplorerOptions,
|
||||
MetricsExplorerOptionsContainer,
|
||||
useMetricsExplorerOptionsContainerContext,
|
||||
MetricsExplorerTimeOptions,
|
||||
MetricsExplorerChartOptions,
|
||||
metricExplorerOptionsRT,
|
||||
|
|
@ -33,7 +33,7 @@ export const WithMetricsExplorerOptionsUrlState = () => {
|
|||
currentTimerange,
|
||||
setOptions: setRawOptions,
|
||||
setTimeRange,
|
||||
} = useContext(MetricsExplorerOptionsContainer.Context);
|
||||
} = useMetricsExplorerOptionsContainerContext();
|
||||
|
||||
const setOptions = (value: MetricsExplorerOptions) => {
|
||||
setRawOptions(value);
|
||||
|
|
|
|||
|
|
@ -157,5 +157,4 @@ export const useSource = ({ sourceId }: { sourceId: string }) => {
|
|||
};
|
||||
};
|
||||
|
||||
export const Source = createContainer(useSource);
|
||||
export const [SourceProvider, useSourceContext] = Source;
|
||||
export const [SourceProvider, useSourceContext] = createContainer(useSource);
|
||||
|
|
|
|||
|
|
@ -10,14 +10,14 @@ import * as rt from 'io-ts';
|
|||
import { pipe } from 'fp-ts/lib/pipeable';
|
||||
import { fold } from 'fp-ts/lib/Either';
|
||||
import { constant, identity } from 'fp-ts/lib/function';
|
||||
import { useCallback, useMemo, useState, useEffect, useContext } from 'react';
|
||||
import { useCallback, useMemo, useState, useEffect } from 'react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { SimpleSavedObject, SavedObjectAttributes } from '@kbn/core/public';
|
||||
import { useUrlState } from '../../utils/use_url_state';
|
||||
import { useFindSavedObject } from '../../hooks/use_find_saved_object';
|
||||
import { useCreateSavedObject } from '../../hooks/use_create_saved_object';
|
||||
import { useDeleteSavedObject } from '../../hooks/use_delete_saved_object';
|
||||
import { Source } from '../metrics_source';
|
||||
import { useSourceContext } from '../metrics_source';
|
||||
import { metricsExplorerViewSavedObjectName } from '../../../common/saved_objects/metrics_explorer_view';
|
||||
import { inventoryViewSavedObjectName } from '../../../common/saved_objects/inventory_view';
|
||||
import { useSourceConfigurationFormState } from '../../pages/metrics/settings/source_configuration_form_state';
|
||||
|
|
@ -59,7 +59,7 @@ export const useSavedView = (props: Props) => {
|
|||
sourceExists,
|
||||
createSourceConfiguration,
|
||||
updateSourceConfiguration,
|
||||
} = useContext(Source.Context);
|
||||
} = useSourceContext();
|
||||
const { viewType, defaultViewState } = props;
|
||||
type ViewState = typeof defaultViewState;
|
||||
const {
|
||||
|
|
|
|||
|
|
@ -5,14 +5,14 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import React, { useContext } from 'react';
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
MetricsSourceConfigurationProperties,
|
||||
PartialMetricsSourceConfigurationProperties,
|
||||
} from '../../../common/metrics_sources';
|
||||
import { RendererFunction } from '../../utils/typed_react';
|
||||
import { Source } from '../metrics_source';
|
||||
import { useSourceContext } from '../metrics_source';
|
||||
import { CreateDerivedIndexPattern } from '../metrics_source';
|
||||
|
||||
interface WithSourceProps {
|
||||
|
|
@ -52,7 +52,7 @@ export const WithSource: React.FunctionComponent<WithSourceProps> = ({ children
|
|||
loadSourceFailureMessage,
|
||||
updateSourceConfiguration,
|
||||
version,
|
||||
} = useContext(Source.Context);
|
||||
} = useSourceContext();
|
||||
|
||||
return children({
|
||||
create: createSourceConfiguration,
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ import { DatasetsSelector } from '../../../components/logging/log_analysis_resul
|
|||
import { RecreateJobButton } from '../../../components/logging/log_analysis_setup/create_job_button';
|
||||
import { useLogAnalysisCapabilitiesContext } from '../../../containers/logs/log_analysis/log_analysis_capabilities';
|
||||
import { useLogEntryCategoriesModuleContext } from '../../../containers/logs/log_analysis/modules/log_entry_categories';
|
||||
import { ViewLogInContext } from '../../../containers/logs/view_log_in_context';
|
||||
import { ViewLogInContextProvider } from '../../../containers/logs/view_log_in_context';
|
||||
import { useKibanaContextForPlugin } from '../../../hooks/use_kibana';
|
||||
import { useLogViewContext } from '../../../hooks/use_log_view';
|
||||
import { LogsPageTemplate } from '../page_template';
|
||||
|
|
@ -205,7 +205,7 @@ export const LogEntryCategoriesResultsContent: React.FunctionComponent<
|
|||
});
|
||||
|
||||
return (
|
||||
<ViewLogInContext.Provider
|
||||
<ViewLogInContextProvider
|
||||
sourceId={sourceId}
|
||||
startTimestamp={categoryQueryTimeRange.timeRange.startTime}
|
||||
endTimestamp={categoryQueryTimeRange.timeRange.endTime}
|
||||
|
|
@ -275,7 +275,7 @@ export const LogEntryCategoriesResultsContent: React.FunctionComponent<
|
|||
</EuiFlexGroup>
|
||||
</LogsPageTemplate>
|
||||
<PageViewLogInContext />
|
||||
</ViewLogInContext.Provider>
|
||||
</ViewLogInContextProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import React, { useState, useCallback, useContext } from 'react';
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { encode } from 'rison-node';
|
||||
import moment from 'moment';
|
||||
|
|
@ -17,7 +17,7 @@ import {
|
|||
getFriendlyNameForPartitionId,
|
||||
partitionField,
|
||||
} from '../../../../../../common/log_analysis';
|
||||
import { ViewLogInContext } from '../../../../../containers/logs/view_log_in_context';
|
||||
import { useViewLogInProviderContext } from '../../../../../containers/logs/view_log_in_context';
|
||||
import {
|
||||
LogEntryColumn,
|
||||
LogEntryFieldColumn,
|
||||
|
|
@ -41,7 +41,7 @@ export const CategoryExampleMessage: React.FunctionComponent<{
|
|||
context: LogEntryContext;
|
||||
}> = ({ id, dataset, message, timestamp, timeRange, tiebreaker, context }) => {
|
||||
const trackMetric = useUiTracker({ app: 'infra_logs' });
|
||||
const [, { setContextEntry }] = useContext(ViewLogInContext.Context);
|
||||
const [, { setContextEntry }] = useViewLogInProviderContext();
|
||||
// handle special cases for the dataset value
|
||||
const humanFriendlyDataset = getFriendlyNameForPartitionId(dataset);
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import { LogSourceErrorPage } from '../../../components/logging/log_source_error
|
|||
import { SourceLoadingPage } from '../../../components/source_loading_page';
|
||||
import { LogEntryCategoriesModuleProvider } from '../../../containers/logs/log_analysis/modules/log_entry_categories';
|
||||
import { LogEntryRateModuleProvider } from '../../../containers/logs/log_analysis/modules/log_entry_rate';
|
||||
import { LogFlyout } from '../../../containers/logs/log_flyout';
|
||||
import { LogEntryFlyoutProvider } from '../../../containers/logs/log_flyout';
|
||||
import { useActiveKibanaSpace } from '../../../hooks/use_kibana_space';
|
||||
import { useLogViewContext } from '../../../hooks/use_log_view';
|
||||
|
||||
|
|
@ -38,7 +38,7 @@ export const LogEntryRatePageProviders: React.FunctionComponent = ({ children })
|
|||
return <LogSourceErrorPage errors={latestLoadLogViewFailures} onRetry={load} />;
|
||||
} else if (resolvedLogView != null) {
|
||||
return (
|
||||
<LogFlyout.Provider>
|
||||
<LogEntryFlyoutProvider>
|
||||
<LogEntryRateModuleProvider
|
||||
indexPattern={resolvedLogView.indices}
|
||||
sourceId={logViewId}
|
||||
|
|
@ -56,7 +56,7 @@ export const LogEntryRatePageProviders: React.FunctionComponent = ({ children })
|
|||
<LogAnalysisSetupFlyoutStateProvider>{children}</LogAnalysisSetupFlyoutStateProvider>
|
||||
</LogEntryCategoriesModuleProvider>
|
||||
</LogEntryRateModuleProvider>
|
||||
</LogFlyout.Provider>
|
||||
</LogEntryFlyoutProvider>
|
||||
);
|
||||
} else {
|
||||
return null;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
import { EuiSpacer } from '@elastic/eui';
|
||||
import type { Query } from '@kbn/es-query';
|
||||
import React, { useCallback, useContext, useEffect, useMemo } from 'react';
|
||||
import React, { useCallback, useEffect, useMemo } from 'react';
|
||||
import usePrevious from 'react-use/lib/usePrevious';
|
||||
import { euiStyled } from '@kbn/kibana-react-plugin/common';
|
||||
import { LogEntry } from '../../../../common/log_entry';
|
||||
|
|
@ -18,17 +18,17 @@ import { LogMinimap } from '../../../components/logging/log_minimap';
|
|||
import { ScrollableLogTextStreamView } from '../../../components/logging/log_text_stream';
|
||||
import { LogEntryStreamItem } from '../../../components/logging/log_text_stream/item';
|
||||
import { PageContent } from '../../../components/page';
|
||||
import { LogFilterState } from '../../../containers/logs/log_filter';
|
||||
import { useLogFilterStateContext } from '../../../containers/logs/log_filter';
|
||||
import {
|
||||
useLogEntryFlyoutContext,
|
||||
WithFlyoutOptionsUrlState,
|
||||
} from '../../../containers/logs/log_flyout';
|
||||
import { LogHighlightsState } from '../../../containers/logs/log_highlights';
|
||||
import { LogPositionState } from '../../../containers/logs/log_position';
|
||||
import { useLogHighlightsStateContext } from '../../../containers/logs/log_highlights';
|
||||
import { useLogPositionStateContext } from '../../../containers/logs/log_position';
|
||||
import { useLogStreamContext } from '../../../containers/logs/log_stream';
|
||||
import { WithSummary } from '../../../containers/logs/log_summary';
|
||||
import { LogViewConfiguration } from '../../../containers/logs/log_view_configuration';
|
||||
import { ViewLogInContext } from '../../../containers/logs/view_log_in_context';
|
||||
import { useLogViewConfigurationContext } from '../../../containers/logs/log_view_configuration';
|
||||
import { useViewLogInProviderContext } from '../../../containers/logs/view_log_in_context';
|
||||
import { WithLogTextviewUrlState } from '../../../containers/logs/with_log_textview';
|
||||
import { useLogViewContext } from '../../../hooks/use_log_view';
|
||||
import { datemathToEpochMillis, isValidDatemath } from '../../../utils/datemath';
|
||||
|
|
@ -39,7 +39,7 @@ const PAGE_THRESHOLD = 2;
|
|||
|
||||
export const LogsPageLogsContent: React.FunctionComponent = () => {
|
||||
const { resolvedLogView, logView, logViewId } = useLogViewContext();
|
||||
const { textScale, textWrap } = useContext(LogViewConfiguration.Context);
|
||||
const { textScale, textWrap } = useLogViewConfigurationContext();
|
||||
const {
|
||||
surroundingLogsId,
|
||||
setSurroundingLogsId,
|
||||
|
|
@ -64,8 +64,8 @@ export const LogsPageLogsContent: React.FunctionComponent = () => {
|
|||
endDateExpression,
|
||||
updateDateRange,
|
||||
lastCompleteDateRangeExpressionUpdate,
|
||||
} = useContext(LogPositionState.Context);
|
||||
const { filterQuery, applyLogFilterQuery } = useContext(LogFilterState.Context);
|
||||
} = useLogPositionStateContext();
|
||||
const { filterQuery, applyLogFilterQuery } = useLogFilterStateContext();
|
||||
|
||||
const {
|
||||
isReloading,
|
||||
|
|
@ -132,9 +132,8 @@ export const LogsPageLogsContent: React.FunctionComponent = () => {
|
|||
prevLastCompleteDateRangeExpressionUpdate,
|
||||
]);
|
||||
|
||||
const { logSummaryHighlights, currentHighlightKey, logEntryHighlightsById } = useContext(
|
||||
LogHighlightsState.Context
|
||||
);
|
||||
const { logSummaryHighlights, currentHighlightKey, logEntryHighlightsById } =
|
||||
useLogHighlightsStateContext();
|
||||
|
||||
const items = useMemo(
|
||||
() =>
|
||||
|
|
@ -147,7 +146,7 @@ export const LogsPageLogsContent: React.FunctionComponent = () => {
|
|||
[entries, isReloading, logEntryHighlightsById]
|
||||
);
|
||||
|
||||
const [, { setContextEntry }] = useContext(ViewLogInContext.Context);
|
||||
const [, { setContextEntry }] = useViewLogInProviderContext();
|
||||
|
||||
const handleDateRangeExtension = useCallback(
|
||||
(newDateRange) => {
|
||||
|
|
|
|||
|
|
@ -5,29 +5,37 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import React, { useContext } from 'react';
|
||||
import { LogFilterState, WithLogFilterUrlState } from '../../../containers/logs/log_filter';
|
||||
import { LogFlyout } from '../../../containers/logs/log_flyout';
|
||||
import { LogHighlightsState } from '../../../containers/logs/log_highlights/log_highlights';
|
||||
import { LogPositionState, WithLogPositionUrlState } from '../../../containers/logs/log_position';
|
||||
import React from 'react';
|
||||
import {
|
||||
LogFilterStateProvider,
|
||||
useLogFilterStateContext,
|
||||
WithLogFilterUrlState,
|
||||
} from '../../../containers/logs/log_filter';
|
||||
import { LogEntryFlyoutProvider } from '../../../containers/logs/log_flyout';
|
||||
import { LogHighlightsStateProvider } from '../../../containers/logs/log_highlights/log_highlights';
|
||||
import {
|
||||
LogPositionStateProvider,
|
||||
useLogPositionStateContext,
|
||||
WithLogPositionUrlState,
|
||||
} from '../../../containers/logs/log_position';
|
||||
import { LogStreamProvider, useLogStreamContext } from '../../../containers/logs/log_stream';
|
||||
import { LogViewConfiguration } from '../../../containers/logs/log_view_configuration';
|
||||
import { ViewLogInContext } from '../../../containers/logs/view_log_in_context';
|
||||
import { LogViewConfigurationProvider } from '../../../containers/logs/log_view_configuration';
|
||||
import { ViewLogInContextProvider } from '../../../containers/logs/view_log_in_context';
|
||||
import { useLogViewContext } from '../../../hooks/use_log_view';
|
||||
|
||||
const LogFilterStateProvider: React.FC = ({ children }) => {
|
||||
const LogFilterState: React.FC = ({ children }) => {
|
||||
const { derivedDataView } = useLogViewContext();
|
||||
|
||||
return (
|
||||
<LogFilterState.Provider indexPattern={derivedDataView}>
|
||||
<LogFilterStateProvider indexPattern={derivedDataView}>
|
||||
<WithLogFilterUrlState />
|
||||
{children}
|
||||
</LogFilterState.Provider>
|
||||
</LogFilterStateProvider>
|
||||
);
|
||||
};
|
||||
|
||||
const ViewLogInContextProvider: React.FC = ({ children }) => {
|
||||
const { startTimestamp, endTimestamp } = useContext(LogPositionState.Context);
|
||||
const ViewLogInContext: React.FC = ({ children }) => {
|
||||
const { startTimestamp, endTimestamp } = useLogPositionStateContext();
|
||||
const { logViewId } = useLogViewContext();
|
||||
|
||||
if (!startTimestamp || !endTimestamp) {
|
||||
|
|
@ -35,22 +43,21 @@ const ViewLogInContextProvider: React.FC = ({ children }) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<ViewLogInContext.Provider
|
||||
<ViewLogInContextProvider
|
||||
startTimestamp={startTimestamp}
|
||||
endTimestamp={endTimestamp}
|
||||
sourceId={logViewId}
|
||||
>
|
||||
{children}
|
||||
</ViewLogInContext.Provider>
|
||||
</ViewLogInContextProvider>
|
||||
);
|
||||
};
|
||||
|
||||
const LogEntriesStateProvider: React.FC = ({ children }) => {
|
||||
const { logViewId } = useLogViewContext();
|
||||
const { startTimestamp, endTimestamp, targetPosition, isInitialized } = useContext(
|
||||
LogPositionState.Context
|
||||
);
|
||||
const { filterQuery } = useContext(LogFilterState.Context);
|
||||
const { startTimestamp, endTimestamp, targetPosition, isInitialized } =
|
||||
useLogPositionStateContext();
|
||||
const { filterQuery } = useLogFilterStateContext();
|
||||
|
||||
// Don't render anything if the date range is incorrect.
|
||||
if (!startTimestamp || !endTimestamp) {
|
||||
|
|
@ -76,10 +83,10 @@ const LogEntriesStateProvider: React.FC = ({ children }) => {
|
|||
);
|
||||
};
|
||||
|
||||
const LogHighlightsStateProvider: React.FC = ({ children }) => {
|
||||
const LogHighlightsState: React.FC = ({ children }) => {
|
||||
const { logViewId, logView } = useLogViewContext();
|
||||
const { topCursor, bottomCursor, entries } = useLogStreamContext();
|
||||
const { filterQuery } = useContext(LogFilterState.Context);
|
||||
const { filterQuery } = useLogFilterStateContext();
|
||||
|
||||
const highlightsProps = {
|
||||
sourceId: logViewId,
|
||||
|
|
@ -90,7 +97,7 @@ const LogHighlightsStateProvider: React.FC = ({ children }) => {
|
|||
size: entries.length,
|
||||
filterQuery: filterQuery?.serializedQuery ?? null,
|
||||
};
|
||||
return <LogHighlightsState.Provider {...highlightsProps}>{children}</LogHighlightsState.Provider>;
|
||||
return <LogHighlightsStateProvider {...highlightsProps}>{children}</LogHighlightsStateProvider>;
|
||||
};
|
||||
|
||||
export const LogsPageProviders: React.FunctionComponent = ({ children }) => {
|
||||
|
|
@ -102,19 +109,19 @@ export const LogsPageProviders: React.FunctionComponent = ({ children }) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<LogViewConfiguration.Provider>
|
||||
<LogFlyout.Provider>
|
||||
<LogPositionState.Provider>
|
||||
<LogViewConfigurationProvider>
|
||||
<LogEntryFlyoutProvider>
|
||||
<LogPositionStateProvider>
|
||||
<WithLogPositionUrlState />
|
||||
<ViewLogInContextProvider>
|
||||
<LogFilterStateProvider>
|
||||
<ViewLogInContext>
|
||||
<LogFilterState>
|
||||
<LogEntriesStateProvider>
|
||||
<LogHighlightsStateProvider>{children}</LogHighlightsStateProvider>
|
||||
<LogHighlightsState>{children}</LogHighlightsState>
|
||||
</LogEntriesStateProvider>
|
||||
</LogFilterStateProvider>
|
||||
</ViewLogInContextProvider>
|
||||
</LogPositionState.Provider>
|
||||
</LogFlyout.Provider>
|
||||
</LogViewConfiguration.Provider>
|
||||
</LogFilterState>
|
||||
</ViewLogInContext>
|
||||
</LogPositionStateProvider>
|
||||
</LogEntryFlyoutProvider>
|
||||
</LogViewConfigurationProvider>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
|
||||
import { Query } from '@kbn/es-query';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import React, { useContext } from 'react';
|
||||
import React from 'react';
|
||||
import { QueryStringInput } from '@kbn/unified-search-plugin/public';
|
||||
import { DataView } from '@kbn/data-views-plugin/public';
|
||||
import { euiStyled } from '@kbn/kibana-react-plugin/common';
|
||||
|
|
@ -17,21 +17,20 @@ import { LogDatepicker } from '../../../components/logging/log_datepicker';
|
|||
import { LogHighlightsMenu } from '../../../components/logging/log_highlights_menu';
|
||||
import { LogTextScaleControls } from '../../../components/logging/log_text_scale_controls';
|
||||
import { LogTextWrapControls } from '../../../components/logging/log_text_wrap_controls';
|
||||
import { LogFilterState } from '../../../containers/logs/log_filter';
|
||||
import { LogFlyout } from '../../../containers/logs/log_flyout';
|
||||
import { LogHighlightsState } from '../../../containers/logs/log_highlights/log_highlights';
|
||||
import { LogPositionState } from '../../../containers/logs/log_position';
|
||||
import { LogViewConfiguration } from '../../../containers/logs/log_view_configuration';
|
||||
import { useLogFilterStateContext } from '../../../containers/logs/log_filter';
|
||||
import { useLogEntryFlyoutContext } from '../../../containers/logs/log_flyout';
|
||||
import { useLogHighlightsStateContext } from '../../../containers/logs/log_highlights/log_highlights';
|
||||
import { useLogPositionStateContext } from '../../../containers/logs/log_position';
|
||||
import { useLogViewConfigurationContext } from '../../../containers/logs/log_view_configuration';
|
||||
import { useLogViewContext } from '../../../hooks/use_log_view';
|
||||
|
||||
export const LogsToolbar = () => {
|
||||
const { derivedDataView } = useLogViewContext();
|
||||
const { availableTextScales, setTextScale, setTextWrap, textScale, textWrap } = useContext(
|
||||
LogViewConfiguration.Context
|
||||
);
|
||||
const { availableTextScales, setTextScale, setTextWrap, textScale, textWrap } =
|
||||
useLogViewConfigurationContext();
|
||||
const { filterQueryDraft, isFilterQueryDraftValid, applyLogFilterQuery, setLogFilterQueryDraft } =
|
||||
useContext(LogFilterState.Context);
|
||||
const { setSurroundingLogsId } = useContext(LogFlyout.Context);
|
||||
useLogFilterStateContext();
|
||||
const { setSurroundingLogsId } = useLogEntryFlyoutContext();
|
||||
|
||||
const {
|
||||
setHighlightTerms,
|
||||
|
|
@ -41,7 +40,7 @@ export const LogsToolbar = () => {
|
|||
hasNextHighlight,
|
||||
goToPreviousHighlight,
|
||||
goToNextHighlight,
|
||||
} = useContext(LogHighlightsState.Context);
|
||||
} = useLogHighlightsStateContext();
|
||||
const {
|
||||
isStreaming,
|
||||
startLiveStreaming,
|
||||
|
|
@ -49,7 +48,7 @@ export const LogsToolbar = () => {
|
|||
startDateExpression,
|
||||
endDateExpression,
|
||||
updateDateRange,
|
||||
} = useContext(LogPositionState.Context);
|
||||
} = useLogPositionStateContext();
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -15,10 +15,10 @@ import {
|
|||
} from '@elastic/eui';
|
||||
import { FormattedMessage } from '@kbn/i18n-react';
|
||||
import { isEmpty } from 'lodash';
|
||||
import React, { useCallback, useContext, useMemo } from 'react';
|
||||
import React, { useCallback, useMemo } from 'react';
|
||||
import { euiStyled } from '@kbn/kibana-react-plugin/common';
|
||||
import { LogEntry } from '../../../../common/log_entry';
|
||||
import { ViewLogInContext } from '../../../containers/logs/view_log_in_context';
|
||||
import { useViewLogInProviderContext } from '../../../containers/logs/view_log_in_context';
|
||||
import { useViewportDimensions } from '../../../utils/use_viewport_dimensions';
|
||||
import { LogStream } from '../../../components/log_stream';
|
||||
|
||||
|
|
@ -26,7 +26,7 @@ const MODAL_MARGIN = 25;
|
|||
|
||||
export const PageViewLogInContext: React.FC = () => {
|
||||
const [{ contextEntry, startTimestamp, endTimestamp, sourceId }, { setContextEntry }] =
|
||||
useContext(ViewLogInContext.Context);
|
||||
useViewLogInProviderContext();
|
||||
const closeModal = useCallback(() => setContextEntry(undefined), [setContextEntry]);
|
||||
const { width: vw, height: vh } = useViewportDimensions();
|
||||
|
||||
|
|
|
|||
|
|
@ -20,11 +20,12 @@ import { HelpCenterContent } from '../../components/help_center_content';
|
|||
import { useReadOnlyBadge } from '../../hooks/use_readonly_badge';
|
||||
import {
|
||||
MetricsExplorerOptionsContainer,
|
||||
useMetricsExplorerOptionsContainerContext,
|
||||
DEFAULT_METRICS_EXPLORER_VIEW_STATE,
|
||||
} from './metrics_explorer/hooks/use_metrics_explorer_options';
|
||||
import { WithMetricsExplorerOptionsUrlState } from '../../containers/metrics_explorer/with_metrics_explorer_options_url_state';
|
||||
import { WithSource } from '../../containers/with_source';
|
||||
import { Source } from '../../containers/metrics_source';
|
||||
import { SourceProvider } from '../../containers/metrics_source';
|
||||
import { MetricsExplorerPage } from './metrics_explorer';
|
||||
import { SnapshotPage } from './inventory_view';
|
||||
import { MetricDetail } from './metric_detail';
|
||||
|
|
@ -65,7 +66,7 @@ export const InfrastructurePage = ({ match }: RouteComponentProps) => {
|
|||
|
||||
return (
|
||||
<EuiErrorBoundary>
|
||||
<Source.Provider sourceId="default">
|
||||
<SourceProvider sourceId="default">
|
||||
<AlertPrefillProvider>
|
||||
<WaffleOptionsProvider>
|
||||
<WaffleTimeProvider>
|
||||
|
|
@ -109,7 +110,7 @@ export const InfrastructurePage = ({ match }: RouteComponentProps) => {
|
|||
render={(props) => (
|
||||
<WithSource>
|
||||
{({ configuration, createDerivedIndexPattern }) => (
|
||||
<MetricsExplorerOptionsContainer.Provider>
|
||||
<MetricsExplorerOptionsContainer>
|
||||
<WithMetricsExplorerOptionsUrlState />
|
||||
{configuration ? (
|
||||
<PageContent
|
||||
|
|
@ -119,7 +120,7 @@ export const InfrastructurePage = ({ match }: RouteComponentProps) => {
|
|||
) : (
|
||||
<SourceLoadingPage />
|
||||
)}
|
||||
</MetricsExplorerOptionsContainer.Provider>
|
||||
</MetricsExplorerOptionsContainer>
|
||||
)}
|
||||
</WithSource>
|
||||
)}
|
||||
|
|
@ -132,7 +133,7 @@ export const InfrastructurePage = ({ match }: RouteComponentProps) => {
|
|||
</WaffleTimeProvider>
|
||||
</WaffleOptionsProvider>
|
||||
</AlertPrefillProvider>
|
||||
</Source.Provider>
|
||||
</SourceProvider>
|
||||
</EuiErrorBoundary>
|
||||
);
|
||||
};
|
||||
|
|
@ -142,7 +143,7 @@ const PageContent = (props: {
|
|||
createDerivedIndexPattern: CreateDerivedIndexPattern;
|
||||
}) => {
|
||||
const { createDerivedIndexPattern, configuration } = props;
|
||||
const { options } = useContext(MetricsExplorerOptionsContainer.Context);
|
||||
const { options } = useMetricsExplorerOptionsContainerContext();
|
||||
|
||||
return (
|
||||
<SavedViewProvider
|
||||
|
|
|
|||
|
|
@ -7,10 +7,10 @@
|
|||
|
||||
import { EuiLoadingContent } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import React, { useContext, useMemo } from 'react';
|
||||
import React, { useMemo } from 'react';
|
||||
import { useKibanaContextForPlugin } from '../../../../../../../hooks/use_kibana';
|
||||
import { TabContent, TabProps } from '../shared';
|
||||
import { Source } from '../../../../../../../containers/metrics_source';
|
||||
import { useSourceContext } from '../../../../../../../containers/metrics_source';
|
||||
import { findInventoryModel } from '../../../../../../../../common/inventory_models';
|
||||
import { InventoryItemType } from '../../../../../../../../common/inventory_models/types';
|
||||
import { useMetadata } from '../../../../../metric_detail/hooks/use_metadata';
|
||||
|
|
@ -20,7 +20,7 @@ const TabComponent = (props: TabProps) => {
|
|||
const nodeId = props.node.id;
|
||||
const nodeType = props.nodeType as InventoryItemType;
|
||||
const inventoryModel = findInventoryModel(nodeType);
|
||||
const { sourceId } = useContext(Source.Context);
|
||||
const { sourceId } = useSourceContext();
|
||||
const { currentTimeRange } = useWaffleTimeContext();
|
||||
const { loading, metadata } = useMetadata(
|
||||
nodeId,
|
||||
|
|
|
|||
|
|
@ -5,12 +5,12 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import React, { useCallback, useContext, useMemo } from 'react';
|
||||
import React, { useCallback, useMemo } from 'react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { EuiLoadingChart } from '@elastic/eui';
|
||||
import { euiStyled } from '@kbn/kibana-react-plugin/common';
|
||||
import { TabContent, TabProps } from '../shared';
|
||||
import { Source } from '../../../../../../../containers/metrics_source';
|
||||
import { useSourceContext } from '../../../../../../../containers/metrics_source';
|
||||
import { findInventoryModel } from '../../../../../../../../common/inventory_models';
|
||||
import { InventoryItemType } from '../../../../../../../../common/inventory_models/types';
|
||||
import { useMetadata } from '../../../../../metric_detail/hooks/use_metadata';
|
||||
|
|
@ -23,7 +23,7 @@ const TabComponent = (props: TabProps) => {
|
|||
const nodeId = props.node.id;
|
||||
const nodeType = props.nodeType as InventoryItemType;
|
||||
const inventoryModel = findInventoryModel(nodeType);
|
||||
const { sourceId } = useContext(Source.Context);
|
||||
const { sourceId } = useSourceContext();
|
||||
const { currentTimeRange } = useWaffleTimeContext();
|
||||
const { applyFilterQuery } = useWaffleFiltersContext();
|
||||
const { loading: metadataLoading, metadata } = useMetadata(
|
||||
|
|
|
|||
|
|
@ -5,15 +5,15 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import React, { useContext } from 'react';
|
||||
import React from 'react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { Source } from '../../../../containers/metrics_source';
|
||||
import { useSourceContext } from '../../../../containers/metrics_source';
|
||||
import { AutocompleteField } from '../../../../components/autocomplete_field';
|
||||
import { WithKueryAutocompletion } from '../../../../containers/with_kuery_autocompletion';
|
||||
import { useWaffleFiltersContext } from '../hooks/use_waffle_filters';
|
||||
|
||||
export const SearchBar = () => {
|
||||
const { createDerivedIndexPattern } = useContext(Source.Context);
|
||||
const { createDerivedIndexPattern } = useSourceContext();
|
||||
const {
|
||||
applyFilterQueryFromKueryExpression,
|
||||
filterQueryDraft,
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
import { EuiErrorBoundary } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import React, { useContext } from 'react';
|
||||
import React from 'react';
|
||||
import { useTrackPageview } from '@kbn/observability-plugin/public';
|
||||
import { euiStyled } from '@kbn/kibana-react-plugin/common';
|
||||
import { APP_WRAPPER_CLASS } from '@kbn/core/public';
|
||||
|
|
@ -17,7 +17,7 @@ import { DocumentTitle } from '../../../components/document_title';
|
|||
|
||||
import { SourceErrorPage } from '../../../components/source_error_page';
|
||||
import { SourceLoadingPage } from '../../../components/source_loading_page';
|
||||
import { Source } from '../../../containers/metrics_source';
|
||||
import { useSourceContext } from '../../../containers/metrics_source';
|
||||
import { useMetricsBreadcrumbs } from '../../../hooks/use_metrics_breadcrumbs';
|
||||
import { LayoutView } from './components/layout_view';
|
||||
import { SavedViewProvider } from '../../../containers/saved_view/saved_view';
|
||||
|
|
@ -36,7 +36,7 @@ export const SnapshotPage = () => {
|
|||
loadSource,
|
||||
source,
|
||||
metricIndicesExist,
|
||||
} = useContext(Source.Context);
|
||||
} = useSourceContext();
|
||||
useTrackPageview({ app: 'infra_metrics', path: 'inventory' });
|
||||
useTrackPageview({ app: 'infra_metrics', path: 'inventory', delay: 15000 });
|
||||
const { source: optionsSource } = useWaffleOptionsContext();
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import React, { useCallback, useEffect, useState, useContext } from 'react';
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import dateMath from '@kbn/datemath';
|
||||
import moment from 'moment';
|
||||
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
|
||||
import { Source } from '../../../../containers/metrics_source';
|
||||
import { useSourceContext } from '../../../../containers/metrics_source';
|
||||
import { InventoryMetric, InventoryItemType } from '../../../../../common/inventory_models/types';
|
||||
import { useNodeDetails } from '../hooks/use_node_details';
|
||||
import { MetricsSideNav } from './side_nav';
|
||||
|
|
@ -53,7 +53,7 @@ const parseRange = (range: MetricsTimeInput) => {
|
|||
};
|
||||
|
||||
export const NodeDetailsPage = (props: Props) => {
|
||||
const { metricIndicesExist } = useContext(Source.Context);
|
||||
const { metricIndicesExist } = useSourceContext();
|
||||
const [parsedTimeRange, setParsedTimeRange] = useState(parseRange(props.timeRange));
|
||||
const { metrics, loading, makeRequest, error } = useNodeDetails(
|
||||
props.requiredMetrics,
|
||||
|
|
|
|||
|
|
@ -6,14 +6,14 @@
|
|||
*/
|
||||
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import React, { useContext, useState } from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import { EuiTheme, withTheme } from '@kbn/kibana-react-plugin/common';
|
||||
import { useLinkProps } from '@kbn/observability-plugin/public';
|
||||
import { DocumentTitle } from '../../../components/document_title';
|
||||
import { withMetricPageProviders } from './page_providers';
|
||||
import { useMetadata } from './hooks/use_metadata';
|
||||
import { useMetricsBreadcrumbs } from '../../../hooks/use_metrics_breadcrumbs';
|
||||
import { Source } from '../../../containers/metrics_source';
|
||||
import { useSourceContext } from '../../../containers/metrics_source';
|
||||
import { InfraLoadingPanel } from '../../../components/loading';
|
||||
import { findInventoryModel } from '../../../../common/inventory_models';
|
||||
import { NavItem } from './lib/side_nav_context';
|
||||
|
|
@ -38,7 +38,7 @@ export const MetricDetail = withMetricPageProviders(
|
|||
const nodeId = match.params.node;
|
||||
const nodeType = match.params.type as InventoryItemType;
|
||||
const inventoryModel = findInventoryModel(nodeType);
|
||||
const { sourceId, metricIndicesExist } = useContext(Source.Context);
|
||||
const { sourceId, metricIndicesExist } = useSourceContext();
|
||||
|
||||
const {
|
||||
timeRange,
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
import { EuiErrorBoundary } from '@elastic/eui';
|
||||
import React from 'react';
|
||||
import { Source } from '../../../containers/metrics_source';
|
||||
import { SourceProvider } from '../../../containers/metrics_source';
|
||||
import { MetricsTimeProvider } from './hooks/use_metrics_time';
|
||||
|
||||
export const withMetricPageProviders =
|
||||
|
|
@ -15,10 +15,10 @@ export const withMetricPageProviders =
|
|||
(props: T) =>
|
||||
(
|
||||
<EuiErrorBoundary>
|
||||
<Source.Provider sourceId="default">
|
||||
<SourceProvider sourceId="default">
|
||||
<MetricsTimeProvider>
|
||||
<Component {...props} />
|
||||
</MetricsTimeProvider>
|
||||
</Source.Provider>
|
||||
</SourceProvider>
|
||||
</EuiErrorBoundary>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -25,9 +25,7 @@ const renderUseMetricsExplorerStateHook = () =>
|
|||
renderHook((props) => useMetricsExplorerState(props.source, props.derivedIndexPattern), {
|
||||
initialProps: { source, derivedIndexPattern },
|
||||
wrapper: ({ children }) => (
|
||||
<MetricsExplorerOptionsContainer.Provider>
|
||||
{children}
|
||||
</MetricsExplorerOptionsContainer.Provider>
|
||||
<MetricsExplorerOptionsContainer>{children}</MetricsExplorerOptionsContainer>
|
||||
),
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import { useState, useCallback, useContext } from 'react';
|
||||
import { useState, useCallback } from 'react';
|
||||
import { DataViewBase } from '@kbn/es-query';
|
||||
import { MetricsSourceConfigurationProperties } from '../../../../../common/metrics_sources';
|
||||
import {
|
||||
|
|
@ -14,7 +14,7 @@ import {
|
|||
} from '../../../../../common/http_api/metrics_explorer';
|
||||
import { useMetricsExplorerData } from './use_metrics_explorer_data';
|
||||
import {
|
||||
MetricsExplorerOptionsContainer,
|
||||
useMetricsExplorerOptionsContainerContext,
|
||||
MetricsExplorerChartOptions,
|
||||
MetricsExplorerTimeOptions,
|
||||
MetricsExplorerOptions,
|
||||
|
|
@ -42,7 +42,7 @@ export const useMetricsExplorerState = (
|
|||
setChartOptions,
|
||||
setTimeRange,
|
||||
setOptions,
|
||||
} = useContext(MetricsExplorerOptionsContainer.Context);
|
||||
} = useMetricsExplorerOptionsContainerContext();
|
||||
|
||||
const { loading, error, data, loadData } = useMetricsExplorerData(
|
||||
options,
|
||||
|
|
|
|||
|
|
@ -208,4 +208,5 @@ export const useMetricsExplorerOptions = () => {
|
|||
};
|
||||
};
|
||||
|
||||
export const MetricsExplorerOptionsContainer = createContainer(useMetricsExplorerOptions);
|
||||
export const [MetricsExplorerOptionsContainer, useMetricsExplorerOptionsContainerContext] =
|
||||
createContainer(useMetricsExplorerOptions);
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
import { EuiErrorBoundary } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import React, { useEffect, useContext } from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
import { useTrackPageview } from '@kbn/observability-plugin/public';
|
||||
import { MetricsSourceConfigurationProperties } from '../../../../common/metrics_sources';
|
||||
import { useMetricsBreadcrumbs } from '../../../hooks/use_metrics_breadcrumbs';
|
||||
|
|
@ -16,7 +16,7 @@ import { NoData } from '../../../components/empty_states';
|
|||
import { MetricsExplorerCharts } from './components/charts';
|
||||
import { MetricsExplorerToolbar } from './components/toolbar';
|
||||
import { useMetricsExplorerState } from './hooks/use_metric_explorer_state';
|
||||
import { Source } from '../../../containers/metrics_source';
|
||||
import { useSourceContext } from '../../../containers/metrics_source';
|
||||
import { useSavedViewContext } from '../../../containers/saved_view/saved_view';
|
||||
import { MetricsPageTemplate } from '../page_template';
|
||||
import { metricsExplorerTitle } from '../../../translations';
|
||||
|
|
@ -51,7 +51,7 @@ export const MetricsExplorerPage = ({ source, derivedIndexPattern }: MetricsExpl
|
|||
useTrackPageview({ app: 'infra_metrics', path: 'metrics_explorer' });
|
||||
useTrackPageview({ app: 'infra_metrics', path: 'metrics_explorer', delay: 15000 });
|
||||
|
||||
const { metricIndicesExist } = useContext(Source.Context);
|
||||
const { metricIndicesExist } = useSourceContext();
|
||||
useEffect(() => {
|
||||
if (currentView) {
|
||||
onViewStateChange(currentView);
|
||||
|
|
|
|||
|
|
@ -15,10 +15,10 @@ import {
|
|||
} from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { FormattedMessage } from '@kbn/i18n-react';
|
||||
import React, { useCallback, useContext, useMemo } from 'react';
|
||||
import React, { useCallback, useMemo } from 'react';
|
||||
import { Prompt } from '@kbn/observability-plugin/public';
|
||||
import { SourceLoadingPage } from '../../../components/source_loading_page';
|
||||
import { Source } from '../../../containers/metrics_source';
|
||||
import { useSourceContext } from '../../../containers/metrics_source';
|
||||
import { useInfraMLCapabilitiesContext } from '../../../containers/ml/infra_ml_capabilities';
|
||||
import { IndicesConfigurationPanel } from './indices_configuration_panel';
|
||||
import { MLConfigurationPanel } from './ml_configuration_panel';
|
||||
|
|
@ -48,7 +48,7 @@ export const SourceConfigurationSettings = ({
|
|||
isLoading,
|
||||
isUninitialized,
|
||||
updateSourceConfiguration,
|
||||
} = useContext(Source.Context);
|
||||
} = useSourceContext();
|
||||
|
||||
const {
|
||||
indicesConfigurationProps,
|
||||
|
|
|
|||
|
|
@ -17,9 +17,6 @@ import {
|
|||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiFocusTrap,
|
||||
EuiOutsideClickDetector,
|
||||
EuiWindowEvent,
|
||||
keys,
|
||||
} from '@elastic/eui';
|
||||
|
||||
import { i18n } from '@kbn/i18n';
|
||||
|
|
@ -37,7 +34,10 @@ function fromExcludedClickTarget(event: Event) {
|
|||
node !== null;
|
||||
node = node!.parentElement
|
||||
) {
|
||||
if (node.classList!.contains(DONT_CLOSE_DIMENSION_CONTAINER_ON_CLICK_CLASS)) {
|
||||
if (
|
||||
node.classList!.contains(DONT_CLOSE_DIMENSION_CONTAINER_ON_CLICK_CLASS) ||
|
||||
node.classList!.contains('euiBody-hasPortalContent')
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
|
@ -69,18 +69,6 @@ export function DimensionContainer({
|
|||
return canClose;
|
||||
}, [handleClose]);
|
||||
|
||||
const closeOnEscape = useCallback(
|
||||
(event: KeyboardEvent) => {
|
||||
if (event.key === keys.ESCAPE) {
|
||||
const canClose = closeFlyout();
|
||||
if (canClose) {
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
},
|
||||
[closeFlyout]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
document.body.classList.add('lnsBody--overflowHidden');
|
||||
|
|
@ -94,81 +82,80 @@ export function DimensionContainer({
|
|||
|
||||
return isOpen ? (
|
||||
<div ref={panelRef}>
|
||||
<EuiFocusTrap disabled={!focusTrapIsEnabled} clickOutsideDisables={true}>
|
||||
<EuiWindowEvent event="keydown" handler={closeOnEscape} />
|
||||
<EuiOutsideClickDetector
|
||||
onOutsideClick={(event) => {
|
||||
if (isFullscreen || fromExcludedClickTarget(event)) {
|
||||
return;
|
||||
<EuiFocusTrap
|
||||
disabled={!focusTrapIsEnabled}
|
||||
clickOutsideDisables={false}
|
||||
onClickOutside={(event) => {
|
||||
if (isFullscreen || fromExcludedClickTarget(event)) {
|
||||
return;
|
||||
}
|
||||
closeFlyout();
|
||||
}}
|
||||
onEscapeKey={closeFlyout}
|
||||
>
|
||||
<div
|
||||
role="dialog"
|
||||
aria-labelledby="lnsDimensionContainerTitle"
|
||||
className="lnsDimensionContainer euiFlyout"
|
||||
onAnimationEnd={() => {
|
||||
if (isOpen) {
|
||||
// EuiFocusTrap interferes with animating elements with absolute position:
|
||||
// running this onAnimationEnd, otherwise the flyout pushes content when animating
|
||||
setFocusTrapIsEnabled(true);
|
||||
}
|
||||
closeFlyout();
|
||||
}}
|
||||
isDisabled={!isOpen}
|
||||
>
|
||||
<div
|
||||
role="dialog"
|
||||
aria-labelledby="lnsDimensionContainerTitle"
|
||||
className="lnsDimensionContainer euiFlyout"
|
||||
onAnimationEnd={() => {
|
||||
if (isOpen) {
|
||||
// EuiFocusTrap interferes with animating elements with absolute position:
|
||||
// running this onAnimationEnd, otherwise the flyout pushes content when animating
|
||||
setFocusTrapIsEnabled(true);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<EuiFlyoutHeader hasBorder className="lnsDimensionContainer__header">
|
||||
<EuiFlexGroup gutterSize="m" alignItems="center" responsive={false}>
|
||||
<EuiFlexItem grow={true}>
|
||||
<EuiTitle size="xs">
|
||||
<h2
|
||||
id="lnsDimensionContainerTitle"
|
||||
className="lnsDimensionContainer__headerTitle"
|
||||
>
|
||||
<strong>
|
||||
{i18n.translate('xpack.lens.configure.configurePanelTitle', {
|
||||
defaultMessage: '{groupLabel}',
|
||||
values: {
|
||||
groupLabel,
|
||||
},
|
||||
})}
|
||||
</strong>
|
||||
</h2>
|
||||
</EuiTitle>
|
||||
</EuiFlexItem>
|
||||
<EuiFlyoutHeader hasBorder className="lnsDimensionContainer__header">
|
||||
<EuiFlexGroup gutterSize="m" alignItems="center" responsive={false}>
|
||||
<EuiFlexItem grow={true}>
|
||||
<EuiTitle size="xs">
|
||||
<h2
|
||||
id="lnsDimensionContainerTitle"
|
||||
className="lnsDimensionContainer__headerTitle"
|
||||
>
|
||||
<strong>
|
||||
{i18n.translate('xpack.lens.configure.configurePanelTitle', {
|
||||
defaultMessage: '{groupLabel}',
|
||||
values: {
|
||||
groupLabel,
|
||||
},
|
||||
})}
|
||||
</strong>
|
||||
</h2>
|
||||
</EuiTitle>
|
||||
</EuiFlexItem>
|
||||
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButtonIcon
|
||||
color="text"
|
||||
data-test-subj="lns-indexPattern-dimensionContainerBack"
|
||||
className="lnsDimensionContainer__backIcon"
|
||||
onClick={closeFlyout}
|
||||
iconType="cross"
|
||||
aria-label={i18n.translate('xpack.lens.dimensionContainer.closeConfiguration', {
|
||||
defaultMessage: 'Close configuration',
|
||||
})}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlyoutHeader>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButtonIcon
|
||||
color="text"
|
||||
data-test-subj="lns-indexPattern-dimensionContainerBack"
|
||||
className="lnsDimensionContainer__backIcon"
|
||||
onClick={closeFlyout}
|
||||
iconType="cross"
|
||||
aria-label={i18n.translate('xpack.lens.dimensionContainer.closeConfiguration', {
|
||||
defaultMessage: 'Close configuration',
|
||||
})}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlyoutHeader>
|
||||
|
||||
<div className="lnsDimensionContainer__content">{panel}</div>
|
||||
<div className="lnsDimensionContainer__content">{panel}</div>
|
||||
|
||||
<EuiFlyoutFooter className="lnsDimensionContainer__footer">
|
||||
<EuiButtonEmpty
|
||||
flush="left"
|
||||
size="s"
|
||||
iconType="cross"
|
||||
onClick={closeFlyout}
|
||||
data-test-subj="lns-indexPattern-dimensionContainerClose"
|
||||
>
|
||||
{i18n.translate('xpack.lens.dimensionContainer.close', {
|
||||
defaultMessage: 'Close',
|
||||
})}
|
||||
</EuiButtonEmpty>
|
||||
</EuiFlyoutFooter>
|
||||
</div>
|
||||
</EuiOutsideClickDetector>
|
||||
<EuiFlyoutFooter className="lnsDimensionContainer__footer">
|
||||
<EuiButtonEmpty
|
||||
flush="left"
|
||||
size="s"
|
||||
iconType="cross"
|
||||
onClick={closeFlyout}
|
||||
data-test-subj="lns-indexPattern-dimensionContainerClose"
|
||||
>
|
||||
{i18n.translate('xpack.lens.dimensionContainer.close', {
|
||||
defaultMessage: 'Close',
|
||||
})}
|
||||
</EuiButtonEmpty>
|
||||
</EuiFlyoutFooter>
|
||||
</div>
|
||||
</EuiFocusTrap>
|
||||
</div>
|
||||
) : null;
|
||||
|
|
|
|||
|
|
@ -32,29 +32,6 @@ export const FilterPopover = ({
|
|||
}) => {
|
||||
const inputRef = React.useRef<HTMLInputElement>();
|
||||
|
||||
// The following code is to prevent an <ESCAPE> keypress
|
||||
// from propagating.
|
||||
//
|
||||
// TODO - It looks like EUI should be handling this
|
||||
// (see https://github.com/elastic/eui/commit/ad97583b0d644690379f72c7a20879cfadb16e7a)
|
||||
const popoverRef = React.useRef<EuiPopover>(null);
|
||||
let panelElement: HTMLDivElement;
|
||||
const panelRefCallback = (element: HTMLDivElement) => {
|
||||
const listener = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape') {
|
||||
event.stopPropagation();
|
||||
panelElement.removeEventListener('keydown', listener);
|
||||
popoverRef.current?.closePopover();
|
||||
}
|
||||
};
|
||||
|
||||
if (element) {
|
||||
panelElement = element;
|
||||
panelElement.addEventListener('keydown', listener);
|
||||
}
|
||||
};
|
||||
// End <ESCAPE> handling code
|
||||
|
||||
const setFilterLabel = (label: string) => setFilter({ ...filter, label });
|
||||
const setFilterQuery = (input: Query) => setFilter({ ...filter, input });
|
||||
|
||||
|
|
@ -70,14 +47,12 @@ export const FilterPopover = ({
|
|||
|
||||
return (
|
||||
<EuiPopover
|
||||
ref={popoverRef}
|
||||
panelRef={panelRefCallback}
|
||||
data-test-subj="indexPattern-filters-existingFilterContainer"
|
||||
anchorClassName="eui-fullWidth"
|
||||
panelClassName="lnsIndexPatternDimensionEditor__filtersEditor"
|
||||
isOpen={isOpen}
|
||||
ownFocus
|
||||
closePopover={() => triggerClose()}
|
||||
closePopover={triggerClose}
|
||||
button={button}
|
||||
>
|
||||
<QueryInput
|
||||
|
|
@ -96,7 +71,7 @@ export const FilterPopover = ({
|
|||
onChange={setFilterLabel}
|
||||
placeholder={getPlaceholder(filter.input.query)}
|
||||
inputRef={inputRef}
|
||||
onSubmit={() => triggerClose()}
|
||||
onSubmit={triggerClose}
|
||||
dataTestSubj="indexPattern-filters-label"
|
||||
/>
|
||||
</EuiPopover>
|
||||
|
|
|
|||
|
|
@ -122,11 +122,14 @@ const Tooltip: FC<{ service: ChartTooltipService }> = React.memo(({ service }) =
|
|||
|
||||
return (
|
||||
<TooltipTrigger
|
||||
modifiers={{
|
||||
preventOverflow: {
|
||||
boundariesElement: 'window',
|
||||
modifiers={[
|
||||
{
|
||||
name: 'preventOverflow',
|
||||
options: {
|
||||
rootBoundary: 'window',
|
||||
},
|
||||
},
|
||||
}}
|
||||
]}
|
||||
placement="right-start"
|
||||
trigger="none"
|
||||
tooltipShown={isTooltipShown}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
*/
|
||||
|
||||
import React, { FC, ReactNode, useContext, useEffect, useMemo } from 'react';
|
||||
import { createPortalNode, InPortal, OutPortal } from 'react-reverse-portal';
|
||||
import { createHtmlPortalNode, InPortal, OutPortal } from 'react-reverse-portal';
|
||||
import { KibanaContextProvider, toMountPoint } from '@kbn/kibana-react-plugin/public';
|
||||
import { useMlKibana } from '../../contexts/kibana';
|
||||
import { MlPageControlsContext } from '../ml_page';
|
||||
|
|
@ -20,7 +20,7 @@ export const HeaderMenuPortal: FC<HeaderMenuPortalProps> = ({ children }) => {
|
|||
|
||||
const { setHeaderActionMenu } = useContext(MlPageControlsContext);
|
||||
|
||||
const portalNode = useMemo(() => createPortalNode(), []);
|
||||
const portalNode = useMemo(() => createHtmlPortalNode(), []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!setHeaderActionMenu) {
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import { i18n } from '@kbn/i18n';
|
|||
import { Redirect, Route, Switch } from 'react-router-dom';
|
||||
import type { AppMountParameters } from '@kbn/core/public';
|
||||
import { KibanaPageTemplate, RedirectAppLinks } from '@kbn/kibana-react-plugin/public';
|
||||
import { createPortalNode, PortalNode } from 'react-reverse-portal';
|
||||
import { createHtmlPortalNode, HtmlPortalNode } from 'react-reverse-portal';
|
||||
import { MlPageHeaderRenderer } from '../page_header/page_header';
|
||||
import { useSideNavItems } from './side_nav';
|
||||
import * as routes from '../../routing/routes';
|
||||
|
|
@ -23,13 +23,13 @@ import { useActiveRoute } from '../../routing/use_active_route';
|
|||
import { useDocTitle } from '../../routing/use_doc_title';
|
||||
|
||||
export const MlPageControlsContext = createContext<{
|
||||
headerPortal: PortalNode;
|
||||
headerPortal: HtmlPortalNode;
|
||||
setHeaderActionMenu?: AppMountParameters['setHeaderActionMenu'];
|
||||
setIsHeaderMounted: (v: boolean) => void;
|
||||
isHeaderMounted: boolean;
|
||||
}>({
|
||||
setHeaderActionMenu: () => {},
|
||||
headerPortal: createPortalNode(),
|
||||
headerPortal: createHtmlPortalNode(),
|
||||
isHeaderMounted: false,
|
||||
setIsHeaderMounted: () => {},
|
||||
});
|
||||
|
|
@ -46,7 +46,7 @@ export const MlPage: FC<{ pageDeps: PageDependencies }> = React.memo(({ pageDeps
|
|||
},
|
||||
} = useMlKibana();
|
||||
|
||||
const headerPortalNode = useMemo(() => createPortalNode(), []);
|
||||
const headerPortalNode = useMemo(() => createHtmlPortalNode(), []);
|
||||
const [isHeaderMounted, setIsHeaderMounted] = useState(false);
|
||||
|
||||
const routeList = useMemo(
|
||||
|
|
@ -114,7 +114,7 @@ interface CommonPageWrapperProps {
|
|||
setIsHeaderMounted: (v: boolean) => void;
|
||||
pageDeps: PageDependencies;
|
||||
routeList: MlRoute[];
|
||||
headerPortal: PortalNode;
|
||||
headerPortal: HtmlPortalNode;
|
||||
}
|
||||
|
||||
const CommonPageWrapper: FC<CommonPageWrapperProps> = React.memo(({ pageDeps, routeList }) => {
|
||||
|
|
|
|||
|
|
@ -301,4 +301,4 @@ export const useBreadcrumbs = ({ history }: { history: History }) => {
|
|||
};
|
||||
};
|
||||
|
||||
export const BreadcrumbContainer = createContainer(useBreadcrumbs);
|
||||
export const [BreadcrumbContainer, useBreadcrumbContainerContext] = createContainer(useBreadcrumbs);
|
||||
|
|
|
|||
|
|
@ -5,15 +5,15 @@
|
|||
* 2.0.
|
||||
*/
|
||||
import moment from 'moment';
|
||||
import { useContext, useState, useEffect, useRef } from 'react';
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { useKibana } from '@kbn/kibana-react-plugin/public';
|
||||
import { MonitoringTimeContainer } from './use_monitoring_time';
|
||||
import { useMonitoringTimeContainerContext } from './use_monitoring_time';
|
||||
|
||||
export function useCharts() {
|
||||
const { services } = useKibana<{ data: any }>();
|
||||
const history = useHistory();
|
||||
const { handleTimeChange } = useContext(MonitoringTimeContainer.Context);
|
||||
const { handleTimeChange } = useMonitoringTimeContainerContext();
|
||||
|
||||
const [zoomInLevel, setZoomInLevel] = useState(0);
|
||||
|
||||
|
|
|
|||
|
|
@ -75,4 +75,5 @@ export const useMonitoringTime = () => {
|
|||
};
|
||||
};
|
||||
|
||||
export const MonitoringTimeContainer = createContainer(useMonitoringTime);
|
||||
export const [MonitoringTimeContainer, useMonitoringTimeContainerContext] =
|
||||
createContainer(useMonitoringTime);
|
||||
|
|
|
|||
|
|
@ -107,8 +107,8 @@ const MonitoringApp: React.FC<{
|
|||
uiSettings={core.uiSettings}
|
||||
>
|
||||
<HeaderActionMenuContext.Provider value={{ setHeaderActionMenu, theme$ }}>
|
||||
<MonitoringTimeContainer.Provider>
|
||||
<BreadcrumbContainer.Provider history={history}>
|
||||
<MonitoringTimeContainer>
|
||||
<BreadcrumbContainer history={history}>
|
||||
<Router history={history}>
|
||||
<Switch>
|
||||
<Route path="/access-denied" component={AccessDeniedPage} />
|
||||
|
|
@ -336,8 +336,8 @@ const MonitoringApp: React.FC<{
|
|||
/>
|
||||
</Switch>
|
||||
</Router>
|
||||
</BreadcrumbContainer.Provider>
|
||||
</MonitoringTimeContainer.Provider>
|
||||
</BreadcrumbContainer>
|
||||
</MonitoringTimeContainer>
|
||||
</HeaderActionMenuContext.Provider>
|
||||
</GlobalStateProvider>
|
||||
</ExternalConfigContext.Provider>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import { useKibana } from '@kbn/kibana-react-plugin/public';
|
|||
import { ComponentProps } from '../../route_init';
|
||||
import { GlobalStateContext } from '../../contexts/global_state_context';
|
||||
import { useCharts } from '../../hooks/use_charts';
|
||||
import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
|
||||
import { useBreadcrumbContainerContext } from '../../hooks/use_breadcrumbs';
|
||||
import { PageTemplate } from '../page_template';
|
||||
// @ts-ignore
|
||||
import { ApmServerInstance } from '../../../components/apm/instance';
|
||||
|
|
@ -23,7 +23,7 @@ export const ApmInstancePage: React.FC<ComponentProps> = ({ clusters }) => {
|
|||
|
||||
const globalState = useContext(GlobalStateContext);
|
||||
const { services } = useKibana<{ data: any }>();
|
||||
const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
|
||||
const { generate: generateBreadcrumbs } = useBreadcrumbContainerContext();
|
||||
const { zoomInfo, onBrush } = useCharts();
|
||||
const clusterUuid = globalState.cluster_uuid;
|
||||
const ccs = globalState.ccs;
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ import { ApmTemplate } from './apm_template';
|
|||
import { ApmServerInstances } from '../../../components/apm/instances';
|
||||
import { SetupModeRenderer } from '../../../components/renderers/setup_mode';
|
||||
import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
|
||||
import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
|
||||
import { useBreadcrumbContainerContext } from '../../hooks/use_breadcrumbs';
|
||||
import { APM_SYSTEM_ID } from '../../../../common/constants';
|
||||
|
||||
interface SetupModeProps {
|
||||
|
|
@ -29,7 +29,7 @@ interface SetupModeProps {
|
|||
export const ApmInstancesPage: React.FC<ComponentProps> = ({ clusters }) => {
|
||||
const globalState = useContext(GlobalStateContext);
|
||||
const { services } = useKibana<{ data: any }>();
|
||||
const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
|
||||
const { generate: generateBreadcrumbs } = useBreadcrumbContainerContext();
|
||||
const { updateTotalItemCount, getPaginationTableProps } = useTable('apm.instances');
|
||||
const clusterUuid = globalState.cluster_uuid;
|
||||
const ccs = globalState.ccs;
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import { ComponentProps } from '../../route_init';
|
|||
import { ApmTemplate } from './apm_template';
|
||||
import { GlobalStateContext } from '../../contexts/global_state_context';
|
||||
import { useCharts } from '../../hooks/use_charts';
|
||||
import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
|
||||
import { useBreadcrumbContainerContext } from '../../hooks/use_breadcrumbs';
|
||||
// @ts-ignore
|
||||
import { ApmOverview } from '../../../components/apm/overview';
|
||||
|
||||
|
|
@ -23,7 +23,7 @@ export const ApmOverviewPage: React.FC<ComponentProps> = ({ clusters }) => {
|
|||
const { services } = useKibana<{ data: any }>();
|
||||
const clusterUuid = globalState.cluster_uuid;
|
||||
const ccs = globalState.ccs;
|
||||
const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
|
||||
const { generate: generateBreadcrumbs } = useBreadcrumbContainerContext();
|
||||
const cluster = find(clusters, {
|
||||
cluster_uuid: clusterUuid,
|
||||
}) as any;
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ import { GlobalStateContext } from '../../contexts/global_state_context';
|
|||
import { useCharts } from '../../hooks/use_charts';
|
||||
// @ts-ignore
|
||||
import { Beat } from '../../../components/beats/beat';
|
||||
import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
|
||||
import { useBreadcrumbContainerContext } from '../../hooks/use_breadcrumbs';
|
||||
import { BeatsTemplate } from './beats_template';
|
||||
|
||||
export const BeatsInstancePage: React.FC<ComponentProps> = ({ clusters }) => {
|
||||
|
|
@ -23,7 +23,7 @@ export const BeatsInstancePage: React.FC<ComponentProps> = ({ clusters }) => {
|
|||
|
||||
const globalState = useContext(GlobalStateContext);
|
||||
const { services } = useKibana<{ data: any }>();
|
||||
const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
|
||||
const { generate: generateBreadcrumbs } = useBreadcrumbContainerContext();
|
||||
const { zoomInfo, onBrush } = useCharts();
|
||||
const clusterUuid = globalState.cluster_uuid;
|
||||
const ccs = globalState.ccs;
|
||||
|
|
|
|||
|
|
@ -17,13 +17,13 @@ import { BeatsTemplate } from './beats_template';
|
|||
import { Listing } from '../../../components/beats/listing';
|
||||
import { SetupModeRenderer, SetupModeProps } from '../../../components/renderers/setup_mode';
|
||||
import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
|
||||
import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
|
||||
import { useBreadcrumbContainerContext } from '../../hooks/use_breadcrumbs';
|
||||
import { BEATS_SYSTEM_ID } from '../../../../common/constants';
|
||||
|
||||
export const BeatsInstancesPage: React.FC<ComponentProps> = ({ clusters }) => {
|
||||
const globalState = useContext(GlobalStateContext);
|
||||
const { services } = useKibana<{ data: any }>();
|
||||
const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
|
||||
const { generate: generateBreadcrumbs } = useBreadcrumbContainerContext();
|
||||
const { updateTotalItemCount, getPaginationTableProps } = useTable('beats.instances');
|
||||
const clusterUuid = globalState.cluster_uuid;
|
||||
const ccs = globalState.ccs;
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ import { GlobalStateContext } from '../../contexts/global_state_context';
|
|||
import { useCharts } from '../../hooks/use_charts';
|
||||
// @ts-ignore
|
||||
import { BeatsOverview } from '../../../components/beats/overview';
|
||||
import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
|
||||
import { useBreadcrumbContainerContext } from '../../hooks/use_breadcrumbs';
|
||||
|
||||
export const BeatsOverviewPage: React.FC<ComponentProps> = ({ clusters }) => {
|
||||
const globalState = useContext(GlobalStateContext);
|
||||
|
|
@ -23,7 +23,7 @@ export const BeatsOverviewPage: React.FC<ComponentProps> = ({ clusters }) => {
|
|||
const { services } = useKibana<{ data: any }>();
|
||||
const clusterUuid = globalState.cluster_uuid;
|
||||
const ccs = globalState.ccs;
|
||||
const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
|
||||
const { generate: generateBreadcrumbs } = useBreadcrumbContainerContext();
|
||||
const cluster = find(clusters, {
|
||||
cluster_uuid: clusterUuid,
|
||||
}) as any;
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ import { Overview } from '../../../components/cluster/overview';
|
|||
import { ExternalConfigContext } from '../../contexts/external_config_context';
|
||||
import { SetupModeRenderer, SetupModeProps } from '../../../components/renderers/setup_mode';
|
||||
import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
|
||||
import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
|
||||
import { useBreadcrumbContainerContext } from '../../hooks/use_breadcrumbs';
|
||||
import { fetchClusters } from '../../../lib/fetch_clusters';
|
||||
import { AlertsByName } from '../../../alerts/types';
|
||||
import { fetchAlerts } from '../../../lib/fetch_alerts';
|
||||
|
|
@ -33,7 +33,7 @@ export const ClusterOverview: React.FC<{}> = () => {
|
|||
const [clusters, setClusters] = useState([] as any);
|
||||
const [alerts, setAlerts] = useState<AlertsByName>({});
|
||||
const [loaded, setLoaded] = useState<boolean | null>(false);
|
||||
const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
|
||||
const { generate: generateBreadcrumbs } = useBreadcrumbContainerContext();
|
||||
|
||||
let tabs: TabMenuItem[] = [];
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ import { SetupModeContext } from '../../../components/setup_mode/setup_mode_cont
|
|||
import { AlertsByName } from '../../../alerts/types';
|
||||
import { fetchAlerts } from '../../../lib/fetch_alerts';
|
||||
import { ELASTICSEARCH_SYSTEM_ID, RULE_CCR_READ_EXCEPTIONS } from '../../../../common/constants';
|
||||
import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
|
||||
import { useBreadcrumbContainerContext } from '../../hooks/use_breadcrumbs';
|
||||
interface SetupModeProps {
|
||||
setupMode: any;
|
||||
flyoutComponent: any;
|
||||
|
|
@ -27,7 +27,7 @@ interface SetupModeProps {
|
|||
|
||||
export const ElasticsearchCcrPage: React.FC<ComponentProps> = ({ clusters }) => {
|
||||
const globalState = useContext(GlobalStateContext);
|
||||
const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
|
||||
const { generate: generateBreadcrumbs } = useBreadcrumbContainerContext();
|
||||
const { services } = useKibana<{ data: any }>();
|
||||
|
||||
const clusterUuid = globalState.cluster_uuid;
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ import { SetupModeContext } from '../../../components/setup_mode/setup_mode_cont
|
|||
import { AlertsByName } from '../../../alerts/types';
|
||||
import { fetchAlerts } from '../../../lib/fetch_alerts';
|
||||
import { ELASTICSEARCH_SYSTEM_ID, RULE_CCR_READ_EXCEPTIONS } from '../../../../common/constants';
|
||||
import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
|
||||
import { useBreadcrumbContainerContext } from '../../hooks/use_breadcrumbs';
|
||||
|
||||
interface SetupModeProps {
|
||||
setupMode: any;
|
||||
|
|
@ -33,7 +33,7 @@ export const ElasticsearchCcrShardPage: React.FC<ComponentProps> = ({ clusters }
|
|||
const { services } = useKibana<{ data: any }>();
|
||||
const [data, setData] = useState({} as any);
|
||||
const { index, shardId }: { index: string; shardId: string } = useParams();
|
||||
const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
|
||||
const { generate: generateBreadcrumbs } = useBreadcrumbContainerContext();
|
||||
|
||||
const clusterUuid = globalState.cluster_uuid;
|
||||
const cluster = find(clusters, {
|
||||
|
|
|
|||
|
|
@ -20,11 +20,11 @@ import { AdvancedIndex } from '../../../components/elasticsearch/index/advanced'
|
|||
import { AlertsByName } from '../../../alerts/types';
|
||||
import { fetchAlerts } from '../../../lib/fetch_alerts';
|
||||
import { ELASTICSEARCH_SYSTEM_ID, RULE_LARGE_SHARD_SIZE } from '../../../../common/constants';
|
||||
import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
|
||||
import { useBreadcrumbContainerContext } from '../../hooks/use_breadcrumbs';
|
||||
|
||||
export const ElasticsearchIndexAdvancedPage: React.FC<ComponentProps> = ({ clusters }) => {
|
||||
const globalState = useContext(GlobalStateContext);
|
||||
const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
|
||||
const { generate: generateBreadcrumbs } = useBreadcrumbContainerContext();
|
||||
const { services } = useKibana<{ data: any }>();
|
||||
const { index }: { index: string } = useParams();
|
||||
const { zoomInfo, onBrush } = useCharts();
|
||||
|
|
|
|||
|
|
@ -24,11 +24,11 @@ import { labels } from '../../../components/elasticsearch/shard_allocation/lib/l
|
|||
import { AlertsByName } from '../../../alerts/types';
|
||||
import { fetchAlerts } from '../../../lib/fetch_alerts';
|
||||
import { ELASTICSEARCH_SYSTEM_ID, RULE_LARGE_SHARD_SIZE } from '../../../../common/constants';
|
||||
import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
|
||||
import { useBreadcrumbContainerContext } from '../../hooks/use_breadcrumbs';
|
||||
|
||||
export const ElasticsearchIndexPage: React.FC<ComponentProps> = ({ clusters }) => {
|
||||
const globalState = useContext(GlobalStateContext);
|
||||
const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
|
||||
const { generate: generateBreadcrumbs } = useBreadcrumbContainerContext();
|
||||
const { services } = useKibana<{ data: any }>();
|
||||
const { index }: { index: string } = useParams();
|
||||
const { zoomInfo, onBrush } = useCharts();
|
||||
|
|
|
|||
|
|
@ -19,11 +19,11 @@ import { useLocalStorage } from '../../hooks/use_local_storage';
|
|||
import { AlertsByName } from '../../../alerts/types';
|
||||
import { fetchAlerts } from '../../../lib/fetch_alerts';
|
||||
import { ELASTICSEARCH_SYSTEM_ID, RULE_LARGE_SHARD_SIZE } from '../../../../common/constants';
|
||||
import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
|
||||
import { useBreadcrumbContainerContext } from '../../hooks/use_breadcrumbs';
|
||||
|
||||
export const ElasticsearchIndicesPage: React.FC<ComponentProps> = ({ clusters }) => {
|
||||
const globalState = useContext(GlobalStateContext);
|
||||
const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
|
||||
const { generate: generateBreadcrumbs } = useBreadcrumbContainerContext();
|
||||
const { services } = useKibana<{ data: any }>();
|
||||
const { getPaginationTableProps } = useTable('elasticsearch.indices');
|
||||
const clusterUuid = globalState.cluster_uuid;
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ import { SetupModeRenderer } from '../../../components/renderers/setup_mode';
|
|||
import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
|
||||
import { useTable } from '../../hooks/use_table';
|
||||
import type { MLJobs } from '../../../types';
|
||||
import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
|
||||
import { useBreadcrumbContainerContext } from '../../hooks/use_breadcrumbs';
|
||||
import { ELASTICSEARCH_SYSTEM_ID } from '../../../../common/constants';
|
||||
|
||||
interface SetupModeProps {
|
||||
|
|
@ -27,7 +27,7 @@ interface SetupModeProps {
|
|||
|
||||
export const ElasticsearchMLJobsPage: React.FC<ComponentProps> = ({ clusters }) => {
|
||||
const globalState = useContext(GlobalStateContext);
|
||||
const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
|
||||
const { generate: generateBreadcrumbs } = useBreadcrumbContainerContext();
|
||||
const { services } = useKibana<{ data: any }>();
|
||||
const { getPaginationTableProps } = useTable('elasticsearch.mlJobs');
|
||||
const clusterUuid = globalState.cluster_uuid;
|
||||
|
|
|
|||
|
|
@ -25,11 +25,11 @@ import {
|
|||
RULE_DISK_USAGE,
|
||||
RULE_MEMORY_USAGE,
|
||||
} from '../../../../common/constants';
|
||||
import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
|
||||
import { useBreadcrumbContainerContext } from '../../hooks/use_breadcrumbs';
|
||||
|
||||
export const ElasticsearchNodeAdvancedPage: React.FC<ComponentProps> = ({ clusters }) => {
|
||||
const globalState = useContext(GlobalStateContext);
|
||||
const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
|
||||
const { generate: generateBreadcrumbs } = useBreadcrumbContainerContext();
|
||||
const { zoomInfo, onBrush } = useCharts();
|
||||
const [data, setData] = useState({} as any);
|
||||
|
||||
|
|
|
|||
|
|
@ -31,11 +31,11 @@ import {
|
|||
RULE_DISK_USAGE,
|
||||
RULE_MEMORY_USAGE,
|
||||
} from '../../../../common/constants';
|
||||
import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
|
||||
import { useBreadcrumbContainerContext } from '../../hooks/use_breadcrumbs';
|
||||
|
||||
export const ElasticsearchNodePage: React.FC<ComponentProps> = ({ clusters }) => {
|
||||
const globalState = useContext(GlobalStateContext);
|
||||
const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
|
||||
const { generate: generateBreadcrumbs } = useBreadcrumbContainerContext();
|
||||
const { zoomInfo, onBrush } = useCharts();
|
||||
const [showSystemIndices, setShowSystemIndices] = useLocalStorage<boolean>(
|
||||
'showSystemIndices',
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ import { ComponentProps } from '../../route_init';
|
|||
import { SetupModeRenderer, SetupModeProps } from '../../../components/renderers/setup_mode';
|
||||
import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
|
||||
import { useTable } from '../../hooks/use_table';
|
||||
import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
|
||||
import { useBreadcrumbContainerContext } from '../../hooks/use_breadcrumbs';
|
||||
import { AlertsByName } from '../../../alerts/types';
|
||||
import { fetchAlerts } from '../../../lib/fetch_alerts';
|
||||
import {
|
||||
|
|
@ -34,7 +34,7 @@ export const ElasticsearchNodesPage: React.FC<ComponentProps> = ({ clusters }) =
|
|||
const { showCgroupMetricsElasticsearch } = useContext(ExternalConfigContext);
|
||||
const { services } = useKibana<{ data: any }>();
|
||||
const [isLoading, setIsLoading] = React.useState(false);
|
||||
const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
|
||||
const { generate: generateBreadcrumbs } = useBreadcrumbContainerContext();
|
||||
const { getPaginationRouteOptions, updateTotalItemCount, getPaginationTableProps } =
|
||||
useTable('elasticsearch.nodes');
|
||||
const clusterUuid = globalState.cluster_uuid;
|
||||
|
|
|
|||
|
|
@ -14,13 +14,13 @@ import { GlobalStateContext } from '../../contexts/global_state_context';
|
|||
import { ElasticsearchOverview } from '../../../components/elasticsearch';
|
||||
import { ComponentProps } from '../../route_init';
|
||||
import { useCharts } from '../../hooks/use_charts';
|
||||
import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
|
||||
import { useBreadcrumbContainerContext } from '../../hooks/use_breadcrumbs';
|
||||
|
||||
export const ElasticsearchOverviewPage: React.FC<ComponentProps> = ({ clusters }) => {
|
||||
const globalState = useContext(GlobalStateContext);
|
||||
const { zoomInfo, onBrush } = useCharts();
|
||||
const { services } = useKibana<{ data: any }>();
|
||||
const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
|
||||
const { generate: generateBreadcrumbs } = useBreadcrumbContainerContext();
|
||||
const clusterUuid = globalState.cluster_uuid;
|
||||
const ccs = globalState.ccs;
|
||||
const cluster = find(clusters, {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import { EntSearchTemplate } from './ent_search_template';
|
|||
import { GlobalStateContext } from '../../contexts/global_state_context';
|
||||
import { useCharts } from '../../hooks/use_charts';
|
||||
import { EnterpriseSearchOverview } from '../../../components/enterprise_search/overview';
|
||||
import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
|
||||
import { useBreadcrumbContainerContext } from '../../hooks/use_breadcrumbs';
|
||||
|
||||
export const EntSearchOverviewPage: React.FC<ComponentProps> = ({ clusters }) => {
|
||||
const globalState = useContext(GlobalStateContext);
|
||||
|
|
@ -22,7 +22,7 @@ export const EntSearchOverviewPage: React.FC<ComponentProps> = ({ clusters }) =>
|
|||
const { services } = useKibana<{ data: any }>();
|
||||
const clusterUuid = globalState.cluster_uuid;
|
||||
const ccs = globalState.ccs;
|
||||
const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
|
||||
const { generate: generateBreadcrumbs } = useBreadcrumbContainerContext();
|
||||
const cluster = find(clusters, {
|
||||
cluster_uuid: clusterUuid,
|
||||
}) as any;
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ import { ExternalConfigContext } from '../../contexts/external_config_context';
|
|||
import { ComponentProps } from '../../route_init';
|
||||
import { useTable } from '../../hooks/use_table';
|
||||
import { PageTemplate, TabMenuItem } from '../page_template';
|
||||
import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
|
||||
import { useBreadcrumbContainerContext } from '../../hooks/use_breadcrumbs';
|
||||
import { fetchClusters } from '../../../lib/fetch_clusters';
|
||||
|
||||
const pageTitle = i18n.translate('xpack.monitoring.cluster.listing.pageTitle', {
|
||||
|
|
@ -40,7 +40,7 @@ export const ClusterListing: React.FC<ComponentProps> = () => {
|
|||
const externalConfig = useContext(ExternalConfigContext);
|
||||
const { services } = useKibana<{ data: any }>();
|
||||
const [clusters, setClusters] = useState([] as any);
|
||||
const { update: updateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
|
||||
const { update: updateBreadcrumbs } = useBreadcrumbContainerContext();
|
||||
|
||||
const fakeScope = {
|
||||
$evalAsync: (fn: () => void) => fn(),
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ import { ComponentProps } from '../../route_init';
|
|||
import { GlobalStateContext } from '../../contexts/global_state_context';
|
||||
import { useCharts } from '../../hooks/use_charts';
|
||||
// @ts-ignore
|
||||
import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
|
||||
import { useBreadcrumbContainerContext } from '../../hooks/use_breadcrumbs';
|
||||
// @ts-ignore
|
||||
import { MonitoringTimeseriesContainer } from '../../../components/chart';
|
||||
// @ts-ignore
|
||||
|
|
@ -148,7 +148,7 @@ export const KibanaInstancePage: React.FC<ComponentProps> = ({ clusters }) => {
|
|||
|
||||
const globalState = useContext(GlobalStateContext);
|
||||
const { services } = useKibana<{ data: any }>();
|
||||
const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
|
||||
const { generate: generateBreadcrumbs } = useBreadcrumbContainerContext();
|
||||
const clusterUuid = globalState.cluster_uuid;
|
||||
const ccs = globalState.ccs;
|
||||
const cluster = find(clusters, {
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ import { KibanaInstances } from '../../../components/kibana/instances';
|
|||
// @ts-ignore
|
||||
import { SetupModeRenderer, SetupModeProps } from '../../../components/renderers/setup_mode';
|
||||
import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
|
||||
import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
|
||||
import { useBreadcrumbContainerContext } from '../../hooks/use_breadcrumbs';
|
||||
import { AlertsByName } from '../../../alerts/types';
|
||||
import { fetchAlerts } from '../../../lib/fetch_alerts';
|
||||
import { KIBANA_SYSTEM_ID, RULE_KIBANA_VERSION_MISMATCH } from '../../../../common/constants';
|
||||
|
|
@ -26,7 +26,7 @@ import { KIBANA_SYSTEM_ID, RULE_KIBANA_VERSION_MISMATCH } from '../../../../comm
|
|||
export const KibanaInstancesPage: React.FC<ComponentProps> = ({ clusters }) => {
|
||||
const { cluster_uuid: clusterUuid, ccs } = useContext(GlobalStateContext);
|
||||
const { services } = useKibana<{ data: any }>();
|
||||
const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
|
||||
const { generate: generateBreadcrumbs } = useBreadcrumbContainerContext();
|
||||
const { updateTotalItemCount, getPaginationTableProps } = useTable('kibana.instances');
|
||||
const cluster = find(clusters, {
|
||||
cluster_uuid: clusterUuid,
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ import { ComponentProps } from '../../route_init';
|
|||
import { MonitoringTimeseriesContainer } from '../../../components/chart';
|
||||
// @ts-ignore
|
||||
import { ClusterStatus } from '../../../components/kibana/cluster_status';
|
||||
import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
|
||||
import { useBreadcrumbContainerContext } from '../../hooks/use_breadcrumbs';
|
||||
import { useCharts } from '../../hooks/use_charts';
|
||||
|
||||
const KibanaOverview = ({ data }: { data: any }) => {
|
||||
|
|
@ -107,7 +107,7 @@ const KibanaOverview = ({ data }: { data: any }) => {
|
|||
export const KibanaOverviewPage: React.FC<ComponentProps> = ({ clusters }) => {
|
||||
const globalState = useContext(GlobalStateContext);
|
||||
const { services } = useKibana<{ data: any }>();
|
||||
const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
|
||||
const { generate: generateBreadcrumbs } = useBreadcrumbContainerContext();
|
||||
const [data, setData] = useState<any>();
|
||||
const clusterUuid = globalState.cluster_uuid;
|
||||
const cluster = find(clusters, {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import { PageTemplate } from './page_template';
|
|||
import { License } from '../../components';
|
||||
import { GlobalStateContext } from '../contexts/global_state_context';
|
||||
import { CODE_PATH_LICENSE, STANDALONE_CLUSTER_CLUSTER_UUID } from '../../../common/constants';
|
||||
import { MonitoringTimeContainer } from '../hooks/use_monitoring_time';
|
||||
import { useMonitoringTimeContainerContext } from '../hooks/use_monitoring_time';
|
||||
|
||||
const CODE_PATHS = [CODE_PATH_LICENSE];
|
||||
|
||||
|
|
@ -22,7 +22,7 @@ export const LicensePage: React.FC<{}> = () => {
|
|||
defaultMessage: 'License',
|
||||
});
|
||||
|
||||
const { setIsDisabled } = useContext(MonitoringTimeContainer.Context);
|
||||
const { setIsDisabled } = useMonitoringTimeContainerContext();
|
||||
useEffect(() => {
|
||||
setIsDisabled(true);
|
||||
return () => {
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ import { useCharts } from '../../hooks/use_charts';
|
|||
import { AlertsByName } from '../../../alerts/types';
|
||||
import { fetchAlerts } from '../../../lib/fetch_alerts';
|
||||
import { RULE_LOGSTASH_VERSION_MISMATCH } from '../../../../common/constants';
|
||||
import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
|
||||
import { useBreadcrumbContainerContext } from '../../hooks/use_breadcrumbs';
|
||||
|
||||
export const LogStashNodeAdvancedPage: React.FC<ComponentProps> = ({ clusters }) => {
|
||||
const globalState = useContext(GlobalStateContext);
|
||||
|
|
@ -43,7 +43,7 @@ export const LogStashNodeAdvancedPage: React.FC<ComponentProps> = ({ clusters })
|
|||
cluster_uuid: clusterUuid,
|
||||
}) as any;
|
||||
|
||||
const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
|
||||
const { generate: generateBreadcrumbs } = useBreadcrumbContainerContext();
|
||||
|
||||
const [data, setData] = useState({} as any);
|
||||
const [alerts, setAlerts] = useState<AlertsByName>({});
|
||||
|
|
|
|||
|
|
@ -31,13 +31,13 @@ import { useCharts } from '../../hooks/use_charts';
|
|||
import { AlertsByName } from '../../../alerts/types';
|
||||
import { fetchAlerts } from '../../../lib/fetch_alerts';
|
||||
import { RULE_LOGSTASH_VERSION_MISMATCH } from '../../../../common/constants';
|
||||
import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
|
||||
import { useBreadcrumbContainerContext } from '../../hooks/use_breadcrumbs';
|
||||
|
||||
export const LogStashNodePage: React.FC<ComponentProps> = ({ clusters }) => {
|
||||
const match = useRouteMatch<{ uuid: string | undefined }>();
|
||||
const globalState = useContext(GlobalStateContext);
|
||||
const { services } = useKibana<{ data: any }>();
|
||||
const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
|
||||
const { generate: generateBreadcrumbs } = useBreadcrumbContainerContext();
|
||||
const clusterUuid = globalState.cluster_uuid;
|
||||
const ccs = globalState.ccs;
|
||||
const cluster = find(clusters, {
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ import { useTable } from '../../hooks/use_table';
|
|||
// @ts-expect-error
|
||||
import { PipelineListing } from '../../../components/logstash/pipeline_listing/pipeline_listing';
|
||||
import { useCharts } from '../../hooks/use_charts';
|
||||
import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
|
||||
import { useBreadcrumbContainerContext } from '../../hooks/use_breadcrumbs';
|
||||
|
||||
export const LogStashNodePipelinesPage: React.FC<ComponentProps> = ({ clusters }) => {
|
||||
const globalState = useContext(GlobalStateContext);
|
||||
|
|
@ -33,7 +33,7 @@ export const LogStashNodePipelinesPage: React.FC<ComponentProps> = ({ clusters }
|
|||
cluster_uuid: clusterUuid,
|
||||
}) as any;
|
||||
|
||||
const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
|
||||
const { generate: generateBreadcrumbs } = useBreadcrumbContainerContext();
|
||||
|
||||
const { getPaginationTableProps, getPaginationRouteOptions, updateTotalItemCount } =
|
||||
useTable('logstash.pipelines');
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue