Add SLO cloning functionality

elastic · Jan 31, 2023 · 285b98c · 285b98c
1 parent 7006c7a
commit 285b98c
Show file tree

Hide file tree

Showing 7 changed files with 216 additions and 27 deletions.
diff --git a/x-pack/plugins/observability/public/data/slo/slo.ts b/x-pack/plugins/observability/public/data/slo/slo.ts
@@ -92,7 +92,7 @@ export const sloList: FindSLOResponse = {
     },
     {
       ...baseSlo,
-      id: 'c0f8d669-9177-4706-9098-f397a88173a6',
+      id: 'c0f8d669-9277-4706-9098-f397a88173a6',
       summary: buildViolatedSummary(),
       timeWindow: buildRollingTimeWindow({ duration: '7d' }),
     },

diff --git a/x-pack/plugins/observability/public/hooks/slo/use_create_slo.ts b/x-pack/plugins/observability/public/hooks/slo/use_create_slo.ts
@@ -41,6 +41,9 @@ export function useCreateOrUpdateSlo(): UseCreateOrUpdateSlo {
         setSuccess(true);
       } catch (e) {
         setError(e);
+      } finally {
+        setSuccess(false);
+        setLoading(false);
       }
     },
     [http]
@@ -58,6 +61,9 @@ export function useCreateOrUpdateSlo(): UseCreateOrUpdateSlo {
         setSuccess(true);
       } catch (e) {
         setError(e);
+      } finally {
+        setSuccess(false);
+        setLoading(false);
       }
     },
     [http]

diff --git a/x-pack/plugins/observability/public/pages/slos/components/slo_delete_confirmation_modal.tsx b/x-pack/plugins/observability/public/pages/slos/components/slo_delete_confirmation_modal.tsx
@@ -15,7 +15,7 @@ import { useDeleteSlo } from '../../../hooks/slo/use_delete_slo';
 export interface SloDeleteConfirmationModalProps {
   slo: SLOWithSummaryResponse;
   onCancel: () => void;
-  onDeleting: () => void;
+  onDeleting: (isDeleting: boolean) => void;
   onDeleted: () => void;
 }
 
