fix: update telegraf cloning to include labels (#3943)

Author: TCL735

cypress/e2e/shared/telegrafs.test.ts

@@ -201,9 +201,39 @@ describe('Collectors', () => {
       })
 
       it('can clone a config', () => {
+        const firstLabel = 'test_label_1'
+        const secondLabel = 'test_label_2'
+
         cy.getByTestID('resource-card').should('have.length', 1)
-        cy.getByTestID('context-menu-telegraf').click({force: true})
+
+        // create two labels
+        cy.get('button.cf-button[title="Add labels"]').click()
+        cy.getByTestID('inline-labels--popover--dialog').should('be.visible')
+        cy.getByTestID('inline-labels--popover-field').type(
+          `${firstLabel}{enter}`
+        )
+        cy.getByTestID('overlay--container').should('be.visible')
+        cy.getByTestID('create-label-form--submit').click()
+
+        cy.getByTestID('overlay--container').should('not.exist')
+        cy.get('button.cf-button[title="Add labels"]').click()
+        cy.getByTestID('inline-labels--popover--dialog').should('be.visible')
+        cy.getByTestID('inline-labels--popover-field').type(
+          `${secondLabel}{enter}`
+        )
+        cy.getByTestID('overlay--container').should('be.visible')
+        cy.getByTestID('create-label-form--submit').click()
+
+        // ensure the two labels are present before cloning
+        cy.getByTestID('overlay--container').should('not.exist')
+        cy.getByTestID(`label--pill ${firstLabel}`).should('be.visible')
+        cy.getByTestID(`label--pill ${secondLabel}`).should('be.visible')
+
+        // clone the telegraf
+        cy.getByTestID('context-menu-telegraf').click()
         cy.getByTestID('context-clone-telegraf').click()
+        cy.getByTestID(`label--pill ${firstLabel}`).should('have.length', 2)
+        cy.getByTestID(`label--pill ${secondLabel}`).should('have.length', 2)
         cy.getByTestID('resource-card').should('have.length', 2)
         cy.getByTestID('collector-card--name').then(el => {
           expect(el[1].innerText).to.equal('New Config (clone 1)')

src/shared/copy/notifications.ts

@@ -984,6 +984,11 @@ export const telegrafUpdateFailed = (telegrafName: string): Notification => ({
   message: `Failed to update telegraf: "${telegrafName}"`,
 })
 
+export const cloneTelegrafSuccess = (): Notification => ({
+  ...defaultSuccessNotification,
+  message: `Telegraf configuration was cloned successfully`,
+})
+
 export const addTelegrafLabelFailed = (): Notification => ({
   ...defaultErrorNotification,
   message: `Failed to add label to telegraf config`,

src/telegrafs/actions/thunks.ts

@@ -17,12 +17,14 @@ import {
 
 // Constants
 import {
-  telegrafGetFailed,
-  telegrafCreateFailed,
-  telegrafUpdateFailed,
-  telegrafDeleteFailed,
   addTelegrafLabelFailed,
+  cloneTelegrafSuccess,
+  getTelegrafConfigFailed,
   removeTelegrafLabelFailed,
+  telegrafCreateFailed,
+  telegrafDeleteFailed,
+  telegrafGetFailed,
+  telegrafUpdateFailed,
 } from 'src/shared/copy/notifications'
 
 // Utils
@@ -108,6 +110,60 @@ export const createTelegraf = (telegraf: Telegraf) => async (
   }
 }
 
+const cloneTelegrafLabels = (
+  sourceTelegraf: Telegraf,
+  destinationTelegraf: Telegraf
+) => async (dispatch: Dispatch<Action>) => {
+  try {
+    const pendingLabels = sourceTelegraf.labels.map(labelID =>
+      postTelegrafsLabel({
+        telegrafID: destinationTelegraf.id,
+        data: {labelID},
+      })
+    )
+
+    const mappedLabels = await Promise.all(pendingLabels)
+
+    if (
+      mappedLabels.length &&
+      mappedLabels.some(label => label.status !== 201)
+    ) {
+      throw new Error(
+        'An error occurred cloning the labels for this telegraf config'
+      )
+    }
+    dispatch(notify(cloneTelegrafSuccess()))
+  } catch {
+    dispatch(notify(addTelegrafLabelFailed()))
+  }
+}
+
+export const cloneTelegraf = (telegraf: Telegraf) => async (
+  dispatch: Dispatch<Action>
+) => {
+  let clonedTelegraf
+
+  // Step 1: create a new telegraf
+  try {
+    const response = await postTelegraf({data: telegraf})
+
+    if (response.status !== 201) {
+      throw new Error(response.data.message)
+    }
+
+    clonedTelegraf = response.data
+  } catch (error) {
+    console.error(error)
+    dispatch(notify(telegrafCreateFailed()))
+  }
+
+  // Step 2: clone the labels
+  cloneTelegrafLabels(telegraf, clonedTelegraf)(dispatch)
+
+  // Step 3: refresh the cloned telegraf in the UI to show the labels
+  refreshTelegraf(clonedTelegraf)(dispatch)
+}
+
 export const updateTelegraf = (telegraf: Telegraf) => async (
   dispatch: Dispatch<Action>
 ) => {
@@ -249,3 +305,29 @@ export const getTelegraf = (telegrafConfigID: string) => async () => {
     throw error
   }
 }
+
+// adds a telegraf with its latest properties to the state's resources
+export const refreshTelegraf = (telegraf: Telegraf) => async (
+  dispatch: Dispatch<Action>
+) => {
+  try {
+    const response = await apiGetTelegraf({
+      telegrafID: telegraf.id,
+      headers: {Accept: 'application/json'},
+    })
+
+    if (response.status !== 200) {
+      throw new Error(response.data.message)
+    }
+
+    const refreshedTelegraf = response.data
+    const normTelegraf = normalize<Telegraf, TelegrafEntities, string>(
+      refreshedTelegraf,
+      telegrafSchema
+    )
+    dispatch(addTelegraf(normTelegraf))
+  } catch (error) {
+    console.error(error)
+    dispatch(notify(getTelegrafConfigFailed()))
+  }
+}

src/telegrafs/components/CollectorCard.tsx

@@ -25,7 +25,7 @@ import {
   removeTelegrafLabelAsync,
 } from 'src/telegrafs/actions/thunks'
 
-import {createTelegraf} from 'src/telegrafs/actions/thunks'
+import {cloneTelegraf} from 'src/telegrafs/actions/thunks'
 // Selectors
 import {getOrg} from 'src/organizations/selectors'
 
@@ -187,7 +187,7 @@ class CollectorRow extends PureComponent<
     const allTelegrafNames = Object.values(this.props.telegrafs).map(
       t => t.name
     )
-    this.props.onCloneTelegraf({
+    this.props.cloneTelegraf({
       ...this.props.collector,
       name: incrementCloneName(allTelegrafNames, this.props.collector.name),
     })
@@ -204,7 +204,7 @@ const mstp = (state: AppState) => {
 }
 
 const mdtp = {
-  onCloneTelegraf: createTelegraf,
+  cloneTelegraf,
   onAddLabel: addTelegrafLabelAsync,
   onRemoveLabel: removeTelegrafLabelAsync,
 }