36 | {showMiniMap && (
37 |
43 | );
44 | };
45 |
46 | export default RightPanel;
--------------------------------------------------------------------------------
/src/components/alerts/QuietFor.css:
--------------------------------------------------------------------------------
1 | .QuietFor {
2 | padding: 8px 5px;
3 | margin: 10px 0px;
4 | text-align: left;
5 | background-color: #171717;
6 | border-radius: 5px;
7 | font-size: 0.9em;
8 | border: 0px solid #464646;
9 | color: #bbb;
10 | }
11 |
12 | .QuietFor.quietfor-normal-size {
13 |
14 | }
15 | .QuietFor.quietfor-medium-size {
16 | padding-top: 25px;
17 | padding-bottom: 25px;
18 | }
19 | .QuietFor.quietfor-large-size {
20 | padding-top: 50px;
21 | padding-bottom: 50px;
22 | }
23 | .QuietFor.quietfor-xlarge-size {
24 | padding-top: 100px;
25 | padding-bottom: 100px;
26 | }
27 |
28 | .QuietFor.color-green {
29 | border: 1px solid #004c00;
30 | background-color: #001d00;
31 | }
32 | .QuietFor.color-yellow {
33 | border: 1px solid #8e8e00;
34 | background-color: #333300;
35 | }
36 | .QuietFor.color-orange {
37 | border: 1px solid #805300;
38 | background-color: #2f1f00;
39 | }
40 | .QuietFor.color-red {
41 | border: 1px solid #900000;
42 | background-color: #2b0000;
43 | }
44 |
45 | .QuietForIcon {
46 | float: right;
47 | position: relative;
48 | top: 2px;
49 | opacity: 1;
50 | font-size: 1em;
51 | margin-right: 5px;
52 | }
53 | .QuietForClock {
54 | margin-left: 6px;
55 | margin-right: 9px;
56 | }
--------------------------------------------------------------------------------
/src/components/animation.css:
--------------------------------------------------------------------------------
1 | /**
2 | * NagiosTV https://nagiostv.com
3 | * Copyright (C) 2008-2025 Chris Carey https://chriscarey.com
4 | *
5 | * This program is free software: you can redistribute it and/or modify
6 | * it under the terms of the GNU General Public License as published by
7 | * the Free Software Foundation, either version 2 of the License, or
8 | * (at your option) any later version.
9 | *
10 | * This program is distributed in the hope that it will be useful,
11 | * but WITHOUT ANY WARRANTY; without even the implied warranty of
12 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13 | * GNU General Public License for more details.
14 | *
15 | * You should have received a copy of the GNU General Public License
16 | * along with this program. If not, see
28 |
29 |
30 |
32 |
33 |
34 | );
35 |
36 | };
37 |
38 | export default App;
39 |
--------------------------------------------------------------------------------
/src/components/alerts/AlertItem.css:
--------------------------------------------------------------------------------
1 | .AlertItem {
2 | background-color: #222;
3 | border: 0px solid #9c9c9c;
4 | font-size: 1em;
5 | padding: 4px;
6 | border-radius: 5px;
7 | margin-bottom: 5px;
8 |
9 | overflow: hidden;
10 | color: white;
11 | justify-content: center;
12 | }
13 |
14 | .AlertItemRight {
15 | float: right;
16 | border: 0px solid #ccc;
17 | /*background-color: #444;*/
18 | border-radius: 5px;
19 | padding: 0px 5px;
20 | position: relative;
21 | top: 0px;
22 | left: 4px;
23 | text-align: right;
24 | }
25 |
26 | .alert-item-right-date {
27 | font-size: 0.8em;
28 | color: #bbb;
29 | }
30 |
31 | /* soft */
32 | .alert-item-state-type-2 {
33 | color: #bbb;
34 | font-size: 0.7em;
35 | }
36 |
37 | /* hard */
38 | .alert-item-state-type-1 {
39 | font-size: 0.7em;
40 | }
41 |
42 | .alert-item-host-name {
43 |
44 | }
45 |
46 | .alert-item-description {
47 | font-size: 1em;
48 | padding: 2px 4px;
49 | border-radius: 4px;
50 | position: relative;
51 | top: 0px;
52 | border: 0px solid #545454;
53 | background-color: #101010;
54 | margin-left: 2px;
55 | margin-right: 5px;
56 | color: #fbc37c;
57 | }
58 |
59 | .alert-item-clickable {
60 | cursor: pointer;
61 | }
62 |
63 | .alert-item-clickable:hover {
64 | text-decoration: underline;
65 | }
66 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | /**
2 | * NagiosTV https://nagiostv.com
3 | * Copyright (C) 2008-2025 Chris Carey https://chriscarey.com
4 | *
5 | * This program is free software: you can redistribute it and/or modify
6 | * it under the terms of the GNU General Public License as published by
7 | * the Free Software Foundation, either version 2 of the License, or
8 | * (at your option) any later version.
9 | *
10 | * This program is distributed in the hope that it will be useful,
11 | * but WITHOUT ANY WARRANTY; without even the implied warranty of
12 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13 | * GNU General Public License for more details.
14 | *
15 | * You should have received a copy of the GNU General Public License
16 | * along with this program. If not, see
41 | 
42 |
43 | );
44 | }
45 | }
46 |
47 | export default CustomLogo;
48 |
--------------------------------------------------------------------------------
/src/components/panels/LeftPanel.css:
--------------------------------------------------------------------------------
1 | .LeftPanel {
2 | position: fixed;
3 | top: 40px;
4 | left: -50px;
5 | width: 50px;
6 | border: 0px solid #333;
7 | background-color: #1d1d1d;
8 | z-index: 13;
9 | overflow: hidden;
10 | transition: left 250ms linear;
11 | }
12 |
13 | .LeftPanel.left-panel-open {
14 | left: 0px;
15 | }
16 |
17 | .LeftPanel .nav-sidebar-icon {
18 |
19 | width: 50px;
20 | height: 50px;
21 | border: 0px solid #333;
22 | text-align: center;
23 | font-size: 1.2em;
24 | color: #666;
25 |
26 | display: grid;
27 | place-content: center;
28 | }
29 |
30 | .LeftPanel .nav-sidebar-icon svg {
31 | color: #666;
32 |
33 | }
34 |
35 | .nav-sidebar-icon-error {
36 | animation: error-blink 2s infinite alternate;
37 | }
38 |
39 | @keyframes error-blink {
40 | 0% {
41 | color: red;
42 | }
43 |
44 | 50% {
45 | color: orange;
46 | }
47 |
48 | 100% {
49 | color: yellow;
50 | }
51 | }
52 |
53 | .nav-sidebar-icon-selected {
54 | color: #eee;
55 | }
56 |
57 | .LeftPanel .nav-sidebar-item {
58 | position: static;
59 | width: 50px;
60 | height: 50px;
61 | border: 0px solid #333;
62 | text-align: center;
63 | }
64 |
65 | .LeftPanel .nav-sidebar-number {
66 | margin-top: 20px;
67 | color: orange;
68 | font-size: 1.4em;
69 | text-align: center;
70 | }
71 |
72 | .nav-sidebar-bottom-float {
73 | position: absolute;
74 | bottom: 0;
75 | }
76 |
77 | .nav-sidebar-hr {
78 | border-bottom: 1px solid #555;
79 | margin: 0 10px 10px 10px;
80 | }
81 |
82 | /* styles for react router links */
83 |
84 | .LeftPanel a {
85 | text-decoration: none;
86 | }
87 |
88 | .LeftPanel .is-active>svg {
89 | color: #eee !important;
90 | font-size: 0.9em !important;
91 | }
92 |
93 | .LeftPanel .is-active>.nav-sidebar-icon-text {
94 | color: #eee;
95 | }
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | ///
27 |
41 | );
42 |
43 | }
44 |
45 | export default Help;
46 |
--------------------------------------------------------------------------------
/src/helpers/language.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * NagiosTV https://nagiostv.com
3 | * Copyright (C) 2008-2025 Chris Carey https://chriscarey.com
4 | *
5 | * This program is free software: you can redistribute it and/or modify
6 | * it under the terms of the GNU General Public License as published by
7 | * the Free Software Foundation, either version 2 of the License, or
8 | * (at your option) any later version.
9 | *
10 | * This program is distributed in the hope that it will be useful,
11 | * but WITHOUT ANY WARRANTY; without even the implied warranty of
12 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13 | * GNU General Public License for more details.
14 | *
15 | * You should have received a copy of the GNU General Public License
16 | * along with this program. If not, see NagiosTV Info and Help
28 | 29 |
30 |
31 |
32 |
33 |
34 |
36 |
38 |
40 | NagiosTV website: https://nagiostv.com
35 | 36 |
Source code at GitHub: https://github.com/chriscareycode/nagiostv-react
37 | 38 |
NagiosTV by Chris Carey https://chriscarey.com
39 |
24 |
}
44 |
45 | );
46 | };
47 |
48 | export default MostRecentAlert;
49 |
--------------------------------------------------------------------------------
/src/components/widgets/FilterCheckbox.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * NagiosTV https://nagiostv.com
3 | * Copyright (C) 2008-2025 Chris Carey https://chriscarey.com
4 | *
5 | * This program is free software: you can redistribute it and/or modify
6 | * it under the terms of the GNU General Public License as published by
7 | * the Free Software Foundation, either version 2 of the License, or
8 | * (at your option) any later version.
9 | *
10 | * This program is distributed in the hope that it will be useful,
11 | * but WITHOUT ANY WARRANTY; without even the implied warranty of
12 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13 | * GNU General Public License for more details.
14 | *
15 | * You should have received a copy of the GNU General Public License
16 | * along with this program. If not, see
25 |
26 | */}
29 |
30 |
43 | Most recent alert {quietForMs ? formatDateTimeAgoColorQuietFor(quietForMs) : '?'} ago:
27 |
28 | {/* hard service ok
Sat, Oct 9, 2021 8:30 AM
unicorn Check APTAPT OK: 0 packages available for upgrade (0 critical updates).
70 |
71 |
72 | );
73 | }
74 |
75 | // write a function to pass into memo
76 | function arePropsEqual(prevProps: ProgressProps, nextProps: ProgressProps) {
77 | // When this function returns, true we do not render, false we render
78 | return prevProps.next_check === nextProps.next_check;
79 | // return true;
80 | }
81 |
82 | export default memo(Progress, arePropsEqual);
83 |
--------------------------------------------------------------------------------
/src/helpers/nagios.ts:
--------------------------------------------------------------------------------
1 | /*eslint no-unreachable: "off"*/
2 |
3 | /**
4 | * NagiosTV https://nagiostv.com
5 | * Copyright (C) 2008-2025 Chris Carey https://chriscarey.com
6 | *
7 | * This program is free software: you can redistribute it and/or modify
8 | * it under the terms of the GNU General Public License as published by
9 | * the Free Software Foundation, either version 2 of the License, or
10 | * (at your option) any later version.
11 | *
12 | * This program is distributed in the hope that it will be useful,
13 | * but WITHOUT ANY WARRANTY; without even the implied warranty of
14 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
15 | * GNU General Public License for more details.
16 | *
17 | * You should have received a copy of the GNU General Public License
18 | * along with this program. If not, see
86 | {this.state.isAtBottom && }
87 |
88 | );
89 | }
90 | }
91 |
92 | export default ScrollToTop;
--------------------------------------------------------------------------------
/src/components/SettingsFakeData.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * SettingsFakeData component
3 | * In this component, we will loop over all the fake data and massage the data for better UI dev experience
4 | *
5 | * Particularly I wanted to fix the issue when in fake data mode, all items say "Checking now..." as
6 | * they have a next_check date in the past. This is because our fake data set is a snapshot of a moment in the past.
7 | * Let's loop over all these items, and if the next_check
8 | * is in the past, set it to a random time in the future.
9 | */
10 |
11 | import { hostAtom } from "atoms/hostAtom";
12 | import { serviceAtom } from "atoms/serviceAtom"
13 | import { bigStateAtom, clientSettingsAtom } from "atoms/settingsState";
14 | import { useAtom, useAtomValue, useSetAtom } from "jotai";
15 | import { useEffect } from "react";
16 |
17 | const startAfterSeconds = 4; // This is how long to wait before starting the first/initial fake data
18 | const fakeOutIntervalSeconds = 40; // This needs to be longer than the polling interval for hosts and services.
19 |
20 | const SettingsFakeData = () => {
21 | // State Management state (main)
22 | const [bigState, setBigState] = useAtom(bigStateAtom);
23 | // const clientSettings = useAtomValue(clientSettingsAtom);
24 | const setHostState = useSetAtom(hostAtom);
25 | const setServiceState = useSetAtom(serviceAtom);
26 |
27 | useEffect(() => {
28 |
29 | // If we are in demo mode, loop over all hosts and services and set next_check to a random time in the future
30 | const fakeOutTheData = () => {
31 | setHostState(prev => {
32 | // Loop over all hosts
33 | const newArr = [...prev.problemsArray];
34 | newArr.forEach((host) => {
35 | if (host.next_check < Date.now()) {
36 | host.next_check = Date.now() + Math.floor(Math.random() * 500000);
37 | }
38 | });
39 | return { ...prev, problemsArray: newArr };
40 | });
41 | setServiceState(prev => {
42 | // Loop over all services
43 | const newArr = [...prev.problemsArray];
44 | newArr.forEach((service) => {
45 | if (service.next_check < Date.now()) {
46 | service.next_check = Date.now() + Math.floor(Math.random() * 500000);
47 | }
48 | });
49 | return { ...prev, problemsArray: newArr };
50 | });
51 | }
52 |
53 | let interval: NodeJS.Timeout;
54 | if (bigState.useFakeSampleData) {
55 | // Run one after 5s
56 | setTimeout(() => {
57 | console.log('Running fakeOutTheData to fake out the fake data...');
58 | fakeOutTheData();
59 | }, startAfterSeconds * 1000);
60 |
61 | // Start an interval of 1 minute to run the fakeOutTheData function
62 | console.log('Starting an interval to call fakeOutTheData...');
63 | interval = setInterval(() => {
64 | fakeOutTheData();
65 | }, fakeOutIntervalSeconds * 1000);
66 | }
67 |
68 | // Cleanup
69 | return () => {
70 | if (interval) {
71 | clearInterval(interval);
72 | }
73 | }
74 | }, [
75 | bigState.useFakeSampleData,
76 | setHostState,
77 | setServiceState,
78 | ]);
79 |
80 | return (<>);
81 | };
82 |
83 | export default SettingsFakeData;
84 |
--------------------------------------------------------------------------------
/src/components/hosts/HostGroupFilter.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * NagiosTV https://nagiostv.com
3 | * Copyright (C) 2008-2025 Chris Carey https://chriscarey.com
4 | *
5 | * This program is free software: you can redistribute it and/or modify
6 | * it under the terms of the GNU General Public License as published by
7 | * the Free Software Foundation, either version 2 of the License, or
8 | * (at your option) any later version.
9 | *
10 | * This program is distributed in the hope that it will be useful,
11 | * but WITHOUT ANY WARRANTY; without even the implied warranty of
12 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13 | * GNU General Public License for more details.
14 | *
15 | * You should have received a copy of the GNU General Public License
16 | * along with this program. If not, see Could not load hostgroups
);
55 | }
56 |
57 | const keys = Object.keys(hostgroup);
58 | // add an option for each hostgroup returned by the server
59 | const options = keys.map((key, i) => {
60 | return ;
61 | });
62 | // if the saved hostgroupFilter setting is not in the list of hostgroups from the server, add it manually
63 | if (hostgroupFilter && keys.indexOf(hostgroupFilter) === -1) {
64 | options.push();
65 | }
66 |
67 | return (
68 |
69 | HostGroup Filter: {' '}
70 |
74 |
75 | );
76 |
77 | }
78 |
79 | function propsAreEqual() {
80 | // return Object.keys(prevProps.hostgroup).length === Object.keys(nextProps.hostgroup).length &&
81 | // prevProps.hostgroupFilter === nextProps.hostgroupFilter;
82 | return true;
83 | }
84 |
85 | export default React.memo(HostGroupFilter, propsAreEqual);
86 |
--------------------------------------------------------------------------------
/src/components/services/ServiceGroupFilter.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * NagiosTV https://nagiostv.com
3 | * Copyright (C) 2008-2025 Chris Carey https://chriscarey.com
4 | *
5 | * This program is free software: you can redistribute it and/or modify
6 | * it under the terms of the GNU General Public License as published by
7 | * the Free Software Foundation, either version 2 of the License, or
8 | * (at your option) any later version.
9 | *
10 | * This program is distributed in the hope that it will be useful,
11 | * but WITHOUT ANY WARRANTY; without even the implied warranty of
12 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13 | * GNU General Public License for more details.
14 | *
15 | * You should have received a copy of the GNU General Public License
16 | * along with this program. If not, see Could not load servicegroups
);
55 | }
56 |
57 | const keys = Object.keys(servicegroup);
58 | // add an option for each servicegroup returned by the server
59 | const options = keys.map((key, i) => {
60 | return ;
61 | });
62 | // if the saved servicegroupFilter setting is not in the list of servicegroups from the server, add it manually
63 | if (servicegroupFilter && keys.indexOf(servicegroupFilter) === -1) {
64 | options.push();
65 | }
66 |
67 | return (
68 |
69 | ServiceGroup Filter: {' '}
70 |
74 |
75 | );
76 |
77 | }
78 |
79 | function propsAreEqual() {
80 | // return Object.keys(prevProps.hostgroup).length === Object.keys(nextProps.hostgroup).length &&
81 | // prevProps.hostgroupFilter === nextProps.hostgroupFilter;
82 | return true;
83 | }
84 |
85 | export default React.memo(ServiceGroupFilter, propsAreEqual);
86 |
--------------------------------------------------------------------------------
/src/types/settings.ts:
--------------------------------------------------------------------------------
1 | export interface BigState {
2 | currentVersion: number; // This gets incremented with each new release (manually)
3 | currentVersionString: string; // This gets incremented with each new release (manually)
4 | latestVersion: number;
5 | latestVersionString: string;
6 | lastVersionCheckTime: number;
7 |
8 | isDemoMode: boolean;
9 | isDebugMode: boolean;
10 | isStressTestMode: boolean;
11 | useFakeSampleData: boolean;
12 |
13 | isRemoteSettingsLoaded: boolean;
14 | isLocalSettingsLoaded: boolean; // I have this to render things only after localSettings is loaded
15 | isDoneLoading: boolean;
16 |
17 | hideFilters: boolean;
18 | isLeftPanelOpen: boolean;
19 | }
20 |
21 | export interface ClientSettings {
22 |
23 | titleString: string;
24 | dataSource: string;
25 | baseUrl: string; // Base path to Nagios cgi-bin folder
26 | livestatusPath: string;
27 |
28 | fetchHostFrequency: number; // seconds
29 | fetchServiceFrequency: number; // seconds
30 | fetchAlertFrequency: number; // seconds
31 | fetchHostGroupFrequency: number; // seconds
32 | fetchCommentFrequency: number; // seconds
33 |
34 | alertDaysBack: number;
35 | alertHoursBack: number;
36 | alertMaxItems: number;
37 |
38 | hostsAndServicesSideBySide: boolean;
39 | hideSummarySection: boolean;
40 | hideMostRecentAlertSection: boolean;
41 | hideServiceSection: boolean;
42 | hideServicePending: boolean;
43 | hideServiceWarning: boolean;
44 | hideServiceUnknown: boolean;
45 | hideServiceCritical: boolean;
46 | hideServiceAcked: boolean;
47 | hideServiceScheduled: boolean;
48 | hideServiceFlapping: boolean;
49 | hideServiceSoft: boolean;
50 | hideServiceNotificationsDisabled: boolean;
51 | serviceSortOrder: string;
52 |
53 | hideHostSection: boolean;
54 | hideHostPending: boolean;
55 | hideHostDown: boolean;
56 | hideHostUnreachable: boolean;
57 | hideHostAcked: boolean;
58 | hideHostScheduled: boolean;
59 | hideHostFlapping: boolean;
60 | hideHostSoft: boolean;
61 | hideHostNotificationsDisabled: boolean;
62 | hostSortOrder: string;
63 |
64 | hideHistory: boolean;
65 | hideHistoryTitle: boolean;
66 | hideHistory24hChart: boolean;
67 | hideHistoryChart: boolean;
68 |
69 | hideAlertSoft: boolean;
70 |
71 | hostgroupFilter: string;
72 | servicegroupFilter: string;
73 |
74 | versionCheckDays: number;
75 |
76 | language: string;
77 | locale: string;
78 | dateFormat: string;
79 | clockDateFormat: string;
80 | clockTimeFormat: string;
81 |
82 | // audio and visual
83 | fontSizeEm: string;
84 | customLogoEnabled: boolean;
85 | customLogoUrl: string;
86 |
87 | doomguyEnabled: boolean;
88 | doomguyConcernedAt: number;
89 | doomguyAngryAt: number;
90 | doomguyBloodyAt: number;
91 |
92 | showEmoji: boolean;
93 | speakItems: boolean;
94 | speakItemsVoice: string;
95 | playSoundEffects: boolean;
96 | soundEffectCritical: string;
97 | soundEffectWarning: string;
98 | soundEffectOk: string;
99 | showNextCheckInProgressBar: boolean;
100 | hideHamburgerMenu: boolean;
101 | hideBottomMenu: boolean;
102 | automaticScroll: boolean;
103 | automaticScrollTimeMultiplier: number;
104 | automaticScrollWaitSeconds: number;
105 | showMiniMap: boolean;
106 | miniMapWidth: number;
107 | }
108 |
109 | export interface VersionCheck {
110 | version: number;
111 | version_string: string;
112 | }
--------------------------------------------------------------------------------
/src/components/alerts/AlertFilters.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * NagiosTV https://nagiostv.com
3 | * Copyright (C) 2008-2025 Chris Carey https://chriscarey.com
4 | *
5 | * This program is free software: you can redistribute it and/or modify
6 | * it under the terms of the GNU General Public License as published by
7 | * the Free Software Foundation, either version 2 of the License, or
8 | * (at your option) any later version.
9 | *
10 | * This program is distributed in the hope that it will be useful,
11 | * but WITHOUT ANY WARRANTY; without even the implied warranty of
12 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13 | * GNU General Public License for more details.
14 | *
15 | * You should have received a copy of the GNU General Public License
16 | * along with this program. If not, see
52 |
53 |
104 | );
105 | }
106 |
107 | export default LeftPanel;
108 |
--------------------------------------------------------------------------------
/src/components/Dashboard.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | // State Management
3 | import { useAtomValue } from 'jotai';
4 | import { bigStateAtom, clientSettingsAtom } from '../atoms/settingsState';
5 | // Dashboard Fetch (For HostGroup and Comment)
6 | import DashboardFetch from './DashboardFetch';
7 | // Import Hosts and Services
8 | import HostGroupFilter from './hosts/HostGroupFilter';
9 | import ServiceGroupFilter from './services/ServiceGroupFilter';
10 | import Summary from './summary/Summary';
11 | import HostSection from './hosts/HostSection';
12 | import ServiceSection from './services/ServiceSection';
13 | import AlertSection from './alerts/AlertSection';
14 | // Demo mode
15 | import Demo from './Demo';
16 |
17 | // CSS
18 | import './Dashboard.css';
19 | import MostRecentAlert from './summary/MostRecentAlert';
20 |
21 | const Dashboard = () => {
22 |
23 | const bigState = useAtomValue(bigStateAtom);
24 | const clientSettings = useAtomValue(clientSettingsAtom);
25 |
26 | // Chop the bigState into vars
27 | const {
28 | isDemoMode,
29 | isDoneLoading,
30 | hideFilters,
31 | } = bigState;
32 |
33 | // Chop the clientSettings into vars
34 | const {
35 | fontSizeEm,
36 | hideSummarySection,
37 | hideMostRecentAlertSection,
38 | hideHistory,
39 | hideHostSection,
40 | hideServiceSection,
41 | hostsAndServicesSideBySide,
42 | } = clientSettings;
43 |
44 | //console.log('Dashboard render()');
45 |
46 |
47 |
48 | return (
49 |
54 |
55 | (isActive ? 'is-active' : '')} to="/">
56 |
62 |
63 |
64 |
65 |
66 |
67 | (isActive ? 'is-active' : '')} to="/settings">
68 |
74 |
75 |
76 |
77 |
78 |
79 | (isActive ? 'is-active' : '')} to="/update">
80 |
86 |
87 |
88 |
89 |
90 |
91 | (isActive ? 'is-active' : '')} to="/help">
92 |
98 |
99 |
100 |
101 |
102 |
103 |
50 |
51 | {isDoneLoading &&
111 |
112 | );
113 | };
114 |
115 | // function isEqualMemo(prev, next) {
116 | // //console.log('Dashboard memoFn', prev, next);
117 | // return false; // update
118 | // }
119 |
120 | // We do not have
121 | export default React.memo(Dashboard);
--------------------------------------------------------------------------------
/src/components/Doomguy/Doomguy.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * NagiosTV https://nagiostv.com
3 | * Copyright (C) 2008-2025 Chris Carey https://chriscarey.com
4 | *
5 | * This program is free software: you can redistribute it and/or modify
6 | * it under the terms of the GNU General Public License as published by
7 | * the Free Software Foundation, either version 2 of the License, or
8 | * (at your option) any later version.
9 | *
10 | * This program is distributed in the hope that it will be useful,
11 | * but WITHOUT ANY WARRANTY; without even the implied warranty of
12 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13 | * GNU General Public License for more details.
14 | *
15 | * You should have received a copy of the GNU General Public License
16 | * along with this program. If not, see
52 |
53 |
}
106 |
107 | {/* add space to the bottom of the dashboard */}
108 |
109 |
110 |
70 |
83 | )}
84 |
85 | {/* Hosts and Services Side by Side Disabled (Default stacked) */}
86 | {!hostsAndServicesSideBySide && (
87 |
71 |
76 |
72 | {/* Hosts Section */}
73 | {!hideHostSection &&
75 |
77 |
82 |
78 | {/* Services Section */}
79 | {!hideServiceSection &&
81 |
88 | {/* Hosts Section */}
89 | {!hideHostSection &&
94 | )}
95 |
96 | {/* "AboveAlert" div (used for automatic scrolling routine) */}
97 |
98 |
99 | {/* Alert History Section */}
100 | {!hideHistory &&
100 |
103 | );
104 |
105 | };
106 |
107 | export default Doomguy;
108 |
--------------------------------------------------------------------------------
/src/components/widgets/HowManyEmoji.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * NagiosTV https://nagiostv.com
3 | * Copyright (C) 2008-2025 Chris Carey https://chriscarey.com
4 | *
5 | * This program is free software: you can redistribute it and/or modify
6 | * it under the terms of the GNU General Public License as published by
7 | * the Free Software Foundation, either version 2 of the License, or
8 | * (at your option) any later version.
9 | *
10 | * This program is distributed in the hope that it will be useful,
11 | * but WITHOUT ANY WARRANTY; without even the implied warranty of
12 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13 | * GNU General Public License for more details.
14 | *
15 | * You should have received a copy of the GNU General Public License
16 | * along with this program. If not, see
101 |
102 |
79 | {/* always show one quiet for (if we have at least 1 item) */}
80 | {this.props.items.length > 1 &&
81 |
122 | );
123 | }
124 | }
125 |
126 | export default AlertItems;
127 |
--------------------------------------------------------------------------------
/src/helpers/audio.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * NagiosTV https://nagiostv.com
3 | * Copyright (C) 2008-2025 Chris Carey https://chriscarey.com
4 | *
5 | * This program is free software: you can redistribute it and/or modify
6 | * it under the terms of the GNU General Public License as published by
7 | * the Free Software Foundation, either version 2 of the License, or
8 | * (at your option) any later version.
9 | *
10 | * This program is distributed in the hope that it will be useful,
11 | * but WITHOUT ANY WARRANTY; without even the implied warranty of
12 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13 | * GNU General Public License for more details.
14 | *
15 | * You should have received a copy of the GNU General Public License
16 | * along with this program. If not, see
110 | {this.state.howManyToRender > this.state.pageSize &&
111 |
112 |
113 |
114 | }
115 | {this.props.items.length > this.state.howManyToRender &&
116 |
117 |
118 |
119 | }
120 |
121 |
117 |
123 | );
124 | }
125 | }
126 |
127 | export default QuietFor;
128 |
--------------------------------------------------------------------------------
/src/components/alerts/AlertItem.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * NagiosTV https://nagiostv.com
3 | * Copyright (C) 2008-2025 Chris Carey https://chriscarey.com
4 | *
5 | * This program is free software: you can redistribute it and/or modify
6 | * it under the terms of the GNU General Public License as published by
7 | * the Free Software Foundation, either version 2 of the License, or
8 | * (at your option) any later version.
9 | *
10 | * This program is distributed in the hope that it will be useful,
11 | * but WITHOUT ANY WARRANTY; without even the implied warranty of
12 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13 | * GNU General Public License for more details.
14 | *
15 | * You should have received a copy of the GNU General Public License
16 | * along with this program. If not, see {icon}
118 |
93 | {/* show quiet for */}
94 | {(i > 0) && ifQuietFor(e.timestamp, props.prevtime, howMuchTimeIsQuietTime) &&
95 |
133 | );
134 |
135 | }
136 |
137 | export default AlertItem;
138 |
--------------------------------------------------------------------------------
/node/app.js:
--------------------------------------------------------------------------------
1 | //=============================================================================
2 | // Requires
3 | //=============================================================================
4 |
5 | var express = require('express');
6 | var app = express();
7 | var cors = require('cors');
8 | var fs = require('fs');
9 | var bodyParser = require('body-parser');
10 | // express-http-proxy https://github.com/villadora/express-http-proxy
11 | var proxy = require('express-http-proxy');
12 |
13 | //=============================================================================
14 | // Settings
15 | //=============================================================================
16 |
17 | let settings;
18 | let settingsNagios;
19 |
20 | // Load the settings.js file, if it exists
21 | try {
22 | const stats = fs.lstatSync('settings.js');
23 | if (stats.isFile()) { console.log('settings.js file found. This is where the Node.js server settings are stored.'); }
24 | settings = require('./settings');
25 | }
26 | catch (e) {
27 | console.log('****************************************************************************************************************');
28 | console.log('No settings.js file found. This is where the Node.js server settings are stored.')
29 | console.log('Copy the file settings.dist.js to settings.js and edit settings.js if you want to. The settings.js file will not be overwritten by updates.');
30 | console.log('****************************************************************************************************************');
31 | process.exit();
32 | }
33 |
34 | loadSettingsNagios();
35 |
36 | //=============================================================================
37 | // loadSettings and saveSettings
38 | //=============================================================================
39 | function loadSettingsNagios() {
40 | // Load the settings-nagios.js file, if it exists
41 | try {
42 | const stats = fs.lstatSync('settings-nagios.js');
43 | if (stats.isFile()) { console.log('settings-nagios.js file found. This is where the Nagios server config is set.'); }
44 | settingsNagios = require('./settings-nagios');
45 | console.log('Nagios Server: ' + settingsNagios.nagiosServerHost);
46 | } catch (e) {
47 | console.log('****************************************************************************************************************');
48 | console.log('No settings-nagios.js found. This is where the webUI will store it\'s settings, once you save them to the server.');
49 | console.log('You can copy the file settings-nagios.dist.js to settings-nagios.js and edit the file manually. The settings-nagios.js file will not be overwritten by updates.');
50 | console.log('****************************************************************************************************************');
51 | }
52 | }
53 |
54 | //=============================================================================
55 | // Set up routes
56 | //=============================================================================
57 |
58 | app.use(cors());
59 |
60 | // to support JSON-encoded bodies
61 | app.use(bodyParser.json());
62 |
63 | // to support URL-encoded bodies
64 | app.use(bodyParser.urlencoded({
65 | extended: true
66 | }));
67 |
68 | app.use('/', express.static('../dist'));
69 |
70 | //***********************************************************************
71 | //* Start Proxy
72 | //***********************************************************************
73 |
74 | let proxyUrl = '';
75 | if (settingsNagios) { proxyUrl = settingsNagios.nagiosServerHost + settingsNagios.nagiosServerCgiPath; }
76 | console.log('Will proxy requests to ' + proxyUrl);
77 |
78 | var proxyOptions = {
79 | proxyReqPathResolver: function(req) {
80 | if (settings.debug) { console.log('Proxying to URL: ' + proxyUrl + '/' + req.params.resource); }
81 | //return require('url').parse(req.url).path;
82 | var url = require('url').parse(req.url);
83 | //console.log('proxy-' + url.path + '?' + url.query);
84 | //console.log(req.params);
85 | return proxyUrl + '/' + req.params.resource + '?' + url.query;
86 | //return url.path + '?' + url.query;
87 | },
88 | proxyReqOptDecorator: function(proxyReqOpts, originalReq) {
89 | proxyReqOpts.rejectUnauthorized = false
90 | return proxyReqOpts;
91 | }
92 | };
93 |
94 | // Add auth if it is enabled
95 | if (settingsNagios && settingsNagios.auth) {
96 | proxyOptions.headers = {
97 | Authorization: "Basic " + new Buffer.from(settingsNagios.username + ':' + settingsNagios.password).toString('base64')
98 | };
99 | //console.log('Adding proxy auth');
100 | //console.log(proxyOptions);
101 | }
102 |
103 | app.get('/nagios/:resource', proxy(proxyUrl + '/:resource', proxyOptions));
104 |
105 | //***********************************************************************
106 | //* End Proxy
107 | //***********************************************************************
108 |
109 | // Server listen on port
110 | app.listen(settings.serverPort);
111 |
112 | console.log('Listening on port ' + settings.serverPort + '...');
113 | console.log(' ');
114 | console.log(`This server will proxy and add auth to the Nagios server at`);
115 | console.log(`${settingsNagios.nagiosServerHost}${settingsNagios.nagiosServerCgiPath}`);
116 | console.log(' ');
117 | console.log(`In NagiosTV settings you can now set the Nagios cgi-bin path to:`);
118 | console.log(`http://
104 |
132 |
105 | {/*isSoft &&
116 |
117 |
118 | {formatDateTimeLocale(e.timestamp, locale, dateFormat)}
114 |
115 |
119 | {/* host */}
120 | {e.object_type === 1 && {e.name}}
121 | {/* service */}
122 | {e.object_type === 2 && {e.host_name}}
123 | {' '}
124 |
125 | {e.object_type === 2 && {e.description}}
126 | {e.plugin_output}
127 |
128 |
129 |
130 |
131 |
113 |
114 |
115 | {hostProblemsArray.length === 0 &&
121 | {translate('All', language)} {howManyHosts} {translate('hosts are UP', language)}{' '}
122 | }
123 |
124 |
125 |
161 | );
162 |
163 | };
164 |
165 | export default HostItems;
166 |
--------------------------------------------------------------------------------
126 |
131 |
132 |
127 | {howManyHosts - hostProblemsArray.length} of {howManyHosts} {translate('hosts are UP', language)}{' '}
128 | {howManyHidden} hidden
129 |
130 |
133 |
134 | {filteredHostProblemsArray.map((e, i) => {
135 | //console.log('HostItem item');
136 | //console.log(e, i);
137 |
138 | return (
139 |
147 |
155 | );
156 |
157 | })}
158 |
159 |
160 |