[Security Solution] [Cases] Cases UI Plugin for RAC #97646

stephmilovic · 2021-04-20T14:18:03Z

Summary

Cases UI plugin for RAC by @michaelolo24 && @stephmilovic
Feature branch, all code has been reviewed in subsequent PRs (see label Feature:Cases-RAC-UI)

Testing

Considering the size of this PR, those who may not be intimately familiar with cases may not be able to go through and review the lines of code. With that said no new functionality has been introduced, so everything should work as it earlier versions of cases. To help with testing we ask that you pull down the code at physically test the following paths/actions

1. Creating a case from the cases path
2. Creating a case from the flyout in detections. 
3. Configuring a case with an external connector
4. Syncing alerts with a case
5. Attaching an alert to a case and accessing that alert from the case
6. Attaching a timeline to the case and accessing the timeline from that case
7. Adding comments to the case
8. Changing the status of a case
9. Sharing cases via comment hyperlinks
10. Navigating using any provided breadcrumbs
11. Navigating and accessing cases from the recent_cases panel in the overview page
12. Deleting a case

This PR adds the following UI plugin to x-pack/cases:

Cases UI

Embed Cases UI components in any Kibana plugin

Add CasesUiStart to Kibana plugin StartServices dependencies:

cases: CasesUiStart;

Cases UI Methods

From the UI component, get the component from the useKibana hook start services

  const { cases } = useKibana().services;
  // call in the return as you would any component
  cases.getCreateCase({
    onCancel: handleSetIsCancel,
    onSuccess,
    timelineIntegration?: {
      plugins: {
        parsingPlugin,
        processingPluginRenderer,
        uiPlugin,
      },
      hooks: {
        useInsertTimeline,
      },
    },
  })

Methods:

`getAllCases`

Arguments:

Property	Description
caseDetailsNavigation	`CasesNavigation<CaseDetailsHrefSchema, 'configurable'>` route configuration to generate the case details url for the case details page
configureCasesNavigation	`CasesNavigation` route configuration for configure cases page
createCaseNavigation	`CasesNavigation` route configuration for create cases page
userCanCrud	`boolean;` user permissions to crud

UI component:

`getAllCasesSelectorModal`

Arguments:

Property	Description
alertData?	`Omit<CommentRequestAlertType, 'type'>;` alert data to post to case
createCaseNavigation	`CasesNavigation` route configuration for create cases page
disabledStatuses?	`CaseStatuses[];` array of disabled statuses
onRowClick	`(theCase?: Case \| SubCase) => void;` callback for row click, passing case in row
updateCase?	`(theCase: Case \| SubCase) => void;` callback after case has been updated
userCanCrud	`boolean;` user permissions to crud

UI component:

`getCaseView`

Arguments:

Property	Description
caseDetailsNavigation	`CasesNavigation<CaseDetailsHrefSchema, 'configurable'>` route configuration to generate the case details url for the case details page
caseId	`string;` ID of the case
configureCasesNavigation	`CasesNavigation` route configuration for configure cases page
createCaseNavigation	`CasesNavigation` route configuration for create cases page
getCaseDetailHrefWithCommentId	`(commentId: string) => string;` callback to generate the case details url with a comment id reference from the case id and comment id
onComponentInitialized?	`() => void;` callback when component has initialized
onCaseDataSuccess?	`(data: Case) => void;` optional callback to handle case data in consuming application
ruleDetailsNavigation	`CasesNavigation<string \| null \| undefined, 'configurable'>`
showAlertDetails	`(alertId: string, index: string) => void;` callback to show alert details
subCaseId?	`string;` subcase id
timelineIntegration?.editor_plugins	Plugins needed for integrating timeline into markdown editor.
timelineIntegration?.editor_plugins.parsingPlugin	`Plugin;`
timelineIntegration?.editor_plugins.processingPluginRenderer	`React.FC<TimelineProcessingPluginRendererProps & { position: EuiMarkdownAstNodePosition }>`
timelineIntegration?.editor_plugins.uiPlugin?	`EuiMarkdownEditorUiPlugin`
timelineIntegration?.hooks.useInsertTimeline	`(value: string, onChange: (newValue: string) => void): UseInsertTimelineReturn`
timelineIntegration?.ui?.renderInvestigateInTimelineActionComponent?	`(alertIds: string[]) => JSX.Element;` space to render `InvestigateInTimelineActionComponent`
timelineIntegration?.ui?renderTimelineDetailsPanel?	`() => JSX.Element;` space to render `TimelineDetailsPanel`
useFetchAlertData	`(alertIds: string[]) => [boolean, Record<string, Ecs>];` fetch alerts
userCanCrud	`boolean;` user permissions to crud

