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": "面板",