fix: dashboard query editor scroll and query error message issue (#2159)

- #2093 - #1573
openobserve · Dec 11, 2023 · 80730bc · 80730bc
1 parent 7921208
commit 80730bc
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git a/web/src/components/dashboards/QueryEditor.vue b/web/src/components/dashboards/QueryEditor.vue
@@ -332,8 +332,9 @@ export default defineComponent({
     onMounted(async () => {
       provider.value?.dispose();
       registerAutoCompleteProvider();
-      window.addEventListener("click", () => {
-        editorObj.layout();
+      window.addEventListener("resize", async () => {
+        await nextTick();
+          editorObj.layout();
         // queryEditorRef.value.resetEditorLayout();
       });
     });
@@ -476,7 +477,7 @@ export default defineComponent({
 
 <style>
 #editor {
-  min-height: 100%;
+  height: 100%;
   width: 100%;
   /* min-height: 4rem; */
   border-radius: 5px;

diff --git a/web/src/components/dashboards/addPanel/DashboardQueryEditor.vue b/web/src/components/dashboards/addPanel/DashboardQueryEditor.vue
@@ -106,8 +106,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     style="overflow: hidden"
     data-test="dashboard-query"
   >
-    <div class="row">
-      <div class="col">
+    <div class="column" style="width: 100%; height: 100%">
+      <div class="col" style="width: 100%">
         <query-editor
           ref="queryEditorRef"
           class="monaco-editor"
@@ -129,9 +129,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           "
           :language="dashboardPanelData.data.queryType"
         ></query-editor>
-        <div style="color: red" class="q-mx-sm">
-          {{ dashboardPanelData.meta.errors.queryErrors.join(", ") }}&nbsp;
-        </div>
+      </div>
+      <div style="color: red; z-index: 100000" class="q-mx-sm col-auto">
+        {{ dashboardPanelData.meta.errors.queryErrors.join(", ") }}
       </div>
     </div>
   </div>
@@ -574,6 +574,14 @@ export default defineComponent({
       { deep: true }
     );
 
+    // on queryerror change dispatch resize event to resize monaco editor
+    watch(
+      () => dashboardPanelData.meta.errors.queryErrors,
+      () => {
+        window.dispatchEvent(new Event("resize"));
+      }
+    );
+
     // This function parses the custom query and generates the errors and custom fields
     const updateQueryValue = () => {
       // store the query in the dashboard panel data