Logs: Derived fields link design update (#23695)

public/app/plugins/datasource/loki/result_transformer.test.ts

@@ -104,7 +104,7 @@ describe('loki result transformer', () => {
 });
 
 describe('enhanceDataFrame', () => {
-  it('', () => {
+  it('adds links to fields', () => {
     const df = new MutableDataFrame({ fields: [{ name: 'line', values: ['nothing', 'trace1=1234', 'trace2=foo'] }] });
     enhanceDataFrame(df, {
       derivedFields: [
@@ -123,8 +123,15 @@ describe('enhanceDataFrame', () => {
     expect(df.fields.length).toBe(3);
     const fc = new FieldCache(df);
     expect(fc.getFieldByName('trace1').values.toArray()).toEqual([null, '1234', null]);
-    expect(fc.getFieldByName('trace1').config.links[0]).toEqual({ url: 'http://localhost/${__value.raw}', title: '' });
+    expect(fc.getFieldByName('trace1').config.links[0]).toEqual({
+      url: 'http://localhost/${__value.raw}',
+      title: '',
+    });
+
     expect(fc.getFieldByName('trace2').values.toArray()).toEqual([null, null, 'foo']);
-    expect(fc.getFieldByName('trace2').config.links[0]).toEqual({ title: '', meta: { datasourceUid: 'uid' } });
+    expect(fc.getFieldByName('trace2').config.links[0]).toEqual({
+      title: '',
+      meta: { datasourceUid: 'uid' },
+    });
   });
 });

public/app/plugins/datasource/loki/result_transformer.ts

@@ -12,6 +12,8 @@ import {
   findUniqueLabels,
   FieldConfig,
   DataFrameView,
+  DataLink,
+  Field,
 } from '@grafana/data';
 
 import templateSrv from 'app/features/templating/template_srv';
@@ -28,6 +30,7 @@ import {
   LokiTailResponse,
   LokiQuery,
   LokiOptions,
+  DerivedFieldConfig,
 } from './types';
 
 /**
@@ -289,44 +292,50 @@ export const enhanceDataFrame = (dataFrame: DataFrame, config: LokiOptions | nul
   if (!derivedFields.length) {
     return;
   }
-
-  const fields = derivedFields.reduce((acc, field) => {
-    const config: FieldConfig = {};
-    if (field.url || field.datasourceUid) {
-      config.links = [
-        {
-          url: field.url,
-          title: '',
-          meta: field.datasourceUid
-            ? {
-                datasourceUid: field.datasourceUid,
-              }
-            : undefined,
-        },
-      ];
-    }
-    const dataFrameField = {
-      name: field.name,
-      type: FieldType.string,
-      config,
-      values: new ArrayVector<string>([]),
-    };
-
-    acc[field.name] = dataFrameField;
-    return acc;
-  }, {} as Record<string, any>);
+  const newFields = derivedFields.map(fieldFromDerivedFieldConfig);
+  const newFieldsMap = _.keyBy(newFields, 'name');
 
   const view = new DataFrameView(dataFrame);
   view.forEach((row: { line: string }) => {
     for (const field of derivedFields) {
       const logMatch = row.line.match(field.matcherRegex);
-      fields[field.name].values.add(logMatch && logMatch[1]);
+      newFieldsMap[field.name].values.add(logMatch && logMatch[1]);
     }
   });
 
-  dataFrame.fields = [...dataFrame.fields, ...Object.values(fields)];
+  dataFrame.fields = [...dataFrame.fields, ...newFields];
 };
 
+/**
+ * Transform derivedField config into dataframe field with config that contains link.
+ */
+function fieldFromDerivedFieldConfig(derivedFieldConfig: DerivedFieldConfig): Field<any, ArrayVector> {
+  const config: FieldConfig = {};
+  if (derivedFieldConfig.url || derivedFieldConfig.datasourceUid) {
+    const link: Partial<DataLink> = {
+      // We do not know what title to give here so we count on presentation layer to create a title from metadata.
+      title: '',
+      url: derivedFieldConfig.url,
+    };
+
+    // Having field.datasourceUid means it is an internal link.
+    if (derivedFieldConfig.datasourceUid) {
+      link.meta = {
+        datasourceUid: derivedFieldConfig.datasourceUid,
+      };
+    }
+
+    config.links = [link as DataLink];
+  }
+  return {
+    name: derivedFieldConfig.name,
+    type: FieldType.string,
+    config,
+    // We are adding values later on
+    values: new ArrayVector<string>([]),
+  };
+}
+
 export function rangeQueryResponseToTimeSeries(
   response: LokiResponse,
   query: LokiRangeQueryRequest,