RI-7186 validate job name separately

Author: ArtemHoruzhenko

redisinsight/ui/src/components/yaml-validator/validatePipeline.ts

@@ -1,15 +1,20 @@
 import { get } from 'lodash'
-import { validateYamlSchema } from './validateYamlSchema'
+import { Nullable } from 'uiSrc/utils'
+import { validateSchema, validateYamlSchema } from './validateYamlSchema'
 
 interface PipelineValidationProps {
   config: string
   schema: any
+  monacoJobsSchema: Nullable<object>
+  jobNameSchema: Nullable<object>
   jobs: { name: string; value: string }[]
 }
 
 export const validatePipeline = ({
   config,
   schema,
+  monacoJobsSchema,
+  jobNameSchema,
   jobs,
 }: PipelineValidationProps) => {
   const { valid: isConfigValid, errors: configErrors } = validateYamlSchema(
@@ -22,7 +27,11 @@ export const validatePipeline = ({
     jobsErrors: Record<string, Set<string>>
   }>(
     (acc, j) => {
-      const validation = validateYamlSchema(j.value, get(schema, 'jobs', null))
+      const validation = validateYamlSchema(j.value, monacoJobsSchema)
+      const jobNameValidation = validateSchema(j.name, jobNameSchema, {
+        errorMessagePrefix: 'Job name',
+        includePathIntoErrorMessage: false,
+      })
 
       if (!acc.jobsErrors[j.name]) {
         acc.jobsErrors[j.name] = new Set()
@@ -32,7 +41,14 @@ export const validatePipeline = ({
         validation.errors.forEach((error) => acc.jobsErrors[j.name].add(error))
       }
 
-      acc.areJobsValid = acc.areJobsValid && validation.valid
+      if (!jobNameValidation.valid) {
+        jobNameValidation.errors.forEach((error) =>
+          acc.jobsErrors[j.name].add(error),
+        )
+      }
+
+      acc.areJobsValid =
+        acc.areJobsValid && validation.valid && jobNameValidation.valid
       return acc
     },
     { areJobsValid: true, jobsErrors: {} },

redisinsight/ui/src/components/yaml-validator/validateYamlSchema.ts

@@ -1,12 +1,20 @@
 import yaml, { YAMLException } from 'js-yaml'
 import Ajv from 'ajv'
 
-export const validateYamlSchema = (
-  content: string,
+type ValidationConfig = {
+  errorMessagePrefix?: string
+  includePathIntoErrorMessage?: boolean
+}
+
+export const validateSchema = (
+  parsed: any,
   schema: any,
+  config: ValidationConfig = {},
 ): { valid: boolean; errors: string[] } => {
+  const errorMessagePrefix = config.errorMessagePrefix ?? 'Error:'
+  const includePathIntoErrorMessage = config.includePathIntoErrorMessage ?? true
+
   try {
-    const parsed = yaml.load(content)
     const ajv = new Ajv({
       strict: false,
       unicodeRegExp: false,
@@ -18,12 +26,28 @@ export const validateYamlSchema = (
 
     if (!valid) {
       const errors = validate.errors?.map(
-        (err) => `Error: ${err.message} (at ${err.instancePath || 'root'})`,
+        (err) => {
+          const pathMessage = includePathIntoErrorMessage ? ` (at ${err.instancePath || 'root'})` : ''
+          return `${[errorMessagePrefix]} ${err.message}${pathMessage}`
+        }
       )
       return { valid: false, errors: errors || [] }
     }
 
     return { valid: true, errors: [] }
+  } catch (e) {
+    return { valid: false, errors: [`${errorMessagePrefix} unknown error`] }
+  }
+}
+
+export const validateYamlSchema = (
+  content: string,
+  schema: any,
+): { valid: boolean; errors: string[] } => {
+  try {
+    const parsed = yaml.load(content) as object
+
+    return validateSchema(parsed, schema)
   } catch (e) {
     if (e instanceof YAMLException) {
       return { valid: false, errors: [`Error: ${e.reason}`] }

redisinsight/ui/src/pages/rdi/instance/components/header/components/pipeline-actions/PipelineActions.tsx

@@ -22,7 +22,6 @@ import {
   PipelineStatus,
 } from 'uiSrc/slices/interfaces'
 
-import { RiTooltip } from 'uiSrc/components'
 import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import DeployPipelineButton from '../buttons/deploy-pipeline-button'
 import ResetPipelineButton from '../buttons/reset-pipeline-button'
@@ -39,6 +38,8 @@ const PipelineActions = ({ collectorStatus, pipelineStatus }: Props) => {
   const {
     loading: deployLoading,
     schema,
+    monacoJobsSchema,
+    jobNameSchema,
     config,
     jobs,
   } = useSelector(rdiPipelineSelector)
@@ -57,7 +58,13 @@ const PipelineActions = ({ collectorStatus, pipelineStatus }: Props) => {
     }
 
     const { result, configValidationErrors, jobsValidationErrors } =
-      validatePipeline({ schema, config, jobs })
+      validatePipeline({
+        schema,
+        monacoJobsSchema,
+        jobNameSchema,
+        config,
+        jobs,
+      })
 
     dispatch(setConfigValidationErrors(configValidationErrors))
     dispatch(setJobsValidationErrors(jobsValidationErrors))

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { get, throttle } from 'lodash'
+import { throttle } from 'lodash'
 import cx from 'classnames'
 import { monaco as monacoEditor } from 'react-monaco-editor'
 
@@ -59,7 +59,7 @@ const Job = (props: Props) => {
   const deployedJobValueRef = useRef<Maybe<string>>(deployedJobValue)
   const jobNameRef = useRef<string>(name)
 
-  const { loading, schema, jobFunctions, jobs } =
+  const { loading, monacoJobsSchema, jobFunctions, jobs } =
     useSelector(rdiPipelineSelector)
 
   useEffect(() => {
@@ -243,7 +243,7 @@ const Job = (props: Props) => {
           </div>
         ) : (
           <MonacoYaml
-            schema={get(schema, 'jobs', null)}
+            schema={monacoJobsSchema}
             value={value}
             onChange={handleChange}
             disabled={loading}

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

@@ -185,6 +185,8 @@ export interface IStateRdiPipeline {
   jobsValidationErrors: Record<string, string[]>
   resetChecked: boolean
   schema: Nullable<object>
+  jobNameSchema: Nullable<object>
+  monacoJobsSchema: Nullable<object>
   strategies: IRdiPipelineStrategies
   changes: Record<string, FileChangeType>
   jobFunctions: monacoEditor.languages.CompletionItem[]

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

@@ -1,5 +1,6 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 import { AxiosError } from 'axios'
+import { get, omit } from 'lodash'
 import { apiService } from 'uiSrc/services'
 import {
   addErrorNotification,
@@ -45,6 +46,8 @@ export const initialState: IStateRdiPipeline = {
   jobsValidationErrors: {},
   resetChecked: false,
   schema: null,
+  jobNameSchema: null,
+  monacoJobsSchema: null,
   strategies: {
     loading: false,
     error: '',
@@ -128,6 +131,18 @@ const rdiPipelineSlice = createSlice({
     ) => {
       state.schema = payload
     },
+    setMonacoJobsSchema: (
+      state,
+      { payload }: PayloadAction<Nullable<object>>,
+    ) => {
+      state.monacoJobsSchema = payload
+    },
+    setJobNameSchema: (
+      state,
+      { payload }: PayloadAction<Nullable<object>>,
+    ) => {
+      state.jobNameSchema = payload
+    },
     getPipelineStrategies: (state) => {
       state.strategies.loading = true
     },
@@ -224,6 +239,8 @@ export const {
   deployPipelineSuccess,
   deployPipelineFailure,
   setPipelineSchema,
+  setMonacoJobsSchema,
+  setJobNameSchema,
   getPipelineStrategies,
   getPipelineStrategiesSuccess,
   getPipelineStrategiesFailure,
@@ -399,12 +416,19 @@ export function fetchRdiPipelineSchema(
 ) {
   return async (dispatch: AppDispatch) => {
     try {
-      const { data, status } = await apiService.get<IPipeline>(
+      const { data, status } = await apiService.get<Nullable<object>>(
         getRdiUrl(rdiInstanceId, ApiEndpoints.RDI_PIPELINE_SCHEMA),
       )
 
       if (isStatusSuccessful(status)) {
         dispatch(setPipelineSchema(data))
+        dispatch(setMonacoJobsSchema({
+          ...omit(get(data, ['jobs'], {}), ['properties.name']),
+          required: get(data, ['jobs', 'required'], []).filter(
+            (val: string) => val !== 'name',
+          ),
+        }))
+        dispatch(setJobNameSchema(get(data, ['jobs', 'properties', 'name'], '^aaa&')))
         onSuccessAction?.(data)
       }
     } catch (_err) {