Skip to content

Commit 89d9329

Browse files
harshit078harshit078
committed
Added a fix for failing lint errors
1 parent ebdb7bf commit 89d9329

File tree

4 files changed

+106
-50
lines changed

4 files changed

+106
-50
lines changed

‎web-server/src/components/Service/SystemLog/FormattedLog.tsx

Lines changed: 49 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { ParsedLog } from '@/types/resources';
66

77
// Styled component for highlighted text
88
const HighlightSpan = styled('span', {
9-
shouldForwardProp: prop => prop !== 'isCurrentMatch'
9+
shouldForwardProp: (prop) => prop !== 'isCurrentMatch'
1010
})<{ isCurrentMatch?: boolean }>(({ theme, isCurrentMatch }) => ({
1111
backgroundColor: isCurrentMatch ? theme.palette.warning.main : 'yellow',
1212
color: isCurrentMatch ? 'white' : 'black',
@@ -22,15 +22,17 @@ interface FormattedLogProps {
2222
isCurrentMatch?: boolean;
2323
}
2424

25-
export const HighlightedText = ({
26-
text,
27-
searchQuery,
28-
isCurrentMatch
29-
}: {
30-
text: string;
25+
type HighlightedTextProps = {
26+
text: string;
3127
searchQuery?: string;
3228
isCurrentMatch?: boolean;
33-
}) => {
29+
};
30+
31+
export const HighlightedText = ({
32+
text,
33+
searchQuery,
34+
isCurrentMatch,
35+
}: HighlightedTextProps) => {
3436
if (!searchQuery) return <>{text}</>;
3537

3638
const escapeRegExp = (string: string) =>
@@ -40,22 +42,30 @@ export const HighlightedText = ({
4042
const regex = new RegExp(`(${safeQuery})`, 'gi');
4143

4244
const parts = text.split(regex);
43-
return <>{parts.map((part, i) =>
44-
part.toLowerCase() === searchQuery.toLowerCase()
45-
? (
46-
<HighlightSpan
47-
key={i}
48-
isCurrentMatch={isCurrentMatch}
49-
data-highlighted="true"
50-
>
51-
{part}
52-
</HighlightSpan>
53-
)
54-
: part
55-
)}</>;
45+
return (
46+
<>
47+
{parts.map((part, i) =>
48+
part.toLowerCase() === searchQuery.toLowerCase() ? (
49+
<HighlightSpan
50+
key={i}
51+
isCurrentMatch={isCurrentMatch}
52+
data-highlighted="true"
53+
>
54+
{part}
55+
</HighlightSpan>
56+
) : (
57+
part
58+
)
59+
)}
60+
</>
61+
);
5662
};
5763

58-
export const FormattedLog = ({ log, searchQuery, isCurrentMatch }: FormattedLogProps) => {
64+
export const FormattedLog = ({
65+
log,
66+
searchQuery,
67+
isCurrentMatch
68+
}: FormattedLogProps) => {
5969
const theme = useTheme();
6070
const getLevelColor = useCallback(
6171
(level: string) => {
@@ -87,15 +97,29 @@ export const FormattedLog = ({ log, searchQuery, isCurrentMatch }: FormattedLogP
8797
return (
8898
<Line mono marginBottom={1}>
8999
<Line component="span" color="info">
90-
<HighlightedText text={timestamp} searchQuery={searchQuery} isCurrentMatch={isCurrentMatch} />
100+
<HighlightedText
101+
text={timestamp}
102+
searchQuery={searchQuery}
103+
isCurrentMatch={isCurrentMatch}
104+
/>
91105
</Line>{' '}
92106
{ip && (
93107
<Line component="span" color="primary">
94-
<HighlightedText text={ip} searchQuery={searchQuery} isCurrentMatch={isCurrentMatch} />{' '}
108+
<HighlightedText
109+
text={ip}
110+
searchQuery={searchQuery}
111+
isCurrentMatch={isCurrentMatch}
112+
/>{' '}
95113
</Line>
96114
)}
97115
<Line component="span" color={getLevelColor(logLevel)}>
98-
[<HighlightedText text={logLevel} searchQuery={searchQuery} isCurrentMatch={isCurrentMatch} />]
116+
[
117+
<HighlightedText
118+
text={logLevel}
119+
searchQuery={searchQuery}
120+
isCurrentMatch={isCurrentMatch}
121+
/>
122+
]
99123
</Line>{' '}
100124
<HighlightedText text={message} searchQuery={searchQuery} isCurrentMatch={isCurrentMatch} />
101125
</Line>

‎web-server/src/components/Service/SystemLog/LogSearch.tsx

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ import {
1212
Box
1313
} from '@mui/material';
1414
import { styled } from '@mui/material/styles';
15-
import { debounce } from '@/utils/debounce';
16-
import { memo, useState, useCallback, useMemo, useEffect } from 'react';
15+
import { memo, useState, useCallback, useMemo } from 'react';
1716

1817
import { MotionBox } from '@/components/MotionComponents';
18+
import { debounce } from '@/utils/debounce';
1919

2020
const SearchContainer = styled('div')(() => ({
2121
position: 'sticky',
@@ -72,10 +72,6 @@ const LogSearch = memo(({
7272
[onSearch]
7373
);
7474

75-
useEffect(() => {
76-
return undefined;
77-
}, [debouncedSearch]);
78-
7975
const handleSearchChange = useCallback(
8076
(event: React.ChangeEvent<HTMLInputElement>) => {
8177
const query = event.target.value;
@@ -119,7 +115,7 @@ const LogSearch = memo(({
119115
endAdornment: searchQuery && (
120116
<InputAdornment position="end">
121117
<ClearIcon
122-
sx={{ cursor: 'pointer'}}
118+
sx={{ cursor: 'pointer' }}
123119
onClick={handleClear}
124120
color="action"
125121
/>

‎web-server/src/components/Service/SystemLog/PlainLog.tsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,18 @@ interface PlainLogProps {
99
isCurrentMatch?: boolean;
1010
}
1111

12-
export const PlainLog = ({ log, searchQuery, isCurrentMatch }: PlainLogProps) => {
12+
export const PlainLog = ({
13+
log,
14+
searchQuery,
15+
isCurrentMatch
16+
}: PlainLogProps) => {
1317
return (
1418
<Line mono marginBottom={1}>
15-
<HighlightedText text={log} searchQuery={searchQuery} isCurrentMatch={isCurrentMatch} />
19+
<HighlightedText
20+
text={log}
21+
searchQuery={searchQuery}
22+
isCurrentMatch={isCurrentMatch}
23+
/>
1624
</Line>
1725
);
1826
};

‎web-server/src/content/Service/SystemLogs.tsx

Lines changed: 44 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
import { ExpandCircleDown } from '@mui/icons-material';
22
import { Button, CircularProgress } from '@mui/material';
3-
import { useEffect, useRef, useCallback, useReducer, memo, useState } from 'react';
3+
import {
4+
useEffect,
5+
useRef,
6+
useCallback,
7+
useReducer,
8+
memo,
9+
useState
10+
} from 'react';
411
import { ErrorBoundary } from 'react-error-boundary';
512

613
import { FlexBox } from '@/components/FlexBox';
@@ -34,14 +41,14 @@ const initialSearchState: SearchState = {
3441
query: '',
3542
elements: [],
3643
currentIndex: 0,
37-
isSearching: false,
44+
isSearching: false
3845
};
3946

4047
function searchReducer(state: SearchState, action: SearchAction): SearchState {
4148
switch (action.type) {
4249
case 'SET_QUERY':
43-
return {
44-
...state,
50+
return {
51+
...state,
4552
query: action.payload,
4653
isSearching: !!action.payload
4754
};
@@ -71,7 +78,9 @@ const SystemLogs = memo(({ serviceName }: { serviceName?: ServiceNames }) => {
7178
const showScrollDownButton = useBoolState(false);
7279
const [searchState, dispatch] = useReducer(searchReducer, initialSearchState);
7380
const isInitialLoad = useRef(true);
74-
const [currentMatchLineIndex, setCurrentMatchLineIndex] = useState<number | null>(null);
81+
const [currentMatchLineIndex, setCurrentMatchLineIndex] = useState<
82+
number | null
83+
>(null);
7584

7685
useEffect(() => {
7786
if (!searchState.query || searchState.query.length < 3) {
@@ -85,7 +94,9 @@ const SystemLogs = memo(({ serviceName }: { serviceName?: ServiceNames }) => {
8594
const timer = setTimeout(() => {
8695
requestAnimationFrame(() => {
8796
const elements = Array.from(
88-
containerRef.current?.querySelectorAll('span[data-highlighted="true"]') ?? []
97+
containerRef.current?.querySelectorAll(
98+
'span[data-highlighted="true"]'
99+
) ?? []
89100
) as HTMLElement[];
90101

91102
dispatch({ type: 'SET_MATCHES', payload: elements });
@@ -108,7 +119,8 @@ const SystemLogs = memo(({ serviceName }: { serviceName?: ServiceNames }) => {
108119
dispatch({ type: 'SET_QUERY', payload: query });
109120
}, []);
110121

111-
const handleNavigate = useCallback((direction: 'prev' | 'next') => {
122+
const handleNavigate = useCallback(
123+
(direction: 'prev' | 'next') => {
112124
const { elements, currentIndex, isSearching } = searchState;
113125
const total = elements.length;
114126

@@ -119,7 +131,9 @@ const SystemLogs = memo(({ serviceName }: { serviceName?: ServiceNames }) => {
119131
: (currentIndex > 1 ? currentIndex - 1 : total);
120132

121133
dispatch({ type: 'SET_CURRENT_INDEX', payload: newIndex });
122-
}, [searchState]);
134+
},
135+
[searchState]
136+
);
123137

124138
useEffect(() => {
125139
const { currentIndex, elements } = searchState;
@@ -137,7 +151,10 @@ const SystemLogs = memo(({ serviceName }: { serviceName?: ServiceNames }) => {
137151
}
138152

139153
if (parentElement) {
140-
const lineIndex = parseInt(parentElement.getAttribute('data-log-index') || '-1', 10);
154+
const lineIndex = parseInt(
155+
parentElement.getAttribute('data-log-index') || '-1',
156+
10
157+
);
141158
setCurrentMatchLineIndex(lineIndex);
142159

143160
requestAnimationFrame(() => {
@@ -150,7 +167,12 @@ const SystemLogs = memo(({ serviceName }: { serviceName?: ServiceNames }) => {
150167
}, [searchState.currentIndex, searchState.elements]);
151168

152169
useEffect(() => {
153-
if (!loading && logs.length && containerRef.current && isInitialLoad.current) {
170+
if (
171+
!loading &&
172+
logs.length &&
173+
containerRef.current &&
174+
isInitialLoad.current
175+
) {
154176
isInitialLoad.current = false;
155177
requestAnimationFrame(() => {
156178
if (containerRef.current) {
@@ -168,7 +190,9 @@ const SystemLogs = memo(({ serviceName }: { serviceName?: ServiceNames }) => {
168190
if (!container) return;
169191

170192
const handleScroll = () => {
171-
const isScrolledUp = container.scrollTop < container.scrollHeight - container.clientHeight - 100;
193+
const isScrolledUp =
194+
container.scrollTop <
195+
container.scrollHeight - container.clientHeight - 100;
172196
showScrollDownButton.set(isScrolledUp);
173197
};
174198

@@ -206,7 +230,10 @@ const SystemLogs = memo(({ serviceName }: { serviceName?: ServiceNames }) => {
206230
return (
207231
<ErrorBoundary
208232
FallbackComponent={({ error }: { error: Error }) => (
209-
<SystemLogsErrorFallback error={error} serviceName={serviceName as ServiceNames} />
233+
<SystemLogsErrorFallback
234+
error={error}
235+
serviceName={serviceName as ServiceNames}
236+
/>
210237
)}
211238
>
212239
<FlexBox col>
@@ -223,8 +250,8 @@ const SystemLogs = memo(({ serviceName }: { serviceName?: ServiceNames }) => {
223250
</FlexBox>
224251
) : (
225252
<FlexBox
226-
ref={containerRef}
227-
col
253+
ref={containerRef}
254+
col
228255
sx={{ overflowY: 'auto', maxHeight: '100%' }}
229256
>
230257
{services && renderLogs()}
@@ -243,10 +270,11 @@ const SystemLogs = memo(({ serviceName }: { serviceName?: ServiceNames }) => {
243270
bottom={20}
244271
sx={{
245272
position: 'fixed',
246-
marginLeft: `calc(${containerRef.current
273+
marginLeft: `calc(${
274+
containerRef.current
247275
? containerRef.current.clientWidth / 2 - 67
248276
: 0
249-
}px)`
277+
}px)`
250278
}}
251279
>
252280
<ExpandCircleDown fontSize="large" color="secondary" />

0 commit comments

Comments
 (0)