[Infra UI] Hosts view: Enable Anomalies, Osquery tabs and open as page link inside asset details flyout (#161328)

Closes  #160653

## Summary

This PR enabled Anomalies, Osquery tabs, removes Uptime link and adds
open as page link.

## Testing
- Before going to host view go to inventory click on Anomaly detection
and and set up ML jobs for hosts (it will be enable instead of recreate
in case it's not enabled:
<img width="200" alt="image"
src="29eb5112-7292-474a-86f3-7e9a765ac307">
)
- Go to the hosts view and open the flyout

- the Anomalies Tab should be visible (find a host with detected anomaly
and open it):
<img width="1728" alt="Screenshot 2023-07-06 at 14 49 08"
src="e2d72725-ee3d-4f20-a7f3-c8bed104ce8b">
  
   - Osquery tab should be visible:
<img width="1728" alt="Screenshot 2023-07-06 at 14 41 30"
src="114d6e94-0792-4af6-8755-1c0d0d96176d">
   
   - Click on open as page - should navigate to node details page

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/infra/public/components/asset_details/asset_details.stories.tsx

@@ -16,7 +16,7 @@ import { decorateWithGlobalStorybookThemeProviders } from '../../test_utils/use_
 import { FlyoutTabIds, Tab, type AssetDetailsProps } from './types';
 import { DecorateWithKibanaContext } from './__stories__/decorator';
 
-const links: AssetDetailsProps['links'] = ['alertRule', 'nodeDetails', 'apmServices', 'uptime'];
+const links: AssetDetailsProps['links'] = ['alertRule', 'nodeDetails', 'apmServices'];
 const tabs: Tab[] = [
   {
     id: FlyoutTabIds.OVERVIEW,
@@ -67,13 +67,6 @@ const tabs: Tab[] = [
     }),
     'data-test-subj': 'hostsView-flyout-apm-link',
   },
-  {
-    id: FlyoutTabIds.LINK_TO_UPTIME,
-    name: i18n.translate('xpack.infra.infra.nodeDetails.updtimeTabLabel', {
-      defaultMessage: 'Uptime',
-    }),
-    'data-test-subj': 'hostsView-flyout-uptime-link',
-  },
 ];
 
 const stories: Meta<AssetDetailsProps> = {

x-pack/plugins/infra/public/components/asset_details/header/header.tsx

@@ -20,7 +20,6 @@ import { css } from '@emotion/react';
 import { AssetDetailsProps, FlyoutTabIds, LinkOptions, Tab, TabIds } from '../types';
 import {
   LinkToApmServices,
-  LinkToUptime,
   LinkToAlertsRule,
   LinkToNodeDetails,
   TabToApmTraces,
@@ -64,11 +63,14 @@ export const Header = ({
 
   const topCornerLinkComponents: Record<LinkOptions, JSX.Element> = {
     nodeDetails: (
-      <LinkToNodeDetails nodeId={node.id} nodeType={nodeType} currentTime={currentTimeRange.to} />
+      <LinkToNodeDetails
+        nodeName={node.name}
+        nodeType={nodeType}
+        currentTime={currentTimeRange.to}
+      />
     ),
     alertRule: <LinkToAlertsRule onClick={overrides?.alertRule?.onCreateRuleClick} />,
     apmServices: <LinkToApmServices nodeName={node.name} apmField={APM_FIELD} />,
-    uptime: <LinkToUptime nodeName={node.name} nodeType={nodeType} nodeIp={node.ip} />,
   };
 
   const tabEntries = tabs.map(({ name, ...tab }) => {

x-pack/plugins/infra/public/components/asset_details/links/index.ts

@@ -6,7 +6,6 @@
  */
 
 export { LinkToApmServices } from './link_to_apm_services';
-export { LinkToUptime } from './link_to_uptime';
 export { LinkToAlertsRule } from './link_to_alerts';
 export { LinkToNodeDetails } from './link_to_node_details';
 export { TabToApmTraces } from './tab_to_apm_traces';

x-pack/plugins/infra/public/components/asset_details/links/link_to_node_details.tsx

@@ -12,20 +12,20 @@ import { getNodeDetailUrl } from '../../../pages/link_to';
 import { findInventoryModel } from '../../../../common/inventory_models';
 import type { InventoryItemType } from '../../../../common/inventory_models/types';
 
-export interface LinkToAlertsRule {
+export interface LinkToNodeDetailsProps {
   currentTime: number;
-  nodeId: string;
+  nodeName: string;
   nodeType: InventoryItemType;
 }
 
-export const LinkToNodeDetails = ({ nodeId, nodeType, currentTime }: LinkToAlertsRule) => {
+export const LinkToNodeDetails = ({ nodeName, nodeType, currentTime }: LinkToNodeDetailsProps) => {
   const inventoryModel = findInventoryModel(nodeType);
   const nodeDetailFrom = currentTime - inventoryModel.metrics.defaultTimeRangeInSeconds * 1000;
 
   const nodeDetailMenuItemLinkProps = useLinkProps({
     ...getNodeDetailUrl({
       nodeType,
-      nodeId,
+      nodeId: nodeName,
       from: nodeDetailFrom,
       to: currentTime,
     }),

x-pack/plugins/infra/public/components/asset_details/links/link_to_uptime.tsx

@@ -1,43 +0,0 @@
-/*
- * 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 from 'react';
-import { EuiButtonEmpty } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n-react';
-import { uptimeOverviewLocatorID } from '@kbn/observability-plugin/public';
-import { useKibanaContextForPlugin } from '../../../hooks/use_kibana';
-import type { InventoryItemType } from '../../../../common/inventory_models/types';
-
-export interface LinkToUptimeProps {
-  nodeType: InventoryItemType;
-  nodeName: string;
-  nodeIp?: string | null;
-}
-
-export const LinkToUptime = ({ nodeType, nodeName, nodeIp }: LinkToUptimeProps) => {
-  const { share } = useKibanaContextForPlugin().services;
-
-  return (
-    <EuiButtonEmpty
-      data-test-subj="hostsView-flyout-uptime-link"
-      size="xs"
-      iconSide="left"
-      iconType="popout"
-      flush="both"
-      onClick={() =>
-        share.url.locators
-          .get(uptimeOverviewLocatorID)!
-          .navigate({ [nodeType]: nodeName, ip: nodeIp })
-      }
-    >
-      <FormattedMessage
-        id="xpack.infra.hostsViewPage.flyout.uptimeLinkLabel"
-        defaultMessage="Uptime"
-      />
-    </EuiButtonEmpty>
-  );
-};

x-pack/plugins/infra/public/components/asset_details/types.ts

@@ -94,7 +94,7 @@ export interface Tab {
   'data-test-subj': string;
 }
 
-export type LinkOptions = 'alertRule' | 'nodeDetails' | 'apmServices' | 'uptime';
+export type LinkOptions = 'alertRule' | 'nodeDetails' | 'apmServices';
 
 export interface AssetDetailsProps {
   node: HostNodeRow;

x-pack/plugins/infra/public/pages/metrics/hosts/components/host_details_flyout/flyout_wrapper.tsx

@@ -74,7 +74,7 @@ export const FlyoutWrapper = ({ node, closeFlyout }: Props) => {
         })
       }
       tabs={orderedFlyoutTabs}
-      links={['apmServices', 'uptime']}
+      links={['apmServices', 'nodeDetails']}
       renderMode={{
         showInFlyout: true,
         closeFlyout,

x-pack/plugins/infra/public/pages/metrics/hosts/components/host_details_flyout/tabs.ts

@@ -37,4 +37,18 @@ export const orderedFlyoutTabs: Tab[] = [
     }),
     'data-test-subj': 'hostsView-flyout-tabs-logs',
   },
+  {
+    id: FlyoutTabIds.ANOMALIES,
+    name: i18n.translate('xpack.infra.nodeDetails.tabs.anomalies', {
+      defaultMessage: 'Anomalies',
+    }),
+    'data-test-subj': 'hostsView-flyout-tabs-anomalies',
+  },
+  {
+    id: FlyoutTabIds.OSQUERY,
+    name: i18n.translate('xpack.infra.nodeDetails.tabs.osquery', {
+      defaultMessage: 'Osquery',
+    }),
+    'data-test-subj': 'hostsView-flyout-tabs-Osquery',
+  },
 ];

x-pack/plugins/infra/public/pages/metrics/hosts/hooks/use_host_flyout_url_state.ts

@@ -49,6 +49,8 @@ const FlyoutTabIdRT = rt.union([
   rt.literal(FlyoutTabIds.METADATA),
   rt.literal(FlyoutTabIds.PROCESSES),
   rt.literal(FlyoutTabIds.LOGS),
+  rt.literal(FlyoutTabIds.ANOMALIES),
+  rt.literal(FlyoutTabIds.OSQUERY),
 ]);
 
 const HostFlyoutStateRT = rt.intersection([

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

@@ -18326,7 +18326,6 @@
     "xpack.infra.hostsPage.goToMetricsSettings": "Vérifier les paramètres",
     "xpack.infra.hostsPage.tellUsWhatYouThinkLink": "Dites-nous ce que vous pensez !",
     "xpack.infra.hostsViewPage.flyout.apmServicesLinkLabel": "Service APM",
-    "xpack.infra.hostsViewPage.flyout.uptimeLinkLabel": "Uptime",
     "xpack.infra.hostsViewPage.hostLimit": "Limite de l'hôte",
     "xpack.infra.hostsViewPage.hostLimit.tooltip": "Pour garantir des performances de recherche plus rapides, le nombre d'hôtes retournés est limité.",
     "xpack.infra.hostsViewPage.landing.calloutReachOutToYourKibanaAdministrator": "Votre rôle d'utilisateur ne dispose pas des privilèges suffisants pour activer cette fonctionnalité - veuillez \n                contacter votre administrateur Kibana et lui demander de visiter cette page pour activer la fonctionnalité.",
@@ -39397,4 +39396,4 @@
     "xpack.painlessLab.title": "Painless Lab",
     "xpack.painlessLab.walkthroughButtonLabel": "Présentation"
   }
-}
+}

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

@@ -18325,7 +18325,6 @@
     "xpack.infra.hostsPage.goToMetricsSettings": "設定を確認",
     "xpack.infra.hostsPage.tellUsWhatYouThinkLink": "ご意見をお聞かせください。",
     "xpack.infra.hostsViewPage.flyout.apmServicesLinkLabel": "APMサービス",
-    "xpack.infra.hostsViewPage.flyout.uptimeLinkLabel": "アップタイム",
     "xpack.infra.hostsViewPage.hostLimit": "ホスト制限",
     "xpack.infra.hostsViewPage.hostLimit.tooltip": "クエリパフォーマンスを確実に高めるために、返されるホスト数には制限があります",
     "xpack.infra.hostsViewPage.landing.calloutReachOutToYourKibanaAdministrator": "ユーザーロールには、この機能を有効にするための十分な権限がありません。 \n                この機能を有効にするために、Kibana管理者に連絡して、このページにアクセスするように依頼してください。",
@@ -39371,4 +39370,4 @@
     "xpack.painlessLab.title": "Painless Lab",
     "xpack.painlessLab.walkthroughButtonLabel": "実地検証"
   }
-}
+}

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

@@ -18325,7 +18325,6 @@
     "xpack.infra.hostsPage.goToMetricsSettings": "检查设置",
     "xpack.infra.hostsPage.tellUsWhatYouThinkLink": "告诉我们您的看法！",
     "xpack.infra.hostsViewPage.flyout.apmServicesLinkLabel": "APM 服务",
-    "xpack.infra.hostsViewPage.flyout.uptimeLinkLabel": "运行时间",
     "xpack.infra.hostsViewPage.hostLimit": "主机限制",
     "xpack.infra.hostsViewPage.hostLimit.tooltip": "为确保更快的查询性能，对返回的主机数量实施了限制",
     "xpack.infra.hostsViewPage.landing.calloutReachOutToYourKibanaAdministrator": "您的用户角色权限不足，无法启用此功能 - 请 \n                联系您的 Kibana 管理员，要求他们访问此页面以启用该功能。",
@@ -39365,4 +39364,4 @@
     "xpack.painlessLab.title": "Painless 实验室",
     "xpack.painlessLab.walkthroughButtonLabel": "指导"
   }
-}
+}

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

@@ -362,19 +362,6 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
         });
       });
 
-      it('should navigate to Uptime after click', async () => {
-        await pageObjects.infraHostsView.clickFlyoutUptimeLink();
-        const url = parse(await browser.getCurrentUrl());
-
-        const search = 'search=host.name: "Jennys-MBP.fritz.box" OR host.ip: "192.168.1.79"';
-        const query = decodeURIComponent(url.query ?? '');
-
-        expect(url.pathname).to.eql('/app/uptime/');
-        expect(query).to.contain(search);
-
-        await returnTo(HOSTS_VIEW_PATH);
-      });
-
       it('should navigate to APM services after click', async () => {
         await pageObjects.infraHostsView.clickFlyoutApmServicesLink();
         const url = parse(await browser.getCurrentUrl());

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

@@ -60,10 +60,6 @@ export function InfraHostsViewProvider({ getService }: FtrProviderContext) {
       return testSubjects.click('infraProcessRowButton');
     },
 
-    async clickFlyoutUptimeLink() {
-      return testSubjects.click('hostsView-flyout-uptime-link');
-    },
-
     async clickFlyoutApmServicesLink() {
       return testSubjects.click('hostsView-flyout-apm-services-link');
     },