[Security Solution][Tech Debt] Decoupled TGrid state part from Timelines under the security_solution store

[YulNaumenko]

Resolves #143153
This was not initially in the scope, but this PR contains the changes, which allows to reduce the bundle size of the security_solution plugin:

Before changes

After

The bundle size reduce was met by moving getSubPluginRoutesByCapabilities and manageOldSiemRoutes to the lazy loaded chunk.
Both functions are used after the application mounted, so shouldn't stop the security_solution plugin to load.

The actual theme of the PR is about the changes in the security_solution store related to splitting the logic for timelines and data tables.

New security solution redux store structure.

New TGrid redux store structure.

Removed fields which is not used by TGrid:

documentType: string;
excludedRowRendererIds: RowRendererId[];
filterManager?: FilterManager;
footerText?: string | React.ReactNode;
dataProviders: DataProvider[];
dateRange: {
  start: string;
  end: string;
};
kqlQuery: {
  // TODO convert to nodebuilder
  filterQuery: SerializedFilterQuery | null;
};
timelineType: 'default' | 'template';
version: string | null;

To meet the requirements, the next changes was done: 1. Extended `security_solution` redux store to have separately state for the timelines and the data table:

2. Moved data table ids to own TableId enum and reduce TimelineId to keep only timelines:

3. Renamed storageTimelines?: Pick<TimelineState, 'timelineById'>; to storageDataTables?: Pick<TableState, 'tableById'>;, because we store only the data tables info about the user settings changes.

New local storage structure for the data table

4. For the components which are common for Timelines and TGrid and also contains the selectors or actions to fetch/update the store data, the temporary approach is to pick the proper action or selector based on the `scopeId`. Not perfect, because components should vary the logic based on the input, but to reduce the scope of the changes I suggest accept it as a first iteration and then follow up on modifying the components to use more extensible and stateless approach. For example, this is the code to pick the right selector based on the `scopeId`:

const getScope = useMemo(() => {
      if (isTimelineScope(scopeId)) {
        return timelineSelectors.getTimelineByIdSelector();
      } else if (isInTableScope(scopeId)) {
        return dataTableSelectors.getTableByIdSelector();
      }
    }, [scopeId]);

Fo actions:

if (isTimelineScope(scopeId)) {
            dispatch(
              timelineActions.removeColumn({
                columnId: column.id,
                id: scopeId,
              })
            );
          } else if (isInTableScope(scopeId)) {
            dispatch(
              dataTableActions.removeColumn({
                columnId: column.id,
                id: scopeId,
              })
            );
          }

This changes is applied to the next list of the hooks and components:
EventFieldsBrowser, useAlertsActions, AddressLinksItemComponent, GraphOverlayComponent, UseDetailPanelReturn, DetailsPanel, HeaderActionsComponent, ActionsComponent

Only data table selector and actions is used for PreviewHistogram, HostDetailsComponent, HostsComponent, HostsTabs, SessionsView, NetworkComponent

5. ❗ ❗ ❗ This PR still has some temporary 👎 - need to have reduceReducers to manage addProviderToTimeline logic which is not movable for now to security_solution plugin. This is the specific part of the timeline data store management in security_solution plugin from the timelines plugin, which is used by other plugins as

timelines.getHoverActions().getAddToTimelineButton

to avoid the circular dependancies (particularly for osquery plugin, because this is not a sub plugin for security_solution and no way to use the store and security context like we did for threat_intelligence plugin).
To make it at least better organized, moved addProviderToTimeline action to the new timeline folder under the x-pack/plugins/timelines/public/store.
Exposed the reducer from the timeline plugin interface:

getTimelineReducer: () => {
        return timelineReducer;
      },

and combined this to manage the timeline part of the security_solution store.

6. Changed the action for EventsQueryTabBodyComponent to update the dataTable store:
   from

