[SLO] Add refresh button to SLO Detail page (#154856)

elastic · Apr 12, 2023 · 49b763f · 49b763f
1 parent 515d270
commit 49b763f
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 10 deletions.
diff --git a/...ugins/observability/public/components/app/burn_rate_rule_editor/burn_rate_rule_editor.tsx b/...ugins/observability/public/components/app/burn_rate_rule_editor/burn_rate_rule_editor.tsx
@@ -28,7 +28,9 @@ type Props = Pick<
 
 export function BurnRateRuleEditor(props: Props) {
   const { setRuleParams, ruleParams, errors } = props;
-  const { isLoading: loadingInitialSlo, slo: initialSlo } = useFetchSloDetails(ruleParams?.sloId);
+  const { isLoading: loadingInitialSlo, slo: initialSlo } = useFetchSloDetails({
+    sloId: ruleParams?.sloId,
+  });
 
   const [selectedSlo, setSelectedSlo] = useState<SLOResponse | undefined>(undefined);
   const [longWindowDuration, setLongWindowDuration] = useState<Duration>({

diff --git a/x-pack/plugins/observability/public/hooks/slo/use_fetch_historical_summary.ts b/x-pack/plugins/observability/public/hooks/slo/use_fetch_historical_summary.ts
@@ -21,10 +21,13 @@ export interface UseFetchHistoricalSummaryResponse {
 
 export interface Params {
   sloIds: string[];
+  shouldRefetch?: boolean;
 }
 
+const LONG_REFETCH_INTERVAL = 1000 * 60; // 1 minute
 export function useFetchHistoricalSummary({
   sloIds = [],
+  shouldRefetch,
 }: Params): UseFetchHistoricalSummaryResponse {
   const { http } = useKibana().services;
 
@@ -45,6 +48,7 @@ export function useFetchHistoricalSummary({
         // ignore error
       }
     },
+    refetchInterval: shouldRefetch ? LONG_REFETCH_INTERVAL : undefined,
     refetchOnWindowFocus: false,
   });
 

diff --git a/x-pack/plugins/observability/public/hooks/slo/use_fetch_slo_details.ts b/x-pack/plugins/observability/public/hooks/slo/use_fetch_slo_details.ts
@@ -15,7 +15,9 @@ import { GetSLOResponse, SLOWithSummaryResponse } from '@kbn/slo-schema';
 import { useKibana } from '../../utils/kibana_react';
 
 export interface UseFetchSloDetailsResponse {
+  isInitialLoading: boolean;
   isLoading: boolean;
+  isRefetching: boolean;
   isSuccess: boolean;
   isError: boolean;
   slo: SLOWithSummaryResponse | undefined;
@@ -24,7 +26,15 @@ export interface UseFetchSloDetailsResponse {
   ) => Promise<QueryObserverResult<GetSLOResponse | undefined, unknown>>;
 }
 
-export function useFetchSloDetails(sloId?: string): UseFetchSloDetailsResponse {
+const LONG_REFETCH_INTERVAL = 1000 * 60; // 1 minute
+
+export function useFetchSloDetails({
+  sloId,
+  shouldRefetch,
+}: {
+  sloId?: string;
+  shouldRefetch?: boolean;
+}): UseFetchSloDetailsResponse {
   const { http } = useKibana().services;
 
   const { isInitialLoading, isLoading, isError, isSuccess, isRefetching, data, refetch } = useQuery(
@@ -43,13 +53,16 @@ export function useFetchSloDetails(sloId?: string): UseFetchSloDetailsResponse {
         }
       },
       enabled: Boolean(sloId),
+      refetchInterval: shouldRefetch ? LONG_REFETCH_INTERVAL : undefined,
       refetchOnWindowFocus: false,
     }
   );
 
   return {
     slo: data,
-    isLoading: isInitialLoading || isLoading || isRefetching,
+    isLoading,
+    isInitialLoading,
+    isRefetching,
     isSuccess,
     isError,
     refetch,

diff --git a/x-pack/plugins/observability/public/pages/slo_details/components/slo_details.stories.tsx b/x-pack/plugins/observability/public/pages/slo_details/components/slo_details.stories.tsx
@@ -22,6 +22,7 @@ const Template: ComponentStory<typeof Component> = (props: Props) => <Component
 
 const defaultProps: Props = {
   slo: buildSlo(),
+  isAutoRefreshing: false,
 };
 
 export const SloDetails = Template.bind({});

diff --git a/x-pack/plugins/observability/public/pages/slo_details/components/slo_details.tsx b/x-pack/plugins/observability/public/pages/slo_details/components/slo_details.tsx
@@ -17,11 +17,12 @@ import { SliChartPanel } from './sli_chart_panel';
 
 export interface Props {
   slo: SLOWithSummaryResponse;
+  isAutoRefreshing: boolean;
 }
 
-export function SloDetails({ slo }: Props) {
+export function SloDetails({ slo, isAutoRefreshing }: Props) {
   const { isLoading: historicalSummaryLoading, sloHistoricalSummaryResponse = {} } =
-    useFetchHistoricalSummary({ sloIds: [slo.id] });
+    useFetchHistoricalSummary({ sloIds: [slo.id], shouldRefetch: isAutoRefreshing });
 
   const errorBudgetBurnDownData = formatHistoricalData(
     sloHistoricalSummaryResponse[slo.id],

diff --git a/x-pack/plugins/observability/public/pages/slo_details/slo_details.tsx b/x-pack/plugins/observability/public/pages/slo_details/slo_details.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { EuiBreadcrumbProps } from '@elastic/eui/src/components/breadcrumbs/breadcrumb';
 import { EuiLoadingSpinner } from '@elastic/eui';
@@ -25,18 +25,24 @@ import { HeaderControl } from './components/header_control';
 import { paths } from '../../config/paths';
 import type { SloDetailsPathParams } from './types';
 import type { ObservabilityAppServices } from '../../application/types';
+import { AutoRefreshButton } from '../slos/components/auto_refresh_button';
 
 export function SloDetailsPage() {
   const {
     application: { navigateToUrl },
     http: { basePath },
   } = useKibana<ObservabilityAppServices>().services;
   const { ObservabilityPageTemplate } = usePluginContext();
+
   const { hasAtLeast } = useLicense();
   const hasRightLicense = hasAtLeast('platinum');
 
   const { sloId } = useParams<SloDetailsPathParams>();
-  const { isLoading, slo } = useFetchSloDetails(sloId);
+
+  const [isAutoRefreshing, setIsAutoRefreshing] = useState(true);
+
+  const { isLoading, slo } = useFetchSloDetails({ sloId, shouldRefetch: isAutoRefreshing });
+
   useBreadcrumbs(getBreadcrumbs(basePath, slo));
 
   const isSloNotFound = !isLoading && slo === undefined;
@@ -48,17 +54,28 @@ export function SloDetailsPage() {
     navigateToUrl(basePath.prepend(paths.observability.slos));
   }
 
+  const handleToggleAutoRefresh = () => {
+    setIsAutoRefreshing(!isAutoRefreshing);
+  };
+
   return (
     <ObservabilityPageTemplate
       pageHeader={{
         pageTitle: <HeaderTitle isLoading={isLoading} slo={slo} />,
-        rightSideItems: [<HeaderControl isLoading={isLoading} slo={slo} />],
+        rightSideItems: [
+          <HeaderControl isLoading={isLoading} slo={slo} />,
+          <AutoRefreshButton
+            disabled={isLoading}
+            isAutoRefreshing={isAutoRefreshing}
+            onClick={handleToggleAutoRefresh}
+          />,
+        ],
         bottomBorder: false,
       }}
       data-test-subj="sloDetailsPage"
     >
       {isLoading && <EuiLoadingSpinner data-test-subj="sloDetailsLoading" />}
-      {!isLoading && <SloDetails slo={slo!} />}
+      {!isLoading && <SloDetails slo={slo!} isAutoRefreshing={isAutoRefreshing} />}
     </ObservabilityPageTemplate>
   );
 }

diff --git a/x-pack/plugins/observability/public/pages/slo_edit/slo_edit.tsx b/x-pack/plugins/observability/public/pages/slo_edit/slo_edit.tsx
@@ -38,7 +38,7 @@ export function SloEditPage() {
     },
   ]);
 
-  const { slo, isLoading } = useFetchSloDetails(sloId);
+  const { slo, isLoading } = useFetchSloDetails({ sloId });
 
   if (hasRightLicense === false) {
     navigateToUrl(basePath.prepend(paths.observability.slos));