implements groupBy selection

bitmovin-analytics-datasource/src/components/GroupByInput.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { HorizontalGroup, IconButton, Select } from '@grafana/ui';
+import { QueryAttribute } from '../types/queryAttributes';
+import { QueryAdAttribute } from '../types/queryAdAttributes';
+import { SelectableValue } from '@grafana/data';
+
+type Props = {
+  groupBy: SelectableValue<QueryAttribute | QueryAdAttribute>;
+  selectableGroupBys: Array<SelectableValue<QueryAttribute | QueryAdAttribute>>;
+  onDelete: () => void;
+  onChange: (newValue: SelectableValue<QueryAdAttribute | QueryAttribute>) => void;
+};
+export function GroupByInput(props: Props) {
+  //TODOMY delete margin between select and icon
+  //TODOMY border around the icon
+  return (
+    <HorizontalGroup>
+      <Select value={props.groupBy} onChange={props.onChange} options={props.selectableGroupBys} width={30} />
+      <IconButton tooltip="Delete Group By" name="trash-alt" onClick={() => props.onDelete()} size="lg" />
+    </HorizontalGroup>
+  );
+}

bitmovin-analytics-datasource/src/components/GroupByRow.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { SelectableValue } from '@grafana/data';
+import { QueryAdAttribute, SELECTABLE_QUERY_AD_ATTRIBUTES } from '../types/queryAdAttributes';
+import { QueryAttribute, SELECTABLE_QUERY_ATTRIBUTES } from '../types/queryAttributes';
+import { IconButton, Stack } from '@grafana/ui';
+import { GroupByInput } from './GroupByInput';
+import { difference } from 'lodash';
+
+type Props = {
+  readonly isAdAnalytics: boolean;
+  readonly onChange: (newGroupBys: Array<QueryAdAttribute> | Array<QueryAttribute>) => void;
+};
+
+export function GroupByRow(props: Props) {
+  const [selectedGroupBys, setSelectedGroupBys] = useState<Array<SelectableValue<QueryAdAttribute | QueryAttribute>>>(
+    []
+  );
+
+  const mapGroupBysToSelectableValue = (): Array<SelectableValue<QueryAttribute | QueryAdAttribute>> => {
+    if (props.isAdAnalytics) {
+      return difference(SELECTABLE_QUERY_AD_ATTRIBUTES, selectedGroupBys);
+    } else {
+      return difference(SELECTABLE_QUERY_ATTRIBUTES, selectedGroupBys);
+    }
+  };
+
+  const deleteGroupByInput = (index: number) => {
+    const newSelectedGroupBys = [...selectedGroupBys];
+    newSelectedGroupBys.splice(index, 1);
+
+    setSelectedGroupBys(newSelectedGroupBys);
+
+    const groupBys = newSelectedGroupBys.map((groupBy) => groupBy.value);
+    props.onChange(groupBys as Array<QueryAttribute> | Array<QueryAdAttribute>);
+  };
+
+  const onSelectedGroupByChange = (
+    index: number,
+    newSelectedGroupBy: SelectableValue<QueryAttribute | QueryAdAttribute>
+  ) => {
+    const newSelectedGroupBys = [...selectedGroupBys];
+    newSelectedGroupBys.splice(index, 1, newSelectedGroupBy);
+    setSelectedGroupBys(newSelectedGroupBys);
+
+    const groupBys = newSelectedGroupBys.map((groupBy) => groupBy.value);
+    props.onChange(groupBys as Array<QueryAttribute> | Array<QueryAdAttribute>);
+  };
+
+  const addGroupByInput = () => {
+    setSelectedGroupBys((prevState) => [...prevState, { name: '', label: '' }]);
+  };
+
+  //TODOMY fix the overflowing of a lot of selects are created, make it go to the next row
+  return (
+    <Stack>
+      {selectedGroupBys?.map((item, index) => (
+        <GroupByInput
+          groupBy={item}
+          onChange={(newValue: SelectableValue<QueryAdAttribute | QueryAttribute>) =>
+            onSelectedGroupByChange(index, newValue)
+          }
+          selectableGroupBys={mapGroupBysToSelectableValue()}
+          onDelete={() => deleteGroupByInput(index)}
+        />
+      ))}
+      <IconButton name="plus-square" tooltip="Add Group By" onClick={() => addGroupByInput()} size="xxl" />
+    </Stack>
+  );
+}

bitmovin-analytics-datasource/src/components/QueryEditor.tsx

