From 5af380a5c7ca24bacbc6d0acdd99d37cd4336ff4 Mon Sep 17 00:00:00 2001 From: fraser-qs Date: Tue, 30 Dec 2025 22:03:20 +0000 Subject: [PATCH 1/3] [FEATURE] Logstable: Add back in colour coded log rows Signed-off-by: fraser-qs --- logstable/src/components/LogRow/LogRow.tsx | 1 + logstable/src/components/hooks/useSeverity.ts | 37 +++++++++++++++++++ logstable/src/components/utils.ts | 29 +++++++++++++++ 3 files changed, 67 insertions(+) create mode 100644 logstable/src/components/hooks/useSeverity.ts create mode 100644 logstable/src/components/utils.ts diff --git a/logstable/src/components/LogRow/LogRow.tsx b/logstable/src/components/LogRow/LogRow.tsx index d64ee2c0..0b911b73 100644 --- a/logstable/src/components/LogRow/LogRow.tsx +++ b/logstable/src/components/LogRow/LogRow.tsx @@ -18,6 +18,7 @@ import { LogEntry } from '@perses-dev/core'; import { LogTimestamp } from './LogTimestamp'; import { LogRowContainer, LogRowContent, ExpandButton, LogText } from './LogsStyles'; import { LogDetailsTable } from './LogDetailsTable'; +import { useSeverityColor } from '../hooks/useSeverity'; interface LogRowProps { log?: LogEntry; diff --git a/logstable/src/components/hooks/useSeverity.ts b/logstable/src/components/hooks/useSeverity.ts new file mode 100644 index 00000000..92ed0966 --- /dev/null +++ b/logstable/src/components/hooks/useSeverity.ts @@ -0,0 +1,37 @@ +// Copyright 2025 The Perses Authors +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import { useTheme } from '@mui/material'; +import { getSeverity } from '../utils'; +import { LogEntry } from '@perses-dev/core'; + +export const useSeverityColor = (log?: LogEntry) => { + const theme = useTheme(); + if (!log) { + return theme.palette.text.secondary; + } + const severity = getSeverity(log); + + switch (severity) { + case 'error': + return theme.palette.error.main; + case 'warn': + return theme.palette.warning.main; + case 'info': + return theme.palette.info.main; + case 'debug': + return theme.palette.primary.main; + default: + return theme.palette.text.secondary; + } +}; \ No newline at end of file diff --git a/logstable/src/components/utils.ts b/logstable/src/components/utils.ts new file mode 100644 index 00000000..19468c95 --- /dev/null +++ b/logstable/src/components/utils.ts @@ -0,0 +1,29 @@ +// Copyright 2025 The Perses Authors +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import { LogEntry } from '@perses-dev/core'; + +export const getSeverity = (log: LogEntry): 'info' | 'warn' | 'error' | 'debug' | 'unknown' => { + const level = log.labels?.level?.toLowerCase(); + + if (level) { + if (level.includes('critical')) return 'error' + if (level.includes('fatal')) return 'error' + if (level.includes('error') || level.includes('err')) return 'error'; + if (level.includes('warn')) return 'warn'; + if (level.includes('info')) return 'info'; + if (level.includes('debug')) return 'debug'; + } + + return 'unknown'; +}; \ No newline at end of file From b059841ad44ccb033434c4d3c13723ac70a56f11 Mon Sep 17 00:00:00 2001 From: fraser-qs Date: Wed, 31 Dec 2025 10:06:11 +0000 Subject: [PATCH 2/3] fix npm linting and correctly use useSeverityColor Signed-off-by: fraser-qs --- logstable/src/components/LogRow/LogRow.tsx | 5 ++--- logstable/src/components/hooks/useSeverity.ts | 2 +- logstable/src/components/utils.ts | 6 +++--- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/logstable/src/components/LogRow/LogRow.tsx b/logstable/src/components/LogRow/LogRow.tsx index 0b911b73..335ab68d 100644 --- a/logstable/src/components/LogRow/LogRow.tsx +++ b/logstable/src/components/LogRow/LogRow.tsx @@ -15,10 +15,10 @@ import React, { memo, useCallback } from 'react'; import { Box, Collapse, useTheme } from '@mui/material'; import ChevronRight from 'mdi-material-ui/ChevronRight'; import { LogEntry } from '@perses-dev/core'; +import { useSeverityColor } from '../hooks/useSeverity'; import { LogTimestamp } from './LogTimestamp'; import { LogRowContainer, LogRowContent, ExpandButton, LogText } from './LogsStyles'; import { LogDetailsTable } from './LogDetailsTable'; -import { useSeverityColor } from '../hooks/useSeverity'; interface LogRowProps { log?: LogEntry; @@ -39,8 +39,7 @@ const DefaultLogRow: React.FC = ({ showTime = false, allowWrap = false, }) => { - const theme = useTheme(); - const severityColor = theme.palette.text.secondary; + const severityColor = useSeverityColor(log); const handleToggle = useCallback(() => { if (isExpandable) { diff --git a/logstable/src/components/hooks/useSeverity.ts b/logstable/src/components/hooks/useSeverity.ts index 92ed0966..f504e3bf 100644 --- a/logstable/src/components/hooks/useSeverity.ts +++ b/logstable/src/components/hooks/useSeverity.ts @@ -12,8 +12,8 @@ // limitations under the License. import { useTheme } from '@mui/material'; -import { getSeverity } from '../utils'; import { LogEntry } from '@perses-dev/core'; +import { getSeverity } from '../utils'; export const useSeverityColor = (log?: LogEntry) => { const theme = useTheme(); diff --git a/logstable/src/components/utils.ts b/logstable/src/components/utils.ts index 19468c95..4ee39185 100644 --- a/logstable/src/components/utils.ts +++ b/logstable/src/components/utils.ts @@ -17,8 +17,8 @@ export const getSeverity = (log: LogEntry): 'info' | 'warn' | 'error' | 'debug' const level = log.labels?.level?.toLowerCase(); if (level) { - if (level.includes('critical')) return 'error' - if (level.includes('fatal')) return 'error' + if (level.includes('critical')) return 'error'; + if (level.includes('fatal')) return 'error'; if (level.includes('error') || level.includes('err')) return 'error'; if (level.includes('warn')) return 'warn'; if (level.includes('info')) return 'info'; @@ -26,4 +26,4 @@ export const getSeverity = (log: LogEntry): 'info' | 'warn' | 'error' | 'debug' } return 'unknown'; -}; \ No newline at end of file +}; From a7e67e48b57899d7a416ba4eea24f4f6b29d5d39 Mon Sep 17 00:00:00 2001 From: fraser-qs Date: Wed, 31 Dec 2025 16:35:49 +0000 Subject: [PATCH 3/3] fix npm linting Signed-off-by: fraser-qs --- logstable/src/components/LogRow/LogRow.tsx | 2 +- logstable/src/components/hooks/useSeverity.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/logstable/src/components/LogRow/LogRow.tsx b/logstable/src/components/LogRow/LogRow.tsx index 335ab68d..5253ed07 100644 --- a/logstable/src/components/LogRow/LogRow.tsx +++ b/logstable/src/components/LogRow/LogRow.tsx @@ -12,7 +12,7 @@ // limitations under the License. import React, { memo, useCallback } from 'react'; -import { Box, Collapse, useTheme } from '@mui/material'; +import { Box, Collapse } from '@mui/material'; import ChevronRight from 'mdi-material-ui/ChevronRight'; import { LogEntry } from '@perses-dev/core'; import { useSeverityColor } from '../hooks/useSeverity'; diff --git a/logstable/src/components/hooks/useSeverity.ts b/logstable/src/components/hooks/useSeverity.ts index f504e3bf..4118aad4 100644 --- a/logstable/src/components/hooks/useSeverity.ts +++ b/logstable/src/components/hooks/useSeverity.ts @@ -34,4 +34,4 @@ export const useSeverityColor = (log?: LogEntry) => { default: return theme.palette.text.secondary; } -}; \ No newline at end of file +};