Tweaks to showing new version available

- Added frontend translation for english
- Moved frontend api logic to hook and backend api space
- Added swagger schema for the new api endpoint
- Moved backend logic to its own internal file
- Added user agent header to github api check
- Added cypress integration test for version check api
- Added a memory cache item from github check to avoid hitting it too
  much
This commit is contained in:
Jamie Curnow
2025-11-13 11:17:44 +10:00
parent 8838dabe8a
commit cf7306e766
15 changed files with 200 additions and 95 deletions

View File

@@ -0,0 +1,84 @@
import https from "node:https";
import { ProxyAgent } from "proxy-agent";
import { debug, remoteVersion as logger } from "../logger.js";
import pjson from "../package.json" with { type: "json" };
const VERSION_URL = "https://api.github.com/repos/NginxProxyManager/nginx-proxy-manager/releases/latest";
const internalRemoteVersion = {
cache_timeout: 1000 * 60 * 15, // 15 minutes
last_result: null,
last_fetch_time: null,
/**
* Fetch the latest version info, using a cached result if within the cache timeout period.
* @return {Promise<{current: string, latest: string, update_available: boolean}>} Version info
*/
get: async () => {
if (
!internalRemoteVersion.last_result ||
!internalRemoteVersion.last_fetch_time ||
Date.now() - internalRemoteVersion.last_fetch_time > internalRemoteVersion.cache_timeout
) {
const raw = await internalRemoteVersion.fetchUrl(VERSION_URL);
const data = JSON.parse(raw);
internalRemoteVersion.last_result = data;
internalRemoteVersion.last_fetch_time = Date.now();
} else {
debug(logger, "Using cached remote version result");
}
const latestVersion = internalRemoteVersion.last_result.tag_name;
const version = pjson.version.split("-").shift().split(".");
const currentVersion = `v${version[0]}.${version[1]}.${version[2]}`;
return {
current: currentVersion,
latest: latestVersion,
update_available: internalRemoteVersion.compareVersions(currentVersion, latestVersion),
};
},
fetchUrl: (url) => {
const agent = new ProxyAgent();
const headers = {
"User-Agent": `NginxProxyManager v${pjson.version}`,
};
return new Promise((resolve, reject) => {
logger.info(`Fetching ${url}`);
return https
.get(url, { agent, headers }, (res) => {
res.setEncoding("utf8");
let raw_data = "";
res.on("data", (chunk) => {
raw_data += chunk;
});
res.on("end", () => {
resolve(raw_data);
});
})
.on("error", (err) => {
reject(err);
});
});
},
compareVersions: (current, latest) => {
const cleanCurrent = current.replace(/^v/, "");
const cleanLatest = latest.replace(/^v/, "");
const currentParts = cleanCurrent.split(".").map(Number);
const latestParts = cleanLatest.split(".").map(Number);
for (let i = 0; i < Math.max(currentParts.length, latestParts.length); i++) {
const curr = currentParts[i] || 0;
const lat = latestParts[i] || 0;
if (lat > curr) return true;
if (lat < curr) return false;
}
return false;
},
};
export default internalRemoteVersion;

View File

