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

kibana-cloud-security-posture owned UX adjustment for borealis (#205136)

Browse source 
## Summary

This PR covers some of the changes required for the new Borealis theme:
- https://github.com/elastic/security-team/issues/11230 

The detailed guide of migrating to Borealis can be found in this meta
ticket:
- https://github.com/elastic/kibana/issues/199715

As the work is still in progress, here are the details of what is
included in this PR:
- the full migration is done for flows related to Cloud Security
Posture. One requirement from EUI is not fulfilled, as we switched to
hardcoded severity colors and hardcoded failed/passed misconfig finding
colors. This is because the new severity color palette built by EUI team
is not yet approved by Security Designers, see
https://elastic.slack.com/archives/C0851RDCWPP/p1736954935896329 for
more details
- I made some straightforward changes to Cloud Defend and k8s dashboard
plugins and added some todos, but these plugins are decommissioned in
Serverless and from 9.0, so no thorough testing is required
- In the Session View I made some straightforward changes according to
the EUI guide and added TODOs where feedback from designers is required.
Still waiting for the designer's feedback, but I think we can safely
merge the changes present in this PR and it will bring Session View to a
better state before 9.0 FF

Amsterdam vs Borealis comparison screenshots for CSP and Session View:

https://www.figma.com/design/XPKYLgZcoI61V3RUfHoHg9/Untitled?node-id=41-42&t=zLvulagbqCiXhrAo-0

### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [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] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [x] This was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.
- [x] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Maxim Kholod 2025-01-21 10:21:03 +01:00 • committed by GitHub
parent 4a6891ff9f
commit 35794a00af
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
47 changed files with 538 additions and 469 deletions
Download patch file Download diff file Expand all files Collapse all files

4
x-pack/platform/packages/shared/kbn-cloud-security-posture/common/constants.ts
View file

@ -5,6 +5,7 @@
* 2.0.
*/
import { VulnSeverity } from './types/vulnerabilities';
import { MisconfigurationEvaluationStatus } from './types/misconfigurations';
export const KSPM_POLICY_TEMPLATE = 'kspm';
export const CSPM_POLICY_TEMPLATE = 'cspm';
@ -48,7 +49,8 @@ export const VULNERABILITIES_SEVERITY: Record<VulnSeverity, VulnSeverity> = {
UNKNOWN: 'UNKNOWN',
};
export const MISCONFIGURATION_STATUS: Record<string, string> = {
export const MISCONFIGURATION_STATUS: Record<string, MisconfigurationEvaluationStatus> = {
PASSED: 'passed',
FAILED: 'failed',
UNKNOWN: 'unknown',
};

1
x-pack/platform/packages/shared/kbn-cloud-security-posture/common/index.ts
View file

@ -24,6 +24,7 @@ export type {
} from './schema/vulnerabilities/csp_vulnerability_finding';
export type { BenchmarksCisId } from './types/benchmark';
export type { VulnSeverity } from './types/vulnerabilities';
export type { MisconfigurationEvaluationStatus } from './types/misconfigurations';
export * from './constants';
export {
extractErrorMessage,

8
x-pack/platform/packages/shared/kbn-cloud-security-posture/common/types/misconfigurations.ts Normal file
View file

@ -0,0 +1,8 @@
/*
* 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.
*/
export type MisconfigurationEvaluationStatus = 'passed' | 'failed' | 'unknown';

13
x-pack/solutions/security/packages/distribution_bar/src/distribution_bar.stories.tsx
View file

@ -5,7 +5,6 @@
* 2.0.
*/
import React from 'react';
import { euiThemeVars } from '@kbn/ui-theme';
import { EuiTitle, EuiSpacer } from '@elastic/eui';
import { DistributionBar as DistributionBarComponent } from '..';
@ -13,13 +12,13 @@ const mockStatsFindings = [
{
key: 'passed',
count: 90,
color: euiThemeVars.euiColorVis0,
color: 'green',
label: 'Passed',
},
{
key: 'failed',
count: 10,
color: euiThemeVars.euiColorVis9,
color: 'red',
label: <>{'Failed'}</>,
},
];
@ -28,22 +27,22 @@ const mockStatsAlerts = [
{
key: 'low',
count: 1000,
color: euiThemeVars.euiColorVis0,
color: 'green',
},
{
key: 'medium',
count: 800,
color: euiThemeVars.euiColorVis5,
color: 'gold',
},
{
key: 'high',
count: 300,
color: euiThemeVars.euiColorVis7,
color: 'orange',
},
{
key: 'critical',
count: 50,
color: euiThemeVars.euiColorVis9,
color: 'red',
},
];

1
x-pack/solutions/security/packages/distribution_bar/tsconfig.json
View file

@ -13,7 +13,6 @@
},
"include": ["**/*.ts", "**/*.tsx"],
"kbn_references": [
"@kbn/ui-theme",
],
"exclude": ["target/**/*"]
}

7
x-pack/solutions/security/packages/kbn-cloud-security-posture/public/index.ts
View file

@ -6,13 +6,16 @@
*/
export * from './src/types';
export * from './src/constants/component_constants';
export * from './src/constants/navigation';
export type { NavFilter } from './src/utils/query_utils';
export { showErrorToast } from './src/utils/show_error_toast';
export { encodeQuery, decodeQuery } from './src/utils/query_utils';
export { CspEvaluationBadge } from './src/components/csp_evaluation_badge';
export { getSeverityStatusColor, getCvsScoreColor } from './src/utils/get_vulnerability_colors';
export {
getSeverityStatusColor,
getCvsScoreColor,
getMisconfigurationStatusColor,
} from './src/utils/get_finding_colors';
export { getSeverityText } from './src/utils/get_vulnerability_text';
export { getVulnerabilityStats, hasVulnerabilitiesData } from './src/utils/vulnerability_helpers';
export { CVSScoreBadge, SeverityStatusBadge } from './src/components/vulnerability_badges';

20
x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/components/csp_evaluation_badge.tsx
View file

@ -6,28 +6,24 @@
*/
import React from 'react';
import { EuiBadge, type EuiBadgeProps } from '@elastic/eui';
import { EuiBadge } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import { css } from '@emotion/react';
import { statusColors } from '../constants/component_constants';
import { MISCONFIGURATION_STATUS } from '@kbn/cloud-security-posture-common';
import type { MisconfigurationEvaluationStatus } from '@kbn/cloud-security-posture-common';
import { getMisconfigurationStatusColor } from '../utils/get_finding_colors';
interface Props {
type?: 'passed' | 'failed';
type?: MisconfigurationEvaluationStatus;
}
// 'fail' / 'pass' are same chars length, but not same width size.
// 46px is used to make sure the badge is always the same width.
const BADGE_WIDTH = '46px';
const getColor = (type: Props['type']): EuiBadgeProps['color'] => {
if (type === 'passed') return statusColors.passed;
if (type === 'failed') return statusColors.failed;
return 'default';
};
export const CspEvaluationBadge = ({ type }: Props) => (
<EuiBadge
color={getColor(type)}
color={getMisconfigurationStatusColor(type)}
css={css`
width: ${BADGE_WIDTH};
display: flex;
@ -35,12 +31,12 @@ export const CspEvaluationBadge = ({ type }: Props) => (
`}
data-test-subj={`${type}_finding`}
>
{type === 'failed' ? (
{type === MISCONFIGURATION_STATUS.FAILED ? (
<FormattedMessage
id="securitySolutionPackages.csp.cspEvaluationBadge.failLabel"
defaultMessage="Fail"
/>
) : type === 'passed' ? (
) : type === MISCONFIGURATION_STATUS.PASSED ? (
<FormattedMessage
id="securitySolutionPackages.csp.cspEvaluationBadge.passLabel"
defaultMessage="Pass"

12
x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/components/vulnerability_badges.tsx
View file

@ -5,12 +5,13 @@
* 2.0.
*/
import { EuiBadge, EuiIcon, EuiTextColor } from '@elastic/eui';
import { EuiBadge, EuiIcon, EuiTextColor, useEuiTheme } from '@elastic/eui';
import React from 'react';
import { css } from '@emotion/react';
import { float } from '@elastic/elasticsearch/lib/api/types';
import type { VulnSeverity } from '@kbn/cloud-security-posture-common';
import { getCvsScoreColor, getSeverityStatusColor } from '../utils/get_vulnerability_colors';
import { useGetCvsScoreColor } from '../hooks/use_get_cvs_score_color';
import { useGetSeverityStatusColor } from '../hooks/use_get_severity_status_color';
const VULNERABILITIES_CVSS_SCORE_BADGE_SUBJ = 'vulnerabilities_cvss_score_badge';
@ -24,6 +25,9 @@ interface SeverityStatusBadgeProps {
}
export const CVSScoreBadge = ({ score, version }: CVSScoreBadgeProps) => {
const { euiTheme } = useEuiTheme();
const { getCvsScoreColor } = useGetCvsScoreColor();
if (!score) return null;
const color = getCvsScoreColor(score);
@ -48,7 +52,7 @@ export const CVSScoreBadge = ({ score, version }: CVSScoreBadgeProps) => {
css={css`
width: 1px;
border: 0 none;
background-color: rgba(255, 255, 255, 0.2);
background-color: ${euiTheme.border.color};
margin: 0px 6px;
`}
/>
@ -60,6 +64,8 @@ export const CVSScoreBadge = ({ score, version }: CVSScoreBadgeProps) => {
};
export const SeverityStatusBadge = ({ severity }: SeverityStatusBadgeProps) => {
const { getSeverityStatusColor } = useGetSeverityStatusColor();
if (!severity) return null;
const color = getSeverityStatusColor(severity);

16
x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/constants/component_constants.ts
View file

@ -1,16 +0,0 @@
/*
* 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 { euiThemeVars } from '@kbn/ui-theme';
export const statusColors = {
passed: euiThemeVars.euiColorSuccess,
failed: euiThemeVars.euiColorVis9,
unknown: euiThemeVars.euiColorLightShade,
};
export const HOST_NAME = 'host.name';
export const USER_NAME = 'user.name';

20
x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/hooks/use_get_cvs_score_color.ts Normal file
View file

@ -0,0 +1,20 @@
/*
* 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 { useEuiTheme } from '@elastic/eui';
import { getCvsScoreColor as getCvsScoreColorUtil } from '../..';
export const useGetCvsScoreColor = () => {
const { euiTheme } = useEuiTheme();
const getCvsScoreColor = (score: number) => {
return getCvsScoreColorUtil(score, euiTheme);
};
return { getCvsScoreColor };
};

19
x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/hooks/use_get_severity_status_color.ts Normal file
View file

@ -0,0 +1,19 @@
/*
* 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 { useEuiTheme } from '@elastic/eui';
import { VulnSeverity } from '@kbn/cloud-security-posture-common';
import { getSeverityStatusColor as getSeverityStatusColorUtil } from '../..';
export const useGetSeverityStatusColor = () => {
const { euiTheme } = useEuiTheme();
const getSeverityStatusColor = (status: VulnSeverity) => {
return getSeverityStatusColorUtil(status, euiTheme);
};
return { getSeverityStatusColor };
};

77
x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/utils/get_finding_colors.test.ts Normal file
View file

@ -0,0 +1,77 @@
/*
* 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 { getCvsScoreColor, getSeverityStatusColor, SEVERITY_COLOR } from './get_finding_colors';
import { EuiThemeComputed } from '@elastic/eui';
const mockEuiThemeBorealis = {
themeName: 'borialis',
};
describe('getSeverityStatusColor', () => {
it('should return the correct color for LOW severity', () => {
expect(getSeverityStatusColor('LOW', mockEuiThemeBorealis as EuiThemeComputed)).toBe(
SEVERITY_COLOR.low
);
});
it('should return the correct color for MEDIUM severity', () => {
expect(getSeverityStatusColor('MEDIUM', mockEuiThemeBorealis as EuiThemeComputed)).toBe(
SEVERITY_COLOR.medium
);
});
it('should return the correct color for HIGH severity', () => {
expect(getSeverityStatusColor('HIGH', mockEuiThemeBorealis as EuiThemeComputed)).toBe(
SEVERITY_COLOR.high
);
});
it('should return the correct color for CRITICAL severity', () => {
expect(getSeverityStatusColor('CRITICAL', mockEuiThemeBorealis as EuiThemeComputed)).toBe(
SEVERITY_COLOR.critical
);
});
it('should return the correct color for an unknown severity', () => {
expect(getSeverityStatusColor('UNKNOWN', mockEuiThemeBorealis as EuiThemeComputed)).toBe(
SEVERITY_COLOR.unknown
);
});
});
describe('getCvsScoreColor', () => {
it('returns correct color for low severity score', () => {
expect(getCvsScoreColor(1.5, mockEuiThemeBorealis as EuiThemeComputed)).toBe(
SEVERITY_COLOR.low
);
});
it('returns correct color for medium severity score', () => {
expect(getCvsScoreColor(5.5, mockEuiThemeBorealis as EuiThemeComputed)).toBe(
SEVERITY_COLOR.medium
);
});
it('returns correct color for high severity score', () => {
expect(getCvsScoreColor(7.9, mockEuiThemeBorealis as EuiThemeComputed)).toBe(
SEVERITY_COLOR.high
);
});
it('returns correct color for critical severity score', () => {
expect(getCvsScoreColor(10.0, mockEuiThemeBorealis as EuiThemeComputed)).toBe(
SEVERITY_COLOR.critical
);
});
it('returns correct color for low severity score for undefined value', () => {
expect(getCvsScoreColor(-0.2, mockEuiThemeBorealis as EuiThemeComputed)).toBe(
SEVERITY_COLOR.unknown
);
});
});

108
x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/utils/get_finding_colors.ts Normal file
View file

@ -0,0 +1,108 @@
/*
* 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 { EuiThemeComputed } from '@elastic/eui';
import { euiThemeVars } from '@kbn/ui-theme'; // TODO: replace with euiTheme
import type {
VulnSeverity,
MisconfigurationEvaluationStatus,
} from '@kbn/cloud-security-posture-common';
import {
VULNERABILITIES_SEVERITY,
MISCONFIGURATION_STATUS,
} from '@kbn/cloud-security-posture-common';
const isAmsterdam = (euiThemeName: string) => {
return euiThemeName?.toLowerCase().includes('amsterdam');
};
// Designers blocked the migration to tokens from EUI during the Borealys theme migration.
// We keep using hardcoded colors until security severity palette is ready https://github.com/elastic/kibana/issues/203387
// TODO: Borealis migration - move from hardcoded values to severity palette https://github.com/elastic/security-team/issues/11606
export const SEVERITY_COLOR = {
critical: '#E7664C',
high: '#DA8B45',
medium: '#D6BF57',
low: '#54B399',
unknown: '#aaa',
} as const;
// TODO: Borealis migration - migrate to security severity palette when it's ready https://github.com/elastic/security-team/issues/11606
export const getSeverityStatusColor = (
severity: VulnSeverity,
euiTheme: EuiThemeComputed
): string => {
// TODO: Borealis migration - remove old mapping in main after Serverless switched to Borealis
if (euiTheme && isAmsterdam(euiTheme.themeName)) {
switch (severity) {
case VULNERABILITIES_SEVERITY.LOW:
return euiThemeVars.euiColorVis0;
case VULNERABILITIES_SEVERITY.MEDIUM:
return euiThemeVars.euiColorVis5_behindText;
case VULNERABILITIES_SEVERITY.HIGH:
return euiThemeVars.euiColorVis9_behindText;
case VULNERABILITIES_SEVERITY.CRITICAL:
return euiThemeVars.euiColorDanger;
default:
return '#aaa';
}
}
switch (severity) {
case VULNERABILITIES_SEVERITY.LOW:
return SEVERITY_COLOR.low;
case VULNERABILITIES_SEVERITY.MEDIUM:
return SEVERITY_COLOR.medium;
case VULNERABILITIES_SEVERITY.HIGH:
return SEVERITY_COLOR.high;
case VULNERABILITIES_SEVERITY.CRITICAL:
return SEVERITY_COLOR.critical;
default:
return SEVERITY_COLOR.unknown;
}
};
export const getCvsScoreColor = (score: number, euiTheme: EuiThemeComputed): string | undefined => {
// TODO: Borealis migration - remove old mapping in main when Serverless switched to Borealis
if (euiTheme && isAmsterdam(euiTheme.themeName)) {
if (score <= 4) {
return euiThemeVars.euiColorVis0; // low severity
} else if (score >= 4 && score <= 7) {
return euiThemeVars.euiColorVis7; // medium severity
} else if (score >= 7 && score <= 9) {
return euiThemeVars.euiColorVis9; // high severity
} else if (score >= 9) {
return euiThemeVars.euiColorDanger; // critical severity
}
}
if (score >= 0 && score <= 4) {
return getSeverityStatusColor(VULNERABILITIES_SEVERITY.LOW, euiTheme);
} else if (score >= 4 && score <= 7) {
return getSeverityStatusColor(VULNERABILITIES_SEVERITY.MEDIUM, euiTheme);
} else if (score >= 7 && score <= 9) {
return getSeverityStatusColor(VULNERABILITIES_SEVERITY.HIGH, euiTheme);
} else if (score >= 9) {
return getSeverityStatusColor(VULNERABILITIES_SEVERITY.CRITICAL, euiTheme);
} else {
return getSeverityStatusColor(VULNERABILITIES_SEVERITY.UNKNOWN, euiTheme);
}
};
// TODO: Borealis migration - migrate to EUI color tokens when they are ready https://github.com/elastic/security-team/issues/11606
export const getMisconfigurationStatusColor = (
status?: MisconfigurationEvaluationStatus
): string => {
switch (status) {
case MISCONFIGURATION_STATUS.PASSED:
return SEVERITY_COLOR.low;
case MISCONFIGURATION_STATUS.FAILED:
return SEVERITY_COLOR.critical;
default:
return SEVERITY_COLOR.unknown;
}
};

52
x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/utils/get_vulnerabilitiy_colors.test.ts
View file

@ -1,52 +0,0 @@
/*
* 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 { euiThemeVars } from '@kbn/ui-theme';
import { getCvsScoreColor, getSeverityStatusColor } from './get_vulnerability_colors';
describe('getSeverityStatusColor', () => {
it('should return the correct color for LOW severity', () => {
expect(getSeverityStatusColor('LOW')).toBe(euiThemeVars.euiColorVis0);
});
it('should return the correct color for MEDIUM severity', () => {
expect(getSeverityStatusColor('MEDIUM')).toBe(euiThemeVars.euiColorVis5_behindText);
});
it('should return the correct color for HIGH severity', () => {
expect(getSeverityStatusColor('HIGH')).toBe(euiThemeVars.euiColorVis9_behindText);
});
it('should return the correct color for CRITICAL severity', () => {
expect(getSeverityStatusColor('CRITICAL')).toBe(euiThemeVars.euiColorDanger);
});
it('should return #aaa for an unknown severity', () => {
expect(getSeverityStatusColor('UNKNOWN')).toBe('#aaa');
});
});
describe('getCvsScoreColor', () => {
it('returns correct color for low severity score', () => {
expect(getCvsScoreColor(1.5)).toBe(euiThemeVars.euiColorVis0);
});
it('returns correct color for medium severity score', () => {
expect(getCvsScoreColor(5.5)).toBe(euiThemeVars.euiColorVis7);
});
it('returns correct color for high severity score', () => {
expect(getCvsScoreColor(7.9)).toBe(euiThemeVars.euiColorVis9);
});
it('returns correct color for critical severity score', () => {
expect(getCvsScoreColor(10.0)).toBe(euiThemeVars.euiColorDanger);
});
it('returns correct color for low severity score for undefined value', () => {
expect(getCvsScoreColor(-0.2)).toBe(euiThemeVars.euiColorVis0);
});
});

37
x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/utils/get_vulnerability_colors.ts
View file

@ -1,37 +0,0 @@
/*
* 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 { euiThemeVars } from '@kbn/ui-theme';
import type { VulnSeverity } from '@kbn/cloud-security-posture-common';
import { VULNERABILITIES_SEVERITY } from '@kbn/cloud-security-posture-common';
export const getCvsScoreColor = (score: number): string | undefined => {
if (score <= 4) {
return euiThemeVars.euiColorVis0; // low severity
} else if (score >= 4 && score <= 7) {
return euiThemeVars.euiColorVis7; // medium severity
} else if (score >= 7 && score <= 9) {
return euiThemeVars.euiColorVis9; // high severity
} else if (score >= 9) {
return euiThemeVars.euiColorDanger; // critical severity
}
};
export const getSeverityStatusColor = (severity: VulnSeverity): string => {
switch (severity) {
case VULNERABILITIES_SEVERITY.LOW:
return euiThemeVars.euiColorVis0;
case VULNERABILITIES_SEVERITY.MEDIUM:
return euiThemeVars.euiColorVis5_behindText;
case VULNERABILITIES_SEVERITY.HIGH:
return euiThemeVars.euiColorVis9_behindText;
case VULNERABILITIES_SEVERITY.CRITICAL:
return euiThemeVars.euiColorDanger;
default:
return '#aaa';
}
};

40
x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/utils/vulnerability_helpers.test.ts
View file

@ -5,19 +5,39 @@
* 2.0.
*/
import { euiThemeVars } from '@kbn/ui-theme';
import { getVulnerabilityStats } from './vulnerability_helpers';
import { i18n } from '@kbn/i18n';
import type { EuiThemeComputed } from '@elastic/eui';
import type { VulnSeverity } from '@kbn/cloud-security-posture-common';
import { getVulnerabilityStats } from './vulnerability_helpers';
import {
getSeverityStatusColor as getSeverityStatusColorUtil,
SEVERITY_COLOR,
} from './get_finding_colors';
const getSeverityStatusColor = (status: VulnSeverity) => {
const euiTheme = {
themeName: 'borealis',
};
return getSeverityStatusColorUtil(status, euiTheme as EuiThemeComputed);
};
describe('getVulnerabilitiesAggregationCount', () => {
const mockFilterFunction = jest.fn();
it('should return empty array when all severity count is 0', () => {
const result = getVulnerabilityStats({ critical: 0, high: 0, medium: 0, low: 0, none: 0 });
const result = getVulnerabilityStats(
{ critical: 0, high: 0, medium: 0, low: 0, none: 0 },
getSeverityStatusColor
);
expect(result).toEqual([]);
});
it('should return stats for low, medium, high, and critical vulnerabilities', () => {
const result = getVulnerabilityStats({ critical: 1, high: 2, medium: 3, low: 4, none: 5 });
const result = getVulnerabilityStats(
{ critical: 1, high: 2, medium: 3, low: 4, none: 5 },
getSeverityStatusColor
);
const resultWithoutFunctions = result.map((item) => {
const { filter, reset, ...rest } = item;
return rest;
@ -32,7 +52,7 @@ describe('getVulnerabilitiesAggregationCount', () => {
}
),
count: 5,
color: '#aaa',
color: SEVERITY_COLOR.unknown,
isCurrentFilter: false,
},
{
@ -43,7 +63,7 @@ describe('getVulnerabilitiesAggregationCount', () => {
}
),
count: 4,
color: euiThemeVars.euiColorVis0,
color: SEVERITY_COLOR.low,
isCurrentFilter: false,
},
{
@ -54,7 +74,7 @@ describe('getVulnerabilitiesAggregationCount', () => {
}
),
count: 3,
color: euiThemeVars.euiColorVis5_behindText,
color: SEVERITY_COLOR.medium,
isCurrentFilter: false,
},
{
@ -65,7 +85,7 @@ describe('getVulnerabilitiesAggregationCount', () => {
}
),
count: 2,
color: euiThemeVars.euiColorVis9_behindText,
color: SEVERITY_COLOR.high,
isCurrentFilter: false,
},
{
@ -76,7 +96,7 @@ describe('getVulnerabilitiesAggregationCount', () => {
}
),
count: 1,
color: euiThemeVars.euiColorDanger,
color: SEVERITY_COLOR.critical,
isCurrentFilter: false,
},
]);
@ -85,6 +105,7 @@ describe('getVulnerabilitiesAggregationCount', () => {
it('should return correct stats with correct onClick functions', () => {
const result = getVulnerabilityStats(
{ critical: 1, high: 2, medium: 3, low: 4, none: 5 },
getSeverityStatusColor,
mockFilterFunction
);
const event = { stopPropagation: jest.fn() } as unknown as React.MouseEvent<
@ -101,6 +122,7 @@ describe('getVulnerabilitiesAggregationCount', () => {
const currentFilter = 'LOW';
const result = getVulnerabilityStats(
{ critical: 1, high: 2, medium: 3, low: 4, none: 5 },
getSeverityStatusColor,
mockFilterFunction,
currentFilter
);

4
x-pack/solutions/security/packages/kbn-cloud-security-posture/public/src/utils/vulnerability_helpers.ts
View file

@ -5,9 +5,8 @@
* 2.0.
*/
import { VULNERABILITIES_SEVERITY } from '@kbn/cloud-security-posture-common';
import { VULNERABILITIES_SEVERITY, VulnSeverity } from '@kbn/cloud-security-posture-common';
import { i18n } from '@kbn/i18n';
import { getSeverityStatusColor } from './get_vulnerability_colors';
import { getSeverityText } from './get_vulnerability_text';
interface VulnerabilitiesDistributionBarProps {
@ -35,6 +34,7 @@ export const hasVulnerabilitiesData = (counts: VulnerabilityCounts): boolean =>
export const getVulnerabilityStats = (
counts: VulnerabilityCounts,
getSeverityStatusColor: (status: VulnSeverity) => string,
filterFunction?: (filter: string) => void,
currentFilter?: string
): VulnerabilitiesDistributionBarProps[] => {

10
x-pack/solutions/security/plugins/cloud_defend/public/components/control_general_view_response/index.tsx
View file

@ -25,7 +25,6 @@ import {
EuiCheckbox,
EuiComboBoxOptionOption,
EuiSpacer,
euiPaletteColorBlindBehindText,
useEuiTheme,
} from '@elastic/eui';
import { useStyles } from './styles';
@ -61,7 +60,6 @@ export const ControlGeneralViewResponse = ({
const [isPopoverOpen, setPopoverOpen] = useState(false);
const styles = useStyles();
const selectorStyles = useSelectorStyles();
const visColorsBehindText = euiPaletteColorBlindBehindText();
const [accordionState, setAccordionState] = useState<'open' | 'closed'>(
responses.length - 1 === index ? 'open' : 'closed'
);
@ -178,9 +176,9 @@ export const ControlGeneralViewResponse = ({
response.match.map((selector) => ({
label: selector as unknown as string,
value: selector as unknown as string,
color: visColorsBehindText[0],
color: colors.backgroundLightSuccess,
})),
[response.match, visColorsBehindText]
[response.match, colors]
);
const selectedExcludes = useMemo(
@ -189,9 +187,9 @@ export const ControlGeneralViewResponse = ({
response.exclude.map((selector) => ({
label: selector as unknown as string,
value: selector as unknown as string,
color: visColorsBehindText[5],
color: colors.backgroundLightWarning,
})),
[response.exclude, visColorsBehindText]
[response.exclude, colors]
);
const onShowExclude = useCallback(() => {

7
x-pack/solutions/security/plugins/cloud_security_posture/common/types_old.ts
View file

@ -6,7 +6,10 @@
*/
import { type TypeOf } from '@kbn/config-schema';
import type { CspBenchmarkRuleMetadata } from '@kbn/cloud-security-posture-common/schema/rules/latest';
import type { CspFinding } from '@kbn/cloud-security-posture-common';
import type {
CspFinding,
MisconfigurationEvaluationStatus,
} from '@kbn/cloud-security-posture-common';
import { SUPPORTED_CLOUDBEAT_INPUTS, SUPPORTED_POLICY_TEMPLATES } from './constants';
import { getComplianceDashboardSchema } from './schemas/stats';
@ -36,7 +39,7 @@ export type AzureCredentialsType =
| 'service_principal_with_client_username_and_password'
| 'managed_identity';
export type Evaluation = 'passed' | 'failed' | 'NA';
export type Evaluation = MisconfigurationEvaluationStatus;
export type PostureTypes = 'cspm' | 'kspm' | 'vuln_mgmt' | 'all';
/** number between 1-100 */

43
x-pack/solutions/security/plugins/cloud_security_posture/public/assets/icons/nvd_logo_svg.tsx
View file

@ -5,24 +5,29 @@
* 2.0.
*/
import { euiThemeVars } from '@kbn/ui-theme';
import { useEuiTheme } from '@elastic/eui';
import React from 'react';
export const NvdLogo = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="42px"
height="10px"
viewBox="0 0 41 11"
version="1.1"
>
<path
fill={euiThemeVars.euiColorFullShade}
d="M 2.558594 8.402344 C 2.5625 6.628906 2.5625 4.855469 2.5625 3.078125 C 2.5625 3.074219 2.5625 3.074219 2.5625 3.070312 C 2.558594 2.910156 2.558594 2.746094 2.722656 2.671875 C 2.863281 2.609375 2.945312 2.710938 3.019531 2.804688 C 3.035156 2.828125 3.050781 2.847656 3.070312 2.867188 C 5.023438 4.996094 7.027344 7.105469 8.835938 9.367188 C 9.546875 10.257812 10.371094 10.777344 11.554688 10.742188 C 12.894531 10.703125 14.144531 9.625 14.171875 8.09375 C 14.207031 6.375 14.199219 4.652344 14.195312 2.929688 C 14.191406 2.058594 14.1875 1.1875 14.191406 0.316406 C 14.191406 0.0820312 14.109375 0.0078125 13.890625 0.0117188 C 13.265625 0.0195312 12.644531 0.03125 12.023438 0.0078125 C 11.710938 -0.00390625 11.628906 0.0976562 11.628906 0.414062 C 11.636719 2.199219 11.636719 3.984375 11.636719 5.765625 C 11.636719 6.402344 11.683594 7.054688 11.632812 7.691406 C 11.617188 7.867188 11.546875 8.027344 11.375 8.082031 C 11.25 8.117188 11.183594 8.023438 11.117188 7.9375 C 10.800781 7.507812 10.40625 7.125 10.054688 6.722656 C 8.910156 5.425781 7.757812 4.140625 6.597656 2.855469 C 6 2.195312 5.402344 1.53125 4.832031 0.847656 C 4.050781 -0.0898438 2.3125 -0.242188 1.367188 0.347656 C 0.621094 0.8125 0.046875 1.460938 0.0273438 2.359375 C -0.0078125 4.183594 0 6.011719 0.00390625 7.835938 C 0.00390625 8.695312 0.0078125 9.558594 0.0078125 10.421875 C 0.00390625 10.652344 0.0859375 10.730469 0.308594 10.726562 C 0.949219 10.71875 1.59375 10.714844 2.234375 10.730469 C 2.492188 10.734375 2.570312 10.644531 2.566406 10.386719 C 2.554688 9.730469 2.558594 9.074219 2.558594 8.402344 Z M 2.558594 8.402344 "
/>
<path
fill={euiThemeVars.euiColorFullShade}
d="M 22.050781 10.714844 C 22.941406 10.605469 23.636719 10.164062 24.042969 9.285156 C 25.1875 7.234375 26.230469 5.117188 27.308594 3.027344 C 27.472656 2.707031 27.691406 2.558594 28.058594 2.5625 C 30.578125 2.574219 33.097656 2.558594 35.617188 2.574219 C 36.417969 2.578125 37.136719 2.894531 37.6875 3.488281 C 38.433594 4.296875 38.667969 5.28125 38.277344 6.324219 C 37.851562 7.460938 36.976562 8.109375 35.800781 8.152344 C 34.171875 8.214844 32.539062 8.171875 30.90625 8.167969 C 30.464844 8.167969 30.34375 8.03125 30.339844 7.585938 C 30.339844 6.332031 30.335938 5.074219 30.347656 3.820312 C 30.347656 3.554688 30.28125 3.449219 30.003906 3.457031 C 29.382812 3.476562 28.757812 3.480469 28.136719 3.457031 C 27.84375 3.449219 27.785156 3.566406 27.785156 3.839844 C 27.792969 6.003906 27.796875 8.167969 27.78125 10.332031 C 27.777344 10.660156 27.886719 10.730469 28.183594 10.730469 C 30.210938 10.722656 32.238281 10.722656 34.265625 10.722656 C 34.972656 10.722656 35.738281 10.824219 36.445312 10.71875 C 37.734375 10.519531 38.828125 9.960938 39.699219 8.945312 C 40.890625 7.5625 41.203125 5.957031 40.878906 4.195312 C 40.667969 3.046875 40.101562 2.089844 39.242188 1.3125 C 38.371094 0.527344 37.359375 0.0390625 36.207031 0.0273438 C 33.074219 -0.0117188 29.945312 0.015625 26.8125 0.0117188 C 26.296875 0.0117188 25.921875 0.261719 25.671875 0.714844 C 24.382812 3.046875 23.355469 5.570312 21.941406 7.828125 C 21.765625 8.105469 21.605469 8.109375 21.433594 7.84375 C 19.898438 5.476562 18.742188 2.777344 17.414062 0.289062 C 17.3125 0.101562 17.183594 0.00390625 16.953125 0.0078125 C 16.480469 0.0195312 16.007812 0.0195312 15.535156 0.015625 C 15.265625 0.015625 14.988281 0.0351562 14.714844 0.0117188 C 14.640625 0.0078125 14.5625 0 14.5 0.0664062 C 14.484375 0.148438 14.519531 0.210938 14.554688 0.273438 C 14.839844 0.785156 15.097656 1.3125 15.371094 1.832031 C 16.171875 3.367188 16.96875 4.90625 17.757812 6.445312 C 18.234375 7.367188 18.707031 8.285156 19.179688 9.203125 C 19.359375 9.542969 19.582031 9.847656 19.882812 10.101562 C 20.519531 10.644531 21.257812 10.8125 22.050781 10.714844 Z M 22.050781 10.714844 "
/>
</svg>
);
// TODO: Borealis migration - replace fullShade with a proper color token, see https://github.com/elastic/kibana/issues/199715#issuecomment-2535949093
export const NvdLogo = () => {
const { euiTheme } = useEuiTheme();
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="42px"
height="10px"
viewBox="0 0 41 11"
version="1.1"
>
<path
fill={euiTheme.colors.fullShade}
d="M 2.558594 8.402344 C 2.5625 6.628906 2.5625 4.855469 2.5625 3.078125 C 2.5625 3.074219 2.5625 3.074219 2.5625 3.070312 C 2.558594 2.910156 2.558594 2.746094 2.722656 2.671875 C 2.863281 2.609375 2.945312 2.710938 3.019531 2.804688 C 3.035156 2.828125 3.050781 2.847656 3.070312 2.867188 C 5.023438 4.996094 7.027344 7.105469 8.835938 9.367188 C 9.546875 10.257812 10.371094 10.777344 11.554688 10.742188 C 12.894531 10.703125 14.144531 9.625 14.171875 8.09375 C 14.207031 6.375 14.199219 4.652344 14.195312 2.929688 C 14.191406 2.058594 14.1875 1.1875 14.191406 0.316406 C 14.191406 0.0820312 14.109375 0.0078125 13.890625 0.0117188 C 13.265625 0.0195312 12.644531 0.03125 12.023438 0.0078125 C 11.710938 -0.00390625 11.628906 0.0976562 11.628906 0.414062 C 11.636719 2.199219 11.636719 3.984375 11.636719 5.765625 C 11.636719 6.402344 11.683594 7.054688 11.632812 7.691406 C 11.617188 7.867188 11.546875 8.027344 11.375 8.082031 C 11.25 8.117188 11.183594 8.023438 11.117188 7.9375 C 10.800781 7.507812 10.40625 7.125 10.054688 6.722656 C 8.910156 5.425781 7.757812 4.140625 6.597656 2.855469 C 6 2.195312 5.402344 1.53125 4.832031 0.847656 C 4.050781 -0.0898438 2.3125 -0.242188 1.367188 0.347656 C 0.621094 0.8125 0.046875 1.460938 0.0273438 2.359375 C -0.0078125 4.183594 0 6.011719 0.00390625 7.835938 C 0.00390625 8.695312 0.0078125 9.558594 0.0078125 10.421875 C 0.00390625 10.652344 0.0859375 10.730469 0.308594 10.726562 C 0.949219 10.71875 1.59375 10.714844 2.234375 10.730469 C 2.492188 10.734375 2.570312 10.644531 2.566406 10.386719 C 2.554688 9.730469 2.558594 9.074219 2.558594 8.402344 Z M 2.558594 8.402344 "
/>
<path
fill={euiTheme.colors.fullShade}
d="M 22.050781 10.714844 C 22.941406 10.605469 23.636719 10.164062 24.042969 9.285156 C 25.1875 7.234375 26.230469 5.117188 27.308594 3.027344 C 27.472656 2.707031 27.691406 2.558594 28.058594 2.5625 C 30.578125 2.574219 33.097656 2.558594 35.617188 2.574219 C 36.417969 2.578125 37.136719 2.894531 37.6875 3.488281 C 38.433594 4.296875 38.667969 5.28125 38.277344 6.324219 C 37.851562 7.460938 36.976562 8.109375 35.800781 8.152344 C 34.171875 8.214844 32.539062 8.171875 30.90625 8.167969 C 30.464844 8.167969 30.34375 8.03125 30.339844 7.585938 C 30.339844 6.332031 30.335938 5.074219 30.347656 3.820312 C 30.347656 3.554688 30.28125 3.449219 30.003906 3.457031 C 29.382812 3.476562 28.757812 3.480469 28.136719 3.457031 C 27.84375 3.449219 27.785156 3.566406 27.785156 3.839844 C 27.792969 6.003906 27.796875 8.167969 27.78125 10.332031 C 27.777344 10.660156 27.886719 10.730469 28.183594 10.730469 C 30.210938 10.722656 32.238281 10.722656 34.265625 10.722656 C 34.972656 10.722656 35.738281 10.824219 36.445312 10.71875 C 37.734375 10.519531 38.828125 9.960938 39.699219 8.945312 C 40.890625 7.5625 41.203125 5.957031 40.878906 4.195312 C 40.667969 3.046875 40.101562 2.089844 39.242188 1.3125 C 38.371094 0.527344 37.359375 0.0390625 36.207031 0.0273438 C 33.074219 -0.0117188 29.945312 0.015625 26.8125 0.0117188 C 26.296875 0.0117188 25.921875 0.261719 25.671875 0.714844 C 24.382812 3.046875 23.355469 5.570312 21.941406 7.828125 C 21.765625 8.105469 21.605469 8.109375 21.433594 7.84375 C 19.898438 5.476562 18.742188 2.777344 17.414062 0.289062 C 17.3125 0.101562 17.183594 0.00390625 16.953125 0.0078125 C 16.480469 0.0195312 16.007812 0.0195312 15.535156 0.015625 C 15.265625 0.015625 14.988281 0.0351562 14.714844 0.0117188 C 14.640625 0.0078125 14.5625 0 14.5 0.0664062 C 14.484375 0.148438 14.519531 0.210938 14.554688 0.273438 C 14.839844 0.785156 15.097656 1.3125 15.371094 1.832031 C 16.171875 3.367188 16.96875 4.90625 17.757812 6.445312 C 18.234375 7.367188 18.707031 8.285156 19.179688 9.203125 C 19.359375 9.542969 19.582031 9.847656 19.882812 10.101562 C 20.519531 10.644531 21.257812 10.8125 22.050781 10.714844 Z M 22.050781 10.714844 "
/>
</svg>
);
};

9
x-pack/solutions/security/plugins/cloud_security_posture/public/components/compliance_score_bar.tsx
View file

@ -9,7 +9,8 @@ import { EuiFlexGroup, EuiFlexItem, EuiText, EuiToolTip, useEuiTheme } from '@el
import { css, SerializedStyles } from '@emotion/react';
import { i18n } from '@kbn/i18n';
import React from 'react';
import { statusColors } from '@kbn/cloud-security-posture';
import { MISCONFIGURATION_STATUS } from '@kbn/cloud-security-posture-common';
import { getMisconfigurationStatusColor } from '@kbn/cloud-security-posture';
import { calculatePostureScore } from '../../common/utils/helpers';
import {
CSP_FINDINGS_COMPLIANCE_SCORE,
@ -68,7 +69,7 @@ export const ComplianceScoreBar = ({
<EuiFlexItem
css={css`
flex: 1;
background: ${statusColors.unknown};
background: ${getMisconfigurationStatusColor(MISCONFIGURATION_STATUS.UNKNOWN)};
`}
data-test-subj={COMPLIANCE_SCORE_BAR_UNKNOWN}
/>
@ -77,7 +78,7 @@ export const ComplianceScoreBar = ({
<EuiFlexItem
css={css`
flex: ${totalPassed};
background: ${statusColors.passed};
background: ${getMisconfigurationStatusColor(MISCONFIGURATION_STATUS.PASSED)};
`}
data-test-subj={COMPLIANCE_SCORE_BAR_PASSED}
/>
@ -86,7 +87,7 @@ export const ComplianceScoreBar = ({
<EuiFlexItem
css={css`
flex: ${totalFailed};
background: ${statusColors.failed};
background: ${getMisconfigurationStatusColor(MISCONFIGURATION_STATUS.FAILED)};
`}
data-test-subj={COMPLIANCE_SCORE_BAR_FAILED}
/>

5
x-pack/solutions/security/plugins/cloud_security_posture/public/components/vulnerability_severity_map.tsx
View file

@ -15,10 +15,10 @@ import {
EuiText,
} from '@elastic/eui';
import { PaletteColorStop } from '@elastic/eui/src/components/color_picker/color_palette_picker';
import type { VulnSeverity } from '@kbn/cloud-security-posture-common';
import { i18n } from '@kbn/i18n';
import { getSeverityStatusColor } from '@kbn/cloud-security-posture';
import type { VulnSeverity } from '@kbn/cloud-security-posture-common';
import { SeverityStatusBadge } from '@kbn/cloud-security-posture';
import { useGetSeverityStatusColor } from '@kbn/cloud-security-posture/src/hooks/use_get_severity_status_color';
interface Props {
total: number;
@ -52,6 +52,7 @@ const formatPercentage = (percentage: number) => {
export const VulnerabilitySeverityMap = ({ severityMap, total }: Props) => {
const { euiTheme } = useEuiTheme();
const { getSeverityStatusColor } = useGetSeverityStatusColor();
const severityMapPallet: PaletteColorStop[] = [];
const severityMapTooltip: SeverityMapTooltip[] = [];

60
x-pack/solutions/security/plugins/cloud_security_posture/public/pages/compliance_dashboard/compliance_charts/compliance_score_chart.tsx
View file

@ -32,7 +32,8 @@ import { FormattedDate, FormattedTime } from '@kbn/i18n-react';
import moment from 'moment';
import { i18n } from '@kbn/i18n';
import { css } from '@emotion/react';
import { statusColors } from '@kbn/cloud-security-posture';
import { MISCONFIGURATION_STATUS } from '@kbn/cloud-security-posture-common';
import { getMisconfigurationStatusColor } from '@kbn/cloud-security-posture';
import { DASHBOARD_COMPLIANCE_SCORE_CHART } from '../test_subjects';
import { RULE_FAILED, RULE_PASSED } from '../../../../common/constants';
import { CompactFormattedNumber } from '../../../components/compact_formatted_number';
@ -109,31 +110,33 @@ const CompactPercentageLabels = ({
}: {
onEvalCounterClick: (evaluation: Evaluation) => void;
stats: { totalPassed: number; totalFailed: number };
}) => (
<>
<CounterLink
text="passed"
count={stats.totalPassed}
color={statusColors.passed}
onClick={() => onEvalCounterClick(RULE_PASSED)}
tooltipContent={i18n.translate(
'xpack.csp.complianceScoreChart.counterLink.passedFindingsTooltip',
{ defaultMessage: 'Passed findings' }
)}
/>
<EuiText size="s">&nbsp;-&nbsp;</EuiText>
<CounterLink
text="failed"
count={stats.totalFailed}
color={statusColors.failed}
onClick={() => onEvalCounterClick(RULE_FAILED)}
tooltipContent={i18n.translate(
'xpack.csp.complianceScoreChart.counterButtonLink.failedFindingsTooltip',
{ defaultMessage: 'Failed findings' }
)}
/>
</>
);
}) => {
return (
<>
<CounterLink
text="passed"
count={stats.totalPassed}
color={getMisconfigurationStatusColor(MISCONFIGURATION_STATUS.PASSED)}
onClick={() => onEvalCounterClick(RULE_PASSED)}
tooltipContent={i18n.translate(
'xpack.csp.complianceScoreChart.counterLink.passedFindingsTooltip',
{ defaultMessage: 'Passed findings' }
)}
/>
<EuiText size="s">&nbsp;-&nbsp;</EuiText>
<CounterLink
text="failed"
count={stats.totalFailed}
color={getMisconfigurationStatusColor(MISCONFIGURATION_STATUS.FAILED)}
onClick={() => onEvalCounterClick(RULE_FAILED)}
tooltipContent={i18n.translate(
'xpack.csp.complianceScoreChart.counterButtonLink.failedFindingsTooltip',
{ defaultMessage: 'Failed findings' }
)}
/>
</>
);
};
const PercentageLabels = ({
onEvalCounterClick,
@ -144,13 +147,14 @@ const PercentageLabels = ({
}) => {
const { euiTheme } = useEuiTheme();
const borderLeftStyles = { borderLeft: euiTheme.border.thin, paddingLeft: euiTheme.size.m };
return (
<EuiFlexGroup gutterSize="l" justifyContent="spaceBetween">
<EuiFlexItem grow={false} style={borderLeftStyles}>
<CounterButtonLink
text="Passed Findings"
count={stats.totalPassed}
color={statusColors.passed}
color={getMisconfigurationStatusColor(MISCONFIGURATION_STATUS.PASSED)}
data-test-subj="dashboard-summary-passed-findings"
onClick={() => onEvalCounterClick(RULE_PASSED)}
/>
@ -159,7 +163,7 @@ const PercentageLabels = ({
<CounterButtonLink
text="Failed Findings"
count={stats.totalFailed}
color={statusColors.failed}
color={getMisconfigurationStatusColor(MISCONFIGURATION_STATUS.FAILED)}
data-test-subj="dashboard-summary-failed-findings"
onClick={() => onEvalCounterClick(RULE_FAILED)}
/>

6
x-pack/solutions/security/plugins/cloud_security_posture/public/pages/configurations/findings_flyout/findings_flyout.tsx
View file

@ -34,7 +34,6 @@ import { i18n } from '@kbn/i18n';
import type { HttpSetup } from '@kbn/core/public';
import { generatePath } from 'react-router-dom';
import { css } from '@emotion/react';
import { euiThemeVars } from '@kbn/ui-theme';
import { CspEvaluationBadge } from '@kbn/cloud-security-posture';
import type { CspFinding } from '@kbn/cloud-security-posture-common';
import { CspVulnerabilityFinding } from '@kbn/cloud-security-posture-common/schema/vulnerabilities/csp_vulnerability_finding';
@ -240,6 +239,7 @@ export const FindingsRuleFlyout = ({
findingsCount,
onPaginate,
}: FindingFlyoutProps) => {
const { euiTheme } = useEuiTheme();
const [tab, setTab] = useState<FindingsTab>(tabs[0]);
const createMisconfigurationRuleFn = async (http: HttpSetup) =>
@ -263,7 +263,7 @@ export const FindingsRuleFlyout = ({
<div
css={css`
line-height: 20px;
margin-top: ${euiThemeVars.euiSizeM};
margin-top: ${euiTheme.size.m};
`}
>
<CspInlineDescriptionList
@ -287,7 +287,7 @@ export const FindingsRuleFlyout = ({
</EuiFlyoutHeader>
<EuiFlyoutBody key={tab.id}>
{!isNativeCspFinding(finding) && ['overview', 'rule'].includes(tab.id) && (
<div style={{ marginBottom: euiThemeVars.euiSize }}>
<div style={{ marginBottom: euiTheme.size.base }}>
<MissingFieldsCallout finding={finding} />
</div>
)}

16
x-pack/solutions/security/plugins/cloud_security_posture/public/pages/configurations/layout/findings_distribution_bar.tsx
View file

@ -8,8 +8,8 @@ import React from 'react';
import { css } from '@emotion/react';
import { EuiHealth, EuiBadge, EuiSpacer, EuiFlexGroup, useEuiTheme } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { statusColors } from '@kbn/cloud-security-posture';
import { getAbbreviatedNumber } from '@kbn/cloud-security-posture-common';
import { getMisconfigurationStatusColor } from '@kbn/cloud-security-posture';
import { getAbbreviatedNumber, MISCONFIGURATION_STATUS } from '@kbn/cloud-security-posture-common';
import { RULE_FAILED, RULE_PASSED } from '../../../../common/constants';
import type { Evaluation } from '../../../../common/types_old';
@ -44,9 +44,13 @@ const Counters = ({ passed, failed }: Pick<Props, 'passed' | 'failed'>) => {
gap: ${euiTheme.size.m};
`}
>
<EuiHealth color={statusColors.passed}>{I18N_PASSED_FINDINGS}</EuiHealth>
<EuiHealth color={getMisconfigurationStatusColor(MISCONFIGURATION_STATUS.PASSED)}>
{I18N_PASSED_FINDINGS}
</EuiHealth>
<EuiBadge>{getAbbreviatedNumber(passed)}</EuiBadge>
<EuiHealth color={statusColors.failed}>{I18N_FAILED_FINDINGS}</EuiHealth>
<EuiHealth color={getMisconfigurationStatusColor(MISCONFIGURATION_STATUS.FAILED)}>
{I18N_FAILED_FINDINGS}
</EuiHealth>
<EuiBadge>{getAbbreviatedNumber(failed)}</EuiBadge>
</EuiFlexGroup>
);
@ -69,7 +73,7 @@ const DistributionBar: React.FC<Omit<Props, 'pageEnd' | 'pageStart'>> = ({
>
<DistributionBarPart
value={passed}
color={statusColors.passed}
color={getMisconfigurationStatusColor(MISCONFIGURATION_STATUS.PASSED)}
distributionOnClick={() => {
distributionOnClick(RULE_PASSED);
}}
@ -78,7 +82,7 @@ const DistributionBar: React.FC<Omit<Props, 'pageEnd' | 'pageStart'>> = ({
/>
<DistributionBarPart
value={failed}
color={statusColors.failed}
color={getMisconfigurationStatusColor(MISCONFIGURATION_STATUS.FAILED)}
distributionOnClick={() => {
distributionOnClick(RULE_FAILED);
}}

12
x-pack/solutions/security/plugins/cloud_security_posture/public/pages/rules/rules_counters.tsx
View file

@ -18,7 +18,8 @@ import { i18n } from '@kbn/i18n';
import { useParams } from 'react-router-dom';
import { Chart, Partition, PartitionLayout, Settings } from '@elastic/charts';
import { FormattedMessage } from '@kbn/i18n-react';
import { statusColors } from '@kbn/cloud-security-posture';
import { MISCONFIGURATION_STATUS } from '@kbn/cloud-security-posture-common';
import { getMisconfigurationStatusColor } from '@kbn/cloud-security-posture';
import { useNavigateFindings } from '@kbn/cloud-security-posture/src/hooks/use_navigate_findings';
import { useBenchmarkDynamicValues } from '../../common/hooks/use_benchmark_dynamic_values';
import { getPostureScorePercentage } from '../compliance_dashboard/compliance_charts/compliance_score_chart';
@ -74,8 +75,8 @@ const EvaluationPieChart = ({ failed, passed }: { failed: number; passed: number
shape: {
fillColor: (label) =>
label.toLowerCase() === RULE_PASSED.toLowerCase()
? statusColors.passed
: statusColors.failed,
? getMisconfigurationStatusColor(MISCONFIGURATION_STATUS.PASSED)
: getMisconfigurationStatusColor(MISCONFIGURATION_STATUS.FAILED),
},
},
]}
@ -232,7 +233,10 @@ export const RulesCounters = ({
defaultMessage: 'Failed Findings',
}),
title: benchmarkRulesStats.score.totalFailed,
titleColor: benchmarkRulesStats.score.totalFailed > 0 ? statusColors.failed : undefined,
titleColor:
benchmarkRulesStats.score.totalFailed > 0
? getMisconfigurationStatusColor(MISCONFIGURATION_STATUS.FAILED)
: undefined,
button: (
<EuiButtonEmpty
data-test-subj={RULE_COUNTERS_TEST_SUBJ.FAILED_FINDINGS_BUTTON}

13
x-pack/solutions/security/plugins/cloud_security_posture/public/pages/vulnerabilities/vulnerabilities_finding_flyout/vulnerability_finding_flyout.tsx
View file

@ -21,10 +21,10 @@ import {
EuiTabs,
EuiText,
EuiTitle,
useEuiTheme,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';
import { euiThemeVars } from '@kbn/ui-theme';
import { css } from '@emotion/react';
import { HttpSetup } from '@kbn/core-http-browser';
import type { CspVulnerabilityFinding } from '@kbn/cloud-security-posture-common/schema/vulnerabilities/latest';
@ -96,6 +96,7 @@ export const VulnerabilityFindingFlyout = ({
flyoutIndex?: number;
isLoading?: boolean;
}) => {
const { euiTheme } = useEuiTheme();
const [selectedTabId, setSelectedTabId] = useState(overviewTabId);
const vulnerability = vulnerabilityRecord?.vulnerability;
@ -176,7 +177,7 @@ export const VulnerabilityFindingFlyout = ({
<EuiFlexGroup
direction="column"
css={css`
gap: ${euiThemeVars.euiSizeS};
gap: ${euiTheme.size.s};
`}
>
<EuiFlexItem>
@ -186,14 +187,14 @@ export const VulnerabilityFindingFlyout = ({
<EuiFlexGroup
direction="column"
css={css`
gap: ${euiThemeVars.euiSizeS};
gap: ${euiTheme.size.s};
`}
>
<EuiFlexItem>
<EuiTitle
size="m"
css={css`
color: ${euiThemeVars.euiColorPrimaryText};
color: ${euiTheme.colors.textPrimary};
line-height: 32px;
`}
>
@ -210,7 +211,7 @@ export const VulnerabilityFindingFlyout = ({
<div
css={css`
line-height: 20px;
margin-bottom: ${euiThemeVars.euiSizeM};
margin-bottom: ${euiTheme.size.m};
`}
>
<CspInlineDescriptionList
@ -235,7 +236,7 @@ export const VulnerabilityFindingFlyout = ({
contentAriaLabel={LOADING_ARIA_LABEL}
>
{!isNativeCspFinding(vulnerabilityRecord) && selectedTabId === overviewTabId && (
<div style={{ marginBottom: euiThemeVars.euiSize }}>
<div style={{ marginBottom: euiTheme.size.base }}>
<MissingFieldsCallout finding={vulnerabilityRecord} />
</div>
)}

28
x-pack/solutions/security/plugins/cloud_security_posture/public/pages/vulnerabilities/vulnerabilities_finding_flyout/vulnerability_overview_tab.tsx
View file

@ -12,12 +12,12 @@ import {
EuiIcon,
EuiLink,
EuiText,
useEuiTheme,
} from '@elastic/eui';
import { css } from '@emotion/react';
import { FormattedMessage } from '@kbn/i18n-react';
import moment from 'moment';
import React from 'react';
import { euiThemeVars } from '@kbn/ui-theme';
import { i18n } from '@kbn/i18n';
import {
VectorScoreBase,
@ -61,6 +61,7 @@ interface VulnerabilityTabProps {
const EMPTY_VALUE = '-';
const CVSScore = ({ vectorBaseScore, vendor }: CVSScoreProps) => {
const { euiTheme } = useEuiTheme();
const vendorName = cvssVendors[vendor];
const vectorScores = getVectorScoreList(vectorBaseScore);
@ -69,9 +70,9 @@ const CVSScore = ({ vectorBaseScore, vendor }: CVSScoreProps) => {
<EuiFlexGroup
alignItems="center"
css={css`
border: 1px solid #d3dae6;
border: 1px solid ${euiTheme.border.color};
border-radius: 6px;
padding: ${euiThemeVars.euiSizeM};
padding: ${euiTheme.size.m};
`}
>
<EuiFlexItem
@ -114,22 +115,23 @@ const VectorScore = ({
version: string;
};
}) => {
const { euiTheme } = useEuiTheme();
const { score, vector, version } = vectorScore;
return (
<>
<EuiFlexGroup
alignItems="center"
css={css`
background: ${euiThemeVars.euiColorLightestShade};
padding: ${euiThemeVars.euiSizeXS} ${euiThemeVars.euiSizeS};
background: ${euiTheme.colors.backgroundLightText};
padding: ${euiTheme.size.xs} ${euiTheme.size.s};
border-radius: 6px;
`}
>
<EuiFlexItem>
<EuiText
css={css`
font-size: ${euiThemeVars.euiFontSizeM};
color: ${euiThemeVars.euiColorFullShade};
font-size: ${euiTheme.size.m};
color: ${euiTheme.colors.textParagraph};
`}
>
{vector}{' '}
@ -145,10 +147,11 @@ const VectorScore = ({
};
const VulnerabilityOverviewTiles = ({ vulnerabilityRecord }: VulnerabilityTabProps) => {
const { euiTheme } = useEuiTheme();
const { vulnerability } = vulnerabilityRecord;
const tileStyle = css`
padding: ${euiThemeVars.euiFontSizeM};
background: ${euiThemeVars.euiColorLightestShade};
padding: ${euiTheme.size.m};
background: ${euiTheme.colors.backgroundLightText};
border-radius: 6px;
height: 74px;
`;
@ -222,6 +225,7 @@ const VulnerabilityOverviewTiles = ({ vulnerabilityRecord }: VulnerabilityTabPro
};
export const VulnerabilityOverviewTab = ({ vulnerabilityRecord }: VulnerabilityTabProps) => {
const { euiTheme } = useEuiTheme();
const { vulnerability } = vulnerabilityRecord;
uiMetricService.trackUiMetric(METRIC_TYPE.COUNT, VULNERABILITIES_FLYOUT_VISITS);
@ -255,9 +259,9 @@ export const VulnerabilityOverviewTab = ({ vulnerabilityRecord }: VulnerabilityT
`;
const flyoutSubheadingStyle = css`
font-size: ${euiThemeVars.euiFontSizeM};
font-size: ${euiTheme.size.m};
line-height: 24px;
margin-bottom: ${euiThemeVars.euiSizeS};
margin-bottom: ${euiTheme.size.s};
font-weight: 600;
`;
@ -329,7 +333,7 @@ export const VulnerabilityOverviewTab = ({ vulnerabilityRecord }: VulnerabilityT
direction="column"
gutterSize="l"
css={css`
margin-top: ${euiThemeVars.euiSizeS};
margin-top: ${euiTheme.size.s};
`}
>
{!!cvssScores?.length ? cvssScores : EMPTY_VALUE}

5
x-pack/solutions/security/plugins/cloud_security_posture/public/pages/vulnerability_dashboard/vulnerability_statistics.tsx
View file

@ -8,13 +8,14 @@ import React, { useMemo } from 'react';
import { EuiFlexGroup, EuiFlexItem, EuiHealth } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { useNavigateNativeVulnerabilities } from '@kbn/cloud-security-posture/src/hooks/use_navigate_findings';
import { useGetSeverityStatusColor } from '@kbn/cloud-security-posture/src/hooks/use_get_severity_status_color';
import { VULNERABILITIES_SEVERITY } from '@kbn/cloud-security-posture-common';
import { getSeverityStatusColor } from '@kbn/cloud-security-posture';
import { VulnCounterCard, type VulnCounterCardProps } from '../../components/vuln_counter_card';
import { useVulnerabilityDashboardApi } from '../../common/api/use_vulnerability_dashboard_api';
import { CompactFormattedNumber } from '../../components/compact_formatted_number';
export const VulnerabilityStatistics = () => {
const { getSeverityStatusColor } = useGetSeverityStatusColor();
const navToVulnerabilities = useNavigateNativeVulnerabilities();
const getVulnerabilityDashboard = useVulnerabilityDashboardApi();
@ -103,7 +104,7 @@ export const VulnerabilityStatistics = () => {
}),
},
],
[getVulnerabilityDashboard.data, navToVulnerabilities]
[getVulnerabilityDashboard.data, navToVulnerabilities, getSeverityStatusColor]
);
return (

5
x-pack/solutions/security/plugins/cloud_security_posture/public/pages/vulnerability_dashboard/vulnerability_trend_graph.tsx
View file

@ -20,9 +20,9 @@ import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';
import { useNavigateNativeVulnerabilities } from '@kbn/cloud-security-posture/src/hooks/use_navigate_findings';
import { useGetSeverityStatusColor } from '@kbn/cloud-security-posture/src/hooks/use_get_severity_status_color';
import type { VulnSeverity } from '@kbn/cloud-security-posture-common';
import { VULNERABILITIES_SEVERITY } from '@kbn/cloud-security-posture-common';
import { getSeverityStatusColor } from '@kbn/cloud-security-posture';
import { truthy } from '../../../common/utils/helpers';
import { VulnStatsTrend } from '../../../common/types_old';
import { useVulnerabilityDashboardApi } from '../../common/api/use_vulnerability_dashboard_api';
@ -156,6 +156,7 @@ export const VulnerabilityTrendGraph = () => {
const {
services: { charts },
} = useKibana();
const { getSeverityStatusColor } = useGetSeverityStatusColor();
const getVulnerabilityDashboard = useVulnerabilityDashboardApi();
const vulnTrends = getVulnerabilityDashboard.data?.vulnTrends || [];
const [selectedAccount, setSelectedAccount] = useState(DEFAULT_ACCOUNT);
@ -189,7 +190,7 @@ export const VulnerabilityTrendGraph = () => {
color: getSeverityStatusColor(VULNERABILITIES_SEVERITY.CRITICAL),
},
],
[]
[getSeverityStatusColor]
);
return (

1
x-pack/solutions/security/plugins/cloud_security_posture/tsconfig.json
View file

@ -30,7 +30,6 @@
"@kbn/charts-plugin",
"@kbn/discover-plugin",
"@kbn/i18n",
"@kbn/ui-theme",
"@kbn/i18n-react",
"@kbn/es-query",
"@kbn/data-views-plugin",

12
x-pack/solutions/security/plugins/security_solution/public/cloud_security_posture/components/csp_details/misconfiguration_findings_details_table.tsx
View file

@ -19,10 +19,10 @@ import {
MISCONFIGURATION_STATUS,
buildMisconfigurationEntityFlyoutPreviewQuery,
} from '@kbn/cloud-security-posture-common';
import { euiThemeVars } from '@kbn/ui-theme';
import { DistributionBar } from '@kbn/security-solution-distribution-bar';
import type { CspBenchmarkRuleMetadata } from '@kbn/cloud-security-posture-common/schema/rules/latest';
import { CspEvaluationBadge } from '@kbn/cloud-security-posture';
import { CspEvaluationBadge, getMisconfigurationStatusColor } from '@kbn/cloud-security-posture';
import {
ENTITY_FLYOUT_EXPAND_MISCONFIGURATION_VIEW_VISITS,
NAV_TO_FINDINGS_BY_HOST_NAME_FRPOM_ENTITY_FLYOUT,
@ -58,7 +58,7 @@ const getFindingsStats = (
}
),
count: passedFindingsStats,
color: euiThemeVars.euiColorSuccess,
color: getMisconfigurationStatusColor(MISCONFIGURATION_STATUS.PASSED),
filter: () => {
filterFunction(MISCONFIGURATION_STATUS.PASSED);
},
@ -76,7 +76,7 @@ const getFindingsStats = (
}
),
count: failedFindingsStats,
color: euiThemeVars.euiColorVis9,
color: getMisconfigurationStatusColor(MISCONFIGURATION_STATUS.FAILED),
filter: () => {
filterFunction(MISCONFIGURATION_STATUS.FAILED);
},
@ -186,7 +186,7 @@ export const MisconfigurationFindingsDetailsTable = memo(
const linkWidth = 40;
const resultWidth = 74;
const misconfgurationStats = getFindingsStats(
const misconfigurationStats = getFindingsStats(
passedFindings,
failedFindings,
setCurrentFilter,
@ -272,7 +272,7 @@ export const MisconfigurationFindingsDetailsTable = memo(
<EuiIcon type={'popout'} />
</SecuritySolutionLinkAnchor>
<EuiSpacer size="xl" />
<DistributionBar stats={misconfgurationStats} />
<DistributionBar stats={misconfigurationStats} />
<EuiSpacer size="l" />
<EuiBasicTable
items={pageOfItems || []}

4
x-pack/solutions/security/plugins/security_solution/public/cloud_security_posture/components/csp_details/vulnerabilities_findings_details_table.tsx
View file

@ -35,6 +35,7 @@ import {
import { METRIC_TYPE } from '@kbn/analytics';
import { SecurityPageName } from '@kbn/deeplinks-security';
import { useGetNavigationUrlParams } from '@kbn/cloud-security-posture/src/hooks/use_get_navigation_url_params';
import { useGetSeverityStatusColor } from '@kbn/cloud-security-posture/src/hooks/use_get_severity_status_color';
import { useHasVulnerabilities } from '@kbn/cloud-security-posture/src/hooks/use_has_vulnerabilities';
import { EntityIdentifierFields } from '../../../../common/entity_analytics/types';
import { SecuritySolutionLinkAnchor } from '../../../common/components/links';
@ -49,6 +50,8 @@ type VulnerabilitySortFieldType =
| VULNERABILITY.PACKAGE_NAME;
export const VulnerabilitiesFindingsDetailsTable = memo(({ value }: { value: string }) => {
const { getSeverityStatusColor } = useGetSeverityStatusColor();
useEffect(() => {
uiMetricService.trackUiMetric(
METRIC_TYPE.COUNT,
@ -154,6 +157,7 @@ export const VulnerabilitiesFindingsDetailsTable = memo(({ value }: { value: str
low,
none,
},
getSeverityStatusColor,
setCurrentFilter,
currentFilter
);

13
x-pack/solutions/security/plugins/security_solution/public/cloud_security_posture/components/misconfiguration/misconfiguration_preview.tsx
View file

@ -7,13 +7,13 @@
import React, { useCallback, useEffect, useMemo } from 'react';
import { css } from '@emotion/react';
import type { EuiThemeComputed } from '@elastic/eui';
import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText, useEuiTheme, EuiTitle } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import { DistributionBar } from '@kbn/security-solution-distribution-bar';
import { useHasMisconfigurations } from '@kbn/cloud-security-posture/src/hooks/use_has_misconfigurations';
import { i18n } from '@kbn/i18n';
import { statusColors } from '@kbn/cloud-security-posture';
import { getMisconfigurationStatusColor } from '@kbn/cloud-security-posture';
import { MISCONFIGURATION_STATUS } from '@kbn/cloud-security-posture-common';
import { METRIC_TYPE } from '@kbn/analytics';
import {
ENTITY_FLYOUT_WITH_MISCONFIGURATION_VISIT,
@ -38,7 +38,7 @@ export const getFindingsStats = (passedFindingsStats: number, failedFindingsStat
}
),
count: passedFindingsStats,
color: statusColors.passed,
color: getMisconfigurationStatusColor(MISCONFIGURATION_STATUS.PASSED),
},
{
key: i18n.translate(
@ -48,7 +48,7 @@ export const getFindingsStats = (passedFindingsStats: number, failedFindingsStat
}
),
count: failedFindingsStats,
color: statusColors.failed,
color: getMisconfigurationStatusColor(MISCONFIGURATION_STATUS.FAILED),
},
];
};
@ -56,12 +56,12 @@ export const getFindingsStats = (passedFindingsStats: number, failedFindingsStat
const MisconfigurationPreviewScore = ({
passedFindings,
failedFindings,
euiTheme,
}: {
passedFindings: number;
failedFindings: number;
euiTheme: EuiThemeComputed<{}>;
}) => {
const { euiTheme } = useEuiTheme();
return (
<EuiFlexItem>
<EuiFlexGroup direction="column" gutterSize="none">
@ -158,7 +158,6 @@ export const MisconfigurationsPreview = ({
<MisconfigurationPreviewScore
passedFindings={passedFindings}
failedFindings={failedFindings}
euiTheme={euiTheme}
/>
<EuiFlexItem grow={2}>

34
x-pack/solutions/security/plugins/security_solution/public/cloud_security_posture/components/vulnerabilities/vulnerabilities_preview.tsx
View file

@ -7,11 +7,11 @@
import React, { useCallback, useEffect, useMemo } from 'react';
import { css } from '@emotion/react';
import type { EuiThemeComputed } from '@elastic/eui';
import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText, useEuiTheme, EuiTitle } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import { DistributionBar } from '@kbn/security-solution-distribution-bar';
import { useVulnerabilitiesPreview } from '@kbn/cloud-security-posture/src/hooks/use_vulnerabilities_preview';
import { useGetSeverityStatusColor } from '@kbn/cloud-security-posture/src/hooks/use_get_severity_status_color';
import {
buildGenericEntityFlyoutPreviewQuery,
getAbbreviatedNumber,
@ -32,11 +32,11 @@ import type { CloudPostureEntityIdentifier } from '../entity_insight';
const VulnerabilitiesCount = ({
vulnerabilitiesTotal,
euiTheme,
}: {
vulnerabilitiesTotal: string | number;
euiTheme: EuiThemeComputed<{}>;
}) => {
const { euiTheme } = useEuiTheme();
return (
<EuiFlexItem>
<EuiFlexGroup direction="column" gutterSize="none">
@ -100,6 +100,7 @@ export const VulnerabilitiesPreview = ({
});
const { euiTheme } = useEuiTheme();
const { getSeverityStatusColor } = useGetSeverityStatusColor();
const goToEntityInsightTab = useCallback(() => {
openDetailsPanel({
@ -123,6 +124,18 @@ export const VulnerabilitiesPreview = ({
: undefined,
[isLinkEnabled, goToEntityInsightTab]
);
const vulnerabilityStats = getVulnerabilityStats(
{
critical: CRITICAL,
high: HIGH,
medium: MEDIUM,
low: LOW,
none: NONE,
},
getSeverityStatusColor
);
return (
<ExpandablePanel
header={{
@ -144,24 +157,13 @@ export const VulnerabilitiesPreview = ({
data-test-subj={'securitySolutionFlyoutInsightsVulnerabilities'}
>
<EuiFlexGroup gutterSize="none">
<VulnerabilitiesCount
vulnerabilitiesTotal={getAbbreviatedNumber(totalVulnerabilities)}
euiTheme={euiTheme}
/>
<VulnerabilitiesCount vulnerabilitiesTotal={getAbbreviatedNumber(totalVulnerabilities)} />
<EuiFlexItem grow={2}>
<EuiFlexGroup direction="column" gutterSize="none">
<EuiFlexItem />
<EuiFlexItem>
<EuiSpacer />
<DistributionBar
stats={getVulnerabilityStats({
critical: CRITICAL,
high: HIGH,
medium: MEDIUM,
low: LOW,
none: NONE,
})}
/>
<DistributionBar stats={vulnerabilityStats} />
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>

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

@ -10,6 +10,7 @@ import { EuiFlexItem, type EuiFlexGroupProps, useEuiTheme } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import { css } from '@emotion/react';
import { useVulnerabilitiesPreview } from '@kbn/cloud-security-posture/src/hooks/use_vulnerabilities_preview';
import { useGetSeverityStatusColor } from '@kbn/cloud-security-posture/src/hooks/use_get_severity_status_color';
import { buildGenericEntityFlyoutPreviewQuery } from '@kbn/cloud-security-posture-common';
import { getVulnerabilityStats, hasVulnerabilitiesData } from '@kbn/cloud-security-posture';
import {
@ -52,6 +53,7 @@ export const VulnerabilitiesInsight: React.FC<VulnerabilitiesInsightProps> = ({
}) => {
const { scopeId, isPreview } = useDocumentDetailsContext();
const { euiTheme } = useEuiTheme();
const { getSeverityStatusColor } = useGetSeverityStatusColor();
const { data } = useVulnerabilitiesPreview({
query: buildGenericEntityFlyoutPreviewQuery('host.name', hostName),
sort: [],
@ -87,14 +89,17 @@ export const VulnerabilitiesInsight: React.FC<VulnerabilitiesInsightProps> = ({
const vulnerabilitiesStats = useMemo(
() =>
getVulnerabilityStats({
critical: CRITICAL,
high: HIGH,
medium: MEDIUM,
low: LOW,
none: NONE,
}),
[CRITICAL, HIGH, MEDIUM, LOW, NONE]
getVulnerabilityStats(
{
critical: CRITICAL,
high: HIGH,
medium: MEDIUM,
low: LOW,
none: NONE,
},
getSeverityStatusColor
),
[CRITICAL, HIGH, MEDIUM, LOW, NONE, getSeverityStatusColor]
);
const count = useMemo(

107
x-pack/solutions/security/plugins/session_view/public/components/detail_panel_alert_actions/styles.ts
View file

@ -1,107 +0,0 @@
/*
* 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 { useMemo } from 'react';
import { useEuiTheme, transparentize } from '@elastic/eui';
import { CSSObject, css } from '@emotion/react';
interface StylesDeps {
minimal?: boolean;
isInvestigated?: boolean;
}
export const useStyles = ({ minimal = false, isInvestigated = false }: StylesDeps) => {
const { euiTheme } = useEuiTheme();
const cached = useMemo(() => {
const { colors, font, size, border } = euiTheme;
const dangerBorder = transparentize(colors.danger, 0.2);
const dangerBackground = transparentize(colors.danger, 0.08);
const borderThickness = border.width.thin;
const mediumPadding = size.m;
let alertTitleColor = colors.text;
let borderColor = colors.lightShade;
if (isInvestigated) {
alertTitleColor = colors.primaryText;
borderColor = dangerBorder;
}
const alertItem = css`
border: ${borderThickness} solid ${borderColor};
padding: ${mediumPadding};
border-radius: ${border.radius.medium};
margin: 0 ${mediumPadding} ${mediumPadding} ${mediumPadding};
background-color: ${colors.emptyShade};
& .euiAccordion__buttonContent {
width: 100%;
}
& .euiAccordion__button {
min-width: 0;
width: calc(100% - ${size.l});
}
& .euiAccordion__childWrapper {
overflow: visible;
}
`;
const alertTitle: CSSObject = {
display: minimal ? 'none' : 'initial',
color: alertTitleColor,
fontWeight: font.weight.semiBold,
textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace: 'nowrap',
};
const alertIcon: CSSObject = {
marginRight: size.s,
};
const alertAccordionButton: CSSObject = {
width: `calc(100% - ${size.l})`,
minWidth: 0,
};
const processPanel: CSSObject = {
border: `${borderThickness} solid ${colors.lightShade}`,
fontFamily: font.familyCode,
marginTop: mediumPadding,
padding: `${size.xs} ${size.s}`,
};
const investigatedLabel: CSSObject = {
position: 'relative',
zIndex: 1,
bottom: `-${mediumPadding}`,
left: `-${mediumPadding}`,
width: `calc(100% + ${mediumPadding} * 2)`,
borderTop: `${borderThickness} solid ${dangerBorder}`,
borderBottomLeftRadius: border.radius.medium,
borderBottomRightRadius: border.radius.medium,
backgroundColor: dangerBackground,
textAlign: 'center',
};
return {
alertItem,
alertTitle,
alertIcon,
alertAccordionButton,
processPanel,
investigatedLabel,
};
}, [euiTheme, isInvestigated, minimal]);
return cached;
};

4
x-pack/solutions/security/plugins/session_view/public/components/detail_panel_alert_list_item/styles.ts
View file

@ -15,8 +15,8 @@ export const useStyles = (minimal = false, isInvestigated = false) => {
const cached = useMemo(() => {
const { colors, font, size, border } = euiTheme;
const dangerBorder = transparentize(colors.danger, 0.2);
const dangerBackground = transparentize(colors.danger, 0.08);
const dangerBorder = transparentize(colors.danger, 0.2); // TODO: Borealis migration - replace transparentize with color token
const dangerBackground = transparentize(colors.danger, 0.08); // TODO: Borealis migration - replace transparentize with color token
const borderThickness = border.width.thin;
const mediumPadding = size.m;

2
x-pack/solutions/security/plugins/session_view/public/components/detail_panel_list_item/styles.ts
View file

@ -41,7 +41,7 @@ export const useStyles = ({ display }: StylesDeps) => {
position: 'relative',
borderRadius: euiTheme.border.radius.medium,
'&:hover': {
background: transparentize(euiTheme.colors.primary, 0.1),
background: transparentize(euiTheme.colors.primary, 0.1), // TODO: Borealis migration - replace transparentize with color token
},
height: 'fit-content',
};

22
x-pack/solutions/security/plugins/session_view/public/components/process_tree/styles.ts
View file

@ -6,7 +6,6 @@
*/
import { useMemo } from 'react';
import { transparentize } from '@elastic/eui';
import { CSSObject } from '@emotion/react';
import { useEuiTheme } from '../../hooks';
@ -14,8 +13,7 @@ export const useStyles = () => {
const { euiTheme, euiVars } = useEuiTheme();
const cached = useMemo(() => {
const { colors, font, size } = euiTheme;
const defaultSelectionColor = colors.primary;
const { font } = euiTheme;
const sessionViewProcessTree: CSSObject = {
position: 'relative',
@ -25,26 +23,8 @@ export const useStyles = () => {
backgroundColor: euiVars.euiColorLightestShade,
};
const selectionArea: CSSObject = {
position: 'absolute',
display: 'none',
marginLeft: '-50%',
width: '150%',
height: '100%',
backgroundColor: defaultSelectionColor,
pointerEvents: 'none',
opacity: 0.1,
transform: `translateY(-${size.xs})`,
};
const defaultSelected = transparentize(colors.primary, 0.008);
const alertSelected = transparentize(colors.danger, 0.008);
return {
sessionViewProcessTree,
selectionArea,
defaultSelected,
alertSelected,
};
}, [euiTheme, euiVars]);

16
x-pack/solutions/security/plugins/session_view/public/components/process_tree_alert/styles.ts
View file

@ -23,17 +23,17 @@ export const useStyles = ({ isInvestigated, isSelected }: StylesDeps) => {
const getHighlightColors = () => {
let bgColor = 'none';
let hoverBgColor = `${transparentize(colors.primary, 0.04)}`;
let hoverBgColor = `${transparentize(colors.primary, 0.04)}`; // TODO: Borealis migration - replace transparentize with color token
if (isInvestigated && isSelected) {
bgColor = `${transparentize(colors.danger, 0.08)}`;
hoverBgColor = `${transparentize(colors.danger, 0.12)}`;
bgColor = `${transparentize(colors.danger, 0.08)}`; // TODO: Borealis migration - replace transparentize with color token
hoverBgColor = `${transparentize(colors.danger, 0.12)}`; // TODO: Borealis migration - replace transparentize with color token
} else if (isInvestigated) {
bgColor = `${transparentize(colors.danger, 0.04)}`;
hoverBgColor = `${transparentize(colors.danger, 0.12)}`;
bgColor = `${transparentize(colors.danger, 0.04)}`; // TODO: Borealis migration - replace transparentize with color token
hoverBgColor = `${transparentize(colors.danger, 0.12)}`; // TODO: Borealis migration - replace transparentize with color token
} else if (isSelected) {
bgColor = `${transparentize(colors.primary, 0.08)}`;
hoverBgColor = `${transparentize(colors.primary, 0.12)}`;
bgColor = `${transparentize(colors.primary, 0.08)}`; // TODO: Borealis migration - replace transparentize with color token
hoverBgColor = `${transparentize(colors.primary, 0.12)}`; // TODO: Borealis migration - replace transparentize with color token
}
return { bgColor, hoverBgColor };
@ -56,7 +56,7 @@ export const useStyles = ({ isInvestigated, isSelected }: StylesDeps) => {
flexShrink: 0,
marginRight: size.xs,
'&:hover, &:focus, &:focus-within': {
backgroundColor: transparentize(euiVars.buttonsBackgroundNormalDefaultPrimary, 0.2),
backgroundColor: transparentize(euiVars.buttonsBackgroundNormalDefaultPrimary, 0.2), // TODO: Borealis migration - replace transparentize with color token
},
},
'&& .euiFlexItem': {

6
x-pack/solutions/security/plugins/session_view/public/components/process_tree_node/index.tsx
View file

@ -5,12 +5,6 @@
* 2.0.
*/
/*
* 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, {
useState,
useEffect,

16
x-pack/solutions/security/plugins/session_view/public/components/process_tree_node/styles.ts
View file

@ -58,9 +58,9 @@ export const useStyles = ({
*/
const getHighlightColors = () => {
let bgColor = 'none';
let hoverColor = transparentize(colors.primary, 0.04);
let hoverColor = transparentize(colors.primary, 0.04); // TODO: Borealis migration - replace transparentize with color token
let borderColor = 'transparent';
let searchResColor = transparentize(colors.warning, 0.32);
let searchResColor = transparentize(colors.warning, 0.32); // TODO: Borealis migration - replace transparentize with color token
if (hasAlerts) {
borderColor = colors.danger;
@ -68,15 +68,15 @@ export const useStyles = ({
if (isSelected) {
searchResColor = colors.warning;
bgColor = transparentize(colors.primary, 0.08);
hoverColor = transparentize(colors.primary, 0.12);
bgColor = transparentize(colors.primary, 0.08); // TODO: Borealis migration - replace transparentize with color token
hoverColor = transparentize(colors.primary, 0.12); // TODO: Borealis migration - replace transparentize with color token
}
if (hasInvestigatedAlert) {
bgColor = transparentize(colors.danger, 0.04);
hoverColor = transparentize(colors.danger, 0.12);
bgColor = transparentize(colors.danger, 0.04); // TODO: Borealis migration - replace transparentize with color token
hoverColor = transparentize(colors.danger, 0.12); // TODO: Borealis migration - replace transparentize with color token
if (isSelected) {
bgColor = transparentize(colors.danger, 0.08);
bgColor = transparentize(colors.danger, 0.08); // TODO: Borealis migration - replace transparentize with color token
}
}
@ -166,7 +166,7 @@ export const useStyles = ({
};
const workingDir: CSSObject = {
color: colors.successText,
color: colors.textSuccess,
fontFamily: font.familyCode,
fontWeight: font.weight.regular,
};

51
x-pack/solutions/security/plugins/session_view/public/components/process_tree_node/use_button_styles.ts
View file

@ -6,12 +6,11 @@
*/
import { useMemo } from 'react';
import { transparentize } from '@elastic/eui';
import { CSSObject } from '@emotion/react';
import { useEuiTheme } from '../../hooks';
export const useButtonStyles = () => {
const { euiTheme, euiVars } = useEuiTheme();
const { euiTheme } = useEuiTheme();
const cached = useMemo(() => {
const { border, colors, size, font } = euiTheme;
@ -27,9 +26,9 @@ export const useButtonStyles = () => {
marginRight: size.xs,
minWidth: 0,
padding: `${size.s} ${size.xxs}`,
color: euiVars.euiColorVis6_asText,
background: transparentize(euiVars.euiColorVis6, 0.04),
border: `${border.width.thin} solid ${transparentize(euiVars.euiColorVis6, 0.48)}`,
color: colors.textPrimary,
background: colors.backgroundBasePrimary,
border: `${border.width.thin} solid ${colors.borderBasePrimary}`,
'&& > span': {
padding: `0px ${size.xxs}`,
svg: {
@ -37,7 +36,7 @@ export const useButtonStyles = () => {
},
},
'&&:hover, &&:focus': {
background: transparentize(euiVars.euiColorVis6, 0.12),
background: colors.backgroundLightPrimary,
textDecoration: 'none',
},
'&.isExpanded > span svg:not(.alertIcon)': {
@ -45,9 +44,9 @@ export const useButtonStyles = () => {
},
'&.isExpanded': {
color: colors.ghost,
background: euiVars.euiColorVis6,
background: colors.backgroundFilledPrimary,
'&:hover, &:focus': {
background: euiVars.euiColorVis6,
background: colors.backgroundFilledPrimary,
},
},
};
@ -57,18 +56,18 @@ export const useButtonStyles = () => {
};
const alertButton: CSSObject = {
...button,
color: euiVars.euiColorDanger,
background: transparentize(euiVars.euiColorDanger, 0.04),
border: `${border.width.thin} solid ${transparentize(euiVars.euiColorDanger, 0.48)}`,
color: colors.textDanger,
background: colors.backgroundBaseDanger,
border: `${border.width.thin} solid ${colors.borderBaseDanger}`,
'&&:hover, &&:focus': {
background: transparentize(euiVars.euiColorDanger, 0.12),
background: colors.backgroundLightDanger,
textDecoration: 'none',
},
'&.isExpanded': {
color: colors.ghost,
background: euiVars.euiColorDanger,
background: colors.backgroundFilledDanger,
'&:hover, &:focus': {
background: `${euiVars.euiColorDanger}`,
background: `${colors.backgroundFilledDanger}`,
},
},
@ -83,18 +82,18 @@ export const useButtonStyles = () => {
const outputButton: CSSObject = {
...button,
color: euiVars.euiColorVis1,
background: transparentize(euiVars.euiColorVis1, 0.04),
border: `${border.width.thin} solid ${transparentize(euiVars.euiColorVis1, 0.48)}`,
color: colors.textAccent,
background: colors.backgroundBaseAccent,
border: `${border.width.thin} solid ${colors.borderBaseAccent}`,
'&&:hover, &&:focus': {
background: transparentize(euiVars.euiColorVis1, 0.12),
background: colors.backgroundLightAccent,
textDecoration: 'none',
},
'&.isExpanded': {
color: colors.ghost,
background: euiVars.euiColorVis1,
background: colors.backgroundFilledAccent,
'&:hover, &:focus': {
background: `${euiVars.euiColorVis1}`,
background: `${colors.backgroundFilledAccent}`,
},
},
};
@ -102,12 +101,12 @@ export const useButtonStyles = () => {
const userChangedButton: CSSObject = {
...button,
cursor: 'default',
color: euiVars.euiColorGhost,
background: euiVars.euiColorVis3,
border: `${border.width.thin} solid ${transparentize(euiVars.euiColorVis3, 0.48)}`,
color: colors.textAccentSecondary,
background: colors.backgroundBaseAccentSecondary,
border: `${border.width.thin} solid ${colors.borderBaseAccentSecondary}`,
'&&:hover, &&:focus': {
color: euiVars.euiColorGhost,
background: euiVars.euiColorVis3,
color: colors.textAccentSecondary,
background: colors.backgroundBaseAccentSecondary,
textDecoration: 'none',
transform: 'none',
animation: 'none',
@ -126,7 +125,7 @@ export const useButtonStyles = () => {
userChangedButton,
buttonSize,
};
}, [euiTheme, euiVars]);
}, [euiTheme]);
return cached;
};

2
x-pack/solutions/security/plugins/session_view/public/components/tty_player/styles.ts
View file

@ -37,7 +37,7 @@ export const useStyles = (tty?: Teletype, show?: boolean) => {
padding: `${size.m} ${size.base}`,
};
const windowBoundsColor = transparentize(colors.ghost, 0.6);
const windowBoundsColor = transparentize(colors.ghost, 0.6); // TODO: Borealis migration - replace transparentize with color token, get rid of ghost color
const terminal: CSSObject = {
minHeight: '100%',

24
x-pack/solutions/security/plugins/session_view/public/components/tty_player_controls/tty_player_controls_markers/styles.ts
View file

@ -11,8 +11,13 @@ import { useEuiTheme } from '../../../hooks';
import { TTYPlayerLineMarkerType } from '.';
const isAmsterdam = (euiThemeName: string) => {
return euiThemeName?.toLowerCase().includes('amsterdam');
};
export const useStyles = (progress: number) => {
const { euiTheme, euiVars } = useEuiTheme();
const themeName = euiTheme.themeName;
const cached = useMemo(() => {
const { border } = euiTheme;
@ -36,7 +41,7 @@ export const useStyles = (progress: number) => {
if (selected) {
return euiVars.terminalOutputMarkerAccent;
}
return euiVars.euiColorVis1;
return isAmsterdam(themeName) ? euiVars.euiColorVis1 : euiVars.euiColorVis2;
};
const marker = (type: TTYPlayerLineMarkerType, selected: boolean): CSSObject => ({
@ -84,16 +89,24 @@ export const useStyles = (progress: number) => {
"input[type='range']::-webkit-slider-thumb": customThumb,
"input[type='range']::-moz-range-thumb": customThumb,
'.euiRangeHighlight__progress': {
backgroundColor: euiVars.euiColorVis0_behindText,
backgroundColor: isAmsterdam(themeName)
? euiVars.euiColorVis0_behindText
: euiVars.euiColorVis0,
width: progress + '%!important',
borderBottomRightRadius: 0,
borderTopRightRadius: 0,
},
'.euiRangeSlider:focus ~ .euiRangeHighlight .euiRangeHighlight__progress': {
backgroundColor: euiVars.euiColorVis0_behindText,
backgroundColor: isAmsterdam(themeName)
? euiVars.euiColorVis0_behindText
: euiVars.euiColorVis0,
},
'.euiRangeSlider:focus:not(:focus-visible) ~ .euiRangeHighlight .euiRangeHighlight__progress':
{ backgroundColor: euiVars.euiColorVis0_behindText },
{
backgroundColor: isAmsterdam(themeName)
? euiVars.euiColorVis0_behindText
: euiVars.euiColorVis0,
},
'.euiRangeTrack::after': {
background: euiVars.terminalOutputSliderBackground,
},
@ -120,12 +133,15 @@ export const useStyles = (progress: number) => {
}, [
euiTheme,
euiVars.euiColorVis0_behindText,
euiVars.euiColorVis0,
euiVars.euiColorVis1,
euiVars.euiColorVis2,
euiVars.terminalOutputBackground,
euiVars.terminalOutputMarkerAccent,
euiVars.terminalOutputMarkerWarning,
euiVars.terminalOutputSliderBackground,
progress,
themeName,
]);
return cached;

14
x-pack/solutions/security/plugins/session_view/public/hooks/use_eui_theme.ts
View file

@ -5,14 +5,12 @@
* 2.0.
*/
import { shade, useEuiTheme as useEuiThemeHook } from '@elastic/eui';
import { euiLightVars, euiDarkVars } from '@kbn/ui-theme';
import { useEuiTheme as useEuiThemeHook } from '@elastic/eui';
import { euiLightVars, euiDarkVars } from '@kbn/ui-theme'; // TODO: Borealis migration - replace to use vars from useEuiTheme?
import { useMemo } from 'react';
type EuiThemeProps = Parameters<typeof useEuiThemeHook>;
type ExtraEuiVars = {
// eslint-disable-next-line @typescript-eslint/naming-convention
euiColorVis6_asText: string;
buttonsBackgroundNormalDefaultPrimary: string;
terminalOutputBackground: string;
terminalOutputMarkerAccent: string;
@ -29,14 +27,12 @@ export const useEuiTheme = (...props: EuiThemeProps): EuiThemeReturn => {
const euiThemeHook = useEuiThemeHook(...props);
const euiVars = useMemo(() => {
const themeVars = euiThemeHook.colorMode === 'DARK' ? euiDarkVars : euiLightVars;
const themeVars = euiThemeHook.colorMode === 'DARK' ? euiDarkVars : euiLightVars; // TODO: Borealis migration - check if euiLightVars and euiDarkVars are still available in Borialis
const extraEuiVars: ExtraEuiVars = {
// eslint-disable-next-line @typescript-eslint/naming-convention
euiColorVis6_asText: shade(themeVars.euiColorVis6, 0.335),
buttonsBackgroundNormalDefaultPrimary: '#006DE4',
buttonsBackgroundNormalDefaultPrimary: '#006DE4', // TODO: Borealis migration - replace with proper color token
// Terminal Output Colors don't change with the theme
terminalOutputBackground: '#1d1e23',
terminalOutputBackground: '#1d1e23', // TODO: Borealis migration - replace with proper color token
terminalOutputMarkerAccent: euiLightVars.euiColorAccent,
terminalOutputMarkerWarning: euiDarkVars.euiColorWarning,
terminalOutputSliderBackground: euiLightVars.euiColorDarkestShade,