[Data Quality] Integrate failure store modal

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

@@ -260,6 +260,8 @@ export const dataStreamDetailsRt = rt.partial({
   services: rt.record(rt.string, rt.array(rt.string)),
   hosts: rt.record(rt.string, rt.array(rt.string)),
   userPrivileges: userPrivilegesRt,
+  defaultRetentionPeriod: rt.string,
+  customRetentionPeriod: rt.string,
 });
 
 export type DataStreamDetails = rt.TypeOf<typeof dataStreamDetailsRt>;
@@ -308,3 +310,9 @@ export const getPreviewChartResponseRt = rt.type({
 });
 
 export type PreviewChartResponse = rt.TypeOf<typeof getPreviewChartResponseRt>;
+
+export const updateFailureStoreResponseRt = rt.type({
+  headers: rt.record(rt.string, rt.unknown),
+});
+
+export type UpdateFailureStoreResponse = rt.TypeOf<typeof updateFailureStoreResponseRt>;

x-pack/platform/plugins/shared/dataset_quality/common/data_stream_details/types.ts

@@ -27,3 +27,9 @@ export interface IntegrationType {
   areAssetsAvailable: boolean;
   integration?: Integration;
 }
+
+export interface UpdateFailureStoreParams {
+  dataStream: string;
+  failureStoreEnabled: boolean;
+  customRetentionPeriod?: string;
+}

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

@@ -331,6 +331,13 @@ export const overviewPanelDatasetQualityIndicatorFailedDocs = i18n.translate(
   }
 );
 
