Merge pull request #117 from chriscareycode/cc/2026-01-01-minimapmozilla

MiniMapMozilla

Author: chriscareycode

README.md

@@ -46,11 +46,11 @@ Installing NagiosTV
 -------------
 - Download the latest NagiosTV tar.gz release from https://github.com/chriscareycode/nagiostv-react/releases or you can just copy and paste the command below to get it:
 ```console
-wget https://github.com/chriscareycode/nagiostv-react/releases/download/v0.9.7/nagiostv-0.9.7.tar.gz
+wget https://github.com/chriscareycode/nagiostv-react/releases/download/v0.9.8/nagiostv-0.9.8.tar.gz
 ```
 - Extract the NagiosTV release using tar. This will create a nagiostv/ folder.
 ```console
-tar xvfz nagiostv-0.9.7.tar.gz
+tar xvfz nagiostv-0.9.8.tar.gz
 ```
 - We're going to host the NagiosTV folder from the built-in Nagios web ui. Copy/Move the nagiostv/ folder into your Nagios web ui folder. For Nagios Core 4 the Nagios web ui folder might be at `/usr/local/nagios/share/` or `/usr/nagios/share/`. Nagios XI might be at `/var/www/html/` or `/usr/local/nagiosxi/html/`.
 
@@ -104,8 +104,8 @@ Then pretty much the same process as above. Download and overwrite the nagiostv
 Remember your web ui destination folder `/usr/local/nagios/share/nagiostv/` may vary depending on your Nagios install.
 You can do it on the box with:
 ```console
-wget https://github.com/chriscareycode/nagiostv-react/releases/download/v0.9.7/nagiostv-0.9.7.tar.gz
-tar xvfz nagiostv-0.9.7.tar.gz
+wget https://github.com/chriscareycode/nagiostv-react/releases/download/v0.9.8/nagiostv-0.9.8.tar.gz
+tar xvfz nagiostv-0.9.8.tar.gz
 sudo cp -r nagiostv/* /usr/local/nagios/share/nagiostv/
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nagiostv",
-  "version": "0.9.7",
+  "version": "0.9.8",
   "type": "module",
   "private": true,
   "homepage": "./",

src/atoms/settingsState.ts

@@ -26,8 +26,8 @@ const useFakeSampleData = urlParams.get('fakedata') === 'true' || urlParams.get(
 
 const bigStateInitial: BigState = {
 
-	currentVersion: 85, // This gets incremented with each new release (manually)
-	currentVersionString: '0.9.7', // This gets incremented with each new release (manually)
+	currentVersion: 86, // This gets incremented with each new release (manually)
+	currentVersionString: '0.9.8', // This gets incremented with each new release (manually)
 
 	latestVersion: 0,
 	latestVersionString: '',
@@ -67,10 +67,13 @@ export const clientSettingsInitial: ClientSettings = {
 	alertMaxItems: 1000,
 
 	hostsAndServicesSideBySide: false,
-	hideSummarySection: true,
+
+	hideSummarySection: false,
 	hideMostRecentAlertSection: true,
 	hideLocalLLMSection: true,
+
 	hideServiceSection: false,
+
 	hideServicePending: false,
 	hideServiceOk: true,
 	hideServiceWarning: false,
@@ -84,6 +87,7 @@ export const clientSettingsInitial: ClientSettings = {
 	serviceSortOrder: 'newest',
 
 	hideHostSection: false,
+
 	hideHostPending: false,
 	hideHostUp: true,
 	hideHostDown: false,
@@ -138,28 +142,26 @@ export const clientSettingsInitial: ClientSettings = {
 	miniMapWidth: 120,
 
 	// LLM integration
-	llmServerHost: 'localhost',
-	llmServerPort: 1234,
+	llmServerBaseUrl: 'http://localhost:1234',
 	llmModel: 'openai/gpt-oss-20b',
 	llmApiKey: '',
 	llmSpeakResponse: false,
+	llmSystemPrompt: `
+You are a helpful assistant analyzing Nagios monitoring data. Provide concise insights about the current infrastructure health, identify critical issues, and suggest priorities for resolution. Today's date is {{DATE}}. The time is {{TIME}}. Day of the week is {{DAY_OF_WEEK}}. If you mention "flapping", capitalize it as "FLAPPING". Always add an emoji in the first position at the beginning of the response; it will be displayed as a "large icon" next to the response.
+`,
 	llmPromptAllOk: `