@@ -15,6 +15,7 @@ const certbot = new signale.Signale({ scope: "Certbot ", ...opts });
const importer = new signale.Signale({ scope: "Importer ", ...opts });
const setup = new signale.Signale({ scope: "Setup ", ...opts });
const ipRanges = new signale.Signale({ scope: "IP Ranges", ...opts });
const remoteVersion = new signale.Signale({ scope: "Remote Version", ...opts });
const debug = (logger, ...args) => {
if (isDebugMode()) {
@@ -22,4 +23,4 @@ const debug = (logger, ...args) => {
}
};
export { debug, global, migrate, express, access, nginx, ssl, certbot, importer, setup, ipRanges };
export { debug, global, migrate, express, access, nginx, ssl, certbot, importer, setup, ipRanges, remoteVersion };

View File

@@ -1,8 +1,6 @@
import express from "express";
import internalRemoteVersion from "../internal/remote-version.js";
import { debug, express as logger } from "../logger.js";
import pjson from "../package.json" with { type: "json" };
import https from "node:https";
import { ProxyAgent } from "proxy-agent";
const router = express.Router({
caseSensitive: true,
@@ -24,78 +22,19 @@ router
*
* Check for available updates
*/
.get(async (req, res, next) => {
.get(async (req, res, _next) => {
try {
const agent = new ProxyAgent();
const url = "https://api.github.com/repos/NginxProxyManager/nginx-proxy-manager/releases/latest";
const data = await new Promise((resolve, reject) => {
https
.get(url, { agent }, (response) => {
if (response.statusCode !== 200) {
reject(new Error(`GitHub API returned ${response.statusCode}`));
return;
}
response.setEncoding("utf8");
let raw_data = "";
response.on("data", (chunk) => {
raw_data += chunk;
});
response.on("end", () => {
try {
resolve(JSON.parse(raw_data));
} catch (err) {
reject(err);
}
});
})
.on("error", (err) => {
reject(err);
});
});
const latestVersion = data.tag_name;
const version = pjson.version.split("-").shift().split(".");
const currentVersion = `v${version[0]}.${version[1]}.${version[2]}`;
res.status(200).send({
current: currentVersion,
latest: latestVersion,
updateAvailable: compareVersions(currentVersion, latestVersion),
});
const data = await internalRemoteVersion.get();
res.status(200).send(data);
} catch (error) {
debug(logger, `${req.method.toUpperCase()} ${req.path}: ${error}`);
// Send 200 even though there's an error to avoid triggering update checks repeatedly
res.status(200).send({
current: null,
latest: null,
updateAvailable: false,
update_available: false,
});
}
});
/**
* Compare two version strings
*
*/
function compareVersions(current, latest) {
const cleanCurrent = current.replace(/^v/, "");
const cleanLatest = latest.replace(/^v/, "");
const currentParts = cleanCurrent.split(".").map(Number);
const latestParts = cleanLatest.split(".").map(Number);
for (let i = 0; i < Math.max(currentParts.length, latestParts.length); i++) {
const curr = currentParts[i] || 0;
const lat = latestParts[i] || 0;
if (lat > curr) return true;
if (lat < curr) return false;
}
return false;
}
export default router;

View File

@@ -0,0 +1,25 @@
{
"type": "object",
"description": "Check Version object",
"additionalProperties": false,
"required": ["current", "latest", "update_available"],
"properties": {
"current": {
"type": "string",
"description": "Current version string",
"example": "v2.10.1",
"nullable": true
},
"latest": {
"type": "string",
"description": "Latest version string",
"example": "v2.13.4",
"nullable": true
},
"update_available": {
"type": "boolean",
"description": "Whether there's an update available",
"example": true
}
}
}

View File

@@ -0,0 +1,26 @@
{
"operationId": "checkVersion",
"summary": "Returns any new version data from github",
"tags": ["public"],
"responses": {
"200": {
"description": "200 response",
"content": {
"application/json": {
"examples": {
"default": {
"value": {
"current": "v2.12.0",
"latest": "v2.13.4",
"update_available": true
}
}
},
"schema": {
"$ref": "../../../components/check-version-object.json"
}
}
}
}
}
}

View File

@@ -293,6 +293,11 @@
"$ref": "./paths/tokens/post.json"
}
},
"/version/check": {
"get": {
"$ref": "./paths/version/check/get.json"
}
},
"/users": {
"get": {
"$ref": "./paths/users/get.json"

View File

@@ -0,0 +1,8 @@
import * as api from "./base";
import type { VersionCheckResponse } from "./responseTypes";
export async function checkVersion(): Promise<VersionCheckResponse> {
return await api.get({
url: "/version/check",
});
}

View File

@@ -1,3 +1,4 @@
export * from "./checkVersion";
export * from "./createAccessList";
export * from "./createCertificate";
export * from "./createDeadHost";

View File

@@ -19,3 +19,9 @@ export interface ValidatedCertificateResponse {
export interface LoginAsTokenResponse extends TokenResponse {
user: User;
}
export interface VersionCheckResponse {
current: string | null;
latest: string | null;
updateAvailable: boolean;
}

View File

@@ -1,11 +1,9 @@
import { useEffect, useState } from "react";
import { useHealth } from "src/hooks";
import { useCheckVersion, useHealth } from "src/hooks";
import { T } from "src/locale";
export function SiteFooter() {
const health = useHealth();
const [latestVersion, setLatestVersion] = useState<string | null>(null);
const [isNewVersionAvailable, setIsNewVersionAvailable] = useState(false);
const { data: versionData } = useCheckVersion();
const getVersion = () => {
if (!health.data) {
@@ -15,25 +13,6 @@ export function SiteFooter() {
return `v${v.major}.${v.minor}.${v.revision}`;
};
useEffect(() => {
const checkForUpdates = async () => {
try {
const response = await fetch("/api/version/check");
if (response.ok) {
const data = await response.json();
setLatestVersion(data.latest);
setIsNewVersionAvailable(data.updateAvailable);
}
} catch (error) {
console.debug("Could not check for updates:", error);
}
};
if (health.data) {
checkForUpdates();
}
}, [health.data]);
return (
<footer className="footer d-print-none py-3">
<div className="container-xl">
@@ -77,16 +56,16 @@ export function SiteFooter() {
{getVersion()}{" "}
</a>
</li>
{isNewVersionAvailable && latestVersion && (
{versionData?.updateAvailable && versionData?.latest && (
<li className="list-inline-item">
<a
href={`https://github.com/NginxProxyManager/nginx-proxy-manager/releases/tag/${latestVersion}`}
href={`https://github.com/NginxProxyManager/nginx-proxy-manager/releases/tag/${versionData.latest}`}
className="link-warning fw-bold"
target="_blank"
rel="noopener"
title={`New version ${latestVersion} is available`}
title={`New version ${versionData.latest} is available`}
>
Update Available: ({latestVersion})
<T id="update-available" data={{ latestVersion: versionData.latest }} />
</a>
</li>
)}

View File

@@ -4,6 +4,7 @@ export * from "./useAuditLog";
export * from "./useAuditLogs";
export * from "./useCertificate";
export * from "./useCertificates";
export * from "./useCheckVersion";
export * from "./useDeadHost";
export * from "./useDeadHosts";
export * from "./useDnsProviders";

View File

@@ -0,0 +1,18 @@
import { useQuery } from "@tanstack/react-query";
import { checkVersion, type VersionCheckResponse } from "src/api/backend";
const fetchVersion = () => checkVersion();
const useCheckVersion = (options = {}) => {
return useQuery<VersionCheckResponse, Error>({
queryKey: ["version-check"],
queryFn: fetchVersion,
refetchOnWindowFocus: false,
retry: 5,
refetchInterval: 30 * 1000, // 30 seconds
staleTime: 5 * 60 * 1000, // 5 mins
...options,
});
};
export { fetchVersion, useCheckVersion };

View File

@@ -197,6 +197,7 @@
"streams.tcp": "TCP",
"streams.udp": "UDP",
"test": "Test",
"update-available": "Update Available: {latestVersion}",
"user": "User",
"user.change-password": "Change Password",
"user.confirm-password": "Confirm Password",

View File

@@ -593,6 +593,9 @@
"test": {
"defaultMessage": "Test"
},
"update-available": {
"defaultMessage": "Update Available: {latestVersion}"
},
"user": {
"defaultMessage": "User"
},

View File

@@ -17,4 +17,12 @@ describe('Basic API checks', () => {
expect(data.openapi).to.be.equal('3.1.0');
});
});
it('Should return a valid payload for version check', () => {
cy.task('backendApiGet', {
path: `/api/version/check?ts=${Date.now()}`,
}).then((data) => {
cy.validateSwaggerSchema('get', 200, '/version/check', data);
});
});
});