mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 09:19:04 -04:00
[8.10] [Infra UI] When creating an alert for a host via the new host fly out the filter cannot be updated (#165991) (#166055)
# Backport This will backport the following commits from `main` to `8.10`: - [[Infra UI] When creating an alert for a host via the new host fly out the filter cannot be updated (#165991)](https://github.com/elastic/kibana/pull/165991) <!--- Backport version: 8.9.7 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"jennypavlova","email":"dzheni.pavlova@elastic.co"},"sourceCommit":{"committedDate":"2023-09-08T09:17:06Z","message":"[Infra UI] When creating an alert for a host via the new host fly out the filter cannot be updated (#165991)\n\nCloses #165098\r\n\r\n## Summary\r\n\r\nThis PR fixes an issue with the optional filter component (the user is\r\nnot able to clear the prefilled input - described in [the\r\nissue](57b43b6ef9).\r\nI saw deprecated styled components used in the component I was adding\r\nthe fix so I also fixed those - in case there is a valid reason to keep\r\nthe old version I can remove the [second\r\ncommit](351d997cb6).\r\n\r\n## Testing \r\n\r\nOpen create alert rule flyout from the Inventory page\r\n- Create a rule without the optional filter\r\n- Create a rule with a new optional filter\r\n\r\nOpen create alert rule flyout from the Hosts view page\r\n- Create a rule without the optional filter\r\n- Create a rule with a new optional filter\r\n\r\n\r\n8e9fb3f6-4774-4e06-9f49-16b83a60b7b6","sha":"227a037ceb80d27e09078144bfc5a492581397e5","branchLabelMapping":{"^v8.11.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:Infra Monitoring UI","release_note:skip","backport:prev-minor","v8.11.0"],"number":165991,"url":"https://github.com/elastic/kibana/pull/165991","mergeCommit":{"message":"[Infra UI] When creating an alert for a host via the new host fly out the filter cannot be updated (#165991)\n\nCloses #165098\r\n\r\n## Summary\r\n\r\nThis PR fixes an issue with the optional filter component (the user is\r\nnot able to clear the prefilled input - described in [the\r\nissue](57b43b6ef9).\r\nI saw deprecated styled components used in the component I was adding\r\nthe fix so I also fixed those - in case there is a valid reason to keep\r\nthe old version I can remove the [second\r\ncommit](351d997cb6).\r\n\r\n## Testing \r\n\r\nOpen create alert rule flyout from the Inventory page\r\n- Create a rule without the optional filter\r\n- Create a rule with a new optional filter\r\n\r\nOpen create alert rule flyout from the Hosts view page\r\n- Create a rule without the optional filter\r\n- Create a rule with a new optional filter\r\n\r\n\r\n8e9fb3f6-4774-4e06-9f49-16b83a60b7b6","sha":"227a037ceb80d27e09078144bfc5a492581397e5"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.11.0","labelRegex":"^v8.11.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/165991","number":165991,"mergeCommit":{"message":"[Infra UI] When creating an alert for a host via the new host fly out the filter cannot be updated (#165991)\n\nCloses #165098\r\n\r\n## Summary\r\n\r\nThis PR fixes an issue with the optional filter component (the user is\r\nnot able to clear the prefilled input - described in [the\r\nissue](57b43b6ef9).\r\nI saw deprecated styled components used in the component I was adding\r\nthe fix so I also fixed those - in case there is a valid reason to keep\r\nthe old version I can remove the [second\r\ncommit](351d997cb6).\r\n\r\n## Testing \r\n\r\nOpen create alert rule flyout from the Inventory page\r\n- Create a rule without the optional filter\r\n- Create a rule with a new optional filter\r\n\r\nOpen create alert rule flyout from the Hosts view page\r\n- Create a rule without the optional filter\r\n- Create a rule with a new optional filter\r\n\r\n\r\n8e9fb3f6-4774-4e06-9f49-16b83a60b7b6","sha":"227a037ceb80d27e09078144bfc5a492581397e5"}}]}] BACKPORT--> Co-authored-by: jennypavlova <dzheni.pavlova@elastic.co>
This commit is contained in:
Kibana Machine
GitHub
parent
e473ff65b5
commit
e7fb7980c8
1 changed files with 64 additions and 56 deletions
|
|
@ -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,
|
||||
|
|
@ -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',
|
||||
|
|
@ -257,7 +257,7 @@ export const Expressions: React.FC<Props> = (props) => {
|
|||
preFillAlertCriteria();
|
||||
}
|
||||
|
||||
if (!ruleParams.filterQuery) {
|
||||
if (ruleParams.filterQuery === undefined) {
|
||||
preFillAlertFilter();
|
||||
}
|
||||
|
||||
|
|
@ -268,7 +268,7 @@ export const Expressions: React.FC<Props> = (props) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<EuiSpacer size={'m'} />
|
||||
<EuiSpacer size="m" />
|
||||
<EuiText size="xs">
|
||||
<h4>
|
||||
<FormattedMessage
|
||||
|
|
@ -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 (
|
||||
|
|
@ -315,7 +315,7 @@ export const Expressions: React.FC<Props> = (props) => {
|
|||
);
|
||||
})}
|
||||
|
||||
<NonCollapsibleExpression>
|
||||
<div css={NonCollapsibleExpressionCss}>
|
||||
<ForLastExpression
|
||||
timeWindowSize={timeSize}
|
||||
timeWindowUnit={timeUnit}
|
||||
|
|
@ -323,15 +323,15 @@ export const Expressions: React.FC<Props> = (props) => {
|
|||
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
|
||||
|
|
@ -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={
|
||||
|
|
@ -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', {
|
||||
|
|
@ -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}
|
||||
|
|
@ -392,7 +392,7 @@ export const Expressions: React.FC<Props> = (props) => {
|
|||
)}
|
||||
</EuiFormRow>
|
||||
|
||||
<EuiSpacer size={'m'} />
|
||||
<EuiSpacer size="m" />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -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;
|
||||
`;
|
||||
|
||||
|
|
@ -587,8 +587,8 @@ export const ExpressionRow: React.FC<ExpressionRowProps> = (props) => {
|
|||
</EuiFlexItem>
|
||||
|
||||
<EuiFlexItem grow>
|
||||
<StyledExpressionRow>
|
||||
<StyledExpression>
|
||||
<EuiFlexGroup css={StyledExpressionRowCss}>
|
||||
<div css={StyledExpressionCss}>
|
||||
<MetricExpression
|
||||
metric={{
|
||||
value: metric!,
|
||||
|
|
@ -606,28 +606,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
|
||||
aria-label={i18n.translate(
|
||||
'xpack.infra.metrics.alertFlyout.removeWarningThreshold',
|
||||
|
|
@ -637,23 +637,23 @@ 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
|
||||
|
|
@ -661,7 +661,7 @@ export const ExpressionRow: React.FC<ExpressionRowProps> = (props) => {
|
|||
defaultMessage="Add warning threshold"
|
||||
/>
|
||||
</EuiButtonEmpty>
|
||||
</StyledExpressionRow>
|
||||
</EuiFlexGroup>
|
||||
</>
|
||||
)}
|
||||
</EuiFlexItem>
|
||||
|
|
@ -671,15 +671,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" />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -694,7 +702,7 @@ const ThresholdElement: React.FC<{
|
|||
}> = ({ updateComparator, updateThreshold, threshold, metric, comparator, errors }) => {
|
||||
return (
|
||||
<>
|
||||
<StyledExpression>
|
||||
<div css={StyledExpressionCss}>
|
||||
<ThresholdExpression
|
||||
thresholdComparator={comparator || Comparator.GT}
|
||||
threshold={threshold}
|
||||
|
|
@ -702,14 +710,14 @@ const ThresholdElement: React.FC<{
|
|||
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>
|
||||
)}
|
||||
</>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue