diff --git a/x-pack/plugins/observability_solution/slo/public/embeddable/slo/overview/slo_overview_grid.tsx b/x-pack/plugins/observability_solution/slo/public/embeddable/slo/overview/slo_overview_grid.tsx index 08cdd5539e9ac..f452f77cb1da3 100644 --- a/x-pack/plugins/observability_solution/slo/public/embeddable/slo/overview/slo_overview_grid.tsx +++ b/x-pack/plugins/observability_solution/slo/public/embeddable/slo/overview/slo_overview_grid.tsx @@ -72,6 +72,9 @@ const getSloChartData = ({ }; }; +const ROW_HEIGHT = 220; +const ITEMS_PER_ROW = 4; + export function SloCardChartList({ sloId }: { sloId: string }) { const { http: { basePath }, @@ -91,6 +94,7 @@ export function SloCardChartList({ sloId }: { sloId: string }) { const { data: activeAlertsBySlo } = useFetchActiveAlerts({ sloIdsAndInstanceIds: [[sloId, ALL_VALUE]], + rangeFrom: 'now-24h', }); const { data: rulesBySlo } = useFetchRulesForSlo({ @@ -153,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 ( <> -
- +
+ { 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 index 1f353e6a38558..6ad34d8c4dc86 100644 --- 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/x-pack/plugins/observability_solution/slo/public/pages/slos/components/card_view/slo_card_item_badges.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/card_view/slo_card_item_badges.tsx index ee441468fab2c..5166baaf7d311 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/card_view/slo_card_item_badges.tsx +++ b/x-pack/plugins/observability_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 ( { @@ -57,13 +63,14 @@ export function SloCardItemBadges({ slo, activeAlerts, rules, handleCreateRule } ) : ( <> +