+
+
+ {!hasSlosAndHasPermissions ? (
+ errors
+ ) : (
+ <>
+
+ {i18n.translate('xpack.observability.slo.slosOutdatedDefinitions.description', {
+ defaultMessage:
+ 'The following SLOs are from a previous version and need to either be reset to upgrade to the latest version OR deleted and removed from the system. When you reset the SLO, the transform will be updated to the latest version and the historical data will be regenerated from the source data.',
+ })}
+
+
+
+
+
+
+ {!isLoading && total === 0 && }
+ {!isLoading &&
+ total > 0 &&
+ data &&
+ data.results.map((slo) => (
+
+ ))}
+
+
+ {!isLoading && data && (
+
+ )}
+
+ )}
+
+ );
+}
diff --git a/x-pack/plugins/observability/public/pages/slo_outdated_definitions/outdated_slo.tsx b/x-pack/plugins/observability/public/pages/slo_outdated_definitions/outdated_slo.tsx
new file mode 100644
index 0000000000000..f8f5cfeb46848
--- /dev/null
+++ b/x-pack/plugins/observability/public/pages/slo_outdated_definitions/outdated_slo.tsx
@@ -0,0 +1,124 @@
+/*
+ * 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, { useState } from 'react';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText, EuiButton } from '@elastic/eui';
+import { SLOResponse } from '@kbn/slo-schema';
+import { SloDeleteConfirmationModal } from '../../components/slo/delete_confirmation_modal/slo_delete_confirmation_modal';
+import { SloTimeWindowBadge } from '../slos/components/badges/slo_time_window_badge';
+import { SloIndicatorTypeBadge } from '../slos/components/badges/slo_indicator_type_badge';
+import { useDeleteSlo } from '../../hooks/slo/use_delete_slo';
+import { useResetSlo } from '../../hooks/slo/use_reset_slo';
+import { SloResetConfirmationModal } from '../../components/slo/reset_confirmation_modal/slo_reset_confirmation_modal';
+
+interface OutdatedSloProps {
+ slo: SLOResponse;
+ onReset: () => void;
+ onDelete: () => void;
+}
+
+export function OutdatedSlo({ slo, onReset, onDelete }: OutdatedSloProps) {
+ const { mutateAsync: resetSlo, isLoading: isResetLoading } = useResetSlo();
+ const { mutateAsync: deleteSlo, isLoading: isDeleteLoading } = useDeleteSlo();
+ const [isDeleteConfirmationModalOpen, setDeleteConfirmationModalOpen] = useState(false);
+ const [isResetConfirmationModalOpen, setResetConfirmationModalOpen] = useState(false);
+
+ const handleDelete = () => {
+ setDeleteConfirmationModalOpen(true);
+ };
+
+ const handleDeleteConfirm = async () => {
+ setDeleteConfirmationModalOpen(false);
+ await deleteSlo({ id: slo.id, name: slo.name });
+ onDelete();
+ };
+
+ const handleDeleteCancel = () => {
+ setDeleteConfirmationModalOpen(false);
+ };
+
+ const handleReset = () => {
+ setResetConfirmationModalOpen(true);
+ };
+
+ const handleResetConfirm = async () => {
+ setResetConfirmationModalOpen(false);
+ await resetSlo({ id: slo.id, name: slo.name });
+ onReset();
+ };
+
+ const handleResetCancel = () => {
+ setResetConfirmationModalOpen(false);
+ };
+ return (
+