fix: added missing test id's for pipeline UI (#3420)

Co-authored-by: Hengfei Yang <hengfei.yang@gmail.com>

web/src/components/SanitizedHtmlRenderer.vue

@@ -0,0 +1,42 @@
+<!-- Copyright 2023 Zinc Labs Inc.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<template>
+  <div
+    v-html="DOMPurify.sanitize(htmlContent)"
+    data-test="sanitized-html-renderer"
+  ></div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import DOMPurify from "dompurify";
+
+export default defineComponent({
+  name: "SanitizedHtmlRenderer",
+  props: {
+    htmlContent: {
+      type: String,
+      default: "",
+    },
+  },
+  setup(): any {
+    return {
+      DOMPurify,
+    };
+  },
+});
+</script>

web/src/components/alerts/RealTimeAlert.vue

@@ -6,7 +6,7 @@
       :fields="conditions"
       @add="addField"
       @remove="removeField"
-      @input:update="(name, field) => emits('input:update', name, field)"
+      @input:update="(name:string, field: any) => emits('input:update', name, field)"
     />
   </div>
 </template>

web/src/components/dashboards/addPanel/DashboardMapQueryBuilder.vue

@@ -543,7 +543,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         name="condition"
                         class="q-pa-none"
                       >
-                        <div class="flex column" style="height: 220px;">
+                        <div class="flex column" style="height: 220px">
                           <q-select
                             dense
                             filled
@@ -649,7 +649,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                                 ></q-checkbox>
                               </q-item-section>
                               <q-item-section>
-                                <div v-html="opt"></div>
+                                <SanitizedHtmlRenderer :html-content="opt" />
                               </q-item-section>
                             </q-item>
                           </template>
@@ -699,10 +699,11 @@ import { getImageURL } from "../../../utils/zincutils";
 import SortByBtnGrp from "@/components/dashboards/addPanel/SortByBtnGrp.vue";
 import { useQuasar } from "quasar";
 import CommonAutoComplete from "@/components/dashboards/addPanel/CommonAutoComplete.vue";
