mirror of
https://github.com/openobserve/openobserve.git
synced 2026-11-04 16:09:05 +00:00
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
___
<details> <summary><h3> File Walkthrough</h3></summary>
<table><thead><tr><th></th><th align="left">Relevant
files</th></tr></thead><tbody><tr><td><strong>Bug
fix</strong></td><td><table>
<tr>
<td>
<details>
<summary><strong>CodeQueryEditor.vue</strong><dd><code>Add PromQL
language registration</code>
</dd></summary>
<hr>
web/src/components/CodeQueryEditor.vue
<ul><li>Add condition check for <code>promql</code> language<br> <li>
Invoke <code>monaco.languages.register({ id: "promql" })</code></ul>
</details>
</td>
<td><a
href="https://github.com/openobserve/openobserve/pull/9793/files#diff-52a36bf2d64e590036ed1c1f89b07a4a6b971a84e4fae9b4272cbc69d63f9bef">+3/-0</a>
</td>
</tr>
</table></td></tr></tr></tbody></table>
</details>
___
---------
Co-authored-by: Sai Nikhil <nikhil@openobserve.ai>
Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
This commit is contained in:
Omkar Kesarkhane
co-authored by
Sai Nikhil
greptile-apps[bot]
github-actions[bot]
Sai Nikhil
greptile-apps[bot]
github-actions[bot]
parent
0c7d3f7485
commit
12e73bcf18
@@ -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" });
|
||||
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
@@ -99,7 +99,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
</div>
|
||||
<ConfirmDialog
|
||||
title="Change Query Mode"
|
||||
message="Are you sure you want to change the query mode? The data saved for X-Axis, Y-Axis and Filters will be wiped off."
|
||||
:message="confirmDialogMessage"
|
||||
@update:ok="changeToggle()"
|
||||
@update:cancel="confirmQueryModeChangeDialog = false"
|
||||
v-model="confirmQueryModeChangeDialog"
|
||||
@@ -145,6 +145,7 @@ export default defineComponent({
|
||||
updateXYFieldsForCustomQueryMode,
|
||||
} = useDashboardPanelData(dashboardPanelDataPageKey);
|
||||
const confirmQueryModeChangeDialog = ref(false);
|
||||
const confirmDialogMessage = ref("Are you sure you want to change the query mode? The data saved for X-Axis, Y-Axis and Filters will be wiped off.");
|
||||
|
||||
const selectedButtonQueryType = ref("sql");
|
||||
// this is the value of the current button
|
||||
@@ -266,6 +267,22 @@ export default defineComponent({
|
||||
dashboardPanelData.layout.showQueryBar = true;
|
||||
} else {
|
||||
popupSelectedButtonType.value = selectedQueryType;
|
||||
|
||||
// Set appropriate message based on the transition
|
||||
if (
|
||||
isPromQLMode.value &&
|
||||
isCustomMode.value &&
|
||||
selectedQueryType === "builder"
|
||||
) {
|
||||
// Switching from PromQL custom to builder
|
||||
confirmDialogMessage.value =
|
||||
"Are you sure you want to switch to builder mode? Your custom PromQL query will be wiped off.";
|
||||
} else {
|
||||
// Default message for other transitions
|
||||
confirmDialogMessage.value =
|
||||
"Are you sure you want to change the query mode? The data saved for X-Axis, Y-Axis and Filters will be wiped off.";
|
||||
}
|
||||
|
||||
dashboardPanelData.data.queries[0].query != ""
|
||||
? (confirmQueryModeChangeDialog.value = true)
|
||||
: changeToggle();
|
||||
@@ -400,6 +417,7 @@ export default defineComponent({
|
||||
onUpdateQueryMode,
|
||||
changeToggle,
|
||||
confirmQueryModeChangeDialog,
|
||||
confirmDialogMessage,
|
||||
selectedButtonType,
|
||||
store,
|
||||
selectedButtonQueryType,
|
||||
|
||||
@@ -40,7 +40,10 @@
|
||||
self="bottom middle"
|
||||
max-width="250px"
|
||||
>
|
||||
({{ t("dashboard.optional") }}) <b>Legend - </b>
|
||||
{{ t("dashboard.overrideMessage") }}
|
||||
<br />
|
||||
{{ t("dashboard.overrideMessageExample") }}
|
||||
</q-tooltip>
|
||||
</q-icon>
|
||||
</div>
|
||||
@@ -79,9 +82,11 @@
|
||||
self="bottom middle"
|
||||
max-width="250px"
|
||||
>
|
||||
<b>Step - </b>
|
||||
({{ t("dashboard.optional") }}) <b>Step - </b>
|
||||
{{ t("dashboard.stepValueTooltip") }}
|
||||
<br />
|
||||
{{ t("dashboard.stepValueTooltipInfo") }}
|
||||
<br />
|
||||
{{ t("dashboard.stepValueExample") }}
|
||||
</q-tooltip>
|
||||
</q-icon>
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -1046,7 +1046,10 @@
|
||||
"hiddenColumns": "非表示列",
|
||||
"stickyFirstColumn": "スティッキー・ファースト・カラム",
|
||||
"stickyColumns": "スティッキーカラム",
|
||||
"promqlTableMode": "プロムQL テーブルモード"
|
||||
"promqlTableMode": "プロムQL テーブルモード",
|
||||
"overrideMessageExample": "たとえば、{endpoint} はエンドポイントのラベル値に置き換えられます。",
|
||||
"stepValueTooltipInfo": "指定しない場合は、パネル設定のステップ値が使用されます。",
|
||||
"optional": "[オプション]"
|
||||
},
|
||||
"panel": {
|
||||
"header": "パネル",
|
||||
|
||||
@@ -1030,7 +1030,10 @@
|
||||
"hiddenColumns": "히든 컬럼",
|
||||
"stickyFirstColumn": "스티키 퍼스트 컬럼",
|
||||
"stickyColumns": "스티키 컬럼",
|
||||
"promqlTableMode": "ProMQL 테이블 모드"
|
||||
"promqlTableMode": "ProMQL 테이블 모드",
|
||||
"overrideMessageExample": "예를 들어, {endpoint} 는 엔드포인트의 레이블 값으로 대체됩니다.",
|
||||
"stepValueTooltipInfo": "지정하지 않으면 패널 구성의 단계 값이 사용됩니다.",
|
||||
"optional": "선택 사항"
|
||||
},
|
||||
"panel": {
|
||||
"header": "패널",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -1029,8 +1029,11 @@
|
||||
"visibleColumns": "可见列",
|
||||
"hiddenColumns": "隐藏列",
|
||||
"stickyFirstColumn": "置顶第一列",
|
||||
"stickyColumns": "置顶列",
|
||||
"promqlTableMode": "PromQL 表格模式"
|
||||
"stickyColumns": "置顶专栏",
|
||||
"promqlTableMode": "PromQL 表格模式",
|
||||
"overrideMessageExample": "例如，{endpoint} 将被替换为端点的标签值。",
|
||||
"stepValueTooltipInfo": "如果未指定，则将使用面板配置中的步长值。",
|
||||
"optional": "可选"
|
||||
},
|
||||
"panel": {
|
||||
"header": "面板",
|
||||
|
||||
Reference in New Issue
Block a user