WIP ESLint fixes
This commit is contained in:
		@@ -38,6 +38,7 @@ export default tseslint.config(
 | 
			
		||||
      ],
 | 
			
		||||
      ...reactX.configs["recommended-typescript"].rules,
 | 
			
		||||
      ...reactDom.configs.recommended.rules,
 | 
			
		||||
      "@typescript-eslint/no-non-null-assertion": "off"
 | 
			
		||||
    },
 | 
			
		||||
  }
 | 
			
		||||
);
 | 
			
		||||
 
 | 
			
		||||
@@ -51,7 +51,7 @@ export function App() {
 | 
			
		||||
 | 
			
		||||
  const context: AuthContext = {
 | 
			
		||||
    signedIn: signedIn,
 | 
			
		||||
    setSignedIn: (s) => setSignedIn(s),
 | 
			
		||||
    setSignedIn: (s) => { setSignedIn(s); },
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  const router = createBrowserRouter(
 | 
			
		||||
@@ -97,12 +97,12 @@ export function App() {
 | 
			
		||||
  );
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
    <AuthContextK.Provider value={context}>
 | 
			
		||||
    <AuthContextK value={context}>
 | 
			
		||||
      <RouterProvider router={router} />
 | 
			
		||||
    </AuthContextK.Provider>
 | 
			
		||||
    </AuthContextK>
 | 
			
		||||
  );
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export function useAuth(): AuthContext {
 | 
			
		||||
  return React.useContext(AuthContextK)!;
 | 
			
		||||
  return React.use(AuthContextK)!;
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -44,7 +44,7 @@ export class APIClient {
 | 
			
		||||
   */
 | 
			
		||||
  static async exec(args: RequestParams): Promise<APIResponse> {
 | 
			
		||||
    let body: string | undefined | FormData = undefined;
 | 
			
		||||
    let headers: any = {};
 | 
			
		||||
    const headers: any = {};
 | 
			
		||||
 | 
			
		||||
    // JSON request
 | 
			
		||||
    if (args.jsonData) {
 | 
			
		||||
@@ -67,17 +67,17 @@ export class APIClient {
 | 
			
		||||
      const res: XMLHttpRequest = await new Promise((resolve, reject) => {
 | 
			
		||||
        const xhr = new XMLHttpRequest();
 | 
			
		||||
        xhr.upload.addEventListener("progress", (e) =>
 | 
			
		||||
          args.upProgress!(e.loaded / e.total)
 | 
			
		||||
          { args.upProgress!(e.loaded / e.total); }
 | 
			
		||||
        );
 | 
			
		||||
        xhr.addEventListener("load", () => resolve(xhr));
 | 
			
		||||
        xhr.addEventListener("load", () => { resolve(xhr); });
 | 
			
		||||
        xhr.addEventListener("error", () =>
 | 
			
		||||
          reject(new Error("File upload failed"))
 | 
			
		||||
          { reject(new Error("File upload failed")); }
 | 
			
		||||
        );
 | 
			
		||||
        xhr.addEventListener("abort", () =>
 | 
			
		||||
          reject(new Error("File upload aborted"))
 | 
			
		||||
          { reject(new Error("File upload aborted")); }
 | 
			
		||||
        );
 | 
			
		||||
        xhr.addEventListener("timeout", () =>
 | 
			
		||||
          reject(new Error("File upload timeout"))
 | 
			
		||||
          { reject(new Error("File upload timeout")); }
 | 
			
		||||
        );
 | 
			
		||||
        xhr.open(args.method, url, true);
 | 
			
		||||
        xhr.withCredentials = true;
 | 
			
		||||
 
 | 
			
		||||
@@ -140,7 +140,7 @@ export interface NWFilter {
 | 
			
		||||
  rules: NWFilterRule[];
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export function NWFilterURL(n: NWFilter, edit: boolean = false): string {
 | 
			
		||||
export function NWFilterURL(n: NWFilter, edit = false): string {
 | 
			
		||||
  return `/nwfilter/${n.uuid}${edit ? "/edit" : ""}`;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@@ -221,7 +221,7 @@ export class NWFilterApi {
 | 
			
		||||
  static async Delete(n: NWFilter): Promise<void> {
 | 
			
		||||
    await APIClient.exec({
 | 
			
		||||
      method: "DELETE",
 | 
			
		||||
      uri: `/nwfilter/${n.uuid}`,
 | 
			
		||||
      uri: `/nwfilter/${n.uuid!}`,
 | 
			
		||||
    });
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -53,7 +53,7 @@ export interface NetworkInfo {
 | 
			
		||||
 | 
			
		||||
export type NetworkStatus = "Started" | "Stopped";
 | 
			
		||||
 | 
			
		||||
export function NetworkURL(n: NetworkInfo, edit: boolean = false): string {
 | 
			
		||||
export function NetworkURL(n: NetworkInfo, edit = false): string {
 | 
			
		||||
  return `/net/${n.uuid}${edit ? "/edit" : ""}`;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
@@ -20,7 +20,7 @@ export interface APIToken {
 | 
			
		||||
  max_inactivity?: number;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export function APITokenURL(t: APIToken, edit: boolean = false): string {
 | 
			
		||||
export function APITokenURL(t: APIToken, edit = false): string {
 | 
			
		||||
  return `/token/${t.id}${edit ? "/edit" : ""}`;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
@@ -39,7 +39,7 @@ export function AlertDialogProvider(p: PropsWithChildren): React.ReactElement {
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
    <>
 | 
			
		||||
      <AlertContextK.Provider value={hook}>{p.children}</AlertContextK.Provider>
 | 
			
		||||
      <AlertContextK value={hook}>{p.children}</AlertContextK>
 | 
			
		||||
 | 
			
		||||
      <Dialog
 | 
			
		||||
        open={open}
 | 
			
		||||
@@ -67,5 +67,5 @@ export function AlertDialogProvider(p: PropsWithChildren): React.ReactElement {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export function useAlert(): AlertContext {
 | 
			
		||||
  return React.useContext(AlertContextK)!;
 | 
			
		||||
  return React.use(AlertContextK)!;
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -59,13 +59,13 @@ export function ConfirmDialogProvider(
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
    <>
 | 
			
		||||
      <ConfirmContextK.Provider value={hook}>
 | 
			
		||||
      <ConfirmContextK value={hook}>
 | 
			
		||||
        {p.children}
 | 
			
		||||
      </ConfirmContextK.Provider>
 | 
			
		||||
      </ConfirmContextK>
 | 
			
		||||
 | 
			
		||||
      <Dialog
 | 
			
		||||
        open={open}
 | 
			
		||||
        onClose={() => handleClose(false)}
 | 
			
		||||
        onClose={() => { handleClose(false); }}
 | 
			
		||||
        aria-labelledby="alert-dialog-title"
 | 
			
		||||
        aria-describedby="alert-dialog-description"
 | 
			
		||||
      >
 | 
			
		||||
@@ -76,10 +76,10 @@ export function ConfirmDialogProvider(
 | 
			
		||||
          </DialogContentText>
 | 
			
		||||
        </DialogContent>
 | 
			
		||||
        <DialogActions>
 | 
			
		||||
          <Button onClick={() => handleClose(false)} autoFocus>
 | 
			
		||||
          <Button onClick={() => { handleClose(false); }} autoFocus>
 | 
			
		||||
            {cancelButton ?? "Cancel"}
 | 
			
		||||
          </Button>
 | 
			
		||||
          <Button onClick={() => handleClose(true)} color="error">
 | 
			
		||||
          <Button onClick={() => { handleClose(true); }} color="error">
 | 
			
		||||
            {confirmButton ?? "Confirm"}
 | 
			
		||||
          </Button>
 | 
			
		||||
        </DialogActions>
 | 
			
		||||
@@ -89,5 +89,5 @@ export function ConfirmDialogProvider(
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export function useConfirm(): ConfirmContext {
 | 
			
		||||
  return React.useContext(ConfirmContextK)!;
 | 
			
		||||
  return React.use(ConfirmContextK)!;
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -6,10 +6,10 @@ import {
 | 
			
		||||
} from "@mui/material";
 | 
			
		||||
import React, { PropsWithChildren } from "react";
 | 
			
		||||
 | 
			
		||||
type LoadingMessageContext = {
 | 
			
		||||
interface LoadingMessageContext {
 | 
			
		||||
  show: (message: string) => void;
 | 
			
		||||
  hide: () => void;
 | 
			
		||||
};
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const LoadingMessageContextK =
 | 
			
		||||
  React.createContext<LoadingMessageContext | null>(null);
 | 
			
		||||
@@ -34,9 +34,9 @@ export function LoadingMessageProvider(
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
    <>
 | 
			
		||||
      <LoadingMessageContextK.Provider value={hook}>
 | 
			
		||||
      <LoadingMessageContextK value={hook}>
 | 
			
		||||
        {p.children}
 | 
			
		||||
      </LoadingMessageContextK.Provider>
 | 
			
		||||
      </LoadingMessageContextK>
 | 
			
		||||
 | 
			
		||||
      <Dialog open={open}>
 | 
			
		||||
        <DialogContent>
 | 
			
		||||
@@ -60,5 +60,5 @@ export function LoadingMessageProvider(
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export function useLoadingMessage(): LoadingMessageContext {
 | 
			
		||||
  return React.useContext(LoadingMessageContextK)!;
 | 
			
		||||
  return React.use(LoadingMessageContextK)!;
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -24,9 +24,9 @@ export function SnackbarProvider(p: PropsWithChildren): React.ReactElement {
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
    <>
 | 
			
		||||
      <SnackbarContextK.Provider value={hook}>
 | 
			
		||||
      <SnackbarContextK value={hook}>
 | 
			
		||||
        {p.children}
 | 
			
		||||
      </SnackbarContextK.Provider>
 | 
			
		||||
      </SnackbarContextK>
 | 
			
		||||
 | 
			
		||||
      <Snackbar
 | 
			
		||||
        open={open}
 | 
			
		||||
@@ -39,5 +39,5 @@ export function SnackbarProvider(p: PropsWithChildren): React.ReactElement {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export function useSnackbar(): SnackbarContext {
 | 
			
		||||
  return React.useContext(SnackbarContextK)!;
 | 
			
		||||
  return React.use(SnackbarContextK)!;
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -21,7 +21,7 @@ const darkTheme = createTheme({
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
const root = ReactDOM.createRoot(
 | 
			
		||||
  document.getElementById("root") as HTMLElement
 | 
			
		||||
  document.getElementById("root")!
 | 
			
		||||
);
 | 
			
		||||
root.render(
 | 
			
		||||
  <React.StrictMode>
 | 
			
		||||
 
 | 
			
		||||
@@ -116,7 +116,7 @@ function EditApiTokenRouteInner(p: {
 | 
			
		||||
  const [changed, setChanged] = React.useState(false);
 | 
			
		||||
 | 
			
		||||
  const [, updateState] = React.useState<any>();
 | 
			
		||||
  const forceUpdate = React.useCallback(() => updateState({}), []);
 | 
			
		||||
  const forceUpdate = React.useCallback(() => { updateState({}); }, []);
 | 
			
		||||
 | 
			
		||||
  const valueChanged = () => {
 | 
			
		||||
    setChanged(true);
 | 
			
		||||
 
 | 
			
		||||
@@ -99,7 +99,7 @@ function EditNetworkFilterRouteInner(p: {
 | 
			
		||||
  const [changed, setChanged] = React.useState(false);
 | 
			
		||||
 | 
			
		||||
  const [, updateState] = React.useState<any>();
 | 
			
		||||
  const forceUpdate = React.useCallback(() => updateState({}), []);
 | 
			
		||||
  const forceUpdate = React.useCallback(() => { updateState({}); }, []);
 | 
			
		||||
 | 
			
		||||
  const valueChanged = () => {
 | 
			
		||||
    setChanged(true);
 | 
			
		||||
 
 | 
			
		||||
@@ -97,7 +97,7 @@ function EditNetworkRouteInner(p: {
 | 
			
		||||
  const [changed, setChanged] = React.useState(false);
 | 
			
		||||
 | 
			
		||||
  const [, updateState] = React.useState<any>();
 | 
			
		||||
  const forceUpdate = React.useCallback(() => updateState({}), []);
 | 
			
		||||
  const forceUpdate = React.useCallback(() => { updateState({}); }, []);
 | 
			
		||||
 | 
			
		||||
  const valueChanged = () => {
 | 
			
		||||
    setChanged(true);
 | 
			
		||||
 
 | 
			
		||||
@@ -103,7 +103,7 @@ function EditVMInner(p: {
 | 
			
		||||
  const [changed, setChanged] = React.useState(false);
 | 
			
		||||
 | 
			
		||||
  const [, updateState] = React.useState<any>();
 | 
			
		||||
  const forceUpdate = React.useCallback(() => updateState({}), []);
 | 
			
		||||
  const forceUpdate = React.useCallback(() => { updateState({}); }, []);
 | 
			
		||||
 | 
			
		||||
  const valueChanged = () => {
 | 
			
		||||
    setChanged(true);
 | 
			
		||||
 
 | 
			
		||||
@@ -166,14 +166,14 @@ function UploadIsoFileFromUrlCard(p: {
 | 
			
		||||
          label="URL"
 | 
			
		||||
          value={url}
 | 
			
		||||
          style={{ flex: 3 }}
 | 
			
		||||
          onChange={(e) => setURL(e.target.value)}
 | 
			
		||||
          onChange={(e) => { setURL(e.target.value); }}
 | 
			
		||||
        />
 | 
			
		||||
        <span style={{ width: "10px" }}></span>
 | 
			
		||||
        <TextField
 | 
			
		||||
          label="Filename"
 | 
			
		||||
          value={actualFileName}
 | 
			
		||||
          style={{ flex: 2 }}
 | 
			
		||||
          onChange={(e) => setFilename(e.target.value)}
 | 
			
		||||
          onChange={(e) => { setFilename(e.target.value); }}
 | 
			
		||||
        />
 | 
			
		||||
        {url !== "" && actualFileName !== "" && (
 | 
			
		||||
          <Button onClick={upload}>Upload file</Button>
 | 
			
		||||
 
 | 
			
		||||
@@ -78,7 +78,7 @@ function NetworkFiltersListRouteInner(p: {
 | 
			
		||||
            size="small"
 | 
			
		||||
            value={visibleFilters}
 | 
			
		||||
            exclusive
 | 
			
		||||
            onChange={(_ev, v) => setVisibleFilters(v)}
 | 
			
		||||
            onChange={(_ev, v) => { setVisibleFilters(v); }}
 | 
			
		||||
            aria-label="visible filters"
 | 
			
		||||
          >
 | 
			
		||||
            <ToggleButton value={VisibleFilters.All}>All</ToggleButton>
 | 
			
		||||
 
 | 
			
		||||
@@ -236,7 +236,7 @@ export function SysInfoRouteInner(p: {
 | 
			
		||||
function SysInfoDetailsTable(p: {
 | 
			
		||||
  label: string;
 | 
			
		||||
  icon: React.ReactElement;
 | 
			
		||||
  entries: Array<{ label: string; value: string | number }>;
 | 
			
		||||
  entries: { label: string; value: string | number }[];
 | 
			
		||||
}): React.ReactElement {
 | 
			
		||||
  return (
 | 
			
		||||
    <VirtWebPaper
 | 
			
		||||
 
 | 
			
		||||
@@ -25,13 +25,13 @@ import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
 | 
			
		||||
import { VMStatusWidget } from "../widgets/vms/VMStatusWidget";
 | 
			
		||||
 | 
			
		||||
export function VMListRoute(): React.ReactElement {
 | 
			
		||||
  const [groups, setGroups] = React.useState<Array<string | undefined>>();
 | 
			
		||||
  const [groups, setGroups] = React.useState<(string | undefined)[]>();
 | 
			
		||||
  const [list, setList] = React.useState<VMInfo[] | undefined>();
 | 
			
		||||
 | 
			
		||||
  const loadKey = React.useRef(1);
 | 
			
		||||
 | 
			
		||||
  const load = async () => {
 | 
			
		||||
    const groups: Array<string | undefined> = await GroupApi.GetList();
 | 
			
		||||
    const groups: (string | undefined)[] = await GroupApi.GetList();
 | 
			
		||||
    const list = await VMApi.GetList();
 | 
			
		||||
 | 
			
		||||
    if (list.find((v) => !v.group) !== undefined) groups.push(undefined);
 | 
			
		||||
@@ -70,7 +70,7 @@ export function VMListRoute(): React.ReactElement {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function VMListWidget(p: {
 | 
			
		||||
  groups: Array<string | undefined>;
 | 
			
		||||
  groups: (string | undefined)[];
 | 
			
		||||
  list: VMInfo[];
 | 
			
		||||
  onReload: () => void;
 | 
			
		||||
}): React.ReactElement {
 | 
			
		||||
@@ -125,9 +125,9 @@ function VMListWidget(p: {
 | 
			
		||||
                  >
 | 
			
		||||
                    <IconButton
 | 
			
		||||
                      size="small"
 | 
			
		||||
                      onClick={() => toggleHiddenGroup(g)}
 | 
			
		||||
                      onClick={() => { toggleHiddenGroup(g); }}
 | 
			
		||||
                    >
 | 
			
		||||
                      {!hiddenGroups?.has(g) ? (
 | 
			
		||||
                      {!hiddenGroups.has(g) ? (
 | 
			
		||||
                        <KeyboardArrowUpIcon />
 | 
			
		||||
                      ) : (
 | 
			
		||||
                        <KeyboardArrowDownIcon />
 | 
			
		||||
@@ -157,7 +157,7 @@ function VMListWidget(p: {
 | 
			
		||||
                      <TableCell>
 | 
			
		||||
                        <VMStatusWidget
 | 
			
		||||
                          vm={row}
 | 
			
		||||
                          onChange={(s) => updateVMState(row, s)}
 | 
			
		||||
                          onChange={(s) => { updateVMState(row, s); }}
 | 
			
		||||
                        />
 | 
			
		||||
                      </TableCell>
 | 
			
		||||
                      <TableCell>
 | 
			
		||||
 
 | 
			
		||||
@@ -91,7 +91,7 @@ function VNCInner(p: { vm: VMInfo }): React.ReactElement {
 | 
			
		||||
    connect(false);
 | 
			
		||||
 | 
			
		||||
    if (vncRef.current) {
 | 
			
		||||
      vncRef.current.onfullscreenchange = () => setCounter(counter + 1);
 | 
			
		||||
      vncRef.current.onfullscreenchange = () => { setCounter(counter + 1); };
 | 
			
		||||
    }
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
@@ -140,10 +140,10 @@ function VNCInner(p: { vm: VMInfo }): React.ReactElement {
 | 
			
		||||
          ref={vncScreenRef}
 | 
			
		||||
          url={token.url}
 | 
			
		||||
          onDisconnect={() => {
 | 
			
		||||
            console.info("VNC disconnected " + token?.url);
 | 
			
		||||
            console.info("VNC disconnected " + token.url);
 | 
			
		||||
            disconnected();
 | 
			
		||||
          }}
 | 
			
		||||
          onConnect={() => setConnected(true)}
 | 
			
		||||
          onConnect={() => { setConnected(true); }}
 | 
			
		||||
        />
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
 
 | 
			
		||||
@@ -36,7 +36,7 @@ export function LoginRoute(): React.ReactElement {
 | 
			
		||||
  const canSubmit = username.length > 0 && password.length > 0;
 | 
			
		||||
 | 
			
		||||
  const [showPassword, setShowPassword] = React.useState(false);
 | 
			
		||||
  const handleClickShowPassword = () => setShowPassword((show) => !show);
 | 
			
		||||
  const handleClickShowPassword = () => { setShowPassword((show) => !show); };
 | 
			
		||||
 | 
			
		||||
  const handleMouseDownPassword = (
 | 
			
		||||
    event: React.MouseEvent<HTMLButtonElement>
 | 
			
		||||
@@ -105,7 +105,7 @@ export function LoginRoute(): React.ReactElement {
 | 
			
		||||
              label="Username"
 | 
			
		||||
              name="username"
 | 
			
		||||
              value={username}
 | 
			
		||||
              onChange={(e) => setUsername(e.target.value)}
 | 
			
		||||
              onChange={(e) => { setUsername(e.target.value); }}
 | 
			
		||||
              autoComplete="username"
 | 
			
		||||
              autoFocus
 | 
			
		||||
            />
 | 
			
		||||
@@ -120,7 +120,7 @@ export function LoginRoute(): React.ReactElement {
 | 
			
		||||
                type={showPassword ? "text" : "password"}
 | 
			
		||||
                id="password"
 | 
			
		||||
                value={password}
 | 
			
		||||
                onChange={(e) => setPassword(e.target.value)}
 | 
			
		||||
                onChange={(e) => { setPassword(e.target.value); }}
 | 
			
		||||
                autoComplete="current-password"
 | 
			
		||||
                endAdornment={
 | 
			
		||||
                  <InputAdornment position="end">
 | 
			
		||||
 
 | 
			
		||||
@@ -67,7 +67,7 @@ export function AsyncWidget(p: {
 | 
			
		||||
 | 
			
		||||
          <Button onClick={load}>Try again</Button>
 | 
			
		||||
 | 
			
		||||
          {p.errAdditionalElement && p.errAdditionalElement()}
 | 
			
		||||
          {p.errAdditionalElement?.()}
 | 
			
		||||
        </Box>
 | 
			
		||||
      )
 | 
			
		||||
    );
 | 
			
		||||
 
 | 
			
		||||
@@ -32,13 +32,13 @@ export function ConfigImportExportButtons(p: {
 | 
			
		||||
 | 
			
		||||
      // Wait for a file to be chosen
 | 
			
		||||
      await new Promise((res, _rej) =>
 | 
			
		||||
        fileEl.addEventListener("change", () => res(null))
 | 
			
		||||
        { fileEl.addEventListener("change", () => { res(null); }); }
 | 
			
		||||
      );
 | 
			
		||||
 | 
			
		||||
      if ((fileEl.files?.length ?? 0) === 0) return null;
 | 
			
		||||
 | 
			
		||||
      // Import conf
 | 
			
		||||
      let file = fileEl.files![0];
 | 
			
		||||
      const file = fileEl.files![0];
 | 
			
		||||
      const content = await file.text();
 | 
			
		||||
      p.importConf?.(JSON.parse(content));
 | 
			
		||||
    } catch (e) {
 | 
			
		||||
 
 | 
			
		||||
@@ -24,7 +24,7 @@ export function TabsWidget<E>(p: {
 | 
			
		||||
    <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
 | 
			
		||||
      <Tabs
 | 
			
		||||
        value={currTabIndex}
 | 
			
		||||
        onChange={(_ev, newVal) => updateActiveTab(newVal)}
 | 
			
		||||
        onChange={(_ev, newVal) => { updateActiveTab(newVal); }}
 | 
			
		||||
      >
 | 
			
		||||
        {activeOptions.map((o, index) => (
 | 
			
		||||
          <Tab key={index} label={o.label} style={{ color: o.color }} />
 | 
			
		||||
 
 | 
			
		||||
@@ -17,7 +17,7 @@ export function CheckboxInput(p: {
 | 
			
		||||
        <Checkbox
 | 
			
		||||
          disabled={!p.editable}
 | 
			
		||||
          checked={p.checked}
 | 
			
		||||
          onChange={(e) => p.onValueChange(e.target.checked)}
 | 
			
		||||
          onChange={(e) => { p.onValueChange(e.target.checked); }}
 | 
			
		||||
        />
 | 
			
		||||
      }
 | 
			
		||||
      label={p.label}
 | 
			
		||||
 
 | 
			
		||||
@@ -44,7 +44,7 @@ export function IPInputWithMask(p: {
 | 
			
		||||
          return;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        const split = v?.split("/");
 | 
			
		||||
        const split = v.split("/");
 | 
			
		||||
        const ip =
 | 
			
		||||
          p.version === 4 ? sanitizeIpV4(split[0]) : sanitizeIpV6(split[0]);
 | 
			
		||||
        let mask = undefined;
 | 
			
		||||
@@ -69,7 +69,7 @@ export function IPInputWithMask(p: {
 | 
			
		||||
function sanitizeIpV4(s: string | undefined): string | undefined {
 | 
			
		||||
  if (s === "" || s === undefined) return s;
 | 
			
		||||
 | 
			
		||||
  let split = s.split(".");
 | 
			
		||||
  const split = s.split(".");
 | 
			
		||||
  if (split.length > 4) split.splice(4);
 | 
			
		||||
 | 
			
		||||
  let needAnotherIteration = false;
 | 
			
		||||
@@ -106,7 +106,7 @@ function sanitizeIpV6(s: string | undefined): string | undefined {
 | 
			
		||||
      const num = parseInt(e, 16);
 | 
			
		||||
      if (isNaN(num)) return "0";
 | 
			
		||||
 | 
			
		||||
      let s = num.toString(16);
 | 
			
		||||
      const s = num.toString(16);
 | 
			
		||||
      if (num > 0xffff) {
 | 
			
		||||
        needAnotherIteration = true;
 | 
			
		||||
        return s.slice(0, 4) + ":" + s.slice(4);
 | 
			
		||||
 
 | 
			
		||||
@@ -32,7 +32,7 @@ function sanitizeMacAddress(s: string | undefined): string | undefined {
 | 
			
		||||
      const num = parseInt(e, 16);
 | 
			
		||||
      if (isNaN(num)) return "0";
 | 
			
		||||
 | 
			
		||||
      let s = num.toString(16).padStart(2, "0");
 | 
			
		||||
      const s = num.toString(16).padStart(2, "0");
 | 
			
		||||
      if (num > 0xff) {
 | 
			
		||||
        needAnotherIteration = true;
 | 
			
		||||
        return s.slice(0, 2) + ":" + s.slice(2);
 | 
			
		||||
 
 | 
			
		||||
@@ -12,7 +12,7 @@ export function NWFConnStateInput(p: {
 | 
			
		||||
      label="Connection state"
 | 
			
		||||
      value={p.value}
 | 
			
		||||
      onValueChange={(s) => {
 | 
			
		||||
        p.onChange?.(s as any);
 | 
			
		||||
        p.onChange(s as any);
 | 
			
		||||
      }}
 | 
			
		||||
      options={[
 | 
			
		||||
        { label: "None", value: undefined },
 | 
			
		||||
 
 | 
			
		||||
@@ -13,7 +13,7 @@ export function NWFilterPriorityInput(p: {
 | 
			
		||||
      value={p.value?.toString()}
 | 
			
		||||
      type="number"
 | 
			
		||||
      onValueChange={(v) => {
 | 
			
		||||
        p.onChange?.(v && v !== "" ? Number(v) : undefined);
 | 
			
		||||
        p.onChange(v && v !== "" ? Number(v) : undefined);
 | 
			
		||||
      }}
 | 
			
		||||
      size={ServerApi.Config.constraints.nwfilter_priority}
 | 
			
		||||
      helperText="A lower priority value is accessed before one with a higher value"
 | 
			
		||||
 
 | 
			
		||||
@@ -66,9 +66,9 @@ export function NWFilterRules(p: {
 | 
			
		||||
            deleteRule(n);
 | 
			
		||||
          }}
 | 
			
		||||
          onGoDown={
 | 
			
		||||
            n < p.rules.length - 1 ? () => swapRules(n, n + 1) : undefined
 | 
			
		||||
            n < p.rules.length - 1 ? () => { swapRules(n, n + 1); } : undefined
 | 
			
		||||
          }
 | 
			
		||||
          onGoUp={n > 0 ? () => swapRules(n, n - 1) : undefined}
 | 
			
		||||
          onGoUp={n > 0 ? () => { swapRules(n, n - 1); } : undefined}
 | 
			
		||||
          {...p}
 | 
			
		||||
        />
 | 
			
		||||
      ))}
 | 
			
		||||
@@ -153,7 +153,7 @@ function NWRuleEdit(p: {
 | 
			
		||||
            editable={p.editable}
 | 
			
		||||
            onChange={p.onChange}
 | 
			
		||||
            selector={s}
 | 
			
		||||
            onDelete={() => deleteSelector(n)}
 | 
			
		||||
            onDelete={() => { deleteSelector(n); }}
 | 
			
		||||
          />
 | 
			
		||||
        ))}
 | 
			
		||||
      </CardContent>
 | 
			
		||||
 
 | 
			
		||||
@@ -130,7 +130,7 @@ function HostReservationWidget(p: {
 | 
			
		||||
            value={p.host.mac}
 | 
			
		||||
            onValueChange={(v) => {
 | 
			
		||||
              p.host.mac = v!;
 | 
			
		||||
              p.onChange?.();
 | 
			
		||||
              p.onChange();
 | 
			
		||||
            }}
 | 
			
		||||
          />
 | 
			
		||||
        )}
 | 
			
		||||
@@ -142,7 +142,7 @@ function HostReservationWidget(p: {
 | 
			
		||||
          value={p.host.ip}
 | 
			
		||||
          onValueChange={(v) => {
 | 
			
		||||
            p.host.ip = v!;
 | 
			
		||||
            p.onChange?.();
 | 
			
		||||
            p.onChange();
 | 
			
		||||
          }}
 | 
			
		||||
        />
 | 
			
		||||
      </div>
 | 
			
		||||
 
 | 
			
		||||
@@ -12,7 +12,7 @@ export function PortInput(p: {
 | 
			
		||||
      value={p.value?.toString() ?? ""}
 | 
			
		||||
      type="number"
 | 
			
		||||
      onValueChange={(v) => {
 | 
			
		||||
        p.onChange?.(sanitizePort(v));
 | 
			
		||||
        p.onChange(sanitizePort(v));
 | 
			
		||||
      }}
 | 
			
		||||
      checkValue={(v) => Number(v) <= 65535}
 | 
			
		||||
    />
 | 
			
		||||
 
 | 
			
		||||
@@ -24,7 +24,7 @@ export function RadioGroupInput(p: {
 | 
			
		||||
      <RadioGroup
 | 
			
		||||
        row
 | 
			
		||||
        value={p.value}
 | 
			
		||||
        onChange={(_ev, v) => p.onValueChange?.(v)}
 | 
			
		||||
        onChange={(_ev, v) => { p.onValueChange(v); }}
 | 
			
		||||
      >
 | 
			
		||||
        {p.options.map((o) => (
 | 
			
		||||
          <FormControlLabel
 | 
			
		||||
 
 | 
			
		||||
@@ -33,7 +33,7 @@ export function SelectInput(p: {
 | 
			
		||||
      <Select
 | 
			
		||||
        value={p.value ?? ""}
 | 
			
		||||
        label={p.label}
 | 
			
		||||
        onChange={(e) => p.onValueChange(e.target.value)}
 | 
			
		||||
        onChange={(e) => { p.onValueChange(e.target.value); }}
 | 
			
		||||
      >
 | 
			
		||||
        {p.options.map((e) => (
 | 
			
		||||
          <MenuItem
 | 
			
		||||
 
 | 
			
		||||
@@ -260,7 +260,7 @@ function IPSection(p: {
 | 
			
		||||
  const confirm = useConfirm();
 | 
			
		||||
 | 
			
		||||
  const toggleNetwork = async () => {
 | 
			
		||||
    if (!!p.config) {
 | 
			
		||||
    if (p.config) {
 | 
			
		||||
      if (
 | 
			
		||||
        !(await confirm(
 | 
			
		||||
          `Do you really want to disable IPv${p.version} on this network? Specific configuration will be deleted!`
 | 
			
		||||
@@ -268,11 +268,11 @@ function IPSection(p: {
 | 
			
		||||
      )
 | 
			
		||||
        return;
 | 
			
		||||
 | 
			
		||||
      p.onChange?.(undefined);
 | 
			
		||||
      p.onChange(undefined);
 | 
			
		||||
      return;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    p.onChange?.({
 | 
			
		||||
    p.onChange({
 | 
			
		||||
      bridge_address: p.version === 4 ? "192.168.1.1" : "fd00::1",
 | 
			
		||||
      prefix: p.version === 4 ? 24 : 8,
 | 
			
		||||
    });
 | 
			
		||||
@@ -298,7 +298,7 @@ function IPSection(p: {
 | 
			
		||||
      p.config!.dhcp = undefined;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    p.onChange?.(p.config);
 | 
			
		||||
    p.onChange(p.config);
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  const toggleNAT = async (v: boolean) => {
 | 
			
		||||
@@ -315,7 +315,7 @@ function IPSection(p: {
 | 
			
		||||
      p.config!.nat = undefined;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    p.onChange?.(p.config);
 | 
			
		||||
    p.onChange(p.config);
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  if (!p.config && !p.editable) return <></>;
 | 
			
		||||
@@ -338,10 +338,10 @@ function IPSection(p: {
 | 
			
		||||
              editable={p.editable}
 | 
			
		||||
              label="Bridge address"
 | 
			
		||||
              version={p.version}
 | 
			
		||||
              value={p.config?.bridge_address}
 | 
			
		||||
              value={p.config.bridge_address}
 | 
			
		||||
              onValueChange={(v) => {
 | 
			
		||||
                p.config!.bridge_address = v ?? "";
 | 
			
		||||
                p.onChange?.(p.config);
 | 
			
		||||
                p.onChange(p.config);
 | 
			
		||||
              }}
 | 
			
		||||
            />
 | 
			
		||||
 | 
			
		||||
@@ -352,7 +352,7 @@ function IPSection(p: {
 | 
			
		||||
              type="number"
 | 
			
		||||
              onValueChange={(v) => {
 | 
			
		||||
                p.config!.prefix = Number(v);
 | 
			
		||||
                p.onChange?.(p.config);
 | 
			
		||||
                p.onChange(p.config);
 | 
			
		||||
              }}
 | 
			
		||||
              size={
 | 
			
		||||
                p.version === 4 ? { min: 0, max: 32 } : { min: 0, max: 128 }
 | 
			
		||||
@@ -407,7 +407,7 @@ function IPSection(p: {
 | 
			
		||||
            dhcp={p.config.dhcp}
 | 
			
		||||
            onChange={(d) => {
 | 
			
		||||
              p.config!.dhcp = d;
 | 
			
		||||
              p.onChange?.(p.config);
 | 
			
		||||
              p.onChange(p.config);
 | 
			
		||||
            }}
 | 
			
		||||
          />
 | 
			
		||||
        </EditSection>
 | 
			
		||||
@@ -431,7 +431,7 @@ function IPSection(p: {
 | 
			
		||||
              nat={p.config.nat}
 | 
			
		||||
              onChange={(n) => {
 | 
			
		||||
                p.config!.nat = n;
 | 
			
		||||
                p.onChange?.(p.config);
 | 
			
		||||
                p.onChange(p.config);
 | 
			
		||||
              }}
 | 
			
		||||
            />
 | 
			
		||||
          )}
 | 
			
		||||
 
 | 
			
		||||
@@ -29,13 +29,13 @@ export function NetworkStatusWidget(p: {
 | 
			
		||||
    }
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  const changedAction = () => setState(undefined);
 | 
			
		||||
  const changedAction = () => { setState(undefined); };
 | 
			
		||||
 | 
			
		||||
  React.useEffect(() => {
 | 
			
		||||
    refresh();
 | 
			
		||||
    const i = setInterval(() => refresh(), 3000);
 | 
			
		||||
 | 
			
		||||
    return () => clearInterval(i);
 | 
			
		||||
    return () => { clearInterval(i); };
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  if (state === undefined)
 | 
			
		||||
 
 | 
			
		||||
@@ -95,7 +95,7 @@ export function TokenRawRightsEditor(p: {
 | 
			
		||||
              </TableCell>
 | 
			
		||||
              {p.editable && (
 | 
			
		||||
                <TableCell style={{ width: "100px" }}>
 | 
			
		||||
                  <IconButton onClick={() => deleteRule(num)}>
 | 
			
		||||
                  <IconButton onClick={() => { deleteRule(num); }}>
 | 
			
		||||
                    <Tooltip title="Remove the rule">
 | 
			
		||||
                      <DeleteIcon />
 | 
			
		||||
                    </Tooltip>
 | 
			
		||||
 
 | 
			
		||||
@@ -576,7 +576,7 @@ export function TokenRightsEditor(p: {
 | 
			
		||||
                  right={{ verb: "GET", path: `/api/nwfilter/${v.uuid}` }}
 | 
			
		||||
                  parent={{ verb: "GET", path: "/api/nwfilter/*" }}
 | 
			
		||||
                />
 | 
			
		||||
                {ServerApi.Config.builtin_nwfilter_rules.includes(v.name!) ? (
 | 
			
		||||
                {ServerApi.Config.builtin_nwfilter_rules.includes(v.name) ? (
 | 
			
		||||
                  <TableCell></TableCell>
 | 
			
		||||
                ) : (
 | 
			
		||||
                  <CellRight
 | 
			
		||||
@@ -585,7 +585,7 @@ export function TokenRightsEditor(p: {
 | 
			
		||||
                    parent={{ verb: "PUT", path: "/api/nwfilter/*" }}
 | 
			
		||||
                  />
 | 
			
		||||
                )}
 | 
			
		||||
                {ServerApi.Config.builtin_nwfilter_rules.includes(v.name!) ? (
 | 
			
		||||
                {ServerApi.Config.builtin_nwfilter_rules.includes(v.name) ? (
 | 
			
		||||
                  <TableCell></TableCell>
 | 
			
		||||
                ) : (
 | 
			
		||||
                  <CellRight
 | 
			
		||||
@@ -767,7 +767,7 @@ function RouteRight(p: RightOpts): React.ReactElement {
 | 
			
		||||
  const parentActivated =
 | 
			
		||||
    !!p.parent &&
 | 
			
		||||
    p.token.rights.findIndex(
 | 
			
		||||
      (r) => r.verb === p.parent?.verb && r.path === p.parent?.path
 | 
			
		||||
      (r) => r.verb === p.parent?.verb && r.path === p.parent.path
 | 
			
		||||
    ) !== -1;
 | 
			
		||||
 | 
			
		||||
  const toggle = (a: boolean) => {
 | 
			
		||||
@@ -804,7 +804,7 @@ function RouteRight(p: RightOpts): React.ReactElement {
 | 
			
		||||
              <Checkbox
 | 
			
		||||
                checked={activated || parentActivated}
 | 
			
		||||
                disabled={!p.editable || parentActivated}
 | 
			
		||||
                onChange={(_e, a) => toggle(a)}
 | 
			
		||||
                onChange={(_e, a) => { toggle(a); }}
 | 
			
		||||
              />
 | 
			
		||||
            }
 | 
			
		||||
            label={p.label}
 | 
			
		||||
@@ -814,7 +814,7 @@ function RouteRight(p: RightOpts): React.ReactElement {
 | 
			
		||||
            <Checkbox
 | 
			
		||||
              checked={activated || parentActivated}
 | 
			
		||||
              disabled={!p.editable || parentActivated}
 | 
			
		||||
              onChange={(_e, a) => toggle(a)}
 | 
			
		||||
              onChange={(_e, a) => { toggle(a); }}
 | 
			
		||||
            />
 | 
			
		||||
          </span>
 | 
			
		||||
        )}
 | 
			
		||||
 
 | 
			
		||||
@@ -222,7 +222,7 @@ function VMDetailsTabGeneral(p: DetailsInnerProps): React.ReactElement {
 | 
			
		||||
                  : "Add a new group instead of using existing one"
 | 
			
		||||
              }
 | 
			
		||||
            >
 | 
			
		||||
              <IconButton onClick={() => setAddGroup(!addGroup)}>
 | 
			
		||||
              <IconButton onClick={() => { setAddGroup(!addGroup); }}>
 | 
			
		||||
                {addGroup ? <ListIcon /> : <AddIcon />}
 | 
			
		||||
              </IconButton>
 | 
			
		||||
            </Tooltip>
 | 
			
		||||
 
 | 
			
		||||
@@ -31,13 +31,13 @@ export function VMStatusWidget(p: {
 | 
			
		||||
    }
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  const changedAction = () => setState(undefined);
 | 
			
		||||
  const changedAction = () => { setState(undefined); };
 | 
			
		||||
 | 
			
		||||
  React.useEffect(() => {
 | 
			
		||||
    refresh();
 | 
			
		||||
    const i = setInterval(() => refresh(), 3000);
 | 
			
		||||
 | 
			
		||||
    return () => clearInterval(i);
 | 
			
		||||
    return () => { clearInterval(i); };
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  if (state === undefined)
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user