mirror of
https://github.com/elastic/kibana.git
synced 2025-06-27 18:51:07 -04:00
367ff8dbec
## Summary Part of #195211 Replaces the create/edit rule flyout with the new rule flyout <img width="1032" alt="Screenshot 2025-01-14 at 3 12 30 PM" src="https://github.com/user-attachments/assets/9cbcf4f8-1078-4f7e-a55a-aacc2d877a14" /> <img width="1383" alt="Screenshot 2025-01-14 at 3 12 52 PM" src="https://github.com/user-attachments/assets/2270d57b-9462-4898-9dd0-41baefcc02d4" /> Restores the confirmation prompt before canceling or saving a rule without actions defined. Also fixes most of the design papercuts in the Actions step: <img width="494" alt="Screenshot 2025-01-14 at 3 11 06 PM" src="https://github.com/user-attachments/assets/3cf21d43-88e0-4250-b290-a545e1ebdbcf" /> <img width="494" alt="Screenshot 2025-01-14 at 3 11 01 PM" src="https://github.com/user-attachments/assets/00ef3f95-c91b-4bb7-aead-a3e23c02f7df" /> ### Checklist - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
64 lines
2.3 KiB
TypeScript
64 lines
2.3 KiB
TypeScript
/*
|
|
* 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 React, { useState, useCallback } from 'react';
|
|
import { DataViewsPublicPluginStart } from '@kbn/data-views-plugin/public';
|
|
import { ChartsPluginStart } from '@kbn/charts-plugin/public';
|
|
import { DataPublicPluginStart } from '@kbn/data-plugin/public';
|
|
import { UnifiedSearchPublicPluginStart } from '@kbn/unified-search-plugin/public';
|
|
import { CoreStart } from '@kbn/core/public';
|
|
import { RuleFormFlyout } from '@kbn/response-ops-rule-form/flyout';
|
|
import { useKibana } from '@kbn/kibana-react-plugin/public';
|
|
import { EuiIcon, EuiFlexItem, EuiCard, EuiFlexGroup } from '@elastic/eui';
|
|
import { FieldsMetadataPublicStart } from '@kbn/fields-metadata-plugin/public';
|
|
|
|
import { AlertingExampleComponentParams } from '../application';
|
|
import { ALERTING_EXAMPLE_APP_ID } from '../../common/constants';
|
|
|
|
type KibanaDeps = {
|
|
dataViews: DataViewsPublicPluginStart;
|
|
charts: ChartsPluginStart;
|
|
data: DataPublicPluginStart;
|
|
unifiedSearch: UnifiedSearchPublicPluginStart;
|
|
fieldsMetadata: FieldsMetadataPublicStart;
|
|
} & CoreStart;
|
|
|
|
export const CreateAlert = ({
|
|
triggersActionsUi: { ruleTypeRegistry, actionTypeRegistry },
|
|
}: Pick<AlertingExampleComponentParams, 'triggersActionsUi'>) => {
|
|
const [ruleFlyoutVisible, setRuleFlyoutVisibility] = useState<boolean>(false);
|
|
|
|
const { services } = useKibana<KibanaDeps>();
|
|
|
|
const onCloseAlertFlyout = useCallback(
|
|
() => setRuleFlyoutVisibility(false),
|
|
[setRuleFlyoutVisibility]
|
|
);
|
|
|
|
return (
|
|
<EuiFlexGroup>
|
|
<EuiFlexItem grow={false}>
|
|
<EuiCard
|
|
icon={<EuiIcon size="xxl" type={`bell`} />}
|
|
title={`Create Rule`}
|
|
description="Create a new Rule based on one of our example Rule Types ."
|
|
onClick={() => setRuleFlyoutVisibility(true)}
|
|
/>
|
|
</EuiFlexItem>
|
|
<EuiFlexItem>
|
|
{ruleFlyoutVisible ? (
|
|
<RuleFormFlyout
|
|
plugins={{ ...services, ruleTypeRegistry, actionTypeRegistry }}
|
|
consumer={ALERTING_EXAMPLE_APP_ID}
|
|
onCancel={onCloseAlertFlyout}
|
|
onSubmit={onCloseAlertFlyout}
|
|
/>
|
|
) : null}
|
|
</EuiFlexItem>
|
|
</EuiFlexGroup>
|
|
);
|
|
};
|