UI component:

`getCreateCase`

Arguments:

Property	Description
afterCaseCreated?	`(theCase: Case) => Promise<void>;` callback passing newly created case before pushCaseToExternalService is called
onCancel	`() => void;` callback when create case is canceled
onSuccess	`(theCase: Case) => Promise<void>;` callback passing newly created case after pushCaseToExternalService is called
timelineIntegration?.editor_plugins	Plugins needed for integrating timeline into markdown editor.
timelineIntegration?.editor_plugins.parsingPlugin	`Plugin;`
timelineIntegration?.editor_plugins.processingPluginRenderer	`React.FC<TimelineProcessingPluginRendererProps & { position: EuiMarkdownAstNodePosition }>`
timelineIntegration?.editor_plugins.uiPlugin?	`EuiMarkdownEditorUiPlugin`
timelineIntegration?.hooks.useInsertTimeline	`(value: string, onChange: (newValue: string) => void): UseInsertTimelineReturn`

UI component:

`getConfigureCases`

Arguments:

Property	Description
userCanCrud	`boolean;` user permissions to crud

UI component:

`getRecentCases`

Arguments:

Property	Description
allCasesNavigation	`CasesNavigation` route configuration for configure cases page
caseDetailsNavigation	`CasesNavigation<CaseDetailsHrefSchema, 'configurable'>` route configuration to generate the case details url for the case details page
createCaseNavigation	`CasesNavigation` route configuration for create case page
maxCasesToShow	`number;` number of cases to show in widget

UI component:

…/kibana into cases_moving_create

…into cases_moving_create

jbudz

limits.yml LGTM

x-pack/plugins/cases/public/common/mock/kibana_react.mock.ts

cnasikas · 2021-04-26T07:23:18Z

x-pack/plugins/cases/public/common/mock/index.ts

+ * 2.0.
+ */
+
+export * from './test_providers';


What about match_media and kibana_react.mock.ts (if needed. See my comment below)

there's no modules exported from match_media. it is a window mock, all you need to do is import like import '../../common/mock/match_media';

cnasikas · 2021-04-26T07:43:51Z

x-pack/plugins/security_solution/cypress/tasks/timeline.ts

