Skip to content

Commit cbb4da4

Browse files
bryce-bbenakansara
authored andcommitted
[EUI][INFRA] Updated hardcoded colors (elastic#204133)
## Summary This PR replaces a couple of places where hardcoded colors are used in the Infra portion of Kibana with EUITheme colors. ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [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) ### Details Below are before and after screenshots: #### Inventory History ##### Before <img width="721" alt="inventory history before" src="https://github.com/user-attachments/assets/5dab5dee-aecd-4e81-8f4f-f838faeb2f66" /> ##### After <img width="755" alt="Screenshot 2024-12-12 at 13 05 45" src="https://github.com/user-attachments/assets/8d4b2d03-0326-4f69-b2b4-68550ebb6b0f" /> #### Alert Threshold & Alert Range annotation ##### Before <img width="2272" alt="Screenshot 2024-12-11 at 14 10 54" src="https://github.com/user-attachments/assets/fa01cac2-62ff-451c-b191-5814a03840bc" /> ##### After <img width="1220" alt="Screenshot 2024-12-12 at 12 58 32" src="https://github.com/user-attachments/assets/eb4953ab-1c4d-42d1-b5ca-b5c16f0b41c5" />
1 parent be68965 commit cbb4da4

File tree

4 files changed

+11
-8
lines changed

4 files changed

+11
-8
lines changed

x-pack/plugins/observability_solution/infra/public/alerting/log_threshold/components/alert_details_app_section/components/threhsold_chart/create_lens_definition.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ function createBaseLensDefinition<D extends {}>(
7878
yConfig: [
7979
{
8080
forAccessor: '607b2253-ed20-4f0a-bf62-07a1f846cca4',
81-
color: '#6092c0',
81+
color: euiTheme.colors.vis.euiColorVis2,
8282
},
8383
],
8484
},

x-pack/plugins/observability_solution/infra/public/alerting/metric_threshold/components/__snapshots__/alert_details_app_section.test.tsx.snap

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

x-pack/plugins/observability_solution/infra/public/alerting/metric_threshold/components/alert_details_app_section.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ import {
1818
transparentize,
1919
useEuiTheme,
2020
} from '@elastic/eui';
21-
import chroma from 'chroma-js';
2221

2322
import { RuleConditionChart, TopAlert } from '@kbn/observability-plugin/public';
2423
import { ALERT_END, ALERT_START, ALERT_EVALUATION_VALUES, ALERT_GROUP } from '@kbn/rule-data-utils';
@@ -90,7 +89,7 @@ export function AlertDetailsAppSection({ alert, rule }: AppSectionProps) {
9089
timestamp: alertStart!,
9190
endTimestamp: alertEnd ?? moment().toISOString(),
9291
},
93-
color: chroma(transparentize('#F04E981A', 0.2)).hex().toUpperCase(),
92+
color: transparentize(euiTheme.colors.danger, 0.2),
9493
id: `metric_threshold_${alertEnd ? 'recovered' : 'active'}_alert_range_annotation`,
9594
};
9695

x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { i18n } from '@kbn/i18n';
1010
import { FormattedMessage } from '@kbn/i18n-react';
1111
import moment from 'moment';
1212
import { first, last } from 'lodash';
13-
import { EuiLoadingChart, EuiText, EuiEmptyPrompt, EuiButton } from '@elastic/eui';
13+
import { EuiLoadingChart, EuiText, EuiEmptyPrompt, EuiButton, useEuiTheme } from '@elastic/eui';
1414
import {
1515
Axis,
1616
Chart,
@@ -56,7 +56,7 @@ export const Timeline: React.FC<Props> = ({ interval, yAxisFormatter, isVisible
5656
const { metric, nodeType, accountId, region } = useWaffleOptionsContext();
5757
const { currentTime, jumpToTime, stopAutoReload } = useWaffleTimeContext();
5858
const { filterQueryAsJson } = useWaffleFiltersContext();
59-
59+
const { euiTheme } = useEuiTheme();
6060
const chartTheme = useTimelineChartTheme();
6161

6262
const { loading, error, startTime, endTime, timeseries, reload } = useTimeline(
@@ -238,7 +238,11 @@ export const Timeline: React.FC<Props> = ({ interval, yAxisFormatter, isVisible
238238
<EuiFlexGroup gutterSize={'s'} alignItems={'center'} responsive={false}>
239239
<EuiFlexItem
240240
grow={false}
241-
style={{ backgroundColor: '#D36086', height: 5, width: 10 }}
241+
style={{
242+
backgroundColor: euiTheme.colors.backgroundFilledAccent,
243+
height: 5,
244+
width: 10,
245+
}}
242246
/>
243247
<EuiFlexItem>
244248
<EuiText size={'xs'}>
@@ -261,7 +265,7 @@ export const Timeline: React.FC<Props> = ({ interval, yAxisFormatter, isVisible
261265
dataValues={generateAnnotationData(
262266
anomalies.map((a) => [a.startTime, a.influencers])
263267
)}
264-
style={{ fill: '#D36086' }}
268+
style={{ fill: euiTheme.colors.backgroundFilledAccent }}
265269
/>
266270
)}
267271
<MetricExplorerSeriesChart

0 commit comments

Comments
 (0)