feat(slo): add reset action (#182282)

elastic · May 2, 2024 · fe41c27 · fe41c27
1 parent 310bba0
commit fe41c27
Show file tree

Hide file tree

Showing 13 changed files with 240 additions and 73 deletions.
diff --git a/...ution/slo/public/components/slo/reset_confirmation_modal/slo_reset_confirmation_modal.tsx b/...ution/slo/public/components/slo/reset_confirmation_modal/slo_reset_confirmation_modal.tsx
@@ -14,12 +14,14 @@ export interface SloResetConfirmationModalProps {
   slo: SLOWithSummaryResponse | SLODefinitionResponse;
   onCancel: () => void;
   onConfirm: () => void;
+  isLoading?: boolean;
 }
 
 export function SloResetConfirmationModal({
   slo,
   onCancel,
   onConfirm,
+  isLoading,
 }: SloResetConfirmationModalProps) {
   const { name } = slo;
   return (
@@ -38,6 +40,7 @@ export function SloResetConfirmationModal({
       })}
       onCancel={onCancel}
       onConfirm={onConfirm}
+      isLoading={isLoading}
     >
       {i18n.translate('xpack.slo.resetConfirmationModal.descriptionText', {
         defaultMessage: 'Resetting this SLO will also regenerate the historical data.',

diff --git a/x-pack/plugins/observability_solution/slo/public/hooks/use_fetch_slo_instances.ts b/x-pack/plugins/observability_solution/slo/public/hooks/use_fetch_slo_instances.ts
diff --git a/x-pack/plugins/observability_solution/slo/public/hooks/use_reset_slo.ts b/x-pack/plugins/observability_solution/slo/public/hooks/use_reset_slo.ts
@@ -42,8 +42,10 @@ export function useResetSlo() {
           }),
         });
       },
-      onSuccess: (_data, { name }) => {
+      onSuccess: (_data, { name, id }) => {
         queryClient.invalidateQueries({ queryKey: sloKeys.lists(), exact: false });
+        queryClient.invalidateQueries({ queryKey: sloKeys.historicalSummaries(), exact: false });
+        queryClient.invalidateQueries({ queryKey: sloKeys.details(), exact: false });
         toasts.addSuccess(
           i18n.translate('xpack.slo.slo.reset.successNotification', {
             defaultMessage: '{name} reset successfully',

diff --git a/...plugins/observability_solution/slo/public/pages/slo_details/components/header_control.tsx b/...plugins/observability_solution/slo/public/pages/slo_details/components/header_control.tsx
@@ -19,10 +19,12 @@ import { SLOWithSummaryResponse } from '@kbn/slo-schema';
 import React, { useCallback, useEffect, useState } from 'react';
 import { paths } from '../../../../common/locators/paths';
 import { SloDeleteConfirmationModal } from '../../../components/slo/delete_confirmation_modal/slo_delete_confirmation_modal';
+import { SloResetConfirmationModal } from '../../../components/slo/reset_confirmation_modal/slo_reset_confirmation_modal';
 import { useCapabilities } from '../../../hooks/use_capabilities';
 import { useCloneSlo } from '../../../hooks/use_clone_slo';
 import { useDeleteSlo } from '../../../hooks/use_delete_slo';
 import { useFetchRulesForSlo } from '../../../hooks/use_fetch_rules_for_slo';
+import { useResetSlo } from '../../../hooks/use_reset_slo';
 import { useKibana } from '../../../utils/kibana_react';
 import { convertSliApmParamsToApmAppDeeplinkUrl } from '../../../utils/slo/convert_sli_apm_params_to_apm_app_deeplink_url';
 import { isApmIndicatorType } from '../../../utils/slo/indicator';
@@ -45,14 +47,17 @@ export function HeaderControl({ isLoading, slo }: Props) {
   const hasApmReadCapabilities = capabilities.apm.show;
   const { hasWriteCapabilities } = useCapabilities();
 
-  const { isDeletingSlo, removeDeleteQueryParam } = useGetQueryParams();
+  const { isDeletingSlo, isResettingSlo, removeDeleteQueryParam, removeResetQueryParam } =
+    useGetQueryParams();
 
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const [isRuleFlyoutVisible, setRuleFlyoutVisibility] = useState<boolean>(false);
   const [isEditRuleFlyoutOpen, setIsEditRuleFlyoutOpen] = useState(false);
   const [isDeleteConfirmationModalOpen, setDeleteConfirmationModalOpen] = useState(false);
+  const [isResetConfirmationModalOpen, setResetConfirmationModalOpen] = useState(false);
 
   const { mutate: deleteSlo } = useDeleteSlo();
+  const { mutateAsync: resetSlo, isLoading: isResetLoading } = useResetSlo();
 
   const { data: rulesBySlo, refetchRules } = useFetchRulesForSlo({
     sloIds: slo ? [slo.id] : undefined,
@@ -67,7 +72,10 @@ export function HeaderControl({ isLoading, slo }: Props) {
     if (isDeletingSlo) {
       setDeleteConfirmationModalOpen(true);
     }
-  }, [isDeletingSlo]);
+    if (isResettingSlo) {
+      setResetConfirmationModalOpen(true);
+    }
+  }, [isDeletingSlo, isResettingSlo]);
 
   const onCloseRuleFlyout = () => {
     setRuleFlyoutVisibility(false);
@@ -78,7 +86,7 @@ export function HeaderControl({ isLoading, slo }: Props) {
     setRuleFlyoutVisibility(true);
   };
 
-  const { handleNavigateToRules, sloEditUrl, remoteDeleteUrl } = useSloActions({
+  const { handleNavigateToRules, sloEditUrl, remoteDeleteUrl, remoteResetUrl } = useSloActions({
     slo,
     rules,
     setIsEditRuleFlyoutOpen,
@@ -119,13 +127,34 @@ export function HeaderControl({ isLoading, slo }: Props) {
     setDeleteConfirmationModalOpen(false);
   };
 
-  const handleDeleteConfirm = async () => {
+  const handleDeleteConfirm = () => {
     if (slo) {
       deleteSlo({ id: slo.id, name: slo.name });
       navigate(basePath.prepend(paths.slos));
     }
   };
 
+  const handleReset = () => {
+    if (!!remoteResetUrl) {
+      window.open(remoteResetUrl, '_blank');
+    } else {
+      setResetConfirmationModalOpen(true);
+    }
+  };
+
+  const handleResetConfirm = async () => {
+    if (slo) {
+      await resetSlo({ id: slo.id, name: slo.name });
+      removeResetQueryParam();
+      setResetConfirmationModalOpen(false);
+    }
+  };
+
+  const handleResetCancel = () => {
+    removeResetQueryParam();
+    setResetConfirmationModalOpen(false);
+  };
+
   const navigate = useCallback(
     (url: string) => setTimeout(() => navigateToUrl(url)),
     [navigateToUrl]
@@ -263,6 +292,21 @@ export function HeaderControl({ isLoading, slo }: Props) {
                   defaultMessage: 'Delete',
                 })}
                 {showRemoteLinkIcon}
+              </EuiContextMenuItem>,
+              <EuiContextMenuItem
+                key="reset"
+                icon="refresh"
+                disabled={!hasWriteCapabilities || hasUndefinedRemoteKibanaUrl}
+                onClick={handleReset}
+                data-test-subj="sloDetailsHeaderControlPopoverReset"
+                toolTipContent={
+                  hasUndefinedRemoteKibanaUrl ? NOT_AVAILABLE_FOR_UNDEFINED_REMOTE_KIBANA_URL : ''
+                }
+              >
+                {i18n.translate('xpack.slo.slo.item.actions.reset', {
+                  defaultMessage: 'Reset',
+                })}
+                {showRemoteLinkIcon}
               </EuiContextMenuItem>
             )}
         />
@@ -292,6 +336,15 @@ export function HeaderControl({ isLoading, slo }: Props) {
           onConfirm={handleDeleteConfirm}
         />
       ) : null}
+
+      {slo && isResetConfirmationModalOpen ? (
+        <SloResetConfirmationModal
+          slo={slo}
+          onCancel={handleResetCancel}
+          onConfirm={handleResetConfirm}
+          isLoading={isResetLoading}
+        />
+      ) : null}
     </>
   );
 }

diff --git a/...plugins/observability_solution/slo/public/pages/slo_details/hooks/use_get_query_params.ts b/...plugins/observability_solution/slo/public/pages/slo_details/hooks/use_get_query_params.ts
@@ -6,12 +6,13 @@
  */
 
 import { ALL_VALUE } from '@kbn/slo-schema';
-import { useHistory, useLocation } from 'react-router-dom';
 import { useCallback } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
 
 export const INSTANCE_SEARCH_PARAM = 'instanceId';
 export const REMOTE_NAME_PARAM = 'remoteName';
 export const DELETE_SLO = 'delete';
+export const RESET_SLO = 'reset';
 
 export function useGetQueryParams() {
   const { search, pathname } = useLocation();
@@ -21,6 +22,7 @@ export function useGetQueryParams() {
   const instanceId = searchParams.get(INSTANCE_SEARCH_PARAM);
   const remoteName = searchParams.get(REMOTE_NAME_PARAM);
   const deleteSlo = searchParams.get(DELETE_SLO);
+  const resetSlo = searchParams.get(RESET_SLO);
 
   const removeDeleteQueryParam = useCallback(() => {
     const qParams = new URLSearchParams(search);
@@ -35,10 +37,25 @@ export function useGetQueryParams() {
     }
   }, [deleteSlo, history, pathname, search]);
 
+  const removeResetQueryParam = useCallback(() => {
+    const qParams = new URLSearchParams(search);
+
+    // remote reset param from url after initial load
+    if (resetSlo === 'true') {
+      qParams.delete(RESET_SLO);
+      history.replace({
+        pathname,
+        search: qParams.toString(),
+      });
+    }
+  }, [resetSlo, history, pathname, search]);
+
   return {
     instanceId: !!instanceId && instanceId !== ALL_VALUE ? instanceId : undefined,
     remoteName,
     isDeletingSlo: deleteSlo === 'true',
     removeDeleteQueryParam,
+    isResettingSlo: resetSlo === 'true',
+    removeResetQueryParam,
   };
 }
diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/hooks/use_slo_actions.ts b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/hooks/use_slo_actions.ts
@@ -16,6 +16,7 @@ import { useKibana } from '../../../utils/kibana_react';
 import {
   createRemoteSloDeleteUrl,
   createRemoteSloEditUrl,
+  createRemoteSloResetUrl,
 } from '../../../utils/slo/remote_slo_urls';
 
 export const useSloActions = ({
@@ -42,6 +43,7 @@ export const useSloActions = ({
       sloEditUrl: '',
       handleNavigateToRules: () => {},
       remoteDeleteUrl: undefined,
+      remoteResetUrl: undefined,
       sloDetailsUrl: '',
     };
   }
@@ -76,6 +78,7 @@ export const useSloActions = ({
   );
 
   const remoteDeleteUrl = createRemoteSloDeleteUrl(slo, spaceId);
+  const remoteResetUrl = createRemoteSloResetUrl(slo, spaceId);
 
   const sloEditUrl = slo.remote
     ? createRemoteSloEditUrl(slo, spaceId)
@@ -85,6 +88,7 @@ export const useSloActions = ({
     sloEditUrl,
     handleNavigateToRules,
     remoteDeleteUrl,
+    remoteResetUrl,
     sloDetailsUrl: http.basePath.prepend(detailsUrl),
   };
 };
diff --git a/...plugins/observability_solution/slo/public/pages/slo_outdated_definitions/outdated_slo.tsx b/...plugins/observability_solution/slo/public/pages/slo_outdated_definitions/outdated_slo.tsx
@@ -54,6 +54,7 @@ export function OutdatedSlo({ slo, onReset, onDelete }: OutdatedSloProps) {
   const handleResetCancel = () => {
     setResetConfirmationModalOpen(false);
   };
+
   return (
     <EuiPanel hasBorder hasShadow={false}>
       <EuiFlexGroup alignItems="center" gutterSize="s">

diff --git a/...ugins/observability_solution/slo/public/pages/slos/components/card_view/slo_card_item.tsx b/...ugins/observability_solution/slo/public/pages/slos/components/card_view/slo_card_item.tsx
@@ -24,14 +24,16 @@ import {
 import { ALL_VALUE, HistoricalSummaryResponse, SLOWithSummaryResponse } from '@kbn/slo-schema';
 import { Rule } from '@kbn/triggers-actions-ui-plugin/public';
 import React, { useState } from 'react';
-import { EditBurnRateRuleFlyout } from '../common/edit_burn_rate_rule_flyout';
 import { SloDeleteConfirmationModal } from '../../../../components/slo/delete_confirmation_modal/slo_delete_confirmation_modal';
+import { SloResetConfirmationModal } from '../../../../components/slo/reset_confirmation_modal/slo_reset_confirmation_modal';
+import { useResetSlo } from '../../../../hooks/use_reset_slo';
 import { BurnRateRuleParams } from '../../../../typings';
 import { useKibana } from '../../../../utils/kibana_react';
 import { formatHistoricalData } from '../../../../utils/slo/chart_data_formatter';
 import { useSloListActions } from '../../hooks/use_slo_list_actions';
 import { useSloFormattedSummary } from '../../hooks/use_slo_summary';
 import { BurnRateRuleFlyout } from '../common/burn_rate_rule_flyout';
+import { EditBurnRateRuleFlyout } from '../common/edit_burn_rate_rule_flyout';
 import { SloCardItemActions } from './slo_card_item_actions';
 import { SloCardItemBadges } from './slo_card_item_badges';
 
@@ -76,7 +78,9 @@ export function SloCardItem({ slo, rules, activeAlerts, historicalSummary, refet
   const [isAddRuleFlyoutOpen, setIsAddRuleFlyoutOpen] = useState(false);
   const [isEditRuleFlyoutOpen, setIsEditRuleFlyoutOpen] = useState(false);
   const [isDeleteConfirmationModalOpen, setDeleteConfirmationModalOpen] = useState(false);
+  const [isResetConfirmationModalOpen, setResetConfirmationModalOpen] = useState(false);
   const [isDashboardAttachmentReady, setDashboardAttachmentReady] = useState(false);
+
   const historicalSliData = formatHistoricalData(historicalSummary, 'sli_value');
 
   const { handleCreateRule, handleDeleteCancel, handleDeleteConfirm, handleAttachToDashboardSave } =
@@ -87,6 +91,17 @@ export function SloCardItem({ slo, rules, activeAlerts, historicalSummary, refet
       setIsAddRuleFlyoutOpen,
     });
 
+  const { mutateAsync: resetSlo, isLoading: isResetLoading } = useResetSlo();
+
+  const handleResetConfirm = async () => {
+    await resetSlo({ id: slo.id, name: slo.name });
+    setResetConfirmationModalOpen(false);
+  };
+
+  const handleResetCancel = () => {
+    setResetConfirmationModalOpen(false);
+  };
+
   return (
     <>
       <EuiPanel
@@ -132,6 +147,7 @@ export function SloCardItem({ slo, rules, activeAlerts, historicalSummary, refet
             setDeleteConfirmationModalOpen={setDeleteConfirmationModalOpen}
             setIsEditRuleFlyoutOpen={setIsEditRuleFlyoutOpen}
             setDashboardAttachmentReady={setDashboardAttachmentReady}
+            setResetConfirmationModalOpen={setResetConfirmationModalOpen}
           />
         )}
       </EuiPanel>
@@ -156,6 +172,16 @@ export function SloCardItem({ slo, rules, activeAlerts, historicalSummary, refet
           onConfirm={handleDeleteConfirm}
         />
       ) : null}
+
+      {isResetConfirmationModalOpen ? (
+        <SloResetConfirmationModal
+          slo={slo}
+          onCancel={handleResetCancel}
+          onConfirm={handleResetConfirm}
+          isLoading={isResetLoading}
+        />
+      ) : null}
+
       {isDashboardAttachmentReady ? (
         <SavedObjectSaveModalDashboard
           objectType={i18n.translate('xpack.slo.item.actions.addToDashboard.objectTypeLabel', {

diff --git a/...servability_solution/slo/public/pages/slos/components/card_view/slo_card_item_actions.tsx b/...servability_solution/slo/public/pages/slos/components/card_view/slo_card_item_actions.tsx
@@ -42,6 +42,7 @@ interface Props {
   isActionsPopoverOpen: boolean;
   setIsActionsPopoverOpen: (value: boolean) => void;
   setDeleteConfirmationModalOpen: (value: boolean) => void;
+  setResetConfirmationModalOpen: (value: boolean) => void;
   setIsAddRuleFlyoutOpen: (value: boolean) => void;
   setIsEditRuleFlyoutOpen: (value: boolean) => void;
   setDashboardAttachmentReady: (value: boolean) => void;