[SLO] Implement card view (#171422)

Co-authored-by: Kevin Delemme <[email protected]> Co-authored-by: kibanamachine <[email protected]>
elastic · Nov 23, 2023 · 21fc4cc · 21fc4cc
1 parent a30b18d
commit 21fc4cc
Show file tree

Hide file tree

Showing 26 changed files with 1,094 additions and 299 deletions.
diff --git a/.../plugins/observability/public/components/slo/slo_status_badge/slo_active_alerts_badge.tsx b/.../plugins/observability/public/components/slo/slo_status_badge/slo_active_alerts_badge.tsx
@@ -14,11 +14,12 @@ import { paths } from '../../../../common/locators/paths';
 import { useKibana } from '../../../utils/kibana_react';
 
 export interface Props {
+  viewMode?: 'compact' | 'default';
   activeAlerts?: number;
   slo: SLOWithSummaryResponse;
 }
 
-export function SloActiveAlertsBadge({ slo, activeAlerts }: Props) {
+export function SloActiveAlertsBadge({ slo, activeAlerts, viewMode = 'default' }: Props) {
   const {
     application: { navigateToUrl },
     http: { basePath },
@@ -50,10 +51,12 @@ export function SloActiveAlertsBadge({ slo, activeAlerts }: Props) {
         )}
         data-test-subj="o11ySloActiveAlertsBadge"
       >
-        {i18n.translate('xpack.observability.slo.slo.activeAlertsBadge.label', {
-          defaultMessage: '{count, plural, one {# alert} other {# alerts}}',
-          values: { count: activeAlerts },
-        })}
+        {viewMode !== 'default'
+          ? activeAlerts
+          : i18n.translate('xpack.observability.slo.slo.activeAlertsBadge.label', {
+              defaultMessage: '{count, plural, one {# alert} other {# alerts}}',
+              values: { count: activeAlerts },
+            })}
       </EuiBadge>
     </EuiFlexItem>
   );

diff --git a/x-pack/plugins/observability/public/components/slo/slo_status_badge/slo_group_by_badge.tsx b/x-pack/plugins/observability/public/components/slo/slo_status_badge/slo_group_by_badge.tsx
@@ -5,24 +5,25 @@
  * 2.0.
  */
 
-import { EuiBadge, EuiFlexItem, EuiToolTip } from '@elastic/eui';
+import { EuiBadge, EuiBadgeProps, EuiFlexItem, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { ALL_VALUE, SLOWithSummaryResponse } from '@kbn/slo-schema';
-import { euiLightVars } from '@kbn/ui-theme';
 import React from 'react';
+import { euiLightVars } from '@kbn/ui-theme';
 
 export interface Props {
+  color?: EuiBadgeProps['color'];
   slo: SLOWithSummaryResponse;
 }
 
-export function SloGroupByBadge({ slo }: Props) {
+export function SloGroupByBadge({ slo, color }: Props) {
   if (!slo.groupBy || slo.groupBy === ALL_VALUE) {
     return null;
   }
 
   return (
     <EuiFlexItem grow={false}>
-      <EuiBadge color={euiLightVars.euiColorDisabled}>
+      <EuiBadge color={color ?? euiLightVars.euiColorDisabled}>
         <EuiToolTip
           position="top"
           content={i18n.translate('xpack.observability.slo.partitionByBadge', {

diff --git a/x-pack/plugins/observability/public/locators/slo_list.test.ts b/x-pack/plugins/observability/public/locators/slo_list.test.ts
@@ -14,7 +14,7 @@ describe('SloListLocator', () => {
     const location = await locator.getLocation({});
     expect(location.app).toEqual('observability');
     expect(location.path).toEqual(
-      "/slos?search=(kqlQuery:'',page:0,sort:(by:status,direction:desc))"
+      "/slos?search=(kqlQuery:'',page:0,sort:(by:status,direction:desc),viewMode:compact)"
     );
   });
 
@@ -24,7 +24,7 @@ describe('SloListLocator', () => {
     });
     expect(location.app).toEqual('observability');
     expect(location.path).toEqual(
-      "/slos?search=(kqlQuery:'slo.name:%20%22Service%20Availability%22%20and%20slo.indicator.type%20:%20%22sli.kql.custom%22',page:0,sort:(by:status,direction:desc))"
+      "/slos?search=(kqlQuery:'slo.name:%20%22Service%20Availability%22%20and%20slo.indicator.type%20:%20%22sli.kql.custom%22',page:0,sort:(by:status,direction:desc),viewMode:compact)"
     );
   });
 });
diff --git a/x-pack/plugins/observability/public/pages/slos/components/badges/slo_badges.stories.tsx b/x-pack/plugins/observability/public/pages/slos/components/badges/slo_badges.stories.tsx
@@ -11,15 +11,15 @@ import { ComponentStory } from '@storybook/react';
 import { EuiFlexGroup } from '@elastic/eui';
 import { buildForecastedSlo } from '../../../../data/slo/slo';
 import { KibanaReactStorybookDecorator } from '../../../../utils/kibana_react.storybook_decorator';
-import { SloBadges as Component, Props } from './slo_badges';
+import { SloBadges as Component, SloBadgesProps } from './slo_badges';
 
 export default {
   component: Component,
   title: 'app/SLO/Badges/SloBadges',
   decorators: [KibanaReactStorybookDecorator],
 };
 
-const Template: ComponentStory<typeof Component> = (props: Props) => (
+const Template: ComponentStory<typeof Component> = (props: SloBadgesProps) => (
   <EuiFlexGroup>
     <Component {...props} />
   </EuiFlexGroup>

diff --git a/x-pack/plugins/observability/public/pages/slos/components/badges/slo_badges.tsx b/x-pack/plugins/observability/public/pages/slos/components/badges/slo_badges.tsx
@@ -17,42 +17,27 @@ import { SloTimeWindowBadge } from './slo_time_window_badge';
 import { SloRulesBadge } from './slo_rules_badge';
 import type { SloRule } from '../../../../hooks/slo/use_fetch_rules_for_slo';
 import { SloGroupByBadge } from '../../../../components/slo/slo_status_badge/slo_group_by_badge';
+export type ViewMode = 'default' | 'compact';
 
-export interface Props {
+export interface SloBadgesProps {
   activeAlerts?: number;
   isLoading: boolean;
   rules: Array<Rule<SloRule>> | undefined;
   slo: SLOWithSummaryResponse;
   onClickRuleBadge: () => void;
 }
 
-export function SloBadges({ activeAlerts, isLoading, rules, slo, onClickRuleBadge }: Props) {
+export function SloBadges({
+  activeAlerts,
+  isLoading,
+  rules,
+  slo,
+  onClickRuleBadge,
+}: SloBadgesProps) {
   return (
     <EuiFlexGroup direction="row" responsive={false} gutterSize="s" alignItems="center" wrap>
       {isLoading ? (
-        <>
-          <EuiSkeletonRectangle
-            isLoading
-            contentAriaLabel="Loading"
-            width="54.16px"
-            height="20px"
-            borderRadius="s"
-          />
-          <EuiSkeletonRectangle
-            isLoading
-            contentAriaLabel="Loading"
-            width="54.16px"
-            height="20px"
-            borderRadius="s"
-          />
-          <EuiSkeletonRectangle
-            isLoading
-            contentAriaLabel="Loading"
-            width="54.16px"
-            height="20px"
-            borderRadius="s"
-          />
-        </>
+        <LoadingBadges />
       ) : (
         <>
           <SloStatusBadge slo={slo} />
@@ -66,3 +51,31 @@ export function SloBadges({ activeAlerts, isLoading, rules, slo, onClickRuleBadg
     </EuiFlexGroup>
   );
 }
+
+export function LoadingBadges() {
+  return (
+    <>
+      <EuiSkeletonRectangle
+        isLoading
+        contentAriaLabel="Loading"
+        width="54.16px"
+        height="20px"
+        borderRadius="s"
+      />
+      <EuiSkeletonRectangle
+        isLoading
+        contentAriaLabel="Loading"
+        width="54.16px"
+        height="20px"
+        borderRadius="s"
+      />
+      <EuiSkeletonRectangle
+        isLoading
+        contentAriaLabel="Loading"
+        width="54.16px"
+        height="20px"
+        borderRadius="s"
+      />
+    </>
+  );
+}
diff --git a/...ck/plugins/observability/public/pages/slos/components/badges/slo_indicator_type_badge.tsx b/...ck/plugins/observability/public/pages/slos/components/badges/slo_indicator_type_badge.tsx
@@ -6,21 +6,22 @@
  */
 
 import React from 'react';
-import { EuiBadge, EuiFlexItem, EuiToolTip } from '@elastic/eui';
+import { EuiBadge, EuiFlexItem, EuiToolTip, EuiBadgeProps } from '@elastic/eui';
 import { SLOWithSummaryResponse } from '@kbn/slo-schema';
-import { euiLightVars } from '@kbn/ui-theme';
 import { i18n } from '@kbn/i18n';
 
+import { euiLightVars } from '@kbn/ui-theme';
 import { useKibana } from '../../../../utils/kibana_react';
 import { convertSliApmParamsToApmAppDeeplinkUrl } from '../../../../utils/slo/convert_sli_apm_params_to_apm_app_deeplink_url';
 import { isApmIndicatorType } from '../../../../utils/slo/indicator';
 import { toIndicatorTypeLabel } from '../../../../utils/slo/labels';
 
 export interface Props {
+  color?: EuiBadgeProps['color'];
   slo: SLOWithSummaryResponse;
 }
 
-export function SloIndicatorTypeBadge({ slo }: Props) {
+export function SloIndicatorTypeBadge({ slo, color }: Props) {
   const {
     application: { navigateToUrl },
     http: { basePath },
@@ -54,7 +55,7 @@ export function SloIndicatorTypeBadge({ slo }: Props) {
   return (
     <>
       <EuiFlexItem grow={false}>
-        <EuiBadge color={euiLightVars.euiColorDisabled}>
+        <EuiBadge color={color ?? euiLightVars.euiColorDisabled}>
           {toIndicatorTypeLabel(slo.indicator.type)}
         </EuiBadge>
       </EuiFlexItem>
@@ -68,7 +69,7 @@ export function SloIndicatorTypeBadge({ slo }: Props) {
             })}
           >
             <EuiBadge
-              color={euiLightVars.euiColorDisabled}
+              color={color ?? euiLightVars.euiColorDisabled}
               onClick={handleNavigateToApm}
               onClickAriaLabel={i18n.translate(
                 'xpack.observability.slo.indicatorTypeBadge.exploreInApm',

diff --git a/x-pack/plugins/observability/public/pages/slos/components/badges/slo_rules_badge.tsx b/x-pack/plugins/observability/public/pages/slos/components/badges/slo_rules_badge.tsx
@@ -28,7 +28,7 @@ export function SloRulesBadge({ rules, onClick }: Props) {
       display="block"
     >
       <span onClick={onClick} onKeyDown={onClick}>
-        <EuiBadge isDisabled color="default" iconType="alert" css={{ cursor: 'pointer' }} />
+        <EuiBadge color="text" iconType="alert" css={{ cursor: 'pointer' }} />
       </span>
     </EuiToolTip>
   );

diff --git a/x-pack/plugins/observability/public/pages/slos/components/badges/slo_time_window_badge.tsx b/x-pack/plugins/observability/public/pages/slos/components/badges/slo_time_window_badge.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiBadge, EuiFlexItem } from '@elastic/eui';
+import { EuiBadge, EuiBadgeProps, EuiFlexItem } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { rollingTimeWindowTypeSchema, SLOWithSummaryResponse } from '@kbn/slo-schema';
 import { euiLightVars } from '@kbn/ui-theme';
@@ -15,16 +15,17 @@ import { toCalendarAlignedMomentUnitOfTime } from '../../../../utils/slo/duratio
 import { toDurationLabel } from '../../../../utils/slo/labels';
 
 export interface Props {
+  color?: EuiBadgeProps['color'];
   slo: SLOWithSummaryResponse;
 }
 
-export function SloTimeWindowBadge({ slo }: Props) {
+export function SloTimeWindowBadge({ slo, color }: Props) {
   const unit = slo.timeWindow.duration.slice(-1);
   if (rollingTimeWindowTypeSchema.is(slo.timeWindow.type)) {
     return (
       <EuiFlexItem grow={false}>
         <EuiBadge
-          color={euiLightVars.euiColorDisabled}
+          color={color ?? euiLightVars.euiColorDisabled}
           iconType="editorItemAlignRight"
           iconSide="left"
         >
@@ -45,7 +46,7 @@ export function SloTimeWindowBadge({ slo }: Props) {
 
   return (
     <EuiFlexItem grow={false}>
-      <EuiBadge color={euiLightVars.euiColorDisabled} iconType="calendar" iconSide="left">
+      <EuiBadge color={color ?? euiLightVars.euiColorDisabled} iconType="calendar" iconSide="left">
         {i18n.translate('xpack.observability.slo.slo.timeWindow.calendar', {
           defaultMessage: '{elapsed}/{total} days',
           values: {

diff --git a/x-pack/plugins/observability/public/pages/slos/components/card_view/cards_per_row.tsx b/x-pack/plugins/observability/public/pages/slos/components/card_view/cards_per_row.tsx
@@ -0,0 +1,49 @@
+/*
+ * 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 React, { useEffect } from 'react';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { EuiFormRow, EuiSelect } from '@elastic/eui';
+import useLocalStorage from 'react-use/lib/useLocalStorage';
+
+export const SLO_CARD_VIEW_PER_ROW_SIZE = 'slo-card-view-per-row-size';
+
+export function CardsPerRow({
+  setCardsPerRow,
+}: {
+  setCardsPerRow: (cardsPerRow?: string) => void;
+}) {
+  const [value, setValue] = useLocalStorage(SLO_CARD_VIEW_PER_ROW_SIZE, '3');
+
+  useEffect(() => {
+    setCardsPerRow(value);
+  }, [setCardsPerRow, value]);
+
+  const options = [
+    { value: '3', text: '3' },
+    { value: '4', text: '4' },
+  ];
+
+  return (
+    <EuiFormRow
+      label={
+        <FormattedMessage
+          id="xpack.observability.gridSize.euiFormRow.itemsPerRowLabel"
+          defaultMessage="Cards per row"
+        />
+      }
+    >
+      <EuiSelect
+        data-test-subj="o11yGridSizeSelect"
+        id={'grid-size-select'}
+        options={options}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    </EuiFormRow>
+  );
+}