[Dataset Quality] Hide unreachable links (#196302)

closes #196256 https://github.com/user-attachments/assets/5cec1296-a17a-43bb-8530-99e7261a189a
elastic · Oct 15, 2024 · 5fbec1f · 5fbec1f
1 parent d89f32a
commit 5fbec1f
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 18 deletions.
diff --git a/...d_doc_viewer/public/components/doc_viewer_logs_overview/logs_overview_degraded_fields.tsx b/...d_doc_viewer/public/components/doc_viewer_logs_overview/logs_overview_degraded_fields.tsx
@@ -270,13 +270,12 @@ const DatasetQualityLink = React.memo(
     urlService: BrowserUrlService;
     dataStream: string | undefined;
   }) => {
-    if (!dataStream) {
-      return null;
-    }
     const locator = urlService.locators.get<DataQualityDetailsLocatorParams>(
       DATA_QUALITY_DETAILS_LOCATOR_ID
     );
 
+    if (!locator || !dataStream) return null;
+
     const datasetQualityUrl = locator?.getRedirectUrl({ dataStream });
 
     const navigateToDatasetQuality = () => {

diff --git a/...rvability_solution/observability_logs_explorer/public/components/dataset_quality_link.tsx b/...rvability_solution/observability_logs_explorer/public/components/dataset_quality_link.tsx
@@ -8,7 +8,7 @@
 import { EuiHeaderLink } from '@elastic/eui';
 import { LogsExplorerPublicState } from '@kbn/logs-explorer-plugin/public';
 import { getRouterLinkProps } from '@kbn/router-utils';
-import { BrowserUrlService } from '@kbn/share-plugin/public';
+import { LocatorPublic } from '@kbn/share-plugin/public';
 import { MatchedStateFromActor } from '@kbn/xstate-utils';
 import { useActor } from '@xstate/react';
 import React from 'react';
@@ -20,20 +20,28 @@ import {
 } from '../state_machines/observability_logs_explorer/src';
 import { useKibanaContextForPlugin } from '../utils/use_kibana';
 
-export const ConnectedDatasetQualityLink = React.memo(() => {
+export const ConnectedDatasetQualityLink = () => {
   const {
     services: {
       share: { url },
     },
   } = useKibanaContextForPlugin();
   const [pageState] = useActor(useObservabilityLogsExplorerPageStateContext());
+  const locator = url.locators.get<DataQualityLocatorParams>(DATA_QUALITY_LOCATOR_ID);
 
-  if (pageState.matches({ initialized: 'validLogsExplorerState' })) {
-    return <DatasetQualityLink urlService={url} pageState={pageState} />;
-  } else {
-    return <DatasetQualityLink urlService={url} />;
+  if (!locator) {
+    return null;
   }
-});
+
+  return (
+    <DatasetQualityLink
+      locator={locator}
+      pageState={
+        pageState.matches({ initialized: 'validLogsExplorerState' }) ? pageState : undefined
+      }
+    />
+  );
+};
 
 type InitializedPageState = MatchedStateFromActor<
   ObservabilityLogsExplorerService,
@@ -62,14 +70,12 @@ const constructLocatorParams = (
 
 export const DatasetQualityLink = React.memo(
   ({
-    urlService,
+    locator,
     pageState,
   }: {
-    urlService: BrowserUrlService;
+    locator: LocatorPublic<DataQualityLocatorParams>;
     pageState?: InitializedPageState;
   }) => {
-    const locator = urlService.locators.get<DataQualityLocatorParams>(DATA_QUALITY_LOCATOR_ID);
-
     const locatorParams: DataQualityLocatorParams = pageState
       ? constructLocatorParams(pageState.context.logsExplorerState)
       : {};

diff --git a/...ity_solution/observability_logs_explorer/public/components/logs_explorer_top_nav_menu.tsx b/...ity_solution/observability_logs_explorer/public/components/logs_explorer_top_nav_menu.tsx
@@ -70,8 +70,7 @@ const ProjectTopNav = () => {
         <EuiHeaderSectionItem>
           <EuiHeaderLinks gutterSize="xs">
             <ConnectedDiscoverLink />
-            <VerticalRule />
-            <ConnectedDatasetQualityLink />
+            <ConditionalVerticalRule Component={ConnectedDatasetQualityLink()} />
             <VerticalRule />
             <FeedbackLink />
             <VerticalRule />
@@ -147,8 +146,7 @@ const ClassicTopNav = () => {
         <EuiHeaderSectionItem>
           <EuiHeaderLinks gutterSize="xs">
             <ConnectedDiscoverLink />
-            <VerticalRule />
-            <ConnectedDatasetQualityLink />
+            <ConditionalVerticalRule Component={ConnectedDatasetQualityLink()} />
             <VerticalRule />
             <AlertsPopover />
             <VerticalRule />
@@ -165,3 +163,11 @@ const VerticalRule = styled.span`
   height: 20px;
   background-color: ${euiThemeVars.euiColorLightShade};
 `;
+
+const ConditionalVerticalRule = ({ Component }: { Component: JSX.Element | null }) =>
+  Component && (
+    <>
+      <VerticalRule />
+      {Component}
+    </>
+  );