[RAM] Show Cases column on the alerts table #150963

cnasikas · 2023-02-11T20:13:55Z

Summary

This PR adds the cases column to the alerts table. Assumptions:

I will not change the label of the case column. I will do it on another PR.
The column will not be part of the default columns. The user has to add it from the fields.
If there are multiple cases they will be shown as a comma-separated list. It will change later to include a "show more" button or similar to show only the latest case in the column.
Due to circular dependencies, Cases types and utility functions were not imported. I duplicate the code. I opened two issues ([Cases] Create package for case API types #151648, [Cases] Create package for common utility functions and constants #151649) to create packages that will contain the case types and utility functions.

Issue: #146864

Checklist

Delete any items that are not applicable to this PR.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Unit or functional tests were updated or added to match the most common scenarios

For maintainers

This was checked for breaking API changes and was labeled appropriately

Release notes

Adds the Cases column to the alerts table. The column shows, for each alert, all cases the alert is attached to.

cnasikas · 2023-02-16T10:04:15Z

x-pack/plugins/triggers_actions_ui/kibana.jsonc

@@ -34,7 +34,8 @@
      "esUiShared",
      "kibanaReact",
      "kibanaUtils",
-      "actions"
+      "actions",
+      "cases"


I added Cases in the required bundles to be able to import some constants. The bundle size of the triggers_actions_ui plugin increased by 200 bytes. I think it is acceptable. If you think otherwise let me know so I can hardcode the needed values.

I see cases plugin has triggers_actions_ui as plugin dependency, could there be a cyclic dependency issue? Otherwise, it's ok for me

I don't think there is an issue with bundles. Only with required plugins. I will verify with operations to be sure. If there is a problem I will duplicate the code.

@jcger You were right. CI was complaining about circular dependencies. I will create an issue to create a package so we can import the cases types from there. In this PR I duplicate the code.

cnasikas · 2023-02-16T10:05:19Z

x-pack/plugins/triggers_actions_ui/public/application/hooks/constants.ts

+ * 2.0.
+ */
+
+export const triggersActionsUiQueriesKeys = {


I followed the same pattern we do in Cases. Inspired by this article https://tkdodo.eu/blog/effective-react-query-keys#use-query-key-factories

cnasikas · 2023-02-16T10:07:00Z

...ers_actions_ui/public/application/sections/alerts_table/alerts_flyout/alerts_flyout.test.tsx

 import { act } from 'react-dom/test-utils';
 import { AlertsFlyout } from './alerts_flyout';
-import { AlertsField } from '../../../../types';
+import { Alert, AlertsField } from '../../../../types';


I created the following types

export type Alert = EcsFieldsResponse; export type Alerts = Alert[];

and use them everywhere. I think is clearer.

cnasikas · 2023-02-16T10:08:43Z

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

-            data,
-          });
+
+        if (isSystemCell(_props.columnId)) {


I created a factory for our internal cells. The factory will get the columnId and all required props and render the corresponding cell component.

cnasikas · 2023-02-16T10:09:13Z

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

+        if (isSystemCell(_props.columnId)) {
+          return (
+            <SystemCellFactory
+              alert={alert}


Passing the alert makes the code easier instead of passing the data

cnasikas · 2023-02-16T10:09:59Z

.../plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table_state.tsx

+
+const AlertsTableState = (props: AlertsTableStateProps) => {
+  return (
+    <QueryClientProvider client={alertsTableQueryClient}>


The alerts table is wrapped by the React Query provider.

cnasikas · 2023-02-16T10:11:20Z

.../plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table_state.tsx

@@ -240,6 +270,7 @@ const AlertsTableState = ({
  const tableProps = useMemo(
    () => ({
      alertsTableConfiguration,
+      casesData: { cases: cases ?? new Map(), isLoading: isLoadingCases },


I preferred to group all case props into one object. Let me know if you need me to do something else.

cnasikas · 2023-02-16T10:12:08Z

x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/cells/index.tsx

+
+export const systemCells: SystemCellId[] = [ALERT_STATUS, ALERT_CASE_IDS];
+
+const SystemCellFactoryComponent: React.FC<CellComponentProps> = (props) => {


I created a factory for our internal cells. The factory will get the columnId and all required props and render the corresponding cell component.

cnasikas · 2023-02-16T10:12:48Z

x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/cells/index.tsx

+
+const SystemCellFactoryComponent: React.FC<CellComponentProps> = (props) => {
+  const { columnId } = props;
+  const cellComponents: SystemCellComponentMap = useMemo(


Maybe it is better to put it outside of the component.

cnasikas · 2023-02-16T10:13:51Z

...ns/triggers_actions_ui/public/application/sections/alerts_table/hooks/use_bulk_get_cases.tsx

+    },
+    {
+      enabled: caseIds.length > 0,
+      select: transformCases,


The backend returns an array of cases. We transform it into a Map to avoid looping the cases array each time we need to find the case information.

jcger

LGTM, waiting for those tests!

jcger · 2023-02-16T13:57:32Z

x-pack/plugins/triggers_actions_ui/kibana.jsonc

@@ -34,7 +34,8 @@
      "esUiShared",
      "kibanaReact",
      "kibanaUtils",
-      "actions"
+      "actions",
+      "cases"


I see cases plugin has triggers_actions_ui as plugin dependency, could there be a cyclic dependency issue? Otherwise, it's ok for me

cnasikas · 2023-02-17T16:31:18Z

x-pack/plugins/triggers_actions_ui/public/application/components/test_utils.tsx

-  coreStart: TriggersAndActionsUiServices;
-}
-
-export const createAppMockRenderer = (): AppMockRenderer => {


I moved it one level up because I need it in the section folder.

elasticmachine · 2023-02-20T11:19:58Z

Pinging @elastic/response-ops (Team:ResponseOps)

elasticmachine · 2023-02-20T11:20:00Z

Pinging @elastic/response-ops-cases (Feature:Cases)

jcger

not done yet but I already wanted to let you know that I did some QA and saw that after adding an alert to a case, the table isn't updated and also even if clicking on refresh, it doesn't update. I have to hard reload to get the data

Screenshot.1.mov

jcger · 2023-02-20T15:22:46Z

x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/cases/cell.tsx

+    .filter((theCase): theCase is Case => theCase != null);
+
+  if (validCases.length === 0) {
+    return null;


I've seen that if there is no linked case, the cell is just empty. I guess it's happening because of this return and I'm wondering if we should render '--' or even call the DefaultRenderer to keep consistency with other empty cell values

See difference between empty values of other cells compared to case

You are right. I will call the DefaultRenderer to be consistent.

jcger · 2023-02-20T15:31:05Z

...s_actions_ui/public/application/sections/alerts_table/cases/use_case_view_navigation.test.ts

+      wrapper: appMockRender.AppWrapper,
+    });
+
+    act(() => {


do you really need to call act here? I tried without it I there is no warning or error message

The examples in the documentation of the library use act when you call a function. In react testing library it does not need it but it seems to be needed in the react testing hook library.

jcger

nice!

kibana-ci · 2023-02-21T10:07:20Z

💚 Build Succeeded

Buildkite Build
Commit: cb2407d

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`triggersActionsUi`	520	540	+20

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
`cases`	71	75	+4
`triggersActionsUi`	530	531	+1
total			+5

Async chunks

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

id	before	after	diff
`triggersActionsUi`	912.9KB	919.6KB	+6.8KB

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id	before	after	diff
`triggersActionsUi`	49	50	+1

Page load bundle

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

id	before	after	diff
`cases`	130.2KB	130.4KB	+163.0B

Unknown metric groups

API count

id	before	after	diff
`cases`	87	92	+5
`triggersActionsUi`	559	560	+1
total			+6

ESLint disabled in files

id	before	after	diff
`triggersActionsUi`	5	6	+1

Total ESLint disabled count

id	before	after	diff
`triggersActionsUi`	128	129	+1

History

💚 Build #108941 succeeded 709a819
💔 Build #108927 failed 1d890ac
💔 Build #108844 failed 6e084e8d26ba785dce3f845669ac1e1f5c3a897a
💔 Build #108843 failed ba58d00028e4c991084acf83d61e2bca505b7c72
💔 Build #108373 failed 8442029f5f8d089dec814e8309a0059a1d10ad9d
💔 Build #108371 failed ed8c32d5ce548fe47d74b2fd4430d86ba5912e02

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

cc @cnasikas

cnasikas · 2023-02-21T13:28:55Z

not done yet but I already wanted to let you know that I did some QA and saw that after adding an alert to a case, the table isn't updated and also even if clicking on refresh, it doesn't update. I have to hard reload to get the data

We decided offline that we will address it on another PR.

cnasikas added Team:ResponseOps Label for the ResponseOps team (formerly the Cases and Alerting teams) Feature:Cases Cases feature Feature:Alerting/RulesManagement Issues related to the Rules Management UX labels Feb 11, 2023

cnasikas self-assigned this Feb 11, 2023

cnasikas added the v8.8.0 label Feb 11, 2023

cnasikas mentioned this pull request Feb 11, 2023

[Cases] Link cases to alerts #146864

Closed

8 tasks

cnasikas force-pushed the cases_alerts_table branch 2 times, most recently from 71edc38 to ed8c32d Compare February 15, 2023 18:37

cnasikas commented Feb 16, 2023

View reviewed changes

jcger reviewed Feb 16, 2023

View reviewed changes

cnasikas force-pushed the cases_alerts_table branch from 8442029 to 9631771 Compare February 17, 2023 16:06

cnasikas added 10 commits February 17, 2023 18:07

Wrap the alerts table with the react query provider

d7e7f4f

Create useBulkGetCases hook

45182cd

Move useBulkGetCases to the alerts table hooks

5861ea5

Create Alerts type

7492edc

Export INTERNAL_BULK_GET_CASES_URL

7cf11fc

Add cases to required bundle

0ee8f88

Convert cases response to a Map

721b4ff

Move react query provider one level up

4cb650e

Pass cases data to the alerts table

578055b

Show cases title in the alerts table

381ecb1

Redirect to the case page

9015864

cnasikas force-pushed the cases_alerts_table branch from 9631771 to ba58d00 Compare February 17, 2023 16:08

cnasikas commented Feb 17, 2023

View reviewed changes

cnasikas added 4 commits February 17, 2023 19:34

Add tests

62bd390

Remove cases circular dependency

eb532ec

Merge branch 'main' into cases_alerts_table

c8d9cfd

Remove case circular dependecies

1d890ac

cnasikas force-pushed the cases_alerts_table branch from 6e084e8 to 1d890ac Compare February 20, 2023 11:18

cnasikas marked this pull request as ready for review February 20, 2023 11:19

cnasikas requested a review from a team as a code owner February 20, 2023 11:19

cnasikas requested a review from jcger February 20, 2023 11:23

cnasikas added the release_note:feature Makes this part of the condensed release notes label Feb 20, 2023

Small fix

709a819

jcger reviewed Feb 20, 2023

View reviewed changes

This was referenced Feb 20, 2023

[Cases] Create package for case API types #151648

Open

[Cases] Create package for common utility functions and constants #151649

Open

jcger approved these changes Feb 21, 2023

View reviewed changes

Show default value

cb2407d

cnasikas enabled auto-merge (squash) February 21, 2023 08:37

cnasikas merged commit 0a8c5f5 into elastic:main Feb 21, 2023

cnasikas deleted the cases_alerts_table branch February 21, 2023 10:07

kibanamachine added the backport:skip This commit does not require backporting label Feb 21, 2023

This was referenced May 7, 2023

Changes to Security cases in 8.8 elastic/security-docs#3171

Closed

8.8.0 Release notes elastic/security-docs#3139

Closed

cnasikas mentioned this pull request May 16, 2023

Move case features to the correct section in kibana release notes #157805

Merged

maryam-saeidi mentioned this pull request May 10, 2024

[Alert details page] Show alert related cases on the alert details page in summary fields section #183146

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[RAM] Show Cases column on the alerts table #150963

[RAM] Show Cases column on the alerts table #150963

cnasikas commented Feb 11, 2023 •

edited

Loading

cnasikas Feb 16, 2023 •

edited

Loading

jcger Feb 16, 2023

cnasikas Feb 16, 2023

cnasikas Feb 20, 2023

cnasikas Feb 16, 2023

cnasikas Feb 16, 2023

cnasikas Feb 16, 2023

cnasikas Feb 16, 2023

cnasikas Feb 16, 2023

cnasikas Feb 16, 2023

cnasikas Feb 16, 2023

cnasikas Feb 16, 2023

cnasikas Feb 16, 2023 •

edited

Loading

jcger left a comment

jcger Feb 16, 2023

cnasikas Feb 17, 2023

elasticmachine commented Feb 20, 2023

elasticmachine commented Feb 20, 2023

jcger left a comment

jcger Feb 20, 2023

cnasikas Feb 20, 2023 •

edited

Loading

jcger Feb 20, 2023

cnasikas Feb 20, 2023 •

edited

Loading

jcger left a comment

kibana-ci commented Feb 21, 2023

API count

ESLint disabled in files

Total ESLint disabled count

cnasikas commented Feb 21, 2023


		export const systemCells: SystemCellId[] = [ALERT_STATUS, ALERT_CASE_IDS];

		const SystemCellFactoryComponent: React.FC<CellComponentProps> = (props) => {

[RAM] Show Cases column on the alerts table #150963

[RAM] Show Cases column on the alerts table #150963

Conversation

cnasikas commented Feb 11, 2023 • edited Loading

Summary

Checklist

For maintainers

Release notes

cnasikas Feb 16, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cnasikas Feb 16, 2023 • edited Loading

Choose a reason for hiding this comment

jcger left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

elasticmachine commented Feb 20, 2023

elasticmachine commented Feb 20, 2023

jcger left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cnasikas Feb 20, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cnasikas Feb 20, 2023 • edited Loading

Choose a reason for hiding this comment

jcger left a comment

Choose a reason for hiding this comment

kibana-ci commented Feb 21, 2023

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Public APIs missing exports

Page load bundle

API count

ESLint disabled in files

Total ESLint disabled count

History

cnasikas commented Feb 21, 2023

cnasikas commented Feb 11, 2023 •

edited

Loading

cnasikas Feb 16, 2023 •

edited

Loading

cnasikas Feb 16, 2023 •

edited

Loading

cnasikas Feb 20, 2023 •

edited

Loading

cnasikas Feb 20, 2023 •

edited

Loading