Skip to content

Commit

Permalink
[Rules migration] Improvements & fixes (elastic#206285)
Browse files Browse the repository at this point in the history
## Summary

[Internal link](elastic/security-team#10820)
to the feature details

This PR includes next improvements and fixes

### Improvements

1. Update copies across SIEM migrations feature
2. Add technical preview icon
3. Rename "Dismiss" to "Close" button within the flyout
4. Add simplified version of the ES|QL editor

### Fixes

1. Disable Overview tab for untranslated rules
2. Use "code block" instead of "markdown" to display queries
3. Show "Install and enable" button for translations that matched
elastic prebuilt rules only
4. Allow user to open installed rule details in a separate tab

> [!NOTE]  
> This feature needs `siemMigrationsEnabled` experimental flag enabled
to work.

---------

Co-authored-by: kibanamachine <[email protected]>
  • Loading branch information
e40pud and kibanamachine authored Jan 14, 2025
1 parent c964c58 commit 3a95bec
Show file tree
Hide file tree
Showing 28 changed files with 338 additions and 146 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -342,10 +342,6 @@ export const UpdateRuleMigrationData = z.object({
* The migrated elastic rule attributes to update.
*/
elastic_rule: ElasticRulePartial.optional(),
/**
* The rule translation result.
*/
translation_result: RuleMigrationTranslationResult.optional(),
/**
* The comments for the migration including a summary from the LLM in markdown.
*/
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -313,9 +313,6 @@ components:
elastic_rule:
description: The migrated elastic rule attributes to update.
$ref: '#/components/schemas/ElasticRulePartial'
translation_result:
description: The rule translation result.
$ref: '#/components/schemas/RuleMigrationTranslationResult'
comments:
description: The comments for the migration including a summary from the LLM in markdown.
$ref: '#/components/schemas/RuleMigrationComments'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,8 @@
"usageCollection",
"lists",
"ml",
"unifiedSearch"
"unifiedSearch",
"esql"
],
"extraPublicDirs": [
"common"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ export const EXCEPTIONS = i18n.translate('xpack.securitySolution.navigation.exce
export const SIEM_MIGRATIONS_RULES = i18n.translate(
'xpack.securitySolution.navigation.siemMigrationsRules',
{
defaultMessage: 'SIEM Rules Migrations',
defaultMessage: 'SIEM Rule Migrations',
}
);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export const siemMigrationsLinks: LinkItem = {
id: SecurityPageName.siemMigrationsRules,
title: SIEM_MIGRATIONS_RULES,
description: i18n.translate('xpack.securitySolution.appLinks.siemMigrationsRulesDescription', {
defaultMessage: 'SIEM Rules Migrations.',
defaultMessage: 'SIEM Rule Migrations.',
}),
landingIcon: SiemMigrationsIcon,
path: SIEM_MIGRATIONS_RULES_PATH,
Expand All @@ -28,8 +28,9 @@ export const siemMigrationsLinks: LinkItem = {
hideTimeline: true,
globalSearchKeywords: [
i18n.translate('xpack.securitySolution.appLinks.siemMigrationsRules', {
defaultMessage: 'SIEM Rules Migrations',
defaultMessage: 'SIEM Rule Migrations',
}),
],
experimentalKey: 'siemMigrationsEnabled',
isBeta: true,
};
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
import React, { useMemo } from 'react';

import type { EuiComboBoxOptionOption } from '@elastic/eui';
import { EuiComboBox, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { EuiComboBox, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui';
import * as i18n from './translations';
import type { RuleMigrationStats } from '../../types';

Expand Down Expand Up @@ -67,6 +67,10 @@ export const HeaderButtons: React.FC<HeaderButtonsProps> = React.memo(
return (
<EuiFlexGroup alignItems="center" gutterSize="s" responsive={false} wrap={true}>
<EuiFlexItem grow={false}>
<EuiTitle size="xxxs">
<h6>{i18n.SIEM_MIGRATIONS_OPTION_TITLE}</h6>
</EuiTitle>
<EuiSpacer size="xs" />
<EuiComboBox
aria-label={i18n.SIEM_MIGRATIONS_OPTION_AREAL_LABEL}
onChange={onChange}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,13 @@

import { i18n } from '@kbn/i18n';

export const SIEM_MIGRATIONS_OPTION_TITLE = i18n.translate(
'xpack.securitySolution.siemMigrations.rules.selectionOption.title',
{
defaultMessage: 'Migrations',
}
);

export const SIEM_MIGRATIONS_OPTION_AREAL_LABEL = i18n.translate(
'xpack.securitySolution.siemMigrations.rules.selectionOption.arealLabel',
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import {
} from '@elastic/eui';
import type { EuiTabbedContentTab, EuiTabbedContentProps, EuiFlyoutProps } from '@elastic/eui';

import { RuleTranslationResult } from '../../../../../common/siem_migrations/constants';
import type { RuleMigration } from '../../../../../common/siem_migrations/model/rule_migration.gen';
import { useAppToasts } from '../../../../common/hooks/use_app_toasts';
import {
Expand Down Expand Up @@ -111,6 +112,7 @@ export const MigrationRuleDetailsFlyout: React.FC<MigrationRuleDetailsFlyoutProp
elastic_rule: {
title: ruleName,
query: ruleQuery,
query_language: 'esql',
},
},
]);
Expand Down Expand Up @@ -170,8 +172,15 @@ export const MigrationRuleDetailsFlyout: React.FC<MigrationRuleDetailsFlyoutProp
)}
</TabContentPadding>
),
disabled: ruleMigration.translation_result === RuleTranslationResult.UNTRANSLATABLE,
}),
[ruleDetailsToOverview, size, expandedOverviewSections, toggleOverviewSection]
[
ruleDetailsToOverview,
size,
expandedOverviewSections,
toggleOverviewSection,
ruleMigration.translation_result,
]
);

const summaryTab: EuiTabbedContentTab = useMemo(
Expand Down Expand Up @@ -255,7 +264,7 @@ export const MigrationRuleDetailsFlyout: React.FC<MigrationRuleDetailsFlyoutProp
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiButtonEmpty onClick={closeFlyout} flush="left">
{i18n.DISMISS_BUTTON_LABEL}
{i18n.CLOSE_BUTTON_LABEL}
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>{ruleActions}</EuiFlexItem>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
/*
* 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, { useMemo } from 'react';
import type { FieldValueQueryBar } from '../../../../../../../detection_engine/rule_creation_ui/components/query_bar_field';
import { UseField } from '../../../../../../../shared_imports';
import { EsqlEditorField } from './esql_editor_field';
import type { RuleTranslationSchema } from '../types';

interface EsqlEditorFieldProps {
path: string;
}

export const EsqlEditor: React.FC<EsqlEditorFieldProps> = React.memo(({ path }) => {
const componentProps = useMemo(
() => ({
idAria: 'ruleEsqlQueryBar',
dataTestSubj: 'ruleEsqlQueryBar',
}),
[]
);

return (
<UseField<FieldValueQueryBar, RuleTranslationSchema>
path={path}
component={EsqlEditorField}
componentProps={componentProps}
/>
);
});
EsqlEditor.displayName = 'EsqlEditor';
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
/*
* 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, { useCallback } from 'react';
import deepEqual from 'fast-deep-equal';
import { EuiFormRow } from '@elastic/eui';
import { ESQLLangEditor } from '@kbn/esql/public';
import type { AggregateQuery } from '@kbn/es-query';
import { convertToQueryType } from '../../../../../../../common/components/query_bar/convert_to_query_type';
import type { FieldValueQueryBar } from '../../../../../../../detection_engine/rule_creation_ui/components/query_bar_field';
import type { FieldHook } from '../../../../../../../shared_imports';

interface EsqlEditorFieldProps {
field: FieldHook<FieldValueQueryBar>;
idAria?: string;
dataTestSubj: string;
}

export const EsqlEditorField: React.FC<EsqlEditorFieldProps> = React.memo(
({ field, idAria, dataTestSubj }) => {
const { value: fieldValue, setValue: setFieldValue } = field;

const onQueryChange = useCallback(
(newQuery: AggregateQuery) => {
const { query } = fieldValue;
if (!deepEqual(query, newQuery)) {
const esqlQuery = convertToQueryType(newQuery);
setFieldValue({ ...fieldValue, query: esqlQuery });
}
},
[fieldValue, setFieldValue]
);

const onQuerySubmit = useCallback(
async (newQuery?: AggregateQuery) => {
if (newQuery) {
onQueryChange(newQuery);
}
},
[onQueryChange]
);

return (
<EuiFormRow
fullWidth
data-test-subj={dataTestSubj}
describedByIds={idAria ? [idAria] : undefined}
>
<ESQLLangEditor
query={{ esql: fieldValue.query.query as string }}
onTextLangQueryChange={onQueryChange}
onTextLangQuerySubmit={onQuerySubmit}
hideRunQueryText={true}
disableSubmitAction={true}
hideTimeFilterInfo={true}
hideQueryHistory={true}
hasOutline={true}
/>
</EuiFormRow>
);
}
);
EsqlEditorField.displayName = 'EsqlEditorField';
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,4 @@
* 2.0.
*/

import { i18n } from '@kbn/i18n';

export const PAGE_TITLE = i18n.translate('xpack.securitySolution.siemMigrations.rules.pageTitle', {
defaultMessage: 'Translated rules',
});
export * from './esql_editor';
Original file line number Diff line number Diff line change
Expand Up @@ -42,15 +42,36 @@ export const TranslationTab: React.FC<TranslationTabProps> = React.memo(
const isInstalled = !!ruleMigration.elastic_rule?.id;
const canEdit = !matchedPrebuiltRule && !isInstalled;

const ruleName = matchedPrebuiltRule?.name ?? ruleMigration.elastic_rule?.title;
const originalQuery = ruleMigration.original_rule.query;
const elasticQuery = useMemo(() => {
let query = ruleMigration.elastic_rule?.query;
const originalRuleQueryComponent = useMemo(() => {
return (
<MigrationRuleQuery
title={i18n.SPLUNK_QUERY_TITLE}
ruleName={ruleMigration.original_rule.title}
query={ruleMigration.original_rule.query}
queryLanguage={ruleMigration.original_rule.query_language}
canEdit={false}
/>
);
}, [ruleMigration]);

const translatedRuleQueryComponent = useMemo(() => {
let translatedQuery = ruleMigration.elastic_rule?.query ?? '';
let translatedQueryLanguage = ruleMigration.elastic_rule?.query_language ?? '';
if (matchedPrebuiltRule && matchedPrebuiltRule.type !== 'machine_learning') {
query = matchedPrebuiltRule.query;
translatedQuery = matchedPrebuiltRule.query ?? '';
translatedQueryLanguage = matchedPrebuiltRule.language;
}
return query ?? '';
}, [matchedPrebuiltRule, ruleMigration.elastic_rule?.query]);
return (
<MigrationRuleQuery
title={i18n.ESQL_TRANSLATION_TITLE}
ruleName={matchedPrebuiltRule?.name ?? ruleMigration.elastic_rule?.title}
query={translatedQuery}
queryLanguage={translatedQueryLanguage}
canEdit={canEdit}
onTranslationUpdate={onTranslationUpdate}
/>
);
}, [canEdit, matchedPrebuiltRule, onTranslationUpdate, ruleMigration]);

return (
<>
Expand Down Expand Up @@ -96,30 +117,15 @@ export const TranslationTab: React.FC<TranslationTabProps> = React.memo(
</EuiSplitPanel.Inner>
<EuiSplitPanel.Inner grow>
<EuiFlexGroup gutterSize="s" alignItems="flexStart">
<EuiFlexItem grow={1}>
<MigrationRuleQuery
title={i18n.SPLUNK_QUERY_TITLE}
ruleName={ruleMigration.original_rule.title}
query={originalQuery}
canEdit={false}
/>
</EuiFlexItem>
<EuiFlexItem grow={1}>{originalRuleQueryComponent}</EuiFlexItem>
<EuiFlexItem
grow={0}
css={css`
align-self: stretch;
border-right: ${euiTheme.border.thin};
`}
/>
<EuiFlexItem grow={1}>
<MigrationRuleQuery
title={i18n.ESQL_TRANSLATION_TITLE}
ruleName={ruleName}
query={elasticQuery}
canEdit={canEdit}
onTranslationUpdate={onTranslationUpdate}
/>
</EuiFlexItem>
<EuiFlexItem grow={1}>{translatedRuleQueryComponent}</EuiFlexItem>
</EuiFlexGroup>
</EuiSplitPanel.Inner>
</EuiSplitPanel.Outer>
Expand Down
Loading

0 comments on commit 3a95bec

Please sign in to comment.