Showing high load icon when load is not low. This load icon is only shown if the temperature icon is not displayed.

app/src/components/Common.js

@@ -19,6 +19,7 @@ import {
     useCPUTemperature,
     useDirectories,
     useHotspot,
+    useLoad,
     useSearchDirectories,
     useSearchOrder,
     useSettings,
@@ -952,25 +953,38 @@ export function HotspotStatusIcon() {
     </>
 }
 
-export function CPUTemperatureIcon({size = 'large'}) {
+export function CPUTemperatureIcon({size = 'large', fallback = null}) {
     // Returns an Icon only if temperature is too high.
-    const {temperature, high_temperature, critical_temperature} = useCPUTemperature();
+    const {temperature, highTemperature, criticalTemperature} = useCPUTemperature();
 
-    if (temperature === null || temperature < high_temperature) {
+    if (temperature === null || temperature < highTemperature) {
         // Temperature is not a problem.
-        return null;
+        return fallback;
     }
 
-    let icon;
-    if (temperature >= critical_temperature) {
-        icon = <Icon data-testid='cpuTemperatureIcon' name='thermometer' size={size} color='red'/>;
-    } else if (temperature >= high_temperature) {
-        icon = <Icon data-testid='cpuTemperatureIcon' name='thermometer half' size={size} color='yellow'/>;
-    }
+    let icon = temperature >= criticalTemperature ?
+        <Icon data-testid='cpuTemperatureIcon' name='thermometer' size={size} color='red'/>
+        : <Icon data-testid='cpuTemperatureIcon' name='thermometer half' size={size} color='yellow'/>;
+    icon = <Link to='/admin/status'>{icon}</Link>;
 
     return <Popup content={`CPU: ${temperature}°C`} trigger={icon}/>
 }
 
+export function SystemLoadIcon({size = 'large', fallback = null}) {
+    const {minute_1, mediumLoad, highLoad} = useLoad();
+
+    if (!mediumLoad && !highLoad) {
+        return fallback;
+    }
+
+    // Only return the icon if the load is not low.
+    const color = highLoad ? 'red' : 'yellow';
+    let icon = <Link to='/admin/status'>
+        <Icon name='tachometer alternate' size={size} color={color}/>
+    </Link>;
+    return <Popup content={`Load: ${minute_1}`} trigger={icon}/>
+}
+
 export function useTitle(title) {
     const documentDefined = typeof document !== 'undefined';
     const originalTitle = React.useRef(documentDefined ? document.title : null);

app/src/components/Common.test.js

@@ -3,6 +3,14 @@ import {getByTestId, queryByTestId, render, screen} from '@testing-library/react
 import {CPUTemperatureIcon, DisableDownloadsToggle} from "./Common";
 import {StatusContext} from "../contexts/contexts";
 import {startDownloads} from "../components/Common";
+import {BrowserRouter} from "react-router-dom";
+
+const mockedUseHref = jest.fn();
+
+jest.mock("react-router-dom", () => ({
+    ...(jest.requireActual("react-router-dom")),
+    useHref: () => mockedUseHref
+}));
 
 test('DownloadsToggle is off when loading', async () => {
     const statusValue = {status: null, fetchStatus: null};
@@ -58,7 +66,9 @@ test('DownloadsToggle is on if downloading is On', async () => {
 test('CPUTemperatureIcon high', async () => {
     const statusValue = {status: {cpu_info: {temperature: 80, high_temperature: 75, critical_temperature: 90}}};
     const {container} = render(<StatusContext.Provider value={statusValue}>
-        <CPUTemperatureIcon/>
+        <BrowserRouter>
+            <CPUTemperatureIcon/>
+        </BrowserRouter>
     </StatusContext.Provider>);
 
     const icon = getByTestId(container, 'cpuTemperatureIcon');
@@ -69,7 +79,9 @@ test('CPUTemperatureIcon high', async () => {
 test('CPUTemperatureIcon critical', async () => {
     const statusValue = {status: {cpu_info: {temperature: 100, high_temperature: 75, critical_temperature: 90}}};
     const {container} = render(<StatusContext.Provider value={statusValue}>
-        <CPUTemperatureIcon/>
+        <BrowserRouter>
+            <CPUTemperatureIcon/>
+        </BrowserRouter>
     </StatusContext.Provider>);
 
     const icon = getByTestId(container, 'cpuTemperatureIcon');

app/src/components/Nav.js

@@ -1,9 +1,9 @@
 import React from "react";
 import {NavLink} from "react-router-dom";
 import {Dropdown, Menu} from "semantic-ui-react";
-import {Media, StatusContext, ThemeContext} from "../contexts/contexts";
+import {Media, ThemeContext} from "../contexts/contexts";
 import Icon from "semantic-ui-react/dist/commonjs/elements/Icon";
-import {DarkModeToggle, HotspotStatusIcon, NAME, CPUTemperatureIcon} from "./Common";
+import {CPUTemperatureIcon, DarkModeToggle, HotspotStatusIcon, NAME, SystemLoadIcon} from "./Common";
 import {ShareButton} from "./Share";
 import {useWROLMode} from "../hooks/customHooks";
 
@@ -66,8 +66,12 @@ export function NavBar() {
     const homeLink = <NavLink className='item' to='/' style={{paddingTop: 0, paddingBottom: 0}}>
         {topNavText}
     </NavLink>;
+
+    // Display the temperature icon first because it can cause the system to throttle.
+    const warningIcon = <CPUTemperatureIcon fallback={<SystemLoadIcon/>}/>
+
     const icons = <React.Fragment>
-        <NavIconWrapper><CPUTemperatureIcon/></NavIconWrapper>
+        <NavIconWrapper>{warningIcon}</NavIconWrapper>
         <NavIconWrapper><ShareButton/></NavIconWrapper>
         <NavIconWrapper><HotspotStatusIcon/></NavIconWrapper>
         <NavIconWrapper><DarkModeToggle/></NavIconWrapper>

app/src/hooks/customHooks.js

@@ -737,11 +737,43 @@ export const useStatusFlag = (flag) => {
 
 export const useCPUTemperature = () => {
     const {status} = React.useContext(StatusContext);
-    const temperature = status && status['cpu_info'] ? status['cpu_info']['temperature'] : 0;
-    const high_temperature = status && status['cpu_info'] ? status['cpu_info']['high_temperature'] : 75;
-    const critical_temperature = status && status['cpu_info'] ? status['cpu_info']['critical_temperature'] : 85;
+    let temperature = 0;
+    let highTemperature = 75;
+    let criticalTemperature = 85;
 
-    return {temperature, high_temperature, critical_temperature}
+    if (status && status['cpu_info']) {
+        temperature = status['cpu_info']['temperature'];
+        highTemperature = status['cpu_info']['high_temperature'];
+        criticalTemperature = status['cpu_info']['critical_temperature'];
+    }
+
+    return {temperature, highTemperature, criticalTemperature}
+}
+
+export const useLoad = () => {
+    const {status} = React.useContext(StatusContext);
+    let minute_1;
+    let minute_5;
+    let minute_15;
+    let mediumLoad = false;
+    let highLoad = false;
+    let cores;
+
+    if (status && status['load']) {
+        minute_1 = status['load']['minute_1'];
+        minute_5 = status['load']['minute_5'];
+        minute_15 = status['load']['minute_15'];
+
+        cores = status['cpu_info']['cores'];
+        const quarter = cores / 4;
+        if (cores && minute_1 >= (quarter * 3)) {
+            highLoad = true;
+        } else if (cores && minute_1 >= (quarter * 2)) {
+            mediumLoad = true;
+        }
+    }
+
+    return {minute_1, minute_5, minute_15, mediumLoad, highLoad, cores};
 }