timeseries - hide fields, group selected, time grp

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.11.0
+
+Feature - Time series: Hide fields, use group by in select, use time field in group by
+
+## 0.10.0
+
+Feature - Ad-Hoc sourced by database or table
+
 ## 0.9.13
 
 Fix - update sdk to show streaming errors

package.json

@@ -1,6 +1,6 @@
 {
   "name": "clickhouse-datasource",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Clickhouse Datasource",
   "scripts": {
     "build": "grafana-toolkit plugin:build",

src/components/queryBuilder/DatabaseSelect.tsx

@@ -29,7 +29,7 @@ export const DatabaseSelect = (props: Props) => {
         onChange={(e) => onChange(e.value!)}
         options={list}
         value={props.value}
-        menuPlacement={'auto'}
+        menuPlacement={'bottom'}
       ></Select>
     </>
   );

src/components/queryBuilder/Fields.tsx

@@ -67,6 +67,7 @@ export const FieldsEditor = (props: FieldsEditorProps) => {
           onChange={onChange}
           onBlur={onUpdateField}
           allowCustomValue={true}
+          menuPlacement={'bottom'}
         />
       </div>
     </div>

src/components/queryBuilder/Filters.tsx

@@ -293,13 +293,15 @@ export const FilterEditor = (props: {
         onOpenMenu={() => setIsOpen(true)}
         onCloseMenu={() => setIsOpen(false)}
         onChange={(e) => onFilterNameChange(e.value!)}
+        menuPlacement={'bottom'}
       />
       <Select
         value={filter.operator}
         width={34}
         className={styles.Common.inlineSelect}
         options={getFilterOperatorsByType(filter.type)}
         onChange={(e) => onFilterOperatorChange(e.value!)}
+        menuPlacement={'bottom'}
       />
       <FilterValueEditor filter={filter} onFilterChange={onFilterValueChange} fieldsList={fieldsList} />
     </>

src/components/queryBuilder/GroupBy.tsx

@@ -34,6 +34,7 @@ export const GroupByEditor = (props: GroupByEditorProps) => {
           onChange={onChange}
           onBlur={() => props.onGroupByChange(groupBy)}
           value={groupBy}
+          menuPlacement={'bottom'}
         />
       </div>
     </div>

src/components/queryBuilder/Metrics.tsx

@@ -52,6 +52,7 @@ const MetricEditor = (props: {
         options={aggregationTypes}
         onChange={(e) => onMetricAggregationChange(e.value!)}
         value={metric.aggregation}
+        menuPlacement={'bottom'}
       />
       <Select<string>
         width={28}
@@ -62,6 +63,7 @@ const MetricEditor = (props: {
         onCloseMenu={() => setIsOpen(false)}
         onChange={onMetricFieldChange}
         value={metric.field}
+        menuPlacement={'bottom'}
       />
       <InlineFormLabel width={2} className="query-keyword">
         {ALIAS.label}

src/components/queryBuilder/OrderBy.tsx

@@ -45,13 +45,15 @@ const OrderByItem = (props: {
         width={20}
         options={columns}
         onChange={(e) => onOrderBySortFieldUpdate(e.value!)}
+        menuPlacement={'bottom'}
       ></Select>
       <Select<OrderByDirection>
         value={orderByItem.dir}
         className={styles.Common.inlineSelect}
         width={12}
         options={sortOptions}
         onChange={(e) => onOrderBySortDirectionUpdate(e.value!)}
+        menuPlacement={'bottom'}
       />
     </>
   );

src/components/queryBuilder/QueryBuilder.tsx

@@ -166,7 +166,10 @@ export const QueryBuilder = (props: QueryBuilderProps) => {
           fieldsList={fieldsList}
         />
       )}
-      <FieldsEditor fields={builder.fields || []} onFieldsChange={onFieldsChange} fieldsList={fieldsList} />
+      {builder.mode !== BuilderMode.Trend && (
+        <FieldsEditor fields={builder.fields || []} onFieldsChange={onFieldsChange} fieldsList={fieldsList} />
+      )}
+
       {(builder.mode === BuilderMode.Aggregate || builder.mode === BuilderMode.Trend) && (
         <MetricsEditor metrics={builder.metrics || []} onMetricsChange={onMetricsChange} fieldsList={fieldsList} />
       )}

src/components/queryBuilder/TableSelect.tsx

@@ -41,7 +41,7 @@ export const TableSelect = (props: Props) => {
         onChange={(e) => onChange(e.value!)}
         options={list}
         value={table}
-        menuPlacement={'auto'}
+        menuPlacement={'bottom'}
       ></Select>
     </>
   );

src/components/queryBuilder/TimeField.tsx

@@ -30,6 +30,7 @@ export const TimeFieldEditor = (props: TimeFieldEditorProps) => {
         width={20}
         onChange={(e) => props.onTimeFieldChange(e.value, getColumnType(e.value))}
         value={props.timeField}
+        menuPlacement={'bottom'}
       />
     </div>
   );

src/components/queryBuilder/utils.ts

@@ -87,8 +87,8 @@ const getAggregationQuery = (
 const getTrendByQuery = (
   database = '',
   table = '',
-  fields: string[] = [],
   metrics: BuilderMetricField[] = [],
+  groupBy: string[] = [],
   timeField = '',
   timeFieldType = ''
 ): string => {
@@ -101,12 +101,12 @@ const getTrendByQuery = (
     })
     .join(', ');
   if (metricsQuery !== '') {
-    const selected = fields.length > 0 ? `${fields.join(', ')},` : '';
-    metricsQuery = `${timeField}, ${selected}${metricsQuery}`;
+    const group = groupBy.length > 0 ? `${groupBy.join(', ')},` : '';
+    metricsQuery = `${timeField}, ${group} ${metricsQuery}`;
+  } else if (groupBy.length > 0) {
+    metricsQuery = `${timeField}, ${groupBy.join(', ')}`;
   } else {
-    const selected = fields.length > 0 ? `${fields.join(', ')}` : '';
-    const sep = selected !== '' ? ',' : '';
-    metricsQuery = `${timeField}${sep}${selected}`;
+    metricsQuery = `${timeField}`;
   }
 
   const sep = database === '' || table === '' ? '' : '.';
@@ -183,8 +183,15 @@ const getFilters = (filters: Filter[]): string => {
   }, '');
 };
 
-const getGroupBy = (groupBy: string[] = []): string => {
-  return groupBy.length > 0 ? ` GROUP BY ` + groupBy.map((g) => g).join(', ') : '';
+const getGroupBy = (groupBy: string[] = [], timeField?: string): string => {
+  const clause = groupBy.length > 0 ? ` GROUP BY ${groupBy.join(', ')}` : '';
+  if (timeField === undefined) {
+    return clause;
+  }
+  if (groupBy.length === 0) {
+    return ` GROUP BY ${timeField}`;
+  }
+  return `${clause}, ${timeField}`;
 };
 
 const getOrderBy = (orderBy?: OrderBy[]): string => {
@@ -219,8 +226,8 @@ export const getSQLFromQueryOptions = (options: SqlBuilderOptions): string => {
       query += getTrendByQuery(
         options.database,
         options.table,
-        options.fields,
         options.metrics,
+        options.groupBy,
         options.timeField,
         options.timeFieldType
       );
@@ -231,7 +238,7 @@ export const getSQLFromQueryOptions = (options: SqlBuilderOptions): string => {
       }
       const trendFilters = getFilters(options.filters || []);
       query += trendFilters ? ` AND ${trendFilters}` : '';
-      query += getGroupBy(options.groupBy);
+      query += getGroupBy(options.groupBy, options.timeField);
       break;
     case BuilderMode.List:
     default:

src/views/CHQueryEditor.tsx

@@ -64,8 +64,8 @@ export const CHQueryEditor = (props: CHQueryEditorProps) => {
       if (format !== query.format) {
         onChange({ ...query, format });
       }
-      onRunQuery();
     }
+    onRunQuery();
   };
 
   return (