[SecuritySolution] Replace risk score over time with Lens Embeddable (#…

…149035)

## Summary
Implements: #149015

Please Enable feature flags. Please add this to kibana.dev.yml
xpack.securitySolution.enableExperimental: ['chartEmbeddablesEnabled']

---
### Replace risk score over time with Lens Embeddable

Before:
<img width="2543" alt="Screenshot 2023-01-17 at 10 28 23"
src="https://user-images.githubusercontent.com/6295984/212875145-f39fef08-c152-4c7e-8d0f-cf8e259c0b05.png">

After:
<img width="926" alt="Screenshot 2023-01-24 at 15 03 40"
src="https://user-images.githubusercontent.com/6295984/214329885-71e8166b-07ec-4f09-bece-919189d655ea.png">


### Alerts By severity on host / network / user details should apply
global filters
<img width="1673" alt="Screenshot 2023-01-19 at 11 06 21"
src="https://user-images.githubusercontent.com/6295984/213426977-4b803513-69f4-4074-b45d-2002c3f8fecf.png">

### Styling for donuts on Entity Analytics dashboard
(Moving the legend to left side of the chart so its actions button
wouldn't overlap with chart action)
<img width="1654" alt="Screenshot 2023-01-19 at 11 08 47"
src="https://user-images.githubusercontent.com/6295984/213427320-0fa3a9aa-f0d4-435a-87d3-5108b5c7f991.png">


Preview:
[Host risk score over
time](https://kibana-pr-148624.kb.us-west2.gcp.elastic-cloud.com:9243/s/data/app/security/hosts/name/Angelas-MacBook-Pro.local/hostRisk?sourcerer=(default:(id:security-solution-data,selectedPatterns:!(%27filebeat-*%27,%27logs-*%27,%27packetbeat-*%27,%27-*elastic-cloud-logs-*%27)))&timerange=(global:(linkTo:!(timeline),timerange:(from:%272023-01-18T00:00:00.000Z%27,fromStr:now%2Fd,kind:relative,to:%272023-01-18T23:59:59.999Z%27,toStr:now%2Fd)),timeline:(linkTo:!(global),timerange:(from:%272023-01-18T00:00:00.000Z%27,fromStr:now%2Fd,kind:relative,to:%272023-01-18T23:59:59.999Z%27,toStr:now%2Fd)))&timeline=(activeTab:query,graphEventId:%27%27,id:%2736333270-9731-11ed-a0f5-f16ed1963ee6%27,isOpen:!f))
[User risk score over
time](https://kibana-pr-148624.kb.us-west2.gcp.elastic-cloud.com:9243/s/data/app/security/users/name/angelachuang/userRisk?sourcerer=(default:(id:security-solution-data,selectedPatterns:!(%27filebeat-*%27,%27logs-*%27,%27packetbeat-*%27,%27-*elastic-cloud-logs-*%27)))&timerange=(global:(linkTo:!(timeline),timerange:(from:%272023-01-18T00:00:00.000Z%27,fromStr:now%2Fd,kind:relative,to:%272023-01-18T23:59:59.999Z%27,toStr:now%2Fd)),timeline:(linkTo:!(global),timerange:(from:%272023-01-18T00:00:00.000Z%27,fromStr:now%2Fd,kind:relative,to:%272023-01-18T23:59:59.999Z%27,toStr:now%2Fd)))&timeline=(activeTab:query,graphEventId:%27%27,id:%2736333270-9731-11ed-a0f5-f16ed1963ee6%27,isOpen:!f))

https://p.elstc.co/paste/2MIN+pHd#TETZwPh15r64HQ2z0Cn26Z321XCxe+2DqliqF5-CHmr
Designers' review:
#149123

### Checklist

Delete any items that are not applicable to this PR.

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

x-pack/plugins/security_solution/public/common/components/charts/donutchart.tsx

@@ -17,6 +17,7 @@ import {
   PartitionLayout,
   defaultPartitionValueFormatter,
 } from '@elastic/charts';
+import type { FlattenSimpleInterpolation } from 'styled-components';
 import styled from 'styled-components';
 import { useTheme } from './common';
 import { DraggableLegend } from './draggable_legend';
@@ -56,21 +57,31 @@ export interface DonutChartProps {
 export interface DonutChartWrapperProps {
   children?: React.ReactElement;
   dataExists: boolean;
+  donutTextWrapperClassName?: string;
+  donutTextWrapperStyles?: FlattenSimpleInterpolation;
+  isChartEmbeddablesEnabled?: boolean;
   label?: React.ReactElement | string;
   title: React.ReactElement | string | number | null;
-  isChartEmbeddablesEnabled?: boolean;
 }
 
 /* Make this position absolute in order to overlap the text onto the donut */
 export const DonutTextWrapper = styled(EuiFlexGroup)<
-  EuiFlexGroupProps & { $isChartEmbeddablesEnabled?: boolean; $dataExists?: boolean }
+  EuiFlexGroupProps & {
+    $isChartEmbeddablesEnabled?: boolean;
+    $dataExists?: boolean;
+    className?: string;
+    donutTextWrapperStyles?: FlattenSimpleInterpolation;
+  }
 >`
   top: ${({ $isChartEmbeddablesEnabled, $dataExists }) =>
     $isChartEmbeddablesEnabled && !$dataExists ? `66%` : `34%;`};
   width: 100%;
   max-width: 77px;
   position: absolute;
   z-index: 1;
+
+  ${({ className, donutTextWrapperStyles }) =>
+    className && donutTextWrapperStyles ? `&.${className} {${donutTextWrapperStyles}}` : ''}
 `;
 
 export const StyledEuiFlexItem = styled(EuiFlexItem)`
@@ -81,6 +92,8 @@ export const StyledEuiFlexItem = styled(EuiFlexItem)`
 const DonutChartWrapperComponent: React.FC<DonutChartWrapperProps> = ({
   children,
   dataExists,
+  donutTextWrapperClassName,
+  donutTextWrapperStyles,
   isChartEmbeddablesEnabled,
   label,
   title,
@@ -106,7 +119,9 @@ const DonutChartWrapperComponent: React.FC<DonutChartWrapperProps> = ({
           $dataExists={dataExists}
           $isChartEmbeddablesEnabled={isChartEmbeddablesEnabled}
           alignItems="center"
+          className={donutTextWrapperClassName}
           direction="column"
+          donutTextWrapperStyles={donutTextWrapperStyles}
           gutterSize="none"
           justifyContent="center"
         >

x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/risk_scores/risk_score_donut.ts

@@ -28,13 +28,13 @@ export const getRiskScoreDonutAttributes: GetLensAttributes = (
             metrics: ['75179122-96fc-40e1-93b4-8e9310af5f06'],
             numberDisplay: 'value',
             categoryDisplay: 'hide',
-            legendDisplay: 'hide',
+            legendDisplay: 'show',
             nestedLegend: true,
             layerType: 'data',
-            legendSize: 'small',
-            legendPosition: 'right',
+            legendSize: 'medium',
+            legendPosition: 'left',
             percentDecimals: 2,
-            emptySizeRatio: 0.8,
+            emptySizeRatio: 0.82,
           },
         ],
       },

x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/risk_scores/risk_score_over_time_area.test.ts

@@ -0,0 +1,58 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { renderHook } from '@testing-library/react-hooks';
+import { wrapper } from '../../../mocks';
+
+import { useLensAttributes } from '../../../use_lens_attributes';
+
+import { getRiskScoreOverTimeAreaAttributes } from './risk_score_over_time_area';
+
+jest.mock('../../../../../containers/sourcerer', () => ({
+  useSourcererDataView: jest.fn().mockReturnValue({
+    selectedPatterns: ['auditbeat-mytest-*'],
+    dataViewId: 'security-solution-my-test',
+    indicesExist: true,
+  }),
+}));
+
+jest.mock('../../../../../utils/route/use_route_spy', () => ({
+  useRouteSpy: jest.fn().mockReturnValue([
+    {
+      detailName: 'mockHost',
+      pageName: 'hosts',
+      tabName: 'hostRisk',
+    },
+  ]),
+}));
+
+jest.mock('uuid', () => ({
+  v4: jest
+    .fn()
+    .mockReturnValueOnce('d594baeb-5eca-480c-8885-ba79eaf41372')
+    .mockReturnValueOnce('c604baeb-5eca-480c-8885-ba79eaf41372')
+    .mockReturnValueOnce('e614baeb-5eca-480c-8885-ba79eaf41372')
+    .mockReturnValue('1dd5663b-f062-43f8-8688-fc8166c2ca8e'),
+}));
+
+describe('getRiskScoreOverTimeAreaAttributes', () => {
+  it('should render', () => {
+    const { result } = renderHook(
+      () =>
+        useLensAttributes({
+          getLensAttributes: getRiskScoreOverTimeAreaAttributes,
+          stackByField: 'host',
+          extraOptions: {
+            spaceId: 'mockSpaceId',
+          },
+        }),
+      { wrapper }
+    );
+
+    expect(result?.current).toMatchSnapshot();
+  });
+});