chore(slo): link to SLO details page from create and update toast (el…

…astic#211475)
kdelemme · Feb 18, 2025 · 729287f · 729287f
1 parent 169230e
commit 729287f
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 15 deletions.
diff --git a/x-pack/platform/plugins/private/translations/translations/fr-FR.json b/x-pack/platform/plugins/private/translations/translations/fr-FR.json
@@ -40320,7 +40320,6 @@
     "xpack.slo.slo.activeAlertsBadge.ariaLabel": "badge alertes actives",
     "xpack.slo.slo.activeAlertsBadge.label": "{count, plural, one {# alerte} other {# alertes}}",
     "xpack.slo.slo.activeAlertsBadge.tooltip": "{count, plural, one {# alerte de taux d'avancement} other {# alertes de taux d'avancement}}, cliquez pour afficher.",
-    "xpack.slo.slo.create.successNotification": "Le SLO a bien été créé : \"{name}\". {editSLO}",
     "xpack.slo.slo.delete.errorNotification": "Impossible de supprimer {name}",
     "xpack.slo.slo.delete.successNotification": "{name} supprimé",
     "xpack.slo.slo.deleteInstance.successNotification": "Suppression de {name} [instance : {instanceId}] réussie",
@@ -40679,7 +40678,6 @@
     "xpack.slo.timeWindowBadge.clickToFilter": "Cliquer pour filtrer par SLO {timeWindow}",
     "xpack.slo.toggleSLOView.euiButtonGroup.sloView": "Affichage SLO",
     "xpack.slo.update.errorNotification": "Un problème est survenu lors de la mise à jour de {name}",
-    "xpack.slo.update.successNotification": "Mise à jour de {name} réussie",
     "xpack.slo.useCreateSlo.editSLOLinkLabel": "Modifier le SLO",
     "xpack.slo.viewFormattedResourcesConfigsButtonLabel": "Voir les configurations des ressources formatées pour les SLO",
     "xpack.slo.wideChart.euiIcon.noResultsLabel": "aucun résultat",

diff --git a/x-pack/platform/plugins/private/translations/translations/ja-JP.json b/x-pack/platform/plugins/private/translations/translations/ja-JP.json
@@ -40178,7 +40178,6 @@
     "xpack.slo.slo.activeAlertsBadge.ariaLabel": "アクティブアラートバッジ",
     "xpack.slo.slo.activeAlertsBadge.label": "{count, plural, other {# 件のアラート}}",
     "xpack.slo.slo.activeAlertsBadge.tooltip": "{count, plural, other {#件のバーンレートアラート}}。表示するには、クリックしてください。",
-    "xpack.slo.slo.create.successNotification": "SLOが正常に作成されました：\"{name}\"。{editSLO}",
     "xpack.slo.slo.delete.errorNotification": "{name}を削除できませんでした",
     "xpack.slo.slo.delete.successNotification": "{name}を削除しました",
     "xpack.slo.slo.deleteInstance.successNotification": "{name} [インスタンス：{instanceId}]が削除されました",
@@ -40536,7 +40535,6 @@
     "xpack.slo.timeWindowBadge.clickToFilter": "クリックすると、{timeWindow} SLOでフィルタリングします",
     "xpack.slo.toggleSLOView.euiButtonGroup.sloView": "SLOビュー",
     "xpack.slo.update.errorNotification": "{name}の更新中にエラーが発生しました",
-    "xpack.slo.update.successNotification": "正常に\"{name}\"を更新しました",
     "xpack.slo.useCreateSlo.editSLOLinkLabel": "SLOの編集",
     "xpack.slo.viewFormattedResourcesConfigsButtonLabel": "SLOの書式設定されたリソース構成を表示",
     "xpack.slo.wideChart.euiIcon.noResultsLabel": "結果なし",

diff --git a/x-pack/platform/plugins/private/translations/translations/zh-CN.json b/x-pack/platform/plugins/private/translations/translations/zh-CN.json
@@ -39960,7 +39960,6 @@
     "xpack.slo.timeWindowBadge.clickToFilter": "单击以按 {timeWindow} SLO 筛选",
     "xpack.slo.toggleSLOView.euiButtonGroup.sloView": "SLO 视图",
     "xpack.slo.update.errorNotification": "更新 {name} 时出现问题",
-    "xpack.slo.update.successNotification": "已成功更新 {name}",
     "xpack.slo.useCreateSlo.editSLOLinkLabel": "编辑 SLO",
     "xpack.slo.viewFormattedResourcesConfigsButtonLabel": "查看 SLO 的格式化资源配置",
     "xpack.slo.wideChart.euiIcon.noResultsLabel": "无结果",

diff --git a/x-pack/solutions/observability/plugins/slo/public/hooks/use_create_slo.tsx b/x-pack/solutions/observability/plugins/slo/public/hooks/use_create_slo.tsx
@@ -8,7 +8,12 @@
 import React from 'react';
 import { IHttpFetchError, ResponseErrorBody } from '@kbn/core/public';
 import { encode } from '@kbn/rison';
-import type { CreateSLOInput, CreateSLOResponse, FindSLOResponse } from '@kbn/slo-schema';
+import {
+  ALL_VALUE,
+  type CreateSLOInput,
+  type CreateSLOResponse,
+  type FindSLOResponse,
+} from '@kbn/slo-schema';
 import { QueryKey, useMutation, useQueryClient } from '@tanstack/react-query';
 import { EuiLink } from '@elastic/eui';
 import { toMountPoint } from '@kbn/react-kibana-mount';
@@ -49,14 +54,15 @@ export function useCreateSlo() {
         queryClient.invalidateQueries({ queryKey: sloKeys.lists(), exact: false });
 
         const sloEditUrl = http.basePath.prepend(paths.sloEdit(data.id));
+        const sloViewUrl = http.basePath.prepend(paths.sloDetails(data.id, ALL_VALUE));
 
         toasts.addSuccess(
           {
             title: toMountPoint(
               <RedirectAppLinks coreStart={services} data-test-subj="observabilityMainContainer">
                 <FormattedMessage
-                  id="xpack.slo.slo.create.successNotification"
-                  defaultMessage='Successfully created SLO: "{name}". {editSLO}'
+                  id="xpack.slo.create.successNotification"
+                  defaultMessage="Successfully created {name}. {editSLO} or {viewSLO}"
                   values={{
                     name: slo.name,
                     editSLO: (
@@ -66,6 +72,13 @@ export function useCreateSlo() {
                         })}
                       </EuiLink>
                     ),
+                    viewSLO: (
+                      <EuiLink data-test-subj="o11yUseCreateSloViewSloLink" href={sloViewUrl}>
+                        {i18n.translate('xpack.slo.useCreateSlo.viewSLOLinkLabel', {
+                          defaultMessage: 'View SLO',
+                        })}
+                      </EuiLink>
+                    ),
                   }}
                 />
               </RedirectAppLinks>,

diff --git a/...lugins/slo/public/hooks/use_update_slo.ts → ...ugins/slo/public/hooks/use_update_slo.tsx b/...lugins/slo/public/hooks/use_update_slo.ts → ...ugins/slo/public/hooks/use_update_slo.tsx
@@ -5,25 +5,38 @@
  * 2.0.
  */
 
+import { EuiLink } from '@elastic/eui';
 import { IHttpFetchError, ResponseErrorBody } from '@kbn/core/public';
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { toMountPoint } from '@kbn/react-kibana-mount';
 import { encode } from '@kbn/rison';
-import type { FindSLOResponse, UpdateSLOInput, UpdateSLOResponse } from '@kbn/slo-schema';
+import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
+import {
+  ALL_VALUE,
+  type FindSLOResponse,
+  type UpdateSLOInput,
+  type UpdateSLOResponse,
+} from '@kbn/slo-schema';
 import { QueryKey, useMutation, useQueryClient } from '@tanstack/react-query';
+import React from 'react';
 import { paths } from '../../common/locators/paths';
-import { useKibana } from './use_kibana';
 import { sloKeys } from './query_key_factory';
+import { useKibana } from './use_kibana';
 import { usePluginContext } from './use_plugin_context';
 
 type ServerError = IHttpFetchError<ResponseErrorBody>;
 
 export function useUpdateSlo() {
   const {
+    i18n: i18nStart,
+    theme,
     application: { navigateToUrl },
     http,
     notifications: { toasts },
   } = useKibana().services;
   const queryClient = useQueryClient();
+  const services = useKibana().services;
   const { sloClient } = usePluginContext();
 
   return useMutation<
@@ -39,14 +52,39 @@ export function useUpdateSlo() {
       });
     },
     {
-      onSuccess: (_data, { slo: { name } }) => {
+      onSuccess: (data, { slo: { name } }) => {
         queryClient.invalidateQueries({ queryKey: sloKeys.lists(), exact: false });
 
+        const sloViewUrl = http.basePath.prepend(paths.sloDetails(data.id, ALL_VALUE));
+
         toasts.addSuccess(
-          i18n.translate('xpack.slo.update.successNotification', {
-            defaultMessage: 'Successfully updated {name}',
-            values: { name },
-          })
+          {
+            title: toMountPoint(
+              <RedirectAppLinks coreStart={services} data-test-subj="observabilityMainContainer">
+                <FormattedMessage
+                  id="xpack.slo.update.successNotification"
+                  defaultMessage="Successfully updated {name}. {viewSLO}"
+                  values={{
+                    name,
+                    viewSLO: (
+                      <EuiLink data-test-subj="o11yUseUpdateSloViewSloLink" href={sloViewUrl}>
+                        {i18n.translate('xpack.slo.useUpdateSlo.viewSLOLinkLabel', {
+                          defaultMessage: 'View SLO',
+                        })}
+                      </EuiLink>
+                    ),
+                  }}
+                />
+              </RedirectAppLinks>,
+              {
+                i18n: i18nStart,
+                theme,
+              }
+            ),
+          },
+          {
+            toastLifeTimeMs: 30000,
+          }
         );
       },
       onError: (error, { slo, sloId }, context) => {