Refactor series color resolution, fix nits

x-pack/plugins/observability_solution/infra/public/components/asset_details/components/kpis/container_kpi_charts.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { EuiFlexItem, useEuiTheme } from '@elastic/eui';
+import { EuiFlexItem } from '@elastic/eui';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import type { Filter, Query, TimeRange } from '@kbn/es-query';
 import { Kpi } from './kpi';
@@ -79,10 +79,8 @@ const DockerKpiCharts = ({
   searchSessionId,
   loading = false,
 }: ContainerKpiChartsProps) => {
-  const { euiTheme } = useEuiTheme();
   const charts = useDockerContainerKpiCharts({
     dataViewId: dataView?.id,
-    seriesColor: euiTheme.colors.backgroundLightText,
   });
 
   return (
@@ -112,10 +110,8 @@ const KubernetesKpiCharts = ({
   searchSessionId,
   loading = false,
 }: ContainerKpiChartsProps) => {
-  const { euiTheme } = useEuiTheme();
   const charts = useK8sContainerKpiCharts({
     dataViewId: dataView?.id,
-    seriesColor: euiTheme.colors.backgroundLightText,
   });
 
   return (

x-pack/plugins/observability_solution/infra/public/components/asset_details/components/kpis/host_kpi_charts.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { EuiFlexItem, useEuiTheme } from '@elastic/eui';
+import { EuiFlexItem } from '@elastic/eui';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import type { Filter, Query, TimeRange } from '@kbn/es-query';
 import { Kpi } from './kpi';
@@ -31,11 +31,9 @@ export const HostKpiCharts = ({
   searchSessionId,
   loading = false,
 }: HostKpiChartsProps) => {
-  const { euiTheme } = useEuiTheme();
   const charts = useHostKpiCharts({
     dataViewId: dataView?.id,
     getSubtitle,
-    seriesColor: euiTheme.colors.backgroundLightText,
   });
 
   return (

x-pack/plugins/observability_solution/infra/public/components/asset_details/hooks/use_chart_series_color.test.ts

@@ -0,0 +1,43 @@
+/*
+ * 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 { renderHook } from '@testing-library/react';
+import { useChartSeriesColor } from './use_chart_series_color';
+
+describe('useChartSeriesColor', () => {
+  let seriesDefaultColor: string;
+
+  beforeEach(() => {
+    const { result } = renderHook(() => useEuiTheme());
+
+    // Don't try to test a hardcoded value, just use what is provided by EUI.
+    // If in the future this value changes, the tests won't break.
+    seriesDefaultColor = result.current.euiTheme.colors.backgroundLightText;
+  });
+
+  it('returns a default color value if given no input', () => {
+    const { result } = renderHook(() => useChartSeriesColor());
+
+    expect(result.current).not.toBe('');
+    expect(result.current).toBe(seriesDefaultColor);
+  });
+
+  it('returns a default color value if given an empty string', () => {
+    const { result } = renderHook(() => useChartSeriesColor(''));
+
+    expect(result.current).not.toBe('');
+    expect(result.current).toBe(seriesDefaultColor);
+  });
+
+  it('returns the provided color input', () => {
+    const { result } = renderHook(() => useChartSeriesColor('#fff'));
+
+    expect(result.current).not.toBe(seriesDefaultColor);
+    expect(result.current).toBe('#fff');
+  });
+});

x-pack/plugins/observability_solution/infra/public/components/asset_details/hooks/use_chart_series_color.ts

@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useEuiTheme } from '@elastic/eui';
+
+/**
+ * Provides either the input color, or yields the default EUI theme
+ * color for use as the KPI chart series color.
+ * @param seriesColor A user-defined color value
+ * @returns Either the input `seriesColor` or the default color from EUI
+ */
+export const useChartSeriesColor = (seriesColor?: string): string => {
+  const { euiTheme } = useEuiTheme();
+
+  // Prevent empty string being used as a valid color
+  return seriesColor || euiTheme.colors.backgroundLightText;
+};

x-pack/plugins/observability_solution/infra/public/components/asset_details/hooks/use_container_metrics_charts.ts

@@ -9,6 +9,7 @@ import { i18n } from '@kbn/i18n';
 import { findInventoryModel } from '@kbn/metrics-data-access-plugin/common';
 import useAsync from 'react-use/lib/useAsync';
 import { ContainerMetricTypes } from '../charts/types';
+import { useChartSeriesColor } from './use_chart_series_color';
 
 const getSubtitleFromFormula = (value: string) =>
   value.startsWith('max')
@@ -106,6 +107,8 @@ export const useDockerContainerKpiCharts = ({
   dataViewId?: string;
   seriesColor?: string;
 }) => {
+  seriesColor = useChartSeriesColor(seriesColor);
+
   const { value: charts = [] } = useAsync(async () => {
     const model = findInventoryModel('container');
     const { cpu, memory } = await model.metrics.getCharts();
@@ -134,6 +137,8 @@ export const useK8sContainerKpiCharts = ({
   dataViewId?: string;
   seriesColor?: string;
 }) => {
+  seriesColor = useChartSeriesColor(seriesColor);
+
   const { value: charts = [] } = useAsync(async () => {
     const model = findInventoryModel('container');
     const { cpu, memory } = await model.metrics.getCharts();

x-pack/plugins/observability_solution/infra/public/components/asset_details/hooks/use_host_metrics_charts.ts

@@ -10,6 +10,7 @@ import { findInventoryModel } from '@kbn/metrics-data-access-plugin/common';
 import { useMemo } from 'react';
 import useAsync from 'react-use/lib/useAsync';
 import { HostMetricTypes } from '../charts/types';
+import { useChartSeriesColor } from './use_chart_series_color';
 
 export const useHostCharts = ({
   metric,
@@ -87,6 +88,8 @@ export const useHostKpiCharts = ({
   seriesColor?: string;
   getSubtitle?: (formulaValue: string) => string;
 }) => {
+  seriesColor = useChartSeriesColor(seriesColor);
+
   const { value: charts = [] } = useAsync(async () => {
     const model = findInventoryModel('host');
     const { cpu, memory, disk } = await model.metrics.getCharts();

x-pack/plugins/observability_solution/infra/public/components/asset_details/hooks/use_log_charts.ts

@@ -8,6 +8,7 @@
 import { i18n } from '@kbn/i18n';
 import { useMemo } from 'react';
 import { LensConfig } from '@kbn/lens-embeddable-utils/config_builder';
+import { useChartSeriesColor } from './use_chart_series_color';
 
 const LOG_RATE = i18n.translate('xpack.infra.assetDetails.charts.logRate', {
   defaultMessage: 'Log Rate',
@@ -17,7 +18,7 @@ const LOG_ERROR_RATE = i18n.translate('xpack.infra.assetDetails.charts.logErrorR
   defaultMessage: 'Log Error Rate',
 });
 
-const logMetric: LensConfig & { id: string } = {
+const logRateMetric: LensConfig & { id: string } = {
   id: 'logMetric',
   chartType: 'metric',
   title: LOG_RATE,
@@ -29,7 +30,7 @@ const logMetric: LensConfig & { id: string } = {
   normalizeByUnit: 's',
 };
 
-const logErrorMetric: LensConfig & { id: string } = {
+const logErrorRateMetric: LensConfig & { id: string } = {
   id: 'logErrorMetric',
   chartType: 'metric',
   title: LOG_ERROR_RATE,
@@ -49,6 +50,8 @@ export const useLogsCharts = ({
   dataViewId?: string;
   seriesColor?: string;
 }) => {
+  seriesColor = useChartSeriesColor(seriesColor);
+
   return useMemo(() => {
     const dataset = dataViewId && {
       dataset: {
@@ -59,12 +62,12 @@ export const useLogsCharts = ({
     return {
       charts: [
         {
-          ...logMetric,
+          ...logRateMetric,
           ...dataset,
           seriesColor,
         },
         {
-          ...logErrorMetric,
+          ...logErrorRateMetric,
           ...dataset,
           seriesColor,
         },

x-pack/plugins/observability_solution/infra/public/components/asset_details/hooks/use_page_header.tsx

@@ -178,8 +178,7 @@ const useTabs = (tabs: Tab[]) => {
   const tabEntries: TabItem[] = useMemo(
     () =>
       tabs
-        .filter(isTabEnabled)
-        .filter(hasMetricsTab)
+        .filter((tab) => isTabEnabled(tab) && hasMetricsTab(tab))
         .map(({ name, ...tab }) => {
           return {
             ...tab,

x-pack/plugins/observability_solution/infra/public/components/asset_details/tabs/overview/logs.tsx

@@ -8,7 +8,7 @@
 import React, { useMemo } from 'react';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import type { TimeRange } from '@kbn/es-query';
-import { EuiFlexGroup, EuiFlexItem, useEuiTheme } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import {
   findInventoryFields,
   type InventoryItemType,
@@ -38,10 +38,8 @@ export const LogsContent = ({ assetId, assetType, dataView, dateRange }: Props)
     ];
   }, [dataView, assetId, assetType]);
 
-  const { euiTheme } = useEuiTheme();
   const { charts } = useLogsCharts({
     dataViewId: dataView?.id,
-    seriesColor: euiTheme.colors.backgroundLightText,
   });
 
   return (