fix formatting

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

Hide file tree

Showing 21 changed files with 4,325 additions and 4,009 deletions.
diff --git a/src/datasource/sql-query/sql_query.ts b/src/datasource/sql-query/sql_query.ts
@@ -43,13 +43,11 @@ export default class SqlQuery {
     let intervalMs = SqlQueryHelper.convertInterval(i, this.target.intervalFactor || 1, true);
     let adhocCondition: any[] = [];
 
-    // @ts-ignore
-    // adhocFilters = this.templateSrv.getAdhocFilters('clickhouse')
     adhocFilters = this.target.adHocFilters;
     try {
       let ast = scanner.toAST();
       let topQueryAST = ast;
-      if (adhocFilters.length > 0) {
+      if (adhocFilters && adhocFilters.length > 0) {
         /* Check sub queries for ad-hoc filters */
         while (ast.hasOwnProperty('from') && !isArray(ast.from)) {
           ast = ast.from;

diff --git a/src/views/QueryEditor/QueryEditor.tsx b/src/views/QueryEditor/QueryEditor.tsx
@@ -23,18 +23,24 @@ export function QueryEditor(props: QueryEditorProps<CHDataSource, CHQuery, CHDat
   const [formattedData, error] = useFormattedData(initializedQuery, datasource);
   const [editorMode, setEditorMode] = useState(initializedQuery.editorMode || EditorMode.Builder);
   useQueryState(query, onChange, datasource);
+
   const onSqlChange = (sql: string) => onChange({ ...initializedQuery, query: sql });
-  const onFieldChange = (value: any) => onChange({ ...query, ...value });
+  const onFieldChange = (field: any) => onChange({ ...initializedQuery, [field.fieldName]: field.value })
   const onTriggerQuery = () => onRunQuery();
 
   // @ts-ignore
   const adHocFilters = datasource.templateSrv.getAdhocFilters(datasource.name);
 
-  useEffect(() => {
-    if (adHocFilters.length > 0) {
-      onChange({ ...query, adHocFilters: adHocFilters });
-    }
-  }, [adHocFilters.length]);
+  if (adHocFilters?.length) {
+    // eslint-disable-next-line
+    useEffect(() => {
+      if (adHocFilters.length > 0) {
+        onChange({ ...initializedQuery, adHocFilters: adHocFilters });
+      }
+
+      // eslint-disable-next-line
+    }, [adHocFilters.length]);
+  }
 
   return (
     <>
@@ -57,19 +63,17 @@ export function QueryEditor(props: QueryEditorProps<CHDataSource, CHQuery, CHDat
         />
       )}
       {editorMode === EditorMode.SQL && (
-        <>
-          <QueryTextEditor
-            adhocFilters={initializedQuery.adHocFilters}
-            query={initializedQuery}
-            height={200}
-            onSqlChange={onSqlChange}
-            onRunQuery={onTriggerQuery}
-            onFieldChange={onFieldChange}
-            formattedData={formattedData}
-            datasource={datasource}
-            isAnnotationView={isAnnotationView}
-          />
-        </>
+        <QueryTextEditor
+          adhocFilters={initializedQuery.adHocFilters}
+          query={initializedQuery}
+          height={200}
+          onSqlChange={onSqlChange}
+          onRunQuery={onTriggerQuery}
+          onFieldChange={onFieldChange}
+          formattedData={formattedData}
+          datasource={datasource}
+          isAnnotationView={isAnnotationView}
+        />
       )}
     </>
   );

diff --git a/src/views/QueryEditor/components/QueryBuilder/QueryBuilder.tsx b/src/views/QueryEditor/components/QueryBuilder/QueryBuilder.tsx
@@ -1,80 +1,92 @@
-import React, {useEffect} from 'react';
-import {InlineField, InlineFieldRow, InlineLabel, Select} from '@grafana/ui';
-import {SelectableValue} from '@grafana/data';
-import {UniversalSelectField} from './components/UniversalSelectComponent';
-import {TimestampFormat} from "../../../../types/types";
-import { useConnectionData } from "./components/useConnectionData";
-
+import React, { useEffect } from 'react';
+import { InlineField, InlineFieldRow, InlineLabel, Select } from '@grafana/ui';
+import { SelectableValue } from '@grafana/data';
+import { UniversalSelectField } from './components/UniversalSelectComponent';
+import { TimestampFormat } from '../../../../types/types';
+import { useConnectionData } from './components/useConnectionData';
 
 const options = [
   { label: 'DateTime', value: TimestampFormat.DateTime },
   { label: 'DateTime64', value: TimestampFormat.DateTime64 },
   { label: 'TimeStamp', value: TimestampFormat.TimeStamp },
 ];
 
-export const QueryBuilder = ({
- query, onChange, datasource 
-}: any) => {
-  const [databases,
-          tables,
-          dateColumns,
-          timestampColumns,
-          selectedColumnTimestampType,
-          selectedColumnDateType,
-          setSelectedDatabase,
-          setSelectedTable,
-          setSelectedColumnTimestampType,
-          setSelectedColumnDateType,
-          setSelectedDateTimeType,
-          selectedTable,
-          selectedDatabase,
-          selectedDateTimeType] =  useConnectionData(query, datasource)
-
+// eslint-disable-next-line
+export const QueryBuilder = ({ query, onChange, datasource }: any) => {
+  const [
+    databases,
+    tables,
+    dateColumns,
+    timestampColumns,
+    selectedColumnTimestampType,
+    selectedColumnDateType,
+    setSelectedDatabase,
+    setSelectedTable,
+    setSelectedColumnTimestampType,
+    setSelectedColumnDateType,
+    setSelectedDateTimeType,
+    selectedTable,
+    selectedDatabase,
+    selectedDateTimeType,
+  ] = useConnectionData(query, datasource);
 
   useEffect(() => {
     setSelectedDatabase(query.database);
     setSelectedTable(query.table);
     setSelectedColumnTimestampType(query.dateTimeColDataType);
     setSelectedColumnDateType(query.dateColDataType);
     setSelectedDateTimeType(query.dateTimeType);
-  }, [query.database, query.dateColDataType, query.dateTimeColDataType, query.dateTimeType, query.table, setSelectedColumnDateType, setSelectedColumnTimestampType, setSelectedDatabase, setSelectedDateTimeType, setSelectedTable]);
+  }, [
+    query.database,
+    query.dateColDataType,
+    query.dateTimeColDataType,
+    query.dateTimeType,
+    query.table,
+    setSelectedColumnDateType,
+    setSelectedColumnTimestampType,
+    setSelectedDatabase,
+    setSelectedDateTimeType,
+    setSelectedTable,
+  ]);
 
   const onDateTimeTypeChanged = (dateTimeType: SelectableValue) => {
     const value = dateTimeType?.value ? dateTimeType.value : undefined;
     setSelectedDateTimeType(value);
-    onChange({...query, dateTimeType: value});
+    onChange({ ...query, dateTimeType: value });
   };
 
   const onDatabaseChange = (database?: string) => {
     setSelectedDatabase(database);
-    onChange({...query, database});
+    onChange({ ...query, database });
   };
 
   const onTableChange = (table?: string) => {
     setSelectedTable(table);
-    onChange({...query, table});
+    onChange({ ...query, table });
   };
 
   const onDateColDataTypeChange = (dateColDataType?: string) => {
     // @ts-ignore
     setSelectedColumnDateType((dateColDataType || '').trim());
-    onChange({...query, dateColDataType});
+    onChange({ ...query, dateColDataType });
   };
 
   const onDateTimeColDataTypeChange = (dateTimeColDataType?: string) => {
     // @ts-ignore
     setSelectedColumnTimestampType((dateTimeColDataType || '').trim());
-    onChange({...query, dateTimeColDataType});
+    onChange({ ...query, dateTimeColDataType });
   };
 
   return (
     <div className="gf-form" style={{ display: 'flex', flexDirection: 'column', marginTop: '10px' }}>
       <InlineFieldRow>
         <UniversalSelectField
           width={24}
-          label={<InlineLabel width={24} >
-            <span style={{ color: '#6e9fff' }}>FROM</span>
-          </InlineLabel>}
+          label={
+            <InlineLabel width={24}>
+              <span style={{ color: '#6e9fff' }}>FROM</span>
+            </InlineLabel>
+          }
           placeholder="Database"
           value={selectedDatabase}
           onChange={(item: SelectableValue<string>) => onDatabaseChange(item.value)}
@@ -125,12 +137,10 @@ export const QueryBuilder = ({
                   column for binding with Grafana range selector
                 </div>
               }
-
             >
               Column timestamp type
             </InlineLabel>
           }
-
         >
           <Select
             width={24}

diff --git a/src/views/QueryEditor/components/QueryBuilder/components/UniversalSelectComponent.tsx b/src/views/QueryEditor/components/QueryBuilder/components/UniversalSelectComponent.tsx
@@ -1,9 +1,9 @@
-import { InlineField, Select } from "@grafana/ui";
-import React, { useState, useEffect } from "react";
-import { SelectableValue } from "@grafana/data";
+import { InlineField, Select } from '@grafana/ui';
+import React, { useState, useEffect } from 'react';
+import { SelectableValue } from '@grafana/data';
 
 type UniversalSelectFieldProps = {
-  value: string | undefined ;
+  value: string | undefined;
   onChange: (value: SelectableValue<string>) => void;
   options: Array<SelectableValue<string>>;
   label?: React.JSX.Element;
@@ -14,56 +14,61 @@ type UniversalSelectFieldProps = {
 };
 
 export const UniversalSelectField: React.FC<UniversalSelectFieldProps> = ({
-                                                                            value,
-                                                                            onChange,
-                                                                            options,
-                                                                            label,
-                                                                            placeholder,
-                                                                            disabled,
-                                                                            width,
-                                                                            testId,
-                                                                          }) => {
+  value,
+  onChange,
+  options,
+  label,
+  placeholder,
+  disabled,
+  width,
+  testId,
+}) => {
   const [customOptions, setCustomOptions] = useState<Array<SelectableValue<string>>>([]);
 
   useEffect(() => {
     // Check if initial value is not in options or customOptions
     const isValueExist =
-      options.some(option => option.value === value) ||
-      customOptions.some(option => option.value === value);
+      options.some((option) => option.value === value) || customOptions.some((option) => option.value === value);
     if (!isValueExist) {
       // If value not in options or customOptions, add it to customOptions
       const customValue: SelectableValue<string> = {
         value: value,
-        label: value
+        label: value,
       };
-      setCustomOptions([...customOptions, customValue].filter(option => option.label !== undefined && option.label.trim() !== ""));
+      setCustomOptions(
+        [...customOptions, customValue].filter((option) => option.label !== undefined && option.label.trim() !== '')
+      );
     }
   }, [value, options, customOptions]);
 
   // Remove duplicates from options
   const mergedOptions = [...options, ...customOptions];
-  const uniqueOptions = mergedOptions.filter((option, index) => {
-    const firstIndex = mergedOptions.findIndex(opt => opt.value === option.value);
-    return index === firstIndex;
-  }).filter(option => option.label !== undefined && option.label.trim() !== "");
+  const uniqueOptions = mergedOptions
+    .filter((option, index) => {
+      const firstIndex = mergedOptions.findIndex((opt) => opt.value === option.value);
+      return index === firstIndex;
+    })
+    .filter((option) => option.label !== undefined && option.label.trim() !== '');
 
   return (
     <InlineField label={label ? label : null}>
       <Select
         isClearable
         allowCustomValue={true}
-        onCreateOption={v => {
+        onCreateOption={(v) => {
           const customValue: SelectableValue<string> = {
             value: v,
-            label: v
+            label: v,
           };
-          setCustomOptions([...customOptions, customValue].filter(option => option.label !== undefined && option.label.trim() !== ""));
+          setCustomOptions(
+            [...customOptions, customValue].filter((option) => option.label !== undefined && option.label.trim() !== '')
+          );
           onChange({ value: v.trim() });
         }}
         width={width}
         value={value}
         onChange={(changeEvent) => {
-          onChange({ value: changeEvent ? changeEvent.value : undefined })
+          onChange({ value: changeEvent ? changeEvent.value : undefined });
         }}
         placeholder={placeholder}
         options={uniqueOptions}