feat: search alerts

Author: chriscareycode

src/atoms/alertAtom.ts

@@ -17,4 +17,6 @@ export const alertAtom = atom(initialState);
 export const alertHowManyAtom = atom({
 	howManyAlerts: 0,
 	howManyAlertSoft: 0,
-});
+});
+
+export const alertSearchTextAtom = atom('');

src/components/alerts/AlertItems.tsx

@@ -16,14 +16,16 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { Component } from 'react';
+import { useState } from 'react';
 import { translate } from '../../helpers/language';
 
 import AlertItem from './AlertItem';
 import QuietFor from './QuietFor';
 
 import { Alert } from 'types/hostAndServiceTypes';
 import { ClientSettings } from 'types/settings';
+import { useAtomValue } from 'jotai';
+import { alertSearchTextAtom } from '../../atoms/alertAtom';
 // CSS
 import '../animation.css';
 import '../services/ServiceItems.css';
@@ -35,92 +37,90 @@ interface AlertItemsProps {
 	isDemoMode: boolean;
 }
 
-class AlertItems extends Component<AlertItemsProps> {
+const AlertItems = ({ items, settings, isDemoMode }: AlertItemsProps) => {
 
-	constructor(props: AlertItemsProps) {
-		super(props);
+	const alertSearchText = useAtomValue(alertSearchTextAtom);
 
-		this.showMore = this.showMore.bind(this);
-		this.showLess = this.showLess.bind(this);
-	}
+	const [howManyToRender, setHowManyToRender] = useState(100);
+	const pageSize = 100;
 
-	state = {
-		howManyToRender: 100, // This value is updated when user clicks showMore or showLess.
-		pageSize: 100 // This stays const
+	const showMore = () => {
+		setHowManyToRender(prev => prev + pageSize);
 	};
 
-	showMore() {
-		this.setState({
-			howManyToRender: this.state.howManyToRender + this.state.pageSize
-		});
-	}
-
-	showLess() {
-		this.setState({
-			howManyToRender: this.state.howManyToRender - this.state.pageSize
-		});
-	}
-
-	render() {
+	const showLess = () => {
+		setHowManyToRender(prev => prev - pageSize);
+	};
 
-		const filteredHistoryArray = this.props.items.filter(item => {
-			if (this.props.settings.hideAlertSoft) {
-				if (item.state_type === 2) { return false; }
+	const filteredHistoryArray = items.filter(item => {
+		if (settings.hideAlertSoft) {
+			if (item.state_type === 2) { return false; }
+		}
+		// search filter
+		if (alertSearchText) {
+			const searchLower = alertSearchText.toLowerCase();
+			const matchesSearch =
+				(item.name && item.name.toLowerCase().includes(searchLower)) ||
+				(item.host_name && item.host_name.toLowerCase().includes(searchLower)) ||
+				(item.description && item.description.toLowerCase().includes(searchLower)) ||
+				(item.plugin_output && item.plugin_output.toLowerCase().includes(searchLower));
+			if (!matchesSearch) {
+				return false;
 			}
-			return true;
-		});
+		}
+		return true;
+	});
 
-		let trimmedItems = [...filteredHistoryArray];
-		trimmedItems.length = this.state.howManyToRender;
-		const { language, locale, dateFormat } = this.props.settings;
+	let trimmedItems = [...filteredHistoryArray];
+	trimmedItems.length = howManyToRender;
+	const { language, locale, dateFormat } = settings;
 
-		return (
+	return (
 			<div className="AlertItems">
 				{/* always show one quiet for (if we have at least 1 item) */}
-				{this.props.items.length > 1 &&
+				{items.length > 1 &&
 					<QuietFor
 						nowtime={new Date().getTime()}
-						prevtime={this.props.items[0].timestamp}
-						//showEmoji={this.props.settings.showEmoji}
+						prevtime={items[0].timestamp}
+						//showEmoji={settings.showEmoji}
 						language={language}
 					/>
 				}
 
 				{/* loop through the trimmed items */}
 				{trimmedItems.map((e, i) => {
 					const host = (e.object_type === 1 ? e.name : e.host_name);
-					const prevtime = (i > 0 ? this.props.items[i - 1].timestamp : 0);
+					const prevtime = (i > 0 ? items[i - 1].timestamp : 0);
 					return (
 						<AlertItem
 							key={'alert-' + host + '-' + e.object_type + '-' + e.timestamp + '-' + i}
 							e={e}
 							i={i}
 							prevtime={prevtime}
-							//showEmoji={this.props.showEmoji}
+							//showEmoji={showEmoji}
 							language={language}
 							locale={locale}
 							dateFormat={dateFormat}
-							settings={this.props.settings}
-							isDemoMode={this.props.isDemoMode}
+							settings={settings}
+							isDemoMode={isDemoMode}
 						/>
 					);
 				})}
 
 				<div className="ShowMoreArea">
-					{this.state.howManyToRender > this.state.pageSize &&
+					{howManyToRender > pageSize &&
 						<span>
-							<button className="uppercase-first" onClick={this.showLess}>{translate('show less', language)}</button>
+							<button className="uppercase-first" onClick={showLess}>{translate('show less', language)}</button>
 						</span>
 					}
-					{this.props.items.length > this.state.howManyToRender &&
+					{items.length > howManyToRender &&
 						<span>
-							<button className="uppercase-first" onClick={this.showMore}>{translate('show more', language)}</button>
+							<button className="uppercase-first" onClick={showMore}>{translate('show more', language)}</button>
 						</span>
 					}
 				</div>
 			</div>
-		);
-	}
-}
+	);
+};
 
 export default AlertItems;

src/components/alerts/AlertSection.css

@@ -19,4 +19,33 @@
 	text-align: center;
 	font-size: 1em;
 	color: #555;
+}
+
+/* alert search */
+
+.AlertSection .alert-search-input {
+	padding: 1px 6px;
+	font-size: 0.9em;
+	border: 1px solid #444;
+	border-radius: 4px;
+	width: 200px;
+	position: relative;
+	top: -1px;
+	margin-left: 5px;
+}
+.AlertSection .alert-search-input:focus {
+	outline: none;
+	border-color: #888;
+}
+.AlertSection .alert-search-clear {
+	margin-left: 4px;
+	background: none;
+	border: none;
+	cursor: pointer;
+	font-size: 0.9em;
+	color: #888;
+	padding: 2px 4px;
+}
+.AlertSection .alert-search-clear:hover {
+	color: #333;
 }

src/components/alerts/AlertSection.tsx

@@ -16,13 +16,13 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { AnimatePresence } from "motion/react";
 import * as motion from "motion/react-client";
 // State Management
 import { useAtom, useAtomValue } from 'jotai';
 import { bigStateAtom, clientSettingsAtom, clientSettingsInitial } from '../../atoms/settingsState';
-import { alertIsFetchingAtom, alertAtom, alertHowManyAtom } from '../../atoms/alertAtom';
+import { alertIsFetchingAtom, alertAtom, alertHowManyAtom, alertSearchTextAtom } from '../../atoms/alertAtom';
 
 import { translate } from '../../helpers/language';
 
@@ -44,6 +44,34 @@ const AlertSection = () => {
 
 	//console.log('AlertSection run');
 
+	const [alertSearchText, setAlertSearchText] = useAtom(alertSearchTextAtom);
+	const [localSearchText, setLocalSearchText] = useState(alertSearchText);
+
+	// Debounce updating the shared atom so filtering doesn't run on every keystroke
+	const debouncedSetSearchText = useMemo(
+		() => _.debounce((value: string) => setAlertSearchText(value), 300),
+		[setAlertSearchText],
+	);
+
+	// Cleanup debounce on unmount
+	useEffect(() => {
+		return () => {
+			debouncedSetSearchText.cancel();
+		};
+	}, [debouncedSetSearchText]);
+
+	const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		const value = e.target.value;
+		setLocalSearchText(value);
+		debouncedSetSearchText(value);
+	};
+
+	const handleSearchClear = () => {
+		setLocalSearchText('');
+		debouncedSetSearchText.cancel();
+		setAlertSearchText('');
+	};
+
 	// State Management state (this section)
 	const [alertIsFetching, setAlertIsFetching] = useAtom(alertIsFetchingAtom);
 	const [alertState, setAlertState] = useAtom(alertAtom);
@@ -234,6 +262,18 @@ const AlertSection = () => {
 				return false;
 			}
 		}
+		// search filter
+		if (alertSearchText) {
+			const searchLower = alertSearchText.toLowerCase();
+			const matchesSearch =
+				(alert.name && alert.name.toLowerCase().includes(searchLower)) ||
+				(alert.host_name && alert.host_name.toLowerCase().includes(searchLower)) ||
+				(alert.description && alert.description.toLowerCase().includes(searchLower)) ||
+				(alert.plugin_output && alert.plugin_output.toLowerCase().includes(searchLower));
+			if (!matchesSearch) {
+				return false;
+			}
+		}
 		return true;
 	});
 
@@ -258,6 +298,26 @@ const AlertSection = () => {
 					howManyAlertSoft={alertHowManyState.howManyAlertSoft}
 				/>
 
+				{/* alert search */}
+				<div style={{ display: 'inline-block', marginLeft: '10px' }}>
+					<input
+						type="text"
+						className="alert-search-input"
+						placeholder="Search alerts..."
+						value={localSearchText}
+						onChange={handleSearchChange}
+					/>
+					{localSearchText && (
+						<button
+							className="alert-search-clear"
+							onClick={handleSearchClear}
+							title="Clear search"
+						>
+							✕
+						</button>
+					)}
+				</div>
+
 				{/* loading spinner */}
 				<PollingSpinner
 					isFetching={alertIsFetching}