Explore: Show log line if there is an interpolated link (#62926)

* bring in source from database

* bring in transformations from database

* add regex transformations to scopevar

* Consolidate types, add better example, cleanup

* Add var only if match

* Change ScopedVar to not require text, do not leak transformation-made variables between links

* Add mappings and start implementing logfmt

* Add mappings and start implementing logfmt

* Remove mappings, turn off global regex

* Add example yaml and omit transformations if empty

* Fix the yaml

* Add logfmt transformation

* Cleanup transformations and yaml

* add transformation field to FE types and use it, safeStringify logfmt values

* Add tests, only safe stringify if non-string, fix bug with safe stringify where it would return empty string with false value

* Add test for transformation field

* Do not add null transformations object

* Add provisioning (to be removed) and show log lines with links

* Only display links if change to query was made

* Break out transformation logic, add tests to backend code

* Fix lint errors I understand 😅

* Fix the backend lint error

* Remove unnecessary code and mark new Transformations object as internal

* Add support for named capture groups

* Remove type assertion

* Remove variable name from transformation

* Add test for overriding regexes

* Add back variable name field, but change to mapValue

* fix go api test

* Change transformation types to enum, add better provisioning checks for bad type name and format

* Change transformation types to enum, add better provisioning checks for bad type name and format

* Check for expression with regex transformations

* Remove isInterpolated variable, add option to always use format function

* Add template variable check to links

* Use new functions

* Filter log line at render, remove extra createSpanLink imports

* Add scrollable to long log messages

* Remove test that is no longer accurate

* Remove test correlation

* Add tests, fix duplicate key issue

* WIP: show log line links key/value pairs

* Some not great style changes

* Change LogDetailsRow for better multi value formatting

* Cleanup

* Add additional information around variable regex, implement PR feedback

* Display name with fieldPath if applicable

* Add variables with fieldPaths to test

* Count empty string as undefined variable

* Add better commented version of function, fix tests by removing new variable

* Modify when links show

* Remove sample yaml

* If a link has no variables, set value to field name, and some formatting issues

* Add comments and change variable names to be more clear, add back logic where needed, add test coverage for new scenario

* Fix formatting of replaceInVariableRegex comment

* Remove changes from Grafana-data, move logic into explore

* Rename function and property to match similar format

* Move types to type files and consolidate definitions, rename functions, change field definitions to accept arrays of keys/values, move function to parser, hide actions on multi key/value rows

* Add tests to logParser’s new function

public/app/features/templating/template_srv.mock.ts

@@ -40,6 +40,21 @@ export class TemplateSrvMock implements TemplateSrv {
     });
   }
 
+  getAllVariablesInTarget(target: string, scopedVars: ScopedVars): Record<string, string> {
+    const regexp = new RegExp(this.regex);
+    const values: Record<string, string> = {};
+
+    target.replace(regexp, (match, var1, var2, fmt2, var3, fieldPath) => {
+      const variableName = var1 || var2 || var3;
+      values[variableName] = this.variables[variableName];
+
+      // Don't care about the result anyway
+      return '';
+    });
+
+    return values;
+  }
+
   getVariableName(expression: string) {
     this.regex.lastIndex = 0;
     const match = this.regex.exec(expression);

public/app/features/templating/template_srv.ts

@@ -7,6 +7,7 @@ import {
   AdHocVariableFilter,
   AdHocVariableModel,
   TypedVariableModel,
+  VariableMap,
 } from '@grafana/data';
 import { getDataSourceSrv, setTemplateSrv, TemplateSrv as BaseTemplateSrv } from '@grafana/runtime';
 import { sceneGraph, FormatRegistryID, formatRegistry, CustomFormatterFn } from '@grafana/scenes';
@@ -347,6 +348,51 @@ export class TemplateSrv implements BaseTemplateSrv {
     });
   }
 
+  getAllVariablesInTarget(target: string, scopedVars: ScopedVars, format?: string | Function): VariableMap {
+    const values: VariableMap = {};
+
+    this.replaceInVariableRegex(target, (match, var1, var2, fmt2, var3, fieldPath, fmt3) => {
+      const variableName = var1 || var2 || var3;
+      const variableDisplayName =
+        var1 || var2 || (var3 !== undefined && fieldPath !== undefined) ? `${var3}.${fieldPath}` : var3;
+      const fmt = fmt2 || fmt3 || format;
+      const value = this.getVariableValue(variableName, fieldPath, scopedVars);
+      if (value !== null && value !== undefined) {
+        const variable = this.getVariableAtIndex(variableName);
+        const text = this.getVariableText(variableName, value, scopedVars);
+        values[variableDisplayName] = this.formatValue(value, fmt, variable, text);
+      } else {
+        values[variableDisplayName] = undefined;
+      }
+
+      // Don't care about the result anyway
+      return '';
+    });
+
+    return values;
+  }
+
+  /**
+   * The replace function, for every match, will return a function that has the full match as a param
+   * followed by one param per capture group of the variable regex.
+   *
+   * See the definition of this.regex for further comments on the variable definitions.
+   */
+  private replaceInVariableRegex(
+    text: string,
+    replace: (
+      fullMatch: string, //     $simpleVarName   [[squareVarName:squareFormat]]   ${curlyVarName.curlyPath:curlyFormat}
+      simpleVarName: string, // simpleVarName                  -                                     -
+      squareVarName: string, //        -                squareVarName                                -
+      squareFormat: string, //         -                squareFormat                                 -
+      curlyVarName: string, //         -                      -                                curlyVarName
+      curlyPath: string, //            -                      -                                  curlyPath
+      curlyFormat: string //           -                      -                                 curlyFormat
+    ) => string
+  ) {
+    return text.replace(this.regex, replace);
+  }
+
   isAllValue(value: any) {
     return value === ALL_VARIABLE_VALUE || (Array.isArray(value) && value[0] === ALL_VARIABLE_VALUE);
   }