mirror of https://github.com/jetkvm/kvm.git
Compare commits
3 Commits
41aeb59adb
...
3c0a33baf4
| Author | SHA1 | Date |
|---|---|---|
Adam Shiervani
|
3c0a33baf4 | |
Marc Brooks
|
05bf61152b | |
|
Adam Shiervani
|
3bd9f841e0 |
|
|
@ -1,25 +1,25 @@
|
|||
import Card from "@components/Card";
|
||||
|
||||
export interface CustomTooltipProps {
|
||||
payload: { payload: { date: number; stat: number }; unit: string }[];
|
||||
payload: { payload: { date: number; metric: number }; unit: string }[];
|
||||
}
|
||||
|
||||
export default function CustomTooltip({ payload }: CustomTooltipProps) {
|
||||
if (payload?.length) {
|
||||
const toolTipData = payload[0];
|
||||
const { date, stat } = toolTipData.payload;
|
||||
const { date, metric } = toolTipData.payload;
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<div className="p-2 text-black dark:text-white">
|
||||
<div className="font-semibold">
|
||||
<div className="px-2 py-1.5 text-black dark:text-white">
|
||||
<div className="text-[13px] font-semibold">
|
||||
{new Date(date * 1000).toLocaleTimeString()}
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-x-1">
|
||||
<div className="h-[2px] w-2 bg-blue-700" />
|
||||
<span >
|
||||
{stat} {toolTipData?.unit}
|
||||
<span className="text-[13px]">
|
||||
{metric} {toolTipData?.unit}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
import { ComponentProps } from "react";
|
||||
import { cva, cx } from "cva";
|
||||
|
||||
import { someIterable } from "../utils";
|
||||
|
||||
import { GridCard } from "./Card";
|
||||
import StatChart from "./StatChart";
|
||||
import MetricsChart from "./MetricsChart";
|
||||
|
||||
interface ChartPoint {
|
||||
date: number;
|
||||
stat: number | null;
|
||||
metric: number | null;
|
||||
}
|
||||
|
||||
interface MetricProps<T, K extends keyof T> {
|
||||
|
|
@ -17,45 +19,42 @@ interface MetricProps<T, K extends keyof T> {
|
|||
data?: ChartPoint[];
|
||||
gate?: Map<number, unknown>;
|
||||
supported?: boolean;
|
||||
map?: (p: { date: number; stat: T[K] | null }) => ChartPoint;
|
||||
map?: (p: { date: number; metric: number | null }) => ChartPoint;
|
||||
domain?: [number, number];
|
||||
unit?: string;
|
||||
unit: string;
|
||||
heightClassName?: string;
|
||||
referenceValue?: number;
|
||||
badge?: ComponentProps<typeof MetricHeader>["badge"];
|
||||
badgeTheme?: ComponentProps<typeof MetricHeader>["badgeTheme"];
|
||||
}
|
||||
|
||||
/* eslint-disable-next-line */
|
||||
export function createChartArray<T, K extends keyof T>(
|
||||
stream: Map<number, T>,
|
||||
metric: K,
|
||||
): { date: number; stat: T[K] | null }[] {
|
||||
const stat = Array.from(stream).map(([key, stats]) => {
|
||||
return { date: key, stat: stats[metric] };
|
||||
});
|
||||
|
||||
// Sort the dates to ensure they are in chronological order
|
||||
const sortedStat = stat.map(x => x.date).sort((a, b) => a - b);
|
||||
|
||||
// Determine the earliest statistic date
|
||||
const earliestStat = sortedStat[0];
|
||||
|
||||
// Current time in seconds since the Unix epoch
|
||||
metrics: Map<number, T>,
|
||||
metricName: K,
|
||||
) {
|
||||
const result: { date: number; metric: number | null }[] = [];
|
||||
const iter = metrics.entries();
|
||||
let next = iter.next() as IteratorResult<[number, T]>;
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
|
||||
// Determine the starting point for the chart data
|
||||
const firstChartDate = earliestStat ? Math.min(earliestStat, now - 120) : now - 120;
|
||||
// We want 120 data points, in the chart.
|
||||
const firstDate = Math.min(next.value?.[0] ?? now, now - 120);
|
||||
|
||||
// Generate the chart array for the range between 'firstChartDate' and 'now'
|
||||
return Array.from({ length: now - firstChartDate }, (_, i) => {
|
||||
const currentDate = firstChartDate + i;
|
||||
return {
|
||||
date: currentDate,
|
||||
// Find the statistic for 'currentDate', or use the last known statistic if none exists for that date
|
||||
stat: stat.find(x => x.date === currentDate)?.stat ?? null,
|
||||
};
|
||||
});
|
||||
for (let t = firstDate; t < now; t++) {
|
||||
while (!next.done && next.value[0] < t) next = iter.next();
|
||||
const has = !next.done && next.value[0] === t;
|
||||
|
||||
let metric = null;
|
||||
if (has) metric = next.value[1][metricName] as number;
|
||||
result.push({ date: t, metric });
|
||||
|
||||
if (has) next = iter.next();
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
const theme = {
|
||||
light:
|
||||
"bg-white text-black border border-slate-800/20 dark:border dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300",
|
||||
|
|
@ -110,26 +109,30 @@ export function Metric<T, K extends keyof T>({
|
|||
domain = [0, 600],
|
||||
unit = "",
|
||||
heightClassName = "h-[127px]",
|
||||
referenceValue,
|
||||
badge,
|
||||
badgeTheme,
|
||||
}: MetricProps<T, K>) {
|
||||
const ready = gate ? gate.size > 0 : stream ? stream.size > 0 : true;
|
||||
const supportedFinal =
|
||||
supported ??
|
||||
(stream && metric
|
||||
? Array.from(stream).some(([, s]) => s[metric] !== undefined)
|
||||
: true);
|
||||
(stream && metric ? someIterable(stream, ([, s]) => s[metric] !== undefined) : true);
|
||||
|
||||
const raw = stream && metric ? createChartArray(stream, metric) : [];
|
||||
const dataFinal: ChartPoint[] =
|
||||
data ??
|
||||
(map
|
||||
? raw.map(map)
|
||||
: raw.map(x => ({
|
||||
date: x.date,
|
||||
stat: typeof x.stat === "number" ? (x.stat as unknown as number) : null,
|
||||
})));
|
||||
// Either we let the consumer provide their own chartArray, or we create one from the stream and metric.
|
||||
const raw = data ?? ((stream && metric && createChartArray(stream, metric)) || []);
|
||||
|
||||
// If the consumer provides a map function, we apply it to the raw data.
|
||||
const dataFinal: ChartPoint[] = map ? raw.map(map) : raw;
|
||||
const recent = dataFinal
|
||||
.slice(-(raw.length - 1))
|
||||
.filter(x => x.metric != null) as ChartPoint[];
|
||||
|
||||
// Average the recent values
|
||||
const computedReferenceValue =
|
||||
recent.length > 0
|
||||
? Math.round(
|
||||
recent.reduce((sum, x) => sum + (x.metric as number), 0) / recent.length,
|
||||
)
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
|
|
@ -149,11 +152,11 @@ export function Metric<T, K extends keyof T>({
|
|||
<p className="text-slate-700">Waiting for data...</p>
|
||||
</div>
|
||||
) : supportedFinal ? (
|
||||
<StatChart
|
||||
<MetricsChart
|
||||
data={dataFinal}
|
||||
domain={domain}
|
||||
unit={unit}
|
||||
referenceValue={referenceValue}
|
||||
referenceValue={computedReferenceValue}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex flex-col items-center space-y-1">
|
||||
|
|
|
|||
|
|
@ -12,13 +12,13 @@ import {
|
|||
|
||||
import CustomTooltip, { CustomTooltipProps } from "@components/CustomTooltip";
|
||||
|
||||
export default function StatChart({
|
||||
export default function MetricsChart({
|
||||
data,
|
||||
domain,
|
||||
unit,
|
||||
referenceValue,
|
||||
}: {
|
||||
data: { date: number; stat: number | null | undefined }[];
|
||||
data: { date: number; metric: number | null | undefined }[];
|
||||
domain?: [string | number, string | number];
|
||||
unit?: string;
|
||||
referenceValue?: number;
|
||||
|
|
@ -33,7 +33,7 @@ export default function StatChart({
|
|||
strokeLinecap="butt"
|
||||
stroke="rgba(30, 41, 59, 0.1)"
|
||||
/>
|
||||
{referenceValue && (
|
||||
{referenceValue !== undefined && (
|
||||
<ReferenceLine
|
||||
y={referenceValue}
|
||||
strokeDasharray="3 3"
|
||||
|
|
@ -64,7 +64,7 @@ export default function StatChart({
|
|||
.map(x => x.date)}
|
||||
/>
|
||||
<YAxis
|
||||
dataKey="stat"
|
||||
dataKey="metric"
|
||||
axisLine={false}
|
||||
orientation="right"
|
||||
tick={{
|
||||
|
|
@ -73,6 +73,7 @@ export default function StatChart({
|
|||
fill: "rgba(107, 114, 128, 1)",
|
||||
}}
|
||||
padding={{ top: 0, bottom: 0 }}
|
||||
allowDecimals
|
||||
tickLine={false}
|
||||
unit={unit}
|
||||
domain={domain || ["auto", "auto"]}
|
||||
|
|
@ -87,7 +88,7 @@ export default function StatChart({
|
|||
<Line
|
||||
type="monotone"
|
||||
isAnimationActive={false}
|
||||
dataKey="stat"
|
||||
dataKey="metric"
|
||||
stroke="rgb(29 78 216)"
|
||||
strokeLinecap="round"
|
||||
strokeWidth={2}
|
||||
|
|
@ -127,7 +127,7 @@ export function UsbDeviceSetting() {
|
|||
);
|
||||
|
||||
const handlePresetChange = useCallback(
|
||||
async (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
(e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
const newPreset = e.target.value;
|
||||
setSelectedPreset(newPreset);
|
||||
|
||||
|
|
|
|||
|
|
@ -137,7 +137,7 @@ export function UsbInfoSetting() {
|
|||
);
|
||||
|
||||
useEffect(() => {
|
||||
send("getDeviceID", {}, async (resp: JsonRpcResponse) => {
|
||||
send("getDeviceID", {}, (resp: JsonRpcResponse) => {
|
||||
if ("error" in resp) {
|
||||
return notifications.error(
|
||||
`Failed to get device ID: ${resp.error.data || "Unknown error"}`,
|
||||
|
|
|
|||
|
|
@ -411,7 +411,7 @@ export default function WebRTCVideo() {
|
|||
);
|
||||
|
||||
const keyDownHandler = useCallback(
|
||||
async (e: KeyboardEvent) => {
|
||||
(e: KeyboardEvent) => {
|
||||
e.preventDefault();
|
||||
const prev = useHidStore.getState();
|
||||
let code = e.code;
|
||||
|
|
|
|||
|
|
@ -5,19 +5,13 @@ import { useRTCStore, useUiStore } from "@/hooks/stores";
|
|||
|
||||
import { createChartArray, Metric } from "../Metric";
|
||||
import { SettingsSectionHeader } from "../SettingsSectionHeader";
|
||||
import { someIterable } from "../../utils";
|
||||
|
||||
export default function ConnectionStatsSidebar() {
|
||||
const inboundVideoRtpStats = useRTCStore(state => state.inboundRtpStats);
|
||||
const iceCandidatePairStats = useRTCStore(state => state.candidatePairStats);
|
||||
const setSidebarView = useUiStore(state => state.setSidebarView);
|
||||
|
||||
function isMetricSupported<T, K extends keyof T>(
|
||||
stream: Map<number, T>,
|
||||
metric: K,
|
||||
): boolean {
|
||||
return Array.from(stream).some(([, stat]) => stat[metric] !== undefined);
|
||||
}
|
||||
|
||||
const appendInboundVideoRtpStats = useRTCStore(state => state.appendInboundRtpStats);
|
||||
const appendIceCandidatePair = useRTCStore(state => state.appendCandidatePairStats);
|
||||
const appendDiskDataChannelStats = useRTCStore(
|
||||
|
|
@ -72,13 +66,13 @@ export default function ConnectionStatsSidebar() {
|
|||
);
|
||||
|
||||
const jitterBufferAvgDelayData = jitterBufferDelay.map((d, idx) => {
|
||||
if (idx === 0) return { date: d.date, stat: null };
|
||||
const prevDelay = jitterBufferDelay[idx - 1]?.stat as number | null | undefined;
|
||||
const currDelay = d.stat as number | null | undefined;
|
||||
if (idx === 0) return { date: d.date, metric: null };
|
||||
const prevDelay = jitterBufferDelay[idx - 1]?.metric as number | null | undefined;
|
||||
const currDelay = d.metric as number | null | undefined;
|
||||
const prevEmitted =
|
||||
(jitterBufferEmittedCount[idx - 1]?.stat as number | null | undefined) ?? null;
|
||||
(jitterBufferEmittedCount[idx - 1]?.metric as number | null | undefined) ?? null;
|
||||
const currEmitted =
|
||||
(jitterBufferEmittedCount[idx]?.stat as number | null | undefined) ?? null;
|
||||
(jitterBufferEmittedCount[idx]?.metric as number | null | undefined) ?? null;
|
||||
|
||||
if (
|
||||
prevDelay == null ||
|
||||
|
|
@ -86,7 +80,7 @@ export default function ConnectionStatsSidebar() {
|
|||
prevEmitted == null ||
|
||||
currEmitted == null
|
||||
) {
|
||||
return { date: d.date, stat: null };
|
||||
return { date: d.date, metric: null };
|
||||
}
|
||||
|
||||
const deltaDelay = currDelay - prevDelay;
|
||||
|
|
@ -94,23 +88,13 @@ export default function ConnectionStatsSidebar() {
|
|||
|
||||
// Guard counter resets or no emitted frames
|
||||
if (deltaDelay < 0 || deltaEmitted <= 0) {
|
||||
return { date: d.date, stat: null };
|
||||
return { date: d.date, metric: null };
|
||||
}
|
||||
|
||||
const valueMs = Math.round((deltaDelay / deltaEmitted) * 1000);
|
||||
return { date: d.date, stat: valueMs };
|
||||
return { date: d.date, metric: valueMs };
|
||||
});
|
||||
|
||||
// Rolling average over the last N seconds for the reference line
|
||||
const rollingWindowSeconds = 20;
|
||||
const recent = jitterBufferAvgDelayData
|
||||
.slice(-rollingWindowSeconds)
|
||||
.filter(x => x.stat != null) as { date: number; stat: number }[];
|
||||
const referenceValue =
|
||||
recent.length > 0
|
||||
? Math.round(recent.reduce((sum, x) => sum + (x.stat as number), 0) / recent.length)
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
<div className="grid h-full grid-rows-(--grid-headerBody) shadow-xs">
|
||||
<SidebarHeader title="Connection Stats" setSidebarView={setSidebarView} />
|
||||
|
|
@ -128,11 +112,10 @@ export default function ConnectionStatsSidebar() {
|
|||
title="Round-Trip Time"
|
||||
description="Round-trip time for the active ICE candidate pair between peers."
|
||||
stream={iceCandidatePairStats}
|
||||
gate={inboundVideoRtpStats}
|
||||
metric="currentRoundTripTime"
|
||||
map={x => ({
|
||||
date: x.date,
|
||||
stat: x.stat ? Math.round((x.stat as number) * 1000) : null,
|
||||
metric: x.metric != null ? Math.round(x.metric * 1000) : null,
|
||||
})}
|
||||
domain={[0, 600]}
|
||||
unit=" ms"
|
||||
|
|
@ -156,7 +139,7 @@ export default function ConnectionStatsSidebar() {
|
|||
metric="jitter"
|
||||
map={x => ({
|
||||
date: x.date,
|
||||
stat: x.stat ? Math.round((x.stat as number) * 1000) : null,
|
||||
metric: x.metric != null ? Math.round(x.metric * 1000) : null,
|
||||
})}
|
||||
domain={[0, 10]}
|
||||
unit=" ms"
|
||||
|
|
@ -171,12 +154,17 @@ export default function ConnectionStatsSidebar() {
|
|||
data={jitterBufferAvgDelayData}
|
||||
gate={inboundVideoRtpStats}
|
||||
supported={
|
||||
isMetricSupported(inboundVideoRtpStats, "jitterBufferDelay") &&
|
||||
isMetricSupported(inboundVideoRtpStats, "jitterBufferEmittedCount")
|
||||
someIterable(
|
||||
inboundVideoRtpStats,
|
||||
([, x]) => x.jitterBufferDelay != null,
|
||||
) &&
|
||||
someIterable(
|
||||
inboundVideoRtpStats,
|
||||
([, x]) => x.jitterBufferEmittedCount != null,
|
||||
)
|
||||
}
|
||||
domain={[0, 30]}
|
||||
unit=" ms"
|
||||
referenceValue={referenceValue}
|
||||
/>
|
||||
|
||||
{/* Packets Lost */}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { lazy } from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import "./index.css";
|
||||
import {
|
||||
|
|
@ -9,46 +10,45 @@ import {
|
|||
} from "react-router-dom";
|
||||
import { ExclamationTriangleIcon } from "@heroicons/react/16/solid";
|
||||
|
||||
import { CLOUD_API, DEVICE_API } from "@/ui.config";
|
||||
import api from "@/api";
|
||||
import Root from "@/root";
|
||||
import Card from "@components/Card";
|
||||
import EmptyCard from "@components/EmptyCard";
|
||||
import NotFoundPage from "@components/NotFoundPage";
|
||||
import DeviceRoute, { LocalDevice } from "@routes/devices.$id";
|
||||
import WelcomeRoute, { DeviceStatus } from "@routes/welcome-local";
|
||||
import LoginLocalRoute from "@routes/login-local";
|
||||
import WelcomeLocalModeRoute from "@routes/welcome-local.mode";
|
||||
import WelcomeLocalPasswordRoute from "@routes/welcome-local.password";
|
||||
import AdoptRoute from "@routes/adopt";
|
||||
import SetupRoute from "@routes/devices.$id.setup";
|
||||
import DevicesIdDeregister from "@routes/devices.$id.deregister";
|
||||
import DeviceIdRename from "@routes/devices.$id.rename";
|
||||
import AdoptRoute from "@routes/adopt";
|
||||
import SignupRoute from "@routes/signup";
|
||||
import LoginRoute from "@routes/login";
|
||||
import SetupRoute from "@routes/devices.$id.setup";
|
||||
import DevicesRoute from "@routes/devices";
|
||||
import DeviceRoute, { LocalDevice } from "@routes/devices.$id";
|
||||
import Card from "@components/Card";
|
||||
import DevicesAlreadyAdopted from "@routes/devices.already-adopted";
|
||||
|
||||
import Root from "./root";
|
||||
import Notifications from "./notifications";
|
||||
import LoginLocalRoute from "./routes/login-local";
|
||||
import WelcomeLocalModeRoute from "./routes/welcome-local.mode";
|
||||
import WelcomeRoute, { DeviceStatus } from "./routes/welcome-local";
|
||||
import WelcomeLocalPasswordRoute from "./routes/welcome-local.password";
|
||||
import { CLOUD_API, DEVICE_API } from "./ui.config";
|
||||
import OtherSessionRoute from "./routes/devices.$id.other-session";
|
||||
import MountRoute from "./routes/devices.$id.mount";
|
||||
import * as SettingsRoute from "./routes/devices.$id.settings";
|
||||
import SettingsMouseRoute from "./routes/devices.$id.settings.mouse";
|
||||
import SettingsKeyboardRoute from "./routes/devices.$id.settings.keyboard";
|
||||
import api from "./api";
|
||||
import * as SettingsIndexRoute from "./routes/devices.$id.settings._index";
|
||||
import SettingsAdvancedRoute from "./routes/devices.$id.settings.advanced";
|
||||
import SettingsAccessIndexRoute from "./routes/devices.$id.settings.access._index";
|
||||
import SettingsHardwareRoute from "./routes/devices.$id.settings.hardware";
|
||||
import SettingsVideoRoute from "./routes/devices.$id.settings.video";
|
||||
import SettingsAppearanceRoute from "./routes/devices.$id.settings.appearance";
|
||||
import * as SettingsGeneralIndexRoute from "./routes/devices.$id.settings.general._index";
|
||||
import SettingsGeneralRebootRoute from "./routes/devices.$id.settings.general.reboot";
|
||||
import SettingsGeneralUpdateRoute from "./routes/devices.$id.settings.general.update";
|
||||
import SettingsNetworkRoute from "./routes/devices.$id.settings.network";
|
||||
import SecurityAccessLocalAuthRoute from "./routes/devices.$id.settings.access.local-auth";
|
||||
import SettingsMacrosRoute from "./routes/devices.$id.settings.macros";
|
||||
import SettingsMacrosAddRoute from "./routes/devices.$id.settings.macros.add";
|
||||
import SettingsMacrosEditRoute from "./routes/devices.$id.settings.macros.edit";
|
||||
import SettingsIndexRoute from "@routes/devices.$id.settings._index";
|
||||
import SettingsAccessIndexRoute from "@routes/devices.$id.settings.access._index";
|
||||
const Notifications = lazy(() => import("@/notifications"));
|
||||
const SignupRoute = lazy(() => import("@routes/signup"));
|
||||
const LoginRoute = lazy(() => import("@routes/login"));
|
||||
const DevicesAlreadyAdopted = lazy(() => import("@routes/devices.already-adopted"));
|
||||
const OtherSessionRoute = lazy(() => import("@routes/devices.$id.other-session"));
|
||||
const MountRoute = lazy(() => import("./routes/devices.$id.mount"));
|
||||
const SettingsRoute = lazy(() => import("@routes/devices.$id.settings"));
|
||||
const SettingsMouseRoute = lazy(() => import("@routes/devices.$id.settings.mouse"));
|
||||
const SettingsKeyboardRoute = lazy(() => import("@routes/devices.$id.settings.keyboard"));
|
||||
const SettingsAdvancedRoute = lazy(() => import("@routes/devices.$id.settings.advanced"));
|
||||
const SettingsHardwareRoute = lazy(() => import("@routes/devices.$id.settings.hardware"));
|
||||
const SettingsVideoRoute = lazy(() => import("@routes/devices.$id.settings.video"));
|
||||
const SettingsAppearanceRoute = lazy(() => import("@routes/devices.$id.settings.appearance"));
|
||||
const SettingsGeneralIndexRoute = lazy(() => import("@routes/devices.$id.settings.general._index"));
|
||||
const SettingsGeneralRebootRoute = lazy(() => import("@routes/devices.$id.settings.general.reboot"));
|
||||
const SettingsGeneralUpdateRoute = lazy(() => import("@routes/devices.$id.settings.general.update"));
|
||||
const SettingsNetworkRoute = lazy(() => import("@routes/devices.$id.settings.network"));
|
||||
const SecurityAccessLocalAuthRoute = lazy(() => import("@routes/devices.$id.settings.access.local-auth"));
|
||||
const SettingsMacrosRoute = lazy(() => import("@routes/devices.$id.settings.macros"));
|
||||
const SettingsMacrosAddRoute = lazy(() => import("@routes/devices.$id.settings.macros.add"));
|
||||
const SettingsMacrosEditRoute = lazy(() => import("@routes/devices.$id.settings.macros.edit"));
|
||||
|
||||
export const isOnDevice = import.meta.env.MODE === "device";
|
||||
export const isInCloud = !isOnDevice;
|
||||
|
|
@ -128,7 +128,7 @@ if (isOnDevice) {
|
|||
},
|
||||
{
|
||||
path: "settings",
|
||||
element: <SettingsRoute.default />,
|
||||
element: <SettingsRoute />,
|
||||
children: [
|
||||
{
|
||||
index: true,
|
||||
|
|
@ -139,7 +139,7 @@ if (isOnDevice) {
|
|||
children: [
|
||||
{
|
||||
index: true,
|
||||
element: <SettingsGeneralIndexRoute.default />,
|
||||
element: <SettingsGeneralIndexRoute />,
|
||||
},
|
||||
{
|
||||
path: "reboot",
|
||||
|
|
@ -265,7 +265,7 @@ if (isOnDevice) {
|
|||
},
|
||||
{
|
||||
path: "settings",
|
||||
element: <SettingsRoute.default />,
|
||||
element: <SettingsRoute />,
|
||||
children: [
|
||||
{
|
||||
index: true,
|
||||
|
|
@ -276,7 +276,7 @@ if (isOnDevice) {
|
|||
children: [
|
||||
{
|
||||
index: true,
|
||||
element: <SettingsGeneralIndexRoute.default />,
|
||||
element: <SettingsGeneralIndexRoute />,
|
||||
},
|
||||
{
|
||||
path: "update",
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ export function Dialog({ onClose }: { onClose: () => void }) {
|
|||
console.log(`Mounting ${url} as ${mode}`);
|
||||
|
||||
setMountInProgress(true);
|
||||
send("mountWithHTTP", { url, mode }, async (resp: JsonRpcResponse) => {
|
||||
send("mountWithHTTP", { url, mode }, (resp: JsonRpcResponse) => {
|
||||
if ("error" in resp) triggerError(resp.error.message);
|
||||
|
||||
clearMountMediaState();
|
||||
|
|
@ -108,7 +108,7 @@ export function Dialog({ onClose }: { onClose: () => void }) {
|
|||
console.log(`Mounting ${fileName} as ${mode}`);
|
||||
|
||||
setMountInProgress(true);
|
||||
send("mountWithStorage", { filename: fileName, mode }, async (resp: JsonRpcResponse) => {
|
||||
send("mountWithStorage", { filename: fileName, mode }, (resp: JsonRpcResponse) => {
|
||||
if ("error" in resp) triggerError(resp.error.message);
|
||||
|
||||
clearMountMediaState();
|
||||
|
|
|
|||
|
|
@ -2,6 +2,12 @@ import { LoaderFunctionArgs, redirect } from "react-router-dom";
|
|||
|
||||
import { getDeviceUiPath } from "../hooks/useAppNavigation";
|
||||
|
||||
export function loader({ params }: LoaderFunctionArgs) {
|
||||
const loader = ({ params }: LoaderFunctionArgs) => {
|
||||
return redirect(getDeviceUiPath("/settings/general", params.id));
|
||||
}
|
||||
|
||||
export default function SettingIndexRoute() {
|
||||
return (<></>);
|
||||
}
|
||||
|
||||
SettingIndexRoute.loader = loader;
|
||||
|
|
@ -87,7 +87,7 @@ export default function SettingsAccessIndexRoute() {
|
|||
});
|
||||
}, [send]);
|
||||
|
||||
const deregisterDevice = async () => {
|
||||
const deregisterDevice = () => {
|
||||
send("deregisterDevice", {}, (resp: JsonRpcResponse) => {
|
||||
if ("error" in resp) {
|
||||
notifications.error(
|
||||
|
|
@ -198,7 +198,7 @@ export default function SettingsAccessIndexRoute() {
|
|||
getCloudState();
|
||||
getTLSState();
|
||||
|
||||
send("getDeviceID", {}, async (resp: JsonRpcResponse) => {
|
||||
send("getDeviceID", {}, (resp: JsonRpcResponse) => {
|
||||
if ("error" in resp) return console.error(resp.error);
|
||||
setDeviceId(resp.result as string);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ export function Dialog({
|
|||
const { modalView, setModalView, otaState } = useUpdateStore();
|
||||
|
||||
const onFinishedLoading = useCallback(
|
||||
async (versionInfo: SystemVersionInfo) => {
|
||||
(versionInfo: SystemVersionInfo) => {
|
||||
const hasUpdate =
|
||||
versionInfo?.systemUpdateAvailable || versionInfo?.appUpdateAvailable;
|
||||
|
||||
|
|
@ -141,7 +141,7 @@ function LoadingState({
|
|||
|
||||
const getVersionInfo = useCallback(() => {
|
||||
return new Promise<SystemVersionInfo>((resolve, reject) => {
|
||||
send("getUpdateStatus", {}, async (resp: JsonRpcResponse) => {
|
||||
send("getUpdateStatus", {}, (resp: JsonRpcResponse) => {
|
||||
if ("error" in resp) {
|
||||
notifications.error(`Failed to check for updates: ${resp.error}`);
|
||||
reject(new Error("Failed to check for updates"));
|
||||
|
|
|
|||
|
|
@ -121,7 +121,7 @@ export default function SettingsMouseRoute() {
|
|||
const saveJigglerConfig = useCallback(
|
||||
(jigglerConfig: JigglerConfig) => {
|
||||
// We assume the jiggler should be set to enabled if the config is being updated
|
||||
send("setJigglerState", { enabled: true }, async (resp: JsonRpcResponse) => {
|
||||
send("setJigglerState", { enabled: true }, (resp: JsonRpcResponse) => {
|
||||
if ("error" in resp) {
|
||||
return notifications.error(
|
||||
`Failed to set jiggler state: ${resp.error.data || "Unknown error"}`,
|
||||
|
|
@ -129,7 +129,7 @@ export default function SettingsMouseRoute() {
|
|||
}
|
||||
});
|
||||
|
||||
send("setJigglerConfig", { jigglerConfig }, async (resp: JsonRpcResponse) => {
|
||||
send("setJigglerConfig", { jigglerConfig }, (resp: JsonRpcResponse) => {
|
||||
if ("error" in resp) {
|
||||
const errorMsg = resp.error.data || "Unknown error";
|
||||
|
||||
|
|
@ -163,7 +163,7 @@ export default function SettingsMouseRoute() {
|
|||
|
||||
// We don't need to update the device jiggler state when the option is "disabled"
|
||||
if (option === "disabled") {
|
||||
send("setJigglerState", { enabled: false }, async (resp: JsonRpcResponse) => {
|
||||
send("setJigglerState", { enabled: false }, (resp: JsonRpcResponse) => {
|
||||
if ("error" in resp) {
|
||||
return notifications.error(
|
||||
`Failed to set jiggler state: ${resp.error.data || "Unknown error"}`,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { lazy, useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import {
|
||||
LoaderFunctionArgs,
|
||||
Outlet,
|
||||
|
|
@ -16,7 +16,11 @@ import { FocusTrap } from "focus-trap-react";
|
|||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import useWebSocket from "react-use-websocket";
|
||||
|
||||
import { CLOUD_API, DEVICE_API } from "@/ui.config";
|
||||
import api from "@/api";
|
||||
import { checkAuth, isInCloud, isOnDevice } from "@/main";
|
||||
import { cx } from "@/cva.config";
|
||||
import notifications from "@/notifications";
|
||||
import {
|
||||
HidState,
|
||||
KeyboardLedState,
|
||||
|
|
@ -34,27 +38,21 @@ import {
|
|||
VideoState,
|
||||
} from "@/hooks/stores";
|
||||
import WebRTCVideo from "@components/WebRTCVideo";
|
||||
import { checkAuth, isInCloud, isOnDevice } from "@/main";
|
||||
import DashboardNavbar from "@components/Header";
|
||||
import ConnectionStatsSidebar from "@/components/sidebar/connectionStats";
|
||||
const ConnectionStatsSidebar = lazy(() => import('@/components/sidebar/connectionStats'));
|
||||
const Terminal = lazy(() => import('@components/Terminal'));
|
||||
const UpdateInProgressStatusCard = lazy(() => import("@/components/UpdateInProgressStatusCard"));
|
||||
import Modal from "@/components/Modal";
|
||||
import { JsonRpcRequest, JsonRpcResponse, useJsonRpc } from "@/hooks/useJsonRpc";
|
||||
import Terminal from "@components/Terminal";
|
||||
import { CLOUD_API, DEVICE_API } from "@/ui.config";
|
||||
|
||||
import UpdateInProgressStatusCard from "../components/UpdateInProgressStatusCard";
|
||||
import api from "../api";
|
||||
import Modal from "../components/Modal";
|
||||
import { useDeviceUiNavigation } from "../hooks/useAppNavigation";
|
||||
import {
|
||||
ConnectionFailedOverlay,
|
||||
LoadingConnectionOverlay,
|
||||
PeerConnectionDisconnectedOverlay,
|
||||
} from "../components/VideoOverlay";
|
||||
import { FeatureFlagProvider } from "../providers/FeatureFlagProvider";
|
||||
import notifications from "../notifications";
|
||||
|
||||
import { DeviceStatus } from "./welcome-local";
|
||||
import { SystemVersionInfo } from "./devices.$id.settings.general.update";
|
||||
} from "@/components/VideoOverlay";
|
||||
import { useDeviceUiNavigation } from "@/hooks/useAppNavigation";
|
||||
import { FeatureFlagProvider } from "@/providers/FeatureFlagProvider";
|
||||
import { DeviceStatus } from "@routes/welcome-local";
|
||||
import { SystemVersionInfo } from "@routes/devices.$id.settings.general.update";
|
||||
|
||||
interface LocalLoaderResp {
|
||||
authMode: "password" | "noPassword" | null;
|
||||
|
|
@ -114,7 +112,7 @@ const cloudLoader = async (params: Params<string>): Promise<CloudLoaderResp> =>
|
|||
return { user, iceConfig, deviceName: device.name || device.id };
|
||||
};
|
||||
|
||||
const loader = async ({ params }: LoaderFunctionArgs) => {
|
||||
const loader = ({ params }: LoaderFunctionArgs) => {
|
||||
return import.meta.env.MODE === "device" ? deviceLoader() : cloudLoader(params);
|
||||
};
|
||||
|
||||
|
|
@ -452,7 +450,7 @@ export default function KvmIdRoute() {
|
|||
}
|
||||
};
|
||||
|
||||
pc.onicecandidate = async ({ candidate }) => {
|
||||
pc.onicecandidate = ({ candidate }) => {
|
||||
if (!candidate) return;
|
||||
if (candidate.candidate === "") return;
|
||||
sendWebRTCSignal("new-ice-candidate", candidate);
|
||||
|
|
@ -735,10 +733,10 @@ export default function KvmIdRoute() {
|
|||
useEffect(() => {
|
||||
if (appVersion) return;
|
||||
|
||||
send("getUpdateStatus", {}, async (resp: JsonRpcResponse) => {
|
||||
send("getUpdateStatus", {}, (resp: JsonRpcResponse) => {
|
||||
if ("error" in resp) {
|
||||
notifications.error(`Failed to get device version: ${resp.error}`);
|
||||
return
|
||||
return
|
||||
}
|
||||
|
||||
const result = resp.result as SystemVersionInfo;
|
||||
|
|
|
|||
|
|
@ -94,6 +94,17 @@ export const formatters = {
|
|||
},
|
||||
};
|
||||
|
||||
export function someIterable<T>(
|
||||
iterable: Iterable<T>,
|
||||
predicate: (item: T) => boolean,
|
||||
): boolean {
|
||||
for (const item of iterable) {
|
||||
if (predicate(item)) return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
export const VIDEO = new Blob(
|
||||
[
|
||||
new Uint8Array([
|
||||
|
|
|
|||
Loading…
Reference in New Issue