Skip to content

Commit

Permalink
[Infra UI] When creating an alert for a host via the new host fly out…
Browse files Browse the repository at this point in the history 
… the filter cannot be updated (#165991)

Closes #165098

## Summary

This PR fixes an issue with the optional filter component (the user is
not able to clear the prefilled input - described in [the
issue](#165098 (comment)))
-
[commit](57b43b6).
I saw deprecated styled components used in the component I was adding
the fix so I also fixed those - in case there is a valid reason to keep
the old version I can remove the [second
commit](351d997).

## Testing 

Open create alert rule flyout from the Inventory page
- Create a rule without the optional filter
- Create a rule with a new optional filter

Open create alert rule flyout from the Hosts view page
- Create a rule without the optional filter
- Create a rule with a new optional filter


https://github.com/elastic/kibana/assets/14139027/8e9fb3f6-4774-4e06-9f49-16b83a60b7b6
  • Loading branch information
@jennypavlova
jennypavlova authored Sep 8, 2023
1 parent 9deae84 commit 227a037
Showing 1 changed file with 64 additions and 56 deletions.
120 changes: 64 additions & 56 deletions x-pack/plugins/infra/public/alerting/inventory/components/expression.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ import {
EuiToolTip,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { css } from '@emotion/react';
import { FormattedMessage } from '@kbn/i18n-react';
import { euiStyled } from '@kbn/kibana-react-plugin/common';
import { TimeUnitChar } from '@kbn/observability-plugin/common/utils/formatters/duration';
import {
ForLastExpression,
Expand Down Expand Up @@ -149,8 +149,8 @@ export const Expressions: React.FC<Props> = (props) => {
);

const onFilterChange = useCallback(
(filter: any) => {
setRuleParams('filterQueryText', filter || '');
(filter: string) => {
setRuleParams('filterQueryText', filter ?? '');
try {
setRuleParams(
'filterQuery',
Expand Down Expand Up @@ -257,7 +257,7 @@ export const Expressions: React.FC<Props> = (props) => {
preFillAlertCriteria();
}

if (!ruleParams.filterQuery) {
if (ruleParams.filterQuery === undefined) {
preFillAlertFilter();
}

Expand All @@ -268,7 +268,7 @@ export const Expressions: React.FC<Props> = (props) => {

return (
<>
<EuiSpacer size={'m'} />
<EuiSpacer size="m" />
<EuiText size="xs">
<h4>
<FormattedMessage
Expand All @@ -277,18 +277,18 @@ export const Expressions: React.FC<Props> = (props) => {
/>
</h4>
</EuiText>
<StyledExpression>
<StyledExpressionRow>
<NonCollapsibleExpression>
<div css={StyledExpressionCss}>
<EuiFlexGroup css={StyledExpressionRowCss}>
<div css={NonCollapsibleExpressionCss}>
<NodeTypeExpression
options={nodeTypes}
value={ruleParams.nodeType || 'host'}
onChange={updateNodeType}
/>
</NonCollapsibleExpression>
</StyledExpressionRow>
</StyledExpression>
<EuiSpacer size={'xs'} />
</div>
</EuiFlexGroup>
</div>
<EuiSpacer size="xs" />
{ruleParams.criteria &&
ruleParams.criteria.map((e, idx) => {
return (
Expand All @@ -315,23 +315,23 @@ export const Expressions: React.FC<Props> = (props) => {
);
})}

<NonCollapsibleExpression>
<div css={NonCollapsibleExpressionCss}>
<ForLastExpression
timeWindowSize={timeSize}
timeWindowUnit={timeUnit}
errors={emptyError}
onChangeWindowSize={updateTimeSize}
onChangeWindowUnit={updateTimeUnit}
/>
</NonCollapsibleExpression>
</div>

<div>
<EuiButtonEmpty
data-test-subj="infraExpressionsAddConditionButton"
color={'primary'}
iconSide={'left'}
flush={'left'}
iconType={'plusInCircleFilled'}
color="primary"
iconSide="left"
flush="left"
iconType="plusInCircleFilled"
onClick={addExpression}
>
<FormattedMessage
Expand All @@ -341,7 +341,7 @@ export const Expressions: React.FC<Props> = (props) => {
</EuiButtonEmpty>
</div>

<EuiSpacer size={'m'} />
<EuiSpacer size="m" />
<EuiCheckbox
id="metrics-alert-no-data-toggle"
label={
Expand All @@ -363,7 +363,7 @@ export const Expressions: React.FC<Props> = (props) => {
onChange={(e) => setRuleParams('alertOnNoData', e.target.checked)}
/>

<EuiSpacer size={'m'} />
<EuiSpacer size="m" />

<EuiFormRow
label={i18n.translate('xpack.infra.metrics.alertFlyout.filterLabel', {
Expand All @@ -375,14 +375,14 @@ export const Expressions: React.FC<Props> = (props) => {
fullWidth
display="rowCompressed"
>
{(metadata && (
{metadata ? (
<MetricsExplorerKueryBar
derivedIndexPattern={derivedIndexPattern}
onSubmit={onFilterChange}
onChange={debouncedOnFilterChange}
value={ruleParams.filterQueryText}
/>
)) || (
) : (
<EuiFieldSearch
data-test-subj="infraExpressionsFieldSearch"
onChange={handleFieldSearchChange}
Expand All @@ -392,7 +392,7 @@ export const Expressions: React.FC<Props> = (props) => {
)}
</EuiFormRow>

<EuiSpacer size={'m'} />
<EuiSpacer size="m" />
</>
);
};
Expand All @@ -415,21 +415,21 @@ interface ExpressionRowProps {
fields: DerivedIndexPattern['fields'];
}

const NonCollapsibleExpression = euiStyled.div`
const NonCollapsibleExpressionCss = css`
margin-left: 28px;
`;

const StyledExpressionRow = euiStyled(EuiFlexGroup)`
const StyledExpressionRowCss = css`
display: flex;
flex-wrap: wrap;
margin: 0 -4px;
`;

const StyledExpression = euiStyled.div`
const StyledExpressionCss = css`
padding: 0 4px;
`;

const StyledHealth = euiStyled(EuiHealth)`
const StyledHealthCss = css`
margin-left: 4px;
`;

Expand Down Expand Up @@ -588,8 +588,8 @@ export const ExpressionRow: React.FC<ExpressionRowProps> = (props) => {
</EuiFlexItem>

<EuiFlexItem grow>
<StyledExpressionRow>
<StyledExpression>
<EuiFlexGroup css={StyledExpressionRowCss}>
<div css={StyledExpressionCss}>
<MetricExpression
metric={{
value: metric!,
Expand All @@ -607,28 +607,28 @@ export const ExpressionRow: React.FC<ExpressionRowProps> = (props) => {
customMetric={customMetric}
fields={fields}
/>
</StyledExpression>
</div>
{!displayWarningThreshold && criticalThresholdExpression}
</StyledExpressionRow>
</EuiFlexGroup>
{displayWarningThreshold && (
<>
<StyledExpressionRow>
<EuiFlexGroup css={StyledExpressionRowCss}>
{criticalThresholdExpression}
<StyledHealth color="danger">
<EuiHealth css={StyledHealthCss} color="danger">
<FormattedMessage
id="xpack.infra.metrics.alertFlyout.criticalThreshold"
defaultMessage="Alert"
/>
</StyledHealth>
</StyledExpressionRow>
<StyledExpressionRow>
</EuiHealth>
</EuiFlexGroup>
<EuiFlexGroup css={StyledExpressionRowCss}>
{warningThresholdExpression}
<StyledHealth color="warning">
<EuiHealth css={StyledHealthCss} color="warning">
<FormattedMessage
id="xpack.infra.metrics.alertFlyout.warningThreshold"
defaultMessage="Warning"
/>
</StyledHealth>
</EuiHealth>
<EuiButtonIcon
data-test-subj="infraExpressionRowButton"
aria-label={i18n.translate(
Expand All @@ -639,31 +639,31 @@ export const ExpressionRow: React.FC<ExpressionRowProps> = (props) => {
)}
iconSize="s"
color="text"
iconType={'minusInCircleFilled'}
iconType="minusInCircleFilled"
onClick={toggleWarningThreshold}
/>
</StyledExpressionRow>
</EuiFlexGroup>
</>
)}
{!displayWarningThreshold && (
<>
{' '}
<EuiSpacer size={'xs'} />
<StyledExpressionRow>
<EuiSpacer size="xs" />
<EuiFlexGroup css={StyledExpressionRowCss}>
<EuiButtonEmpty
data-test-subj="infraExpressionRowAddWarningThresholdButton"
color={'primary'}
flush={'left'}
color="primary"
flush="left"
size="xs"
iconType={'plusInCircleFilled'}
iconType="plusInCircleFilled"
onClick={toggleWarningThreshold}
>
<FormattedMessage
id="xpack.infra.metrics.alertFlyout.addWarningThreshold"
defaultMessage="Add warning threshold"
/>
</EuiButtonEmpty>
</StyledExpressionRow>
</EuiFlexGroup>
</>
)}
</EuiFlexItem>
Expand All @@ -674,15 +674,23 @@ export const ExpressionRow: React.FC<ExpressionRowProps> = (props) => {
aria-label={i18n.translate('xpack.infra.metrics.alertFlyout.removeCondition', {
defaultMessage: 'Remove condition',
})}
color={'danger'}
iconType={'trash'}
color="danger"
iconType="trash"
onClick={() => remove(expressionId)}
/>
</EuiFlexItem>
)}
</EuiFlexGroup>
{isExpanded ? <div style={{ padding: '0 0 0 28px' }}>{children}</div> : null}
<EuiSpacer size={'s'} />
{isExpanded ? (
<div
css={css`
padding: 0 0 0 28px;
`}
>
{children}
</div>
) : null}
<EuiSpacer size="s" />
</>
);
};
Expand All @@ -697,22 +705,22 @@ const ThresholdElement: React.FC<{
}> = ({ updateComparator, updateThreshold, threshold, metric, comparator, errors }) => {
return (
<>
<StyledExpression>
<div css={StyledExpressionCss}>
<ThresholdExpression
thresholdComparator={comparator || Comparator.GT}
threshold={threshold}
onChangeSelectedThresholdComparator={updateComparator}
onChangeSelectedThreshold={updateThreshold}
errors={errors}
/>
</StyledExpression>
</div>
{metric && (
<div
style={{
alignSelf: 'center',
}}
css={css`
align-self: center;
`}
>
<EuiText size={'s'}>{metricUnit[metric]?.label || ''}</EuiText>
<EuiText size="s">{metricUnit[metric]?.label || ''}</EuiText>
</div>
)}
</>
Expand Down

0 comments on commit 227a037

Please sign in to comment.