Add Create Rule from SLO List item (#154800)

x-pack/plugins/observability/public/pages/slos/components/slo_list_item.tsx

@@ -25,6 +25,7 @@ import { ActiveAlerts } from '../../../hooks/slo/use_fetch_active_alerts';
 import { useCapabilities } from '../../../hooks/slo/use_capabilities';
 import { useKibana } from '../../../utils/kibana_react';
 import { useCloneSlo } from '../../../hooks/slo/use_clone_slo';
+import { useGetFilteredRuleTypes } from '../../../hooks/use_get_filtered_rule_types';
 import { SloSummary } from './slo_summary';
 import { SloDeleteConfirmationModal } from './slo_delete_confirmation_modal';
 import { SloBadges } from './badges/slo_badges';
@@ -32,6 +33,8 @@ import {
   transformSloResponseToCreateSloInput,
   transformValuesToCreateSLOInput,
 } from '../../slo_edit/helpers/process_slo_form_values';
+import { SLO_BURN_RATE_RULE_ID } from '../../../../common/constants';
+import { sloFeatureId } from '../../../../common';
 import { paths } from '../../../config/paths';
 
 export interface SloListItemProps {
@@ -50,13 +53,17 @@ export function SloListItem({
   const {
     application: { navigateToUrl },
     http: { basePath },
+    triggersActionsUi: { getAddRuleFlyout: AddRuleFlyout },
   } = useKibana().services;
   const { hasWriteCapabilities } = useCapabilities();
 
+  const filteredRuleTypes = useGetFilteredRuleTypes();
+
   const { mutate: cloneSlo } = useCloneSlo();
   const isDeletingSlo = Boolean(useIsMutating(['deleteSlo', slo.id]));
 
   const [isActionsPopoverOpen, setIsActionsPopoverOpen] = useState(false);
+  const [isAddRuleFlyoutOpen, setIsAddRuleFlyoutOpen] = useState(false);
   const [isDeleteConfirmationModalOpen, setDeleteConfirmationModalOpen] = useState(false);
 
   const handleClickActions = () => {
@@ -71,6 +78,11 @@ export function SloListItem({
     navigateToUrl(basePath.prepend(paths.observability.sloEdit(slo.id)));
   };
 
+  const handleCreateRule = () => {
+    setIsActionsPopoverOpen(false);
+    setIsAddRuleFlyoutOpen(true);
+  };
+
   const handleClone = () => {
     const newSlo = transformValuesToCreateSLOInput(
       transformSloResponseToCreateSloInput({ ...slo, name: `[Copy] ${slo.name}` })!
@@ -169,6 +181,17 @@ export function SloListItem({
                     defaultMessage: 'Edit',
                   })}
                 </EuiContextMenuItem>,
+                <EuiContextMenuItem
+                  key="createRule"
+                  icon="bell"
+                  disabled={!hasWriteCapabilities}
+                  onClick={handleCreateRule}
+                  data-test-subj="sloActionsCreateRule"
+                >
+                  {i18n.translate('xpack.observability.slo.slo.item.actions.createRule', {
+                    defaultMessage: 'Create Alert rule',
+                  })}
+                </EuiContextMenuItem>,
                 <EuiContextMenuItem
                   key="clone"
                   disabled={!hasWriteCapabilities}
@@ -200,6 +223,18 @@ export function SloListItem({
       {isDeleteConfirmationModalOpen ? (
         <SloDeleteConfirmationModal slo={slo} onCancel={handleDeleteCancel} />
       ) : null}
+
+      {isAddRuleFlyoutOpen ? (
+        <AddRuleFlyout
+          consumer={sloFeatureId}
+          filteredRuleTypes={filteredRuleTypes}
+          ruleTypeId={SLO_BURN_RATE_RULE_ID}
+          initialValues={{ name: `${slo.name} Burn Rate rule`, params: { sloId: slo.id } }}
+          onClose={() => {
+            setIsAddRuleFlyoutOpen(false);
+          }}
+        />
+      ) : null}
     </EuiPanel>
   );
 }

x-pack/plugins/observability/public/pages/slos/slos.test.tsx

@@ -60,6 +60,7 @@ useDeleteSloMock.mockReturnValue({ mutate: mockDeleteSlo });
 const mockNavigate = jest.fn();
 const mockAddSuccess = jest.fn();
 const mockAddError = jest.fn();
+const mockGetAddRuleFlyout = jest.fn().mockReturnValue(() => <div>Add rule flyout</div>);
 
 const mockKibana = () => {
   useKibanaMock.mockReturnValue({
@@ -77,6 +78,7 @@ const mockKibana = () => {
           addError: mockAddError,
         },
       },
+      triggersActionsUi: { getAddRuleFlyout: mockGetAddRuleFlyout },
       uiSettings: {
         get: (settings: string) => {
           if (settings === 'dateFormat') return 'YYYY-MM-DD';
@@ -199,6 +201,31 @@ describe('SLOs Page', () => {
         expect(mockNavigate).toBeCalled();
       });
 
+      it('allows creating a new rule for an SLO', async () => {
+        useFetchSloListMock.mockReturnValue({ isLoading: false, sloList });
+
+        useFetchHistoricalSummaryMock.mockReturnValue({
+          isLoading: false,
+          sloHistoricalSummaryResponse: historicalSummaryData,
+        });
+
+        await act(async () => {
+          render(<SlosPage />);
+        });
+
+        screen.getAllByLabelText('Actions').at(0)?.click();
+
+        await waitForEuiPopoverOpen();
+
+        const button = screen.getByTestId('sloActionsCreateRule');
+
+        expect(button).toBeTruthy();
+
+        button.click();
+
+        expect(mockGetAddRuleFlyout).toBeCalled();
+      });
+
       it('allows deleting an SLO', async () => {
         useFetchSloListMock.mockReturnValue({ isLoading: false, sloList });