[Uptime] Fix/embedded map console warning (#54926)
* update it * type * refresh app when it is out of focus * updated * unused code
This commit is contained in:
parent
c2f3c977eb
commit
6d3c284d11
|
@ -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';
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue