From f8709883253279b9ea1006c48e15a3562174ca01 Mon Sep 17 00:00:00 2001
From: Quentin MOUTY <quentin.mouty@ovhcloud.com>
Date: Mon, 20 Jan 2025 16:26:03 +0000
Subject: [PATCH 1/3] fix #2 Manage to save the state of filters

---
 package-lock.json              |  4 ++--
 src/components/QueryEditor.tsx | 25 +++++++++++++------------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5f8cbf3..45487e8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "akvorado",
-  "version": "1.0.30",
+  "version": "1.0.33",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "akvorado",
-      "version": "1.0.30",
+      "version": "1.0.33",
       "license": "Apache-2.0",
       "dependencies": {
         "@codemirror/autocomplete": "^6.17.0",
diff --git a/src/components/QueryEditor.tsx b/src/components/QueryEditor.tsx
index 58b28ab..4af908e 100644
--- a/src/components/QueryEditor.tsx
+++ b/src/components/QueryEditor.tsx
@@ -2,7 +2,7 @@ import React, { ChangeEvent, useState } from 'react';
 import { InlineField, Input, Stack, Select, AsyncMultiSelect, useTheme2, CollapsableSection } from '@grafana/ui';
 import { QueryEditorProps, SelectableValue, AppEvents } from '@grafana/data';
 import { DataSource, queryTypes, queryUnits } from '../datasource';
-import { Configuration, DEFAULT_LIMIT, MyDataSourceOptions, MyQuery } from '../types';
+import { Configuration, DEFAULT_LIMIT, DEFAULT_QUERY, MyDataSourceOptions, MyQuery } from '../types';
 
 import { getAppEvents } from '@grafana/runtime';
 import CodeMirror, { EditorView, placeholder } from '@uiw/react-codemirror';
@@ -17,12 +17,13 @@ const appEvents = getAppEvents();
 type Props = QueryEditorProps<DataSource, MyQuery, MyDataSourceOptions>;
 
 export function QueryEditor({ query, onChange, datasource }: Props) {
-  const { limit, type, unit, dimensions } = query;
+  const { limit, type, unit, dimensions, expression } = query;
   const [uiDimensions, setUIDimensions] = useState<Array<SelectableValue<string>>>(
     dimensions?.map((v) => ({ label: v, value: v })) ?? [{ label: 'SrcAS', value: 'SrcAS' }]
   );
 
-  const [expression, setExpression] = useState<string>('InIfBoundary = external');
+  const [uiExpression, setUIExpression] = useState<string>(expression || DEFAULT_QUERY.expression !!);
+
 
   const getFilterTheme = (isDark: boolean) => [
     syntaxHighlighting(
@@ -59,10 +60,10 @@ export function QueryEditor({ query, onChange, datasource }: Props) {
           .sort((a, b) => a.label.localeCompare(b.label)) ?? []
       );
     } catch (error) {
-        appEvents.publish({
-            type: AppEvents.alertError.name,
-            payload: ['Failed to fetch dimensions:'+error],
-        });
+      appEvents.publish({
+        type: AppEvents.alertError.name,
+        payload: ['Failed to fetch dimensions:' + error],
+      });
       return [];
     }
   };
@@ -157,7 +158,7 @@ export function QueryEditor({ query, onChange, datasource }: Props) {
         </InlineField>
         <InlineField label="Filters" tooltip="Filters for the query" grow={true} labelWidth={16}>
           <CodeMirror
-            value={expression || ''}
+            value={uiExpression}
             theme={getTheme(theme.isDark)}
             extensions={[
               filterLanguage(),
@@ -170,7 +171,7 @@ export function QueryEditor({ query, onChange, datasource }: Props) {
               EditorView.lineWrapping,
               EditorView.updateListener.of((viewUpdate) => {
                 if (viewUpdate.docChanged) {
-                  setExpression(viewUpdate.state.doc.toString());
+                  setUIExpression(viewUpdate.state.doc.toString());
                   onChange({ ...query, expression: viewUpdate.state.doc.toString() });
                 }
                 if (viewUpdate.focusChanged) {
@@ -194,9 +195,9 @@ export function QueryEditor({ query, onChange, datasource }: Props) {
       </Stack>
       <Stack>
         <CollapsableSection label="Options" isOpen={false}>
-        <InlineField label="Legend" labelWidth={16} tooltip="Series name override or template. Ex {{hostname}} will be replaced with label values for hostname.">
-          <Select value={type} options={queryTypeOptions()} onChange={onTypeChange} width={20} />
-        </InlineField>
+          <InlineField label="Legend" labelWidth={16} tooltip="Series name override or template. Ex {{hostname}} will be replaced with label values for hostname.">
+            <Select value={type} options={queryTypeOptions()} onChange={onTypeChange} width={20} />
+          </InlineField>
         </CollapsableSection>
       </Stack>
     </Stack >

From e901c8e46085213cb737a5b8198c337dc9e9fb31 Mon Sep 17 00:00:00 2001
From: Quentin MOUTY <quentin.mouty@ovhcloud.com>
Date: Tue, 21 Jan 2025 07:18:09 +0000
Subject: [PATCH 2/3] fix #3 Use dashboard vars for filters

---
 src/datasource.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/datasource.ts b/src/datasource.ts
index de13309..317f1de 100644
--- a/src/datasource.ts
+++ b/src/datasource.ts
@@ -1,4 +1,4 @@
-import { FetchResponse, getBackendSrv, isFetchError } from '@grafana/runtime';
+import { FetchResponse, getBackendSrv, getTemplateSrv, isFetchError } from '@grafana/runtime';
 import {
   CoreApp,
   DataQueryRequest,
@@ -46,7 +46,7 @@ export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
         bidirectional: false,
         dimensions: target.dimensions,
         end: to,
-        filter: target.expression,
+        filter: getTemplateSrv().replace(target.expression, options.scopedVars),
         limit: target.limit,
         points: 200,
         'previous-period': false,

From 7b7671c9d6922fbb93f4b20108bb30dd22235977 Mon Sep 17 00:00:00 2001
From: Quentin MOUTY <quentin.mouty@ovhcloud.com>
Date: Tue, 21 Jan 2025 07:39:29 +0000
Subject: [PATCH 3/3] fix #6 Place filter below other fields to improve
 readability

---
 src/components/QueryEditor.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/QueryEditor.tsx b/src/components/QueryEditor.tsx
index 4af908e..e3eb7c0 100644
--- a/src/components/QueryEditor.tsx
+++ b/src/components/QueryEditor.tsx
@@ -156,6 +156,8 @@ export function QueryEditor({ query, onChange, datasource }: Props) {
             width={10}
           />
         </InlineField>
+        </Stack>
+        <Stack>
         <InlineField label="Filters" tooltip="Filters for the query" grow={true} labelWidth={16}>
           <CodeMirror
             value={uiExpression}