#RI-5856 - handle yaml error

Author: AmirAllayarovSofteq

redisinsight/ui/src/pages/rdi/pipeline-management/components/jobs-panel/Panel.tsx

@@ -13,7 +13,6 @@ import {
 } from '@elastic/eui'
 import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
-import yaml from 'js-yaml'
 
 import { PipelineJobsTabs } from 'uiSrc/slices/interfaces/rdi'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
@@ -26,7 +25,7 @@ import { formatLongName } from 'uiSrc/utils'
 import styles from './styles.module.scss'
 
 export interface Props {
-  job: string
+  job?: object
   onClose: () => void
 }
 
@@ -108,7 +107,7 @@ const DryRunJobPanel = (props: Props) => {
         id: rdiInstanceId,
       },
     })
-    dispatch(rdiDryRunJob(rdiInstanceId, JSON.parse(input), yaml.load(job)))
+    dispatch(rdiDryRunJob(rdiInstanceId, JSON.parse(input), job))
   }
 
   const isSelectAvailable = selectedTab === PipelineJobsTabs.Output

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

@@ -6,7 +6,7 @@ import cx from 'classnames'
 import { useParams } from 'react-router-dom'
 import { get, throttle } from 'lodash'
 
-import yaml from 'js-yaml'
+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,8 +17,9 @@ 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 } from 'uiSrc/utils'
+import { isEqualPipelineFile, yamlToJson } from 'uiSrc/utils'
 
+import { addErrorNotification } from 'uiSrc/slices/app/notifications'
 import styles from './styles.module.scss'
 
 const Config = () => {
@@ -57,8 +58,27 @@ 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)
+    if (!JSONValue) {
+      return
+    }
     setIsPanelOpen(true)
-    dispatch(testConnectionsAction(rdiInstanceId, yaml.load(config)))
+    dispatch(testConnectionsAction(rdiInstanceId, JSONValue))
     sendEventTelemetry({
       event: TelemetryEvent.RDI_TEST_TARGET_CONNECTIONS_CLICKED,
       eventData: {

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

@@ -5,6 +5,7 @@ import { useFormikContext } from 'formik'
 import { 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'
@@ -14,10 +15,11 @@ 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 } from 'uiSrc/utils'
+import { isEqualPipelineFile, Maybe, yamlToJson } from 'uiSrc/utils'
 import { getUtmExternalLink } from 'uiSrc/utils/links'
 import { KeyboardShortcut } from 'uiSrc/components'
 
+import { addErrorNotification } from 'uiSrc/slices/app/notifications'
 import styles from './styles.module.scss'
 
 export interface Props {
@@ -33,6 +35,7 @@ const Job = (props: Props) => {
 
   const [isPanelOpen, setIsPanelOpen] = useState<boolean>(false)
   const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false)
+  const [JSONJob, setJSONJob] = useState<object>()
   const [shouldOpenDedicatedEditor, setShouldOpenDedicatedEditor] = useState<boolean>(false)
 
   const dispatch = useDispatch()
@@ -66,7 +69,27 @@ 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)
+    if (!JSONValue) {
+      return
+    }
     setIsPanelOpen(true)
+    setJSONJob(JSONValue)
     sendEventTelemetry({
       event: TelemetryEvent.RDI_TEST_JOB_OPENED,
       eventData: {
@@ -234,7 +257,7 @@ const Job = (props: Props) => {
       {isPanelOpen && (
         <DryRunJobPanel
           onClose={() => setIsPanelOpen(false)}
-          job={value}
+          job={JSONJob}
         />
       )}
     </>

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

@@ -1,5 +1,17 @@
-import yaml from 'js-yaml'
-import { IPipeline, IPipelineJSON, ISources, TestConnectionStatus, TransformResult } from 'uiSrc/slices/interfaces'
+import yaml, { YAMLException } from 'js-yaml'
+import { IPipeline, IPipelineJSON, ITargets, 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
+  }
+}
 
 export const pipelineToYaml = (pipeline: IPipelineJSON) => ({
   config: yaml.dump(pipeline.config),
@@ -17,7 +29,7 @@ export const pipelineToJson = ({ config, jobs }: IPipeline): IPipelineJSON => <I
   }, {})
 })
 
-export const transformConnectionResults = (sources: ISources): TransformResult => {
+export const transformConnectionResults = (sources: ITargets): TransformResult => {
   const result: TransformResult = { success: [], fail: [] }
   if (!sources) {
     return result