Loki: Adds support for Loki derived fields to open links in a new tab (#92265)

* Open in new tab for loki derived fields

* Refactor styles

* Update documentation

* Initialise as boolean

.betterer.results

@@ -6306,6 +6306,7 @@ exports[`no gf-form usage`] = {
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
     ],
     "public/app/plugins/datasource/loki/configuration/DerivedField.tsx:5381": [
+      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]

docs/sources/datasources/loki/configure-loki-data-source.md

@@ -124,6 +124,8 @@ Each derived field consists of the following:
 
 - **Internal link** - Toggle on to define an internal link. For internal links, you can select the target data source from a selector. This supports only tracing data sources.
 
+- **Open in new tab** - Toggle on to open the link in a new tab or window.
+
 - **Show example log message** - Click to paste an example log line to test the regular expression of your derived fields.
 
 Click **Save & test** to test your connection.

public/app/plugins/datasource/loki/configuration/DerivedField.tsx

@@ -34,6 +34,9 @@ const getStyles = (theme: GrafanaTheme2) => ({
   internalLink: css({
     marginRight: theme.spacing(1),
   }),
+  openNewTab: css({
+    marginRight: theme.spacing(1),
+  }),
   dataSource: css({}),
   nameMatcherField: css({
     width: theme.spacing(20),
@@ -53,6 +56,7 @@ export const DerivedField = (props: Props) => {
   const { value, onChange, onDelete, suggestions, className, validateName } = props;
   const styles = useStyles2(getStyles);
   const [showInternalLink, setShowInternalLink] = useState(!!value.datasourceUid);
+  const [openInNewTab, setOpenInNewTab] = useState(!!value.targetBlank);
   const previousUid = usePrevious(value.datasourceUid);
   const [fieldType, setFieldType] = useState<MatcherType>(value.matcherType ?? 'regex');
 
@@ -198,6 +202,22 @@ export const DerivedField = (props: Props) => {
           </Field>
         )}
       </div>
+
+      <div className="gf-form">
+        <Field label="Open in new tab" className={styles.openNewTab}>
+          <Switch
+            value={openInNewTab}
+            onChange={(e: ChangeEvent<HTMLInputElement>) => {
+              const { checked } = e.currentTarget;
+              onChange({
+                ...value,
+                targetBlank: checked,
+              });
+              setOpenInNewTab(checked);
+            }}
+          />
+        </Field>
+      </div>
     </div>
   );
 };

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

@@ -122,6 +122,7 @@ describe('getDerivedFields', () => {
         matcherType: 'regex',
         name: 'trace1',
         url: 'http://localhost/${__value.raw}',
+        targetBlank: true,
       },
       {
         matcherRegex: 'trace3',
@@ -141,6 +142,7 @@ describe('getDerivedFields', () => {
     expect(trace1!.config.links![0]).toEqual({
       url: 'http://localhost/${__value.raw}',
       title: '',
+      targetBlank: true,
     });
 
     const trace3 = newFields.find((f) => f.name === 'trace3Name');

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

@@ -95,6 +95,7 @@ function fieldFromDerivedFieldConfig(derivedFieldConfigs: DerivedFieldConfig[]):
           datasourceUid: derivedFieldConfig.datasourceUid,
           datasourceName: dsSettings?.name ?? 'Data source not found',
         },
+        targetBlank: derivedFieldConfig.targetBlank,
       });
     } else if (derivedFieldConfig.url) {
       acc.push({
@@ -102,6 +103,7 @@ function fieldFromDerivedFieldConfig(derivedFieldConfigs: DerivedFieldConfig[]):
         title: derivedFieldConfig.urlDisplayLabel || '',
         // This is hardcoded for Jaeger or Zipkin not way right now to specify datasource specific query object
         url: derivedFieldConfig.url,
+        targetBlank: derivedFieldConfig.targetBlank,
       });
     }
     return acc;

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

@@ -66,6 +66,7 @@ export type DerivedFieldConfig = {
   urlDisplayLabel?: string;
   datasourceUid?: string;
   matcherType?: 'label' | 'regex';
+  targetBlank?: boolean;
 };
 
 export enum LokiVariableQueryType {