github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[8.16] [Cloud Security] Fixes SVG flickering and adding insight telemetry (#198812) (#199141)

Browse source 
# Backport

This will backport the following commits from `main` to `8.16`:
- [[Cloud Security] Fixes SVG flickering and adding insight telemetry
(#198812)](https://github.com/elastic/kibana/pull/198812)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT
[{"author":{"name":"Jordan","email":"51442161+JordanSh@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-11-06T13:52:30Z","message":"[Cloud
Security] Fixes SVG flickering and adding insight telemetry
(#198812)","sha":"de46e7f0739eb14138655e204d4be77d8e24ff37","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Cloud
Security","backport:prev-minor","v8.16.0","backport:version","v8.17.0"],"title":"[Cloud
Security] Fixes SVG flickering and adding insight
telemetry","number":198812,"url":"https://github.com/elastic/kibana/pull/198812","mergeCommit":{"message":"[Cloud
Security] Fixes SVG flickering and adding insight telemetry
(#198812)","sha":"de46e7f0739eb14138655e204d4be77d8e24ff37"}},"sourceBranch":"main","suggestedTargetBranches":["8.16","8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/198812","number":198812,"mergeCommit":{"message":"[Cloud
Security] Fixes SVG flickering and adding insight telemetry
(#198812)","sha":"de46e7f0739eb14138655e204d4be77d8e24ff37"}},{"branch":"8.16","label":"v8.16.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Jordan <51442161+JordanSh@users.noreply.github.com>
This commit is contained in:
Kibana Machine 2024-11-07 02:42:31 +11:00 • committed by GitHub
parent c1e816018d
commit c9292405ee
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 109 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

17
x-pack/packages/kbn-cloud-security-posture/common/utils/ui_metrics.ts
View file

@ -10,6 +10,15 @@ import type { UsageCollectionSetup } from '@kbn/usage-collection-plugin/public';
export const APP_NAME = 'cloud-security';
export const MISCONFIGURATION_INSIGHT = 'misconfiguration-insight';
export const VULNERABILITIES_INSIGHT = 'vulnerabilities-insight';
export const MISCONFIGURATION_INSIGHT_HOST_DETAILS = `${MISCONFIGURATION_INSIGHT}-host-details`;
export const MISCONFIGURATION_INSIGHT_USER_DETAILS = `${MISCONFIGURATION_INSIGHT}-user-details`;
export const MISCONFIGURATION_INSIGHT_HOST_ENTITY_OVERVIEW = `${MISCONFIGURATION_INSIGHT}-host-entity-overview`;
export const MISCONFIGURATION_INSIGHT_USER_ENTITY_OVERVIEW = `${MISCONFIGURATION_INSIGHT}-user-entity-overview`;
export const VULNERABILITIES_INSIGHT_HOST_DETAILS = `${VULNERABILITIES_INSIGHT}-host-details`;
export const VULNERABILITIES_INSIGHT_HOST_ENTITY_OVERVIEW = `${VULNERABILITIES_INSIGHT}-host-entity-overview`;
export const ENTITY_FLYOUT_WITH_MISCONFIGURATION_VISIT =
'entity-flyout-with-misconfiguration-visits';
export const ENTITY_FLYOUT_WITH_VULNERABILITY_PREVIEW =
@ -41,7 +50,13 @@ type CloudSecurityUiCounters =
| typeof CREATE_DETECTION_RULE_FROM_FLYOUT
| typeof CREATE_DETECTION_FROM_TABLE_ROW_ACTION
| typeof GROUP_BY_CLICK
| typeof CHANGE_RULE_STATE;
| typeof CHANGE_RULE_STATE
| typeof MISCONFIGURATION_INSIGHT_HOST_DETAILS
| typeof MISCONFIGURATION_INSIGHT_USER_DETAILS
| typeof MISCONFIGURATION_INSIGHT_HOST_ENTITY_OVERVIEW
| typeof MISCONFIGURATION_INSIGHT_USER_ENTITY_OVERVIEW
| typeof VULNERABILITIES_INSIGHT_HOST_DETAILS
| typeof VULNERABILITIES_INSIGHT_HOST_ENTITY_OVERVIEW;
export class UiMetricService {
private usageCollection: UsageCollectionSetup | undefined;

21
x-pack/plugins/cloud_security_posture/public/components/empty_states_illustration_container.tsx Normal file
View file

@ -0,0 +1,21 @@
/*
* 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 React from 'react';
// dimensions of the SVGs used in the empty states illustrations
// e.g. x-pack/plugins/cloud_security_posture/public/assets/illustrations/clouds.svg
const SVG_HEIGHT = 209;
const SVG_WIDTH = 376;
/**
* A container component that maintains a fixed size for child elements.
* used for displaying the empty state illustrations and prevent flickering while the SVGs are loading.
*/
export const EmptyStatesIllustrationContainer: React.FC<{ children: React.ReactNode }> = ({
children,
}) => <div style={{ height: SVG_HEIGHT, width: SVG_WIDTH }}>{children}</div>;

21
x-pack/plugins/cloud_security_posture/public/components/no_findings_states/no_findings_states.tsx
View file

@ -26,6 +26,7 @@ import type { IndexDetails, CspStatusCode } from '@kbn/cloud-security-posture-co
import { useCspSetupStatusApi } from '@kbn/cloud-security-posture/src/hooks/use_csp_setup_status_api';
import { useLocation } from 'react-router-dom';
import { findingsNavigation } from '@kbn/cloud-security-posture';
import { EmptyStatesIllustrationContainer } from '../empty_states_illustration_container';
import { useAdd3PIntegrationRoute } from '../../common/api/use_wiz_integration_route';
import { FullSizeCenteredPage } from '../full_size_centered_page';
import { useCISIntegrationPoliciesLink } from '../../common/navigation/use_navigate_to_cis_integration_policies';
@ -191,7 +192,11 @@ const EmptySecurityFindingsPrompt = () => {
<EuiEmptyPrompt
style={{ padding: euiTheme.size.l }}
data-test-subj={PACKAGE_NOT_INSTALLED_TEST_SUBJECT}
icon={<EuiImage size="fullWidth" src={cloudsSVG} alt="clouds" role="presentation" />}
icon={
<EmptyStatesIllustrationContainer>
<EuiImage size="fullWidth" src={cloudsSVG} alt="clouds" role="presentation" />
</EmptyStatesIllustrationContainer>
}
title={
<h2>
<FormattedMessage
@ -264,12 +269,14 @@ const EmptySecurityFindingsPrompt = () => {
style={{ padding: euiTheme.size.l }}
data-test-subj={THIRD_PARTY_INTEGRATIONS_NO_MISCONFIGURATIONS_FINDINGS_PROMPT}
icon={
<EuiImage
size="fullWidth"
src={misconfigurationsVendorsSVG}
alt="misconfigurationsVendorsSVG"
role="presentation"
/>
<EmptyStatesIllustrationContainer>
<EuiImage
size="fullWidth"
src={misconfigurationsVendorsSVG}
alt="misconfigurationsVendorsSVG"
role="presentation"
/>
</EmptyStatesIllustrationContainer>
}
title={
<h2>

21
x-pack/plugins/cloud_security_posture/public/components/no_vulnerabilities_states.tsx
View file

@ -25,6 +25,7 @@ import type { IndexDetails } from '@kbn/cloud-security-posture-common';
import { useCspSetupStatusApi } from '@kbn/cloud-security-posture/src/hooks/use_csp_setup_status_api';
import { useLocation } from 'react-router-dom';
import { findingsNavigation } from '@kbn/cloud-security-posture';
import { EmptyStatesIllustrationContainer } from './empty_states_illustration_container';
import { VULN_MGMT_POLICY_TEMPLATE } from '../../common/constants';
import { FullSizeCenteredPage } from './full_size_centered_page';
import { CloudPosturePage } from './cloud_posture_page';
@ -84,7 +85,11 @@ const CnvmIntegrationNotInstalledEmptyPrompt = ({
<EuiEmptyPrompt
style={{ padding: euiTheme.size.l }}
data-test-subj={NO_VULNERABILITIES_STATUS_TEST_SUBJ.NOT_INSTALLED}
icon={<EuiImage size="fullWidth" src={cloudsSVG} alt="clouds" role="presentation" />}
icon={
<EmptyStatesIllustrationContainer>
<EuiImage size="fullWidth" src={cloudsSVG} alt="clouds" role="presentation" />
</EmptyStatesIllustrationContainer>
}
title={
<h2>
<FormattedMessage
@ -144,12 +149,14 @@ const CnvmIntegrationNotInstalledEmptyPrompt = ({
style={{ padding: euiTheme.size.l }}
data-test-subj={THIRD_PARTY_INTEGRATIONS_NO_VULNERABILITIES_FINDINGS_PROMPT}
icon={
<EuiImage
size="fullWidth"
src={vulnerabilitiesVendorsSVG}
alt="vulnerabilitiesVendorsSVG"
role="presentation"
/>
<EmptyStatesIllustrationContainer>
<EuiImage
size="fullWidth"
src={vulnerabilitiesVendorsSVG}
alt="vulnerabilitiesVendorsSVG"
role="presentation"
/>
</EmptyStatesIllustrationContainer>
}
title={
<h2>

2
x-pack/plugins/security_solution/public/flyout/document_details/left/components/host_details.tsx
View file

@ -359,11 +359,13 @@ export const HostDetails: React.FC<HostDetailsProps> = ({ hostName, timestamp, s
name={hostName}
direction="column"
data-test-subj={HOST_DETAILS_MISCONFIGURATIONS_TEST_ID}
telemetrySuffix={'host-details'}
/>
<VulnerabilitiesInsight
hostName={hostName}
direction="column"
data-test-subj={HOST_DETAILS_VULNERABILITIES_TEST_ID}
telemetrySuffix={'host-details'}
/>
</EuiFlexGrid>
<EuiSpacer size="l" />

1
x-pack/plugins/security_solution/public/flyout/document_details/left/components/user_details.tsx
View file

@ -359,6 +359,7 @@ export const UserDetails: React.FC<UserDetailsProps> = ({ userName, timestamp, s
name={userName}
direction="column"
data-test-subj={USER_DETAILS_MISCONFIGURATIONS_TEST_ID}
telemetrySuffix={'user-details'}
/>
</EuiFlexGrid>
<EuiSpacer size="l" />

2
x-pack/plugins/security_solution/public/flyout/document_details/right/components/host_entity_overview.tsx
View file

@ -285,10 +285,12 @@ export const HostEntityOverview: React.FC<HostEntityOverviewProps> = ({ hostName
fieldName={'host.name'}
name={hostName}
data-test-subj={ENTITIES_HOST_OVERVIEW_MISCONFIGURATIONS_TEST_ID}
telemetrySuffix={'host-entity-overview'}
/>
<VulnerabilitiesInsight
hostName={hostName}
data-test-subj={ENTITIES_HOST_OVERVIEW_VULNERABILITIES_TEST_ID}
telemetrySuffix={'host-entity-overview'}
/>
</EuiFlexGroup>
);

1
x-pack/plugins/security_solution/public/flyout/document_details/right/components/user_entity_overview.tsx
View file

@ -283,6 +283,7 @@ export const UserEntityOverview: React.FC<UserEntityOverviewProps> = ({ userName
fieldName={'user.name'}
name={userName}
data-test-subj={ENTITIES_USER_OVERVIEW_MISCONFIGURATIONS_TEST_ID}
telemetrySuffix={'user-entity-overview'}
/>
</EuiFlexGroup>
);

20
x-pack/plugins/security_solution/public/flyout/document_details/shared/components/misconfiguration_insight.tsx
View file

@ -5,12 +5,17 @@
* 2.0.
*/
import React, { useMemo } from 'react';
import React, { useEffect, useMemo } from 'react';
import { EuiFlexItem, type EuiFlexGroupProps, useEuiTheme } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import { css } from '@emotion/css';
import { useMisconfigurationPreview } from '@kbn/cloud-security-posture/src/hooks/use_misconfiguration_preview';
import { buildEntityFlyoutPreviewQuery } from '@kbn/cloud-security-posture-common';
import {
MISCONFIGURATION_INSIGHT,
uiMetricService,
} from '@kbn/cloud-security-posture-common/utils/ui_metrics';
import { METRIC_TYPE } from '@kbn/analytics';
import { InsightDistributionBar } from './insight_distribution_bar';
import { getFindingsStats } from '../../../../cloud_security_posture/components/misconfiguration/misconfiguration_preview';
import { FormattedCount } from '../../../../common/components/formatted_number';
@ -34,6 +39,10 @@ interface MisconfigurationsInsightProps {
* The data-test-subj to use for the component
*/
['data-test-subj']?: string;
/**
* used to track the instance of this component, prefer kebab-case
*/
telemetrySuffix?: string;
}
/*
@ -44,6 +53,7 @@ export const MisconfigurationsInsight: React.FC<MisconfigurationsInsightProps> =
fieldName,
direction,
'data-test-subj': dataTestSubj,
telemetrySuffix,
}) => {
const { scopeId, isPreview } = useDocumentDetailsContext();
const { euiTheme } = useEuiTheme();
@ -54,6 +64,14 @@ export const MisconfigurationsInsight: React.FC<MisconfigurationsInsightProps> =
pageSize: 1,
});
useEffect(() => {
uiMetricService.trackUiMetric(
METRIC_TYPE.COUNT,
`${MISCONFIGURATION_INSIGHT}-${telemetrySuffix}`
);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const passedFindings = data?.count.passed || 0;
const failedFindings = data?.count.failed || 0;
const totalFindings = useMemo(

20
x-pack/plugins/security_solution/public/flyout/document_details/shared/components/vulnerabilities_insight.tsx
View file

@ -5,13 +5,18 @@
* 2.0.
*/
import React, { useMemo } from 'react';
import React, { useEffect, useMemo } from 'react';
import { EuiFlexItem, type EuiFlexGroupProps, useEuiTheme } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import { css } from '@emotion/css';
import { useVulnerabilitiesPreview } from '@kbn/cloud-security-posture/src/hooks/use_vulnerabilities_preview';
import { buildEntityFlyoutPreviewQuery } from '@kbn/cloud-security-posture-common';
import { getVulnerabilityStats, hasVulnerabilitiesData } from '@kbn/cloud-security-posture';
import {
uiMetricService,
VULNERABILITIES_INSIGHT,
} from '@kbn/cloud-security-posture-common/utils/ui_metrics';
import { METRIC_TYPE } from '@kbn/analytics';
import { InsightDistributionBar } from './insight_distribution_bar';
import { FormattedCount } from '../../../../common/components/formatted_number';
import { PreviewLink } from '../../../shared/components/preview_link';
@ -30,6 +35,10 @@ interface VulnerabilitiesInsightProps {
* The data-test-subj to use for the component
*/
['data-test-subj']?: string;
/**
* used to track the instance of this component, prefer kebab-case
*/
telemetrySuffix?: string;
}
/*
@ -39,6 +48,7 @@ export const VulnerabilitiesInsight: React.FC<VulnerabilitiesInsightProps> = ({
hostName,
direction,
'data-test-subj': dataTestSubj,
telemetrySuffix,
}) => {
const { scopeId, isPreview } = useDocumentDetailsContext();
const { euiTheme } = useEuiTheme();
@ -49,6 +59,14 @@ export const VulnerabilitiesInsight: React.FC<VulnerabilitiesInsightProps> = ({
pageSize: 1,
});
useEffect(() => {
uiMetricService.trackUiMetric(
METRIC_TYPE.COUNT,
`${VULNERABILITIES_INSIGHT}-${telemetrySuffix}`
);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const { CRITICAL = 0, HIGH = 0, MEDIUM = 0, LOW = 0, NONE = 0 } = data?.count || {};
const totalVulnerabilities = useMemo(
() => CRITICAL + HIGH + MEDIUM + LOW + NONE,