[Actionable Observability] o11y rules page #127406

mgiota · 2022-03-09T22:33:08Z

Fixes #126774
Fixes #126775
Fixes #123581
Fixes #127014
Fixes #127011
Fixes #127433

In order to get the new Rule page you should enable following feature flag xpack.observability.unsafe.rules.enabled: true

Acceptance criteria

Rules Table should have Rule, Last run, Last response, Status and Actions columns Style EuiBasicTable according to design #126774
- Rule column shows the rule name and currently the rule type id (another ticket will show the rule type name)
- Last run column reads the executionStatus.lastExecutionDate field
- Last response column reads the executionStatus.status field. Possible values are:
  - Active
  - Error
  - OK
  - Pending
  - Unknown
- Status column can be Enabled, Disabled and Muted. (Muted will be added in another ticket)
- Actions column should have actions for Edit and Delete
User can filter by last response column Filter per last response #127014
User can Edit and Delete a rule Edit and Delete Actions #123581
User can create new Observability rule types Create new rule #127011
Create a useFetchRules hook that loads the Observability rule types Refactor Rules Table to use a useFetchRules hook #126775 and reacts to pagination, sorting and filtering changes. Table supports sorting and pagination

Screen.Recording.2022-03-09.at.20.57.06.mov

Notes for the reviewer

