[8.19] feat(slo): Bulk delete UI (#219634)

x-pack/platform/packages/shared/kbn-slo-schema/src/rest_specs/routes/bulk_delete.ts

@@ -21,6 +21,9 @@ const bulkDeleteStatusParamsSchema = t.type({
 
 type BulkDeleteInput = t.OutputOf<typeof bulkDeleteParamsSchema.props.body>;
 type BulkDeleteParams = t.TypeOf<typeof bulkDeleteParamsSchema.props.body>;
+interface BulkDeleteResponse {
+  taskId: string;
+}
 
 interface BulkDeleteResult {
   id: string;
@@ -34,5 +37,11 @@ interface BulkDeleteStatusResponse {
   error?: string;
 }
 
-export type { BulkDeleteInput, BulkDeleteParams, BulkDeleteResult, BulkDeleteStatusResponse };
+export type {
+  BulkDeleteInput,
+  BulkDeleteParams,
+  BulkDeleteResponse,
+  BulkDeleteResult,
+  BulkDeleteStatusResponse,
+};
 export { bulkDeleteParamsSchema, bulkDeleteStatusParamsSchema };

x-pack/solutions/observability/plugins/slo/public/components/slo/bulk_delete_confirmation_modal/bulk_delete_confirmation_modal.tsx

@@ -0,0 +1,51 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiConfirmModal } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { SLODefinitionResponse } from '@kbn/slo-schema';
+import React from 'react';
+import { useBulkDeleteSlo } from '../../../pages/slo_management/hooks/use_bulk_delete_slo';
+
+export interface Props {
+  onCancel: () => void;
+  onConfirm: () => void;
+  items: SLODefinitionResponse[];
+}
+
+export function SloBulkDeleteConfirmationModal({ items, onCancel, onConfirm }: Props) {
+  const { mutate: bulkDelete } = useBulkDeleteSlo();
+
+  return (
+    <EuiConfirmModal
+      buttonColor="danger"
+      data-test-subj="sloBulkDeleteConfirmationModal"
+      title={i18n.translate('xpack.slo.bulkDeleteConfirmationModal.title', {
+        defaultMessage: 'Delete {count} SLOs',
+        values: { count: items.length },
+      })}
+      cancelButtonText={i18n.translate('xpack.slo.bulkDeleteConfirmationModal.cancelButtonLabel', {
+        defaultMessage: 'Cancel',
+      })}
+      confirmButtonText={i18n.translate(
+        'xpack.slo.bulkDeleteConfirmationModal.confirmButtonLabel',
+        {
+          defaultMessage: 'Delete',
+        }
+      )}
+      onCancel={onCancel}
+      onConfirm={() => {
+        bulkDelete({ items: items.map((item) => ({ id: item.id })) });
+        onConfirm();
+      }}
+    >
+      {i18n.translate('xpack.slo.bulkDeleteConfirmationModal.descriptionText', {
+        defaultMessage: 'This will delete the SLOs, their instances and all their data.',
+      })}
+    </EuiConfirmModal>
+  );
+}

x-pack/solutions/observability/plugins/slo/public/components/slo/delete_confirmation_modal/slo_delete_confirmation_modal.stories.tsx

@@ -7,7 +7,7 @@
 
 import { KibanaReactStorybookDecorator } from '../../../utils/kibana_react.storybook_decorator';
 import { buildSlo } from '../../../data/slo/slo';
-import { SloDeleteModal as Component } from './slo_delete_confirmation_modal';
+import { SloDeleteConfirmationModal as Component } from './slo_delete_confirmation_modal';
 
 export default {
   component: Component,

x-pack/solutions/observability/plugins/slo/public/components/slo/delete_confirmation_modal/slo_delete_confirmation_modal.tsx

@@ -26,39 +26,26 @@ import React, { useState } from 'react';
 import { useDeleteSlo } from '../../../hooks/use_delete_slo';
 import { useDeleteSloInstance } from '../../../hooks/use_delete_slo_instance';
 
-export interface Props {
+interface Props {
   slo: SLOWithSummaryResponse | SLODefinitionResponse;
   onCancel: () => void;
-  onSuccess: () => void;
+  onConfirm: () => void;
 }
 
-export function SloDeleteModal({ slo, onCancel, onSuccess }: Props) {
+export function SloDeleteConfirmationModal({ slo, onCancel, onConfirm }: Props) {
+  const modalTitleId = useGeneratedHtmlId();
+  const { mutate: deleteSlo } = useDeleteSlo();
+  const { mutate: deleteSloInstance } = useDeleteSloInstance();
+
   const { name, groupBy } = slo;
   const instanceId =
     'instanceId' in slo && slo.instanceId !== ALL_VALUE ? slo.instanceId : undefined;
   const hasGroupBy = [groupBy].flat().some((group) => group !== ALL_VALUE);
 
-  const modalTitleId = useGeneratedHtmlId();
-
-  const { mutateAsync: deleteSloInstance, isLoading: isDeleteInstanceLoading } =
-    useDeleteSloInstance();
-  const { mutateAsync: deleteSlo, isLoading: isDeleteLoading } = useDeleteSlo();
-
   const [isDeleteRollupDataChecked, toggleDeleteRollupDataSwitch] = useState<boolean>(false);
   const onDeleteRollupDataSwitchChange = () =>
     toggleDeleteRollupDataSwitch(!isDeleteRollupDataChecked);
 
-  const handleDeleteInstance = async () => {
-    // @ts-ignore
-    await deleteSloInstance({ slo, excludeRollup: isDeleteRollupDataChecked === false });
-    onSuccess();
-  };
-
-  const handleDeleteAll = async () => {
-    await deleteSlo({ id: slo.id, name: slo.name });
-    onSuccess();
-  };
-
   return (
     <EuiModal aria-labelledby={modalTitleId} onClose={onCancel}>
       <EuiModalHeader>
@@ -69,7 +56,7 @@ export function SloDeleteModal({ slo, onCancel, onSuccess }: Props) {
       <EuiModalBody>
         {hasGroupBy && instanceId ? (
           <EuiForm component="form">
-            <EuiFlexItem grow style={{ marginBottom: '2rem' }}>
+            <EuiFlexItem grow css={{ marginBottom: '2rem' }}>
               <FormattedMessage
                 id="xpack.slo.deleteConfirmationModal.groupByDisclaimerText"
                 defaultMessage="This SLO is an instance of many SLO instances."
@@ -97,7 +84,6 @@ export function SloDeleteModal({ slo, onCancel, onSuccess }: Props) {
         <EuiButtonEmpty
           data-test-subj="observabilitySolutionSloDeleteModalCancelButton"
           onClick={onCancel}
-          disabled={isDeleteLoading || isDeleteInstanceLoading}
         >
           <FormattedMessage
             id="xpack.slo.deleteConfirmationModal.cancelButtonLabel"
@@ -110,8 +96,13 @@ export function SloDeleteModal({ slo, onCancel, onSuccess }: Props) {
             data-test-subj="observabilitySolutionSloDeleteModalConfirmButton"
             type="submit"
             color="danger"
-            onClick={handleDeleteInstance}
-            disabled={isDeleteLoading || isDeleteInstanceLoading}
+            onClick={() => {
+              deleteSloInstance({
+                slo: { id: slo.id, instanceId, name: slo.name },
+                excludeRollup: isDeleteRollupDataChecked === false,
+              });
+              onConfirm();
+            }}
             fill
           >
             <FormattedMessage
@@ -125,8 +116,10 @@ export function SloDeleteModal({ slo, onCancel, onSuccess }: Props) {
           data-test-subj="observabilitySolutionSloDeleteModalConfirmButton"
           type="submit"
           color="danger"
-          onClick={handleDeleteAll}
-          disabled={isDeleteLoading || isDeleteInstanceLoading}
+          onClick={() => {
+            deleteSlo({ id: slo.id, name: slo.name });
+            onConfirm();
+          }}
           fill
         >
           {hasGroupBy && instanceId ? (

x-pack/solutions/observability/plugins/slo/public/components/slo/disable_confirmation_modal/slo_disable_confirmation_modal.tsx

@@ -9,23 +9,23 @@ import { EuiConfirmModal } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { SLODefinitionResponse, SLOWithSummaryResponse } from '@kbn/slo-schema';
 import React from 'react';
+import { useDisableSlo } from '../../../hooks/use_disable_slo';
 
 export interface Props {
   slo: SLOWithSummaryResponse | SLODefinitionResponse;
   onCancel: () => void;
   onConfirm: () => void;
-  isLoading?: boolean;
 }
 
-export function SloDisableConfirmationModal({ slo, onCancel, onConfirm, isLoading }: Props) {
-  const { name } = slo;
+export function SloDisableConfirmationModal({ slo, onCancel, onConfirm }: Props) {
+  const { mutate: disableSlo } = useDisableSlo();
   return (
     <EuiConfirmModal
       buttonColor="primary"
       data-test-subj="sloDisableConfirmationModal"
       title={i18n.translate('xpack.slo.disableConfirmationModal.title', {
         defaultMessage: 'Disable {name}?',
-        values: { name },
+        values: { name: slo.name },
       })}
       cancelButtonText={i18n.translate('xpack.slo.disableConfirmationModal.cancelButtonLabel', {
         defaultMessage: 'Cancel',
@@ -34,8 +34,10 @@ export function SloDisableConfirmationModal({ slo, onCancel, onConfirm, isLoadin
         defaultMessage: 'Disable',
       })}
       onCancel={onCancel}
-      onConfirm={onConfirm}
-      isLoading={isLoading}
+      onConfirm={() => {
+        disableSlo({ id: slo.id, name: slo.name });
+        onConfirm();
+      }}
     >
       {i18n.translate('xpack.slo.disableConfirmationModal.descriptionText', {
         defaultMessage: 'Disabling this SLO will stop generating data until it is enabled again.',

x-pack/solutions/observability/plugins/slo/public/components/slo/enable_confirmation_modal/slo_enable_confirmation_modal.tsx

@@ -9,23 +9,24 @@ import { EuiConfirmModal } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { SLODefinitionResponse, SLOWithSummaryResponse } from '@kbn/slo-schema';
 import React from 'react';
+import { useEnableSlo } from '../../../hooks/use_enable_slo';
 
 export interface Props {
   slo: SLOWithSummaryResponse | SLODefinitionResponse;
   onCancel: () => void;
   onConfirm: () => void;
-  isLoading?: boolean;
 }
 
-export function SloEnableConfirmationModal({ slo, onCancel, onConfirm, isLoading }: Props) {
-  const { name } = slo;
+export function SloEnableConfirmationModal({ slo, onCancel, onConfirm }: Props) {
+  const { mutate: enableSlo } = useEnableSlo();
+
   return (
     <EuiConfirmModal
       buttonColor="primary"
       data-test-subj="sloEnableConfirmationModal"
       title={i18n.translate('xpack.slo.enableConfirmationModal.title', {
         defaultMessage: 'Enable {name}?',
-        values: { name },
+        values: { name: slo.name },
       })}
       cancelButtonText={i18n.translate('xpack.slo.enableConfirmationModal.cancelButtonLabel', {
         defaultMessage: 'Cancel',
@@ -34,8 +35,10 @@ export function SloEnableConfirmationModal({ slo, onCancel, onConfirm, isLoading
         defaultMessage: 'Enable',
       })}
       onCancel={onCancel}
-      onConfirm={onConfirm}
-      isLoading={isLoading}
+      onConfirm={() => {
+        enableSlo({ id: slo.id, name: slo.name });
+        onConfirm();
+      }}
     >
       {i18n.translate('xpack.slo.enableConfirmationModal.descriptionText', {
         defaultMessage: 'Enabling this SLO will generate the missing data since it was disabled.',

x-pack/solutions/observability/plugins/slo/public/components/slo/reset_confirmation_modal/slo_reset_confirmation_modal.tsx

@@ -9,28 +9,27 @@ import { EuiConfirmModal } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { SLODefinitionResponse, SLOWithSummaryResponse } from '@kbn/slo-schema';
 import React from 'react';
+import { useResetSlo } from '../../../hooks/use_reset_slo';
 
 export interface SloResetConfirmationModalProps {
   slo: SLOWithSummaryResponse | SLODefinitionResponse;
   onCancel: () => void;
   onConfirm: () => void;
-  isLoading?: boolean;
 }
 
 export function SloResetConfirmationModal({
   slo,
   onCancel,
   onConfirm,
-  isLoading,
 }: SloResetConfirmationModalProps) {
-  const { name } = slo;
+  const { mutate: resetSlo } = useResetSlo();
   return (
     <EuiConfirmModal
       buttonColor="danger"
       data-test-subj="sloResetConfirmationModal"
       title={i18n.translate('xpack.slo.resetConfirmationModal.title', {
         defaultMessage: 'Reset {name}?',
-        values: { name },
+        values: { name: slo.name },
       })}
       cancelButtonText={i18n.translate('xpack.slo.resetConfirmationModal.cancelButtonLabel', {
         defaultMessage: 'Cancel',
@@ -39,8 +38,10 @@ export function SloResetConfirmationModal({
         defaultMessage: 'Reset',
       })}
       onCancel={onCancel}
-      onConfirm={onConfirm}
-      isLoading={isLoading}
+      onConfirm={() => {
+        resetSlo({ id: slo.id, name: slo.name });
+        onConfirm();
+      }}
     >
       {i18n.translate('xpack.slo.resetConfirmationModal.descriptionText', {
         defaultMessage: 'Resetting this SLO will also regenerate the historical data.',