Merge pull request #3518 from RedisInsight/fe/feature/RI-5750_update_rdi

#RI-5750 - update get template endpoint

Author: AmirAllayarovSofteq

redisinsight/ui/src/constants/api.ts

@@ -148,7 +148,8 @@ enum ApiEndpoints {
   RDI_DEPLOY_PIPELINE = 'pipeline/deploy',
   RDI_TEST_CONNECTIONS = 'pipeline/test-connections',
   RDI_PIPELINE_STRATEGIES = 'pipeline/strategies',
-  RDI_PIPELINE_TEMPLATE = 'pipeline/template',
+  RDI_JOB_TEMPLATE = 'pipeline/job/template',
+  RDI_CONFIG_TEMPLATE = 'pipeline/config/template',
   RDI_PIPELINE_JOB_FUNCTIONS = 'pipeline/job-functions',
   RDI_STATISTICS = 'statistics',
   RDI_PIPELINE_STATUS = 'pipeline/status',

redisinsight/ui/src/pages/rdi/pipeline-management/components/template-form/TemplateForm.tsx

@@ -13,7 +13,12 @@ import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
 import cx from 'classnames'
 
-import { fetchPipelineStrategies, fetchPipelineTemplate, rdiPipelineStrategiesSelector } from 'uiSrc/slices/rdi/pipeline'
+import {
+  fetchPipelineStrategies,
+  fetchJobTemplate,
+  fetchConfigTemplate,
+  rdiPipelineStrategiesSelector,
+} from 'uiSrc/slices/rdi/pipeline'
 import { RdiPipelineTabs } from 'uiSrc/slices/interfaces/rdi'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { NO_TEMPLATE_VALUE, NO_OPTIONS, INGEST_OPTION } from './constants'
@@ -69,11 +74,12 @@ const TemplateForm = (props: Props) => {
   }
 
   const handleApply = () => {
-    const values = source === RdiPipelineTabs.Config
-      ? { dbType: selectedDbType, pipelineType: selectedPipelineType }
-      : { pipelineType: selectedPipelineType }
-
-    dispatch(fetchPipelineTemplate(rdiInstanceId, values, onSuccess))
+    if (source === RdiPipelineTabs.Config) {
+      dispatch(fetchConfigTemplate(rdiInstanceId, selectedPipelineType, selectedDbType, onSuccess))
+    }
+    if (source === RdiPipelineTabs.Jobs) {
+      dispatch(fetchJobTemplate(rdiInstanceId, selectedPipelineType, onSuccess))
+    }
     sendEventTelemetry({
       event: TelemetryEvent.RDI_TEMPLATE_CLICKED,
       eventData: {

redisinsight/ui/src/slices/interfaces/rdi.ts

@@ -52,12 +52,12 @@ export interface IRdiPipelineStrategies {
 
 export interface IConnections {
   [key: string]: {
-    host: string;
-    port: number;
-    status: string;
-    type: string;
-    database: string;
-    user: string;
+    host: string
+    port: number
+    status: string
+    type: string
+    database: string
+    user: string
   }
 }
 
@@ -209,31 +209,31 @@ export enum TestConnectionStatus {
 }
 
 interface IErrorDetail {
-  code: string;
-  message: string;
+  code: string
+  message: string
 }
 
-interface ISourceDetail {
-  status: TestConnectionStatus;
-  error?: IErrorDetail;
+interface ITargetDetail {
+  status: TestConnectionStatus
+  error?: IErrorDetail
 }
 
-export interface ISources {
-  [key: string]: ISourceDetail;
+export interface ITargets {
+  [key: string]: ITargetDetail
 }
 
 export interface TestConnectionsResponse {
-  sources: ISources
+  targets: ITargets
 }
 
 export interface IRdiConnectionResult {
-  target: string;
-  error?: string;
+  target: string
+  error?: string
 }
 
 export interface TransformResult {
-  success: IRdiConnectionResult[];
-  fail: IRdiConnectionResult[];
+  success: IRdiConnectionResult[]
+  fail: IRdiConnectionResult[]
 }
 
 export interface IStateRdiTestConnections {

redisinsight/ui/src/slices/rdi/pipeline.ts

@@ -232,18 +232,42 @@ export function fetchPipelineStrategies(
   }
 }
 
-export function fetchPipelineTemplate(
+export function fetchJobTemplate(
   rdiInstanceId: string,
-  // TODO add interface
-  options: any,
+  pipelineType: string,
   onSuccessAction?: (template: string) => void,
   onFailAction?: () => void,
 ) {
   return async (dispatch: AppDispatch) => {
     try {
       const { status, data } = await apiService.get(
-        getRdiUrl(rdiInstanceId, ApiEndpoints.RDI_PIPELINE_TEMPLATE),
-        { params: options },
+        getRdiUrl(rdiInstanceId, ApiEndpoints.RDI_JOB_TEMPLATE, pipelineType),
+      )
+
+      if (isStatusSuccessful(status)) {
+        onSuccessAction?.(data.template)
+      }
+    } catch (_err) {
+      const error = _err as AxiosError
+      const parsedError = getAxiosError(error as EnhancedAxiosError)
+
+      dispatch(addErrorNotification(parsedError))
+      onFailAction?.()
+    }
+  }
+}
+
+export function fetchConfigTemplate(
+  rdiInstanceId: string,
+  pipelineType: string,
+  dbType: string,
+  onSuccessAction?: (template: string) => void,
+  onFailAction?: () => void,
+) {
+  return async (dispatch: AppDispatch) => {
+    try {
+      const { status, data } = await apiService.get(
+        getRdiUrl(rdiInstanceId, ApiEndpoints.RDI_CONFIG_TEMPLATE, pipelineType, dbType),
       )
 
       if (isStatusSuccessful(status)) {

redisinsight/ui/src/slices/rdi/testConnections.ts

@@ -88,7 +88,7 @@ export function testConnectionsAction(
       testConnectionsController = null
 
       if (isStatusSuccessful(status)) {
-        dispatch(testConnectionsSuccess(transformConnectionResults(data?.sources)))
+        dispatch(testConnectionsSuccess(transformConnectionResults(data?.targets)))
         onSuccessAction?.()
       }
     } catch (_err) {

redisinsight/ui/src/slices/tests/rdi/pipeline.spec.ts

@@ -26,7 +26,8 @@ import reducer, {
   deployPipelineAction,
   fetchRdiPipelineSchema,
   fetchPipelineStrategies,
-  fetchPipelineTemplate,
+  fetchConfigTemplate,
+  fetchJobTemplate,
   setJobFunctions,
   fetchRdiPipelineJobFunctions,
   getPipelineStatusAction,
@@ -387,7 +388,6 @@ describe('rdi pipe slice', () => {
     })
   })
 
-
   describe('getPipelineStatus', () => {
     it('should set loading = true', () => {
       // Arrange
@@ -689,9 +689,34 @@ describe('rdi pipe slice', () => {
       })
     })
 
-    describe('fetchPipelineTemplate', () => {
+    describe('fetchJobTemplate', () => {
+      it('failed to fetch data', async () => {
+        const errorMessage = 'Something was wrong!'
+        const responsePayload = {
+          response: {
+            status: 500,
+            data: { message: errorMessage },
+          },
+        }
+
+        apiService.get = jest.fn().mockRejectedValue(responsePayload)
+
+        // Act
+        await store.dispatch<any>(
+          fetchJobTemplate('123', 'db_type')
+        )
+
+        // Assert
+        const expectedActions = [
+          addErrorNotification(responsePayload as AxiosError),
+        ]
+
+        expect(store.getActions()).toEqual(expectedActions)
+      })
+    })
+
+    describe('fetchConfigTemplate', () => {
       it('failed to fetch data', async () => {
-        const mockOptions = { dbType: 'db type' }
         const errorMessage = 'Something was wrong!'
         const responsePayload = {
           response: {
@@ -704,7 +729,7 @@ describe('rdi pipe slice', () => {
 
         // Act
         await store.dispatch<any>(
-          fetchPipelineTemplate('123', mockOptions)
+          fetchConfigTemplate('123', 'ingest', 'db_type')
         )
 
         // Assert

redisinsight/ui/src/slices/tests/rdi/testConnections.spec.ts

@@ -13,7 +13,7 @@ import { apiService } from 'uiSrc/services'
 import { addErrorNotification } from 'uiSrc/slices/app/notifications'
 
 const mockData = {
-  sources: {
+  targets: {
     target: {
       status: 'success',
     }
@@ -54,14 +54,15 @@ describe('rdi test connections slice', () => {
   describe('testConnectionsSuccess', () => {
     it('should properly set state', () => {
       // Arrange
+      const data = { success: [{ target: 'target' }], fail: [] }
       const state = {
         ...initialState,
-        results: mockData,
+        results: data,
         loading: false,
       }
 
       // Act
-      const nextState = reducer(initialState, testConnectionsSuccess(mockData))
+      const nextState = reducer(initialState, testConnectionsSuccess(data))
 
       // Assert
       const rootState = Object.assign(initialStateDefault, {

redisinsight/ui/src/utils/transformers/transformRdiPipeline.ts

@@ -19,7 +19,7 @@ export const pipelineToJson = ({ config, jobs }: IPipeline): IPipelineJSON => <I
 
 export const transformConnectionResults = (sources: ISources): TransformResult => {
   const result: TransformResult = { success: [], fail: [] }
-
+  console.log(sources)
   if (!sources) {
     return result
   }