Allow templated legend via attribute keys and values from query results

package.json

@@ -31,6 +31,7 @@
     "@lezer/common": "1.1.1",
     "@lezer/highlight": "1.2.0",
     "@lezer/lr": "1.3.14",
+    "lodash": "^4.17.21",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tslib": "2.5.3"

src/preprocessors/__snapshots__/index.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`preprocesses logs successfully 1`] = `
+exports[`logs preprocesses successfully 1`] = `
 {
   "fields": [
     {
@@ -91,3 +91,68 @@ exports[`preprocesses logs successfully 1`] = `
   "refId": "a",
 }
 `;
+
+exports[`preprocesses Timeseries successfully should set displayNameDS with legend formatter 1`] = `
+{
+  "fields": [
+    {
+      "config": {},
+      "labels": undefined,
+      "name": "Time",
+      "type": "time",
+      "values": [
+        0,
+        1,
+        2,
+      ],
+    },
+    {
+      "config": {
+        "displayNameFromDS": "/get",
+        "links": [
+          {
+            "targetBlank": true,
+            "title": "Create a Notebook in Lightstep",
+            "url": "https://notebooks",
+          },
+        ],
+      },
+      "labels": {
+        "operation": "/get",
+      },
+      "name": "Value",
+      "type": "number",
+      "values": [
+        1,
+        7,
+        1,
+      ],
+    },
+    {
+      "config": {
+        "displayNameFromDS": "/load",
+        "links": [
+          {
+            "targetBlank": true,
+            "title": "Create a Notebook in Lightstep",
+            "url": "https://notebooks",
+          },
+        ],
+      },
+      "labels": {
+        "operation": "/load",
+      },
+      "name": "Value",
+      "type": "number",
+      "values": [
+        6,
+        5,
+        9,
+      ],
+    },
+  ],
+  "meta": undefined,
+  "name": undefined,
+  "refId": undefined,
+}
+`;

src/preprocessors/index.test.js

@@ -1,45 +1,78 @@
 import { preprocessData } from './index';
 
-test('preprocesses logs successfully', () => {
-  const logsDataFrame = preprocessData(
-    {
-      data: {
-        attributes: {
-          logs: [
-            [
-              1691409972788,
-              {
-                event: 'one',
-                severity: 'ErrorSeverity',
-                tags: {
-                  'http.status_code': 200,
-                  large_batch: true,
-                  trace_id: 'd29a3fa8fb446ec65eb691a3259a541e',
+describe('logs', () => {
+  it('preprocesses successfully', () => {
+    const logsDataFrame = preprocessData(
+      {
+        data: {
+          attributes: {
+            logs: [
+              [
+                1691409972788,
+                {
+                  event: 'one',
+                  severity: 'ErrorSeverity',
+                  tags: {
+                    'http.status_code': 200,
+                    large_batch: true,
+                    trace_id: 'd29a3fa8fb446ec65eb691a3259a541e',
+                  },
                 },
-              },
-            ],
-            [
-              1691409971908,
-              {
-                event: 'two',
-                severity: 'InfoSeverity',
-                tags: {
-                  customer: 'hipcore',
-                  large_batch: false,
-                  trace_id: 'd0fa420269652931236c94bc54d2233e',
+              ],
+              [
+                1691409971908,
+                {
+                  event: 'two',
+                  severity: 'InfoSeverity',
+                  tags: {
+                    customer: 'hipcore',
+                    large_batch: false,
+                    trace_id: 'd0fa420269652931236c94bc54d2233e',
+                  },
+                  k8s_environment: 'production',
+                  k8s_namespace: 'default',
+                  k8s_pod: 'hipcore-pod',
                 },
-                k8s_environment: 'production',
-                k8s_namespace: 'default',
-                k8s_pod: 'hipcore-pod',
-              },
+              ],
             ],
-          ],
+          },
         },
       },
-    },
-    { refId: 'a' },
-    ''
-  );
+      { refId: 'a' },
+      ''
+    );
+
+    expect(logsDataFrame.toJSON()).toMatchSnapshot();
+  });
+});
 
-  expect(logsDataFrame.toJSON()).toMatchSnapshot();
+describe('preprocesses Timeseries successfully', () => {
+  it('should set displayNameDS with legend formatter', () => {
+    const res = {
+      data: {
+        attributes: {
+          series: [
+            {
+              'group-labels': ['operation=/get'],
+              points: [
+                [0, 1],
+                [1, 7],
+                [2, 1],
+              ],
+            },
+            {
+              'group-labels': ['operation=/load'],
+              points: [
+                [0, 6],
+                [1, 5],
+                [2, 9],
+              ],
+            },
+          ],
+        },
+      },
+    };
+    const query = { projectName: 'demo', format: '{{operation}}' };
+    expect(preprocessData(res, query, 'https://notebooks')).toMatchSnapshot();
+  });
 });

src/preprocessors/timeseries.test.js

@@ -1,21 +1,4 @@
-import { setTemplateSrv } from '@grafana/runtime';
-import { createSortedTimestamps, createTimestampMap, createFieldName } from './timeseries';
-
-beforeAll(() => {
-  // Create a mock template server
-  // nb this is used in the createFieldName tests
-  setTemplateSrv({
-    getVariables() {
-      return [];
-    },
-    replace(target, scopedVars, format) {
-      if (target.includes('$service')) {
-        return target.replace('$service', JSON.stringify(['web', 'android', 'ios']));
-      }
-      return target || '';
-    },
-  });
-});
+import { createSortedTimestamps, createTimestampMap, transformLabels } from './timeseries';
 
 describe('createSortedTimestamps()', () => {
   test('should assemble a complete set of sorted timestamps for all series', () => {
@@ -54,78 +37,20 @@ describe('createTimestampMap()', () => {
   });
 });
 
-describe('createFieldName', () => {
-  test.each([
-    // NO QUERY NAME DEFINED
-    {
-      name: 'returns query text when there are undefined group labels without query name',
-      format: undefined,
-      queryText: 'metric requests | delta',
-      groupLabels: undefined,
-      options: {},
-      expected: 'metric requests | delta',
-    },
-    {
-      name: 'returns query text when there are empty group labels without query name',
-      format: undefined,
-      queryText: 'metric requests | delta',
-      groupLabels: [],
-      options: {},
-      expected: 'metric requests | delta',
-    },
-    {
-      name: 'returns formatted single label without query name',
-      format: undefined,
-      queryText: 'metric requests | delta',
-      groupLabels: ['customer=Lightstep'],
-      options: {},
-      expected: '{customer="Lightstep"}',
-    },
-    {
-      name: 'returns query text when there are empty group labels without query name',
-      format: undefined,
-      queryText: 'metric requests | delta',
-      groupLabels: ['customer=Lightstep', 'service=api', 'method=/pay'],
-      options: {},
-      expected: '{customer="Lightstep", method="/pay", service="api"}',
-    },
+describe('transformLabels', () => {
+  it('single label', () => {
+    expect(transformLabels(['customer=Lightstep'])).toEqual({ customer: 'Lightstep' });
+  });
 
-    // CUSTOM QUERY NAME DEFINED
-    {
-      name: 'returns query name when defined',
-      format: 'custom',
-      queryText: 'metric requests | delta',
-      groupLabels: undefined,
-      options: {},
-      expected: 'custom',
-    },
-    {
-      name: 'returns query name when defined with group labels',
-      format: 'custom',
-      queryText: 'metric requests | delta',
-      groupLabels: ['customer=Lightstep', 'service=api', 'method=/pay'],
-      options: {},
-      expected: 'custom {customer="Lightstep", method="/pay", service="api"}',
-    },
-    {
-      name: 'returns query name when defined with template variables',
-      format: '$service requests',
-      queryText: 'metric requests | delta | filter service == $service',
-      groupLabels: undefined,
-      options: {},
-      expected: '["web","android","ios"] requests',
-    },
+  it('missing label value', () => {
+    expect(transformLabels(['customer='])).toEqual({ customer: '<undefined>' });
+  });
+
+  it('multi labels', () => {
+    expect(transformLabels(['customer=LightStep', 'service=web'])).toEqual({ customer: 'LightStep', service: 'web' });
+  });
 
-    // EDGE CASES
-    {
-      name: 'handles "=" in group label value',
-      format: undefined,
-      queryText: 'metric requests | delta',
-      groupLabels: ['compare=true==true'],
-      options: {},
-      expected: '{compare="true==true"}',
-    },
-  ])('$name', ({ format, queryText, groupLabels, options, expected }) => {
-    expect(createFieldName(format, queryText, groupLabels, options)).toBe(expected);
+  it('no labels', () => {
+    expect(transformLabels([])).toEqual({});
   });
 });