add tags list

Altinity · Oct 28, 2024 · 85e9085 · 85e9085
1 parent de275d8
commit 85e9085
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 13 deletions.
diff --git a/src/datasource/sql-query/sql_query.ts b/src/datasource/sql-query/sql_query.ts
@@ -43,7 +43,7 @@ export default class SqlQuery {
     let intervalMs = SqlQueryHelper.convertInterval(i, this.target.intervalFactor || 1, true);
     let adhocCondition: any[] = [];
 
-    adhocFilters = this.target.adHocFilters;
+    adhocFilters = this.target.adHocFilters
     try {
       let ast = scanner.toAST();
       let topQueryAST = ast;

diff --git a/src/spec/sql_query_specs.jest.ts b/src/spec/sql_query_specs.jest.ts
@@ -292,6 +292,7 @@ describe('$rateColumns and subquery + $conditionalTest + SqlQuery.replace + adho
     dateTimeColDataType: 'event_time',
     round: '1m',
     rawQuery: '',
+    adHocFilters: adhocFilters,
   };
   const options = {
     rangeRaw: {
@@ -421,6 +422,7 @@ describe('$rateColumnsAggregated and subquery + $conditionalTest + SqlQuery.repl
     dateTimeColDataType: 'event_time',
     round: '1m',
     rawQuery: '',
+    adHocFilters: adhocFilters,
   };
   const options = {
     rangeRaw: {
@@ -552,6 +554,7 @@ describe('$perSecondColumnsAggregated and subquery + $conditionalTest + SqlQuery
     dateTimeColDataType: 'event_time',
     round: '1m',
     rawQuery: '',
+    adHocFilters: adhocFilters,
   };
   const options = {
     rangeRaw: {
@@ -683,6 +686,7 @@ describe('$increaseColumnsAggregated and subquery + $conditionalTest + SqlQuery.
     dateTimeColDataType: 'event_time',
     round: '1m',
     rawQuery: '',
+    adHocFilters: adhocFilters,
   };
   const options = {
     rangeRaw: {
@@ -814,6 +818,7 @@ describe('$deltaColumnsAggregated and subquery + $conditionalTest + SqlQuery.rep
     dateTimeColDataType: 'event_time',
     round: '1m',
     rawQuery: '',
+    adHocFilters: adhocFilters,
   };
   const options = {
     rangeRaw: {
@@ -893,6 +898,13 @@ describe('check replace with $adhoc macros', () => {
     dateTimeColDataType: 'TimeFlowStart',
     round: '1m',
     rawQuery: '',
+    adHocFilters: [
+      {
+        key: 'default.flows_raw.SrcAS',
+        operator: '=',
+        value: '1299',
+      },
+    ]
   };
   const options = {
     rangeRaw: {
@@ -955,6 +967,7 @@ describe('check replace with $columns and concat and ARRAY JOIN', () => {
     dateTimeColDataType: 'dateTimeColumn',
     round: '1m',
     rawQuery: '',
+    adHocFilters: adhocFilters,
   };
   const options = {
     rangeRaw: {

diff --git a/src/views/QueryEditor/QueryEditor.css b/src/views/QueryEditor/QueryEditor.css
@@ -0,0 +1,7 @@
+.adhoc-filters-tags {
+  margin: 5px 0;
+}
+
+.adhoc-filters-tags > div {
+  display: none;
+}
diff --git a/src/views/QueryEditor/QueryEditor.tsx b/src/views/QueryEditor/QueryEditor.tsx
@@ -9,6 +9,7 @@ import { Alert } from '@grafana/ui';
 import { useQueryState } from './hooks/useQueryState';
 import { useFormattedData } from './hooks/useFormattedData';
 import { initializeQueryDefaults } from './helpers/initializeQueryDefaults';
+import './QueryEditor.css';
 
 export function QueryEditor(props: QueryEditorProps<CHDataSource, CHQuery, CHDataSourceOptions>) {
   const {
@@ -30,6 +31,7 @@ export function QueryEditor(props: QueryEditorProps<CHDataSource, CHQuery, CHDat
 
   // @ts-ignore
   const adHocFilters = datasource.templateSrv.getAdhocFilters(datasource.name);
+  const areAdHocFiltersAvailable = !!adHocFilters.length
 
   if (adHocFilters?.length) {
     // eslint-disable-next-line
@@ -65,6 +67,7 @@ export function QueryEditor(props: QueryEditorProps<CHDataSource, CHQuery, CHDat
       {editorMode === EditorMode.SQL && (
         <QueryTextEditor
           adhocFilters={initializedQuery.adHocFilters}
+          areAdHocFiltersAvailable={areAdHocFiltersAvailable}
           query={initializedQuery}
           height={200}
           onSqlChange={onSqlChange}

diff --git a/src/views/QueryEditor/components/QueryTextEditor/QueryTextEditor.tsx b/src/views/QueryEditor/components/QueryTextEditor/QueryTextEditor.tsx
@@ -6,7 +6,7 @@ import {
   InlineSwitch,
   Input,
   Select,
-  TagList,
+  TagsInput,
   ToolbarButton,
 } from '@grafana/ui';
 import QueryMacrosInfo from './QueryMacrosInfo';
@@ -41,6 +41,7 @@ export const QueryTextEditor = ({
   datasource,
   isAnnotationView,
   adhocFilters,
+  areAdHocFiltersAvailable,
 }: any) => {
   const [sqlFormattedData, setSqlFormattedData] = useState(formattedData);
 
@@ -82,16 +83,24 @@ export const QueryTextEditor = ({
         onEditorMount={onEditorMount}
         onRunQuery={onRunQuery}
       />
-      <div style={{ margin: '5px', display: 'flex' }}>
-        <p>Used Filters:</p>
-        <TagList
-          tags={adhocFilters.map((filter: any, index: number) => `${filter.key}${filter.operator}${filter.value}`)}
-          icon={'minus'}
-          onClick={() => {
-            console.log('remove');
-          }}
-        />
-      </div>
+      {!areAdHocFiltersAvailable && <TagsInput
+        className={'adhoc-filters-tags'}
+        tags={adhocFilters.map((filter: any, index: number) => `${filter.key} ${filter.operator} ${filter.value}`)}
+        onChange={(tagsList) => {
+          onFieldChange({
+            fieldName: 'adHocFilters',
+            value: tagsList.map((item: string) => {
+              const [
+                key,
+                operator,
+                value
+              ] = item.split(' ');
+
+              return { key, operator, value };
+            }),
+          });
+        }}
+      />}
       <div className="gf-form" style={{ display: 'flex', flexDirection: 'column', marginTop: '10px' }}>
         <InlineFieldRow>
           <InlineField

diff --git a/src/views/QueryEditor/components/QueryTextEditor/editor/initiateEditor.ts b/src/views/QueryEditor/components/QueryTextEditor/editor/initiateEditor.ts
@@ -36,7 +36,9 @@ export const initiateEditor = (
   autocompletionData: any,
   systemDatabasesData: any
 ) => {
-  const { Method, Variable, Constant, Keyword, TypeParameter, Text } = monacoInstance.languages.CompletionItemKind;
+  const {
+    Method, Variable, Constant, Keyword, TypeParameter, Text
+  } = monacoInstance.languages.CompletionItemKind;
 
   let dynamicIdentifier: string[];
   let dynamicKeyword: string[];
@@ -140,6 +142,7 @@ export const initiateEditor = (
   // @ts-ignore
   const createCompletionItem = (
     label: string,
+    // @ts-ignore
     kind: monacoInstance.languages.CompletionItemKind,
     insertText: string,
     range: any,