#RI- 5856 - update validation error

Author: AmirAllayarovSofteq

redisinsight/ui/src/pages/rdi/instance/InstancePage.tsx

@@ -2,6 +2,8 @@ import React, { useEffect, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory, useLocation, useParams } from 'react-router-dom'
 import { Formik, FormikProps } from 'formik'
+import { EuiText } from '@elastic/eui'
+import { capitalize } from 'lodash'
 
 import {
   appContextSelector,
@@ -22,7 +24,8 @@ import {
   setPipelineInitialState,
 } from 'uiSrc/slices/rdi/pipeline'
 import { IPipeline } from 'uiSrc/slices/interfaces'
-import { Nullable, pipelineToJson } from 'uiSrc/utils'
+import { createAxiosError, Nullable, pipelineToJson } from 'uiSrc/utils'
+import { addErrorNotification } from 'uiSrc/slices/app/notifications'
 
 import InstancePageRouter from './InstancePageRouter'
 import { ConfirmLeavePagePopup } from './components'
@@ -88,7 +91,19 @@ const RdiInstancePage = ({ routes = [] }: Props) => {
   }, [])
 
   const onSubmit = (values: IPipeline) => {
-    const JSONValues = pipelineToJson(values)
+    const JSONValues = pipelineToJson(values, (errors) => {
+      dispatch(addErrorNotification(createAxiosError({
+        message: (
+          <>
+            <EuiText>{`${capitalize(errors[0].filename)} has an invalid structure.`}</EuiText>
+            <EuiText>{errors[0].msg}</EuiText>
+          </>
+        )
+      })))
+    })
+    if (!JSONValues) {
+      return
+    }
     dispatch(deployPipelineAction(rdiInstanceId, JSONValues))
   }
 

redisinsight/ui/src/pages/rdi/pipeline-management/pages/config/Config.tsx

@@ -6,7 +6,6 @@ import cx from 'classnames'
 import { useParams } from 'react-router-dom'
 import { get, throttle } from 'lodash'
 
-import { AxiosError } from 'axios'
 import { sendPageViewTelemetry, sendEventTelemetry, TelemetryPageView, TelemetryEvent } from 'uiSrc/telemetry'
 import { EXTERNAL_LINKS, UTM_MEDIUMS } from 'uiSrc/constants/links'
 import { getUtmExternalLink } from 'uiSrc/utils/links'
@@ -17,7 +16,7 @@ import TestConnectionsPanel from 'uiSrc/pages/rdi/pipeline-management/components
 import TemplatePopover from 'uiSrc/pages/rdi/pipeline-management/components/template-popover'
 import { testConnectionsAction, rdiTestConnectionsSelector, testConnectionsController } from 'uiSrc/slices/rdi/testConnections'
 import { appContextPipelineManagement } from 'uiSrc/slices/app/context'
-import { isEqualPipelineFile, yamlToJson } from 'uiSrc/utils'
+import { createAxiosError, isEqualPipelineFile, yamlToJson } from 'uiSrc/utils'
 
 import { addErrorNotification } from 'uiSrc/slices/app/notifications'
 import styles from './styles.module.scss'
