Skip to content

Commit

Permalink
[ResponseOps][Alerting] Update the size of the input labels for the E…
Browse files Browse the repository at this point in the history 
…S query and index threshold rule (#174137)

Resolves #173857

## Summary

Updates the size of the input labels for the ES query and index
threshold rules.
It is helpful to hide whitespace when reviewing the code changes.

**KQL**
<img width="618" alt="Screen Shot 2024-01-03 at 10 03 36 AM"
src="https://github.com/elastic/kibana/assets/109488926/0079f54e-d367-43cd-94e4-1004c8351d0a">

**Query DSL**
<img width="615" alt="Screen Shot 2024-01-03 at 10 04 06 AM"
src="https://github.com/elastic/kibana/assets/109488926/60ac7148-7e4e-4be5-bc82-de99e91a5d9e">

**ES|QL**
<img width="616" alt="Screen Shot 2024-01-03 at 10 04 35 AM"
src="https://github.com/elastic/kibana/assets/109488926/bddd3c2b-42eb-43ec-b4f4-76df0138834d">

**Index Threshold**
<img width="617" alt="Screen Shot 2024-01-03 at 10 02 29 AM"
src="https://github.com/elastic/kibana/assets/109488926/afc20b9d-73c6-4f74-bb9d-a980f488cecd">
  • Loading branch information
@doakalexi
doakalexi authored Jan 4, 2024
1 parent effd9e7 commit e4cac37
Show file tree
Hide file tree
Showing 6 changed files with 196 additions and 222 deletions.
69 changes: 32 additions & 37 deletions x-pack/plugins/stack_alerts/public/rule_types/components/source_fields_select.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

import React, { useEffect, useState } from 'react';
import { uniqBy } from 'lodash';
import { EuiComboBox, EuiFormRow, EuiSpacer, EuiTitle } from '@elastic/eui';
import { EuiComboBox, EuiFormRow } from '@elastic/eui';
import { FieldOption } from '@kbn/triggers-actions-ui-plugin/public/common';
import { IErrorObject } from '@kbn/triggers-actions-ui-plugin/public';
import { FormattedMessage } from '@kbn/i18n-react';
Expand Down Expand Up @@ -77,44 +77,39 @@ export const SourceFields: React.FC<SourceFieldsProps> = ({
fullWidth
isInvalid={errors.length > 0 && sourceFields !== undefined}
error={errors}
label={
<FormattedMessage
id="xpack.stackAlerts.components.ui.sourceFieldsSelect.title"
defaultMessage="Add more fields to alert details"
/>
}
>
<>
<EuiTitle size="xs">
<h5>
<FormattedMessage
id="xpack.stackAlerts.components.ui.sourceFieldsSelect.title"
defaultMessage="Add more fields to alert details"
/>
</h5>
</EuiTitle>
<EuiSpacer size="s" />
<EuiComboBox
fullWidth
placeholder={i18n.translate(
'xpack.stackAlerts.components.ui.sourceFieldsSelect.placeholder',
{
defaultMessage: 'Select fields',
<EuiComboBox
fullWidth
placeholder={i18n.translate(
'xpack.stackAlerts.components.ui.sourceFieldsSelect.placeholder',
{
defaultMessage: 'Select fields',
}
)}
data-test-subj="sourceFields"
isInvalid={errors.length > 0 && sourceFields !== undefined}
selectedOptions={(sourceFields || []).map((f) => ({
label: f.label,
value: f.searchPath,
'data-test-subj': `option-${f.label}`,
}))}
onChange={(options) => {
const fields: SourceField[] = [];
options.forEach((f) => {
if (f.value) {
fields.push({ label: f.label, searchPath: f.value });
}
)}
data-test-subj="sourceFields"
isInvalid={errors.length > 0 && sourceFields !== undefined}
selectedOptions={(sourceFields || []).map((f) => ({
label: f.label,
value: f.searchPath,
'data-test-subj': `option-${f.label}`,
}))}
onChange={(options) => {
const fields: SourceField[] = [];
options.forEach((f) => {
if (f.value) {
fields.push({ label: f.label, searchPath: f.value });
}
});
onChangeSourceFields(fields);
}}
options={sourceFieldsOptions}
/>
</>
});
onChangeSourceFields(fields);
}}
options={sourceFieldsOptions}
/>
</EuiFormRow>
) : null;
};
95 changes: 45 additions & 50 deletions x-pack/plugins/stack_alerts/public/rule_types/es_query/expression/es_query_expression.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { lastValueFrom } from 'rxjs';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';

import { EuiFormRow, EuiLink, EuiSpacer, EuiTitle } from '@elastic/eui';
import { EuiFormRow, EuiLink, EuiSpacer } from '@elastic/eui';

import { XJson } from '@kbn/es-ui-shared-plugin/public';
import { CodeEditor } from '@kbn/kibana-react-plugin/public';
Expand Down Expand Up @@ -195,60 +195,49 @@ export const EsQueryExpression: React.FC<

return (
<Fragment>
<EuiTitle size="xs">
<h5>
<EuiFormRow
fullWidth
label={
<FormattedMessage
id="xpack.stackAlerts.esQuery.ui.selectIndexPrompt"
defaultMessage="Select indices"
/>
</h5>
</EuiTitle>

<EuiSpacer size="s" />

<IndexSelectPopover
index={index}
data-test-subj="indexSelectPopover"
esFields={esFields}
timeField={timeField}
errors={errors}
onIndexChange={async (indices: string[]) => {
setParam('index', indices);

// reset expression fields if indices are deleted
if (indices.length === 0) {
setRuleProperty('params', {
timeField: ruleParams.timeField,
index: indices,
esQuery: DEFAULT_VALUES.QUERY,
size: DEFAULT_VALUES.SIZE,
thresholdComparator: DEFAULT_VALUES.THRESHOLD_COMPARATOR,
timeWindowSize: DEFAULT_VALUES.TIME_WINDOW_SIZE,
timeWindowUnit: DEFAULT_VALUES.TIME_WINDOW_UNIT,
threshold: DEFAULT_VALUES.THRESHOLD,
aggType: DEFAULT_VALUES.AGGREGATION_TYPE,
groupBy: DEFAULT_VALUES.GROUP_BY,
termSize: DEFAULT_VALUES.TERM_SIZE,
searchType: SearchType.esQuery,
excludeHitsFromPreviousRun: DEFAULT_VALUES.EXCLUDE_PREVIOUS_HITS,
sourceFields: undefined,
});
} else {
await refreshEsFields(indices);
}
}}
onTimeFieldChange={(updatedTimeField: string) => setParam('timeField', updatedTimeField)}
/>
<EuiSpacer size="s" />
}
>
<IndexSelectPopover
index={index}
data-test-subj="indexSelectPopover"
esFields={esFields}
timeField={timeField}
errors={errors}
onIndexChange={async (indices: string[]) => {
setParam('index', indices);

<EuiTitle size="xs">
<h5>
<FormattedMessage
id="xpack.stackAlerts.esQuery.ui.defineQueryPrompt"
defaultMessage="Define your query using Query DSL"
/>
</h5>
</EuiTitle>
// reset expression fields if indices are deleted
if (indices.length === 0) {
setRuleProperty('params', {
timeField: ruleParams.timeField,
index: indices,
esQuery: DEFAULT_VALUES.QUERY,
size: DEFAULT_VALUES.SIZE,
thresholdComparator: DEFAULT_VALUES.THRESHOLD_COMPARATOR,
timeWindowSize: DEFAULT_VALUES.TIME_WINDOW_SIZE,
timeWindowUnit: DEFAULT_VALUES.TIME_WINDOW_UNIT,
threshold: DEFAULT_VALUES.THRESHOLD,
aggType: DEFAULT_VALUES.AGGREGATION_TYPE,
groupBy: DEFAULT_VALUES.GROUP_BY,
termSize: DEFAULT_VALUES.TERM_SIZE,
searchType: SearchType.esQuery,
excludeHitsFromPreviousRun: DEFAULT_VALUES.EXCLUDE_PREVIOUS_HITS,
sourceFields: undefined,
});
} else {
await refreshEsFields(indices);
}
}}
onTimeFieldChange={(updatedTimeField: string) => setParam('timeField', updatedTimeField)}
/>
</EuiFormRow>
<EuiSpacer size="s" />
<EuiFormRow
id="queryEditor"
Expand All @@ -264,6 +253,12 @@ export const EsQueryExpression: React.FC<
/>
</EuiLink>
}
label={
<FormattedMessage
id="xpack.stackAlerts.esQuery.ui.defineQueryPrompt"
defaultMessage="Define your query using Query DSL"
/>
}
>
<CodeEditor
languageId="xjson"
Expand Down
46 changes: 20 additions & 26 deletions x-pack/plugins/stack_alerts/public/rule_types/es_query/expression/esql_query_expression.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import {
EuiFormRow,
EuiSelect,
EuiSpacer,
EuiTitle,
} from '@elastic/eui';
import { getFields, RuleTypeParamsExpressionProps } from '@kbn/triggers-actions-ui-plugin/public';
import { TextBasedLangEditor } from '@kbn/text-based-languages/public';
Expand Down Expand Up @@ -180,16 +179,17 @@ export const EsqlQueryExpression: React.FC<

return (
<Fragment>
<EuiTitle size="xs">
<h5>
<EuiFormRow
id="queryEditor"
data-test-subj="queryEsqlEditor"
fullWidth
label={
<FormattedMessage
id="xpack.stackAlerts.esQuery.ui.defineEsqlQueryPrompt"
defaultMessage="Define your query using ES|QL"
/>
</h5>
</EuiTitle>
<EuiSpacer size="s" />
<EuiFormRow id="queryEditor" data-test-subj="queryEsqlEditor" fullWidth>
}
>
<TextBasedLangEditor
query={query}
onTextLangQueryChange={debounce((q: AggregateQuery) => {
Expand All @@ -215,20 +215,17 @@ export const EsqlQueryExpression: React.FC<
errors={errors.sourceFields}
/>
<EuiSpacer />
<EuiTitle size="xs">
<h5>
<FormattedMessage
id="xpack.stackAlerts.esQuery.ui.selectEsqlQueryTimeFieldPrompt"
defaultMessage="Select a time field"
/>
</h5>
</EuiTitle>
<EuiSpacer size="s" />
<EuiFormRow
id="timeField"
fullWidth
isInvalid={errors.timeField.length > 0 && timeField !== undefined}
error={errors.timeField}
label={
<FormattedMessage
id="xpack.stackAlerts.esQuery.ui.selectEsqlQueryTimeFieldPrompt"
defaultMessage="Select a time field"
/>
}
>
<EuiSelect
options={timeFieldOptions}
Expand All @@ -243,21 +240,18 @@ export const EsqlQueryExpression: React.FC<
/>
</EuiFormRow>
<EuiSpacer />
<EuiTitle size="xs">
<h5>
<FormattedMessage
id="xpack.stackAlerts.esQuery.ui.setEsqlQueryTimeWindowPrompt"
defaultMessage="Set the time window"
/>
</h5>
</EuiTitle>
<EuiSpacer size="s" />
<EuiFlexGroup>
<EuiFlexGroup alignItems="flexEnd">
<EuiFlexItem grow={false}>
<EuiFormRow
id="timeWindowSize"
isInvalid={errors.timeWindowSize.length > 0}
error={errors.timeWindowSize}
label={
<FormattedMessage
id="xpack.stackAlerts.esQuery.ui.setEsqlQueryTimeWindowPrompt"
defaultMessage="Set the time window"
/>
}
>
<EuiFieldNumber
name="timeWindowSize"
Expand Down
27 changes: 14 additions & 13 deletions ...gins/stack_alerts/public/rule_types/es_query/expression/search_source_expression_form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import deepEqual from 'fast-deep-equal';
import { lastValueFrom } from 'rxjs';
import type { Filter, Query } from '@kbn/es-query';
import { FormattedMessage } from '@kbn/i18n-react';
import { EuiSpacer, EuiTitle } from '@elastic/eui';
import { EuiFormRow, EuiSpacer, EuiTitle } from '@elastic/eui';
import { IErrorObject } from '@kbn/triggers-actions-ui-plugin/public';
import type { SearchBarProps } from '@kbn/unified-search-plugin/public';
import type { DataView } from '@kbn/data-views-plugin/public';
Expand Down Expand Up @@ -300,22 +300,23 @@ export const SearchSourceExpressionForm = (props: SearchSourceExpressionFormProp

return (
<Fragment>
<EuiTitle size="xs">
<h5>
<EuiFormRow
fullWidth
label={
<FormattedMessage
id="xpack.stackAlerts.esQuery.ui.selectDataViewPrompt"
defaultMessage="Select a data view"
/>
</h5>
</EuiTitle>
<EuiSpacer size="s" />
<DataViewSelectPopover
dependencies={{ dataViews, dataViewEditor }}
dataView={dataView}
metadata={props.metadata}
onSelectDataView={onSelectDataView}
onChangeMetaData={props.onChangeMetaData}
/>
}
>
<DataViewSelectPopover
dependencies={{ dataViews, dataViewEditor }}
dataView={dataView}
metadata={props.metadata}
onSelectDataView={onSelectDataView}
onChangeMetaData={props.onChangeMetaData}
/>
</EuiFormRow>
{Boolean(dataView?.id) && (
<>
<EuiSpacer size="s" />
Expand Down
Loading

0 comments on commit e4cac37

Please sign in to comment.