From 12e73bcf18d2e47ff753a3ce6c17adc408cd788a Mon Sep 17 00:00:00 2001 From: Omkar Kesarkhane <127078473+omkarK06@users.noreply.github.com> Date: Mon, 29 Dec 2025 15:50:28 +0530 Subject: [PATCH] fix: Register PromQL language for monaco-editor and metrics UI fixes (#9793) ### **PR Type** Bug fix ___ ### **Description** - Register `promql` language in onMounted hook of CodeQueryEditor.vue ___

File Walkthrough
Relevant files
Bug fix
CodeQueryEditor.vue
Add PromQL language registration                                                 
web/src/components/CodeQueryEditor.vue
  • Add condition check for promql language
  • Invoke monaco.languages.register({ id: "promql" })
 +3/-0     
___ --------- Co-authored-by: Sai Nikhil Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] --- web/src/components/CodeQueryEditor.vue | 3 +++ .../addPanel/DashboardQueryEditor.vue | 15 ++++++++++++++ .../dashboards/addPanel/QueryTypeSelector.vue | 20 ++++++++++++++++++- .../components/PromQLBuilderOptions.vue | 7 ++++++- .../dashboard/usePanelDataLoader.ts | 16 ++++++++++++++- web/src/composables/useDashboardPanel.ts | 5 +++++ web/src/locales/languages/de.json | 5 ++++- web/src/locales/languages/en.json | 7 +++++-- web/src/locales/languages/es.json | 5 ++++- web/src/locales/languages/fr.json | 5 ++++- web/src/locales/languages/it.json | 5 ++++- web/src/locales/languages/ja.json | 5 ++++- web/src/locales/languages/ko.json | 5 ++++- web/src/locales/languages/nl.json | 5 ++++- web/src/locales/languages/pt.json | 5 ++++- web/src/locales/languages/tr.json | 5 ++++- web/src/locales/languages/zh.json | 7 +++++-- 17 files changed, 109 insertions(+), 16 deletions(-) diff --git a/web/src/components/CodeQueryEditor.vue b/web/src/components/CodeQueryEditor.vue index 4aa42a3f70..10dbea86e9 100644 --- a/web/src/components/CodeQueryEditor.vue +++ b/web/src/components/CodeQueryEditor.vue @@ -465,6 +465,9 @@ export default defineComponent({ onMounted(async () => { provider.value?.dispose(); + if (props.language === "promql") { + monaco.languages.register({ id: "promql" }); + } if (props.language === "vrl") { monaco.languages.register({ id: "vrl" }); diff --git a/web/src/components/dashboards/addPanel/DashboardQueryEditor.vue b/web/src/components/dashboards/addPanel/DashboardQueryEditor.vue index 1121744f71..af76ca19ec 100644 --- a/web/src/components/dashboards/addPanel/DashboardQueryEditor.vue +++ b/web/src/components/dashboards/addPanel/DashboardQueryEditor.vue @@ -451,6 +451,21 @@ export default defineComponent({ addQuery(); dashboardPanelData.layout.currentQueryIndex = dashboardPanelData.data.queries.length - 1; + // For metrics page: when switching from custom to builder in PromQL, set sample query + if ( + dashboardPanelData.data.queryType === "promql" && + dashboardPanelData.data.queries[ + dashboardPanelData.layout.currentQueryIndex + ].fields.stream + ) { + const streamName = + dashboardPanelData.data.queries[ + dashboardPanelData.layout.currentQueryIndex + ].fields.stream; + dashboardPanelData.data.queries[ + dashboardPanelData.layout.currentQueryIndex + ].query = `${streamName}{}`; + } }; const updatePromQLQuery = async (value, event) => { diff --git a/web/src/components/dashboards/addPanel/QueryTypeSelector.vue b/web/src/components/dashboards/addPanel/QueryTypeSelector.vue index dcd2ff3e1d..37f9862ca8 100644 --- a/web/src/components/dashboards/addPanel/QueryTypeSelector.vue +++ b/web/src/components/dashboards/addPanel/QueryTypeSelector.vue @@ -99,7 +99,7 @@ along with this program. If not, see . + ({{ t("dashboard.optional") }}) Legend - {{ t("dashboard.overrideMessage") }} +
+ {{ t("dashboard.overrideMessageExample") }} @@ -79,9 +82,11 @@ self="bottom middle" max-width="250px" > - Step - + ({{ t("dashboard.optional") }}) Step - {{ t("dashboard.stepValueTooltip") }}
+ {{ t("dashboard.stepValueTooltipInfo") }} +
{{ t("dashboard.stepValueExample") }} diff --git a/web/src/composables/dashboard/usePanelDataLoader.ts b/web/src/composables/dashboard/usePanelDataLoader.ts index 57abe0a76c..669e9c1c0b 100644 --- a/web/src/composables/dashboard/usePanelDataLoader.ts +++ b/web/src/composables/dashboard/usePanelDataLoader.ts @@ -925,12 +925,26 @@ export const usePanelDataLoader = ( // This way we can detect the first chunk properly const { traceId } = generateTraceContext(); + + const queryStepValue = it.config?.step_value?.trim()?.length + ? it.config?.step_value?.trim() + : undefined; + + const panelStepValue = panelSchema.value.config.step_value?.trim() + ?.length + ? panelSchema.value.config?.step_value?.trim() + : undefined; + const payload = { queryReq: { query: query, start_time: startISOTimestamp, end_time: endISOTimestamp, - step: it.config.step_value ?? panelSchema.value.config.step_value ?? "0", + step: queryStepValue + ? queryStepValue + : panelStepValue + ? panelStepValue + : "0", query_type: it.config.query_type || "range", // Add query_type from config (default: range) }, type: "promql" as const, diff --git a/web/src/composables/useDashboardPanel.ts b/web/src/composables/useDashboardPanel.ts index afe1536718..9401c7dbfd 100644 --- a/web/src/composables/useDashboardPanel.ts +++ b/web/src/composables/useDashboardPanel.ts @@ -2425,6 +2425,11 @@ const useDashboardPanelData = (pageKey: string = "dashboard") => { return; } + // Don't generate auto query for promql query type + if (dashboardPanelData?.data?.queryType === "promql") { + return; + } + let query = ""; if (dashboardPanelData.data.type == "geomap") { query = geoMapChart(dashboardPanelData); diff --git a/web/src/locales/languages/de.json b/web/src/locales/languages/de.json index 110d546a4e..c45945b1f8 100644 --- a/web/src/locales/languages/de.json +++ b/web/src/locales/languages/de.json @@ -1030,7 +1030,10 @@ "hiddenColumns": "Versteckte Spalten", "stickyFirstColumn": "Klebrige erste Spalte", "stickyColumns": "Klebrige Spalten", - "promqlTableMode": "PromQL-Tabellenmodus" + "promqlTableMode": "PromQL-Tabellenmodus", + "overrideMessageExample": "Beispielsweise wird {endpoint} durch den Labelwert für Endpunkt ersetzt.", + "stepValueTooltipInfo": "Wenn nicht angegeben, wird der Schrittwert aus der Panel-Konfiguration verwendet.", + "optional": "Fakultativ" }, "panel": { "header": "Panel", diff --git a/web/src/locales/languages/en.json b/web/src/locales/languages/en.json index f6cc8f1bb2..f1e18e1fe4 100644 --- a/web/src/locales/languages/en.json +++ b/web/src/locales/languages/en.json @@ -961,7 +961,8 @@ "maximum": "Maximum", "fixedValue": "Fixed Value", "legendLabel": "Legend", - "overrideMessage": "Series name overrides. For example, {endpoint} will be replaced with the label value for endpoint.", + "overrideMessage": "Series name overrides.", + "overrideMessageExample": "For example, {endpoint} will be replaced with the label value for endpoint.", "unsavedMessage": "You have unsaved changes. Are you sure you want to leave?", "addFieldMessage": "Please add a field from the list", "currentFolderLabel": "Current Folder", @@ -1059,6 +1060,7 @@ "editJson": "Edit Dashboard JSON", "stepValue": "Step Value", "stepValueTooltip": "The interval between datapoints, which must be returned from the range query.", + "stepValueTooltipInfo": "If not specified, the step value from Panel Configuration will be used.", "stepValueExample": "Eg: 10s, 1h", "groupMultiYAxisTrellis": "Group multi Y-axis for trellis", "groupMultiYAxisTrellisTooltipTitle": "Group multi Y-axis for trellis", @@ -1166,7 +1168,8 @@ "colorBySeriesTitle": "Color by series", "colorBySeriesTooltip": "Apply colors to series for better visual distinction in charts. Customize colors for each series to enhance data visualization.", "editColorBySeries": " Edit color by series", - "applyColorBySeries": " Apply color by series" + "applyColorBySeries": " Apply color by series", + "optional": "Optional" }, "panel": { "header": "Panel", diff --git a/web/src/locales/languages/es.json b/web/src/locales/languages/es.json index 33aec2a98b..d73c3cc257 100644 --- a/web/src/locales/languages/es.json +++ b/web/src/locales/languages/es.json @@ -1030,7 +1030,10 @@ "hiddenColumns": "Columnas ocultas", "stickyFirstColumn": "Primera columna adhesiva", "stickyColumns": "Columnas adhesivas", - "promqlTableMode": "Modo de tabla PromQL" + "promqlTableMode": "Modo de tabla PromQL", + "overrideMessageExample": "Por ejemplo, {endpoint} se reemplazará por el valor de etiqueta de endpoint.", + "stepValueTooltipInfo": "Si no se especifica, se utilizará el valor del paso de Configuración del panel.", + "optional": "Opcional" }, "panel": { "header": "Panel", diff --git a/web/src/locales/languages/fr.json b/web/src/locales/languages/fr.json index c3ecdfbcf9..4328159260 100644 --- a/web/src/locales/languages/fr.json +++ b/web/src/locales/languages/fr.json @@ -1030,7 +1030,10 @@ "hiddenColumns": "Colonnes masquées", "stickyFirstColumn": "Première colonne collante", "stickyColumns": "Colonnes adhésives", - "promqlTableMode": "Mode Tableau ProMQL" + "promqlTableMode": "Mode Tableau ProMQL", + "overrideMessageExample": "Par exemple, {endpoint} sera remplacé par la valeur d'étiquette du point de terminaison.", + "stepValueTooltipInfo": "Si elle n'est pas spécifiée, la valeur de l'étape de Configuration du panneau sera utilisée.", + "optional": "Facultatif" }, "panel": { "header": "Panneau", diff --git a/web/src/locales/languages/it.json b/web/src/locales/languages/it.json index 7654c17b4f..f9a91f013c 100644 --- a/web/src/locales/languages/it.json +++ b/web/src/locales/languages/it.json @@ -1030,7 +1030,10 @@ "hiddenColumns": "Colonne nascoste", "stickyFirstColumn": "Prima colonna appiccicosa", "stickyColumns": "Colonne adesive", - "promqlTableMode": "Modalità tabella ProMQL" + "promqlTableMode": "Modalità tabella ProMQL", + "overrideMessageExample": "Ad esempio, {endpoint} verrà sostituito con il valore dell'etichetta per endpoint.", + "stepValueTooltipInfo": "Se non specificato, verrà utilizzato il valore del passo di Panel Configuration.", + "optional": "Facoltativo" }, "panel": { "header": "Pannello", diff --git a/web/src/locales/languages/ja.json b/web/src/locales/languages/ja.json index c24546d49f..15673fa25a 100644 --- a/web/src/locales/languages/ja.json +++ b/web/src/locales/languages/ja.json @@ -1046,7 +1046,10 @@ "hiddenColumns": "非表示列", "stickyFirstColumn": "スティッキー・ファースト・カラム", "stickyColumns": "スティッキーカラム", - "promqlTableMode": "プロムQL テーブルモード" + "promqlTableMode": "プロムQL テーブルモード", + "overrideMessageExample": "たとえば、{endpoint} はエンドポイントのラベル値に置き換えられます。", + "stepValueTooltipInfo": "指定しない場合は、パネル設定のステップ値が使用されます。", + "optional": "[オプション]" }, "panel": { "header": "パネル", diff --git a/web/src/locales/languages/ko.json b/web/src/locales/languages/ko.json index 258318a318..8202624b13 100644 --- a/web/src/locales/languages/ko.json +++ b/web/src/locales/languages/ko.json @@ -1030,7 +1030,10 @@ "hiddenColumns": "히든 컬럼", "stickyFirstColumn": "스티키 퍼스트 컬럼", "stickyColumns": "스티키 컬럼", - "promqlTableMode": "ProMQL 테이블 모드" + "promqlTableMode": "ProMQL 테이블 모드", + "overrideMessageExample": "예를 들어, {endpoint} 는 엔드포인트의 레이블 값으로 대체됩니다.", + "stepValueTooltipInfo": "지정하지 않으면 패널 구성의 단계 값이 사용됩니다.", + "optional": "선택 사항" }, "panel": { "header": "패널", diff --git a/web/src/locales/languages/nl.json b/web/src/locales/languages/nl.json index 9fcf91366e..aa7fccc322 100644 --- a/web/src/locales/languages/nl.json +++ b/web/src/locales/languages/nl.json @@ -1030,7 +1030,10 @@ "hiddenColumns": "Verborgen kolommen", "stickyFirstColumn": "Sticky eerste kolom", "stickyColumns": "Kleverige kolommen", - "promqlTableMode": "ProMQL-tabelmodus" + "promqlTableMode": "ProMQL-tabelmodus", + "overrideMessageExample": "{endpoint} wordt bijvoorbeeld vervangen door de labelwaarde voor eindpunt.", + "stepValueTooltipInfo": "Indien niet gespecificeerd, wordt de stapwaarde van Paneelconfiguratie gebruikt.", + "optional": "Optioneel" }, "panel": { "header": "Paneel", diff --git a/web/src/locales/languages/pt.json b/web/src/locales/languages/pt.json index 76d50c5c89..0018a596ef 100644 --- a/web/src/locales/languages/pt.json +++ b/web/src/locales/languages/pt.json @@ -1030,7 +1030,10 @@ "hiddenColumns": "Colunas ocultas", "stickyFirstColumn": "Primeira coluna pegajosa", "stickyColumns": "Colunas adesivas", - "promqlTableMode": "Modo de tabela ProMQL" + "promqlTableMode": "Modo de tabela ProMQL", + "overrideMessageExample": "Por exemplo, {endpoint} será substituído pelo valor do rótulo para endpoint.", + "stepValueTooltipInfo": "Se não for especificado, o valor da etapa da Configuração do painel será usado.", + "optional": "Opcional" }, "panel": { "header": "Painel", diff --git a/web/src/locales/languages/tr.json b/web/src/locales/languages/tr.json index fb074bc028..8dba3249ea 100644 --- a/web/src/locales/languages/tr.json +++ b/web/src/locales/languages/tr.json @@ -1030,7 +1030,10 @@ "hiddenColumns": "Gizli Sütunlar", "stickyFirstColumn": "Yapışkan İlk Sütun", "stickyColumns": "Yapışkan Sütunlar", - "promqlTableMode": "PromQL Tablo Modu" + "promqlTableMode": "PromQL Tablo Modu", + "overrideMessageExample": "Örneğin, {endpoint} uç nokta için etiket değeri ile değiştirilecektir.", + "stepValueTooltipInfo": "Belirtilmemişse, Panel Yapılandırması'ndaki adım değeri kullanılacaktır.", + "optional": "İsteğe Bağlı" }, "panel": { "header": "Panel", diff --git a/web/src/locales/languages/zh.json b/web/src/locales/languages/zh.json index 1150197cc5..306844c95d 100644 --- a/web/src/locales/languages/zh.json +++ b/web/src/locales/languages/zh.json @@ -1029,8 +1029,11 @@ "visibleColumns": "可见列", "hiddenColumns": "隐藏列", "stickyFirstColumn": "置顶第一列", - "stickyColumns": "置顶列", - "promqlTableMode": "PromQL 表格模式" + "stickyColumns": "置顶专栏", + "promqlTableMode": "PromQL 表格模式", + "overrideMessageExample": "例如，{endpoint} 将被替换为端点的标签值。", + "stepValueTooltipInfo": "如果未指定，则将使用面板配置中的步长值。", + "optional": "可选" }, "panel": { "header": "面板",