feat: Implemented log search functionality with highlighted results

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

@@ -1,10 +1,71 @@
-import { useTheme } from '@mui/material';
+import { useTheme, styled } from '@mui/material';
 import { useCallback } from 'react';
 
 import { Line } from '@/components/Text';
 import { ParsedLog } from '@/types/resources';
 
-export const FormattedLog = ({ log }: { log: ParsedLog; index: number }) => {
+// Styled component for highlighted text
+const HighlightSpan = styled('span', {
+  shouldForwardProp: (prop) => prop !== 'isCurrentMatch'
+})<{ isCurrentMatch?: boolean }>(({ theme, isCurrentMatch }) => ({
+  backgroundColor: isCurrentMatch ? theme.palette.warning.main : 'yellow',
+  color: isCurrentMatch ? 'white' : 'black',
+  transition: theme.transitions.create(['background-color', 'color'], {
+    duration: theme.transitions.duration.shortest
+  })
+}));
+
+interface FormattedLogProps {
+  log: ParsedLog;
+  index: number;
+  searchQuery?: string;
+  isCurrentMatch?: boolean;
+}
+
+type SearchHighlightTextProps = {
+  text: string;
+  searchQuery?: string;
+  isCurrentMatch?: boolean;
+};
+
+export const SearchHighlightText = ({
+  text,
+  searchQuery,
+  isCurrentMatch
+}: SearchHighlightTextProps) => {
+  if (!searchQuery) return <>{text}</>;
+
+  const escapeRegExp = (string: string) =>
+    string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+  const safeQuery = escapeRegExp(searchQuery);
+  const regex = new RegExp(`(${safeQuery})`, 'gi');
+
+  const parts = text.split(regex);
+  return (
+    <>
+      {parts.map((part, i) =>
+        part.toLowerCase() === searchQuery.toLowerCase() ? (
+          <HighlightSpan
+            key={i}
+            isCurrentMatch={isCurrentMatch}
+            data-highlighted="true"
+          >
+            {part}
+          </HighlightSpan>
+        ) : (
+          part
+        )
+      )}
+    </>
+  );
+};
+
+export const FormattedLog = ({
+  log,
+  searchQuery,
+  isCurrentMatch
+}: FormattedLogProps) => {
   const theme = useTheme();
   const getLevelColor = useCallback(
     (level: string) => {
@@ -36,17 +97,35 @@ export const FormattedLog = ({ log }: { log: ParsedLog; index: number }) => {
   return (
     <Line mono marginBottom={1}>
       <Line component="span" color="info">
-        {timestamp}
+        <SearchHighlightText
+          text={timestamp}
+          searchQuery={searchQuery}
+          isCurrentMatch={isCurrentMatch}
+        />
       </Line>{' '}
       {ip && (
         <Line component="span" color="primary">
-          {ip}{' '}
+          <SearchHighlightText
+            text={ip}
+            searchQuery={searchQuery}
+            isCurrentMatch={isCurrentMatch}
+          />{' '}
         </Line>
       )}
       <Line component="span" color={getLevelColor(logLevel)}>
-        [{logLevel}]
+        [
+        <SearchHighlightText
+          text={logLevel}
+          searchQuery={searchQuery}
+          isCurrentMatch={isCurrentMatch}
+        />
+        ]
       </Line>{' '}
-      {message}
+      <SearchHighlightText
+        text={message}
+        searchQuery={searchQuery}
+        isCurrentMatch={isCurrentMatch}
+      />
     </Line>
   );
 };

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

@@ -0,0 +1,167 @@
+import {
+  Search as SearchIcon,
+  Clear as ClearIcon,
+  NavigateNext,
+  NavigateBefore
+} from '@mui/icons-material';
+import {
+  Button,
+  InputAdornment,
+  TextField,
+  Typography,
+  Box
+} from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { memo, useState, useCallback, useMemo } from 'react';
+
+import { MotionBox } from '@/components/MotionComponents';
+import { debounce } from '@/utils/debounce';
+
+const SearchContainer = styled('div')(() => ({
+  position: 'sticky',
+  top: 0,
+  zIndex: 1,
+  gap: 5,
+  paddingBottom: 8,
+  alignItems: 'center',
+  backdropFilter: 'blur(10px)',
+  borderRadius: 5
+}));
+
+const SearchControls = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: theme.spacing(1),
+  marginTop: 8
+}));
+
+const StyledTextField = styled(TextField)(({ theme }) => ({
+  '& .MuiOutlinedInput-root': {
+    backgroundColor: theme.palette.background.paper,
+    transition: 'all 0.2s ease-in-out',
+    '&:hover': {
+      backgroundColor: theme.palette.background.paper,
+      boxShadow: `0 0 0 1px ${theme.palette.primary.main}`
+    },
+    '&.Mui-focused': {
+      backgroundColor: theme.palette.background.paper,
+      boxShadow: `0 0 0 2px ${theme.palette.primary.main}`
+    }
+  }
+}));
+
+interface LogSearchProps {
+  onSearch: (query: string) => void;
+  onNavigate: (direction: 'prev' | 'next') => void;
+  currentMatch: number;
+  totalMatches: number;
+}
+
+const LogSearch = memo(
+  ({ onSearch, onNavigate, currentMatch, totalMatches }: LogSearchProps) => {
+    const [searchQuery, setSearchQuery] = useState('');
+
+    const debouncedSearch = useMemo(
+      () =>
+        debounce((query: string) => {
+          onSearch(query);
+        }, 300),
+      [onSearch]
+    );
+
+    const handleSearchChange = useCallback(
+      (event: React.ChangeEvent<HTMLInputElement>) => {
+        const query = event.target.value;
+        setSearchQuery(query);
+        debouncedSearch(query);
+      },
+      [debouncedSearch]
+    );
+
+    const handleClear = useCallback(() => {
+      setSearchQuery('');
+      onSearch('');
+    }, [onSearch]);
+
+    const handleNavigate = useCallback(
+      (direction: 'prev' | 'next') => {
+        if (direction === 'next') {
+          onNavigate('next');
+        } else {
+          onNavigate('prev');
+        }
+      },
+      [onNavigate]
+    );
+
+    const showSearchControls = searchQuery && totalMatches > 0;
+
+    return (
+      <SearchContainer>
+        <StyledTextField
+          fullWidth
+          variant="outlined"
+          placeholder="Search logs..."
+          value={searchQuery}
+          onChange={handleSearchChange}
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <SearchIcon color="action" />
+              </InputAdornment>
+            ),
+            endAdornment: !!searchQuery.length && (
+              <InputAdornment position="end">
+                <ClearIcon
+                  sx={{ cursor: 'pointer' }}
+                  onClick={handleClear}
+                  color="action"
+                />
+              </InputAdornment>
+            )
+          }}
+        />
+        {showSearchControls && (
+          <MotionBox
+            initial={{ y: 20, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            exit={{ y: 20, opacity: 0 }}
+            transition={{
+              type: 'tween',
+              ease: 'easeOut',
+              duration: 0.3
+            }}
+          >
+            <SearchControls>
+              <Button
+                size="small"
+                onClick={() => handleNavigate('prev')}
+                startIcon={<NavigateBefore />}
+                sx={{
+                  minWidth: '20px',
+                  padding: '4px 8px'
+                }}
+              />
+              <Typography variant="body2" color="text.secondary">
+                {currentMatch} of {totalMatches}
+              </Typography>
+              <Button
+                size="small"
+                onClick={() => handleNavigate('next')}
+                startIcon={<NavigateNext />}
+                sx={{
+                  minWidth: '20px',
+                  padding: '4px 8px'
+                }}
+              />
+            </SearchControls>
+          </MotionBox>
+        )}
+      </SearchContainer>
+    );
+  }
+);
+
+LogSearch.displayName = 'LogSearch';
+
+export { LogSearch };

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

@@ -1,9 +1,26 @@
 import { Line } from '@/components/Text';
 
-export const PlainLog = ({ log }: { log: string; index: number }) => {
+import { SearchHighlightText } from './FormattedLog';
+
+interface PlainLogProps {
+  log: string;
+  index: number;
+  searchQuery?: string;
+  isCurrentMatch?: boolean;
+}
+
+export const PlainLog = ({
+  log,
+  searchQuery,
+  isCurrentMatch
+}: PlainLogProps) => {
   return (
     <Line mono marginBottom={1}>
-      {log}
+      <SearchHighlightText
+        text={log}
+        searchQuery={searchQuery}
+        isCurrentMatch={isCurrentMatch}
+      />
     </Line>
   );
 };