feat: Implemented log search functionality with highlighted results

Author: harshit078

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

@@ -4,7 +4,32 @@ import { useCallback } from 'react';
 import { Line } from '@/components/Text';
 import { ParsedLog } from '@/types/resources';
 
-export const FormattedLog = ({ log }: { log: ParsedLog; index: number }) => {
+interface FormattedLogProps {
+  log: ParsedLog;
+  index: number;
+  searchQuery?: string;
+}
+
+const HighlightedText = ({ text, searchQuery }: { text: string; searchQuery?: string }) => {
+  if (!searchQuery) return <>{text}</>;
+
+  const parts = text.split(new RegExp(`(${searchQuery})`, 'gi'));
+  return (
+    <>
+      {parts.map((part, i) =>
+        part.toLowerCase() === searchQuery.toLowerCase() ? (
+          <span key={i} style={{ backgroundColor: 'yellow', color: 'black' }}>
+            {part}
+          </span>
+        ) : (
+          part
+        )
+      )}
+    </>
+  );
+};
+
+export const FormattedLog = ({ log, searchQuery }: FormattedLogProps) => {
   const theme = useTheme();
   const getLevelColor = useCallback(
     (level: string) => {
@@ -36,17 +61,17 @@ export const FormattedLog = ({ log }: { log: ParsedLog; index: number }) => {
   return (
     <Line mono marginBottom={1}>
       <Line component="span" color="info">
-        {timestamp}
+        <HighlightedText text={timestamp} searchQuery={searchQuery} />
       </Line>{' '}
       {ip && (
         <Line component="span" color="primary">
-          {ip}{' '}
+          <HighlightedText text={ip} searchQuery={searchQuery} />{' '}
         </Line>
       )}
       <Line component="span" color={getLevelColor(logLevel)}>
-        [{logLevel}]
+        [<HighlightedText text={logLevel} searchQuery={searchQuery} />]
       </Line>{' '}
-      {message}
+      <HighlightedText text={message} searchQuery={searchQuery} />
     </Line>
   );
 };

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

@@ -0,0 +1,141 @@
+import { Button, InputAdornment, TextField, Typography, Box } from '@mui/material';
+import { Search as SearchIcon, Clear as ClearIcon, NavigateNext, NavigateBefore } from '@mui/icons-material';
+import { useState, useCallback } from 'react';
+import { styled } from '@mui/material/styles';
+import { MotionBox } from '@/components/MotionComponents';
+
+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;
+}
+
+export const LogSearch = ({ onSearch, onNavigate, currentMatch, totalMatches }: LogSearchProps) => {
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const handleSearchChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const query = event.target.value;
+      setSearchQuery(query);
+      onSearch(query);
+    },
+    [onSearch]
+  );
+
+  const handleClear = useCallback(() => {
+    setSearchQuery('');
+    onSearch('');
+  }, [onSearch]);
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent) => {
+      if (event.key === 'Enter' && event.shiftKey) {
+        onNavigate('prev');
+      } else if (event.key === 'Enter') {
+        onNavigate('next');
+      }
+    },
+    [onNavigate]
+  );
+
+  return (
+    <SearchContainer>
+      <StyledTextField
+        fullWidth
+        variant="outlined"
+        placeholder="Search logs..."
+        value={searchQuery}
+        onChange={handleSearchChange}
+        onKeyDown={handleKeyDown}
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position="start">
+              <SearchIcon color="action" />
+            </InputAdornment>
+          ),
+          endAdornment: searchQuery && (
+            <InputAdornment position="end">
+              <ClearIcon
+                style={{ cursor: 'pointer' }}
+                onClick={handleClear}
+                color="action"
+              />
+            </InputAdornment>
+          ),
+        }}
+      />
+      {searchQuery && totalMatches > 0 && (
+        <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={() => onNavigate('prev')}
+              disabled={currentMatch === 1}
+              startIcon={<NavigateBefore />}
+              sx={{
+                minWidth: '20px',
+                padding: '4px 8px',
+              }}
+            />
+            <Typography variant="body2" color="text.secondary">
+              {currentMatch} of {totalMatches}
+            </Typography>
+            <Button
+              size="small"
+              onClick={() => onNavigate('next')}
+              disabled={currentMatch === totalMatches}
+              startIcon={<NavigateNext />}
+              sx={{
+                minWidth: '20px',
+                padding: '4px 8px',
+              }}
+            />
+          </SearchControls>
+        </MotionBox>
+      )}
+    </SearchContainer>
+  );
+}; 

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

@@ -1,9 +1,34 @@
 import { Line } from '@/components/Text';
 
-export const PlainLog = ({ log }: { log: string; index: number }) => {
+interface PlainLogProps {
+  log: string;
+  index: number;
+  searchQuery?: string;
+}
+
+const HighlightedText = ({ text, searchQuery }: { text: string; searchQuery?: string }) => {
+  if (!searchQuery) return <>{text}</>;
+
+  const parts = text.split(new RegExp(`(${searchQuery})`, 'gi'));
+  return (
+    <>
+      {parts.map((part, i) =>
+        part.toLowerCase() === searchQuery.toLowerCase() ? (
+          <span key={i} style={{ backgroundColor: 'yellow', color: 'black' }}>
+            {part}
+          </span>
+        ) : (
+          part
+        )
+      )}
+    </>
+  );
+};
+
+export const PlainLog = ({ log, searchQuery }: PlainLogProps) => {
   return (
     <Line mono marginBottom={1}>
-      {log}
+      <HighlightedText text={log} searchQuery={searchQuery} />
     </Line>
   );
 };