Refactor user management and logs viewing tests for improved stability and clarity

- Scoped button selectors to dialogs in user management tests to avoid strict mode violations.
- Added wait conditions for loading states and element visibility in user management and logs viewing tests.
- Updated navigation methods to use 'domcontentloaded' for better reliability.
- Enhanced mock data generation for log entries and improved filtering logic in logs viewing tests.
- Consolidated selector usage with data-testid attributes for consistency and maintainability.
- Removed skipped tests and ensured all scenarios are covered for logs viewing, including pagination and filtering.

frontend/src/components/LogFilters.tsx

@@ -45,6 +45,7 @@ export const LogFilters: React.FC<LogFiltersProps> = ({
           value={search}
           onChange={(e) => onSearchChange(e.target.value)}
           className="block w-full pl-10 rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm dark:bg-gray-700 dark:text-white"
+          data-testid="search-input"
         />
       </div>
 
@@ -55,6 +56,7 @@ export const LogFilters: React.FC<LogFiltersProps> = ({
           value={host}
           onChange={(e) => onHostChange(e.target.value)}
           className="block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm dark:bg-gray-700 dark:text-white"
+          data-testid="host-input"
         />
       </div>
 
@@ -63,6 +65,7 @@ export const LogFilters: React.FC<LogFiltersProps> = ({
           value={level}
           onChange={(e) => onLevelChange(e.target.value)}
           className="block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm dark:bg-gray-700 dark:text-white"
+          data-testid="level-select"
         >
           <option value="">All Levels</option>
           <option value="DEBUG">Debug</option>
@@ -77,6 +80,7 @@ export const LogFilters: React.FC<LogFiltersProps> = ({
           value={status}
           onChange={(e) => onStatusChange(e.target.value)}
           className="block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm dark:bg-gray-700 dark:text-white"
+          data-testid="status-select"
         >
           <option value="">All Status</option>
           <option value="2xx">2xx Success</option>
@@ -91,6 +95,7 @@ export const LogFilters: React.FC<LogFiltersProps> = ({
           value={sort}
           onChange={(e) => onSortChange(e.target.value as 'asc' | 'desc')}
           className="block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm dark:bg-gray-700 dark:text-white"
+          data-testid="sort-select"
         >
           <option value="desc">Newest First</option>
           <option value="asc">Oldest First</option>
@@ -98,11 +103,11 @@ export const LogFilters: React.FC<LogFiltersProps> = ({
       </div>
 
       <div className="flex gap-2">
-        <Button onClick={onRefresh} variant="secondary" size="sm" isLoading={isLoading}>
+        <Button onClick={onRefresh} variant="secondary" size="sm" isLoading={isLoading} data-testid="refresh-button">
           <RefreshCw className="w-4 h-4 mr-2" />
           Refresh
         </Button>
-        <Button onClick={onDownload} variant="secondary" size="sm">
+        <Button onClick={onDownload} variant="secondary" size="sm" data-testid="download-button">
           <Download className="w-4 h-4 mr-2" />
           Download
         </Button>

frontend/src/components/LogTable.tsx

@@ -64,11 +64,14 @@ export const LogTable: React.FC<LogTableProps> = ({ logs, isLoading }) => {
               </td>
               <td className="px-6 py-4 whitespace-nowrap text-sm">
                 {log.status > 0 && (
-                  <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full
+                  <span
+                    className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full
                     ${log.status >= 500 ? 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200' :
                       log.status >= 400 ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200' :
                       log.status >= 300 ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200' :
-                      'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'}`}>
+                      'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'}`}
+                    data-testid={`status-${log.status}`}
+                  >
                     {log.status}
                   </span>
                 )}