[ENG-28582] feat: first part of adjustments in data streaming (#402)

* refactor: update services to handle newline * fix: add pagetitledelete prop * fix: remove unnecessary boolean requirement * refactor: update services to handle newline * refactor: adjust validations in standard DS * refactor: adjust validations in standard DS * refactor: move standard DS payload fields to another block * refactor: remove placeholder from loglineseparator * refactor: remove asterisk in new block
aziontech · Dec 1, 2023 · f8bf00f · f8bf00f
1 parent 755626b
commit f8bf00f
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 85 deletions.
diff --git a/src/services/data-streaming-services/create-data-streaming-service.js b/src/services/data-streaming-services/create-data-streaming-service.js
@@ -33,7 +33,7 @@ const parseByEndpointType = (payload) => {
         endpoint_type: 'standard',
         url: payload.endpointUrl,
         payload_format: payload.payloadFormat,
-        log_line_separator: payload.lineSeparator,
+        log_line_separator: payload.lineSeparator === '\\n' ? '\n' : payload.lineSeparator,
         max_size: payload.maxSize,
         headers: getHeaders(payload.headers)
       }

diff --git a/src/services/data-streaming-services/edit-data-streaming-service.js b/src/services/data-streaming-services/edit-data-streaming-service.js
@@ -20,7 +20,7 @@ const adapt = (payload) => {
     template_id: payload.template,
     data_source: payload.dataSource,
     domain_ids: allDomains ? [] : getDomains(payload.domains[1]),
-    all_domains: allDomains ? true : false,
+    all_domains: allDomains,
     active: payload.status,
     endpoint: getEndpoint(payload)
   }
@@ -33,7 +33,7 @@ const getEndpoint = (payload) => {
         endpoint_type: 'standard',
         url: payload.endpointUrl,
         payload_format: payload.payloadFormat,
-        log_line_separator: payload.lineSeparator,
+        log_line_separator: payload.lineSeparator === '\\n' ? '\n' : payload.lineSeparator,
         max_size: payload.maxSize,
         headers: getHeaders(payload.headers)
       }

diff --git a/src/services/data-streaming-services/load-data-streaming-service.js b/src/services/data-streaming-services/load-data-streaming-service.js
@@ -40,7 +40,10 @@ const getInfoByEndpoint = (payload) => {
       return {
         endpointUrl: payload.endpoint.url,
         payloadFormat: payload.endpoint.payload_format,
-        lineSeparator: payload.endpoint.log_line_separator,
+        lineSeparator:
+          payload.endpoint.log_line_separator === '\n'
+            ? '\\n'
+            : payload.endpoint.log_line_separator,
         maxSize: payload.endpoint.max_size,
         ...getHeaders(payload)
       }

diff --git a/src/templates/edit-form-block/index.vue b/src/templates/edit-form-block/index.vue
@@ -10,7 +10,6 @@
   const props = defineProps({
     isTabs: {
       type: Boolean,
-      required: true,
       default: false
     },
     editService: {

diff --git a/src/views/DataStreaming/CreateView.vue b/src/views/DataStreaming/CreateView.vue
@@ -49,15 +49,15 @@
     ),
     maxSize: yup.number().when('endpoint', {
       is: 'standard',
-      then: (schema) => schema.required('Payload Max Size is a required field')
+      then: (schema) => schema.required('Max Size is a required field')
     }),
     lineSeparator: yup.string().when('endpoint', {
       is: 'standard',
-      then: (schema) => schema.required('Payload Log Line Separator is a required field')
+      then: (schema) => schema.required('Log Line Separator is a required field')
     }),
     payloadFormat: yup.string().when('endpoint', {
       is: 'standard',
-      then: (schema) => schema.required('Payload Format is a required field')
+      then: (schema) => schema.required('Format is a required field')
     }),
 
     // Kafka
@@ -93,7 +93,7 @@
     }),
     objectKey: yup.string().when('endpoint', {
       is: 's3',
-      then: (schema) => schema.max(150).required('Object Key Prefix is a required field')
+      then: (schema) => schema.max(150)
     }),
     contentType: yup.string().when('endpoint', {
       is: 's3',
@@ -215,7 +215,7 @@
     endpointUrl: '',
     headers: [{ value: '', deleted: false }],
     maxSize: 1000000,
-    lineSeparator: '\n',
+    lineSeparator: '\\n',
     payloadFormat: '$dataset',
 
     // Kafka

diff --git a/src/views/DataStreaming/EditView.vue b/src/views/DataStreaming/EditView.vue
@@ -54,15 +54,15 @@
     ),
     maxSize: yup.number().when('endpoint', {
       is: 'standard',
-      then: (schema) => schema.required('Payload Max Size is a required field')
+      then: (schema) => schema.required('Max Size is a required field')
     }),
     lineSeparator: yup.string().when('endpoint', {
       is: 'standard',
-      then: (schema) => schema.required('Payload Log Line Separator is a required field')
+      then: (schema) => schema.required('Log Line Separator is a required field')
     }),
     payloadFormat: yup.string().when('endpoint', {
       is: 'standard',
-      then: (schema) => schema.required('Payload Format is a required field')
+      then: (schema) => schema.required('Format is a required field')
     }),
 
     // Kafka
@@ -98,7 +98,7 @@
     }),
     objectKey: yup.string().when('endpoint', {
       is: 's3',
-      then: (schema) => schema.max(150).required('Object Key Prefix is a required field')
+      then: (schema) => schema.max(150)
     }),
     contentType: yup.string().when('endpoint', {
       is: 's3',

diff --git a/src/views/DataStreaming/FormFields/FormFieldsDataStreaming.vue b/src/views/DataStreaming/FormFields/FormFieldsDataStreaming.vue
@@ -243,75 +243,6 @@
             @click="addHeader()"
           />
         </div>
-
-        <div class="flex flex-col sm:max-w-lg w-full gap-2">
-          <label
-            for="payloadFormat"
-            class="text-color text-base font-medium"
-            >Payload Format *</label
-          >
-          <InputText
-            v-model="payloadFormat"
-            type="text"
-            placeholder="$dataset"
-            :class="{ 'p-invalid': payloadFormatError }"
-          />
-          <small class="text-color-secondary text-xs font-normal leading-tight">
-            The format that payload will be sent. The $dataset variable will be replaced by all logs
-            already with the log line separator applied.
-          </small>
-          <small
-            id="data-set-help"
-            class="p-error"
-            >{{ payloadFormatError }}</small
-          >
-        </div>
-
-        <div class="flex flex-col sm:max-w-lg w-full gap-2">
-          <label
-            for="lineSeparator"
-            class="text-color text-base font-medium"
-            >Log Line Separator Payload *</label
-          >
-          <InputText
-            v-model="lineSeparator"
-            type="text"
-            placeholder="\n"
-            :class="{ 'p-invalid': lineSeparatorError }"
-          />
-          <small class="text-color-secondary text-xs font-normal leading-tight">
-            The format that payload will be sent. The $dataset variable will be replaced by all logs
-            already with the log line separator applied.
-          </small>
-          <small
-            id="max-size-help"
-            class="p-error"
-            >{{ lineSeparatorError }}</small
-          >
-        </div>
-
-        <div class="flex flex-col sm:max-w-lg w-full gap-2">
-          <label
-            for="maxSize"
-            class="text-color text-base font-medium"
-            >Max Size Payload *</label
-          >
-          <InputNumber
-            v-model="maxSize"
-            placeholder="1000000"
-            :useGrouping="false"
-            :class="{ 'p-invalid': maxSizeError }"
-          />
-          <small class="text-color-secondary text-xs font-normal leading-tight">
-            You can define the maximum size of data packets in bytes. Use a value starting from
-            1000000.
-          </small>
-          <small
-            id="max-size-help"
-            class="p-error"
-            >{{ maxSizeError }}</small
-          >
-        </div>
       </div>
 
       <div
@@ -508,7 +439,7 @@
           <label
             for="objectKeyPrefix"
             class="text-color text-base font-medium"
-            >Object Key Prefix *</label
+            >Object Key Prefix</label
           >
           <PrimePassword
             id="objectKey"
@@ -1093,6 +1024,81 @@
       </div>
     </template>
   </FormHorizontal>
+  <FormHorizontal
+    title="Payload"
+    description="Description"
+    v-if="endpoint === 'standard'"
+  >
+    <template #inputs>
+      <div class="flex flex-col sm:max-w-lg w-full gap-2">
+        <label
+          for="payloadFormat"
+          class="text-color text-base font-medium"
+          >Format</label
+        >
+        <InputText
+          v-model="payloadFormat"
+          type="text"
+          placeholder="$dataset"
+          :class="{ 'p-invalid': payloadFormatError }"
+        />
+        <small class="text-color-secondary text-xs font-normal leading-tight">
+          The format that payload will be sent. The $dataset variable will be replaced by all logs
+          already with the log line separator applied.
+        </small>
+        <small
+          id="data-set-help"
+          class="p-error"
+          >{{ payloadFormatError }}</small
+        >
+      </div>
+
+      <div class="flex flex-col sm:max-w-lg w-full gap-2">
+        <label
+          for="lineSeparator"
+          class="text-color text-base font-medium"
+          >Log Line Separator</label
+        >
+        <InputText
+          v-model="lineSeparator"
+          type="text"
+          :class="{ 'p-invalid': lineSeparatorError }"
+        />
+        <small class="text-color-secondary text-xs font-normal leading-tight">
+          The format that payload will be sent. The $dataset variable will be replaced by all logs
+          already with the log line separator applied.
+        </small>
+        <small
+          id="max-size-help"
+          class="p-error"
+          >{{ lineSeparatorError }}</small
+        >
+      </div>
+
+      <div class="flex flex-col sm:max-w-lg w-full gap-2">
+        <label
+          for="maxSize"
+          class="text-color text-base font-medium"
+          >Max Size</label
+        >
+        <InputNumber
+          v-model="maxSize"
+          placeholder="1000000"
+          :useGrouping="false"
+          :class="{ 'p-invalid': maxSizeError }"
+        />
+        <small class="text-color-secondary text-xs font-normal leading-tight">
+          You can define the maximum size of data packets in bytes. Use a value starting from
+          1000000.
+        </small>
+        <small
+          id="max-size-help"
+          class="p-error"
+          >{{ maxSizeError }}</small
+        >
+      </div>
+    </template>
+  </FormHorizontal>
   <FormHorizontal title="Status">
     <template #inputs>
       <div class="flex flex-col w-full gap-2">

diff --git a/src/views/DataStreaming/ListView.vue b/src/views/DataStreaming/ListView.vue
@@ -75,14 +75,15 @@
 <template>
   <ContentBlock>
     <template #heading>
-      <PageHeadingBlock pageTitle="Data Streaming"></PageHeadingBlock>
+      <PageHeadingBlock pageTitle="Data Streaming" />
     </template>
     <template #content>
       <ListTableBlock
         v-if="hasContentToList"
         addButtonLabel="Add"
         createPagePath="/data-streaming/create"
         editPagePath="/data-streaming/edit"
+        pageTitleDelete="Delete Data Streaming"
         :listService="listDataStreamingService"
         :deleteService="deleteDataStreamingService"
         :columns="getColumns"