Add time zone support for timeseries

CHANGELOG.md

@@ -3,6 +3,12 @@
 This article documents the ongoing improvements we're making to the **Cognite
 Data Source for Grafana**.
 
+## 4.2.0 - June 17th, 2024
+
+### Features
+
+- Adds time zone support for aggregated time series, the user can select the timezone using the Grafana time range options.
+
 ## 4.1.3 - May 7th, 2024
 
 ### Bug fixes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cognite/cognite-grafana-datasource",
-  "version": "4.1.3",
+  "version": "4.2.0",
   "description": "Cognite Data Fusion datasource",
   "repository": "https://github.com/cognitedata/cognite-grafana-datasource",
   "author": "Cognite AS",

src/__mocks__/@grafana/runtime.ts

@@ -29,15 +29,3 @@ export const getTemplateSrv = () =>
       return query;
     }),
   } as any);
-
-export const SystemJS = {
-  load: async (module) => {
-    return module === 'app/core/app_events' ? AppEvents : new Error('mo mock');
-  },
-};
-
-const AppEvents = {
-  emit: jest.fn(),
-  on: jest.fn(),
-  off: jest.fn(),
-};

src/__tests__/__snapshots__/datasource.test.ts.snap

@@ -59,6 +59,7 @@ exports[`Datasource Query Give "Select Timeseries of Relationships target from A
     ],
     "limit": 10000,
     "start": 1549336675000,
+    "timeZone": "Europe/Oslo",
   },
   "headers": undefined,
   "method": "POST",
@@ -188,6 +189,7 @@ exports[`Datasource Query Given "Select Timeseries from Asset" queries should ge
     ],
     "limit": 3333,
     "start": 1549336675000,
+    "timeZone": "Europe/Oslo",
   },
   "headers": undefined,
   "method": "POST",
@@ -211,6 +213,7 @@ exports[`Datasource Query Given "Select Timeseries from Asset" queries should ge
     ],
     "limit": 10000,
     "start": 1549336675000,
+    "timeZone": "Europe/Oslo",
   },
   "headers": undefined,
   "method": "POST",
@@ -359,6 +362,7 @@ exports[`Datasource Query Given "Select Timeseries" queries should generate the
     ],
     "limit": 10000,
     "start": 1549336675000,
+    "timeZone": "Europe/Oslo",
   },
   "headers": undefined,
   "method": "POST",
@@ -382,6 +386,7 @@ exports[`Datasource Query Given "Select Timeseries" queries should generate the
     ],
     "limit": 10000,
     "start": 1549336675000,
+    "timeZone": "Europe/Oslo",
   },
   "headers": undefined,
   "method": "POST",
@@ -445,6 +450,7 @@ exports[`Datasource Query Given custom queries should generate the correct filte
         "expression": "ts{id=1, aggregate="discreteVariance", granularity="10d"}",
         "limit": 10000,
         "start": 1549336675000,
+        "timeZone": "Europe/Oslo",
       },
     ],
   },
@@ -464,6 +470,7 @@ exports[`Datasource Query Given custom queries should generate the correct filte
         "expression": "ts{externalId="Timeseries1"}",
         "limit": 10000,
         "start": 1549336675000,
+        "timeZone": "Europe/Oslo",
       },
     ],
   },
@@ -555,18 +562,21 @@ exports[`Datasource Query Given custom queries with functions should generate th
         "expression": "ts{id=1} + pi()",
         "limit": 3333,
         "start": 1549336675000,
+        "timeZone": "Europe/Oslo",
       },
       {
         "end": 1549338475000,
         "expression": "ts{id=2} + pi()",
         "limit": 3333,
         "start": 1549336675000,
+        "timeZone": "Europe/Oslo",
       },
       {
         "end": 1549338475000,
         "expression": "ts{id=3} + pi()",
         "limit": 3333,
         "start": 1549336675000,
+        "timeZone": "Europe/Oslo",
       },
     ],
   },