@@ -73,6 +73,7 @@ export const addDescriptionToTimeline = (description: string) => {

 export const addNameToTimeline = (name: string) => {
  cy.get(TIMELINE_EDIT_MODAL_OPEN_BUTTON).first().click();
+  // cy.log('HERE:', cy.get(TIMELINE_TITLE_INPUT));


Why is commented out?

cnasikas · 2021-04-26T07:52:29Z

x-pack/plugins/security_solution/public/common/components/markdown_editor/plugins/index.ts

  getDefaultEuiMarkdownParsingPlugins,
  getDefaultEuiMarkdownProcessingPlugins,
  getDefaultEuiMarkdownUiPlugins,
 } from '@elastic/eui';
-
+// Remove after this issue is resolved: https://github.com/elastic/eui/issues/4688


The issue seems to be resolved.

its not merged into kibana yet i dont think

jk it is there now, ill remove it

jk there was a different error:

@chandlerprall says:

we'll cut a release tomorrow with that change, and depending on Greg's availability we'll get a Kibana upgrade started this week or next

I see. No worries!

cnasikas · 2021-04-26T07:57:40Z

x-pack/plugins/security_solution/public/common/components/markdown_editor/plugins/index.ts

+export const { uiPlugins, parsingPlugins, processingPlugins } = {
+  uiPlugins: getDefaultEuiMarkdownUiPlugins(),
+  parsingPlugins: getDefaultEuiMarkdownParsingPlugins(),
+  processingPlugins: getDefaultEuiMarkdownProcessingPlugins() as [


Why we need to cast it?

there was this but removing now elastic/eui#4688

jk #97646 (comment)

cnasikas · 2021-04-26T08:08:41Z

x-pack/plugins/cases/public/components/markdown_editor/types.ts

+
+import { FunctionComponent } from 'react';
+import { Plugin, PluggableList } from 'unified';
+// Remove after this issue is resolved: https://github.com/elastic/eui/issues/4688


The issue seems to be resolved.

see #97646 (comment)

cnasikas

Amazing PR! Thank you both for your hard work 🚀 . Code LTGM!

I manually tested the PR and I found the following:

Some API calls are being done twice. This probably means that an unnecessary render is being made somewhere. Specifically:

Single case view:

Creation / Single case view (?):

All cases view:

I attach an alert to a case but I cannot see the investigate in timeline action

If I open the timeline the title of the case in the breadcrumb is not displayed (Mike)

All cases modal bug when attaching a timeline to a case. This is happening if I am in the all pages view. If I am in the single case view it is not happening. (this is @stephmilovic commenting -> cant reproduce this either?!)

timeline_bug.mp4

Attach to an existing case is not working (this is @stephmilovic commenting -> i cannot reproduce this?!)

attach_to_case.mp4

Attach to a new case freezes Kibana as it does an infinitive loop (Mike). This is a know issue: [Security Solution][Timeline] Attach timeline to case freezes kibana #84013

attach_to_new_case.mp4

…lugin (#98189)

…ac_ui

stephmilovic · 2021-04-26T19:37:28Z

This commit fixes the below issue: b5d3932

Some API calls are being done twice. This probably means that an unnecessary render is being made somewhere. Specifically:

Single case view:

Creation / Single case view (?):

All cases view:

michaelolo24 · 2021-04-27T12:07:23Z

This commit: f5fa7f1

fixes:

attach_to_case.mp4

Attach to a new case freezes Kibana as it does an infinitive loop (Mike). This is a know issue: [Security Solution][Timeline] Attach timeline to case freezes kibana #84013

attach_to_new_case.mp4

michaelolo24 · 2021-04-28T13:50:31Z

This commit: df7097e (#97646) fixed an issue where attaching an alert to a new case from detections was not working

jonathan-buttner · 2021-04-28T14:14:52Z

...ck/plugins/security_solution/public/cases/components/timeline_actions/add_to_case_action.tsx

@@ -38,6 +38,18 @@ interface AddToCaseActionProps {
  ecsRowData: Ecs;
 }

+interface PostCommentArg {
+  caseId: string;
+  data: {


Not sure if it's worth it or not (or if it causes a circular dependency) but we might be able to pull the data type from the case common types:

https://github.com/elastic/kibana/blob/master/x-pack/plugins/cases/common/api/cases/comment.ts#L125

Yea, was trying to avoid a circular dependency when I tossed this together, but thinking about it more, since cases doesn't depend on Security Solution, it shouldn't be

jonathan-buttner

🚀

kibanamachine · 2021-04-28T16:30:41Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`cases`	-	252	+252
`securitySolution`	2174	2005	-169
total			+83

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`	2	337	+335
`securitySolution`	90	89	-1
total			+334

Async chunks

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

id	before	after	diff
`cases`	-	494.0KB	⚠️ +494.0KB
`securitySolution`	7.0MB	6.5MB	-468.0KB
total			+26.0KB

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
`cases`	1	7	+6
`security`	10	12	+2
`securitySolution`	7	8	+1
total			+9

Page load bundle

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

id	before	after	diff
`cases`	-	126.7KB	+126.7KB
`securitySolution`	206.1KB	160.0KB	-46.1KB
total			+80.6KB

Unknown metric groups

API count

id	before	after	diff
`cases`	2	349	+347
`securitySolution`	99	98	-1
total			+346

async chunk count

id	before	after	diff
`cases`	-	14	+14
`securitySolution`	25	19	-6
total			+8

History

💚 Build #122534 succeeded f5fa7f1
💚 Build #122501 succeeded abf8cd9
💛 Build #122404 was flaky cc21d3a
💚 Build #122357 succeeded 870610c
💚 Build #122329 succeeded 6cc459b

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

michaelolo24 and others added 30 commits March 10, 2021 12:17

init simple case ui plugin

756e5a5

remove hello world piece

59756e8

rename case to cases

2b816e8

Merge 2b816e8 into 81da4f7

ebc609b

move create

d5cbcd1

clearing type errs

841659b

clearing type errs

ead2da0

resolve issue w exports

7a32042

its working

359e8d1

we are so good at this

83f6517

add mock

3ab3352

fixed components tests

51f6f4d

flip USE_RAC_CASES_UI to false

8f1e82d

fix container tests

4763023

Merge branch 'cases_moving_create' of https://github.com/stephmilovic…

249383f

…/kibana into cases_moving_create

rm some comments

8f3424b

Merge branch 'cases_moving_create' of github.com:stephmilovic/kibana …

c1098f8

…into cases_moving_create

Merge branch 'master' into cases_moving_create

7d76248

fix more imports

4ff74fb

Merge branch 'cases_moving_create' of github.com:stephmilovic/kibana …

87a1cde

…into cases_moving_create

fix more imports

84714f9

fix mistake

5f5021d

add cases to kbn-optimizer/limits.yml

731039a

Fix i18n

debbcb0

Merge branch 'master' into cases_moving_create

53e1ba9

pr changes

907bfc1

master merge

4f941e1

fix type and test

82cd096

fix a gosh darn silly type

1cb3917

one more Security remove

6d04fb3

jbudz approved these changes Apr 22, 2021

View reviewed changes

Merge branch 'master' into cases_rac_ui

05aceaa

cnasikas reviewed Apr 26, 2021

View reviewed changes

x-pack/plugins/cases/public/common/mock/kibana_react.mock.ts Outdated Show resolved Hide resolved

cnasikas reviewed Apr 26, 2021

View reviewed changes

stephmilovic added 6 commits April 26, 2021 07:55

Merge branch 'master' into cases_rac_ui

6cc459b

pr changes 1

4b85082

ok undo

870610c

[Security Solution] [Cases] Polishing up the jest tests in cases ui p…

cc21d3a

…lugin (#98189)

fix double api calls

b5d3932

Merge branch 'cases_rac_ui' of github.com:elastic/kibana into cases_r…

abf8cd9

…ac_ui

fix infinite loop, improve breadcrumb

f5fa7f1

fix attach alert to new case

df7097e

jonathan-buttner reviewed Apr 28, 2021

View reviewed changes

stephmilovic added 2 commits April 28, 2021 08:29

Merge branch 'master' into cases_rac_ui

54d9730

rid of unnecessary log

e0e4bee

jonathan-buttner approved these changes Apr 28, 2021

View reviewed changes

michaelolo24 merged commit 2d5ff8a into master Apr 29, 2021

michaelolo24 deleted the cases_rac_ui branch April 29, 2021 11:41

michaelolo24 mentioned this pull request Apr 29, 2021

[SECURITY SOLUTIONS][Case Everywhere] Move All Case page #92423

Closed

7 tasks

stephmilovic mentioned this pull request Apr 29, 2021

[7.x] [Security Solution] [Cases] Cases UI Plugin for RAC (#97646) #98833

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Security Solution] [Cases] Cases UI Plugin for RAC #97646

[Security Solution] [Cases] Cases UI Plugin for RAC #97646

stephmilovic commented Apr 20, 2021 •

edited

Loading

jbudz left a comment

cnasikas Apr 26, 2021

stephmilovic Apr 26, 2021

cnasikas Apr 26, 2021

cnasikas Apr 26, 2021

stephmilovic Apr 26, 2021

stephmilovic Apr 26, 2021

stephmilovic Apr 26, 2021

stephmilovic Apr 26, 2021

cnasikas Apr 26, 2021

cnasikas Apr 26, 2021

stephmilovic Apr 26, 2021

stephmilovic Apr 26, 2021

cnasikas Apr 26, 2021

stephmilovic Apr 26, 2021

cnasikas left a comment •

edited by stephmilovic

Loading

stephmilovic commented Apr 26, 2021

michaelolo24 commented Apr 27, 2021

michaelolo24 commented Apr 28, 2021

jonathan-buttner Apr 28, 2021

michaelolo24 Apr 28, 2021

jonathan-buttner left a comment

kibanamachine commented Apr 28, 2021

API count

async chunk count

[Security Solution] [Cases] Cases UI Plugin for RAC #97646

[Security Solution] [Cases] Cases UI Plugin for RAC #97646

Conversation

stephmilovic commented Apr 20, 2021 • edited Loading

Summary

Testing

Cases UI

Embed Cases UI components in any Kibana plugin

Cases UI Methods

Methods:

getAllCases

getAllCasesSelectorModal

getCaseView

getCreateCase

getConfigureCases

getRecentCases

jbudz left a 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

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 left a comment • edited by stephmilovic Loading

Choose a reason for hiding this comment

stephmilovic commented Apr 26, 2021

michaelolo24 commented Apr 27, 2021

michaelolo24 commented Apr 28, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jonathan-buttner left a comment

Choose a reason for hiding this comment

kibanamachine commented Apr 28, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Public APIs missing exports

Page load bundle

API count

async chunk count

History

stephmilovic commented Apr 20, 2021 •

edited

Loading

`getAllCases`

`getAllCasesSelectorModal`

`getCaseView`

`getCreateCase`

`getConfigureCases`

`getRecentCases`

cnasikas left a comment •

edited by stephmilovic

Loading