[APM] Removing the icon for tech preview and fixing some of the alert…

… badges (elastic#150528) After a discussion with @maciejforcone and @grabowskit it was recommended to remove the tech preview badge for the Alerts tab. We also made small change in the alert badge in different areas in APM to make easier to understand and align them with the actionable o11y team. Before / After ![image](https://user-images.githubusercontent.com/13353203/217280187-939fbc76-d036-4fea-b1e8-50983738f73b.png) ![image](https://user-images.githubusercontent.com/13353203/217280566-ae5a2d00-c939-496d-9642-ba20735fc91b.png) --------- Co-authored-by: kibanamachine <[email protected]>
jloleysens · Feb 8, 2023 · ebc6750 · ebc6750
1 parent 752f87b
commit ebc6750
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 37 deletions.
diff --git a/...ugins/apm/public/components/app/service_groups/service_groups_list/service_group_card.tsx b/...ugins/apm/public/components/app/service_groups/service_groups_list/service_group_card.tsx
@@ -4,6 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+import { EuiToolTip } from '@elastic/eui';
 import {
   EuiAvatar,
   EuiBadge,
@@ -62,10 +63,10 @@ export function ServiceGroupsCard({
               )}
           </EuiText>
         </EuiFlexItem>
-        <EuiFlexGroup>
+        <EuiFlexGroup alignItems="center">
           <ServiceStat loading={isLoading}>
             <EuiFlexItem>
-              <EuiText size="s" textAlign="left">
+              <EuiText size="xs" textAlign="left">
                 {serviceGroupCounts !== undefined &&
                   i18n.translate(
                     'xpack.apm.serviceGroups.cardsList.serviceCount',
@@ -80,25 +81,35 @@ export function ServiceGroupsCard({
           </ServiceStat>
           <ServiceStat loading={isLoading} grow={isLoading}>
             {serviceGroupCounts && serviceGroupCounts.alerts > 0 && (
-              <EuiBadge
-                iconType="alert"
-                color="danger"
-                href={activeAlertsHref}
-                {...({
-                  onClick(e: React.SyntheticEvent) {
-                    e.stopPropagation(); // prevents extra click thru to EuiCard's href destination
-                  },
-                } as object)} // workaround for type check that prevents href + onclick
-              >
-                {i18n.translate(
-                  'xpack.apm.serviceGroups.cardsList.alertCount',
+              <EuiToolTip
+                position="bottom"
+                content={i18n.translate(
+                  'xpack.apm.home.serviceGroups.tooltip.activeAlertsExplanation',
                   {
-                    defaultMessage:
-                      '{alertsCount} {alertsCount, plural, one {alert} other {alerts}}',
-                    values: { alertsCount: serviceGroupCounts.alerts },
+                    defaultMessage: 'Active alerts',
                   }
                 )}
-              </EuiBadge>
+              >
+                <EuiBadge
+                  iconType="alert"
+                  color="danger"
+                  href={activeAlertsHref}
+                  {...({
+                    onClick(e: React.SyntheticEvent) {
+                      e.stopPropagation(); // prevents extra click thru to EuiCard's href destination
+                    },
+                  } as object)} // workaround for type check that prevents href + onclick
+                >
+                  {i18n.translate(
+                    'xpack.apm.serviceGroups.cardsList.alertCount',
+                    {
+                      defaultMessage:
+                        '{alertsCount} {alertsCount, plural, one {alert} other {alerts}}',
+                      values: { alertsCount: serviceGroupCounts.alerts },
+                    }
+                  )}
+                </EuiBadge>
+              </EuiToolTip>
             )}
           </ServiceStat>
         </EuiFlexGroup>

diff --git a/x-pack/plugins/apm/public/components/app/service_inventory/service_list/index.tsx b/x-pack/plugins/apm/public/components/app/service_inventory/service_list/index.tsx
@@ -82,25 +82,37 @@ export function getServiceColumns({
       ? [
           {
             field: ServiceInventoryFieldName.AlertsCount,
-            name: '',
-            width: `${unit * 5}px`,
+            name: i18n.translate('xpack.apm.servicesTable.alertsColumnLabel', {
+              defaultMessage: 'Active alerts',
+            }),
+            width: `${unit * 8}px`,
             sortable: true,
             render: (_, { serviceName, alertsCount }) => {
               if (!alertsCount) {
                 return null;
               }
 
               return (
-                <EuiBadge
-                  iconType="alert"
-                  color="danger"
-                  href={link('/services/{serviceName}/alerts', {
-                    path: { serviceName },
-                    query,
-                  })}
+                <EuiToolTip
+                  position="bottom"
+                  content={i18n.translate(
+                    'xpack.apm.home.servicesTable.tooltip.activeAlertsExplanation',
+                    {
+                      defaultMessage: 'Active alerts',
+                    }
+                  )}
                 >
-                  {alertsCount}
-                </EuiBadge>
+                  <EuiBadge
+                    iconType="alert"
+                    color="danger"
+                    href={link('/services/{serviceName}/alerts', {
+                      path: { serviceName },
+                      query,
+                    })}
+                  >
+                    {alertsCount}
+                  </EuiBadge>
+                </EuiToolTip>
               );
             },
           } as ITableColumn<ServiceListItem>,
@@ -150,7 +162,7 @@ export function getServiceColumns({
                 defaultMessage: 'Environment',
               }
             ),
-            width: `${unit * 10}px`,
+            width: `${unit * 9}px`,
             sortable: true,
             render: (_, { environments }) => (
               <EnvironmentBadge environments={environments ?? []} />
@@ -166,7 +178,7 @@ export function getServiceColumns({
               'xpack.apm.servicesTable.transactionColumnLabel',
               { defaultMessage: 'Transaction type' }
             ),
-            width: `${unit * 10}px`,
+            width: `${unit * 8}px`,
             sortable: true,
           },
         ]

diff --git a/x-pack/plugins/apm/public/components/routing/templates/apm_service_template/index.tsx b/x-pack/plugins/apm/public/components/routing/templates/apm_service_template/index.tsx
@@ -12,9 +12,10 @@ import {
   EuiPageHeaderProps,
   EuiSpacer,
   EuiTitle,
+  EuiToolTip,
+  EuiBadge,
 } from '@elastic/eui';
 import { useLocation } from 'react-router-dom';
-import { EuiBadge } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { enableAwsLambdaMetrics } from '@kbn/observability-plugin/common';
 import { omit } from 'lodash';
@@ -357,13 +358,20 @@ function useTabs({ selectedTab }: { selectedTab: Tab['key'] }) {
         path: { serviceName },
         query,
       }),
-      prepend:
+      append:
         serviceAlertsCount.alertsCount > 0 ? (
-          <EuiBadge iconType="alert" color="danger">
-            {serviceAlertsCount.alertsCount}
-          </EuiBadge>
+          <EuiToolTip
+            position="bottom"
+            content={i18n.translate(
+              'xpack.apm.home.serviceAlertsTable.tooltip.activeAlertsExplanation',
+              {
+                defaultMessage: 'Active alerts',
+              }
+            )}
+          >
+            <EuiBadge color="danger">{serviceAlertsCount.alertsCount}</EuiBadge>
+          </EuiToolTip>
         ) : null,
-      append: <TechnicalPreviewBadge icon="beaker" />,
       label: i18n.translate('xpack.apm.home.alertsTabLabel', {
         defaultMessage: 'Alerts',
       }),