[SLO] Overview embeddable chart use proper theme !! (#198299)

## Summary Fixes #198298 Overview embeddable chart use proper theme !! ### After <img width="1728" alt="image" src="https://github.com/user-attachments/assets/9fa22277-31ba-41f0-b08a-1ed4d801daff"> ### Before <img width="1728" alt="image" src="https://github.com/user-attachments/assets/98102df8-6881-4672-9791-9e85f9201c6a">
elastic · Oct 30, 2024 · 56825f1 · 56825f1
1 parent dc8322a
commit 56825f1
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 7 deletions.
diff --git a/...k/plugins/observability_solution/slo/public/embeddable/slo/overview/slo_overview_grid.tsx b/...k/plugins/observability_solution/slo/public/embeddable/slo/overview/slo_overview_grid.tsx
@@ -9,7 +9,6 @@ import React from 'react';
 import { ALL_VALUE, HistoricalSummaryResponse, SLOWithSummaryResponse } from '@kbn/slo-schema';
 import {
   Chart,
-  DARK_THEME,
   isMetricElementEvent,
   Metric,
   MetricTrendShape,
@@ -73,12 +72,18 @@ const getSloChartData = ({
   };
 };
 
+const ROW_HEIGHT = 220;
+const ITEMS_PER_ROW = 4;
+
 export function SloCardChartList({ sloId }: { sloId: string }) {
   const {
     http: { basePath },
     uiSettings,
+    charts,
   } = useKibana().services;
 
+  const baseTheme = charts.theme.useChartsBaseTheme();
+
   const [selectedSlo, setSelectedSlo] = React.useState<SLOWithSummaryResponse | null>(null);
 
   const kqlQuery = `slo.id:"${sloId}"`;
@@ -89,6 +94,7 @@ export function SloCardChartList({ sloId }: { sloId: string }) {
 
   const { data: activeAlertsBySlo } = useFetchActiveAlerts({
     sloIdsAndInstanceIds: [[sloId, ALL_VALUE]],
+    rangeFrom: 'now-24h',
   });
 
   const { data: rulesBySlo } = useFetchRulesForSlo({
@@ -151,16 +157,24 @@ export function SloCardChartList({ sloId }: { sloId: string }) {
     );
   }
 
+  const height = sloList?.results
+    ? ROW_HEIGHT * Math.ceil(sloList.results.length / ITEMS_PER_ROW)
+    : ROW_HEIGHT;
+
   return (
     <>
-      <div data-shared-item="" style={{ width: '100%' }}>
-        <Chart>
+      <div data-shared-item="" style={{ width: '100%', overflow: 'auto' }}>
+        <Chart
+          size={{
+            height,
+          }}
+        >
           <Settings
-            baseTheme={DARK_THEME}
+            baseTheme={baseTheme}
             onElementClick={([d]) => {
               if (isMetricElementEvent(d)) {
                 const { columnIndex, rowIndex } = d;
-                const slo = sloList?.results[rowIndex * 4 + columnIndex];
+                const slo = sloList?.results[rowIndex * ITEMS_PER_ROW + columnIndex];
                 setSelectedSlo(slo ?? null);
               }
             }}

diff --git a/x-pack/plugins/observability_solution/slo/public/hooks/use_fetch_active_alerts.ts b/x-pack/plugins/observability_solution/slo/public/hooks/use_fetch_active_alerts.ts
@@ -20,6 +20,7 @@ type SloIdAndInstanceId = [string, string];
 interface Params {
   sloIdsAndInstanceIds: SloIdAndInstanceId[];
   shouldRefetch?: boolean;
+  rangeFrom?: string;
 }
 
 export interface UseFetchActiveAlerts {
@@ -46,6 +47,7 @@ const EMPTY_ACTIVE_ALERTS_MAP = new ActiveAlerts();
 export function useFetchActiveAlerts({
   sloIdsAndInstanceIds = [],
   shouldRefetch = false,
+  rangeFrom = 'now-5m/m',
 }: Params): UseFetchActiveAlerts {
   const { http } = useKibana().services;
 
@@ -63,7 +65,7 @@ export function useFetchActiveAlerts({
                   {
                     range: {
                       '@timestamp': {
-                        gte: 'now-5m/m',
+                        gte: rangeFrom,
                       },
                     },
                   },

diff --git a/...bservability_solution/slo/public/pages/slos/components/card_view/slo_card_item_badges.tsx b/...bservability_solution/slo/public/pages/slos/components/card_view/slo_card_item_badges.tsx
@@ -10,6 +10,7 @@ import { SLOWithSummaryResponse } from '@kbn/slo-schema';
 import { Rule } from '@kbn/triggers-actions-ui-plugin/public';
 import React, { useCallback } from 'react';
 import styled from 'styled-components';
+import { SloIndicatorTypeBadge } from '../badges/slo_indicator_type_badge';
 import { SloActiveAlertsBadge } from '../../../../components/slo/slo_status_badge/slo_active_alerts_badge';
 import { BurnRateRuleParams } from '../../../../typings';
 import { useUrlSearchState } from '../../hooks/use_url_search_state';
@@ -45,6 +46,11 @@ export function SloCardItemBadges({ slo, activeAlerts, rules, handleCreateRule }
     [onStateChange]
   );
 
+  const isRemote = !!slo.remote;
+
+  // in this case, there is more space to display tags
+  const numberOfTagsToDisplay = !isRemote || (rules ?? []).length > 0 ? 2 : 1;
+
   return (
     <Container
       onClick={(evt) => {
@@ -57,13 +63,14 @@ export function SloCardItemBadges({ slo, activeAlerts, rules, handleCreateRule }
         ) : (
           <>
             <SloActiveAlertsBadge slo={slo} activeAlerts={activeAlerts} viewMode="compact" />
+            <SloIndicatorTypeBadge slo={slo} color="default" />
             <SLOCardItemInstanceBadge slo={slo} />
             <SloRulesBadge rules={rules} onClick={handleCreateRule} isRemote={!!slo.remote} />
             <SloTimeWindowBadge slo={slo} color="default" />
             <SloRemoteBadge slo={slo} />
             <SloTagsList
               tags={slo.tags}
-              numberOfTagsToDisplay={1}
+              numberOfTagsToDisplay={numberOfTagsToDisplay}
               color="default"
               ignoreEmpty
               onClick={onTagClick}