diff --git a/ui/src/App.tsx b/ui/src/App.tsx index 8116e3244..398a92f4f 100644 --- a/ui/src/App.tsx +++ b/ui/src/App.tsx @@ -45,6 +45,12 @@ const FaviconBadge = React.lazy(() => })) ); +const MomentPolledTimer = React.lazy(() => + import("Components/MomentPolledTimer").then((module) => ({ + default: module.MomentPolledTimer, + })) +); + interface UIDefaults { Refresh: number; HideFiltersWhenIdle: boolean; @@ -156,6 +162,7 @@ const App: FunctionComponent = ({ defaultFilters, uiDefaults }) => { + )); diff --git a/ui/src/Components/MomentPolledTimer/index.js b/ui/src/Components/MomentPolledTimer/index.js new file mode 100644 index 000000000..9b646ffbc --- /dev/null +++ b/ui/src/Components/MomentPolledTimer/index.js @@ -0,0 +1,12 @@ +import React, { useEffect } from "react"; + +import Moment from "react-moment"; + +export function MomentPolledTimer() { + useEffect(() => { + Moment.startPooledTimer(); + return () => Moment.clearPooledTimer(); + }, []); + + return ; +} diff --git a/ui/src/Stores/AlertStore.js b/ui/src/Stores/AlertStore.js index 4bae228af..64c205616 100644 --- a/ui/src/Stores/AlertStore.js +++ b/ui/src/Stores/AlertStore.js @@ -4,8 +4,6 @@ import throttle from "lodash.throttle"; import qs from "qs"; -import moment from "moment"; - import { FetchGet } from "Common/Fetch"; const QueryStringEncodeOptions = { @@ -280,7 +278,7 @@ class AlertStore { setIdle() { this.value = AlertStoreStatuses.Idle; this.error = null; - this.lastUpdateAt = moment(); + this.lastUpdateAt = new Date(); }, setFetching() { this.value = AlertStoreStatuses.Fetching; @@ -292,7 +290,7 @@ class AlertStore { setFailure(err) { this.value = AlertStoreStatuses.Failure; this.error = err; - this.lastUpdateAt = moment(); + this.lastUpdateAt = new Date(); }, pause() { this.paused = true; diff --git a/ui/src/index.tsx b/ui/src/index.tsx index 5985559ba..121d34eab 100644 --- a/ui/src/index.tsx +++ b/ui/src/index.tsx @@ -7,8 +7,6 @@ import "react-app-polyfill/stable"; import React from "react"; import ReactDOM from "react-dom"; -import Moment from "react-moment"; - import "mobx-react-lite/batchingForReactDom"; import { @@ -21,11 +19,6 @@ import { App } from "./App"; SetupSentry(SettingsElement()); -// global timer for updating timestamps to human readable offsets -// this needs to be run before any instance -// https://www.npmjs.com/package/react-moment#pooled-timer -Moment.startPooledTimer(); - // https://wetainment.com/testing-indexjs/ export default ReactDOM.render(