@@ -34,16 +34,18 @@ export function SloDeleteConfirmationModal({
   const { deleteSlo, success, loading, error } = useDeleteSlo();
 
   if (loading) {
-    onDeleting();
+    onDeleting(true);
   }
 
   if (success) {
     toasts.addSuccess(getDeleteSuccesfulMessage(name));
+    onDeleting(false);
     onDeleted();
   }
 
   if (error) {
     toasts.addDanger(getDeleteFailMessage(name));
+    onDeleting(false);
   }
 
   const handleConfirm = () => {

diff --git a/x-pack/plugins/observability/public/pages/slos/components/slo_list.tsx b/x-pack/plugins/observability/public/pages/slos/components/slo_list.tsx
@@ -24,11 +24,12 @@ export function SloList() {
   const [sort, setSort] = useState<SortType>('name');
   const [indicatorTypeFilter, setIndicatorTypeFilter] = useState<FilterType[]>([]);
 
-  const [deleting, setIsDeleting] = useState(false);
+  const [isCloning, setIsCloning] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
   const [shouldReload, setShouldReload] = useState(false);
 
   const {
-    loading,
+    loading: isLoadingSloList,
     error,
     sloList: { results: sloList = [], total, perPage },
   } = useFetchSloList({
@@ -42,16 +43,21 @@ export function SloList() {
   useEffect(() => {
     if (shouldReload) {
       setShouldReload(false);
+      setIsCloning(false);
       setIsDeleting(false);
     }
   }, [shouldReload]);
 
-  const handleDeleted = () => {
-    setShouldReload(true);
+  const handleCloning = (bla: boolean) => {
+    setIsCloning(bla);
+  };
+
+  const handleDeleting = (bla: boolean) => {
+    setIsDeleting(bla);
   };
 
-  const handleDeleting = () => {
-    setIsDeleting(true);
+  const handleClonedOrDeleted = () => {
+    setShouldReload(true);
   };
 
   const handlePageClick = (pageNumber: number) => {
@@ -79,7 +85,7 @@ export function SloList() {
     <EuiFlexGroup direction="column" gutterSize="m" data-test-subj="sloList">
       <EuiFlexItem grow>
         <SloListSearchFilterSortBar
-          loading={loading || deleting}
+          loading={isLoadingSloList || isCloning || isDeleting}
           onChangeQuery={handleChangeQuery}
           onChangeSort={handleChangeSort}
           onChangeIndicatorTypeFilter={handleChangeIndicatorTypeFilter}
@@ -89,10 +95,12 @@ export function SloList() {
       <EuiFlexItem>
         <SloListItems
           sloList={sloList}
-          loading={loading}
+          loading={isLoadingSloList}
           error={error}
+          onCloned={handleClonedOrDeleted}
+          onCloning={handleCloning}
           onDeleting={handleDeleting}
-          onDeleted={handleDeleted}
+          onDeleted={handleClonedOrDeleted}
         />
       </EuiFlexItem>
 

diff --git a/x-pack/plugins/observability/public/pages/slos/components/slo_list_item.tsx b/x-pack/plugins/observability/public/pages/slos/components/slo_list_item.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   EuiButtonIcon,
   EuiContextMenuItem,
@@ -20,23 +20,32 @@ import { i18n } from '@kbn/i18n';
 
 import { HistoricalSummaryResponse, SLOWithSummaryResponse } from '@kbn/slo-schema';
 import { useKibana } from '../../../utils/kibana_react';
+import { useCreateOrUpdateSlo } from '../../../hooks/slo/use_create_slo';
 import { SloSummary } from './slo_summary';
 import { SloDeleteConfirmationModal } from './slo_delete_confirmation_modal';
 import { SloBadges } from './badges/slo_badges';
+import {
+  transformSloResponseToCreateSloInput,
+  transformValuesToCreateSLOInput,
+} from '../../slo_edit/helpers/process_slo_form_values';
 import { paths } from '../../../config';
 
 export interface SloListItemProps {
   slo: SLOWithSummaryResponse;
   historicalSummary?: HistoricalSummaryResponse[];
   historicalSummaryLoading: boolean;
+  onCloned: () => void;
+  onCloning: (isCloning: boolean) => void;
   onDeleted: () => void;
-  onDeleting: () => void;
+  onDeleting: (isDeleting: boolean) => void;
 }
 
 export function SloListItem({
   slo,
   historicalSummary = [],
   historicalSummaryLoading,
+  onCloned,
+  onCloning,
   onDeleted,
   onDeleting,
 }: SloListItemProps) {
@@ -45,6 +54,8 @@ export function SloListItem({
     http: { basePath },
   } = useKibana().services;
 
+  const { createSlo, loading: isCloning, success: isCloned } = useCreateOrUpdateSlo();
+
   const [isActionsPopoverOpen, setIsActionsPopoverOpen] = useState(false);
   const [isDeleteConfirmationModalOpen, setDeleteConfirmationModalOpen] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
@@ -57,6 +68,15 @@ export function SloListItem({
     navigateToUrl(basePath.prepend(paths.observability.sloEdit(slo.id)));
   };
 
+  const handleClone = () => {
+    const newSlo = transformValuesToCreateSLOInput(
+      transformSloResponseToCreateSloInput({ ...slo, name: `[Copy] ${slo.name}` })!
+    );
+
+    createSlo(newSlo);
+    setIsActionsPopoverOpen(false);
+  };
+
   const handleDelete = () => {
     setDeleteConfirmationModalOpen(true);
     setIsDeleting(true);
@@ -73,12 +93,21 @@ export function SloListItem({
     onDeleted();
   };
 
+  useEffect(() => {
+    onCloning(isCloning);
+
+    if (isCloned) {
+      onCloned();
+    }
+  }, [isCloned, isCloning, onCloned, onCloning]);
+
   return (
     <EuiPanel
+      data-test-subj="sloItem"
       hasBorder
       hasShadow={false}
-      color={isDeleting ? 'subdued' : undefined}
-      style={{ opacity: isDeleting ? 0.3 : 1, transition: 'opacity 0.15s ease-in' }}
+      color={isCloning || isDeleting ? 'subdued' : undefined}
+      style={{ opacity: isCloning || isDeleting ? 0.3 : 1, transition: 'opacity 0.15s ease-in' }}
     >
       <EuiFlexGroup responsive={false} alignItems="center">
         {/* CONTENT */}
@@ -124,12 +153,32 @@ export function SloListItem({
             <EuiContextMenuPanel
               size="s"
               items={[
-                <EuiContextMenuItem key="edit" icon="pencil" onClick={handleEdit}>
+                <EuiContextMenuItem
+                  key="edit"
+                  icon="pencil"
+                  onClick={handleEdit}
+                  data-test-subj="sloActionsEdit"
+                >
                   {i18n.translate('xpack.observability.slos.slo.item.actions.edit', {
                     defaultMessage: 'Edit',
                   })}
                 </EuiContextMenuItem>,
-                <EuiContextMenuItem key="delete" icon="trash" onClick={handleDelete}>
+                <EuiContextMenuItem
+                  key="clone"
+                  icon="copy"
+                  onClick={handleClone}
+                  data-test-subj="sloActionsClone"
+                >
+                  {i18n.translate('xpack.observability.slos.slo.item.actions.clone', {
+                    defaultMessage: 'Clone',
+                  })}
+                </EuiContextMenuItem>,
+                <EuiContextMenuItem
+                  key="delete"
+                  icon="trash"
+                  onClick={handleDelete}
+                  data-test-subj="sloActionsDelete"
+                >
                   {i18n.translate('xpack.observability.slos.slo.item.actions.delete', {
                     defaultMessage: 'Delete',
                   })}

diff --git a/x-pack/plugins/observability/public/pages/slos/components/slo_list_items.tsx b/x-pack/plugins/observability/public/pages/slos/components/slo_list_items.tsx
@@ -17,11 +17,21 @@ export interface Props {
   sloList: SLOWithSummaryResponse[];
   loading: boolean;
   error: boolean;
+  onCloned: () => void;
+  onCloning: (isCloning: boolean) => void;
   onDeleted: () => void;
-  onDeleting: () => void;
+  onDeleting: (isDeleting: boolean) => void;
 }
 
-export function SloListItems({ sloList, loading, error, onDeleted, onDeleting }: Props) {
+export function SloListItems({
+  sloList,
+  loading,
+  error,
+  onCloned,
+  onCloning,
+  onDeleted,
+  onDeleting,
+}: Props) {
   const [sloIds, setSloIds] = useState<string[]>([]);
   useEffect(() => {
     setSloIds(sloList.map((slo) => slo.id));
@@ -45,6 +55,8 @@ export function SloListItems({ sloList, loading, error, onDeleted, onDeleting }:
             slo={slo}
             historicalSummary={historicalSummaryBySlo[slo.id]}
             historicalSummaryLoading={historicalSummaryLoading}
+            onCloned={onCloned}
+            onCloning={onCloning}
             onDeleted={onDeleted}
             onDeleting={onDeleting}
           />