Skip to content

Commit

Permalink
[Watcher] Fix simulate flyout blank page (#178016)
Browse files Browse the repository at this point in the history 
Fixes #177745

## Summary

This PR fixes the bug in the simulate flyout which caused a blank page
when the watch execution returns no execution result. It also adds a
check for whether there is an execution result with the condition
property and only then displays the condition status under the title.

**How to test:**

1. Go to Stack Management -> Watcher
2. Start creating an advanced watch.
3. Add the following json in the editor (it contains an invalid
`interval` property in the `date_histogram` parameter):
```
{
  "trigger": {
    "schedule": {
      "interval": "10m"
    }
  },
  "input": {
    "search": {
      "request": {
        "search_type": "query_then_fetch",
        "indices": [
          "test*"
        ],
        "rest_total_hits_as_int": true,
        "body": {
          "size": "0",
          "query": {
            "match_all": {}
          },
          "aggs": {
            "dateHistogram": {
              "date_histogram": {
                "field": "@timestamp",
                "interval": "1m"
              }
            }
          }
        }
      }
    }
  },
  "condition": {
    "always": {}
  },
  "actions": {}
}
```
5. Click on the "Simulate" tab and then the "Simulate" button.
6. Verify the page doesn't crash and no condition met status is
displayed since the watch execution failed.
7. Start creating a new advanced watch, this time use the already
provided json, which is valid.
8. Click on Simulate and verify that the Condition met status is
displayed correctly - you can change the
`condition.compare.ctx.payload.hits.total.gte` property in the json to
`0` in order to see a "Condition met" status.
  • Loading branch information
@ElenaStoeva
ElenaStoeva authored Mar 6, 2024
1 parent 1524236 commit be634a3
Show file tree
Hide file tree
Showing 2 changed files with 122 additions and 85 deletions.
193 changes: 113 additions & 80 deletions x-pack/plugins/watcher/__jest__/client_integration/watch_create_json_page.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -288,94 +288,127 @@ describe('<JsonWatchEditPage /> create route', () => {
});

describe('results flyout', () => {
const actionModes = ['simulate', 'force_simulate', 'execute', 'force_execute', 'skip'];
const actionModeStatusesConditionMet = [
'simulated',
'simulated',
'executed',
'executed',
'throttled',
];
const actionModeStatusesConditionNotMet = [
'not simulated',
'not simulated',
'not executed',
'not executed',
'throttled',
];
const conditionMetStatuses = [true, false];
const ACTION_NAME = 'my-logging-action';
const ACTION_TYPE = 'logging';
const ACTION_STATE = 'OK';

actionModes.forEach((actionMode, i) => {
conditionMetStatuses.forEach((conditionMet) => {
describe('for ' + actionMode + ' action mode', () => {
describe(
conditionMet ? 'when the condition is met' : 'when the condition is not met',
() => {
beforeEach(async () => {
const { actions, form } = testBed;
form.setInputValue('actionModesSelect', actionMode);

httpRequestsMockHelpers.setLoadExecutionResultResponse({
watchHistoryItem: {
details: {
result: {
condition: {
met: conditionMet,
describe('correctly displays execution results', () => {
const actionModes = ['simulate', 'force_simulate', 'execute', 'force_execute', 'skip'];
const actionModeStatusesConditionMet = [
'simulated',
'simulated',
'executed',
'executed',
'throttled',
];
const actionModeStatusesConditionNotMet = [
'not simulated',
'not simulated',
'not executed',
'not executed',
'throttled',
];
const conditionMetStatuses = [true, false];
const ACTION_NAME = 'my-logging-action';
const ACTION_TYPE = 'logging';
const ACTION_STATE = 'OK';

actionModes.forEach((actionMode, i) => {
conditionMetStatuses.forEach((conditionMet) => {
describe('for ' + actionMode + ' action mode', () => {
describe(
conditionMet ? 'when the condition is met' : 'when the condition is not met',
() => {
beforeEach(async () => {
const { actions, form } = testBed;
form.setInputValue('actionModesSelect', actionMode);

httpRequestsMockHelpers.setLoadExecutionResultResponse({
watchHistoryItem: {
details: {
result: {
condition: {
met: conditionMet,
},
actions:
(conditionMet && [
{
id: ACTION_NAME,
type: ACTION_TYPE,
status: conditionMet && actionModeStatusesConditionMet[i],
},
]) ||
[],
},
actions:
(conditionMet && [
{
id: ACTION_NAME,
type: ACTION_TYPE,
status: conditionMet && actionModeStatusesConditionMet[i],
},
]) ||
[],
},
watchStatus: {
actionStatuses: [
{
id: ACTION_NAME,
state: ACTION_STATE,
},
],
},
},
watchStatus: {
actionStatuses: [
{
id: ACTION_NAME,
state: ACTION_STATE,
},
],
},
},
});

await actions.clickSimulateButton();
});

await actions.clickSimulateButton();
});

test('should set the correct condition met status', () => {
const { exists } = testBed;
expect(exists('conditionMetStatus')).toBe(conditionMet);
expect(exists('conditionNotMetStatus')).toBe(!conditionMet);
});

test('should set the correct values in the table', () => {
const { table } = testBed;
const { tableCellsValues } = table.getMetaData('simulateResultsTable');
const row = tableCellsValues[0];
expect(row).toEqual([
ACTION_NAME,
ACTION_TYPE,
actionMode,
ACTION_STATE,
'',
conditionMet
? actionModeStatusesConditionMet[i]
: actionModeStatusesConditionNotMet[i],
]);
});
}
);
test('should set the correct condition met status', () => {
const { exists } = testBed;
expect(exists('conditionMetStatus')).toBe(conditionMet);
expect(exists('conditionNotMetStatus')).toBe(!conditionMet);
});

test('should set the correct values in the table', () => {
const { table } = testBed;
const { tableCellsValues } = table.getMetaData('simulateResultsTable');
const row = tableCellsValues[0];
expect(row).toEqual([
ACTION_NAME,
ACTION_TYPE,
actionMode,
ACTION_STATE,
'',
conditionMet
? actionModeStatusesConditionMet[i]
: actionModeStatusesConditionNotMet[i],
]);
});
}
);
});
});
});
});

describe('when API returns no results', () => {
beforeEach(async () => {
const { actions } = testBed;

httpRequestsMockHelpers.setLoadExecutionResultResponse({
watchHistoryItem: {
details: {
result: {},
},
watchStatus: {
actionStatuses: [],
},
},
});

await actions.clickSimulateButton();
});

test('flyout renders', () => {
const { exists } = testBed;
expect(exists('simulateResultsFlyout')).toBe(true);
expect(exists('simulateResultsFlyoutTitle')).toBe(true);
});

test('condition status is not displayed', () => {
const { exists } = testBed;
expect(exists('conditionMetStatus')).toBe(false);
expect(exists('conditionNotMetStatus')).toBe(false);
});
});
});
});
});
Expand Down
14 changes: 9 additions & 5 deletions ...ion/sections/watch_edit_page/components/json_watch_edit/simulate_watch_results_flyout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export const SimulateWatchResultsFlyout = ({
executeResults.watchStatus && executeResults.watchStatus.actionStatuses;
return Object.keys(actions).map((actionKey) => {
const actionStatus = actionStatuses.find((status) => status.id === actionKey);
const isConditionMet = executeResults.details?.result?.condition.met;
const isConditionMet = executeResults.details?.result?.condition?.met;

return {
actionId: actionKey,
Expand All @@ -90,7 +90,7 @@ export const SimulateWatchResultsFlyout = ({
actionReason: actionStatus && actionStatus.lastExecutionReason,
actionStatus:
(isConditionMet &&
executeResults.details.result.actions.find((action: any) => action.id === actionKey)
executeResults.details?.result?.actions.find((action: any) => action.id === actionKey)
?.status) ||
conditionNotMetActionStatus(actionModes[actionKey]),
};
Expand Down Expand Up @@ -205,7 +205,7 @@ export const SimulateWatchResultsFlyout = ({

const { details } = executeResults;

const conditionMetStatus = (details?.result?.condition.met && (
const conditionMetStatus = (details?.result?.condition?.met && (
<>
<EuiIcon color="green" type="check" data-test-subj="conditionMetStatus" />{' '}
<FormattedMessage
Expand Down Expand Up @@ -233,8 +233,12 @@ export const SimulateWatchResultsFlyout = ({
>
<EuiFlyoutHeader hasBorder>
{flyoutTitle}
<EuiSpacer size="s" />
{conditionMetStatus}
{details?.result?.condition?.met != null && (
<>
<EuiSpacer size="s" />
{conditionMetStatus}
</>
)}
</EuiFlyoutHeader>

<EuiFlyoutBody>
Expand Down

0 comments on commit be634a3

Please sign in to comment.