maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[Uptime] Fix/embedded map console warning (#54926)

Browse source 
* update it

* type

* refresh app when it is out of focus

* updated

* unused code
This commit is contained in:
Shahzad 2020-01-16 12:14:38 +01:00 committed by GitHub
parent c2f3c977eb
commit 6d3c284d11
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
x-pack/legacy/plugins/uptime/public/components/functional/location_map/embeddables/embedded_map.tsx
View file

@ -45,7 +45,7 @@ const EmbeddedPanel = styled.div`
}
`;
export const EmbeddedMap = ({ upPoints, downPoints }: EmbeddedMapProps) => {
export const EmbeddedMap = React.memo(({ upPoints, downPoints }: EmbeddedMapProps) => {
const { colors } = useContext(UptimeThemeContext);
const [embeddable, setEmbeddable] = useState<MapEmbeddable>();
const embeddableRoot: React.RefObject<HTMLDivElement> = useRef<HTMLDivElement>(null);
@ -55,10 +55,6 @@ export const EmbeddedMap = ({ upPoints, downPoints }: EmbeddedMapProps) => {
id: uuid.v4(),
filters: [],
hidePanelTitles: true,
query: {
query: '',
language: 'kuery',
},
refreshConfig: {
value: 0,
pause: false,
@ -116,6 +112,6 @@ export const EmbeddedMap = ({ upPoints, downPoints }: EmbeddedMapProps) => {
<div className="embPanel__content" ref={embeddableRoot} />
</EmbeddedPanel>
);
};
});
EmbeddedMap.displayName = 'EmbeddedMap';

24
x-pack/legacy/plugins/uptime/public/components/functional/monitor_status_details/monitor_status_details.tsx
View file

@ -4,10 +4,11 @@
* you may not use this file except in compliance with the Elastic License.
*/
import React, { useEffect } from 'react';
import React, { useContext, useEffect, useState } from 'react';
import { EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';
import { LocationMap } from '../location_map';
import { MonitorStatusBar } from './monitor_status_bar';
import { UptimeRefreshContext } from '../../../contexts';
interface MonitorStatusBarProps {
monitorId: string;
@ -29,6 +30,27 @@ export const MonitorStatusDetailsComponent = ({
useEffect(() => {
loadMonitorLocations(monitorId);
}, [loadMonitorLocations, monitorId, dateStart, dateEnd]);
const { refreshApp } = useContext(UptimeRefreshContext);
const [isTabActive] = useState(document.visibilityState);
const onTabActive = () => {
if (document.visibilityState === 'visible' && isTabActive === 'hidden') {
refreshApp();
}
};
// Refreshing application state after Tab becomes active to render latest map state
// If application renders in when tab is not in focus it gives some unexpected behaviors
// Where map is not visible on change
useEffect(() => {
document.addEventListener('visibilitychange', onTabActive);
return () => {
document.removeEventListener('visibilitychange', onTabActive);
};
// we want this effect to execute exactly once after the component mounts
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
<EuiPanel>