adapt license, metric, dimension, filter and alias to work with old q…

…uery type

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

@@ -31,9 +31,9 @@ export function QueryEditor(props: Props) {
   const [licenseLoadingState, setLicenseLoadingState] = useState<LoadingState>(LoadingState.Default);
   const [licenseErrorMessage, setLicenseErrorMessage] = useState('');
   const [isTimeSeries, setIsTimeSeries] = useState(!!props.query.interval);
-  const isDimensionMetricSelected = useMemo(() => {
-    return props.query.metric !== undefined;
-  }, [props.query.metric]);
+  const isMetricSelected = useMemo(() => {
+    return props.query.dimension ? isMetric(props.query.dimension) : false;
+  }, [props.query.dimension]);
 
   /** Fetch Licenses */
   useEffect(() => {
@@ -52,21 +52,17 @@ export function QueryEditor(props: Props) {
   const query = defaults(props.query, DEFAULT_QUERY);
 
   const handleLicenseChange = (item: SelectableValue) => {
-    props.onChange({ ...query, licenseKey: item.value });
+    props.onChange({ ...query, license: item.value });
     props.onRunQuery();
   };
 
   const handleAggregationChange = (item: SelectableValue) => {
-    props.onChange({ ...query, aggregation: item.value, metric: undefined });
+    props.onChange({ ...query, metric: item.value });
     props.onRunQuery();
   };
 
   const handleDimensionChange = (item: SelectableValue) => {
-    if (isMetric(item.value)) {
-      props.onChange({ ...query, aggregation: undefined, dimension: undefined, metric: item.value });
-    } else {
-      props.onChange({ ...query, dimension: item.value, metric: undefined });
-    }
+    props.onChange({ ...query, dimension: item.value });
     props.onRunQuery();
   };
 
@@ -81,7 +77,7 @@ export function QueryEditor(props: Props) {
   };
 
   const handleQueryFilterChange = (newFilters: QueryFilter[]) => {
-    props.onChange({ ...query, filters: newFilters });
+    props.onChange({ ...query, filter: newFilters });
     props.onRunQuery();
   };
 
@@ -107,7 +103,7 @@ export function QueryEditor(props: Props) {
   };
 
   const handleAliasByBlur = (event: ChangeEvent<HTMLInputElement>) => {
-    props.onChange({ ...query, aliasBy: event.target.value });
+    props.onChange({ ...query, alias: event.target.value });
     props.onRunQuery();
   };
 
@@ -138,7 +134,7 @@ export function QueryEditor(props: Props) {
           required
         >
           <Select
-            value={query.licenseKey}
+            value={query.license}
             onChange={handleLicenseChange}
             width={30}
             options={selectableLicenses}
@@ -147,10 +143,10 @@ export function QueryEditor(props: Props) {
             placeholder={licenseLoadingState === LoadingState.Loading ? 'Loading Licenses' : 'Choose License'}
           />
         </InlineField>
-        {!isDimensionMetricSelected && (
+        {!isMetricSelected && (
           <InlineField label="Metric" labelWidth={20} required>
             <Select
-              value={query.aggregation}
+              value={query.metric}
               onChange={(item) => handleAggregationChange(item)}
               width={30}
               options={SELECTABLE_AGGREGATIONS}
@@ -159,7 +155,7 @@ export function QueryEditor(props: Props) {
         )}
         <InlineField label="Dimension" labelWidth={20} required>
           <Select
-            value={query.dimension || query.metric}
+            value={query.dimension}
             onChange={handleDimensionChange}
             width={30}
             options={
@@ -173,7 +169,7 @@ export function QueryEditor(props: Props) {
           <FilterRow
             isAdAnalytics={props.datasource.adAnalytics ? true : false}
             onQueryFilterChange={handleQueryFilterChange}
-            filters={props.query.filters}
+            filters={props.query.filter}
           />
         </InlineField>
         <InlineField label="Group By" labelWidth={20}>
@@ -198,7 +194,7 @@ export function QueryEditor(props: Props) {
         </InlineField>
         {isTimeSeries && renderTimeSeriesOption()}
         <InlineField label="Alias By" labelWidth={20}>
-          <Input defaultValue={query.aliasBy} placeholder="Naming pattern" onBlur={handleAliasByBlur} />
+          <Input defaultValue={query.alias} placeholder="Naming pattern" onBlur={handleAliasByBlur} />
         </InlineField>
       </FieldSet>
     </div>

bitmovin-analytics-datasource/src/datasource.ts

@@ -20,7 +20,7 @@ import {
   transformTableData,
 } from './utils/dataUtils';
 import { calculateQueryInterval, QueryInterval } from './utils/intervalUtils';
-import { Metric } from './types/metric';
+import { isMetric, Metric } from './types/metric';
 import { Aggregation } from './types/aggregations';
 import { QueryFilter } from './types/queryFilter';
 import { QueryAttribute } from './types/queryAttributes';
@@ -81,21 +81,32 @@ export class DataSource extends DataSourceApi<BitmovinAnalyticsDataQuery, Bitmov
         ? calculateQueryInterval(target.interval!, from.getTime(), to.getTime())
         : undefined;
 
+      let dimensionMetric: Metric | undefined = undefined;
+      let dimension: QueryAttribute | QueryAdAttribute | undefined = undefined;
+
+      if (target.dimension) {
+        if (isMetric(target.dimension)) {
+          dimensionMetric = target.dimension as Metric;
+        } else {
+          dimension = target.dimension as QueryAttribute | QueryAdAttribute;
+        }
+      }
+
       const query: BitmovinAnalyticsRequestQuery = {
-        filters: target.filters,
+        filters: target.filter,
         groupBy: target.groupBy,
         orderBy: target.orderBy,
-        dimension: target.dimension,
-        metric: target.metric,
+        dimension: dimension,
+        metric: dimensionMetric,
         start: from,
         end: to,
-        licenseKey: target.licenseKey,
+        licenseKey: target.license,
         interval: interval,
         limit: target.limit,
       };
 
       const response = await lastValueFrom(
-        this.request(this.getRequestUrl(target.metric, target.aggregation), 'POST', query)
+        this.request(this.getRequestUrl(query.metric, target.metric), 'POST', query)
       );
 
       const dataRows: MixedDataRowList = response.data.data.result.rows;
@@ -126,7 +137,7 @@ export class DataSource extends DataSourceApi<BitmovinAnalyticsDataQuery, Bitmov
       }
 
       return createDataFrame({
-        name: target.aliasBy,
+        name: target.alias,
         fields: fields,
       });
     });

bitmovin-analytics-datasource/src/types/grafanaTypes.ts

@@ -12,23 +12,22 @@ import { QueryFilter } from './queryFilter';
  * These are the options configurable via the QueryEditor
  * */
 export interface BitmovinAnalyticsDataQuery extends DataQuery {
-  licenseKey: string;
+  license: string;
   interval?: QueryInterval | 'AUTO';
-  aggregation?: Aggregation;
-  metric?: Metric;
-  dimension?: QueryAttribute | QueryAdAttribute;
+  metric?: Aggregation;
+  dimension?: QueryAttribute | QueryAdAttribute | Metric;
   groupBy: Array<QueryAttribute | QueryAdAttribute>;
   orderBy: QueryOrderBy[];
   limit?: number;
-  filters: QueryFilter[];
-  aliasBy?: string;
+  filter: QueryFilter[];
+  alias?: string;
 }
 
 export const DEFAULT_QUERY: Partial<BitmovinAnalyticsDataQuery> = {
-  licenseKey: '',
+  license: '',
   orderBy: [],
   groupBy: [],
-  filters: [],
+  filter: [],
 };
 
 /**

bitmovin-analytics-datasource/src/types/metric.ts

@@ -1,9 +1,9 @@
 import { SelectableValue } from '@grafana/data';
 
 export enum METRICS {
-  AVG_CONCURRENTVIEWERS = 'avg-concurrentviewers',
-  MAX_CONCURRENTVIEWERS = 'max-concurrentviewers',
-  AVG_DROPPED_FRAMES = 'avg-dropped-frames',
+  AVG_CONCURRENTVIEWERS = 'AVG_CONCURRENTVIEWERS',
+  MAX_CONCURRENTVIEWERS = 'MAX_CONCURRENTVIEWERS',
+  AVG_DROPPED_FRAMES = 'AVG_DROPPED_FRAMES',
 }
 
 export type Metric = (typeof METRICS)[keyof typeof METRICS];