[Infra] Remove beta badge from hosts (elastic#191664)

Closes elastic#191163 

## Summary

This PR removes the `beta` label from hosts view

- in Inventory
 
<img width="1642" alt="Screenshot 2024-08-28 at 18 49 10"
src="https://github.com/user-attachments/assets/fabe96dd-aa40-4e04-96a1-421a8e464561">

- in the menu and page title
  
<img width="1869" alt="Screenshot 2024-08-28 at 18 49 28"
src="https://github.com/user-attachments/assets/b55c324e-d165-4c67-a380-e95dfa89648a">

- in the settings
<img width="1858" alt="Screenshot 2024-08-28 at 18 56 48"
src="https://github.com/user-attachments/assets/a1b2918a-1d29-416a-a424-ec55eec381fb">
<img width="1870" alt="Screenshot 2024-08-28 at 18 57 19"
src="https://github.com/user-attachments/assets/848b94b1-6d17-424d-a670-d7d30fc51d8c">

## Small bugfix

I saw that a class added to the service control label was causing a
wrong negative left margin and it bugged me so I fixed it here 😅:

| Before 😞  | After 👍  |
| ------ | ------ |
| <img width="1607" alt="image"
src="https://github.com/user-attachments/assets/2f1c0346-d868-4e85-a78d-73a553f68bfd">
| <img width="1866" alt="Screenshot 2024-08-28 at 18 48 37"
src="https://github.com/user-attachments/assets/d90d7b7b-d482-40e4-be55-c2b5e1b87960">
|

x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/components/search_bar/controls_title.tsx

@@ -46,8 +46,8 @@ const TitleWithPopoverMessage = ({
   embeddableId: string;
 }) => {
   return (
-    <EuiFormLabel className="controlFrame__formControlLayoutLabel" htmlFor={embeddableId}>
-      <EuiFlexGroup alignItems="center" gutterSize="xs">
+    <EuiFormLabel htmlFor={embeddableId}>
+      <EuiFlexGroup responsive={false} alignItems="center" gutterSize="xs">
         <EuiFlexItem grow={false}>{title}</EuiFlexItem>
         <EuiFlexItem grow={false}>
           <Popover>{helpMessage}</Popover>
@@ -62,8 +62,6 @@ export const ControlTitle = ({ title, embeddableId }: { title?: string; embeddab
   return helpMessage ? (
     <TitleWithPopoverMessage title={title} helpMessage={helpMessage} embeddableId={embeddableId} />
   ) : (
-    <EuiFormLabel className="controlFrame__formControlLayoutLabel" htmlFor={embeddableId}>
-      {title}
-    </EuiFormLabel>
+    <EuiFormLabel htmlFor={embeddableId}>{title}</EuiFormLabel>
   );
 };

x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/index.tsx

@@ -10,7 +10,6 @@ import React from 'react';
 import { useTrackPageview, FeatureFeedbackButton } from '@kbn/observability-shared-plugin/public';
 import { APP_WRAPPER_CLASS } from '@kbn/core/public';
 import { css } from '@emotion/react';
-import { i18n } from '@kbn/i18n';
 import { OnboardingFlow } from '../../../components/shared/templates/no_data_config';
 import { InfraPageTemplate } from '../../../components/shared/templates/infra_page_template';
 import { SYSTEM_INTEGRATION } from '../../../../common/constants';
@@ -19,7 +18,6 @@ import { useMetricsBreadcrumbs } from '../../../hooks/use_metrics_breadcrumbs';
 import { hostsTitle } from '../../../translations';
 import { fullHeightContentStyles } from '../../../page_template.styles';
 import { HostContainer } from './components/hosts_container';
-import { BetaBadge } from '../../../components/beta_badge';
 
 const HOSTS_FEEDBACK_LINK =
   'https://docs.google.com/forms/d/e/1FAIpQLScRHG8TIVb1Oq8ZhD4aks3P1TmgiM58TY123QpDCcBz83YC6w/viewform';
@@ -55,12 +53,6 @@ export const HostsPage = () => {
                 `}
               >
                 <h1>{hostsTitle}</h1>
-                <BetaBadge
-                  tooltipContent={i18n.translate('xpack.infra.hostsViewPage.betaBadgeDescription', {
-                    defaultMessage:
-                      'This feature is currently in beta. If you encounter any bugs or have feedback, we’d love to hear from you. Please open a support issue and/or share your feedback via the "Tell us what you think!" feedback button.',
-                  })}
-                />
               </div>
             ),
             rightSideItems: [

x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/layout.tsx

@@ -5,13 +5,11 @@
  * 2.0.
  */
 
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import useInterval from 'react-use/lib/useInterval';
 import { css } from '@emotion/react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { euiStyled } from '@kbn/kibana-react-plugin/common';
-import { i18n } from '@kbn/i18n';
-import useLocalStorage from 'react-use/lib/useLocalStorage';
 import { InventoryView } from '../../../../../common/inventory_views';
 import { SnapshotNode } from '../../../../../common/http_api';
 import { AutoSizer } from '../../../../components/auto_sizer';
@@ -33,7 +31,6 @@ import { createLegend } from '../lib/create_legend';
 import { useWaffleViewState } from '../hooks/use_waffle_view_state';
 import { BottomDrawer } from './bottom_drawer';
 import { LegendControls } from './waffle/legend_controls';
-import { TryItButton } from '../../../../components/try_it_button';
 
 interface Props {
   currentView?: InventoryView | null;
@@ -49,8 +46,6 @@ interface LegendControlOptions {
   legend: WaffleLegendOptions;
 }
 
-const HOSTS_LINK_LOCAL_STORAGE_KEY = 'inventoryUI:hostsLinkClicked';
-
 export const Layout = React.memo(({ currentView, reload, interval, nodes, loading }: Props) => {
   const [showLoading, setShowLoading] = useState(true);
   const {
@@ -73,11 +68,6 @@ export const Layout = React.memo(({ currentView, reload, interval, nodes, loadin
   const legendSteps = legend?.steps ?? DEFAULT_LEGEND.steps;
   const legendReverseColors = legend?.reverseColors ?? DEFAULT_LEGEND.reverseColors;
 
-  const [hostsLinkClicked, setHostsLinkClicked] = useLocalStorage<boolean>(
-    HOSTS_LINK_LOCAL_STORAGE_KEY,
-    false
-  );
-  const hostsLinkClickedRef = useRef<boolean | undefined>(hostsLinkClicked);
   const AUTO_REFRESH_INTERVAL = 5 * 1000;
 
   const options = {
@@ -171,24 +161,6 @@ export const Layout = React.memo(({ currentView, reload, interval, nodes, loadin
               </EuiFlexGroup>
             </EuiFlexGroup>
           </TopActionContainer>
-          <EuiFlexItem grow={false}>
-            {!hostsLinkClickedRef.current && nodeType === 'host' && (
-              <TryItButton
-                data-test-subj="inventory-hostsView-link"
-                label={i18n.translate('xpack.infra.layout.hostsLandingPageLink', {
-                  defaultMessage: 'Introducing a new Hosts analysis experience',
-                })}
-                link={{
-                  app: 'metrics',
-                  pathname: '/hosts',
-                }}
-                experimental
-                onClick={() => {
-                  setHostsLinkClicked(true);
-                }}
-              />
-            )}
-          </EuiFlexItem>
           <EuiFlexItem
             grow={false}
             css={css`

x-pack/plugins/observability_solution/infra/public/plugin.ts

@@ -172,7 +172,6 @@ export class Plugin implements InfraClientPluginClass {
                           ? [
                               {
                                 label: 'Hosts',
-                                isBetaFeature: true,
                                 app: 'metrics',
                                 path: '/hosts',
                               },

x-pack/plugins/observability_solution/observability/server/ui_settings.ts

@@ -238,10 +238,7 @@ export const uiSettings: Record<string, UiSettings> = {
     }),
     value: true,
     description: i18n.translate('xpack.observability.enableInfrastructureHostsViewDescription', {
-      defaultMessage: '{betaLabel} Enable the Hosts view in the Infrastructure app.',
-      values: {
-        betaLabel: `<em>[${betaLabel}]</em>`,
-      },
+      defaultMessage: 'Enable the Hosts view in the Infrastructure app.',
     }),
     schema: schema.boolean(),
   },

x-pack/plugins/translations/translations/fr-FR.json

@@ -23171,7 +23171,6 @@
     "xpack.infra.hostFlyout.explainProcessMessageTitle": "Quel est ce processus ?",
     "xpack.infra.hosts.searchPlaceholder": "Rechercher dans les hôtes (par ex. cloud.provider:gcp AND system.load.1 > 0.5)",
     "xpack.infra.hostsPage.goToMetricsSettings": "Vérifier les paramètres",
-    "xpack.infra.hostsViewPage.betaBadgeDescription": "Cette fonctionnalité est actuellement en version bêta. Nous aimerions beaucoup savoir si vous avez des commentaires ou si vous rencontrez des bugs. Veuillez ouvrir un ticket pour signaler votre problème et/ou partager vos commentaires grâce au bouton \"Dites-nous ce que vous en pensez !\".",
     "xpack.infra.hostsViewPage.error.detailsButton": "Détails de l'erreur",
     "xpack.infra.hostsViewPage.error.kqlErrorMessage": "Nous ne pouvons vous montrer aucun résultat car nous n’avons pas pu appliquer votre filtre.",
     "xpack.infra.hostsViewPage.error.kqlErrorTitle": "Expression KQL non valide",
@@ -23250,7 +23249,6 @@
     "xpack.infra.kibanaMetrics.cloudIdMissingErrorMessage": "Le modèle de {metricId} nécessite un cloudId, mais aucun n'a été attribué à {nodeId}.",
     "xpack.infra.kibanaMetrics.invalidInfraMetricErrorMessage": "{id} n'est pas une valeur inframétrique valide",
     "xpack.infra.kibanaMetrics.nodeDoesNotExistErrorMessage": "{nodeId} n'existe pas.",
-    "xpack.infra.layout.hostsLandingPageLink": "Présentation d'une nouvelle expérience d'analyse des hôtes",
     "xpack.infra.layout.tryIt": "Essayer",
     "xpack.infra.legendControls.applyButton": "Appliquer",
     "xpack.infra.legendControls.buttonLabel": "configurer la légende",

x-pack/plugins/translations/translations/ja-JP.json

@@ -23162,7 +23162,6 @@
     "xpack.infra.hostFlyout.explainProcessMessageTitle": "このプロセスの概要",
     "xpack.infra.hosts.searchPlaceholder": "ホストを検索（例：cloud.provider:gcp AND system.load.1 > 0.5）",
     "xpack.infra.hostsPage.goToMetricsSettings": "設定を確認",
-    "xpack.infra.hostsViewPage.betaBadgeDescription": "現在、この機能はベータです。バグが発生した場合やフィードバックがある場合は、お問い合わせください。サポートの問題およびフィードバックについては、［ご意見をお聞かせください］フィードバックを使用して、お問い合わせください。",
     "xpack.infra.hostsViewPage.error.detailsButton": "詳細を入力",
     "xpack.infra.hostsViewPage.error.kqlErrorMessage": "フィルターを適用できなかったため、結果を表示できません。",
     "xpack.infra.hostsViewPage.error.kqlErrorTitle": "無効なKQL式",
@@ -23241,7 +23240,6 @@
     "xpack.infra.kibanaMetrics.cloudIdMissingErrorMessage": "{metricId} のモデルには cloudId が必要ですが、{nodeId} に cloudId が指定されていません。",
     "xpack.infra.kibanaMetrics.invalidInfraMetricErrorMessage": "{id} は有効な InfraMetric ではありません",
     "xpack.infra.kibanaMetrics.nodeDoesNotExistErrorMessage": "{nodeId} が存在しません。",
-    "xpack.infra.layout.hostsLandingPageLink": "新しいホスト分析エクスペリエンスの導入",
     "xpack.infra.layout.tryIt": "お試しください",
     "xpack.infra.legendControls.applyButton": "適用",
     "xpack.infra.legendControls.buttonLabel": "凡例を校正",

x-pack/plugins/translations/translations/zh-CN.json

@@ -23190,7 +23190,6 @@
     "xpack.infra.hostFlyout.explainProcessMessageTitle": "此进程是什么？",
     "xpack.infra.hosts.searchPlaceholder": "搜索主机（例如，cloud.provider:gcp AND system.load.1 > 0.5）",
     "xpack.infra.hostsPage.goToMetricsSettings": "检查设置",
-    "xpack.infra.hostsViewPage.betaBadgeDescription": "此功能当前为公测版。如果遇到任何错误或有任何反馈，我们乐于倾听您的意见。请报告支持问题和/或通过“告诉我们您的看法！”反馈按钮分享您的反馈。",
     "xpack.infra.hostsViewPage.error.detailsButton": "错误详细信息",
     "xpack.infra.hostsViewPage.error.kqlErrorMessage": "无法显示任何结果，因为无法应用您的筛选。",
     "xpack.infra.hostsViewPage.error.kqlErrorTitle": "KQL 表达式无效",
@@ -23269,7 +23268,6 @@
     "xpack.infra.kibanaMetrics.cloudIdMissingErrorMessage": "{metricId} 的模型需要云 ID，但没有为 {nodeId} 提供。",
     "xpack.infra.kibanaMetrics.invalidInfraMetricErrorMessage": "{id} 不是有效的 InfraMetric",
     "xpack.infra.kibanaMetrics.nodeDoesNotExistErrorMessage": "{nodeId} 不存在。",
-    "xpack.infra.layout.hostsLandingPageLink": "引入新的主机分析体验",
     "xpack.infra.layout.tryIt": "试用",
     "xpack.infra.legendControls.applyButton": "应用",
     "xpack.infra.legendControls.buttonLabel": "配置图例",

x-pack/test/functional/apps/infra/hosts_view.ts

@@ -371,18 +371,6 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
         ]);
       });
 
-      it('should be accessible from the Inventory page', async () => {
-        await pageObjects.common.navigateToApp('infraOps');
-
-        await pageObjects.infraHome.clickDismissKubernetesTourButton();
-        await pageObjects.infraHostsView.getBetaBadgeExists();
-        await pageObjects.infraHostsView.clickTryHostViewBadge();
-
-        const pageUrl = await browser.getCurrentUrl();
-
-        expect(pageUrl).to.contain(HOSTS_VIEW_PATH);
-      });
-
       describe('#Single Host Flyout', () => {
         before(async () => {
           await setCustomDashboardsEnabled(true);
@@ -573,10 +561,6 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
           expect(documentTitle).to.contain('Hosts - Infrastructure - Observability - Elastic');
         });
 
-        it('should render the title beta badge', async () => {
-          await pageObjects.infraHostsView.getBetaBadgeExists();
-        });
-
         describe('Hosts table', () => {
           let hostRows: WebElementWrapper[] = [];
 

x-pack/test/functional/page_objects/infra_hosts_view.ts

@@ -29,19 +29,6 @@ export function InfraHostsViewProvider({ getService }: FtrProviderContext) {
       return testSubjects.click('hostsViewTableAddFilterButton');
     },
 
-    async getBetaBadgeExists() {
-      return testSubjects.exists('infra-beta-badge');
-    },
-
-    // Inventory UI
-    async clickTryHostViewLink() {
-      return testSubjects.click('inventory-hostsView-link');
-    },
-
-    async clickTryHostViewBadge() {
-      return testSubjects.click('inventory-hostsView-link-badge');
-    },
-
     // Table
 
     async getHostsTable() {

x-pack/test_serverless/functional/test_suites/observability/infra/hosts_page.ts

@@ -154,10 +154,6 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
           expect(documentTitle).to.contain('Hosts - Infrastructure - Observability - Elastic');
         });
 
-        it('should render the title beta badge', async () => {
-          await pageObjects.infraHostsView.getBetaBadgeExists();
-        });
-
         describe('Hosts table', () => {
           let hostRows: WebElementWrapper[] = [];