mirror of
https://git.sr.ht/~ashkeel/strimertul
synced 2024-09-20 02:00:49 +00:00
feat: collapsible and more compact logs
This commit is contained in:
parent
ffcb61172a
commit
e5439c170d
2 changed files with 30 additions and 13 deletions
|
@ -296,6 +296,7 @@
|
||||||
"error": "Error"
|
"error": "Error"
|
||||||
},
|
},
|
||||||
"copy-to-clipboard": "Copy to clipboard",
|
"copy-to-clipboard": "Copy to clipboard",
|
||||||
"copied": "Copied!"
|
"copied": "Copied!",
|
||||||
|
"toggle-details": "Toggle details"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { ClipboardCopyIcon, Cross2Icon } from '@radix-ui/react-icons';
|
import { ClipboardCopyIcon, Cross2Icon, SizeIcon } from '@radix-ui/react-icons';
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { useSelector } from 'react-redux';
|
import { useSelector } from 'react-redux';
|
||||||
|
@ -153,25 +153,30 @@ const LogTime = styled('div', {
|
||||||
const LogMessage = styled('div', {
|
const LogMessage = styled('div', {
|
||||||
gridColumn: '2',
|
gridColumn: '2',
|
||||||
padding: '0.4rem 0.5rem',
|
padding: '0.4rem 0.5rem',
|
||||||
|
wordBreak: 'break-all',
|
||||||
});
|
});
|
||||||
const LogActions = styled('div', {
|
const LogActions = styled('div', {
|
||||||
gridColumn: '3',
|
gridColumn: '3',
|
||||||
|
display: 'flex',
|
||||||
|
gap: '0.5rem',
|
||||||
padding: '0.4rem 0.5rem 0',
|
padding: '0.4rem 0.5rem 0',
|
||||||
|
'& a': {
|
||||||
|
color: '$gray10',
|
||||||
'&:hover': {
|
'&:hover': {
|
||||||
color: '$gray12',
|
color: '$gray12',
|
||||||
cursor: 'pointer',
|
cursor: 'pointer',
|
||||||
},
|
},
|
||||||
color: '$gray10',
|
},
|
||||||
variants: {
|
variants: {
|
||||||
level: {
|
level: {
|
||||||
info: {},
|
info: {},
|
||||||
warn: {
|
warn: {
|
||||||
'&:hover': {
|
'& a:hover': {
|
||||||
color: '$yellow11',
|
color: '$yellow11',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
error: {
|
error: {
|
||||||
'&:hover': {
|
'& a:hover': {
|
||||||
color: '$red11',
|
color: '$red11',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -183,10 +188,10 @@ const LogDetails = styled('div', {
|
||||||
gridColumn: '2/4',
|
gridColumn: '2/4',
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
gap: '1rem',
|
gap: '1rem',
|
||||||
fontSize: '0.7em',
|
fontSize: '0.8em',
|
||||||
color: '$gray11',
|
color: '$gray11',
|
||||||
backgroundColor: '$gray3',
|
backgroundColor: '$gray3',
|
||||||
padding: '0.2rem 0.3rem 0.1rem 0.5rem',
|
padding: '0.5rem 0.5rem 0.3rem',
|
||||||
borderBottomRightRadius: theme.borderRadius.form,
|
borderBottomRightRadius: theme.borderRadius.form,
|
||||||
borderBottomLeftRadius: theme.borderRadius.form,
|
borderBottomLeftRadius: theme.borderRadius.form,
|
||||||
variants: {
|
variants: {
|
||||||
|
@ -226,6 +231,7 @@ function LogItem({ data }: LogItemProps) {
|
||||||
const levelStyle = isSupportedLevel(data.level) ? data.level : null;
|
const levelStyle = isSupportedLevel(data.level) ? data.level : null;
|
||||||
const details = Object.entries(data.data).filter(([key]) => key.length > 1);
|
const details = Object.entries(data.data).filter(([key]) => key.length > 1);
|
||||||
const [copied, setCopied] = useState(false);
|
const [copied, setCopied] = useState(false);
|
||||||
|
const [showDetails, setShowDetails] = useState(false);
|
||||||
const copyToClipboard = async () => {
|
const copyToClipboard = async () => {
|
||||||
await navigator.clipboard.writeText(JSON.stringify(data.data));
|
await navigator.clipboard.writeText(JSON.stringify(data.data));
|
||||||
setCopied(true);
|
setCopied(true);
|
||||||
|
@ -237,11 +243,21 @@ function LogItem({ data }: LogItemProps) {
|
||||||
<LogTime level={levelStyle}>{formatTime(data.time)}</LogTime>
|
<LogTime level={levelStyle}>{formatTime(data.time)}</LogTime>
|
||||||
<LogMessage>{data.message}</LogMessage>
|
<LogMessage>{data.message}</LogMessage>
|
||||||
<LogActions level={levelStyle}>
|
<LogActions level={levelStyle}>
|
||||||
|
{details.length > 0 ? (
|
||||||
|
<a
|
||||||
|
aria-label={t('logging.toggle-details')}
|
||||||
|
title={t('logging.toggle-details')}
|
||||||
|
onClick={() => {
|
||||||
|
setShowDetails(!showDetails);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SizeIcon />
|
||||||
|
</a>
|
||||||
|
) : null}
|
||||||
{copied ? (
|
{copied ? (
|
||||||
<span style={{ fontSize: '0.9em' }}>{t('logging.copied')}</span>
|
<span style={{ fontSize: '0.9em' }}>{t('logging.copied')}</span>
|
||||||
) : (
|
) : (
|
||||||
<a
|
<a
|
||||||
style={{ color: 'inherit' }}
|
|
||||||
aria-label={t('logging.copy-to-clipboard')}
|
aria-label={t('logging.copy-to-clipboard')}
|
||||||
title={t('logging.copy-to-clipboard')}
|
title={t('logging.copy-to-clipboard')}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
|
@ -252,7 +268,7 @@ function LogItem({ data }: LogItemProps) {
|
||||||
</a>
|
</a>
|
||||||
)}
|
)}
|
||||||
</LogActions>
|
</LogActions>
|
||||||
{details.length > 0 ? (
|
{details.length > 0 && showDetails ? (
|
||||||
<LogDetails level={levelStyle}>
|
<LogDetails level={levelStyle}>
|
||||||
{details.map(([key, value]) => (
|
{details.map(([key, value]) => (
|
||||||
<LogDetailItem>
|
<LogDetailItem>
|
||||||
|
@ -269,7 +285,7 @@ function LogItem({ data }: LogItemProps) {
|
||||||
const LogEntriesContainer = styled('div', {
|
const LogEntriesContainer = styled('div', {
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
flexDirection: 'column',
|
flexDirection: 'column',
|
||||||
gap: '5px',
|
gap: '3px',
|
||||||
});
|
});
|
||||||
|
|
||||||
interface LogDialogProps {
|
interface LogDialogProps {
|
||||||
|
|
Loading…
Reference in a new issue