@@ -58,22 +57,16 @@ const Config = () => {
   }, [isOpenDialog, config, pipelineLoading])
 
   const testConnections = () => {
-    const onError = (msg: string) => {
-      dispatch(addErrorNotification({
-        response: {
-          data: {
-            message: (
-              <>
-                <EuiText>Config has an invalid structure.</EuiText>
-                <EuiText>{msg}</EuiText>
-              </>
-            )
-          }
-        }
-      } as AxiosError))
-    }
-
-    const JSONValue = yamlToJson(config, onError)
+    const JSONValue = yamlToJson(config, (msg) => {
+      dispatch(addErrorNotification(createAxiosError({
+        message: (
+          <>
+            <EuiText>Config has an invalid structure.</EuiText>
+            <EuiText>{msg}</EuiText>
+          </>
+        )
+      })))
+    })
     if (!JSONValue) {
       return
     }

redisinsight/ui/src/pages/rdi/pipeline-management/pages/job/Job.tsx

@@ -2,10 +2,9 @@ import React, { useState, useEffect, useRef, useCallback } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { EuiText, EuiLink, EuiButton, EuiLoadingSpinner, EuiToolTip } from '@elastic/eui'
 import { useFormikContext } from 'formik'
-import { get, throttle } from 'lodash'
+import { capitalize, get, throttle } from 'lodash'
 import cx from 'classnames'
 import { monaco as monacoEditor } from 'react-monaco-editor'
-import { AxiosError } from 'axios/index'
 
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { EXTERNAL_LINKS, UTM_MEDIUMS } from 'uiSrc/constants/links'
@@ -15,7 +14,7 @@ import MonacoYaml from 'uiSrc/components/monaco-editor/components/monaco-yaml'
 import DryRunJobPanel from 'uiSrc/pages/rdi/pipeline-management/components/jobs-panel'
 import { DSL, KEYBOARD_SHORTCUTS } from 'uiSrc/constants'
 import TemplatePopover from 'uiSrc/pages/rdi/pipeline-management/components/template-popover'
-import { isEqualPipelineFile, Maybe, yamlToJson } from 'uiSrc/utils'
+import { createAxiosError, isEqualPipelineFile, Maybe, yamlToJson } from 'uiSrc/utils'
 import { getUtmExternalLink } from 'uiSrc/utils/links'
 import { KeyboardShortcut } from 'uiSrc/components'
 
@@ -69,22 +68,16 @@ const Job = (props: Props) => {
   }, [name])
 
   const handleDryRunJob = () => {
-    const onError = (msg: string) => {
-      dispatch(addErrorNotification({
-        response: {
-          data: {
-            message: (
-              <>
-                <EuiText>{`${name} has an invalid structure.`}</EuiText>
-                <EuiText>{msg}</EuiText>
-              </>
-            )
-          }
-        }
-      } as AxiosError))
-    }
-
-    const JSONValue = yamlToJson(value, onError)
+    const JSONValue = yamlToJson(value, (msg) => {
+      dispatch(addErrorNotification(createAxiosError({
+        message: (
+          <>
+            {`${capitalize(name)} has an invalid structure.`}
+            <EuiText>{msg}</EuiText>
+          </>
+        )
+      })))
+    })
     if (!JSONValue) {
       return
     }

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

@@ -14,6 +14,14 @@ export interface CustomError {
   resourceId?: string
 }
 
+export interface ErrorOptions {
+  message: string | JSX.Element
+  code?: string
+  config?: object
+  request?: object
+  response?: object
+}
+
 export interface EnhancedAxiosError extends AxiosError<CustomError> {
 }
 

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

@@ -233,3 +233,8 @@ export interface IStateRdiTestConnections {
 export type TJMESPathFunctions = {
   [key: string]: Pick<ICommand, 'summary'> & Required<Pick<ICommand, 'arguments'>>
 }
+
+export interface IYamlFormatError {
+  filename: string
+  msg: string
+}

redisinsight/ui/src/utils/apiResponse.ts

@@ -1,6 +1,6 @@
 import { AxiosError } from 'axios'
 import { first, isArray, get } from 'lodash'
-import { AddRedisDatabaseStatus, EnhancedAxiosError, IBulkOperationResult } from 'uiSrc/slices/interfaces'
+import { AddRedisDatabaseStatus, EnhancedAxiosError, ErrorOptions, IBulkOperationResult } from 'uiSrc/slices/interfaces'
 import { parseCustomError } from 'uiSrc/utils'
 
 export const DEFAULT_ERROR_MESSAGE = 'Something was wrong!'
@@ -12,6 +12,12 @@ export const getAxiosError = (error: EnhancedAxiosError): AxiosError => {
   return error
 }
 
+export const createAxiosError = (options: ErrorOptions): AxiosError => ({
+  response: {
+    data: options
+  }
+} as AxiosError)
+
 export const getApiErrorCode = (error: AxiosError) => error?.response?.status
 
 export function getApiErrorMessage(error: AxiosError): string {

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

@@ -1,13 +1,19 @@
 import yaml, { YAMLException } from 'js-yaml'
-import { IPipeline, IPipelineJSON, ITargets, TestConnectionStatus, TransformResult } from 'uiSrc/slices/interfaces'
+import {
+  IPipeline,
+  IPipelineJSON,
+  ITargets,
+  IYamlFormatError,
+  TestConnectionStatus,
+  TransformResult
+} from 'uiSrc/slices/interfaces'
 
 export const yamlToJson = (value: string, onError: (e: string) => void) => {
   try {
     return yaml.load(value) || {}
   } catch (e) {
     if (e instanceof YAMLException) {
       onError(e.reason)
-      return undefined
     }
     return undefined
   }
@@ -21,13 +27,38 @@ export const pipelineToYaml = (pipeline: IPipelineJSON) => ({
   }))
 })
 
-export const pipelineToJson = ({ config, jobs }: IPipeline): IPipelineJSON => <IPipelineJSON>({
-  config: yaml.load(config) || {},
-  jobs: jobs.reduce<{ [key: string]: unknown }>((acc, job) => {
-    acc[job.name] = yaml.load(job.value)
+export const pipelineToJson = ({ config, jobs }: IPipeline, onError: (errors: IYamlFormatError[]) => void) => {
+  const result: IPipelineJSON = {
+    config: {},
+    jobs: []
+  }
+  const errors = []
+
+  try {
+    result.config = yaml.load(config) || {}
+  } catch (e) {
+    if (e instanceof YAMLException) {
+      errors.push({ filename: 'config', msg: e.reason })
+    }
+  }
+  result.jobs = jobs.reduce<{ [key: string]: unknown }>((acc, job) => {
+    try {
+      acc[job.name] = yaml.load(job.value)
+    } catch (e) {
+      if (e instanceof YAMLException) {
+        errors.push({ filename: job.name, msg: e.reason })
+      }
+    }
     return acc
   }, {})
-})
+
+  if (errors.length) {
+    onError(errors)
+    return undefined
+  }
+
+  return result
+}
 
 export const transformConnectionResults = (sources: ITargets): TransformResult => {
   const result: TransformResult = { success: [], fail: [] }