GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-14 04:05:56 +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;
}
function RawLogView(props: RawLogViewProps): JSX.Element {
const {
isActiveLog = false,
isReadOnly = false,
data,
linesPerRow,
isTextOverflowEllipsisDisabled = false,
} = props;
function RawLogView({
isActiveLog,
isReadOnly,
data,
linesPerRow,
isTextOverflowEllipsisDisabled,
}: RawLogViewProps): JSX.Element {
const { isHighlighted, isLogsExplorerPage, onLogCopy } = useCopyLogLink(
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)<{
$isDarkMode: boolean;
$isReadOnly: boolean;
$isActiveLog: boolean;
$isReadOnly?: boolean;
$isActiveLog?: boolean;
}>`
position: relative;
width: 100%;
@ -33,9 +33,9 @@ export const ExpandIconWrapper = styled(Col)`
interface RawLogContentProps {
linesPerRow: number;
$isReadOnly: boolean;
$isActiveLog: boolean;
$isTextOverflowEllipsisDisabled: boolean;
$isReadOnly?: boolean;
$isActiveLog?: boolean;
$isTextOverflowEllipsisDisabled?: boolean;
}
export const RawLogContent = styled.div<RawLogContentProps>`
@ -43,24 +43,24 @@ export const RawLogContent = styled.div<RawLogContentProps>`
font-family: Fira Code, monospace;
font-weight: 300;
${(props): string =>
props.$isTextOverflowEllipsisDisabled
${({ $isTextOverflowEllipsisDisabled, linesPerRow }): string =>
$isTextOverflowEllipsisDisabled
? 'white-space: nowrap'
: `overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: ${props.linesPerRow};
line-clamp: ${props.linesPerRow};
-webkit-line-clamp: ${linesPerRow};
line-clamp: ${linesPerRow};
-webkit-box-orient: vertical;`};
font-size: 1rem;
line-height: 2rem;
cursor: ${(props): string =>
props.$isActiveLog || props.$isReadOnly ? 'initial' : 'pointer'};
cursor: ${({ $isActiveLog, $isReadOnly }): string =>
$isActiveLog || $isReadOnly ? 'initial' : 'pointer'};
${(props): string =>
props.$isReadOnly && !props.$isActiveLog ? 'padding: 0 1.5rem;' : ''}
${({ $isActiveLog, $isReadOnly }): string =>
$isReadOnly && $isActiveLog ? 'padding: 0 1.5rem;' : ''}
`;
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';
export const getDefaultLogBackground = (
isReadOnly: boolean,
isDarkMode: boolean,
isReadOnly?: boolean,
isDarkMode?: boolean,
): string => {
if (isReadOnly) return '';
return `&:hover {