-You are an expert IT and Networking admin and know how to diagnose issues.
-
 All systems are operating normally with no detected issues. 
 
 Please start by announcing the time in plain language, and saying the following:
 "All systems OK". 
 
-If the current day is significant, like a major holiday, mention it.
-
-Optionally append a single happy or network or server related emoji on the end of the response, be creative with your choice.
+If the current day is significant, like a major holiday, mention it. If it is not, don't mention it and be more brief.
 `,
 	llmPromptNotOk: `
-You are an expert IT and Networking admin and know how to diagnose issues.
-
 Provide a brief summary of the current situation. 
 
+Alerts are always in the past, and I like to measure how long since the last alert. If it happened recently then it's worth mentioning. If it happened > 1 hour ago then not as interesting.
+
 - If you mention a host name, service name, or check name, put backticks around the name so it will emphasize in the markup.
 
 - If there are no host issues, then do not mention there are no host issues; only focus on the service issues.
@@ -176,6 +178,9 @@ RECOMMENDATIONS if the service is not in OK state:
 ======================================
 
 `,
+
+	// Server settings
+	serverSettingsTakePrecedence: false,
 };
 
 export const bigStateAtom = atom(bigStateInitial);

src/components/Settings.tsx

@@ -939,34 +939,21 @@ const Settings = () => {
 								</td>
 							</tr>
 							<tr>
-								<th>LLM Server Host:</th>
+								<th>LLM Server Base URL:</th>
 								<td>
 									<input 
 										type="text" 
-										value={clientSettingsTemp.llmServerHost} 
-										onChange={handleChange('llmServerHost', 'string')}
-										placeholder="localhost or 10.0.0.1" 
+										value={clientSettingsTemp.llmServerBaseUrl} 
+										onChange={handleChange('llmServerBaseUrl', 'string')}
+										placeholder="http://localhost:1234"
 									/>
 									<br />
 									<span style={{ fontSize: '0.9em', color: '#888' }}>
-										Hostname or IP address of your OpenAI-compatible LLM server (e.g., Ollama, LM Studio, LocalAI)
-									</span>
-								</td>
-							</tr>
-							<tr>
-								<th>LLM Server Port:</th>
-								<td>
-									<input 
-										type="number" 
-										min="1" 
-										max="65535" 
-										value={clientSettingsTemp.llmServerPort} 
-										onChange={handleChange('llmServerPort', 'number')}
-										placeholder="11434" 
-									/>
-									<br />
-									<span style={{ fontSize: '0.9em', color: '#888' }}>
-										Port number (Ollama: 11434, LM Studio: 1234, LocalAI: 8080)
+										Base URL to your OpenAI-compatible LLM server (the path /v1/chat/completions is added automatically)<br />
+										Examples:<br />
+										• Ollama: <code>http://localhost:11434</code><br />
+										• LM Studio: <code>http://localhost:1234</code><br />
+										• LocalAI: <code>http://localhost:8080</code>
 									</span>
 								</td>
 							</tr>
@@ -1013,6 +1000,25 @@ const Settings = () => {
 									</span>
 								</td>
 							</tr>
+							<tr>
+								<th>System Prompt:</th>
+								<td>
+									<div className="text-[0.9em] text-[#888]">
+										The system prompt sent to the LLM. Available variables:<br />
+										<code className="bg-[#1e1e1e] px-1.5 py-0.5 rounded">{`{{DATE}}`}</code> - Current date (e.g., 2026-01-01)<br />
+										<code className="bg-[#1e1e1e] px-1.5 py-0.5 rounded">{`{{TIME}}`}</code> - Current time (e.g., 14:30:45)<br />
+										<code className="bg-[#1e1e1e] px-1.5 py-0.5 rounded">{`{{DAY_OF_WEEK}}`}</code> - Day of the week (e.g., Thursday)
+									</div>
+									<textarea 
+										value={clientSettingsTemp.llmSystemPrompt} 
+										onChange={handleChange('llmSystemPrompt', 'string')}
+										placeholder="System prompt for the LLM"
+										rows={8}
+										className="w-full font-mono text-[0.9em]"
+										style={{ fontFamily: 'monospace', fontSize: '0.9em' }}
+									/>
+								</td>
+							</tr>
 							<tr>
 								<th>Prompt (All OK):</th>
 								<td>
@@ -1052,14 +1058,17 @@ const Settings = () => {
 										<ul style={{ marginTop: '10px', marginBottom: '5px', paddingLeft: '20px' }}>
 											<li style={{ marginBottom: '5px' }}>
 												<strong>Ollama:</strong> Install from <a href="https://ollama.com" target="_blank" rel="noopener noreferrer" style={{ color: '#4a90e2' }}>ollama.com</a>, 
-												run <code style={{ backgroundColor: '#1e1e1e', padding: '2px 6px', borderRadius: '3px' }}>ollama serve</code> (default port: 11434)
+												run <code style={{ backgroundColor: '#1e1e1e', padding: '2px 6px', borderRadius: '3px' }}>ollama serve</code>
+												<br />Base URL: <code style={{ backgroundColor: '#1e1e1e', padding: '2px 6px', borderRadius: '3px' }}>http://localhost:11434</code>
 											</li>
 											<li style={{ marginBottom: '5px' }}>
 												<strong>LM Studio:</strong> Download from <a href="https://lmstudio.ai" target="_blank" rel="noopener noreferrer" style={{ color: '#4a90e2' }}>lmstudio.ai</a>, 
-												load a model, and start the local server (default port: 1234)
+												load a model, and start the local server
+												<br />Base URL: <code style={{ backgroundColor: '#1e1e1e', padding: '2px 6px', borderRadius: '3px' }}>http://localhost:1234</code>
 											</li>
 											<li style={{ marginBottom: '5px' }}>
 												<strong>LocalAI:</strong> Run via Docker: <code style={{ backgroundColor: '#1e1e1e', padding: '2px 6px', borderRadius: '3px' }}>docker run -p 8080:8080 localai/localai:latest</code>
+												<br />Base URL: <code style={{ backgroundColor: '#1e1e1e', padding: '2px 6px', borderRadius: '3px' }}>http://localhost:8080</code>
 											</li>
 										</ul>
 										<div style={{ marginTop: '10px', fontSize: '0.9em', color: '#999' }}>
@@ -1090,6 +1099,22 @@ const Settings = () => {
 											Local client settings are applied AFTER loading settings from the server, so you can think of server settings as a way to set defaults
 											for all clients, but they can still be customized individually with settings saved in client settings. Delete the client settings and refresh the page to fetch server setting defaults again.
 										</div>
+										<br />
+										<div>
+											<label>
+												<input
+													type="checkbox"
+													checked={clientSettingsTemp.serverSettingsTakePrecedence}
+													onChange={(e: ChangeEvent<HTMLInputElement>) => {
+														setClientSettingsTemp(curr => ({ ...curr, serverSettingsTakePrecedence: e.target.checked }));
+														setIsDirty(true);
+													}}
+												/>
+												{' '}Server settings take precedence (when enabled, local settings will not override server settings)
+											</label>
+										</div>
+
+										<br />
 
 										<h4>Option 1: If you have PHP enabled on your server</h4>
 

src/components/SettingsLoad.tsx

@@ -242,6 +242,18 @@ const SettingsLoad = () => {
 			// Now that we have loaded server settings, set the document.title from the title setting
 			if (response.data.titleString) { document.title = response.data.titleString; }
 
+			// If serverSettingsTakePrecedence is true, skip loading local settings
+			// This means server settings will not be overwritten by local settings
+			if (response.data.serverSettingsTakePrecedence) {
+				console.log('serverSettingsTakePrecedence is true - skipping local settings');
+				setBigState(curr => ({
+					...curr,
+					isDoneLoading: true
+				}));
+				loadSettingsFromUrl();
+				return;
+			}
+
 			// Now that we have loaded remote settings, load the cookie and overwrite settings with cookie
 			// getLocalSettings() is then going to call loadSettingsFromUrl()
 			getLocalSettings();

src/components/llm/LLMMarkup.css

@@ -1,14 +1,13 @@
 .llm-markup {
 	color: #e0e0e0;
-	line-height: 1.0;
+	line-height: 130%;
 	font-size: 0.95em;
 }
 
 /* Headings */
 .llm-heading {
 	margin: 0.8em 0 0.5em 0;
 	font-weight: 600;
-	line-height: 1.0;
 }
 
 .llm-heading:first-child {
@@ -52,7 +51,6 @@
 /* Paragraphs */
 .llm-paragraph {
 	margin: 0.5em 0;
-	line-height: 1.3;
 }
 
 .llm-first-paragraph {
@@ -78,7 +76,6 @@
 
 .llm-list-item {
 	margin: 0.3em 0;
-	line-height: 1.0;
 }
 
 .llm-list-item::marker {
@@ -123,7 +120,6 @@
 	font-family: 'Monaco', 'Courier New', monospace;
 	font-size: 0.9em;
 	color: #d4d4d4;
-	line-height: 1.0;
 	display: block;
 }
 

src/components/llm/LLMMarkup.tsx

@@ -220,8 +220,8 @@ export default function LLMMarkup({ content }: LLMMarkupProps) {
 		const highlightStatusWords = (text: string, startIndex: number): (string | JSX.Element)[] => {
 			const parts: (string | JSX.Element)[] = [];
 
-			// Match DOWN, CRITICAL, WARNING, UNKNOWN, or FLAPPING as whole words (case-insensitive)
-			const statusRegex = /\b(DOWN|CRITICAL|WARNING|UNKNOWN|FLAPPING)\b/gi;
+			// Match OK, DOWN, CRITICAL, WARNING, UNKNOWN, or FLAPPING as whole words (case-insensitive)
+			const statusRegex = /\b(OK|DOWN|CRITICAL|WARNING|UNKNOWN|FLAPPING)\b/gi;
 			let lastIndex = 0;
 			let match;
 			let partIndex = startIndex;
@@ -235,7 +235,9 @@ export default function LLMMarkup({ content }: LLMMarkupProps) {
 				// Determine the color class based on the status word (case-insensitive)
 				let colorClass = '';
 				const word = match[1];
-				if (word === 'DOWN' || word === 'CRITICAL') {
+				if (word === 'OK') {
+					colorClass = 'color-green';
+				} else if (word === 'DOWN' || word === 'CRITICAL') {
 					colorClass = 'color-red';
 				} else if (word === 'WARNING' || word === 'Warning') {
 					colorClass = 'color-yellow';

src/components/llm/LocalLLM.README.md

@@ -26,8 +26,7 @@ import LocalLLM from './summary/LocalLLM';
 ### 2. Configure LLM Server
 The component uses the following settings from `clientSettings`:
 
-- `llmServerHost`: Hostname of the LLM server (default: 'localhost')
-- `llmServerPort`: Port number of the LLM server (default: 11434)
+- `llmServerBaseUrl`: Base URL to the OpenAI-compatible LLM server (default: 'http://localhost:1234'). The path /v1/chat/completions is added automatically.
 - `llmModel`: Model name to use (default: 'gpt-3.5-turbo')
 - `llmApiKey`: Optional API key for authentication (default: '')
 
@@ -46,8 +45,7 @@ ollama serve
 ```
 
 Configure in NagiosTV:
-- Host: `localhost`
-- Port: `11434`
+- Base URL: `http://localhost:11434`
 - Model: `llama2`
 
 #### Using LM Studio
@@ -56,8 +54,7 @@ Configure in NagiosTV:
 3. Start the local server (typically on port 1234)
 
 Configure in NagiosTV:
-- Host: `localhost`
-- Port: `1234`
+- Base URL: `http://localhost:1234`
 - Model: Name of the loaded model
 
 #### Using LocalAI
@@ -66,8 +63,7 @@ docker run -p 8080:8080 localai/localai:latest
 ```
 
 Configure in NagiosTV:
-- Host: `localhost`
-- Port: `8080`
+- Base URL: `http://localhost:8080`
 - Model: Available model name
 
 ## API Compatibility