Merge pull request #104 from questdb/update-query-builder-settings

Update query builder settings

Author: insmac

README.md

@@ -10,6 +10,8 @@ data from within Grafana.
 For detailed instructions on how to install the plugin on Grafana Cloud or
 locally, please check out the [Plugin installation docs](https://grafana.com/docs/grafana/latest/plugins/installation/).
 
+Read the guide on QuestDB website: [Third-party Tools - Grafana](https://questdb.io/docs/third-party-tools/grafana/).
+
 ## Configuration
 
 ### QuestDB user for the data source
@@ -179,3 +181,4 @@ You may choose to hide this variable from view as it serves no further purpose.
 - Configure and use [Templates and variables](https://grafana.com/docs/grafana/latest/variables/).
 - Add [Transformations](https://grafana.com/docs/grafana/latest/panels/transformations/).
 - Set up alerting; refer to [Alerts overview](https://grafana.com/docs/grafana/latest/alerting/).
+- Read the [Plugin guide](https://questdb.io/docs/third-party-tools/grafana/) on QuestDB website

src/components/queryBuilder/GroupBy.test.tsx

@@ -1,11 +1,19 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { GroupByEditor } from './GroupBy';
-import {selectors} from "../../selectors";
+import { selectors } from '../../selectors';
 
 describe('GroupByEditor', () => {
   it('renders correctly', () => {
-    const result = render(<GroupByEditor fieldsList={[]} groupBy={[]} onGroupByChange={() => {}} labelAndTooltip={selectors.components.QueryEditor.QueryBuilder.SAMPLE_BY} />);
+    const result = render(
+      <GroupByEditor
+        fieldsList={[]}
+        groupBy={[]}
+        onGroupByChange={() => {}}
+        isDisabled={false}
+        labelAndTooltip={selectors.components.QueryEditor.QueryBuilder.SAMPLE_BY}
+      />
+    );
     expect(result.container.firstChild).not.toBeNull();
   });
 });

src/components/queryBuilder/GroupBy.tsx

@@ -10,6 +10,7 @@ interface GroupByEditorProps {
   groupBy: string[];
   onGroupByChange: (groupBy: string[]) => void;
   labelAndTooltip: typeof selectors.components.QueryEditor.QueryBuilder.GROUP_BY;
+  isDisabled: boolean;
 }
 export const GroupByEditor = (props: GroupByEditorProps) => {
   const columns: SelectableValue[] = (props.fieldsList || []).map((f) => ({ label: f.label, value: f.name }));
@@ -34,7 +35,7 @@ export const GroupByEditor = (props: GroupByEditorProps) => {
     <EditorField tooltip={tooltip} label={label}>
       <MultiSelect
         options={columns}
-        placeholder="Choose"
+        placeholder={props.isDisabled ? 'Table is missing designated timestamp' : 'Choose'}
         isOpen={isOpen}
         onOpenMenu={() => setIsOpen(true)}
         onCloseMenu={() => setIsOpen(false)}
@@ -43,6 +44,7 @@ export const GroupByEditor = (props: GroupByEditorProps) => {
         value={groupBy}
         allowCustomValue={true}
         width={50}
+        disabled={props.isDisabled}
       />
     </EditorField>
   );

src/components/queryBuilder/Limit.tsx

@@ -8,7 +8,7 @@ interface LimitEditorProps {
   onLimitChange: (limit: string) => void;
 }
 export const LimitEditor = (props: LimitEditorProps) => {
-  const [limit, setLimit] = useState(props.limit || '100');
+  const [limit, setLimit] = useState(props.limit);
   const { label, tooltip } = selectors.components.QueryEditor.QueryBuilder.LIMIT;
 
   return (

src/components/queryBuilder/QueryBuilder.tsx

@@ -230,6 +230,7 @@ export const QueryBuilder = (props: QueryBuilderProps) => {
             onGroupByChange={onGroupByChange}
             fieldsList={fieldsList}
             labelAndTooltip={selectors.components.QueryEditor.QueryBuilder.SAMPLE_BY}
+            isDisabled={builder.timeField.length === 0}
           />
         </EditorRow>
       )}
@@ -264,7 +265,11 @@ export const QueryBuilder = (props: QueryBuilderProps) => {
 
       {builder.mode === BuilderMode.Trend && (
         <EditorRow>
-          <SampleByFillEditor fills={builder.sampleByFill || []} onFillsChange={onFillChange} />
+          <SampleByFillEditor
+            fills={builder.sampleByFill || []}
+            onFillsChange={onFillChange}
+            isDisabled={builder.timeField.length === 0}
+          />
         </EditorRow>
       )}
 
@@ -275,6 +280,7 @@ export const QueryBuilder = (props: QueryBuilderProps) => {
             onGroupByChange={onGroupByChange}
             fieldsList={fieldsList}
             labelAndTooltip={selectors.components.QueryEditor.QueryBuilder.GROUP_BY}
+            isDisabled={builder.timeField.length === 0}
           />
         </EditorRow>
       )}
@@ -295,7 +301,7 @@ export const QueryBuilder = (props: QueryBuilderProps) => {
         fieldsList={getOrderByFields(builder, fieldsList)}
       />
       <EditorRow>
-        <LimitEditor limit={builder.limit || 100} onLimitChange={onLimitChange} />
+        <LimitEditor limit={builder.limit} onLimitChange={onLimitChange} />
       </EditorRow>
     </EditorRows>
   ) : null;

src/components/queryBuilder/SampleByFillEditor.tsx

@@ -9,6 +9,7 @@ import { GroupBase, OptionsOrGroups } from 'react-select';
 interface FillEditorProps {
   fills: string[];
   onFillsChange: (fills: string[]) => void;
+  isDisabled: boolean;
 }
 
 const fillModes: SelectableValue[] = [];
@@ -85,6 +86,8 @@ export const SampleByFillEditor = (props: FillEditorProps) => {
         width={50}
         isClearable={true}
         hideSelectedOptions={true}
+        placeholder={props.isDisabled ? 'Table is missing designated timestamp' : 'Choose'}
+        disabled={props.isDisabled}
       />
     </EditorField>
   );

src/components/queryBuilder/TableSelect.tsx

@@ -21,7 +21,7 @@ export const TableSelect = (props: Props) => {
 
   useEffect(() => {
     async function fetchTables() {
-      const tables = await datasource.fetchTables();
+      const tables = (await datasource.fetchTables()).sort((a, b) => a.tableName.localeCompare(b.tableName));
       const values = tables.map((t) => ({ label: t.tableName, value: t.tableName }));
       // Add selected value to the list if it does not exist.
       if (table && !tables.find((x) => x.tableName === table) && props.mode !== BuilderMode.Trend) {