[Dataset Quality] Indicate if failure store isn't enabled for data stream (#221644)

Added a tooltip and a link with documentation for Failed docs column
when dataset does not have failure store enabled.



https://github.com/user-attachments/assets/be65db9a-15c8-4087-b175-752b2fabab6e




For now it awaits for the documentation PR to be merged :
elastic/docs-content#1368

---------

Co-authored-by: kibanamachine <[email protected]>
Co-authored-by: Yngrid Coello <[email protected]>

Author: 3 people

x-pack/platform/plugins/shared/dataset_quality/common/api_types.ts

@@ -34,6 +34,7 @@ export const dataStreamStatRt = rt.intersection([
     integration: rt.string,
     totalDocs: rt.number,
     creationDate: rt.number,
+    hasFailureStore: rt.boolean,
   }),
 ]);
 
@@ -236,6 +237,7 @@ export const dataStreamSettingsRt = rt.partial({
 export type DataStreamSettings = rt.TypeOf<typeof dataStreamSettingsRt>;
 
 export const dataStreamDetailsRt = rt.partial({
+  hasFailureStore: rt.boolean,
   lastActivity: rt.number,
   degradedDocsCount: rt.number,
   failedDocsCount: rt.number,

x-pack/platform/plugins/shared/dataset_quality/common/data_streams_stats/data_stream_stat.ts

@@ -32,6 +32,7 @@ export class DataStreamStat {
   docsInTimeRange?: number;
   degradedDocs: QualityStat;
   failedDocs: QualityStat;
+  hasFailureStore?: DataStreamStatType['hasFailureStore'];
 
   private constructor(dataStreamStat: DataStreamStat) {
     this.rawName = dataStreamStat.rawName;
@@ -49,13 +50,15 @@ export class DataStreamStat {
     this.docsInTimeRange = dataStreamStat.docsInTimeRange;
     this.degradedDocs = dataStreamStat.degradedDocs;
     this.failedDocs = dataStreamStat.failedDocs;
+    this.hasFailureStore = dataStreamStat.hasFailureStore;
   }
 
   public static create(dataStreamStat: DataStreamStatType) {
     const { type, dataset, namespace } = indexNameToDataStreamParts(dataStreamStat.name);
 
     const dataStreamStatProps = {
       rawName: dataStreamStat.name,
+      hasFailureStore: dataStreamStat.hasFailureStore,
       type,
       name: dataset,
       title: dataset,
@@ -79,17 +82,20 @@ export class DataStreamStat {
     failedDocStat,
     datasetIntegrationMap,
     totalDocs,
+    hasFailureStore,
   }: {
     datasetName: string;
     degradedDocStat: QualityStat;
     failedDocStat: QualityStat;
     datasetIntegrationMap: Record<string, { integration: Integration; title: string }>;
     totalDocs: number;
+    hasFailureStore?: boolean;
   }) {
     const { type, dataset, namespace } = indexNameToDataStreamParts(datasetName);
 
     const dataStreamStatProps = {
       rawName: datasetName,
+      hasFailureStore,
       type,
       name: dataset,
       title: datasetIntegrationMap[dataset]?.title || dataset,

x-pack/platform/plugins/shared/dataset_quality/public/components/dataset_quality/table/columns.tsx

@@ -355,29 +355,69 @@ export const getDatasetQualityTableColumns = ({
             ),
             field: 'failedDocs.percentage',
             sortable: true,
-            render: (_: any, dataStreamStat: DataStreamStat) => (
-              <PrivilegesWarningIconWrapper
-                title={`sizeBytes-${dataStreamStat.title}`}
-                hasPrivileges={dataStreamStat.userPrivileges?.canReadFailureStore ?? true}
-              >
-                <QualityStatPercentageLink
-                  isLoading={loadingFailedStats}
-                  dataStreamStat={dataStreamStat}
-                  timeRange={timeRange}
-                  accessor="failedDocs"
-                  selector={FAILURE_STORE_SELECTOR}
-                  fewDocStatsTooltip={(failedDocsCount: number) =>
-                    i18n.translate('xpack.datasetQuality.fewFailedDocsTooltip', {
-                      defaultMessage: '{failedDocsCount} failed docs in this data set.',
-                      values: {
-                        failedDocsCount,
-                      },
-                    })
-                  }
-                  dataTestSubj="datasetQualityFailedDocsPercentageLink"
-                />
-              </PrivilegesWarningIconWrapper>
-            ),
+            render: (_: any, dataStreamStat: DataStreamStat) => {
+              if (!dataStreamStat.hasFailureStore) {
+                const FailureStoreHoverLink = () => {
+                  const [hovered, setHovered] = React.useState(false);
+                  const locator = urlService.locators.get('INDEX_MANAGEMENT_LOCATOR_ID');
+                  const params = {
+                    page: 'data_streams_details',
+                    dataStreamName: dataStreamStat.rawName,
+                  } as const;
+
+                  return (
+                    <EuiToolTip
+                      content={i18n.translate('xpack.datasetQuality.failureStore.notEnabled', {
+                        defaultMessage:
+                          'Failure store is not enabled for this data stream. Enable failure store.',
+                      })}
+                    >
+                      <EuiLink
+                        href={locator?.getRedirectUrl(params)}
+                        target="_blank"
+                        external={false}
+                        data-test-subj="datasetQualitySetFailureStoreLink"
+                        onMouseEnter={() => setHovered(true)}
+                        onMouseLeave={() => setHovered(false)}
+                        css={{ fontWeight: 'normal' }}
+                      >
+                        {hovered
+                          ? i18n.translate('xpack.datasetQuality.failureStore.enable', {
+                              defaultMessage: 'Set failure store',
+                            })
+                          : i18n.translate('xpack.datasetQuality.failureStore.notAvailable', {
+                              defaultMessage: 'N/A',
+                            })}
+                      </EuiLink>
+                    </EuiToolTip>
+                  );
+                };
+                return <FailureStoreHoverLink />;
+              }
+              return (
+                <PrivilegesWarningIconWrapper
+                  title={`sizeBytes-${dataStreamStat.title}`}
+                  hasPrivileges={dataStreamStat.userPrivileges?.canReadFailureStore ?? true}
+                >
+                  <QualityStatPercentageLink
+                    isLoading={loadingFailedStats}
+                    dataStreamStat={dataStreamStat}
+                    timeRange={timeRange}
+                    accessor="failedDocs"
+                    selector={FAILURE_STORE_SELECTOR}
+                    fewDocStatsTooltip={(failedDocsCount: number) =>
+                      i18n.translate('xpack.datasetQuality.fewFailedDocsTooltip', {
+                        defaultMessage: '{failedDocsCount} failed docs in this data set.',
+                        values: {
+                          failedDocsCount,
+                        },
+                      })
+                    }
+                    dataTestSubj="datasetQualityFailedDocsPercentageLink"
+                  />
+                </PrivilegesWarningIconWrapper>
+              );
+            },
             width: '140px',
           },
         ]

x-pack/platform/plugins/shared/dataset_quality/public/components/dataset_quality/table/table.tsx

@@ -75,7 +75,7 @@ export const Table = () => {
         </EuiFlexGroup>
       </EuiFlexGroup>
       <EuiSpacer size="s" />
-      <EuiHorizontalRule margin="none" style={{ height: 2 }} />
+      <EuiHorizontalRule margin="none" css={{ height: 2 }} />
       <EuiBasicTable
         tableLayout="auto"
         sorting={sort}

x-pack/platform/plugins/shared/dataset_quality/public/components/dataset_quality_details/overview/document_trends/index.tsx

@@ -60,7 +60,7 @@ const degradedDocsTooltip = (
 // Allow for lazy loading
 // eslint-disable-next-line import/no-default-export
 export default function DocumentTrends({ lastReloadTime }: { lastReloadTime: number }) {
-  const { timeRange, updateTimeRange, docsTrendChart, canUserReadFailureStore } =
+  const { timeRange, updateTimeRange, docsTrendChart, canShowFailureStoreInfo } =
     useDatasetQualityDetailsState();
   const {
     dataView,
@@ -81,7 +81,7 @@ export default function DocumentTrends({ lastReloadTime }: { lastReloadTime: num
     [updateTimeRange, timeRange.refresh]
   );
 
-  const accordionTitle = !canUserReadFailureStore ? (
+  const accordionTitle = !canShowFailureStoreInfo ? (
     <EuiFlexItem
       css={css`
         flex-direction: row;
@@ -127,7 +127,7 @@ export default function DocumentTrends({ lastReloadTime }: { lastReloadTime: num
         <EuiSpacer size="m" />
         <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
           <EuiFlexItem>
-            {canUserReadFailureStore && (
+            {canShowFailureStoreInfo && (
               <EuiButtonGroup
                 data-test-subj="datasetQualityDetailsChartTypeButtonGroup"
                 legend={i18n.translate('xpack.datasetQuality.details.chartTypeLegend', {

x-pack/platform/plugins/shared/dataset_quality/public/components/dataset_quality_details/overview/index.tsx

@@ -7,11 +7,13 @@
 
 import React, { useCallback, useState } from 'react';
 import { dynamic } from '@kbn/shared-ux-utility';
-import { EuiFlexItem, EuiSpacer, OnRefreshProps } from '@elastic/eui';
+import { EuiCallOut, EuiFlexItem, EuiLink, EuiSpacer, OnRefreshProps } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import { useDatasetQualityDetailsState } from '../../../hooks';
 import { AggregationNotSupported } from './aggregation_not_supported';
 import { QualityIssues } from './quality_issues';
 import { FailureStoreWarning } from '../../failure_store/failure_store_warning';
+import { useKibanaContextForPlugin } from '../../../utils/use_kibana';
 
 const OverviewHeader = dynamic(() => import('./header'));
 const Summary = dynamic(() => import('./summary'));
@@ -22,9 +24,20 @@ export function Overview() {
     dataStream,
     isNonAggregatable,
     canUserReadFailureStore,
+    hasFailureStore,
     updateTimeRange,
     loadingState: { dataStreamSettingsLoading },
   } = useDatasetQualityDetailsState();
+
+  const {
+    services: {
+      share: { url: urlService },
+    },
+  } = useKibanaContextForPlugin();
+
+  const locator = urlService.locators.get('INDEX_MANAGEMENT_LOCATOR_ID');
+  const locatorParams = { page: 'data_streams_details', dataStreamName: dataStream } as const;
+
   const [lastReloadTime, setLastReloadTime] = useState<number>(Date.now());
 
   const handleRefresh = useCallback(
@@ -39,6 +52,31 @@ export function Overview() {
       {isNonAggregatable && <AggregationNotSupported dataStream={dataStream} />}
       <OverviewHeader handleRefresh={handleRefresh} />
       <EuiSpacer size="m" />
+      {!dataStreamSettingsLoading && !hasFailureStore && canUserReadFailureStore && (
+        <div style={{ marginBottom: 16 }}>
+          <EuiCallOut
+            color="warning"
+            title={
+              <>
+                {i18n.translate('xpack.datasetQuality.noFailureStoreTitle', {
+                  defaultMessage: 'Failure store is not enabled for this data stream. ',
+                })}
+                <EuiLink
+                  href={locator?.getRedirectUrl(locatorParams)}
+                  target="_blank"
+                  external={false}
+                  css={{ textDecoration: 'underline' }}
+                >
+                  {i18n.translate('xpack.datasetQuality.enableFailureStore', {
+                    defaultMessage: 'Enable failure store',
+                  })}
+                </EuiLink>
+              </>
+            }
+          />
+        </div>
+      )}
+
       {!dataStreamSettingsLoading && !canUserReadFailureStore && (
         <EuiFlexItem>
           <FailureStoreWarning />

x-pack/platform/plugins/shared/dataset_quality/public/components/dataset_quality_details/overview/summary/index.tsx

@@ -48,7 +48,7 @@ const failedDocsColumnTooltip = (
 // Allow for lazy loading
 // eslint-disable-next-line import/no-default-export
 export default function Summary() {
-  const { canUserReadFailureStore } = useDatasetQualityDetailsState();
+  const { canShowFailureStoreInfo } = useDatasetQualityDetailsState();
   const {
     isSummaryPanelLoading,
     totalDocsCount,
@@ -103,7 +103,7 @@ export default function Summary() {
           isLoading={isSummaryPanelLoading}
           tooltip={degradedDocsTooltip}
         />
-        {canUserReadFailureStore && (
+        {canShowFailureStoreInfo && (
           <PanelIndicator
             label={overviewPanelDatasetQualityIndicatorFailedDocs}
             value={totalFailedDocsCount}

x-pack/platform/plugins/shared/dataset_quality/public/hooks/use_dataset_quality_details_state.ts

@@ -160,6 +160,9 @@ export const useDatasetQualityDetailsState = () => {
     [service]
   );
 
+  const hasFailureStore = Boolean(dataStreamDetails?.hasFailureStore);
+  const canShowFailureStoreInfo = canUserReadFailureStore && hasFailureStore;
+
   return {
     service,
     telemetryClient,
@@ -182,6 +185,8 @@ export const useDatasetQualityDetailsState = () => {
     canUserAccessDashboards,
     canUserViewIntegrations,
     canUserReadFailureStore,
+    hasFailureStore,
+    canShowFailureStoreInfo,
     expandedQualityIssue,
     isQualityIssueFlyoutOpen,
   };