@@ -586,18 +596,21 @@ exports[`Datasource Query Given custom queries with functions should generate th
         "expression": "ts{id=1} * ts{externalId="Timeseries1", aggregate="average"} - ts{externalId="Timeseries1", aggregate="average", granularity="10m"}",
         "limit": 3333,
         "start": 1549336675000,
+        "timeZone": "Europe/Oslo",
       },
       {
         "end": 1549338475000,
         "expression": "ts{id=2} * ts{externalId="Timeseries1", aggregate="average"} - ts{externalId="Timeseries1", aggregate="average", granularity="10m"}",
         "limit": 3333,
         "start": 1549336675000,
+        "timeZone": "Europe/Oslo",
       },
       {
         "end": 1549338475000,
         "expression": "ts{id=3} * ts{externalId="Timeseries1", aggregate="average"} - ts{externalId="Timeseries1", aggregate="average", granularity="10m"}",
         "limit": 3333,
         "start": 1549336675000,
+        "timeZone": "Europe/Oslo",
       },
     ],
   },

src/__tests__/datasource.test.ts

@@ -43,6 +43,7 @@ const options: any = {
   format: 'json',
   panelId: 1,
   dashboardUID: 1,
+  timezone: 'Europe/Oslo'
 };
 const tsResponseWithId = (id, externalId = `Timeseries${id}`, description = 'test timeseries') =>
   getItemsResponseObject([{ id, externalId, description }]);
@@ -88,6 +89,7 @@ describe('Datasource Query', () => {
         aggregates,
         limit: 10000,
         granularity: '30s',
+        timeZone: 'Europe/Oslo',
       });
     });
 

src/__tests__/datasource.unit.test.ts

@@ -61,7 +61,8 @@ describe('formQueryForItems: enrich items with additional props for request', ()
   const queryOptions = {
     range: { from: dateTime(0), to: dateTime(3000) },
     intervalMs: 2000,
-  } as QueryOptions;
+    timeZone: 'UTC',
+  } as any;
 
   it('for timeseries/data request', () => {
     const queryItems = formQueryForItems(
@@ -84,6 +85,7 @@ describe('formQueryForItems: enrich items with additional props for request', ()
       ],
       limit: 10000,
       start: 0,
+      timeZone: 'UTC'
     });
   });
 

src/cdf/client.ts

@@ -1,5 +1,5 @@
 import { get, cloneDeep } from 'lodash';
-import { DataFrame, Field, TableData, TimeSeries, guessFieldTypeFromNameAndValue } from '@grafana/data';
+import { DataFrame, Field, TableData, TimeSeries, guessFieldTypeFromNameAndValue, getTimeZone } from '@grafana/data';
 import {
   TimeSeriesDatapoint,
   Timestamp,
@@ -24,6 +24,7 @@ import {
   ResponseMetadata,
   Aggregates,
   Granularity,
+  TimeZone,
   Tuple,
   SuccessResponse,
   Responses,
@@ -45,7 +46,7 @@ const variableLabelRegex = /{{([^{}]+)}}/g;
 
 export function formQueryForItems(
   { items, type, target }: QueriesDataItem,
-  { range, intervalMs }: QueryOptions
+  { range, intervalMs, timeZone }: QueryOptions & { timeZone: string }
 ): CDFDataQueryRequest {
   const { aggregation, granularity } = target;
   const [start, end] = getRange(range);
@@ -54,7 +55,7 @@ export function formQueryForItems(
     case 'synthetic': {
       const limit = calculateDPLimitPerQuery(items.length);
       return {
-        items: items.map(({ expression }) => ({ expression, start, end, limit })),
+        items: items.map(({ expression }) => ({ expression, start, end, limit, timeZone })),
       };
     }
     case 'latest': {
@@ -63,12 +64,13 @@ export function formQueryForItems(
       };
     }
     default: {
-      let aggregations: Aggregates & Granularity = null;
+      let aggregations: Aggregates & Granularity & TimeZone = null;
       const isAggregated = aggregation && aggregation !== 'none';
       if (isAggregated) {
         aggregations = {
           aggregates: [aggregation],
           granularity: granularity || toGranularityWithLowerBound(intervalMs),
+          timeZone,
         };
       }
       const limit = calculateDPLimitPerQuery(items.length, isAggregated);
@@ -77,7 +79,7 @@ export function formQueryForItems(
         end,
         start,
         items,
-        limit,
+        limit
       };
     }
   }
@@ -91,7 +93,9 @@ export function formQueriesForTargets(
   queriesData: QueriesDataItem[],
   options: QueryOptions
 ): CDFDataQueryRequest[] {
-  return queriesData.map((itemsData) => formQueryForItems(itemsData, options));
+  const timeZoneValue = options.timezone === 'browser' ? Intl.DateTimeFormat().resolvedOptions().timeZone : options.timezone;
+  const timeZone = timeZoneValue === 'utc' ? timeZoneValue.toUpperCase() : timeZoneValue
+  return queriesData.map((itemsData) => formQueryForItems(itemsData, {...options, timeZone }));
 }
 
 export async function getLabelsForTarget(

src/components/queryEditor.tsx

@@ -1,5 +1,5 @@
 import defaults from 'lodash/defaults';
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   LegacyForms,
   Tab,
@@ -14,7 +14,6 @@ import {
   Input
 } from '@grafana/ui';
 import { SelectableValue } from '@grafana/data';
-import { SystemJS } from '@grafana/runtime';
 import { CustomQueryHelp } from './queryHelp';
 import CogniteDatasource, { resource2DropdownOption } from '../datasource';
 import {
@@ -27,7 +26,6 @@ import {
   EditorProps,
   SelectedProps,
   OnQueryChange,
-  AssetQuery,
 } from '../types';
 import { failedResponseEvent, responseWarningEvent } from '../constants';
 import { ResourceSelect } from './resourceSelect';

src/datasource.ts

@@ -20,7 +20,7 @@ import {
   Resource,
   IdEither,
 } from './cdf/types';
-import { Connector, Fetcher } from './connector';
+import { Connector } from './connector';
 import { CacheTime } from './constants';
 import { parse as parseQuery } from './parser/events-assets';
 import { ParsedFilter, QueryCondition } from './parser/types';

src/types.ts

@@ -416,10 +416,12 @@ export type DataQueryRequestItem = {
   aggregates?: string[];
   id?: number;
   externalId?: string;
+  timeZone?: string;
 };
 
 export type Aggregates = Pick<CDFDataQueryRequest, 'aggregates'>;
 export type Granularity = Pick<CDFDataQueryRequest, 'granularity'>;
+export type TimeZone = Pick<CDFDataQueryRequest, 'timeZone'>;
 
 export interface CDFDataQueryRequest {
   items: DataQueryRequestItem[];
@@ -428,6 +430,7 @@ export interface CDFDataQueryRequest {
   limit?: number;
   aggregates?: string[];
   granularity?: string;
+  timeZone?: string;
 }
 
 export interface DataResponse<T> {