feat: syntax highlight for log viewer (#394)

grafana · Jan 3, 2025 · 44cc415 · 44cc415
1 parent 1c2d87d
commit 44cc415
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 4 deletions.
diff --git a/src/components/Monaco/EditorToolbar.tsx b/src/components/Monaco/EditorToolbar.tsx
@@ -4,6 +4,7 @@ import { k6StudioLightBackground } from './themes/k6StudioLight'
 import { useTheme } from '@/hooks/useTheme'
 import { useLocalStorage } from 'react-use'
 import { WordWrapIcon } from '../icons'
+import { k6StudioDarkBackground } from './themes/k6StudioDark'
 
 export type ToolbarState = {
   wordWrap: 'on' | 'off'
@@ -34,7 +35,8 @@ export const EditorToolbar = ({ getState, actions }: EditorToolbarProps) => {
       p="2"
       justify="end"
       style={{
-        backgroundColor: theme === 'dark' ? '#1e1e1e' : k6StudioLightBackground,
+        backgroundColor:
+          theme === 'dark' ? k6StudioDarkBackground : k6StudioLightBackground,
         borderBottom: `1px solid ${theme === 'dark' ? 'var(--gray-6)' : 'var(--gray-4)'}`,
       }}
     >

diff --git a/src/components/Monaco/ReactMonacoEditor.tsx b/src/components/Monaco/ReactMonacoEditor.tsx
@@ -83,7 +83,7 @@ export function ReactMonacoEditor({
           wordWrap: toolbarState.wordWrap,
         }}
         onMount={handleEditorMount}
-        theme={theme === 'dark' ? 'vs-dark' : 'k6-studio-light'}
+        theme={theme === 'dark' ? 'k6-studio-dark' : 'k6-studio-light'}
       />
     </Flex>
   )

diff --git a/src/components/Monaco/languages/log.ts b/src/components/Monaco/languages/log.ts
@@ -0,0 +1,13 @@
+import * as monaco from 'monaco-editor'
+
+monaco.languages.register({ id: 'log' })
+monaco.languages.setMonarchTokensProvider('log', {
+  tokenizer: {
+    root: [
+      [/\[\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}.\d{3}]/, 'timestamp'],
+      [/\[error]/, 'error'],
+      [/^\s*at.*$/, 'stackTrace'],
+      [/['"].*?['"]/, 'string'],
+    ],
+  },
+})
diff --git a/src/components/Monaco/themes/k6StudioDark.ts b/src/components/Monaco/themes/k6StudioDark.ts
@@ -0,0 +1,18 @@
+import * as monaco from 'monaco-editor'
+import '../languages/log'
+
+export const k6StudioDarkBackground = '#1E1E1E'
+
+monaco.editor.defineTheme('k6-studio-dark', {
+  base: 'vs-dark',
+  inherit: true,
+  rules: [
+    { token: 'error.log', foreground: '#CE9178', fontStyle: 'bold' },
+    { token: 'stackTrace.log', foreground: '#CE9178', fontStyle: 'italic' },
+    { token: 'timestamp.log', foreground: '#368F2E' },
+    { token: 'string.log', foreground: '#CE9178' },
+  ],
+  colors: {
+    'editor.background': k6StudioDarkBackground,
+  },
+})
diff --git a/src/components/Monaco/themes/k6StudioLight.ts b/src/components/Monaco/themes/k6StudioLight.ts
@@ -1,11 +1,17 @@
 import * as monaco from 'monaco-editor'
+import '../languages/log'
 
 export const k6StudioLightBackground = '#fafafa'
 
 monaco.editor.defineTheme('k6-studio-light', {
   base: 'vs',
   inherit: true,
-  rules: [],
+  rules: [
+    { token: 'error.log', foreground: '#A6201E', fontStyle: 'bold' },
+    { token: 'stackTrace.log', foreground: '#A6201E', fontStyle: 'italic' },
+    { token: 'timestamp.log', foreground: '#368F2E' },
+    { token: 'string.log', foreground: '#A6201E' },
+  ],
   colors: {
     'editor.background': k6StudioLightBackground,
   },

diff --git a/src/components/WebLogView/ResponseDetails/Preview.tsx b/src/components/WebLogView/ResponseDetails/Preview.tsx
@@ -3,6 +3,7 @@ import ReactJson from '@microlink/react-json-view'
 import { Font } from './Font'
 import { useTheme } from '@/hooks/useTheme'
 import { k6StudioLightBackground } from '@/components/Monaco/themes/k6StudioLight'
+import { k6StudioDarkBackground } from '@/components/Monaco/themes/k6StudioDark'
 
 interface PreviewProps {
   content: string
@@ -78,7 +79,7 @@ const reactJsonStyles = {
 
 const reactJsonDarkStyles = {
   ...reactJsonStyles,
-  background: '#1e1e1e',
+  background: k6StudioDarkBackground,
 }
 
 const reactJsonLightStyles = {