Add default auto refresh config (#21351)

* Add default auto refresh config * Add changelog * fix eslint * Add default interval usage * improvement. remove useEffect
Graylog2 · Jan 28, 2025 · 96bbe6f · 96bbe6f
1 parent 38711f2
commit 96bbe6f
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/changelog/unreleased/issue-21351.toml b/changelog/unreleased/issue-21351.toml
@@ -0,0 +1,5 @@
+type = "f"
+message = "Add default auto refresh config on events and alerts page"
+
+issues = ["21350"]
+pulls = ["21351"]
diff --git a/graylog2-web-interface/src/components/events/events/EventsRefreshControls.tsx b/graylog2-web-interface/src/components/events/events/EventsRefreshControls.tsx
@@ -15,7 +15,7 @@
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
 import * as React from 'react';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import useSearchConfiguration from 'hooks/useSearchConfiguration';
 import useSendTelemetry from 'logic/telemetry/useSendTelemetry';
@@ -27,6 +27,8 @@ import RefreshControls from 'components/common/RefreshControls';
 import useDefaultInterval from 'views/hooks/useDefaultIntervalForRefresh';
 import AutoRefreshProvider from 'views/components/contexts/AutoRefreshProvider';
 import { useTableFetchContext } from 'components/common/PaginatedEntityTable';
+import type { RefreshConfig } from 'views/components/contexts/AutoRefreshContext';
+import { durationToMS } from 'util/DateTime';
 
 const EventsRefreshControls = () => {
   const { refetch } = useTableFetchContext();
@@ -37,6 +39,7 @@ const EventsRefreshControls = () => {
   const { data: minimumRefreshInterval, isInitialLoading: isLoadingMinimumInterval } = useMinimumRefreshInterval();
 
   const defaultInterval = useDefaultInterval();
+  const defaultRefreshConfig: RefreshConfig = useMemo(() => ({ enabled: true, interval: durationToMS(defaultInterval) }), [defaultInterval]);
 
   const onSelectInterval = useCallback((interval: string) => {
     sendTelemetry(TELEMETRY_EVENT_TYPE.ALERTS_REFRESH_CONTROL_PRESET_SELECTED, {
@@ -63,7 +66,7 @@ const EventsRefreshControls = () => {
   const intervalOptions = autoRefreshTimerangeOptions ? Object.entries(autoRefreshTimerangeOptions) : [];
 
   return (
-    <AutoRefreshProvider onRefresh={refetch}>
+    <AutoRefreshProvider onRefresh={refetch} defaultRefreshConfig={defaultRefreshConfig}>
       <RefreshControls disable={false}
                        intervalOptions={intervalOptions}
                        isLoadingMinimumInterval={isLoadingMinimumInterval}

diff --git a/graylog2-web-interface/src/views/components/contexts/AutoRefreshProvider.tsx b/graylog2-web-interface/src/views/components/contexts/AutoRefreshProvider.tsx
@@ -22,9 +22,9 @@ import { v4 as uuid } from 'uuid';
 import type { RefreshConfig } from 'views/components/contexts/AutoRefreshContext';
 import AutoRefreshContext from 'views/components/contexts/AutoRefreshContext';
 
-const AutoRefreshProvider = ({ children, onRefresh }: React.PropsWithChildren<{ onRefresh: () => void }>) => {
-  const [refreshConfig, setRefreshConfig] = useState<RefreshConfig | null>(null);
-  const [animationId, setAnimationId] = useState<string | null>(null);
+const AutoRefreshProvider = ({ children = null, onRefresh, defaultRefreshConfig = null }: React.PropsWithChildren<{ defaultRefreshConfig?: RefreshConfig | null, onRefresh: () => void }>) => {
+  const [refreshConfig, setRefreshConfig] = useState<RefreshConfig | null>(defaultRefreshConfig);
+  const [animationId, setAnimationId] = useState<string | null>(defaultRefreshConfig?.enabled ? uuid() : null);
   const startAutoRefresh = useCallback((interval: number) => {
     setRefreshConfig({ enabled: true, interval });
     setAnimationId(uuid());