[SLOs] Removes custom implementation for badges via portal (#177623)

## Summary Since [Elastic/charts](elastic/elastic-charts#2336) now supports body content in metric chart, removing the custom implementation in favor !! ### Testing - [ ] Make sure badges works as expected in Card view <img width="1728" alt="image" src="https://github.com/elastic/kibana/assets/3505601/cda11ded-0297-4636-bc7d-26d9e76eb8d1"> --------- Co-authored-by: Cauê Marcondes <[email protected]>
elastic · Mar 4, 2024 · 23f445f · 23f445f
1 parent 2c16c83
commit 23f445f
Show file tree

Hide file tree

Showing 16 changed files with 282 additions and 262 deletions.
diff --git a/...bility_solution/observability/public/components/slo/slo_status_badge/slo_status_badge.tsx b/...bility_solution/observability/public/components/slo/slo_status_badge/slo_status_badge.tsx
@@ -18,45 +18,41 @@ export function SloStatusBadge({ slo }: SloStatusProps) {
   return (
     <>
       <EuiFlexItem grow={false}>
-        {/* Prevent badges from growing when inside an EuiFlexGroup by wrapping content with div */}
-        <div>
-          {slo.summary.status === 'NO_DATA' && (
-            <EuiToolTip
-              position="top"
-              content={i18n.translate('xpack.observability.slo.sloStatusBadge.noDataTooltip', {
-                defaultMessage:
-                  'It may take some time before the data is aggregated and available.',
-              })}
-            >
-              <EuiBadge color="default">
-                {i18n.translate('xpack.observability.slo.sloStatusBadge.noData', {
-                  defaultMessage: 'No data',
-                })}
-              </EuiBadge>
-            </EuiToolTip>
-          )}
-          {slo.summary.status === 'HEALTHY' && (
-            <EuiBadge color="success">
-              {i18n.translate('xpack.observability.slo.sloStatusBadge.healthy', {
-                defaultMessage: 'Healthy',
-              })}
-            </EuiBadge>
-          )}
-          {slo.summary.status === 'DEGRADING' && (
-            <EuiBadge color="warning">
-              {i18n.translate('xpack.observability.slo.sloStatusBadge.degrading', {
-                defaultMessage: 'Degrading',
-              })}
-            </EuiBadge>
-          )}
-          {slo.summary.status === 'VIOLATED' && (
-            <EuiBadge color="danger">
-              {i18n.translate('xpack.observability.slo.sloStatusBadge.violated', {
-                defaultMessage: 'Violated',
+        {slo.summary.status === 'NO_DATA' && (
+          <EuiToolTip
+            position="top"
+            content={i18n.translate('xpack.observability.slo.sloStatusBadge.noDataTooltip', {
+              defaultMessage: 'It may take some time before the data is aggregated and available.',
+            })}
+          >
+            <EuiBadge color="default">
+              {i18n.translate('xpack.observability.slo.sloStatusBadge.noData', {
+                defaultMessage: 'No data',
               })}
             </EuiBadge>
-          )}
-        </div>
+          </EuiToolTip>
+        )}
+        {slo.summary.status === 'HEALTHY' && (
+          <EuiBadge color="success">
+            {i18n.translate('xpack.observability.slo.sloStatusBadge.healthy', {
+              defaultMessage: 'Healthy',
+            })}
+          </EuiBadge>
+        )}
+        {slo.summary.status === 'DEGRADING' && (
+          <EuiBadge color="warning">
+            {i18n.translate('xpack.observability.slo.sloStatusBadge.degrading', {
+              defaultMessage: 'Degrading',
+            })}
+          </EuiBadge>
+        )}
+        {slo.summary.status === 'VIOLATED' && (
+          <EuiBadge color="danger">
+            {i18n.translate('xpack.observability.slo.sloStatusBadge.violated', {
+              defaultMessage: 'Violated',
+            })}
+          </EuiBadge>
+        )}
       </EuiFlexItem>
 
       {slo.summary.errorBudget.isEstimated && (

diff --git a/...bservability_solution/observability/public/embeddable/slo/common/slo_overview_details.tsx b/...bservability_solution/observability/public/embeddable/slo/common/slo_overview_details.tsx
@@ -15,9 +15,13 @@ import {
   EuiFlyoutFooter,
   EuiFlyoutHeader,
   EuiTitle,
+  EuiTabs,
+  EuiTab,
+  EuiSpacer,
 } from '@elastic/eui';
 import React, { useState } from 'react';
 import { SLOWithSummaryResponse } from '@kbn/slo-schema';
+import { useSloDetailsTabs } from '../../../pages/slo_details/hooks/use_slo_details_tabs';
 import { HeaderTitle } from '../../../pages/slo_details/components/header_title';
 import { getSloFormattedSummary } from '../../../pages/slos/hooks/use_slo_summary';
 import { useKibana } from '../../../utils/kibana_react';
@@ -47,9 +51,12 @@ export function SloOverviewDetails({
 
   const [selectedTabId, setSelectedTabId] = useState<SloTabId>(OVERVIEW_TAB_ID);
 
-  const handleSelectedTab = (newTabId: SloTabId) => {
-    setSelectedTabId(newTabId);
-  };
+  const { tabs } = useSloDetailsTabs({
+    slo,
+    isAutoRefreshing: false,
+    selectedTabId,
+    setSelectedTabId,
+  });
 
   if (!slo) {
     return null;
@@ -70,12 +77,20 @@ export function SloOverviewDetails({
       </EuiFlyoutHeader>
       <EuiFlyoutBody>
         <HeaderTitle slo={slo} isLoading={false} showTitle={false} />
-        <SloDetails
-          slo={slo}
-          isAutoRefreshing={false}
-          selectedTabId={selectedTabId}
-          handleSelectedTab={handleSelectedTab}
-        />
+        <EuiTabs>
+          {tabs.map((tab, index) => (
+            <EuiTab
+              key={index}
+              onClick={tab.onClick}
+              isSelected={tab.id === selectedTabId}
+              append={tab.append}
+            >
+              {tab.label}
+            </EuiTab>
+          ))}
+        </EuiTabs>
+        <EuiSpacer size="m" />
+        <SloDetails slo={slo} isAutoRefreshing={false} selectedTabId={selectedTabId} />
       </EuiFlyoutBody>
       <EuiFlyoutFooter>
         <EuiFlexGroup justifyContent="spaceBetween">

diff --git a/...gins/observability_solution/observability/public/embeddable/slo/overview/slo_overview.tsx b/...gins/observability_solution/observability/public/embeddable/slo/overview/slo_overview.tsx
@@ -5,13 +5,12 @@
  * 2.0.
  */
 
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiLoadingChart } from '@elastic/eui';
 import { euiStyled } from '@kbn/kibana-react-plugin/common';
 import { ALL_VALUE, SLOWithSummaryResponse } from '@kbn/slo-schema';
 import { SloOverviewDetails } from '../common/slo_overview_details';
-import { SloCardBadgesPortal } from '../../../pages/slos/components/card_view/badges_portal';
 import { formatHistoricalData } from '../../../utils/slo/chart_data_formatter';
 import { useFetchHistoricalSummary } from '../../../hooks/slo/use_fetch_historical_summary';
 import { useFetchActiveAlerts } from '../../../hooks/slo/use_fetch_active_alerts';
@@ -28,8 +27,6 @@ export function SloOverview({
   onRenderComplete,
   reloadSubject,
 }: EmbeddableSloProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-
   const [lastRefreshTime, setLastRefreshTime] = useState<number | undefined>(undefined);
 
   useEffect(() => {
@@ -114,22 +111,22 @@ export function SloOverview({
   const historicalSliData = formatHistoricalData(historicalSummary, 'sli_value');
 
   return (
-    <div ref={containerRef} style={{ width: '100%' }}>
+    <div style={{ width: '100%' }}>
       <SloCardChart
         slo={slo}
         historicalSliData={historicalSliData ?? []}
         onClick={() => {
           setSelectedSlo(slo);
         }}
+        badges={
+          <SloCardItemBadges
+            slo={slo}
+            rules={rules}
+            activeAlerts={activeAlerts}
+            hasGroupBy={hasGroupBy}
+          />
+        }
       />
-      <SloCardBadgesPortal containerRef={containerRef}>
-        <SloCardItemBadges
-          slo={slo}
-          rules={rules}
-          activeAlerts={activeAlerts}
-          hasGroupBy={hasGroupBy}
-        />
-      </SloCardBadgesPortal>
       <SloOverviewDetails slo={selectedSlo} setSelectedSlo={setSelectedSlo} />
     </div>
   );

diff --git a/...observability_solution/observability/public/embeddable/slo/overview/slo_overview_grid.tsx b/...observability_solution/observability/public/embeddable/slo/overview/slo_overview_grid.tsx
@@ -14,17 +14,16 @@ import {
   Metric,
   MetricTrendShape,
   Settings,
+  MetricDatum,
 } from '@elastic/charts';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLoadingSpinner } from '@elastic/eui';
-import { MetricDatum } from '@elastic/charts/dist/chart_types/metric/specs';
 import { SloOverviewDetails } from '../common/slo_overview_details';
 import { useFetchSloList } from '../../../hooks/slo/use_fetch_slo_list';
 import { formatHistoricalData } from '../../../utils/slo/chart_data_formatter';
 import { useFetchRulesForSlo } from '../../../hooks/slo/use_fetch_rules_for_slo';
 import { useFetchActiveAlerts } from '../../../hooks/slo/use_fetch_active_alerts';
-import { SloCardBadgesPortal } from '../../../pages/slos/components/card_view/badges_portal';
 import { SloCardItemBadges } from '../../../pages/slos/components/card_view/slo_card_item_badges';
 import { getSloFormattedSummary } from '../../../pages/slos/hooks/use_slo_summary';
 import { useKibana } from '../../../utils/kibana_react';
@@ -48,7 +47,7 @@ const getSloChartData = ({
   sliValue: string;
   sloTarget: string;
   historicalSummary?: HistoricalSummaryResponse[];
-}) => {
+}): MetricDatum => {
   const historicalSliData = formatHistoricalData(historicalSummary, 'sli_value');
 
   return {
@@ -105,8 +104,6 @@ export function SloCardChartList({ sloId }: { sloId: string }) {
     ],
   });
 
-  const containerRef = React.useRef<HTMLDivElement>(null);
-
   const { colors } = useSloCardColor();
   const chartsData: MetricDatum[][] = [[]];
   sloList?.results.forEach((slo) => {
@@ -125,6 +122,10 @@ export function SloCardChartList({ sloId }: { sloId: string }) {
       chartsData.push([]);
     }
 
+    const rules = rulesBySlo?.[slo?.id];
+    const activeAlerts = activeAlertsBySlo.get(slo);
+    const hasGroupBy = Boolean(slo.groupBy && slo.groupBy !== ALL_VALUE);
+
     const data = getSloChartData({
       slo,
       subTitle,
@@ -133,6 +134,15 @@ export function SloCardChartList({ sloId }: { sloId: string }) {
       sloTarget,
       historicalSummary,
     });
+    data.body = (
+      <SloCardItemBadges
+        slo={slo}
+        rules={rules}
+        activeAlerts={activeAlerts}
+        handleCreateRule={() => {}}
+        hasGroupBy={hasGroupBy}
+      />
+    );
     chartsData[chartsData.length - 1].push(data);
   });
 
@@ -148,7 +158,7 @@ export function SloCardChartList({ sloId }: { sloId: string }) {
 
   return (
     <>
-      <div ref={containerRef} style={{ width: '100%' }}>
+      <div style={{ width: '100%' }}>
         <Chart>
           <Settings
             baseTheme={DARK_THEME}
@@ -163,25 +173,6 @@ export function SloCardChartList({ sloId }: { sloId: string }) {
           />
           <Metric id={`slo-id-instances`} data={chartsData} />
         </Chart>
-        {sloList?.results.map((slo, index) => {
-          const rules = rulesBySlo?.[slo?.id];
-          const activeAlerts = activeAlertsBySlo.get(slo);
-          const hasGroupBy = Boolean(slo.groupBy && slo.groupBy !== ALL_VALUE);
-
-          return (
-            <div key={slo.id + slo.instanceId}>
-              <SloCardBadgesPortal containerRef={containerRef} index={index}>
-                <SloCardItemBadges
-                  slo={slo}
-                  rules={rules}
-                  activeAlerts={activeAlerts}
-                  handleCreateRule={() => {}}
-                  hasGroupBy={hasGroupBy}
-                />
-              </SloCardBadgesPortal>
-            </div>
-          );
-        })}
       </div>
       <SloOverviewDetails slo={selectedSlo} setSelectedSlo={setSelectedSlo} />
     </>

diff --git a/...observability_solution/observability/public/pages/slo_details/components/header_title.tsx b/...observability_solution/observability/public/pages/slo_details/components/header_title.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner, EuiSpacer, EuiText } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiSkeletonText, EuiText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { SLOWithSummaryResponse } from '@kbn/slo-schema';
 import moment from 'moment';
@@ -19,39 +19,29 @@ export interface Props {
   showTitle?: boolean;
 }
 
-export function HeaderTitle(props: Props) {
-  const { isLoading, slo, showTitle = true } = props;
-
-  if (isLoading) {
-    return <EuiLoadingSpinner data-test-subj="loadingTitle" />;
-  }
-
-  if (!slo) {
-    return null;
+export function HeaderTitle({ isLoading, slo, showTitle = true }: Props) {
+  if (isLoading || !slo) {
+    return <EuiSkeletonText lines={1} data-test-subj="loadingTitle" />;
   }
 
   return (
-    <>
-      <EuiFlexGroup direction="column" gutterSize="xs">
-        {showTitle && (
-          <>
-            <EuiFlexItem grow={false}>{slo.name}</EuiFlexItem>
-            <SLOGroupings slo={slo} />
-          </>
-        )}
+    <EuiFlexGroup direction="column" gutterSize="xs">
+      {showTitle && (
+        <>
+          <EuiFlexItem grow={false}>{slo.name}</EuiFlexItem>
+          <SLOGroupings slo={slo} />
+        </>
+      )}
 
-        <EuiFlexGroup
-          direction="row"
-          gutterSize="s"
-          alignItems="center"
-          justifyContent="flexStart"
-          responsive={false}
-        >
-          <SloStatusBadge slo={slo} />
-        </EuiFlexGroup>
-      </EuiFlexGroup>
-      <EuiSpacer size="xs" />
-      <EuiFlexGroup gutterSize="m">
+      <EuiFlexGroup
+        direction="row"
+        gutterSize="s"
+        alignItems="center"
+        justifyContent="flexStart"
+        responsive={false}
+        wrap={true}
+      >
+        <SloStatusBadge slo={slo} />
         <EuiFlexItem grow={false}>
           <EuiText color="subdued" size="xs">
             <strong>
@@ -75,6 +65,6 @@ export function HeaderTitle(props: Props) {
           </EuiText>
         </EuiFlexItem>
       </EuiFlexGroup>
-    </>
+    </EuiFlexGroup>
   );
 }
diff --git a/...bility_solution/observability/public/pages/slo_details/components/slo_details.stories.tsx b/...bility_solution/observability/public/pages/slo_details/components/slo_details.stories.tsx
@@ -24,7 +24,6 @@ const defaultProps: Props = {
   slo: buildSlo(),
   isAutoRefreshing: false,
   selectedTabId: 'overview',
-  handleSelectedTab: () => {},
 };
 
 export const SloDetails = Template.bind({});