feat(cloud): Add custom cloud API URL configuration support

- Implement RPC methods to set, get, and reset cloud URL
- Update cloud registration to remove hardcoded cloud API URL
- Modify UI to allow configuring custom cloud API URL in developer settings
- Remove environment-specific cloud configuration files
- Simplify cloud URL configuration in UI config
This commit is contained in:
Adam Shiervani 2025-02-21 01:38:52 +01:00
parent de5403eada
commit 66b42a4858
15 changed files with 171 additions and 86 deletions

View File

@ -96,7 +96,6 @@ func handleCloudRegister(c *gin.Context) {
}
config.CloudToken = tokenResp.SecretToken
config.CloudURL = req.CloudAPI
provider, err := oidc.NewProvider(c, "https://accounts.google.com")
if err != nil {

View File

@ -730,6 +730,33 @@ func rpcSetSerialSettings(settings SerialSettings) error {
return nil
}
func rpcSetCloudUrl(url string) error {
if url == "" {
// Reset to default by removing from config
config.CloudURL = defaultConfig.CloudURL
} else {
config.CloudURL = url
}
if err := SaveConfig(); err != nil {
return fmt.Errorf("failed to save config: %w", err)
}
return nil
}
func rpcGetCloudUrl() (string, error) {
return config.CloudURL, nil
}
func rpcResetCloudUrl() error {
// Reset to default by removing from config
config.CloudURL = defaultConfig.CloudURL
if err := SaveConfig(); err != nil {
return fmt.Errorf("failed to reset cloud URL: %w", err)
}
return nil
}
var rpcHandlers = map[string]RPCHandler{
"ping": {Func: rpcPing},
"getDeviceID": {Func: rpcGetDeviceID},
@ -786,4 +813,7 @@ var rpcHandlers = map[string]RPCHandler{
"setATXPowerAction": {Func: rpcSetATXPowerAction, Params: []string{"action"}},
"getSerialSettings": {Func: rpcGetSerialSettings},
"setSerialSettings": {Func: rpcSetSerialSettings, Params: []string{"settings"}},
"setCloudUrl": {Func: rpcSetCloudUrl, Params: []string{"url"}},
"getCloudUrl": {Func: rpcGetCloudUrl},
"resetCloudUrl": {Func: rpcResetCloudUrl},
}

View File

@ -0,0 +1,4 @@
# No need for VITE_CLOUD_APP or VITE_SIGNAL_API, it's only needed for the device build
# We use this for all the cloud API requests from the browser
VITE_CLOUD_API=http://localhost:3000

4
ui/.env.cloud-production Normal file
View File

@ -0,0 +1,4 @@
# No need for VITE_CLOUD_APP or VITE_SIGNAL_API, it's only needed for the device build
# We use this for all the cloud API requests from the browser
VITE_CLOUD_API=https://api.jetkvm.com

4
ui/.env.cloud-staging Normal file
View File

@ -0,0 +1,4 @@
# No need for VITE_SIGNAL_API or VITE_CLOUD_APP it's only needed for the device build
# We use this for all the cloud API requests from the browser
VITE_CLOUD_API=https://staging-api.jetkvm.com

View File

@ -1,6 +0,0 @@
VITE_SIGNAL_API=http://localhost:3000
VITE_CLOUD_APP=http://localhost:5173
VITE_CLOUD_API=http://localhost:3000
VITE_JETKVM_HEAD=

View File

@ -1,6 +1,5 @@
VITE_SIGNAL_API= # Uses the KVM device's IP address as the signal API endpoint
# Uses the KVM device's IP address as the signal API endpoint
VITE_SIGNAL_API=
VITE_CLOUD_APP=https://app.jetkvm.com
VITE_CLOUD_API=https://api.jetkvm.com
VITE_JETKVM_HEAD=<script src="/device/ui-config.js"></script>
# Used in settings page to know where to link to when user wants to adopt a device to the cloud
VITE_CLOUD_APP=http://localhost:5173

View File

@ -1,6 +0,0 @@
VITE_SIGNAL_API=https://api.jetkvm.com
VITE_CLOUD_APP=https://app.jetkvm.com
VITE_CLOUD_API=https://api.jetkvm.com
VITE_JETKVM_HEAD=

View File

@ -1,4 +0,0 @@
VITE_SIGNAL_API=https://staging-api.jetkvm.com
VITE_CLOUD_APP=https://staging-app.jetkvm.com
VITE_CLOUD_API=https://staging-api.jetkvm.com

View File

@ -28,7 +28,6 @@
<title>JetKVM</title>
<link rel="stylesheet" href="/fonts/fonts.css" />
<link rel="icon" href="/favicon.png" />
%VITE_JETKVM_HEAD%
<script>
// Initial theme setup
document.documentElement.classList.toggle(

View File

@ -8,11 +8,11 @@
},
"scripts": {
"dev": "./dev_device.sh",
"dev:cloud": "vite dev --mode=development",
"dev:cloud": "vite dev --mode=cloud-development",
"build": "npm run build:prod",
"build:device": "tsc && vite build --mode=device --emptyOutDir",
"build:staging": "tsc && vite build --mode=staging",
"build:prod": "tsc && vite build --mode=production",
"build:staging": "tsc && vite build --mode=cloud-staging",
"build:prod": "tsc && vite build --mode=cloud-production",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},

View File

@ -27,6 +27,7 @@ import { LocalDevice } from "@routes/devices.$id";
import { useRevalidator } from "react-router-dom";
import { ShieldCheckIcon } from "@heroicons/react/20/solid";
import { CLOUD_APP, SIGNAL_API } from "@/ui.config";
import { InputFieldWithLabel } from "../InputField";
export function SettingsItem({
title,
@ -277,6 +278,51 @@ export default function SettingsSidebar() {
}
};
const [cloudUrl, setCloudUrl] = useState("");
useEffect(() => {
send("getCloudUrl", {}, resp => {
if ("error" in resp) return;
setCloudUrl(resp.result as string);
});
}, [send]);
const getCloudUrl = useCallback(() => {
send("getCloudUrl", {}, resp => {
if ("error" in resp) return;
setCloudUrl(resp.result as string);
});
}, [send]);
const handleCloudUrlChange = useCallback(
(url: string) => {
send("setCloudUrl", { url }, resp => {
if ("error" in resp) {
notifications.error(
`Failed to update cloud URL: ${resp.error.data || "Unknown error"}`,
);
return;
}
getCloudUrl();
notifications.success("Cloud URL updated successfully");
});
},
[send, getCloudUrl],
);
const handleResetCloudUrl = useCallback(() => {
send("resetCloudUrl", {}, resp => {
if ("error" in resp) {
notifications.error(
`Failed to reset cloud URL: ${resp.error.data || "Unknown error"}`,
);
return;
}
getCloudUrl();
notifications.success("Cloud URL reset to default successfully");
});
}, [send, getCloudUrl]);
useEffect(() => {
getCloudState();
@ -363,7 +409,14 @@ export default function SettingsSidebar() {
if ("error" in resp) return;
setUsbEmulationEnabled(resp.result as boolean);
});
}, [getCloudState, send, setBacklightSettings, setDeveloperMode, setHideCursor, setJiggler]);
}, [
getCloudState,
send,
setBacklightSettings,
setDeveloperMode,
setHideCursor,
setJiggler,
]);
const getDevice = useCallback(async () => {
try {
@ -920,24 +973,55 @@ export default function SettingsSidebar() {
</SettingsItem>
{settings.developerMode && (
<div className="space-y-4">
<TextAreaWithLabel
label="SSH Public Key"
value={sshKey || ""}
rows={3}
onChange={e => handleSSHKeyChange(e.target.value)}
placeholder="Enter your SSH public key"
/>
<p className="text-xs text-slate-600 dark:text-slate-400">
The default SSH user is <strong>root</strong>.
</p>
<div className="flex items-center gap-x-2">
<Button
size="SM"
theme="primary"
text="Update SSH Key"
onClick={handleUpdateSSHKey}
<div>
<div className="space-y-4">
<TextAreaWithLabel
label="SSH Public Key"
value={sshKey || ""}
rows={3}
onChange={e => handleSSHKeyChange(e.target.value)}
placeholder="Enter your SSH public key"
/>
<p className="text-xs text-slate-600 dark:text-slate-400">
The default SSH user is <strong>root</strong>.
</p>
<div className="flex items-center gap-x-2">
<Button
size="SM"
theme="primary"
text="Update SSH Key"
onClick={handleUpdateSSHKey}
/>
</div>
</div>
<div className="mt-4 space-y-4">
<SettingsItem
title="Cloud API URL"
description="Connect to a custom JetKVM Cloud API"
/>
<InputFieldWithLabel
size="SM"
label="Cloud URL"
value={cloudUrl}
onChange={e => setCloudUrl(e.target.value)}
placeholder="https://api.jetkvm.com"
/>
<div className="flex items-center gap-x-2">
<Button
size="SM"
theme="primary"
text="Save Cloud URL"
onClick={() => handleCloudUrlChange(cloudUrl)}
/>
<Button
size="SM"
theme="light"
text="Restore to default"
onClick={handleResetCloudUrl}
/>
</div>
</div>
</div>
)}

View File

@ -1,6 +1,6 @@
import { LoaderFunctionArgs, redirect } from "react-router-dom";
import api from "../api";
import { CLOUD_API, CLOUD_APP, SIGNAL_API } from "@/ui.config";
import { CLOUD_APP, SIGNAL_API } from "@/ui.config";
const loader = async ({ request }: LoaderFunctionArgs) => {
const url = new URL(request.url);
@ -11,15 +11,11 @@ const loader = async ({ request }: LoaderFunctionArgs) => {
const oidcGoogle = searchParams.get("oidcGoogle");
const clientId = searchParams.get("clientId");
const res = await api.POST(
`${SIGNAL_API}/cloud/register`,
{
token: tempToken,
cloudApi: CLOUD_API,
oidcGoogle,
clientId,
},
);
const res = await api.POST(`${SIGNAL_API}/cloud/register`, {
token: tempToken,
oidcGoogle,
clientId,
});
if (!res.ok) throw new Error("Failed to register device");
return redirect(CLOUD_APP + `/devices/${deviceId}/setup`);

View File

@ -1,23 +1,3 @@
interface JetKVMConfig {
CLOUD_API?: string;
CLOUD_APP?: string;
DEVICE_VERSION?: string;
}
declare global {
interface Window { JETKVM_CONFIG?: JetKVMConfig; }
}
const getAppURL = (api_url?: string) => {
if (!api_url) {
return;
}
const url = new URL(api_url);
url.host = url.host.replace(/api\./, "app.");
// remove the ending slash
return url.toString().replace(/\/$/, "");
}
export const CLOUD_API = window.JETKVM_CONFIG?.CLOUD_API || import.meta.env.VITE_CLOUD_API;
export const CLOUD_APP = window.JETKVM_CONFIG?.CLOUD_APP || getAppURL(CLOUD_API) || import.meta.env.VITE_CLOUD_APP;
export const CLOUD_API = import.meta.env.VITE_CLOUD_API;
export const CLOUD_APP = import.meta.env.VITE_CLOUD_APP;
export const SIGNAL_API = import.meta.env.VITE_SIGNAL_API;

View File

@ -9,7 +9,7 @@ declare const process: {
};
export default defineConfig(({ mode, command }) => {
const isCloud = mode === "production";
const isCloud = mode.indexOf("cloud") !== -1;
const onDevice = mode === "device";
const { JETKVM_PROXY_URL } = process.env;
@ -18,15 +18,17 @@ export default defineConfig(({ mode, command }) => {
build: { outDir: isCloud ? "dist" : "../static" },
server: {
host: "0.0.0.0",
proxy: JETKVM_PROXY_URL ? {
'/me': JETKVM_PROXY_URL,
'/device': JETKVM_PROXY_URL,
'/webrtc': JETKVM_PROXY_URL,
'/auth': JETKVM_PROXY_URL,
'/storage': JETKVM_PROXY_URL,
'/cloud': JETKVM_PROXY_URL,
} : undefined
proxy: JETKVM_PROXY_URL
? {
"/me": JETKVM_PROXY_URL,
"/device": JETKVM_PROXY_URL,
"/webrtc": JETKVM_PROXY_URL,
"/auth": JETKVM_PROXY_URL,
"/storage": JETKVM_PROXY_URL,
"/cloud": JETKVM_PROXY_URL,
}
: undefined,
},
base: onDevice && command === 'build' ? "/static" : "/",
base: onDevice && command === "build" ? "/static" : "/",
};
});