diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/components/horizontal_page_steps.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/components/horizontal_page_steps.tsx
index 752b49431dadb..a00ef9118b857 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/components/horizontal_page_steps.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/components/horizontal_page_steps.tsx
@@ -7,31 +7,7 @@
import React from 'react';
import { EuiStepsHorizontal } from '@elastic/eui';
import type { EuiStepsHorizontalProps } from '@elastic/eui';
-import styled from 'styled-components';
-// polyfill until https://github.com/elastic/eui/discussions/5836 implemented
-const NumberlessHorizontalSteps = styled(EuiStepsHorizontal)`
- .euiStepNumber {
- color: transparent;
- width: 16px;
- height: 16px;
- outline-color: #07c;
- }
- .euiStepHorizontal::before {
- width: calc(50% - 8px);
- top: 32px;
- }
- .euiStepHorizontal::after {
- width: calc(50% - 8px);
- top: 32px;
- }
- .euiStepHorizontal {
- padding: 25px 16px 16px;
- }
- .euiStepHorizontal[data-step-status='incomplete'] .euiStepHorizontal__title {
- color: #69707d;
- }
-`;
const getStepStatus = (currentStep: number, stepIndex: number, currentStepComplete: boolean) => {
if (currentStep === stepIndex) {
if (currentStepComplete) return 'complete';
@@ -58,5 +34,5 @@ export const PageSteps: React.FC<{
};
}) as EuiStepsHorizontalProps['steps'];
- return ;
+ return ;
};
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/agent_activity_flyout/activity_item.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/agent_activity_flyout/activity_item.tsx
index 06300480dfa50..f95e81de6d3d1 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/agent_activity_flyout/activity_item.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/agent_activity_flyout/activity_item.tsx
@@ -16,25 +16,22 @@ import {
EuiText,
EuiPanel,
EuiSpacer,
+ useEuiTheme,
} from '@elastic/eui';
import type { ActionStatus } from '../../../../../types';
import { ViewErrors } from '../view_errors';
-import {
- formattedTime,
- getAction,
- inProgressDescription,
- inProgressTitle,
- inProgressTitleColor,
-} from './helpers';
+import { formattedTime, getAction, inProgressDescription, inProgressTitle } from './helpers';
import { ViewAgentsButton } from './view_agents_button';
export const ActivityItem: React.FunctionComponent<{
action: ActionStatus;
onClickViewAgents: (action: ActionStatus) => void;
}> = ({ action, onClickViewAgents }) => {
+ const theme = useEuiTheme();
+
const completeTitle =
action.type === 'POLICY_CHANGE' && action.nbAgentsActioned === 0 ? (
@@ -104,18 +101,21 @@ export const ActivityItem: React.FunctionComponent<{
IN_PROGRESS: {
icon: ,
title: {inProgressTitle(action)},
- titleColor: inProgressTitleColor,
+ titleColor: theme.euiTheme.colors.textPrimary,
description: {inProgressDescription(action.creationTime)},
},
ROLLOUT_PASSED: {
icon:
action.nbAgentsFailed > 0 ? (
-
+
) : (
-
+
),
title: completeTitle,
- titleColor: action.nbAgentsFailed > 0 ? 'red' : 'green',
+ titleColor:
+ action.nbAgentsFailed > 0
+ ? theme.euiTheme.colors.textDanger
+ : theme.euiTheme.colors.textSuccess,
description:
action.nbAgentsFailed > 0 ? (
failedDescription
@@ -124,9 +124,9 @@ export const ActivityItem: React.FunctionComponent<{
),
},
COMPLETE: {
- icon: ,
+ icon: ,
title: completeTitle,
- titleColor: 'green',
+ titleColor: theme.euiTheme.colors.textSuccess,
description:
action.type === 'POLICY_REASSIGN' && action.newPolicyId ? (
@@ -160,14 +160,14 @@ export const ActivityItem: React.FunctionComponent<{
),
},
FAILED: {
- icon: ,
+ icon: ,
title: completeTitle,
- titleColor: 'red',
+ titleColor: theme.euiTheme.colors.textDanger,
description: failedDescription,
},
CANCELLED: {
- icon: ,
- titleColor: 'grey',
+ icon: ,
+ titleColor: theme.euiTheme.colors.textSubdued,
title: (
,
- titleColor: 'grey',
+ icon: ,
+ titleColor: theme.euiTheme.colors.textSubdued,
title: (
void;
}> = ({ action, abortUpgrade, onClickViewAgents }) => {
const { docLinks } = useStartServices();
+ const theme = useEuiTheme();
+
const [isAborting, setIsAborting] = useState(false);
const onClickAbortUpgrade = useCallback(async () => {
try {
@@ -69,7 +67,10 @@ export const UpgradeInProgressActivityItem: React.FunctionComponent<{
{isScheduled ? : }
-
+
{isScheduled && action.startTime ? (
= ({ action }) => {
const coreStart = useStartServices();
+ const theme = useEuiTheme();
const getLogsButton = (agentId: string, timestamp: string) => {
const start = moment(timestamp).subtract(5, 'm').toISOString();
@@ -70,7 +71,11 @@ export const ViewErrors: React.FunctionComponent<{ action: ActionStatus }> = ({
}),
render: (error: string) => (
-
+
{error}
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_requirements_page/es_requirements_page.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_requirements_page/es_requirements_page.tsx
index 969f9357a21db..3128b05f3af85 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_requirements_page/es_requirements_page.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_requirements_page/es_requirements_page.tsx
@@ -20,9 +20,10 @@ import {
EuiCode,
EuiCodeBlock,
EuiLink,
+ useEuiTheme,
} from '@elastic/eui';
-import styled from 'styled-components';
+import { css } from '@emotion/react';
import { WithoutHeaderLayout } from '../../../layouts';
import type { GetFleetStatusResponse } from '../../../types';
@@ -50,20 +51,21 @@ export const RequirementItem: React.FunctionComponent<{
);
};
-const borderColor = '#d3dae6';
-
-const StyledPageBody = styled(EuiPageBody)`
- border: 1px solid ${borderColor};
- border-radius: 5px;
-`;
-
export const MissingESRequirementsPage: React.FunctionComponent<{
missingRequirements: GetFleetStatusResponse['missing_requirements'];
}> = ({ missingRequirements }) => {
const { docLinks } = useStartServices();
+ const theme = useEuiTheme();
+
return (
-
+
-
+
);
};
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/donut_chart.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/donut_chart.tsx
deleted file mode 100644
index 6f3d865b22843..0000000000000
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/donut_chart.tsx
+++ /dev/null
@@ -1,66 +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 React, { useEffect, useRef } from 'react';
-import d3 from 'd3';
-import { EuiFlexItem } from '@elastic/eui';
-
-interface DonutChartProps {
- data: {
- [key: string]: number;
- };
- height: number;
- width: number;
-}
-
-export const DonutChart = ({ height, width, data }: DonutChartProps) => {
- const chartElement = useRef(null);
-
- useEffect(() => {
- if (chartElement.current !== null) {
- // we must remove any existing paths before painting
- d3.selectAll('g').remove();
- const svgElement = d3
- .select(chartElement.current)
- .append('g')
- .attr('transform', `translate(${width / 2}, ${height / 2})`);
- const color = d3.scale
- .ordinal()
- // @ts-ignore
- .domain(data)
- .range(['#017D73', '#98A2B3', '#BD271E', '#F5A700']);
- const pieGenerator = d3.layout
- .pie()
- .value(({ value }: any) => value)
- // these start/end angles will reverse the direction of the pie,
- // which matches our design
- .startAngle(2 * Math.PI)
- .endAngle(0);
-
- svgElement
- .selectAll('g')
- // @ts-ignore
- .data(pieGenerator(d3.entries(data)))
- .enter()
- .append('path')
- .attr(
- 'd',
- // @ts-ignore attr does not expect a param of type Arc but it behaves as desired
- d3.svg
- .arc()
- .innerRadius(width * 0.36)
- .outerRadius(Math.min(width, height) / 2)
- )
- .attr('fill', (d: any) => color(d.data.key) as any);
- }
- }, [data, height, width]);
- return (
-
-
-
- );
-};
diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_card.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_card.tsx
index 52a3a90ae641e..2bf1f58a6e12b 100644
--- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_card.tsx
+++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/components/package_card.tsx
@@ -6,7 +6,6 @@
*/
import React from 'react';
-import styled from 'styled-components';
import {
EuiBadge,
EuiButton,
@@ -15,6 +14,7 @@ import {
EuiFlexItem,
EuiSpacer,
EuiToolTip,
+ useEuiTheme,
} from '@elastic/eui';
import { css } from '@emotion/react';
@@ -43,15 +43,6 @@ import {
export type PackageCardProps = IntegrationCardItem;
-// Min-height is roughly 3 lines of content.
-// This keeps the cards from looking overly unbalanced because of content differences.
-const Card = styled(EuiCard)<{ isquickstart?: boolean; $maxCardHeight?: number }>`
- min-height: 127px;
- border-color: ${({ isquickstart }) => (isquickstart ? '#ba3d76' : null)};
- ${({ $maxCardHeight }) =>
- $maxCardHeight ? `max-height: ${$maxCardHeight}px; overflow: hidden;` : ''};
-`;
-
export function PackageCard({
description,
name,
@@ -78,6 +69,8 @@ export function PackageCard({
descriptionLineClamp,
maxCardHeight,
}: PackageCardProps) {
+ const theme = useEuiTheme();
+
let releaseBadge: React.ReactNode | null = null;
if (release && release !== 'ga') {
releaseBadge = (
@@ -202,8 +195,10 @@ export function PackageCard({
tourOffset={10}
>
-
}
onClick={onClickProp ?? onCardClick}
- $maxCardHeight={maxCardHeight}
>
{showLabels && extraLabelsBadges ? extraLabelsBadges : null}
@@ -258,7 +256,7 @@ export function PackageCard({
showInstallationStatus={showInstallationStatus}
/>
-
+
);