fix: add output format type for external destination(pipeline destination) (openobserve#6993)

1.This PR adds the output format to the external destination either json
/ ndjson , bydefault it is json

---------

Co-authored-by: oasisk <[email protected]>

Author: nikhilsaikethe

src/handler/http/models/destinations.rs

@@ -58,6 +58,7 @@ impl From<meta_dest::Destination> for Destination {
                     template: Some(template),
                     #[cfg(feature = "enterprise")]
                     action_id: endpoint.action_id,
+                    output_format: endpoint.output_format,
                     ..Default::default()
                 },
                 meta_dest::DestinationType::Sns(aws_sns) => Self {
@@ -76,6 +77,7 @@ impl From<meta_dest::Destination> for Destination {
                 skip_tls_verify: endpoint.skip_tls_verify,
                 headers: endpoint.headers,
                 destination_type: DestinationType::Http,
+                output_format: endpoint.output_format,
                 ..Default::default()
             },
         }

web/src/components/alerts/AddDestination.vue

@@ -138,7 +138,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               tabindex="0"
             />
           </div>
-          <div class="col-6 q-py-xs destination-method-select">
+          <div class="col-3 q-py-xs destination-method-select">
             <q-select
               data-test="add-destination-method-select"
               v-model="formData.method"
@@ -155,6 +155,26 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               :rules="[(val: any) => !!val || 'Field is required!']"
               tabindex="0"
             />
+            
+          </div>
+          <div class="col-3 q-py-xs destination-method-select">
+            <q-select
+              data-test="add-destination-output-format-select"
+              v-model="formData.output_format"
+              :label="t('alert_destinations.output_format') + ' *'"
+              :options="outputFormats"
+              color="input-border"
+              bg-color="input-bg"
+              class="showLabelOnTop"
+              stack-label
+              outlined
+              :popup-content-style="{ textTransform: 'uppercase' }"
+              filled
+              dense
+              :rules="[(val: any) => !!val || 'Field is required!']"
+              tabindex="0"
+            />
+            
           </div>
           <div class="col-12 q-py-sm">
             <div class="text-bold q-py-xs" style="paddingleft: 10px">
@@ -352,6 +372,7 @@ const props = defineProps({
 const emit = defineEmits(["get:destinations", "cancel:hideform"]);
 const q = useQuasar();
 const apiMethods = ["get", "post", "put"];
+const outputFormats = ["json", "ndjson"];
 const store = useStore();
 const { t } = useI18n();
 const formData: Ref<DestinationData> = ref({
@@ -364,6 +385,7 @@ const formData: Ref<DestinationData> = ref({
   emails: "",
   type: "http",
   action_id: "",
+  output_format: "json",
 });
 const isUpdatingDestination = ref(false);
 
@@ -462,6 +484,9 @@ const setupDestinationData = () => {
         addApiHeader(key, value);
       });
     }
+    if (props.destination.output_format) {
+      formData.value.output_format = props.destination.output_format;
+    }
   }
 };
 
@@ -543,6 +568,7 @@ const saveDestination = () => {
     template: props.isAlerts ? formData.value.template : "",
     headers: headers,
     name: formData.value.name,
+    output_format: formData.value.output_format,
   };
 
   if (formData.value.type === "email") {

web/src/components/pipeline/NodeForm/ExternalDestination.vue

@@ -117,9 +117,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 tabindex="0"
               />
             </div>
-            <div
+            <div class="tw-flex tw-flex-row tw-gap-x-2">
+              <div
               v-if="createNewDestination"
-              class="col-12 q-py-xs destination-method-select"
+              class="tw-w-1/2 q-py-xs destination-method-select"
             >
               <q-select
                 data-test="add-destination-method-select"
@@ -138,6 +139,29 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 tabindex="0"
               />
             </div>
+            <div
+              v-if="createNewDestination"
+              class="tw-w-1/2 q-py-xs destination-method-select"
+            >
+              <q-select
+                data-test="add-destination-output-format-select"
+                v-model="formData.output_format"
+                :label="t('alert_destinations.output_format') + ' *'"
+                :options="outputFormats"
+                color="input-border"
+                bg-color="input-bg"
+                class="showLabelOnTop "
+                stack-label
+                outlined
+                :popup-content-style="{ textTransform: 'uppercase' }"
+                filled
+                dense
+                :rules="[(val: any) => !!val || 'Field is required!']"
+                tabindex="0"
+              />
+            </div>
+            </div>
+
             <div v-if="createNewDestination" class="col-12 q-py-sm">
               <div class="text-bold q-py-xs" style="paddingleft: 10px">
                 Headers
@@ -275,6 +299,7 @@ import useDragAndDrop from "@/plugins/pipelines/useDnD";
 const emit = defineEmits(["get:destinations", "cancel:hideform"]);
 const q = useQuasar();
 const apiMethods = ["get", "post", "put"];
+const outputFormats = ["json", "ndjson"];
 const store = useStore();
 const { t } = useI18n();
 const formData: Ref<DestinationData> = ref({
@@ -286,6 +311,7 @@ const formData: Ref<DestinationData> = ref({
   headers: {},
   emails: "",
   type: "http",
+  output_format: "json",
 });
 const isUpdatingDestination = ref(false);
 const createNewDestination = ref(false);
@@ -334,6 +360,7 @@ watch(
         headers: {},
         emails: "",
         type: "http",
+        output_format: "json",
       };
       apiHeaders.value = [{ key: "", value: "", uuid: getUUID() }];
     }
@@ -370,6 +397,7 @@ const createDestination = () => {
     headers: headers,
     name: formData.value.name,
     type: "http",
+    output_format: formData.value.output_format,
   };
 
   destinationService

web/src/ts/interfaces/alert.ts

@@ -104,6 +104,7 @@ export interface DestinationPayload {
   emails?: string[];
   type: "http" | "email" | "sns" | "action";
   action_id?: string;
+  output_format?: "json" | "ndjson";
 }
 
 // Destination object which is modified in frontend to display in table and form