fix: promql query legend config suggestion issue for dashboard (#9691)

### **PR Type**
Enhancement


___

### **Description**
- Dynamic PromQL field suggestions from groupedFields schema

- Added `watch` import for additional reactivity


___



<details> <summary><h3> File Walkthrough</h3></summary>

<table><thead><tr><th></th><th align="left">Relevant
files</th></tr></thead><tbody><tr><td><strong>Enhancement</strong></td><td><table>
<tr>
  <td>
    <details>
<summary><strong>ConfigPanel.vue</strong><dd><code>Refactor PromQL
suggestion logic</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></summary>
<hr>

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

<ul><li>Imported <code>watch</code> alongside <code>markRaw</code> and
<code>watchEffect</code><br> <li> Removed static
<code>meta.stream.selectedStreamFields</code> mapping<br> <li> Computed
<code>dashboardSelectfieldPromQlList</code> from
<code>groupedFields.schema</code><br> <li> Added null checks for current
stream and schema</ul>


</details>


  </td>
<td><a
href="https://github.com/openobserve/openobserve/pull/9691/files#diff-c3a6e64dff02b58bb7cdc3f0668990b41ff41544b4c5e991bbcd989ad4bba3f8">+26/-11</a>&nbsp;
</td>

</tr>
</table></td></tr></tr></tbody></table>

</details>

___

---------

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

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

@@ -2180,16 +2180,31 @@ export default defineComponent({
       }
     };
 
-    const dashboardSelectfieldPromQlList = computed(() =>
-      props.dashboardPanelData.meta.stream.selectedStreamFields.map(
-        (it: any) => {
-          return {
-            label: it.name,
-            value: it.name,
-          };
-        },
-      ),
-    );
+    const dashboardSelectfieldPromQlList = computed(() => {
+      // Get fields from groupedFields based on current query's stream
+      const currentQuery =
+        props.dashboardPanelData.data.queries[
+          props.dashboardPanelData.layout.currentQueryIndex
+        ];
+      const currentStream = currentQuery?.fields?.stream;
+
+      if (!currentStream) return [];
+
+      // Find the current stream in groupedFields
+      const streamFields =
+        props.dashboardPanelData.meta.streamFields.groupedFields.find(
+          (group: any) => group.name === currentStream,
+        );
+
+      if (!streamFields?.schema) return [];
+
+      return streamFields.schema.map((it: any) => {
+        return {
+          label: it.name,
+          value: it.name,
+        };
+      });
+    });
 
     const timeShifts = [];