+import SanitizedHtmlRenderer from "@/components/SanitizedHtmlRenderer.vue";
 
 export default defineComponent({
   name: "DashboardMapQueryBuilder",
-  components: { SortByBtnGrp, CommonAutoComplete },
+  components: { SortByBtnGrp, CommonAutoComplete, SanitizedHtmlRenderer },
   props: ["dashboardData"],
   setup(props) {
     const { t } = useI18n();

web/src/components/dashboards/addPanel/DashboardQueryBuilder.vue

@@ -745,7 +745,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                         name="condition"
                         class="q-pa-none"
                       >
-                        <div class="flex column" style="height: 220px;">
+                        <div class="flex column" style="height: 220px">
                           <q-select
                             dense
                             filled
@@ -851,7 +851,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                                 ></q-checkbox>
                               </q-item-section>
                               <q-item-section>
-                                <div v-html="opt"></div>
+                                <SanitizedHtmlRenderer :html-content="opt" />
                               </q-item-section>
                             </q-item>
                           </template>
@@ -906,6 +906,7 @@ import SortByBtnGrp from "@/components/dashboards/addPanel/SortByBtnGrp.vue";
 import HistogramIntervalDropDown from "@/components/dashboards/addPanel/HistogramIntervalDropDown.vue";
 import { useQuasar } from "quasar";
 import CommonAutoComplete from "@/components/dashboards/addPanel/CommonAutoComplete.vue";
+import SanitizedHtmlRenderer from "@/components/SanitizedHtmlRenderer.vue";
 
 export default defineComponent({
   name: "DashboardQueryBuilder",
@@ -915,6 +916,7 @@ export default defineComponent({
     HistogramIntervalDropDown,
     DashboardSankeyChartBuilder,
     CommonAutoComplete,
+    SanitizedHtmlRenderer,
   },
   props: ["dashboardData"],
   setup(props) {

web/src/components/dashboards/addPanel/DashboardSankeyChartBuilder.vue

@@ -649,7 +649,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                                 ></q-checkbox>
                               </q-item-section>
                               <q-item-section>
-                                <div v-html="opt"></div>
+                                <SanitizedHtmlRenderer :html-content="opt" />
                               </q-item-section>
                             </q-item>
                           </template>
@@ -699,10 +699,11 @@ import { getImageURL } from "../../../utils/zincutils";
 import SortByBtnGrp from "@/components/dashboards/addPanel/SortByBtnGrp.vue";
 import { useQuasar } from "quasar";
 import CommonAutoComplete from "@/components/dashboards/addPanel/CommonAutoComplete.vue";
+import SanitizedHtmlRenderer from "@/components/SanitizedHtmlRenderer.vue";
 
 export default defineComponent({
   name: "DashboardSankeyChartBuilder",
-  components: { SortByBtnGrp, CommonAutoComplete },
+  components: { SortByBtnGrp, CommonAutoComplete, SanitizedHtmlRenderer },
   props: ["dashboardData"],
   setup(props) {
     const { t } = useI18n();

web/src/components/ingestion/recommended/FrontendRumConfig.vue

@@ -22,14 +22,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
       <q-separator class="q-my-sm"></q-separator>
 
-      <HTMLRenderer class="text-subtitle1 q-mt-xs" :htmlContent="npmStep1" />
+      <SanitizedHtmlRenderer
+        class="text-subtitle1 q-mt-xs"
+        :htmlContent="npmStep1"
+      />
 
       <copy-content
         content="npm i @openobserve/browser-rum @openobserve/browser-logs"
       ></copy-content>
 
       <br />
-      <HTMLRenderer class="text-subtitle1 q-mt-xs" :htmlContent="npmStep2" />
+      <SanitizedHtmlRenderer
+        class="text-subtitle1 q-mt-xs"
+        :htmlContent="npmStep2"
+      />
       <CopyContent
         :key="displayConfiguration"
         :content="initConfiguration"
@@ -48,13 +54,13 @@ import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
 import { getImageURL, maskText } from "../../../utils/zincutils";
 import CopyContent from "../../CopyContent.vue";
-import HTMLRenderer from "@/components/dashboards/panels/HTMLRenderer.vue";
+import SanitizedHtmlRenderer from "@/components/SanitizedHtmlRenderer.vue";
 
 export default defineComponent({
   name: "rum-web-page",
   components: {
     CopyContent,
-    HTMLRenderer,
+    SanitizedHtmlRenderer,
   },
   props: {
     currOrgIdentifier: {

web/src/components/pipeline/AssociateFunction.vue

@@ -4,7 +4,9 @@
     class="full-width full-height"
     :class="store.state.theme === 'dark' ? 'bg-dark' : 'bg-white'"
   >
-    <div class="stream-routing-title q-pb-sm q-pl-md">Associate Function</div>
+    <div class="stream-routing-title q-pb-sm q-pl-md">
+      {{ t("pipeline.associateFunction") }}
+    </div>
     <q-separator />
     <div v-if="loading">
       <q-spinner
@@ -21,6 +23,7 @@
     </div>
     <div v-else class="stream-routing-container full-width full-height q-pa-md">
       <q-toggle
+        data-test="create-function-toggle"
         class="q-mb-sm"
         :label="isUpdating ? 'Edit function' : 'Create new function'"
         v-model="createNewFunction"
@@ -32,7 +35,7 @@
           style="padding-top: 0px"
         >
           <div
-            data-test="add-alert-stream-type-select"
+            data-test="associate-function-select-function-input"
             class="alert-stream-type o2-input q-mr-sm full-width"
             style="padding-top: 0"
           >
@@ -95,7 +98,7 @@
           :class="store.state.theme === 'dark' ? 'bg-dark' : 'bg-white'"
         >
           <q-btn
-            data-test="add-report-cancel-btn"
+            data-test="associate-function-cancel-btn"
             class="text-bold"
             :label="t('alerts.cancel')"
             text-color="light-text"
@@ -104,7 +107,7 @@
             @click="openCancelDialog"
           />
           <q-btn
-            data-test="add-report-save-btn"
+            data-test="associate-function-save-btn"
             :label="t('alerts.save')"
             class="text-bold no-border q-ml-md"
             color="secondary"
@@ -166,7 +169,7 @@ interface StreamRoute {
 const props = defineProps({
   defaultOrder: {
     type: Number,
-    required: true,
+    required: false,
     default: 1,
   },
   functionData: {

web/src/components/pipeline/NodeLinks.vue

@@ -1,122 +0,0 @@
-<template>
-  <div>
-    <div
-      data-test="add-alert-stream-type-select"
-      class="alert-stream-type o2-input q-mr-sm q-mb-sm"
-      style="padding-top: 0"
-    >
-      <q-select
-        v-model="selectedParentNode"
-        :options="parentNodes"
-        :label="t('pipeline.SelectParentNode') + ' *'"
-        :popup-content-style="{ textTransform: 'lowercase' }"
-        color="input-border"
-        bg-color="input-bg"
-        class="q-py-sm showLabelOnTop no-case"
-        stack-label
-        outlined
-        filled
-        dense
-        @update:model-value="updateChildNodes()"
-        :rules="[(val: any) => !!val || 'Field is required!']"
-        style="min-width: 220px"
-      />
-    </div>
-
-    <div
-      data-test="add-alert-stream-type-select"
-      class="alert-stream-type o2-input q-mr-sm"
-      style="padding-top: 0"
-    >
-      <q-select
-        v-model="selectedChildNode"
-        :options="childNodes"
-        :label="t('pipeline.SelectChildNode') + ' *'"
-        :popup-content-style="{ textTransform: 'lowercase' }"
-        color="input-border"
-        bg-color="input-bg"
-        class="q-py-sm showLabelOnTop no-case"
-        stack-label
-        outlined
-        filled
-        dense
-        style="min-width: 220px"
-        @update:model-value="updateNodeLinks()"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onBeforeMount, ref, type Ref } from "vue";
-import { useI18n } from "vue-i18n";
-
-const props = defineProps({
-  nodeLinks: {
-    type: Array,
-    required: true,
-  },
-});
-
-const { t } = useI18n();
-
-const emit = defineEmits(["update:link"]);
-
-const parentNodes: Ref<string[]> = ref([]);
-
-const childNodes: Ref<string[]> = ref([]);
-
-const selectedParentNode = ref("");
-
-const selectedChildNode = ref("");
-
-onBeforeMount(() => {
-  // Initialize parent nodes
-  parentNodes.value = Object.keys(props.nodeLinks);
-});
-
-const updateChildNodes = () => {
-  // Update child nodes on parent node selection
-  childNodes.value =
-    getAllPossibleDestinations(selectedParentNode.value, props.nodeLinks) || [];
-
-  updateNodeLinks();
-};
-
-function getAllPossibleDestinations(nodeName: string, nodeLinks: any) {
-  let visited = new Set(); // To keep track of visited nodes to avoid infinite loops
-  let destinations: string[] = []; // To store all unique destinations
-
-  function dfs(currentNode: string) {
-    // Add the node to the visited set
-    visited.add(currentNode);
-
-    // Process each 'to' connection
-    console.log(nodeLinks[currentNode]);
-    if (nodeLinks[currentNode] && nodeLinks[currentNode]?.to) {
-      nodeLinks[currentNode].to.forEach((node: string) => {
-        if (!visited.has(node)) {
-          destinations.push(node); // Add to destinations if not already visited
-          dfs(node); // Recurse
-        }
-      });
-    }
-  }
-
-  // Start DFS from the given node name
-  dfs(nodeName);
-
-  console.log(destinations);
-
-  return destinations;
-}
-
-const updateNodeLinks = () => {
-  emit("update:link", {
-    from: selectedParentNode.value,
-    to: selectedChildNode.value,
-  });
-};
-</script>
-
-<style lang="scss" scoped></style>

web/src/components/pipeline/PipelineEditor.vue

@@ -2,7 +2,7 @@
   <div class="flex justify-between items-center q-pb-sm">
     <div class="flex items-center">
       <div
-        data-test="add-alert-back-btn"
+        data-test="add-pipeline-back-btn"
         class="flex justify-center items-center q-mr-md cursor-pointer"
         style="
           border: 1.5px solid;
@@ -20,7 +20,7 @@
 
     <div class="flex justify-end">
       <q-btn
-        data-test="add-report-save-btn"
+        data-test="add-pipeline-save-btn"
         label="Cancel"
         class="text-bold border q-ml-md"
         padding="sm xl"
@@ -29,7 +29,7 @@
       />
 
       <q-btn
-        data-test="add-report-save-btn"
+        data-test="add-pipeline-save-btn"
         label="Save"
         class="text-bold no-border q-ml-md"
         color="secondary"
@@ -44,19 +44,30 @@
 
   <div class="flex q-mt-md">
     <div class="nodes-drag-container q-pr-md">
-      <div class="text-bold q-mb-sm q-mx-sm">Nodes</div>
+      <div
+        data-test="pipeline-editor-nodes-list-title"
+        class="text-bold q-mb-sm q-mx-sm"
+      >
+        {{ t("pipeline.nodes") }}
+      </div>
 
       <q-separator class="q-mb-md" />
 
       <template v-for="nodeType in nodeTypes" :key="nodeType.value">
         <div
+          :data-test="`pipeline-editor-${nodeType.value}-node`"
           :id="nodeType.value + '_node'"
           :draggable="true"
           @dragstart="(ev) => onNodeDragStart(ev, nodeType.value)"
           class="flex items-center node-type-row q-mt-sm q-mx-sm"
         >
           <img width="30" :src="symbolMapping[nodeType.value]" />
-          <div class="q-px-sm">{{ nodeType.label }}</div>
+          <div
+            :data-test="`pipeline-editor-${nodeType.value}-node-title`"
+            class="q-px-sm"
+          >
+            {{ nodeType.label }}
+          </div>
         </div>
       </template>
     </div>
@@ -69,12 +80,13 @@
       <div
         class="q-pl-sm q-pt-xs"
         :class="store.state.theme === 'dark' ? 'text-white' : 'text-black'"
+        data-test="pipeline-editor-execution-note"
       >
         Note: During execution of pipeline, routes will get executed before
         functions
       </div>
       <ChartRenderer
-        data-test="logs-search-result-bar-chart"
+        data-test="pipeline-editor-pipeline-chart"
         :data="plotChart"
         render-type="svg"
         style="height: calc(100vh - 165px)"

web/src/components/pipeline/PipelineEditorDemo.vue

@@ -1,106 +0,0 @@
-<!-- Copyright 2023 Zinc Labs Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-<template>
-  <div style="height: 100%; width: 100%">
-    <ChartRenderer
-      :data="{ options: options ?? { backgroundColor: 'transparent' } }"
-    />
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-import ChartRenderer from "@/components/dashboards/panels/ChartRenderer.vue";
-import { onMounted } from "vue";
-import { buildVariablesDependencyGraph } from "@/utils/dashboard/variables/variablesDependencyUtils";
-import { ref } from "vue";
-
-export default defineComponent({
-  name: "VariablesDependenciesGraph",
-  components: { ChartRenderer },
-  props: {
-    // we have list of variables
-    variablesList: {
-      type: Array,
-      default: [],
-      required: true,
-    },
-  },
-  setup(props: any) {
-    let variablesDependencyGraph: any = {};
-
-    const options: any = ref(null);
-
-    onMounted(() => {
-      // make dependency graph
-      variablesDependencyGraph = buildVariablesDependencyGraph(
-        props.variablesList
-      );
-
-      console.log(variablesDependencyGraph);
-      let edges = [];
-
-      // loop on all variables
-      for (let source in variablesDependencyGraph) {
-        // get its child variables
-        let childVariables = variablesDependencyGraph[source].childVariables;
-
-        // loop on child variables and push edges
-        for (let i = 0; i < childVariables.length; i++) {
-          let target = childVariables[i];
-          edges.push({ source: source, target: target });
-        }
-      }
-
-      options.value = {
-        backgroundColor: "transparent",
-        tooltip: {
-          show: false,
-        },
-        series: [
-          {
-            type: "graph",
-            layout: "force",
-            roam: true,
-            edgeSymbol: ["none", "arrow"],
-            symbol: "rect",
-            symbolSize: [50, 10],
-            draggable: true,
-            zoom: 5,
-            label: {
-              show: true,
-            },
-            data: Object.keys(variablesDependencyGraph).map((it: any) => {
-              return {
-                name: it,
-              };
-            }),
-            links: edges,
-            lineStyle: {
-              opacity: 0.5,
-              width: 2,
-            },
-          },
-        ],
-      };
-    });
-
-    return {
-      options,
-    };
-  },
-});
-</script>

web/src/components/pipeline/PipelinesList.vue

@@ -2,7 +2,7 @@
   <div v-if="currentRouteName === 'pipelines'">
     <div class="full-wdith">
       <q-table
-        data-test="alert-list-table"
+        data-test="pipeline-list-table"
         ref="qTable"
         :rows="pipelines"
         :columns="columns"
@@ -18,7 +18,7 @@
         <template v-slot:body-cell-actions="props">
           <q-td :props="props">
             <q-btn
-              :data-test="`alert-list-${props.row.name}-udpate-alert`"
+              :data-test="`pipeline-list-${props.row.name}-udpate-pipeline`"
               icon="edit"
               class="q-ml-xs"
               padding="sm"
@@ -30,7 +30,7 @@
               @click="editPipeline(props.row)"
             ></q-btn>
             <q-btn
-              :data-test="`alert-list-${props.row.name}-delete-alert`"
+              :data-test="`pipeline-list-${props.row.name}-delete-pipeline`"
               :icon="outlinedDelete"
               class="q-ml-xs"
               padding="sm"
@@ -53,11 +53,11 @@
           </q-td>
         </template>
         <template #top="scope">
-          <div class="q-table__title" data-test="alerts-list-title">
+          <div class="q-table__title" data-test="pipeline-list-title">
             {{ t("pipeline.header") }}
           </div>
           <q-input
-            data-test="alert-list-search-input"
+            data-test="pipeline-list-search-input"
             v-model="filterQuery"
             borderless
             filled
@@ -70,7 +70,7 @@
             </template>
           </q-input>
           <q-btn
-            data-test="alert-list-add-alert-btn"
+            data-test="pipeline-list-add-pipeline-btn"
             class="q-ml-md q-mb-xs text-bold no-border"
             padding="sm lg"
             color="secondary"

web/src/components/pipeline/StreamRouting.vue

@@ -4,7 +4,9 @@
     class="full-width full-height"
     :class="store.state.theme === 'dark' ? 'bg-dark' : 'bg-white'"
   >
-    <div class="stream-routing-title q-pb-sm q-pl-md">Routing</div>
+    <div class="stream-routing-title q-pb-sm q-pl-md">
+      {{ t("pipeline.routing") }}
+    </div>
     <q-separator />
 
     <div class="stream-routing-container q-px-md q-pt-md q-pr-xl">
@@ -57,7 +59,7 @@
           :class="store.state.theme === 'dark' ? 'bg-dark' : 'bg-white'"
         >
           <q-btn
-            data-test="add-report-cancel-btn"
+            data-test="stream-routing-cancel-btn"
             class="text-bold"
             :label="t('alerts.cancel')"
             text-color="light-text"
@@ -76,7 +78,7 @@
           />
           <q-btn
             v-if="isUpdating"
-            data-test="associate-function-delete-btn"
+            data-test="stream-routing-delete-btn"
             :label="t('pipeline.deleteNode')"
             class="text-bold no-border q-ml-md"
             color="negative"

web/src/components/pipeline/StreamSelection.vue

@@ -5,11 +5,11 @@
   >
     <q-form @submit="savePipeline">
       <div class="flex justify-between items-center q-px-md q-py-sm">
-        <div data-test="add-role-section-title" style="font-size: 18px">
+        <div data-test="add-pipeline-section-title" style="font-size: 18px">
           {{ t("pipeline.addPipeline") }}
         </div>
         <q-icon
-          data-test="add-role-close-dialog-btn"
+          data-test="add-pipeline-close-dialog-btn"
           name="cancel"
           class="cursor-pointer"
           size="20px"
@@ -21,7 +21,7 @@
 
       <div class="q-px-md">
         <div
-          data-test="add-alert-name-input"
+          data-test="add-pipeline-name-input"
           class="alert-name-input o2-input"
           style="padding-top: 12px"
         >
@@ -49,7 +49,7 @@
           />
         </div>
         <div
-          data-test="add-alert-name-input"
+          data-test="add-pipeline-description-input"
           class="alert-name-input o2-input q-mb-sm"
         >
           <q-input
@@ -67,7 +67,7 @@
           />
         </div>
         <div
-          data-test="add-alert-stream-type-select"
+          data-test="add-pipeline-stream-type-select"
           class="alert-stream-type o2-input q-mr-sm q-mb-sm"
           style="padding-top: 0"
         >
@@ -93,7 +93,7 @@
           />
         </div>
         <div
-          data-test="add-alert-stream-select"
+          data-test="add-pipeline-stream-select"
           class="o2-input"
           style="padding-top: 0"
         >
@@ -125,7 +125,7 @@
 
       <div class="flex justify-start q-mt-lg q-px-md">
         <q-btn
-          data-test="add-alert-cancel-btn"
+          data-test="add-pipeline-cancel-btn"
           :v-close-popup="true"
           class="q-mb-md text-bold"
           :label="t('alerts.cancel')"
@@ -134,7 +134,7 @@
           no-caps
         />
         <q-btn
-          data-test="add-alert-submit-btn"
+          data-test="add-pipeline-submit-btn"
           :label="t('alerts.save')"
           class="q-mb-md text-bold no-border q-ml-md"
           color="secondary"

web/src/locales/languages/en.json

@@ -388,7 +388,10 @@
     "deleteNode": "Delete",
     "addPipeline": "Add Pipeline",
     "deletePipeline": "Delete Pipeline",
-    "search": "Search Pipeline"
+    "search": "Search Pipeline",
+    "routing": "Routing",
+    "nodes": "Nodes",
+    "associateFunction": "Associate Function"
   },
   "function": {
     "header": "Functions",

web/src/plugins/logs/Index.vue

@@ -99,7 +99,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     >
                       Result not found.
                     </div>
-                    <HTMLRenderer
+                    <SanitizedHtmlRenderer
                       data-test="logs-search-error-message"
                       :htmlContent="searchObj.data.errorMsg"
                     />
@@ -138,8 +138,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     data-test="logs-search-no-stream-selected-text"
                     class="text-center col-10 q-mx-auto"
                   >
-                    <q-icon name="info"
-color="primary" size="md" /> Select a
+                    <q-icon name="info" color="primary" size="md" /> Select a
                     stream and press 'Run query' to continue. Additionally, you
                     can apply additional filters and adjust the date range to
                     enhance search.
@@ -158,8 +157,7 @@ color="primary" size="md" /> Select a
                     data-test="logs-search-error-message"
                     class="text-center q-mx-auto col-10"
                   >
-                    <q-icon name="info"
-color="primary" size="md" />
+                    <q-icon name="info" color="primary" size="md" />
                     {{ t("search.noRecordFound") }}
                   </h6>
                 </div>
@@ -176,8 +174,7 @@ color="primary" size="md" />
                     data-test="logs-search-error-message"
                     class="text-center q-mx-auto col-10"
                   >
-                    <q-icon name="info"
-color="primary" size="md" />
+                    <q-icon name="info" color="primary" size="md" />
                     {{ t("search.applySearch") }}
                   </h6>
                 </div>
@@ -236,7 +233,7 @@ import segment from "@/services/segment_analytics";
 import config from "@/aws-exports";
 import { verifyOrganizationStatus } from "@/utils/zincutils";
 import MainLayoutCloudMixin from "@/enterprise/mixins/mainLayout.mixin";
-import HTMLRenderer from "@/components/dashboards/panels/HTMLRenderer.vue";
+import SanitizedHtmlRenderer from "@/components/SanitizedHtmlRenderer.vue";
 
 export default defineComponent({
   name: "PageSearch",
@@ -244,7 +241,7 @@ export default defineComponent({
     SearchBar,
     IndexList,
     SearchResult,
-    HTMLRenderer,
+    SanitizedHtmlRenderer,
   },
   mixins: [MainLayoutCloudMixin],
   methods: {

web/src/plugins/metrics/Index.vue

@@ -174,7 +174,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             "
           >
             <h5 class="text-center">
-              <HTMLRenderer
+              <SanitizedHtmlRenderer
                 data-test="logs-search-error-message"
                 :htmlContent="searchObj.data.errorMsg"
               />
@@ -279,7 +279,7 @@ import SyntaxGuideMetrics from "./SyntaxGuideMetrics.vue";
 import { getConsumableRelativeTime } from "@/utils/date";
 import PanelSchemaRenderer from "@/components/dashboards/PanelSchemaRenderer.vue";
 import useStreams from "@/composables/useStreams";
-import HTMLRenderer from "@/components/dashboards/panels/HTMLRenderer.vue";
+import SanitizedHtmlRenderer from "@/components/SanitizedHtmlRenderer.vue";
 
 export default defineComponent({
   name: "AppMetrics",
@@ -291,7 +291,7 @@ export default defineComponent({
     AddToDashboard,
     SyntaxGuideMetrics,
     PanelSchemaRenderer,
-    HTMLRenderer,
+    SanitizedHtmlRenderer,
   },
   methods: {
     searchData() {

web/src/plugins/traces/Index.vue

@@ -86,7 +86,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 >
                   Result not found.
                 </div>
-                <HTMLRenderer
+                <SanitizedHtmlRenderer
                   data-test="logs-search-error-message"
                   :html-content="searchObj.data.errorMsg"
                 />
@@ -193,7 +193,7 @@ import { getConsumableRelativeTime } from "@/utils/date";
 import { cloneDeep } from "lodash-es";
 import { computed } from "vue";
 import useStreams from "@/composables/useStreams";
-import HTMLRenderer from "@/components/dashboards/panels/HTMLRenderer.vue";
+import SanitizedHtmlRenderer from "@/components/SanitizedHtmlRenderer.vue";
 
 export default defineComponent({
   name: "PageSearch",
@@ -201,7 +201,7 @@ export default defineComponent({
     SearchBar,
     IndexList,
     SearchResult,
-    HTMLRenderer,
+    SanitizedHtmlRenderer,
   },
   methods: {
     async setHistogramDate(date: any) {

web/src/views/MemberSubscription.vue

@@ -29,7 +29,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       Error while processing member subscription request.<br /><br />
     </div>
 
-    <HTMLRenderer
+    <SanitizedHtmlRenderer
       v-else-if="status == 'error' && error !== ''"
       :htmlContent="error"
       class="subscription_message"
@@ -59,12 +59,12 @@ import {
 } from "../utils/zincutils";
 
 import organizationsService from "../services/organizations";
-import HTMLRenderer from "@/components/dashboards/panels/HTMLRenderer.vue";
+import SanitizedHtmlRenderer from "@/components/SanitizedHtmlRenderer.vue";
 
 export default defineComponent({
   name: "PageUser",
   components: {
-    HTMLRenderer,
+    SanitizedHtmlRenderer,
   },
   data() {
     return {