feat(editor): promql format; store selected query type (#559)

* feat(editor): promql format; store selected query type

* refactor: remove return

Author: ZonaHex

src/api/formatter.ts

@@ -0,0 +1,25 @@
+import axios from 'axios'
+
+export interface PromqlFormatRequest {
+  query: string
+}
+
+export interface PromqlFormatResponse {
+  status: string
+  data: string
+}
+
+/**
+ * Format PromQL query using the Prometheus API
+ * @param query - The PromQL query string to format
+ * @returns Promise<PromqlFormatResponse> - The formatted query response
+ */
+
+const prometheusBaseURL = 'v1/prometheus/api/v1'
+export const formatPromqlQuery = async (query: string): Promise<PromqlFormatResponse> => {
+  return axios.post(`${prometheusBaseURL}/format_query`, `query=${encodeURIComponent(query)}`, {
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+  })
+}

src/utils/sql.ts

@@ -1,4 +1,6 @@
 import { format as sqlFormat } from 'sql-formatter'
+import { formatPromqlQuery, type PromqlFormatResponse } from '@/api/formatter'
+import { Message } from '@arco-design/web-vue'
 
 export const parseSqlStatements = (sql: string): { text: string; start: number; end: number }[] => {
   if (!sql) return []
@@ -127,16 +129,34 @@ export const sqlFormatter = (code: string) => {
       formatted = formatted.endsWith(';') ? formatted : `${formatted};`
     } catch (formattingError) {
       console.warn(`Failed to format SQL statement: ${formattingError}`)
+      Message.warning('Failed to format. Please check console for details.')
       formatted = trimmed.endsWith(';') ? trimmed : `${trimmed};`
     }
-
     return formatted
   } catch (error) {
     console.error('SQL formatting error:', error)
     return code
   }
 }
 
+export const promqlFormatter = async (code: string): Promise<string> => {
+  try {
+    const trimmed = code.trim()
+    if (!trimmed) {
+      return code
+    }
+    const response = await formatPromqlQuery(trimmed)
+    if (response.status === 'success') {
+      return response.data
+    }
+    console.warn('Unexpected response format from PromQL formatter:', response)
+    return trimmed
+  } catch (error) {
+    console.error('PromQL formatting error:', error)
+    return code
+  }
+}
+
 export function debounce<T extends (...args: any[]) => any>(fn: T, delay: number): (...args: Parameters<T>) => void {
   let timer: number | null = null
   return (...args: Parameters<T>) => {

src/views/dashboard/query/editor.vue

@@ -68,8 +68,8 @@ a-card.editor-card(:bordered="false")
       TimeAssistance(ref="tsRef" :cm="currentView")
     .query-select
       a-space(size="medium")
-        a-tooltip(v-if="queryType === 'sql'" mini :content="$t('dashboard.format')")
-          a-button(type="outline" :disabled="isButtonDisabled" @click="formatSql")
+        a-tooltip(mini :content="$t('dashboard.format')")
+          a-button(type="outline" :disabled="isButtonDisabled" @click="formatSql()")
             template(#icon)
               icon-code-block.icon-18
         a-tooltip(mini :content="$t('dashboard.clearCode')")
@@ -162,7 +162,7 @@ a-card.editor-card(:bordered="false")
   import { acceptCompletion } from '@codemirror/autocomplete'
   import type { PromForm } from '@/store/modules/code-run/types'
   import { useStorage } from '@vueuse/core'
-  import { sqlFormatter, parseSqlStatements, findStatementAtPosition } from '@/utils/sql'
+  import { sqlFormatter, parseSqlStatements, findStatementAtPosition, promqlFormatter } from '@/utils/sql'
   import { Message } from '@arco-design/web-vue'
   import fileDownload from 'js-file-download'
 
@@ -357,9 +357,15 @@ a-card.editor-card(:bordered="false")
     secondaryCodeRunning.value = false
   }
 
-  const formatSql = () => {
+  const formatSql = async () => {
     if (queryType.value === 'sql' && codes.value.sql.trim().length > 0) {
       codes.value.sql = sqlFormatter(codes.value.sql)
+    } else if (queryType.value === 'promql' && codes.value.promql.trim().length > 0) {
+      try {
+        codes.value.promql = await promqlFormatter(codes.value.promql)
+      } catch (error) {
+        //
+      }
     }
   }
 
@@ -422,11 +428,33 @@ a-card.editor-card(:bordered="false")
   }
 
   window.addEventListener('beforeunload', () => {
-    localStorage.setItem('queryCode', JSON.stringify(codes.value))
+    localStorage.setItem(
+      'queryCode',
+      JSON.stringify({
+        sql: codes.value.sql,
+        promql: codes.value.promql,
+        type: queryType.value,
+      })
+    )
   })
 
   onMounted(() => {
-    codes.value = useStorage('queryCode', { sql: '', promql: '' }).value
+    const stored = useStorage('queryCode', { sql: '', promql: '', type: 'sql' }).value
+    codes.value.sql = stored.sql || ''
+    codes.value.promql = stored.promql || ''
+    queryType.value = stored.type || 'sql'
+  })
+
+  // Watch queryType changes and save to localStorage immediately
+  watch(queryType, () => {
+    localStorage.setItem(
+      'queryCode',
+      JSON.stringify({
+        sql: codes.value.sql,
+        promql: codes.value.promql,
+        type: queryType.value,
+      })
+    )
   })
 
   // TODO: i18n config