diff --git a/ui/src/App.tsx b/ui/src/App.tsx index 6b53ee776..568c8d5c8 100644 --- a/ui/src/App.tsx +++ b/ui/src/App.tsx @@ -5,7 +5,7 @@ import React, { useCallback, } from "react"; -import { useObserver } from "mobx-react-lite"; +import { observer } from "mobx-react-lite"; // no types, see react-app-env.d.ts import { useMediaPredicate } from "react-media-hook"; @@ -25,130 +25,119 @@ import "Styles/ResetCSS.scss"; import "Styles/FontBundle.scss"; import "Styles/App.scss"; -// https://github.com/facebook/react/issues/14603 -const Grid = React.lazy(() => - import("Components/Grid").then((module) => ({ - default: module.Grid, - })) -); -const NavBar = React.lazy(() => - import("Components/NavBar").then((module) => ({ - default: module.NavBar, - })) -); -const FaviconBadge = React.lazy(() => - import("Components/FaviconBadge").then((module) => ({ - default: module.FaviconBadge, - })) -); -const AppToasts = React.lazy(() => - import("Components/Toast/AppToasts").then((module) => ({ - default: module.AppToasts, - })) -); +const Grid = React.lazy(() => import("Components/Grid")); +const NavBar = React.lazy(() => import("Components/NavBar")); +const FaviconBadge = React.lazy(() => import("Components/FaviconBadge")); +const AppToasts = React.lazy(() => import("Components/Toast/AppToasts")); interface AppProps { defaultFilters: Array; uiDefaults: UIDefaults | null; } -const App: FunctionComponent = ({ defaultFilters, uiDefaults }) => { - const [alertStore] = useState(new AlertStore(null)); - const [silenceFormStore] = useState(new SilenceFormStore()); - const [settingsStore] = useState(new Settings(uiDefaults)); +const App: FunctionComponent = observer( + ({ defaultFilters, uiDefaults }) => { + const [alertStore] = useState(new AlertStore(null)); + const [silenceFormStore] = useState( + new SilenceFormStore() + ); + const [settingsStore] = useState(new Settings(uiDefaults)); - useEffect(() => { - let filters; - // parse and decode request query args - const p: { - params: { - q: string[]; - m?: string; - }; - defaultsUsed: boolean; - } = DecodeLocationSearch(window.location.search); - // p.defaultsUsed means that karma URI didn't have ?q=foo query args - if (p.defaultsUsed) { - // no ?q=foo set, use defaults saved by the user or from backend config - if (settingsStore.savedFilters.config.present) { - filters = settingsStore.savedFilters.config.filters; + useEffect(() => { + let filters; + // parse and decode request query args + const p: { + params: { + q: string[]; + m?: string; + }; + defaultsUsed: boolean; + } = DecodeLocationSearch(window.location.search); + // p.defaultsUsed means that karma URI didn't have ?q=foo query args + if (p.defaultsUsed) { + // no ?q=foo set, use defaults saved by the user or from backend config + if (settingsStore.savedFilters.config.present) { + filters = settingsStore.savedFilters.config.filters; + } else { + filters = defaultFilters; + } } else { - filters = defaultFilters; + // user passed ?q=foo, use it as initial filters + filters = p.params.q; } - } else { - // user passed ?q=foo, use it as initial filters - filters = p.params.q; - } - alertStore.filters.setFilters(filters); + alertStore.filters.setFilters(filters); - if (p.params.m && silenceFormStore.data.fromBase64(p.params.m)) { - silenceFormStore.toggle.show(); - } - }, [alertStore, defaultFilters, settingsStore]); // eslint-disable-line react-hooks/exhaustive-deps + if (p.params.m && silenceFormStore.data.fromBase64(p.params.m)) { + silenceFormStore.toggle.show(); + } + }, [alertStore, defaultFilters, settingsStore]); // eslint-disable-line react-hooks/exhaustive-deps - const onPopState = useCallback( - (event: PopStateEvent) => { - event.preventDefault(); - const p = DecodeLocationSearch(window.location.search); - alertStore.filters.setWithoutLocation(p.params.q); - }, - [alertStore] - ); + const onPopState = useCallback( + (event: PopStateEvent) => { + event.preventDefault(); + const p = DecodeLocationSearch(window.location.search); + alertStore.filters.setWithoutLocation(p.params.q); + }, + [alertStore] + ); - useEffect(() => { - window.onpopstate = onPopState; - return () => { - window.onpopstate = () => {}; - }; - }, [onPopState]); + useEffect(() => { + window.onpopstate = onPopState; + return () => { + window.onpopstate = () => {}; + }; + }, [onPopState]); - const prefersColorScheme = useMediaPredicate("(prefers-color-scheme)"); - const prefersDark = useMediaPredicate("(prefers-color-scheme: dark)"); + const prefersColorScheme = useMediaPredicate("(prefers-color-scheme)"); + const prefersDark = useMediaPredicate("(prefers-color-scheme: dark)"); - return useObserver(() => ( - - - + + - - - - - - - - - - )); -}; + : ReactSelectStyles(ReactSelectColors.Light), + animations: { + duration: 500, + }, + }} + > + + + + + + + + + + ); + } +); export { App }; diff --git a/ui/src/Components/AlertAck/index.test.tsx b/ui/src/Components/AlertAck/index.test.tsx index 62cf1d118..8f2093d7f 100644 --- a/ui/src/Components/AlertAck/index.test.tsx +++ b/ui/src/Components/AlertAck/index.test.tsx @@ -103,7 +103,7 @@ describe("", () => { it("is null when acks are disabled", () => { alertStore.settings.values.alertAcknowledgement.enabled = false; const tree = MountedAlertAck(); - expect(tree.html()).toBeNull(); + expect(tree.html()).toBe(""); }); it("uses faCheck icon when idle", () => { diff --git a/ui/src/Components/AlertAck/index.tsx b/ui/src/Components/AlertAck/index.tsx index 9138f0c95..d4db005f5 100644 --- a/ui/src/Components/AlertAck/index.tsx +++ b/ui/src/Components/AlertAck/index.tsx @@ -1,7 +1,7 @@ import React, { FC, useEffect, useState } from "react"; import { toJS } from "mobx"; -import { useObserver } from "mobx-react-lite"; +import { observer } from "mobx-react-lite"; import addSeconds from "date-fns/addSeconds"; @@ -35,7 +35,7 @@ const AlertAck: FC<{ alertStore: AlertStore; silenceFormStore: SilenceFormStore; group: APIAlertGroupT; -}> = ({ alertStore, silenceFormStore, group }) => { +}> = observer(({ alertStore, silenceFormStore, group }) => { const [clusters, setClusters] = useState([]); const [upstreams, setUpstreams] = useState([]); const [currentCluster, setCurrentCluster] = useState(0); @@ -145,43 +145,42 @@ const AlertAck: FC<{ return () => clearTimeout(timer); }, [isAcking, error, reset]); - return useObserver(() => - alertStore.settings.values.alertAcknowledgement.enabled === false ? null : ( - + { + if (!isAcking && !(response || error)) { + setIsAcking(true); + onACK(); + } + }} > - { - if (!isAcking && !(response || error)) { - setIsAcking(true); - onACK(); - } - }} - > - {!isAcking && error ? ( - - ) : !isAcking && response ? ( - - ) : isAcking ? ( - - ) : ( - - )} - - - ) + {!isAcking && error ? ( + + ) : !isAcking && response ? ( + + ) : isAcking ? ( + + ) : ( + + )} + + ); -}; +}); export { AlertAck }; diff --git a/ui/src/Components/FaviconBadge/index.test.tsx b/ui/src/Components/FaviconBadge/index.test.tsx index fe0b7c420..cea0c001d 100644 --- a/ui/src/Components/FaviconBadge/index.test.tsx +++ b/ui/src/Components/FaviconBadge/index.test.tsx @@ -5,7 +5,7 @@ import { mount } from "enzyme"; import Favico from "favico.js"; import { AlertStore } from "Stores/AlertStore"; -import { FaviconBadge } from "."; +import FaviconBadge from "."; let alertStore: AlertStore; diff --git a/ui/src/Components/FaviconBadge/index.tsx b/ui/src/Components/FaviconBadge/index.tsx index a292a16c2..7fcc5b16b 100644 --- a/ui/src/Components/FaviconBadge/index.tsx +++ b/ui/src/Components/FaviconBadge/index.tsx @@ -31,4 +31,4 @@ const FaviconBadge: FC<{ return null; }; -export { FaviconBadge }; +export default FaviconBadge; diff --git a/ui/src/Components/Fetcher/index.tsx b/ui/src/Components/Fetcher/index.tsx index a3059b62f..3776eab1d 100644 --- a/ui/src/Components/Fetcher/index.tsx +++ b/ui/src/Components/Fetcher/index.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useRef, useState, FC } from "react"; import { reaction } from "mobx"; -import { useObserver } from "mobx-react-lite"; +import { observer } from "mobx-react-lite"; import addSeconds from "date-fns/addSeconds"; import differenceInSeconds from "date-fns/differenceInSeconds"; @@ -59,43 +59,42 @@ const PlayButton: FC<{ alertStore: AlertStore }> = ({ alertStore }) => { ); }; -const Dots: FC<{ alertStore: AlertStore; dots: number }> = ({ - alertStore, - dots, -}) => { - return useObserver(() => ( -
- {Array.from(Array(9).keys()).map((i) => ( -
- ))} -
- )); -}; +const Dots: FC<{ alertStore: AlertStore; dots: number }> = observer( + ({ alertStore, dots }) => { + return ( +
+ {Array.from(Array(9).keys()).map((i) => ( +
+ ))} +
+ ); + } +); const Fetcher: FC<{ alertStore: AlertStore; settingsStore: Settings; -}> = ({ alertStore, settingsStore }) => { +}> = observer(({ alertStore, settingsStore }) => { const timer = useRef(undefined); const [percentLeft, setPercentLeft] = useState(100); const [isHover, setIsHover] = useState(false); @@ -233,7 +232,7 @@ const Fetcher: FC<{ const dots = Math.max(0, Math.min(9, percentLeft / 10)); - return useObserver(() => ( + return (
setIsHover(true)} @@ -247,7 +246,7 @@ const Fetcher: FC<{ )}
- )); -}; + ); +}); export { Fetcher, Dots, PlayButton, PauseButton }; diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.tsx b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.tsx index 6fecc0193..f070a6329 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.tsx +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.tsx @@ -7,7 +7,7 @@ import React, { useCallback, } from "react"; -import { useObserver } from "mobx-react-lite"; +import { observer } from "mobx-react-lite"; import { Manager, Reference, Popper } from "react-popper"; @@ -128,61 +128,63 @@ const AlertMenu: FC<{ alertStore: AlertStore; silenceFormStore: SilenceFormStore; setIsMenuOpen: (isOpen: boolean) => void; -}> = ({ group, alert, alertStore, silenceFormStore, setIsMenuOpen }) => { - const [isHidden, setIsHidden] = useState(true); +}> = observer( + ({ group, alert, alertStore, silenceFormStore, setIsMenuOpen }) => { + const [isHidden, setIsHidden] = useState(true); - const toggle = useCallback(() => { - setIsMenuOpen(isHidden); - setIsHidden(!isHidden); - }, [isHidden, setIsMenuOpen]); + const toggle = useCallback(() => { + setIsMenuOpen(isHidden); + setIsHidden(!isHidden); + }, [isHidden, setIsMenuOpen]); - const hide = useCallback(() => { - setIsHidden(true); - setIsMenuOpen(false); - }, [setIsMenuOpen]); + const hide = useCallback(() => { + setIsHidden(true); + setIsMenuOpen(false); + }, [setIsMenuOpen]); - const rootRef = useRef(null); - useOnClickOutside(rootRef, hide, !isHidden); + const rootRef = useRef(null); + useOnClickOutside(rootRef, hide, !isHidden); - return useObserver(() => ( - - - - {({ ref }) => ( - - - - - )} - - - - {({ placement, ref, style }) => ( - + return ( + + + + {({ ref }) => ( + + + + )} - - - - - )); -}; + + + + {({ placement, ref, style }) => ( + + )} + + + + + ); + } +); export { AlertMenu, MenuContent }; diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.test.tsx b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.test.tsx index 4af3efc98..a7aabb56e 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.test.tsx +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.test.tsx @@ -19,7 +19,7 @@ import { AlertStore } from "Stores/AlertStore"; import { SilenceFormStore } from "Stores/SilenceFormStore"; import { BorderClassMap } from "Common/Colors"; import { ThemeContext } from "Components/Theme"; -import { Alert } from "."; +import Alert from "."; let alertStore: AlertStore; let silenceFormStore: SilenceFormStore; diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.tsx b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.tsx index b51c78559..4d97d098f 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.tsx +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.tsx @@ -1,6 +1,6 @@ import React, { FC } from "react"; -import { useObserver } from "mobx-react-lite"; +import { observer } from "mobx-react-lite"; import { APIAlertT, @@ -11,7 +11,7 @@ import { AlertStore } from "Stores/AlertStore"; import { SilenceFormStore } from "Stores/SilenceFormStore"; import { BorderClassMap } from "Common/Colors"; import { StaticLabels } from "Common/Query"; -import { FilteringLabel } from "Components/Labels/FilteringLabel"; +import FilteringLabel from "Components/Labels/FilteringLabel"; import { InhibitedByModal } from "Components/InhibitedByModal"; import { RenderNonLinkAnnotation, RenderLinkAnnotation } from "../Annotation"; import { AlertMenu } from "./AlertMenu"; @@ -81,7 +81,7 @@ const Alert: FC<{ } } - return useObserver(() => ( + return (
  • {alert.annotations @@ -149,7 +149,7 @@ const Alert: FC<{ )) )}
    • - )); + ); }; -export { Alert }; +export default observer(Alert); diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.test.tsx b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.test.tsx index 3cb0d3b09..e293cfb91 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.test.tsx +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.test.tsx @@ -17,7 +17,7 @@ import { MockThemeContext } from "__mocks__/Theme"; import { AlertStore } from "Stores/AlertStore"; import { SilenceFormStore } from "Stores/SilenceFormStore"; import { ThemeContext } from "Components/Theme"; -import { GroupFooter } from "."; +import GroupFooter from "."; let group: APIAlertGroupT; let alertStore: AlertStore; diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.tsx b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.tsx index a4e589984..b88dc0fd3 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.tsx +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/index.tsx @@ -1,12 +1,12 @@ import React, { FC } from "react"; -import { useObserver } from "mobx-react-lite"; +import { observer } from "mobx-react-lite"; import { APIAlertGroupT } from "Models/APITypes"; import { StaticLabels } from "Common/Query"; import { AlertStore } from "Stores/AlertStore"; import { SilenceFormStore } from "Stores/SilenceFormStore"; -import { FilteringLabel } from "Components/Labels/FilteringLabel"; +import FilteringLabel from "Components/Labels/FilteringLabel"; import { RenderNonLinkAnnotation, RenderLinkAnnotation } from "../Annotation"; import { RenderSilence } from "../Silences"; @@ -17,7 +17,7 @@ const GroupFooter: FC<{ alertStore: AlertStore; silenceFormStore: SilenceFormStore; }> = ({ group, alertmanagers, afterUpdate, alertStore, silenceFormStore }) => { - return useObserver(() => ( + return (
    {group.shared.annotations @@ -77,7 +77,7 @@ const GroupFooter: FC<{
    )}
    - )); + ); }; -export { GroupFooter }; +export default observer(GroupFooter); diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.tsx b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.tsx index f87e8c301..10603ed19 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.tsx +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.tsx @@ -1,12 +1,12 @@ import React, { FC, MouseEvent } from "react"; -import { useObserver } from "mobx-react-lite"; +import { observer } from "mobx-react-lite"; import { APIAlertGroupT } from "Models/APITypes"; import { AlertStore } from "Stores/AlertStore"; import { SilenceFormStore } from "Stores/SilenceFormStore"; -import { FilteringLabel } from "Components/Labels/FilteringLabel"; -import { FilteringCounterBadge } from "Components/Labels/FilteringCounterBadge"; +import FilteringLabel from "Components/Labels/FilteringLabel"; +import FilteringCounterBadge from "Components/Labels/FilteringCounterBadge"; import { TooltipWrapper } from "Components/TooltipWrapper"; import { AlertAck } from "Components/AlertAck"; import { ToggleIcon } from "Components/ToggleIcon"; @@ -47,7 +47,7 @@ const GroupHeader: FC<{ } }; - return useObserver(() => ( + return (
    - )); + ); }; -export { GroupHeader }; +export default observer(GroupHeader); diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.tsx b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.tsx index b51e2c037..87887c1ad 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.tsx +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.tsx @@ -10,7 +10,7 @@ import { AlertStore } from "Stores/AlertStore"; import { Settings, CollapseStateT } from "Stores/Settings"; import { SilenceFormStore } from "Stores/SilenceFormStore"; import { ThemeContext } from "Components/Theme"; -import { AlertGroup } from "."; +import AlertGroup from "."; let alertStore: AlertStore; let settingsStore: Settings; diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.tsx b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.tsx index d88e4fcdc..eecddf402 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.tsx +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.tsx @@ -1,6 +1,6 @@ import React, { FC, useEffect, useCallback, useState, ReactNode } from "react"; -import { useObserver } from "mobx-react-lite"; +import { observer } from "mobx-react-lite"; import { IconDefinition } from "@fortawesome/fontawesome-svg-core"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; @@ -13,9 +13,9 @@ import { AlertStore } from "Stores/AlertStore"; import { SilenceFormStore } from "Stores/SilenceFormStore"; import { BackgroundClassMap } from "Common/Colors"; import { TooltipWrapper } from "Components/TooltipWrapper"; -import { GroupHeader } from "./GroupHeader"; -import { Alert } from "./Alert"; -import { GroupFooter } from "./GroupFooter"; +import GroupHeader from "./GroupHeader"; +import Alert from "./Alert"; +import GroupFooter from "./GroupFooter"; import { DefaultDetailsCollapseValue } from "./DetailsToggle"; const LoadButton: FC<{ @@ -168,7 +168,7 @@ const AlertGroup: FC<{ } } - return useObserver(() => ( + return (
    - )); + ); }; -export { AlertGroup }; +export default observer(AlertGroup); diff --git a/ui/src/Components/Grid/AlertGrid/Grid.tsx b/ui/src/Components/Grid/AlertGrid/Grid.tsx index 20b7fed92..afca1f29c 100644 --- a/ui/src/Components/Grid/AlertGrid/Grid.tsx +++ b/ui/src/Components/Grid/AlertGrid/Grid.tsx @@ -1,6 +1,6 @@ import React, { FC, useEffect, useState, useCallback, MouseEvent } from "react"; -import { useObserver } from "mobx-react-lite"; +import { observer } from "mobx-react-lite"; import debounce from "lodash.debounce"; @@ -21,7 +21,7 @@ import { APIGridT } from "Models/APITypes"; import { useGrid } from "Hooks/useGrid"; import { ThemeContext } from "Components/Theme"; import { DefaultDetailsCollapseValue } from "./AlertGroup/DetailsToggle"; -import { AlertGroup } from "./AlertGroup"; +import AlertGroup from "./AlertGroup"; import { Swimlane } from "./Swimlane"; const Grid: FC<{ @@ -108,7 +108,7 @@ const Grid: FC<{ repack(); }); - return useObserver(() => ( + return ( - )); + ); }; -export { Grid }; +export default observer(Grid); diff --git a/ui/src/Components/Grid/AlertGrid/Swimlane.tsx b/ui/src/Components/Grid/AlertGrid/Swimlane.tsx index 1eafed0e0..cd1990198 100644 --- a/ui/src/Components/Grid/AlertGrid/Swimlane.tsx +++ b/ui/src/Components/Grid/AlertGrid/Swimlane.tsx @@ -5,8 +5,8 @@ import { faTh } from "@fortawesome/free-solid-svg-icons/faTh"; import { AlertStore } from "Stores/AlertStore"; import { APIGridT } from "Models/APITypes"; -import { FilteringLabel } from "Components/Labels/FilteringLabel"; -import { FilteringCounterBadge } from "Components/Labels/FilteringCounterBadge"; +import FilteringLabel from "Components/Labels/FilteringLabel"; +import FilteringCounterBadge from "Components/Labels/FilteringCounterBadge"; import { TooltipWrapper } from "Components/TooltipWrapper"; import { ToggleIcon } from "Components/ToggleIcon"; diff --git a/ui/src/Components/Grid/AlertGrid/index.test.tsx b/ui/src/Components/Grid/AlertGrid/index.test.tsx index 63b931128..520886432 100644 --- a/ui/src/Components/Grid/AlertGrid/index.test.tsx +++ b/ui/src/Components/Grid/AlertGrid/index.test.tsx @@ -13,8 +13,8 @@ import { Settings } from "Stores/Settings"; import { SilenceFormStore } from "Stores/SilenceFormStore"; import { ThemeContext } from "Components/Theme"; import { GetGridElementWidth, GridSizesConfig } from "./GridSize"; -import { Grid } from "./Grid"; -import { AlertGrid } from "."; +import Grid from "./Grid"; +import AlertGrid from "."; let alertStore: AlertStore; let settingsStore: Settings; diff --git a/ui/src/Components/Grid/AlertGrid/index.tsx b/ui/src/Components/Grid/AlertGrid/index.tsx index 4b7a41f3c..169dabe08 100644 --- a/ui/src/Components/Grid/AlertGrid/index.tsx +++ b/ui/src/Components/Grid/AlertGrid/index.tsx @@ -1,7 +1,7 @@ import React, { FC, Ref, useEffect, useState } from "react"; import { autorun } from "mobx"; -import { useObserver } from "mobx-react-lite"; +import { observer } from "mobx-react-lite"; import useDimensions from "react-cool-dimensions"; @@ -13,7 +13,7 @@ import { AlertStore } from "Stores/AlertStore"; import { Settings } from "Stores/Settings"; import { SilenceFormStore } from "Stores/SilenceFormStore"; import { useWindowSize } from "Hooks/useWindowSize"; -import { Grid } from "./Grid"; +import Grid from "./Grid"; import { GridSizesConfig, GetGridElementWidth } from "./GridSize"; const AlertGrid: FC<{ @@ -56,7 +56,7 @@ const AlertGrid: FC<{ useHotkeys("alt+space", alertStore.status.togglePause); - return useObserver(() => ( + return (
    } /> {alertStore.data.grids.map((grid) => ( @@ -72,7 +72,7 @@ const AlertGrid: FC<{ /> ))} - )); + ); }; -export { AlertGrid }; +export default observer(AlertGrid); diff --git a/ui/src/Components/Grid/index.stories.tsx b/ui/src/Components/Grid/index.stories.tsx index 911eeb72a..9bd97e238 100644 --- a/ui/src/Components/Grid/index.stories.tsx +++ b/ui/src/Components/Grid/index.stories.tsx @@ -10,7 +10,7 @@ import { FatalError } from "./FatalError"; import { UpgradeNeeded } from "./UpgradeNeeded"; import { ReloadNeeded } from "./ReloadNeeded"; import { EmptyGrid } from "./EmptyGrid"; -import { Grid } from "."; +import Grid from "."; import { InternalError } from "../../ErrorBoundary"; import "Styles/Percy.scss"; diff --git a/ui/src/Components/Grid/index.test.tsx b/ui/src/Components/Grid/index.test.tsx index 7279bf02e..237690fc8 100644 --- a/ui/src/Components/Grid/index.test.tsx +++ b/ui/src/Components/Grid/index.test.tsx @@ -5,7 +5,7 @@ import { shallow } from "enzyme"; import { AlertStore } from "Stores/AlertStore"; import { Settings } from "Stores/Settings"; import { SilenceFormStore } from "Stores/SilenceFormStore"; -import { Grid } from "."; +import Grid from "."; let alertStore: AlertStore; let settingsStore: Settings; @@ -40,7 +40,7 @@ const ShallowGrid = () => { describe("", () => { it("renders only AlertGrid when all upstreams are healthy", () => { const tree = ShallowGrid(); - expect(tree.text()).toBe(""); + expect(tree.find("AlertGrid")).toHaveLength(1); }); it("renders FatalError if there's only one upstream and it's unhealthy", () => { @@ -129,7 +129,7 @@ describe("", () => { alertStore.info.version = "unknown"; alertStore.info.setTotalAlerts(0); const tree = ShallowGrid(); - expect(tree.text()).toBe(""); + expect(tree.find("AlertGrid")).toHaveLength(1); }); it("renders EmptyGrid after first fetch when totalAlerts is 0", () => { @@ -143,7 +143,7 @@ describe("", () => { alertStore.info.version = "unknown"; alertStore.info.setTotalAlerts(1); const tree = ShallowGrid(); - expect(tree.text()).toBe(""); + expect(tree.find("AlertGrid")).toHaveLength(1); }); it("unmounts without crashes", () => { diff --git a/ui/src/Components/Grid/index.tsx b/ui/src/Components/Grid/index.tsx index da2914045..18990463b 100644 --- a/ui/src/Components/Grid/index.tsx +++ b/ui/src/Components/Grid/index.tsx @@ -1,11 +1,11 @@ import React, { FC } from "react"; -import { useObserver } from "mobx-react-lite"; +import { observer } from "mobx-react-lite"; import { AlertStore } from "Stores/AlertStore"; import { Settings } from "Stores/Settings"; import { SilenceFormStore } from "Stores/SilenceFormStore"; -import { AlertGrid } from "./AlertGrid"; +import AlertGrid from "./AlertGrid"; import { FatalError } from "./FatalError"; import { UpgradeNeeded } from "./UpgradeNeeded"; import { ReloadNeeded } from "./ReloadNeeded"; @@ -16,30 +16,28 @@ const Grid: FC<{ silenceFormStore: SilenceFormStore; settingsStore: Settings; }> = ({ alertStore, settingsStore, silenceFormStore }) => { - return useObserver(() => - alertStore.info.upgradeNeeded ? ( - - ) : alertStore.info.reloadNeeded ? ( - - ) : alertStore.status.error ? ( - - ) : alertStore.data.upstreams.counters && - alertStore.data.upstreams.counters.total === 1 && - alertStore.data.upstreams.counters.healthy === 0 && - alertStore.data.upstreams.instances[0] && - alertStore.data.upstreams.instances[0].error !== "" ? ( - - ) : alertStore.info.version !== "unknown" && - alertStore.info.totalAlerts === 0 ? ( - - ) : ( - - ) + return alertStore.info.upgradeNeeded ? ( + + ) : alertStore.info.reloadNeeded ? ( + + ) : alertStore.status.error ? ( + + ) : alertStore.data.upstreams.counters && + alertStore.data.upstreams.counters.total === 1 && + alertStore.data.upstreams.counters.healthy === 0 && + alertStore.data.upstreams.instances[0] && + alertStore.data.upstreams.instances[0].error !== "" ? ( + + ) : alertStore.info.version !== "unknown" && + alertStore.info.totalAlerts === 0 ? ( + + ) : ( + ); }; -export { Grid }; +export default observer(Grid); diff --git a/ui/src/Components/LabelSetList/index.tsx b/ui/src/Components/LabelSetList/index.tsx index dcdee7cef..4eb2d61ac 100644 --- a/ui/src/Components/LabelSetList/index.tsx +++ b/ui/src/Components/LabelSetList/index.tsx @@ -4,7 +4,7 @@ import { AlertStore } from "Stores/AlertStore"; import { APIAlertGroupT } from "Models/APITypes"; import { IsMobile } from "Common/Device"; import { hashObject } from "Common/Hash"; -import { StaticLabel } from "Components/Labels/StaticLabel"; +import StaticLabel from "Components/Labels/StaticLabel"; import { PageSelect } from "Components/Pagination"; // take a list of groups and outputs a list of label sets, this ignores diff --git a/ui/src/Components/Labels/FilterInputLabel/index.tsx b/ui/src/Components/Labels/FilterInputLabel/index.tsx index c6358e29c..37d240895 100644 --- a/ui/src/Components/Labels/FilterInputLabel/index.tsx +++ b/ui/src/Components/Labels/FilterInputLabel/index.tsx @@ -1,6 +1,6 @@ import React, { FC } from "react"; -import { useObserver } from "mobx-react-lite"; +import { observer } from "mobx-react-lite"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons/faExclamationCircle"; @@ -16,7 +16,7 @@ import { InlineEdit } from "Components/InlineEdit"; const FilterInputLabel: FC<{ alertStore: AlertStore; filter: FilterT; -}> = ({ alertStore, filter }) => { +}> = observer(({ alertStore, filter }) => { const onChange = (val: string) => { alertStore.status.resume(); // if filter is empty string then remove it @@ -42,7 +42,7 @@ const FilterInputLabel: FC<{ ...cs.baseClassNames, ].join(" "); - return useObserver(() => ( + return ( - )); -}; + ); +}); export { FilterInputLabel }; diff --git a/ui/src/Components/Labels/FilteringCounterBadge/index.test.tsx b/ui/src/Components/Labels/FilteringCounterBadge/index.test.tsx index 06b5e43eb..eea19efa3 100644 --- a/ui/src/Components/Labels/FilteringCounterBadge/index.test.tsx +++ b/ui/src/Components/Labels/FilteringCounterBadge/index.test.tsx @@ -4,7 +4,7 @@ import { mount, render } from "enzyme"; import { AlertStore, NewUnappliedFilter } from "Stores/AlertStore"; import { QueryOperators } from "Common/Query"; -import { FilteringCounterBadge } from "."; +import FilteringCounterBadge from "."; let alertStore: AlertStore; diff --git a/ui/src/Components/Labels/FilteringCounterBadge/index.tsx b/ui/src/Components/Labels/FilteringCounterBadge/index.tsx index 35decbadd..4d0b800c4 100644 --- a/ui/src/Components/Labels/FilteringCounterBadge/index.tsx +++ b/ui/src/Components/Labels/FilteringCounterBadge/index.tsx @@ -22,73 +22,69 @@ const FilteringCounterBadge: FC<{ alwaysVisible?: boolean; defaultColor?: "light" | "primary"; isAppend?: boolean; -}> = observer( - ({ +}> = ({ + alertStore, + name, + value, + counter, + themed, + alwaysVisible = false, + defaultColor = "light", + isAppend = true, +}) => { + const { ref, props } = useFlashTransition(counter); + + const handleClick = useCallback( + (event: MouseEvent) => { + // left click => apply foo=bar filter + // left click + alt => apply foo!=bar filter + const operator = + event.altKey === true ? QueryOperators.NotEqual : QueryOperators.Equal; + + event.preventDefault(); + + if (isAppend) { + alertStore.filters.addFilter(FormatQuery(name, operator, value)); + } else { + alertStore.filters.setFilters([FormatQuery(name, operator, value)]); + } + }, + [alertStore.filters, name, value, isAppend] + ); + + if (!alwaysVisible && counter === 0) return null; + + const cs = GetClassAndStyle( alertStore, name, value, - counter, - themed, - alwaysVisible = false, - defaultColor = "light", - isAppend = true, - }) => { - const { ref, props } = useFlashTransition(counter); + "badge-pill components-label-with-hover" + ); - const handleClick = useCallback( - (event: MouseEvent) => { - // left click => apply foo=bar filter - // left click + alt => apply foo!=bar filter - const operator = - event.altKey === true - ? QueryOperators.NotEqual - : QueryOperators.Equal; + return ( + + + + {counter} + + + + ); +}; - event.preventDefault(); - - if (isAppend) { - alertStore.filters.addFilter(FormatQuery(name, operator, value)); - } else { - alertStore.filters.setFilters([FormatQuery(name, operator, value)]); - } - }, - [alertStore.filters, name, value, isAppend] - ); - - if (!alwaysVisible && counter === 0) return null; - - const cs = GetClassAndStyle( - alertStore, - name, - value, - "badge-pill components-label-with-hover" - ); - - return ( - - - - {counter} - - - - ); - } -); - -export { FilteringCounterBadge }; +export default observer(FilteringCounterBadge); diff --git a/ui/src/Components/Labels/FilteringLabel/index.test.tsx b/ui/src/Components/Labels/FilteringLabel/index.test.tsx index d40a07101..2f5201773 100644 --- a/ui/src/Components/Labels/FilteringLabel/index.test.tsx +++ b/ui/src/Components/Labels/FilteringLabel/index.test.tsx @@ -6,7 +6,7 @@ import toDiffableHtml from "diffable-html"; import { AlertStore, NewUnappliedFilter } from "Stores/AlertStore"; -import { FilteringLabel } from "."; +import FilteringLabel from "."; let alertStore: AlertStore; diff --git a/ui/src/Components/Labels/FilteringLabel/index.tsx b/ui/src/Components/Labels/FilteringLabel/index.tsx index 66ec33183..20bfc4d15 100644 --- a/ui/src/Components/Labels/FilteringLabel/index.tsx +++ b/ui/src/Components/Labels/FilteringLabel/index.tsx @@ -1,6 +1,6 @@ import React, { FC, useCallback, MouseEvent } from "react"; -import { useObserver } from "mobx-react-lite"; +import { observer } from "mobx-react-lite"; import { AlertStore } from "Stores/AlertStore"; import { QueryOperators, FormatQuery } from "Common/Query"; @@ -33,14 +33,14 @@ const FilteringLabel: FC<{ "components-label-with-hover" ); - return useObserver(() => ( + return ( {name}:{" "} {value} - )); + ); }; -export { FilteringLabel }; +export default observer(FilteringLabel); diff --git a/ui/src/Components/Labels/HistoryLabel/index.test.tsx b/ui/src/Components/Labels/HistoryLabel/index.test.tsx index 577ae1644..8a795c9e7 100644 --- a/ui/src/Components/Labels/HistoryLabel/index.test.tsx +++ b/ui/src/Components/Labels/HistoryLabel/index.test.tsx @@ -4,7 +4,7 @@ import { shallow } from "enzyme"; import { AlertStore } from "Stores/AlertStore"; -import { HistoryLabel } from "."; +import HistoryLabel from "."; let alertStore: AlertStore; diff --git a/ui/src/Components/Labels/HistoryLabel/index.tsx b/ui/src/Components/Labels/HistoryLabel/index.tsx index fc91d4c75..b233bc1ef 100644 --- a/ui/src/Components/Labels/HistoryLabel/index.tsx +++ b/ui/src/Components/Labels/HistoryLabel/index.tsx @@ -1,6 +1,6 @@ import React, { FC } from "react"; -import { useObserver } from "mobx-react-lite"; +import { observer } from "mobx-react-lite"; import { QueryOperators } from "Common/Query"; import { AlertStore } from "Stores/AlertStore"; @@ -19,12 +19,12 @@ const HistoryLabel: FC<{ "components-label-history components-label-value" ); - return useObserver(() => ( + return ( {name ? `${name}${matcher}` : null} {value} - )); + ); }; -export { HistoryLabel }; +export default observer(HistoryLabel); diff --git a/ui/src/Components/Labels/LabelWithPercent/index.test.tsx b/ui/src/Components/Labels/LabelWithPercent/index.test.tsx index 86e1f1888..9b6e0841b 100644 --- a/ui/src/Components/Labels/LabelWithPercent/index.test.tsx +++ b/ui/src/Components/Labels/LabelWithPercent/index.test.tsx @@ -6,7 +6,7 @@ import toDiffableHtml from "diffable-html"; import { AlertStore, NewUnappliedFilter } from "Stores/AlertStore"; -import { LabelWithPercent } from "."; +import LabelWithPercent from "."; let alertStore: AlertStore; diff --git a/ui/src/Components/Labels/LabelWithPercent/index.tsx b/ui/src/Components/Labels/LabelWithPercent/index.tsx index a7c75aac5..d0c195ac2 100644 --- a/ui/src/Components/Labels/LabelWithPercent/index.tsx +++ b/ui/src/Components/Labels/LabelWithPercent/index.tsx @@ -17,82 +17,78 @@ const LabelWithPercent: FC<{ percent: number; offset: number; isActive: boolean; -}> = observer( - ({ alertStore, name, value, hits, percent, offset, isActive }) => { - const handleClick = useCallback( - (event: MouseEvent) => { - // left click => apply foo=bar filter - // left click + alt => apply foo!=bar filter - const operator = - event.altKey === true - ? QueryOperators.NotEqual - : QueryOperators.Equal; +}> = ({ alertStore, name, value, hits, percent, offset, isActive }) => { + const handleClick = useCallback( + (event: MouseEvent) => { + // left click => apply foo=bar filter + // left click + alt => apply foo!=bar filter + const operator = + event.altKey === true ? QueryOperators.NotEqual : QueryOperators.Equal; - event.preventDefault(); + event.preventDefault(); - alertStore.filters.addFilter(FormatQuery(name, operator, value)); - }, - [alertStore.filters, name, value] + alertStore.filters.addFilter(FormatQuery(name, operator, value)); + }, + [alertStore.filters, name, value] + ); + + const removeFromFilters = () => { + alertStore.filters.removeFilter( + FormatQuery(name, QueryOperators.Equal, value) ); + }; - const removeFromFilters = () => { - alertStore.filters.removeFilter( - FormatQuery(name, QueryOperators.Equal, value) - ); - }; + const cs = GetClassAndStyle( + alertStore, + name, + value, + "components-label-with-hover mb-0 pl-0 text-left" + ); - const cs = GetClassAndStyle( - alertStore, - name, - value, - "components-label-with-hover mb-0 pl-0 text-left" - ); + const progressBarBg = + percent > 66 ? "bg-danger" : percent > 33 ? "bg-warning" : "bg-success"; - const progressBarBg = - percent > 66 ? "bg-danger" : percent > 33 ? "bg-warning" : "bg-success"; - - return ( -
    - - - {hits} - - - {name}:{" "} - {value} - - {isActive ? ( - - ) : null} + return ( +
    + + + {hits} -
    - {offset === 0 ? null : ( -
    - )} + + {name}:{" "} + {value} + + {isActive ? ( + + ) : null} + +
    + {offset === 0 ? null : (
    -
    + )} +
    - ); - } -); +
    + ); +}; -export { LabelWithPercent }; +export default observer(LabelWithPercent); diff --git a/ui/src/Components/Labels/StaticLabel/index.test.tsx b/ui/src/Components/Labels/StaticLabel/index.test.tsx index 8ff46a26f..ff893caca 100644 --- a/ui/src/Components/Labels/StaticLabel/index.test.tsx +++ b/ui/src/Components/Labels/StaticLabel/index.test.tsx @@ -6,7 +6,7 @@ import toDiffableHtml from "diffable-html"; import { AlertStore } from "Stores/AlertStore"; -import { StaticLabel } from "."; +import StaticLabel from "."; let alertStore: AlertStore; diff --git a/ui/src/Components/Labels/StaticLabel/index.tsx b/ui/src/Components/Labels/StaticLabel/index.tsx index fe795735f..ef1cde6c5 100644 --- a/ui/src/Components/Labels/StaticLabel/index.tsx +++ b/ui/src/Components/Labels/StaticLabel/index.tsx @@ -1,6 +1,6 @@ import React, { FC } from "react"; -import { useObserver } from "mobx-react-lite"; +import { observer } from "mobx-react-lite"; import { AlertStore } from "Stores/AlertStore"; import { GetClassAndStyle } from "Components/Labels/Utils"; @@ -13,12 +13,12 @@ const StaticLabel: FC<{ }> = ({ alertStore, name, value }) => { const cs = GetClassAndStyle(alertStore, name, value); - return useObserver(() => ( + return ( {name}:{" "} {value} - )); + ); }; -export { StaticLabel }; +export default observer(StaticLabel); diff --git a/ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.tsx b/ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.tsx index 550312025..a2bdcbfe4 100644 --- a/ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.tsx +++ b/ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.tsx @@ -1,6 +1,6 @@ import React, { FC } from "react"; -import { useObserver } from "mobx-react-lite"; +import { observer } from "mobx-react-lite"; import Select from "react-select"; @@ -10,7 +10,7 @@ import { ThemeContext } from "Components/Theme"; const AlertGroupCollapseConfiguration: FC<{ settingsStore: Settings; -}> = ({ settingsStore }) => { +}> = observer(({ settingsStore }) => { if ( !Object.values(settingsStore.alertGroupConfig.options) .map((o) => o.value) @@ -32,7 +32,7 @@ const AlertGroupCollapseConfiguration: FC<{ const context = React.useContext(ThemeContext); - return useObserver(() => ( + return (
    - )); -}; + ); +}); export { ThemeConfiguration }; diff --git a/ui/src/Components/MainModal/MainModalContent.tsx b/ui/src/Components/MainModal/MainModalContent.tsx index 5ea7e4675..5665a7635 100644 --- a/ui/src/Components/MainModal/MainModalContent.tsx +++ b/ui/src/Components/MainModal/MainModalContent.tsx @@ -1,6 +1,6 @@ import React, { FC, useState } from "react"; -import { useObserver } from "mobx-react-lite"; +import { Observer } from "mobx-react-lite"; import { AlertStore } from "Stores/AlertStore"; import { Settings } from "Stores/Settings"; @@ -25,7 +25,7 @@ const MainModalContent: FC<{ }) => { const [tab, setTab] = useState(openTab); - return useObserver(() => ( + return (
    - {alertStore.info.authentication.enabled && ( - - Username: {alertStore.info.authentication.username} - - )} - Version: {alertStore.info.version} + + {() => + alertStore.info.authentication.enabled ? ( + + Username: {alertStore.info.authentication.username} + + ) : null + } + + + {() => ( + + Version: {alertStore.info.version} + + )} +
    - )); + ); }; export { MainModalContent }; diff --git a/ui/src/Components/MainModal/index.test.tsx b/ui/src/Components/MainModal/index.test.tsx index acbf755ae..ef281fea3 100644 --- a/ui/src/Components/MainModal/index.test.tsx +++ b/ui/src/Components/MainModal/index.test.tsx @@ -54,8 +54,8 @@ describe("", () => { const toggle = tree.find(".nav-link"); toggle.simulate("click"); expect(tree.find("FontAwesomeIcon")).not.toHaveLength(0); - expect(tree.find("MainModalContent")).toHaveLength(0); expect(tree.find(".modal-content").find("svg.fa-spinner")).toHaveLength(1); + expect(tree.find("MainModalContent")).toHaveLength(0); }); it("renders modal content if fallback is not used", () => { @@ -63,8 +63,8 @@ describe("", () => { const toggle = tree.find(".nav-link"); toggle.simulate("click"); expect(tree.find("FontAwesomeIcon")).not.toHaveLength(0); - expect(tree.find("MainModalContent")).toHaveLength(1); expect(tree.find(".modal-content").find("svg.fa-spinner")).toHaveLength(0); + expect(tree.find("MainModalContent")).toHaveLength(1); }); it("hides the modal when toggle() is called twice", () => { diff --git a/ui/src/Components/ManagedSilence/SilenceComment.tsx b/ui/src/Components/ManagedSilence/SilenceComment.tsx index 8a4693002..d014a5e7a 100644 --- a/ui/src/Components/ManagedSilence/SilenceComment.tsx +++ b/ui/src/Components/ManagedSilence/SilenceComment.tsx @@ -6,7 +6,7 @@ import { faBellSlash } from "@fortawesome/free-solid-svg-icons/faBellSlash"; import { APISilenceT } from "Models/APITypes"; import { AlertStore } from "Stores/AlertStore"; -import { FilteringCounterBadge } from "Components/Labels/FilteringCounterBadge"; +import FilteringCounterBadge from "Components/Labels/FilteringCounterBadge"; import { ToggleIcon } from "Components/ToggleIcon"; import { SilenceProgress } from "./SilenceProgress"; diff --git a/ui/src/Components/ManagedSilence/SilenceProgress.tsx b/ui/src/Components/ManagedSilence/SilenceProgress.tsx index 834b280f1..5cd87e70e 100644 --- a/ui/src/Components/ManagedSilence/SilenceProgress.tsx +++ b/ui/src/Components/ManagedSilence/SilenceProgress.tsx @@ -1,6 +1,6 @@ import React, { FC, useEffect, useState } from "react"; -import { useObserver } from "mobx-react-lite"; +import { observer } from "mobx-react-lite"; import parseISO from "date-fns/parseISO"; import getUnixTime from "date-fns/getUnixTime"; @@ -18,7 +18,7 @@ const calculatePercent = (startsAt: string, endsAt: string) => { const SilenceProgress: FC<{ silence: APISilenceT; -}> = ({ silence }) => { +}> = observer(({ silence }) => { const [progress, setProgress] = useState( calculatePercent(silence.startsAt, silence.endsAt) ); @@ -30,33 +30,31 @@ const SilenceProgress: FC<{ return () => clearInterval(timer); }, [silence.startsAt, silence.endsAt]); - return useObserver(() => - parseISO(silence.endsAt) < new Date() ? ( - - Expired - - ) : ( - - Expires -
    -
    90 - ? "progress-bar bg-danger" - : progress > 75 - ? "progress-bar bg-warning" - : "progress-bar bg-success" - } - role="progressbar" - style={{ width: progress + "%" }} - aria-valuenow={progress} - aria-valuemin={0} - aria-valuemax={100} - /> -
    - - ) + return parseISO(silence.endsAt) < new Date() ? ( + + Expired + + ) : ( + + Expires +
    +
    90 + ? "progress-bar bg-danger" + : progress > 75 + ? "progress-bar bg-warning" + : "progress-bar bg-success" + } + role="progressbar" + style={{ width: progress + "%" }} + aria-valuenow={progress} + aria-valuemin={0} + aria-valuemax={100} + /> +
    + ); -}; +}); export { SilenceProgress }; diff --git a/ui/src/Components/NavBar/FilterInput/History.tsx b/ui/src/Components/NavBar/FilterInput/History.tsx index fb1a3c5f0..e3e84639b 100644 --- a/ui/src/Components/NavBar/FilterInput/History.tsx +++ b/ui/src/Components/NavBar/FilterInput/History.tsx @@ -9,7 +9,7 @@ import React, { ReactNode, } from "react"; -import { useObserver } from "mobx-react-lite"; +import { observer } from "mobx-react-lite"; import { localStored } from "mobx-stored"; import { Manager, Reference, Popper } from "react-popper"; @@ -27,7 +27,7 @@ import { Settings } from "Stores/Settings"; import { IsMobile } from "Common/Device"; import { CommonPopperModifiers } from "Common/Popper"; import { DropdownSlide } from "Components/Animations/DropdownSlide"; -import { HistoryLabel } from "Components/Labels/HistoryLabel"; +import HistoryLabel from "Components/Labels/HistoryLabel"; import { useOnClickOutside } from "Hooks/useOnClickOutside"; interface ReduceFilterT { @@ -164,7 +164,7 @@ interface HistoryStorageT { const History: FC<{ alertStore: AlertStore; settingsStore: Settings; -}> = ({ alertStore, settingsStore }) => { +}> = observer(({ alertStore, settingsStore }) => { // this will be dumped to local storage via mobx-stored const history: HistoryStorageT = localStored( "history.filters", @@ -214,7 +214,7 @@ const History: FC<{ const ref = useRef(null); useOnClickOutside(ref, hide, isVisible); - return useObserver(() => ( + return ( // data-filters is there to register filters for observation in mobx // it needs to be using full filter object to notice changes to // name & value but ignore hits @@ -264,7 +264,7 @@ const History: FC<{ - )); -}; + ); +}); export { History, HistoryMenu, ReduceFilter }; diff --git a/ui/src/Components/NavBar/FilterInput/index.tsx b/ui/src/Components/NavBar/FilterInput/index.tsx index e592cc171..4f7c06b29 100644 --- a/ui/src/Components/NavBar/FilterInput/index.tsx +++ b/ui/src/Components/NavBar/FilterInput/index.tsx @@ -1,6 +1,6 @@ import React, { FC, useEffect, useState, useRef, useCallback } from "react"; -import { useObserver } from "mobx-react-lite"; +import { observer } from "mobx-react-lite"; import Autosuggest from "react-autosuggest"; import Highlight from "react-highlighter"; @@ -21,7 +21,7 @@ import { History } from "./History"; const FilterInput: FC<{ alertStore: AlertStore; settingsStore: Settings; -}> = ({ alertStore, settingsStore }) => { +}> = observer(({ alertStore, settingsStore }) => { const autosuggestRef = useRef(null); const inputRef = useRef(null); const formRef = useRef(null); @@ -135,7 +135,7 @@ const FilterInput: FC<{ ); }; - return useObserver(() => ( + return ( // data-filters is there to register filters for observation in mobx // in order to re-render input component
    @@ -184,7 +184,7 @@ const FilterInput: FC<{
    - )); -}; + ); +}); export { FilterInput }; diff --git a/ui/src/Components/NavBar/index.stories.tsx b/ui/src/Components/NavBar/index.stories.tsx index 4474cbd39..887736273 100644 --- a/ui/src/Components/NavBar/index.stories.tsx +++ b/ui/src/Components/NavBar/index.stories.tsx @@ -6,7 +6,7 @@ import { AlertStore, NewUnappliedFilter, FilterT } from "Stores/AlertStore"; import { Settings } from "Stores/Settings"; import { SilenceFormStore } from "Stores/SilenceFormStore"; import { HistoryMenu } from "./FilterInput/History"; -import { NavBar } from "."; +import NavBar from "."; import "Styles/Percy.scss"; diff --git a/ui/src/Components/NavBar/index.test.tsx b/ui/src/Components/NavBar/index.test.tsx index ec4b5a64a..45f84fcea 100644 --- a/ui/src/Components/NavBar/index.test.tsx +++ b/ui/src/Components/NavBar/index.test.tsx @@ -7,7 +7,8 @@ import { MockThemeContext } from "__mocks__/Theme"; import { AlertStore } from "Stores/AlertStore"; import { Settings } from "Stores/Settings"; import { SilenceFormStore } from "Stores/SilenceFormStore"; -import { NavBar, MobileIdleTimeout, DesktopIdleTimeout } from "."; +import NavBar from "."; +import { MobileIdleTimeout, DesktopIdleTimeout } from "./timeouts"; let alertStore: AlertStore; let settingsStore: Settings; diff --git a/ui/src/Components/NavBar/index.tsx b/ui/src/Components/NavBar/index.tsx index db37972ac..bcee044d3 100644 --- a/ui/src/Components/NavBar/index.tsx +++ b/ui/src/Components/NavBar/index.tsx @@ -1,7 +1,7 @@ import React, { FC, useState, useEffect, useCallback } from "react"; import { reaction } from "mobx"; -import { useObserver } from "mobx-react-lite"; +import { observer } from "mobx-react-lite"; import useDimensions from "react-cool-dimensions"; @@ -15,13 +15,11 @@ import { SilenceFormStore } from "Stores/SilenceFormStore"; import { IsMobile } from "Common/Device"; import { OverviewModal } from "Components/OverviewModal"; import { MainModal } from "Components/MainModal"; -import { SilenceModal } from "Components/SilenceModal"; +import SilenceModal from "Components/SilenceModal"; import { ThemeContext } from "Components/Theme"; import { Fetcher } from "Components/Fetcher"; import { FilterInput } from "./FilterInput"; - -const DesktopIdleTimeout = 1000 * 60 * 3; -const MobileIdleTimeout = 1000 * 12; +import { MobileIdleTimeout, DesktopIdleTimeout } from "./timeouts"; const NavBar: FC<{ alertStore: AlertStore; @@ -87,7 +85,7 @@ const NavBar: FC<{ [] // eslint-disable-line react-hooks/exhaustive-deps ); - return useObserver(() => ( + return (
    - )); + ); }; -export { NavBar, MobileIdleTimeout, DesktopIdleTimeout }; +export default observer(NavBar); diff --git a/ui/src/Components/NavBar/timeouts.ts b/ui/src/Components/NavBar/timeouts.ts new file mode 100644 index 000000000..590172855 --- /dev/null +++ b/ui/src/Components/NavBar/timeouts.ts @@ -0,0 +1,4 @@ +const DesktopIdleTimeout = 1000 * 60 * 3; +const MobileIdleTimeout = 1000 * 12; + +export { MobileIdleTimeout, DesktopIdleTimeout }; diff --git a/ui/src/Components/OverviewModal/OverviewModalContent.tsx b/ui/src/Components/OverviewModal/OverviewModalContent.tsx index 7e0cc2453..bb59e0dc5 100644 --- a/ui/src/Components/OverviewModal/OverviewModalContent.tsx +++ b/ui/src/Components/OverviewModal/OverviewModalContent.tsx @@ -5,7 +5,7 @@ import { observer } from "mobx-react-lite"; import { APILabelCounterT } from "Models/APITypes"; import { AlertStore } from "Stores/AlertStore"; import { TooltipWrapper } from "Components/TooltipWrapper"; -import { LabelWithPercent } from "Components/Labels/LabelWithPercent"; +import LabelWithPercent from "Components/Labels/LabelWithPercent"; import { ToggleIcon } from "Components/ToggleIcon"; const TableRows: FC<{ diff --git a/ui/src/Components/OverviewModal/index.tsx b/ui/src/Components/OverviewModal/index.tsx index 1a8ac9cda..1aab5df4b 100644 --- a/ui/src/Components/OverviewModal/index.tsx +++ b/ui/src/Components/OverviewModal/index.tsx @@ -1,6 +1,6 @@ import React, { FC, useState, useCallback } from "react"; -import { useObserver } from "mobx-react-lite"; +import { observer } from "mobx-react-lite"; import { CSSTransition } from "react-transition-group"; @@ -21,14 +21,14 @@ const OverviewModalContent = React.lazy(() => const OverviewModal: FC<{ alertStore: AlertStore; -}> = ({ alertStore }) => { +}> = observer(({ alertStore }) => { const [isVisible, setIsVisible] = useState(false); const toggle = useCallback(() => setIsVisible(!isVisible), [isVisible]); const { ref, props } = useFlashTransition(alertStore.info.totalAlerts); - return useObserver(() => ( + return ( @@ -58,7 +58,7 @@ const OverviewModal: FC<{ - )); -}; + ); +}); export { OverviewModal }; diff --git a/ui/src/Components/SilenceModal/AlertManagerInput/index.tsx b/ui/src/Components/SilenceModal/AlertManagerInput/index.tsx index c16c1c9e2..60d480e23 100644 --- a/ui/src/Components/SilenceModal/AlertManagerInput/index.tsx +++ b/ui/src/Components/SilenceModal/AlertManagerInput/index.tsx @@ -1,7 +1,7 @@ import React, { FC, useEffect } from "react"; import { autorun } from "mobx"; -import { useObserver } from "mobx-react-lite"; +import { observer } from "mobx-react-lite"; import Select from "react-select"; @@ -17,7 +17,7 @@ import { ValidationError } from "Components/ValidationError"; const AlertManagerInput: FC<{ alertStore: AlertStore; silenceFormStore: SilenceFormStore; -}> = ({ alertStore, silenceFormStore }) => { +}> = observer(({ alertStore, silenceFormStore }) => { useEffect(() => { if (silenceFormStore.data.alertmanagers.length === 0) { silenceFormStore.data.setAlertmanagers( @@ -52,7 +52,7 @@ const AlertManagerInput: FC<{ const context = React.useContext(ThemeContext); - return useObserver(() => ( + return (