timelineActions.initializeTGridSettings({
        id: timelineId,

to

dataTableActions.initializeTGridSettings({
     id: tableId,

7. Exposed tableDefaults for the dataTable
8. Cleanup work. Removed some not used functionality:

• removed not used props for TGridModel
• removed not used actions/helpers and reducers from TGrid store in x-pack/plugins/timelines/public/store/t_grid
• renamed actions to correspond to the TGrid context
• removed not used props for integrated TGrid
• removed not used actions/helpers and reducers from Timelines store in x-pack/plugins/security_solution/public/timelines/store/timeline

9. Renamed timelineId to scopeId for the next

interfaces

CellValueElementProps
EnrichedFieldInfo

and

components

DetailsPanel
BarChartComponent
DraggableLegendItemComponent
DraggableWrapperComponent
DefaultDraggable
AlertSummaryView
EnrichmentDescription
EnrichmentSummary
Overview
EventDetailsComponent
RelatedAlertsByProcessAncestry
Insights
RelatedAlertsBySession
RelatedAlertsBySourceEvent
Overview
StatusPopoverButton
ActionCell
PrevalenceCell
SummaryValueCell
EventsQueryTabBody
ShowTopNButton
HoverActions
MatrixHistogramComponent
SessionsViewComponent
StatefulTopNComponent
TopNComponent
UseAlertPrevalence
ExpandedCellValueActionsComponent
FieldValueCell
AlertsTableComponent
PreviewTableCellRenderer
PreviewRenderCellValue
TakeActionDropdown
RenderCellValue
DefaultCellRenderer
DetectionEnginePageComponent
RuleDetailsPageComponent
EventsQueryTabBody
EventsByDatasetComponent
DraggableWrapper
ExpandableEvent
FlyoutBodyComponent
FlyoutFooterComponent
EventDetailsPanelComponent

10. Modified `StatefulEventsViewerComponent` to manage data tables actions and selectors, removed not used properties. Use `defaultModel: SubsetTGridModel;` instead of `defaultModel: SubsetTimelineModel;` 11. Changed `eventsViewerSelector` to use data table selector `getTableByIdSelector` instead of timelines `getTimelineByIdSelector`. 12. Changed all usage of `timelineSelectors.getManageTimelineById()` to `timelineSelectors.getTimelineByIdSelector()` 13. Extended `x-pack/plugins/security_solution/public/common/mock/global_state.ts` with dataTable mock. 14. Exposed all data table related store functionality under the folder `x-pack/plugins/security_solution/public/common/store/data_table`: model, defaults, selectors and actions imported from timelines plugin.

[YulNaumenko]

Sync load times look great, thank you for improving it. Do we know what's going on with the async size doubling?

@jbudz I've reduced twice the async chunks under the current PR and opened a follow up issue to revisit in general how we approach the bundle size.

[michaelolo24]

👌🏾

[jbudz]

sync size changes/limits.yml LGTM. I was advised to leave the async bundles out of scope for the operations review.

[michaelolo24]

Thanks for making these changes! Did clickthrough testing for the tables including the detail flyouts, hover action functionality, and column persistence. It all looks to be working as expected! Thanks, LGTM!

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: 667a7f7

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
securitySolution	3165	3169	+4

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
securitySolution	54	75	+21
timelines	346	348	+2
total			+23

Async chunks

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

id	before	after	diff
securitySolution	6.6MB	9.3MB	⚠️ +2.8MB
timelines	26.4KB	26.3KB	-92.0B
total			⚠️ +2.8MB

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
securitySolution	23	26	+3
timelines	33	32	-1
total			+2

Page load bundle

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

id	before	after	diff
securitySolution	265.3KB	51.1KB	-214.3KB
timelines	269.3KB	222.2KB	-47.1KB
total			-261.4KB

Unknown metric groups

API count

id	before	after	diff
securitySolution	55	112	+57
timelines	452	457	+5
total			+62

async chunk count

id	before	after	diff
securitySolution	32	39	+7

ESLint disabled in files

id	before	after	diff
timelines	2	0	-2

ESLint disabled line counts

id	before	after	diff
timelines	36	34	-2

Total ESLint disabled count

id	before	after	diff
timelines	38	34	-4

History

• 💔 Build #81135 failed 59e2944
• 💚 Build #80893 succeeded 7b3724b
• 💚 Build #80883 succeeded 1203072
• 💔 Build #80866 failed 8d45155
• 💔 Build #80773 failed 8618487

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

cc @YulNaumenko