GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-14 09:56:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(FE/RawLogView): prop destructure at param level

Browse Source
This commit is contained in:
CKanishka 2023-08-23 11:43:16 +05:30
parent a393ea4d68
commit d41805a3b0
3 changed files with 22 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/components/Logs/RawLogView/index.tsx
View File

@ -42,15 +42,13 @@ interface RawLogViewProps {
linesPerRow: number; linesPerRow: number;
} }
function RawLogView(props: RawLogViewProps): JSX.Element { function RawLogView({
const { isActiveLog,
isActiveLog = false, isReadOnly,
isReadOnly = false, data,
data, linesPerRow,
linesPerRow, isTextOverflowEllipsisDisabled,
isTextOverflowEllipsisDisabled = false, }: RawLogViewProps): JSX.Element {
} = props;
const { isHighlighted, isLogsExplorerPage, onLogCopy } = useCopyLogLink( const { isHighlighted, isLogsExplorerPage, onLogCopy } = useCopyLogLink(
data.id, data.id,
); );

26
frontend/src/components/Logs/RawLogView/styles.ts
View File

@ -5,8 +5,8 @@ import { getActiveLogBackground, getDefaultLogBackground } from 'utils/logs';
export const RawLogViewContainer = styled(Row)<{ export const RawLogViewContainer = styled(Row)<{
$isDarkMode: boolean; $isDarkMode: boolean;
$isReadOnly: boolean; $isReadOnly?: boolean;
$isActiveLog: boolean; $isActiveLog?: boolean;
}>` }>`
position: relative; position: relative;
width: 100%; width: 100%;
@ -33,9 +33,9 @@ export const ExpandIconWrapper = styled(Col)`
interface RawLogContentProps { interface RawLogContentProps {
linesPerRow: number; linesPerRow: number;
$isReadOnly: boolean; $isReadOnly?: boolean;
$isActiveLog: boolean; $isActiveLog?: boolean;
$isTextOverflowEllipsisDisabled: boolean; $isTextOverflowEllipsisDisabled?: boolean;
} }
export const RawLogContent = styled.div<RawLogContentProps>` export const RawLogContent = styled.div<RawLogContentProps>`
@ -43,24 +43,24 @@ export const RawLogContent = styled.div<RawLogContentProps>`
font-family: Fira Code, monospace; font-family: Fira Code, monospace;
font-weight: 300; font-weight: 300;
${(props): string => ${({ $isTextOverflowEllipsisDisabled, linesPerRow }): string =>
props.$isTextOverflowEllipsisDisabled $isTextOverflowEllipsisDisabled
? 'white-space: nowrap' ? 'white-space: nowrap'
: `overflow: hidden; : `overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: ${props.linesPerRow}; -webkit-line-clamp: ${linesPerRow};
line-clamp: ${props.linesPerRow}; line-clamp: ${linesPerRow};
-webkit-box-orient: vertical;`}; -webkit-box-orient: vertical;`};
font-size: 1rem; font-size: 1rem;
line-height: 2rem; line-height: 2rem;
cursor: ${(props): string => cursor: ${({ $isActiveLog, $isReadOnly }): string =>
props.$isActiveLog || props.$isReadOnly ? 'initial' : 'pointer'}; $isActiveLog || $isReadOnly ? 'initial' : 'pointer'};
${(props): string => ${({ $isActiveLog, $isReadOnly }): string =>
props.$isReadOnly && !props.$isActiveLog ? 'padding: 0 1.5rem;' : ''} $isReadOnly && $isActiveLog ? 'padding: 0 1.5rem;' : ''}
`; `;
export const ActionButtonsWrapper = styled(Space)` export const ActionButtonsWrapper = styled(Space)`

4
frontend/src/utils/logs.ts
View File

@ -3,8 +3,8 @@ import { themeColors } from 'constants/theme';
import getAlphaColor from 'utils/getAlphaColor'; import getAlphaColor from 'utils/getAlphaColor';
export const getDefaultLogBackground = ( export const getDefaultLogBackground = (
isReadOnly: boolean, isReadOnly?: boolean,
isDarkMode: boolean, isDarkMode?: boolean,
): string => { ): string => {
if (isReadOnly) return ''; if (isReadOnly) return '';
return `&:hover { return `&:hover {