New Logs Panel: add syntax highlighting option (#106611)

packages/grafana-schema/src/raw/composable/logs/panelcfg/x/LogsPanelCfg_types.gen.ts

@@ -41,6 +41,7 @@ export interface Options {
   showLogContextToggle: boolean;
   showTime: boolean;
   sortOrder: common.LogsSortOrder;
+  syntaxHighlighting?: boolean;
   wrapLogMessage: boolean;
 }
 

public/app/plugins/panel/logs/LogsPanel.tsx

@@ -152,6 +152,7 @@ export const LogsPanel = ({
     enableInfiniteScrolling,
     onNewLogsReceived,
     fontSize,
+    syntaxHighlighting,
     ...options
   },
   id,
@@ -568,7 +569,7 @@ export const LogsPanel = ({
               showTime={showTime}
               sortOrder={sortOrder}
               logOptionsStorageKey={storageKey}
-              syntaxHighlighting={prettifyLogMessage}
+              syntaxHighlighting={syntaxHighlighting}
               timeRange={data.timeRange}
               timeZone={timeZone}
               wrapLogMessage={wrapLogMessage}

public/app/plugins/panel/logs/module.tsx

@@ -30,19 +30,29 @@ export const plugin = new PanelPlugin<Options>(LogsPanel)
         });
     }
 
-    builder
-      .addBooleanSwitch({
-        path: 'wrapLogMessage',
-        name: 'Wrap lines',
-        description: '',
-        defaultValue: false,
-      })
-      .addBooleanSwitch({
+    builder.addBooleanSwitch({
+      path: 'wrapLogMessage',
+      name: 'Wrap lines',
+      description: '',
+      defaultValue: false,
+    });
+
+    if (config.featureToggles.newLogsPanel) {
+      builder.addBooleanSwitch({
+        path: 'syntaxHighlighting',
+        name: 'Enable syntax highlighting',
+        description: 'Use a predefined syntax coloring grammar to highlight relevant parts of the log lines',
+      });
+    } else {
+      builder.addBooleanSwitch({
         path: 'prettifyLogMessage',
-        name: config.featureToggles.newLogsPanel ? 'Enable log message highlighting' : 'Prettify JSON',
+        name: 'Prettify JSON',
         description: '',
         defaultValue: false,
-      })
+      });
+    }
+
+    builder
       .addBooleanSwitch({
         path: 'enableLogDetails',
         name: 'Enable log details',

public/app/plugins/panel/logs/panelcfg.cue

@@ -35,6 +35,7 @@ composableKinds: PanelCfg: {
 					wrapLogMessage:           bool
 					prettifyLogMessage:       bool
 					enableLogDetails:         bool
+					syntaxHighlighting?:      bool
 					sortOrder:                common.LogsSortOrder
 					dedupStrategy:            common.LogsDedupStrategy
 					enableInfiniteScrolling?: bool

public/app/plugins/panel/logs/panelcfg.gen.ts

@@ -39,6 +39,7 @@ export interface Options {
   showLogContextToggle: boolean;
   showTime: boolean;
   sortOrder: common.LogsSortOrder;
+  syntaxHighlighting?: boolean;
   wrapLogMessage: boolean;
 }