@@ -7,9 +7,10 @@ import { MyDataSourceOptions, MyQuery } from '../types';
 import { fetchLicenses } from '../utils/licenses';
 import { DEFAULT_SELECTABLE_QUERY_INTERVAL, SELECTABLE_QUERY_INTERVALS } from '../utils/intervalUtils';
 import { DEFAULT_SELECTABLE_AGGREGATION, SELECTABLE_AGGREGATIONS } from '../types/aggregations';
-import { SELECTABLE_QUERY_AD_ATTRIBUTES } from '../types/queryAdAttributes';
-import { SELECTABLE_QUERY_ATTRIBUTES } from '../types/queryAttributes';
+import { QueryAdAttribute, SELECTABLE_QUERY_AD_ATTRIBUTES } from '../types/queryAdAttributes';
+import { QueryAttribute, SELECTABLE_QUERY_ATTRIBUTES } from '../types/queryAttributes';
 import { isMetric, SELECTABLE_METRICS } from '../types/metric';
+import { GroupByRow } from './GroupByRow';
 
 enum LoadingState {
   Default = 'DEFAULT',
@@ -61,6 +62,11 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props)
     onRunQuery();
   };
 
+  const onGroupByChange = (newGroupBys: Array<QueryAdAttribute> | Array<QueryAttribute>) => {
+    onChange({ ...query, groupBy: newGroupBys });
+    onRunQuery();
+  };
+
   const onFormatAsTimeSeriesChange = (event: ChangeEvent<HTMLInputElement>) => {
     setIsTimeSeries(event.currentTarget.checked);
     if (event.currentTarget.checked) {
@@ -83,7 +89,7 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props)
           <Select
             defaultValue={DEFAULT_SELECTABLE_QUERY_INTERVAL}
             onChange={(item) => onIntervalChange(item)}
-            width={40}
+            width={30}
             options={SELECTABLE_QUERY_INTERVALS}
           />
         </InlineField>
@@ -103,7 +109,7 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props)
         >
           <Select
             onChange={onLicenseChange}
-            width={40}
+            width={30}
             options={selectableLicenses}
             noOptionsMessage="No Analytics Licenses found"
             isLoading={licenseLoadingState === LoadingState.Loading}
@@ -115,22 +121,25 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props)
             <Select
               defaultValue={DEFAULT_SELECTABLE_AGGREGATION}
               onChange={(item) => onAggregationChange(item)}
-              width={40}
+              width={30}
               options={SELECTABLE_AGGREGATIONS}
             />
           </InlineField>
         )}
         <InlineField label="Dimension" labelWidth={20}>
           <Select
             onChange={onDimensionChange}
-            width={40}
+            width={30}
             options={
               datasource.adAnalytics
                 ? SELECTABLE_QUERY_AD_ATTRIBUTES
                 : SELECTABLE_QUERY_ATTRIBUTES.concat(SELECTABLE_METRICS)
             }
           />
         </InlineField>
+        <InlineField label="Group By" labelWidth={20}>
+          <GroupByRow isAdAnalytics={datasource.adAnalytics ? true : false} onChange={onGroupByChange} />
+        </InlineField>
         <InlineField label="Format as time series" labelWidth={20}>
           <InlineSwitch value={isTimeSeries} onChange={onFormatAsTimeSeriesChange}></InlineSwitch>
         </InlineField>

bitmovin-analytics-datasource/src/datasource.ts

@@ -19,7 +19,7 @@ import { Aggregation } from './types/aggregations';
 
 type AnalyticsQuery = {
   filters: Array<{ name: string; operator: string; value: number }>;
-  groupBy: string[];
+  groupBy: QueryAttribute[] | QueryAdAttribute[];
   orderBy: Array<{ name: string; order: string }>;
   dimension?: QueryAttribute | QueryAdAttribute;
   metric?: Metric;
@@ -71,7 +71,7 @@ export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
             value: 0,
           },
         ],
-        groupBy: [],
+        groupBy: target.groupBy,
         orderBy: interval
           ? [
               {

bitmovin-analytics-datasource/src/types.ts

@@ -12,6 +12,7 @@ export interface MyQuery extends DataQuery {
   aggregation?: Aggregation;
   metric?: Metric;
   dimension?: QueryAttribute | QueryAdAttribute;
+  groupBy: QueryAttribute[] | QueryAdAttribute[];
 }
 
 export const DEFAULT_QUERY: Partial<MyQuery> = {};