+export const overviewPanelDatasetQualityIndicatorNoFailureStore = i18n.translate(
+  'xpack.datasetQuality.details.overviewPanel.datasetQuality.noFailureStore',
+  {
+    defaultMessage: 'No failure store',
+  }
+);
+
 export const overviewDegradedFieldsTableLoadingText = i18n.translate(
   'xpack.datasetQuality.details.degradedFieldsTableLoadingText',
   {

x-pack/platform/plugins/shared/dataset_quality/kibana.jsonc

@@ -39,6 +39,7 @@
     "requiredBundles": [
       "charts",
       "discover",
+      "esUiShared",
       "stackAlerts",
     ],
     "extraPublicDirs": [

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

@@ -26,32 +26,46 @@ export function Card({
 }) {
   const { euiTheme } = useEuiTheme();
 
-  return (
+  const style = css`
+    height: 100%;
+    min-width: 300px;
+    border: ${isSelected
+      ? `${euiTheme.border.width.thick} solid ${euiTheme.colors.borderStrongPrimary}`
+      : 'none'};
+    background-color: ${isSelected ? euiTheme.colors.backgroundLightPrimary : 'inherit'};
+  `;
+
+  const dataTestSubject = `datasetQualityDetailsSummaryKpiCard-${title}`;
+
+  const content = (
+    <>
+      <EuiText textAlign="left">{title}</EuiText>
+      <EuiSpacer size="xs" />
+      <EuiText textAlign="left" data-test-subj={`datasetQualityDetailsSummaryKpiValue-${title}`}>
+        <h2>{kpiValue}</h2>
+      </EuiText>
+      <EuiSpacer size="xs" />
+      <EuiText textAlign="left">{footer}</EuiText>
+    </>
+  );
+
+  return onClick ? (
     <EuiButtonEmpty
       isDisabled={isDisabled}
       onClick={onClick}
-      css={css`
-        height: 100%;
-        min-width: 300px;
-        border: ${isSelected
-          ? `${euiTheme.border.width.thick} solid ${euiTheme.colors.borderStrongPrimary}`
-          : 'none'};
-        background-color: ${isSelected ? euiTheme.colors.backgroundLightPrimary : 'inherit'};
-      `}
+      css={style}
       contentProps={{
         css: css`
           justify-content: flex-start;
         `,
       }}
-      data-test-subj={`datasetQualityDetailsSummaryKpiCard-${title}`}
+      data-test-subj={dataTestSubject}
     >
-      <EuiText textAlign="left">{title}</EuiText>
-      <EuiSpacer size="xs" />
-      <EuiText textAlign="left" data-test-subj={`datasetQualityDetailsSummaryKpiValue-${title}`}>
-        <h2>{kpiValue}</h2>
-      </EuiText>
-      <EuiSpacer size="xs" />
-      <EuiText textAlign="left">{footer}</EuiText>
+      {content}
     </EuiButtonEmpty>
+  ) : (
+    <div css={style} data-test-subj={dataTestSubject}>
+      {content}
+    </div>
   );
 }

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

@@ -5,18 +5,19 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiLink } from '@elastic/eui';
-import React from 'react';
+import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import React, { useState } from 'react';
 import { i18n } from '@kbn/i18n';
+import { FailureStoreModal } from '@kbn/failure-store-modal';
 import {
   overviewPanelDatasetQualityIndicatorDegradedDocs,
   overviewPanelDatasetQualityIndicatorFailedDocs,
+  overviewPanelDatasetQualityIndicatorNoFailureStore,
 } from '../../../../../common/translations';
 import { useOverviewSummaryPanel } from '../../../../hooks/use_overview_summary_panel';
 import { useQualityIssuesDocsChart } from '../../../../hooks/use_quality_issues_docs_chart';
 import { useDatasetQualityDetailsState } from '../../../../hooks/use_dataset_quality_details_state';
 import { DatasetQualityIndicator, QualityPercentageIndicator } from '../../../quality_indicator';
-import { useKibanaContextForPlugin } from '../../../../utils/use_kibana';
 import { Card } from './card';
 
 // Allow for lazy loading
@@ -40,20 +41,34 @@ export default function QualitySummaryCards({
   } = useOverviewSummaryPanel();
   const { handleDocsTrendChartChange } = useQualityIssuesDocsChart();
   const {
-    dataStream,
     canUserReadFailureStore,
     hasFailureStore,
     loadingState: { dataStreamSettingsLoading },
+    defaultRetentionPeriod,
+    customRetentionPeriod,
+    updateFailureStore,
   } = useDatasetQualityDetailsState();
 
-  const {
-    services: {
-      share: { url: urlService },
-    },
-  } = useKibanaContextForPlugin();
+  const [isFailureStoreModalOpen, setIsFailureStoreModalOpen] = useState(false);
+
+  const closeModal = () => {
+    setIsFailureStoreModalOpen(false);
+  };
 
-  const locator = urlService.locators.get('INDEX_MANAGEMENT_LOCATOR_ID');
-  const locatorParams = { page: 'data_streams_details', dataStreamName: dataStream } as const;
+  const handleSaveModal = async (data: {
+    failureStoreEnabled: boolean;
+    customRetentionPeriod?: string;
+  }) => {
+    updateFailureStore({
+      failureStoreEnabled: data.failureStoreEnabled,
+      customRetentionPeriod: data.customRetentionPeriod,
+    });
+    closeModal();
+  };
+
+  const onClick = () => {
+    setIsFailureStoreModalOpen(true);
+  };
 
   return (
     <EuiFlexGroup gutterSize="m" direction="column" style={{ height: '100%' }}>
@@ -95,26 +110,38 @@ export default function QualitySummaryCards({
       </EuiFlexItem>
       <EuiFlexItem grow={true}>
         {!dataStreamSettingsLoading && !(hasFailureStore && canUserReadFailureStore) ? (
-          <Card
-            isDisabled={true}
-            title={overviewPanelDatasetQualityIndicatorFailedDocs}
-            kpiValue={i18n.translate('xpack.datasetQuality.noFailureStoreTitle', {
-              defaultMessage: 'No failure store',
-            })}
-            footer={
-              canUserReadFailureStore && (
-                <EuiLink
-                  href={locator?.getRedirectUrl(locatorParams)}
-                  target="_blank"
-                  external={false}
-                >
-                  {i18n.translate('xpack.datasetQuality.enableFailureStore', {
-                    defaultMessage: 'Enable failure store',
-                  })}
-                </EuiLink>
-              )
-            }
-          />
+          <>
+            <Card
+              isDisabled={true}
+              title={overviewPanelDatasetQualityIndicatorNoFailureStore}
+              kpiValue={i18n.translate('xpack.datasetQuality.noFailureStoreTitle', {
+                defaultMessage: 'No failure store',
+              })}
+              footer={
+                canUserReadFailureStore && (
+                  <EuiButtonEmpty
+                    onClick={onClick}
+                    data-test-subj="datasetQualityDetailsEnableFailureStoreButton"
+                  >
+                    {i18n.translate('xpack.datasetQuality.enableFailureStore', {
+                      defaultMessage: 'Enable failure store',
+                    })}
+                  </EuiButtonEmpty>
+                )
+              }
+            />
+            {canUserReadFailureStore && isFailureStoreModalOpen && defaultRetentionPeriod && (
+              <FailureStoreModal
+                onCloseModal={closeModal}
+                onSaveModal={handleSaveModal}
+                failureStoreProps={{
+                  failureStoreEnabled: hasFailureStore,
+                  defaultRetentionPeriod,
+                  customRetentionPeriod,
+                }}
+              />
+            )}
+          </>
         ) : (
           <Card
             isDisabled={false}

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

@@ -160,8 +160,30 @@ export const useDatasetQualityDetailsState = () => {
     [service]
   );
 
+  const updateFailureStore = useCallback(
+    ({
+      failureStoreEnabled,
+      customRetentionPeriod,
+    }: {
+      failureStoreEnabled: boolean;
+      customRetentionPeriod?: string;
+    }) => {
+      service.send({
+        type: 'UPDATE_FAILURE_STORE',
+        data: {
+          ...dataStreamDetails,
+          hasFailureStore: failureStoreEnabled,
+          customRetentionPeriod,
+        },
+      });
+    },
+    [dataStreamDetails, service]
+  );
+
   const hasFailureStore = Boolean(dataStreamDetails?.hasFailureStore);
   const canShowFailureStoreInfo = canUserReadFailureStore && hasFailureStore;
+  const defaultRetentionPeriod = dataStreamDetails?.defaultRetentionPeriod;
+  const customRetentionPeriod = dataStreamDetails?.customRetentionPeriod;
 
   return {
     service,
@@ -180,6 +202,7 @@ export const useDatasetQualityDetailsState = () => {
     timeRange,
     loadingState,
     updateTimeRange,
+    updateFailureStore,
     dataStreamSettings,
     integrationDetails,
     canUserAccessDashboards,
@@ -189,5 +212,7 @@ export const useDatasetQualityDetailsState = () => {
     canShowFailureStoreInfo,
     expandedQualityIssue,
     isQualityIssueFlyoutOpen,
+    defaultRetentionPeriod,
+    customRetentionPeriod,
   };
 };

x-pack/platform/plugins/shared/dataset_quality/public/services/data_stream_details/data_stream_details_client.ts

@@ -16,6 +16,7 @@ import type {
   FailedDocsErrorsResponse,
   IntegrationDashboardsResponse,
   UpdateFieldLimitResponse,
+  UpdateFailureStoreResponse,
 } from '../../../common/api_types';
 import {
   checkAndLoadIntegrationResponseRt,
@@ -29,6 +30,7 @@ import {
   integrationDashboardsRT,
   qualityIssueBaseRT,
   updateFieldLimitResponseRt,
+  updateFailureStoreResponseRt,
 } from '../../../common/api_types';
 import type {
   DataStreamDetails,
@@ -309,4 +311,34 @@ export class DataStreamDetailsClient implements IDataStreamDetailsClient {
         new DatasetQualityError(`Failed to decode rollover response: ${message}"`)
     )(response);
   }
+
+  public async updateFailureStore({
+    dataStream,
+    failureStoreEnabled,
+    customRetentionPeriod,
+  }: {
+    dataStream: string;
+    failureStoreEnabled: boolean;
+    customRetentionPeriod?: string;
+  }): Promise<UpdateFailureStoreResponse> {
+    const response = await this.http
+      .put<UpdateFailureStoreResponse>(
+        `/internal/dataset_quality/data_streams/${dataStream}/update_failure_store`,
+        {
+          body: JSON.stringify({
+            failureStoreEnabled,
+            customRetentionPeriod,
+          }),
+        }
+      )
+      .catch((error) => {
+        throw new DatasetQualityError(`Failed to update failure store": ${error}`, error);
+      });
+
+    return decodeOrThrow(
+      updateFailureStoreResponseRt,
+      (message: string) =>
+        new DatasetQualityError(`Failed to decode update failure store response: ${message}"`)
+    )(response);
+  }
 }

x-pack/platform/plugins/shared/dataset_quality/public/services/data_stream_details/types.ts

@@ -23,6 +23,7 @@ import type {
   IntegrationType,
   CheckAndLoadIntegrationParams,
   UpdateFieldLimitParams,
+  UpdateFailureStoreParams,
 } from '../../../common/data_stream_details/types';
 import type {
   Dashboard,
@@ -32,6 +33,7 @@ import type {
   FailedDocsDetails,
   FailedDocsErrorsResponse,
   UpdateFieldLimitResponse,
+  UpdateFailureStoreResponse,
 } from '../../../common/api_types';
 
 export type DataStreamDetailsServiceSetup = void;
@@ -62,4 +64,5 @@ export interface IDataStreamDetailsClient {
   analyzeDegradedField(params: AnalyzeDegradedFieldsParams): Promise<DegradedFieldAnalysis>;
   setNewFieldLimit(params: UpdateFieldLimitParams): Promise<UpdateFieldLimitResponse>;
   rolloverDataStream(params: { dataStream: string }): Promise<DataStreamRolloverResponse>;
+  updateFailureStore(params: UpdateFailureStoreParams): Promise<UpdateFailureStoreResponse>;
 }

x-pack/platform/plugins/shared/dataset_quality/public/state_machines/dataset_quality_details_controller/notifications.ts

@@ -77,3 +77,20 @@ export const rolloverDataStreamFailedNotifier = (
     text: error.message,
   });
 };
+
+export const updateFailureStoreFailedNotifier = (toasts: IToasts, error: Error) => {
+  toasts.addDanger({
+    title: i18n.translate('xpack.datasetQuality.details.updateFailureStoreFailed', {
+      defaultMessage: "We couldn't update the failure store settings.",
+    }),
+    text: error.message,
+  });
+};
+
+export const updateFailureStoreSuccessNotifier = (toasts: IToasts) => {
+  toasts.addSuccess({
+    title: i18n.translate('xpack.datasetQuality.details.updateFailureStoreSuccess', {
+      defaultMessage: 'Failure store settings saved',
+    }),
+  });
+};