Current PR implements the rulesTable, useFetchRules hook and rest sub-components for the table columns inside the observability plugin and not the triggers_actions_ui plugin
Current PR is missing a few small things of the current rules_list implementation in the triggers_actions_ui plugin (refresh button, license modal, empty state, no permission prompt, read only users shouldn't do some actions). All these plus adding more filtering and adding the Muted status will be covered in follow up PRs.
This is the first step towards moving above files in the triggers_actions_ui plugin later on. Once the implementation is done in the observability plugin, we can move on with sharing functionality

Follow up issues

…onent,delete, pagination, sorting

katrin-freihofner · 2022-03-14T08:00:45Z

@mgiota do you have a follow-up issue for adding search capabilities to the rules view? I wasn't able to find it.

mgiota · 2022-03-14T08:13:49Z

@katrin-freihofner Good point. I created a new issue to track this #127579

mgiota · 2022-03-14T08:14:00Z

@elasticmachine merge upstream

kibanamachine · 2022-03-14T08:14:12Z

expected head sha didn’t match current head ref.

mgiota · 2022-03-14T08:27:02Z

@elasticmachine merge upstream

…lteredSolutions param

mgiota · 2022-03-14T13:57:15Z

@XavierM I just pushed the Create new rule functionality in this open PR

Screen.Recording.2022-03-14.at.14.49.33.mov

Do you have an estimate when we can get this PR reviewed? The sooner we get it reviewed and merged the better, because it's gonna get longer and longer. I have quite a few subtickets I need to work on once this is merged.

XavierM · 2022-03-16T00:31:55Z

x-pack/plugins/observability/public/hooks/use_fetch_rules.ts

+  useEffect(() => {
+    fetchRules();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(ruleLastResponseFilter), page, sort]);


that's kind of dangerous, if JSON.stringify throw an error

@mgiota, How about moving JSON.stringify(ruleLastResponseFilter) inside the try/catch block where loadRules function is called?

@XavierM @fkanout I refactored this part of code with the use of useCallback. This way I got rid of the eslint-disable-next-line react-hooks/exhaustive-deps warning and stopped using JSON.stringify. It still works fine!

x-pack/plugins/observability/public/pages/rules/components/edit_rule_flyout.tsx

x-pack/plugins/observability/public/pages/rules/components/last_response_filter.tsx

x-pack/plugins/observability/public/pages/rules/components/name.tsx

XavierM · 2022-03-16T00:51:57Z

x-pack/plugins/triggers_actions_ui/public/index.ts

@@ -47,7 +50,12 @@ export { Plugin };
 export * from './plugin';
 // TODO remove this import when we expose the Rules tables as a component
 export { loadRules } from './application/lib/rule_api/rules';
+export { deleteRules } from './application/lib/rule_api/delete';


I want to check something about this import to avoid our bundle getting bigger

@XavierM Do you have any other suggestion how I could do it differently? I thought creating similar functions under observability that call directly the rules api, but I wanted to avoid duplication as much as possible. In 8.3 plan is to get rid of these imports anyway, right? Let me know what you think and if this is a blocker

it is not a blocker, it is more a mental note for me

mgiota · 2022-03-16T06:13:14Z

@elasticmachine merge upstream

fkanout

Great work @mgiota!!
LGTM, with some minor and none-blocking things.

fkanout · 2022-03-16T09:20:26Z

x-pack/plugins/observability/public/hooks/use_fetch_rules.ts

+  useEffect(() => {
+    fetchRules();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(ruleLastResponseFilter), page, sort]);


@mgiota, How about moving JSON.stringify(ruleLastResponseFilter) inside the try/catch block where loadRules function is called?

x-pack/plugins/observability/public/pages/rules/components/delete_modal_confirmation.tsx

x-pack/plugins/triggers_actions_ui/public/application/sections/rule_form/rule_form.tsx

x-pack/plugins/observability/public/pages/rules/components/status_context.tsx

fkanout · 2022-03-16T10:23:38Z

@mgiota The auto refresh is broken, from UI and functionality perspective.

mgiota · 2022-03-16T12:19:18Z

@mgiota The auto refresh is broken, from UI and functionality perspective.

Yep that's true. Plan is to fix this when I work on adding the Refresh button in this ticket #127436. I'll put some description in the ticket to fix the auto-refresh button as well (in worst case we remove it)

XavierM

Let's go!!! Nice work!

kibana-ci · 2022-03-16T15:40:50Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`observability`	365	378	+13
`triggersActionsUi`	325	326	+1
total			+14

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`triggersActionsUi`	242	271	+29

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`observability`	398.2KB	408.6KB	+10.4KB
`triggersActionsUi`	676.6KB	636.4KB	-40.2KB
total			-29.8KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`observability`	89.6KB	89.7KB	+138.0B
`triggersActionsUi`	55.5KB	93.8KB	+38.3KB
total			+38.4KB

Unknown metric groups

API count

id	before	after	diff
`triggersActionsUi`	254	283	+29

async chunk count

id	before	after	diff
`triggersActionsUi`	66	65	-1

ESLint disabled in files

id	before	after	diff
`observability`	2	3	+1

Total ESLint disabled count

id	before	after	diff
`observability`	41	42	+1

History

💔 Build #30917 failed f1ea412
💚 Build #30876 succeeded a9b5dc8
💚 Build #30810 succeeded 4665d55
💔 Build #30769 failed b678cc6
💚 Build #30174 succeeded 7b8c721
💔 Build #29953 failed 8933a00

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @mgiota

* style rules table, refactor useFetchRules hook, edit_rule_flyout component,delete, pagination, sorting * remove unused import * fix translations * change name column to rule and statusFilter to lastResponse filter * remove unused code * embed create rule flyout & create loadRuleTypesHook that accepts a filteredSolutions param * fix failing tests * fix last failing test * Show rule type name in the Rule column * PR review comments * useMemo for panelItems on status_context * close status context popover when clicking outside of the context menu * refactor useFetchRules to get rid of react-hooks/exhaustive-deps warning * remove console log statement * useCallback for EuiBasicTable onChange * cleanup async fetchRuleTypes Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

kibanamachine · 2022-03-18T16:06:19Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create backports run node scripts/backport --pr 127406 or prevent reminders by adding the backport:skip label.

kibanamachine · 2022-03-21T16:16:17Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create backports run node scripts/backport --pr 127406 or prevent reminders by adding the backport:skip label.

kibanamachine · 2022-03-22T16:26:22Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create backports run node scripts/backport --pr 127406 or prevent reminders by adding the backport:skip label.

kibanamachine · 2022-03-23T16:36:19Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create backports run node scripts/backport --pr 127406 or prevent reminders by adding the backport:skip label.

kibanamachine · 2022-03-24T16:46:19Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create backports run node scripts/backport --pr 127406 or prevent reminders by adding the backport:skip label.

kibanamachine · 2022-03-25T16:56:20Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create backports run node scripts/backport --pr 127406 or prevent reminders by adding the backport:skip label.

mgiota added 2 commits March 9, 2022 22:53

style rules table, refactor useFetchRules hook, edit_rule_flyout comp…

36d3bc8

…onent,delete, pagination, sorting

remove unused import

208e1b0

mgiota self-assigned this Mar 10, 2022

mgiota added v8.2.0 Team: Actionable Observability - DEPRECATED For Observability Alerting and SLOs use "Team:obs-ux-management", for AIops "Team:obs-knowledge" labels Mar 10, 2022

mgiota added 3 commits March 10, 2022 10:22

fix translations

55d4cec

change name column to rule and statusFilter to lastResponse filter

3045af3

remove unused code

3c103ec

mgiota marked this pull request as ready for review March 10, 2022 10:29

mgiota requested a review from a team as a code owner March 10, 2022 10:29

mgiota added the release_note:enhancement label Mar 10, 2022

Merge branch 'main' into o11y_rules_page

a9468dd

kibanamachine and others added 2 commits March 14, 2022 04:27

Merge branch 'main' into o11y_rules_page

9150083

embed create rule flyout & create loadRuleTypesHook that accepts a fi…

8933a00

…lteredSolutions param

mgiota requested a review from a team March 14, 2022 14:41

mgiota added 3 commits March 14, 2022 21:28

fix failing tests

6888b9e

fix last failing test

7b8c721

Show rule type name in the Rule column

b678cc6