Skip to content

Commit

Permalink
[SLO] Overview embeddable chart use proper theme !! (#198299)
Browse files Browse the repository at this point in the history
## 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">
  • Loading branch information
shahzad31 authored Oct 30, 2024
1 parent dc8322a commit 56825f1
Show file tree
Hide file tree
Showing 3 changed files with 30 additions and 7 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import React from 'react';
import { ALL_VALUE, HistoricalSummaryResponse, SLOWithSummaryResponse } from '@kbn/slo-schema';
import {
Chart,
DARK_THEME,
isMetricElementEvent,
Metric,
MetricTrendShape,
Expand Down Expand Up @@ -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}"`;
Expand All @@ -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({
Expand Down Expand Up @@ -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);
}
}}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ type SloIdAndInstanceId = [string, string];
interface Params {
sloIdsAndInstanceIds: SloIdAndInstanceId[];
shouldRefetch?: boolean;
rangeFrom?: string;
}

export interface UseFetchActiveAlerts {
Expand All @@ -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;

Expand All @@ -63,7 +65,7 @@ export function useFetchActiveAlerts({
{
range: {
'@timestamp': {
gte: 'now-5m/m',
gte: rangeFrom,
},
},
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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) => {
Expand All @@ -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}
Expand Down

0 comments on commit 56825f1

Please sign in to comment.