pierre/VirtWeb
1
0
Fork 0
Code Issues 1 Pull Requests 5 Packages Projects Releases Wiki Activity

WIP ESLint
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Pierre HUBERT 2025-03-28 12:12:11 +01:00
parent 9a905e83f7
commit 3bf8859ff9
20 changed files with 129 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
virtweb_frontend/eslint.config.js
View File

@ -1,12 +1,11 @@
import js from "@eslint/js"; import js from "@eslint/js";
import reactDom from 'eslint-plugin-react-dom'; import reactDom from "eslint-plugin-react-dom";
import reactHooks from "eslint-plugin-react-hooks"; import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh"; import reactRefresh from "eslint-plugin-react-refresh";
import reactX from 'eslint-plugin-react-x'; import reactX from "eslint-plugin-react-x";
import globals from "globals"; import globals from "globals";
import tseslint from "typescript-eslint"; import tseslint from "typescript-eslint";
export default tseslint.config( export default tseslint.config(
{ ignores: ["dist"] }, { ignores: ["dist"] },
{ {
@ -38,7 +37,17 @@ export default tseslint.config(
], ],
...reactX.configs["recommended-typescript"].rules, ...reactX.configs["recommended-typescript"].rules,
...reactDom.configs.recommended.rules, ...reactDom.configs.recommended.rules,
"@typescript-eslint/no-non-null-assertion": "off" "@typescript-eslint/no-non-null-assertion": "off",
"@typescript-eslint/no-misused-promises": "off",
"@typescript-eslint/no-floating-promises": "off",
"@typescript-eslint/restrict-template-expressions": "off",
"@typescript-eslint/no-extraneous-class": "off",
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/no-unsafe-assignment": "off",
"@typescript-eslint/no-unsafe-return": "off",
"@typescript-eslint/no-unsafe-call": "off",
"@typescript-eslint/no-unsafe-argument": "off",
"react-refresh/only-export-components": "off",
}, },
} }
); );

2
virtweb_frontend/src/api/ApiClient.ts
View File

@ -26,7 +26,7 @@ export class APIClient {
* Get backend URL * Get backend URL
*/ */
static backendURL(): string { static backendURL(): string {
const URL = import.meta.env.VITE_APP_BACKEND ?? ""; const URL = String(import.meta.env.VITE_APP_BACKEND ?? "");
if (URL.length === 0) throw new Error("Backend URL undefined!"); if (URL.length === 0) throw new Error("Backend URL undefined!");
return URL; return URL;
} }

17
virtweb_frontend/src/routes/IsoFilesRoute.tsx
View File

@ -96,7 +96,7 @@ function UploadIsoFileCard(p: {
p.onFileUploaded(); p.onFileUploaded();
} catch (e) { } catch (e) {
console.error(e); console.error(e);
await alert("Failed to perform file upload! " + e); await alert(`Failed to perform file upload! ${e}`);
} }
setUploadProgress(null); setUploadProgress(null);
@ -120,7 +120,9 @@ function UploadIsoFileCard(p: {
value={value} value={value}
onChange={handleChange} onChange={handleChange}
style={{ flex: 1 }} style={{ flex: 1 }}
inputProps={{ accept: ServerApi.Config.iso_mimetypes.join(",") }} slotProps={{
htmlInput: { accept: ServerApi.Config.iso_mimetypes.join(",") },
}}
/> />
{value && <Button onClick={upload}>Upload file</Button>} {value && <Button onClick={upload}>Upload file</Button>}
@ -166,14 +168,18 @@ function UploadIsoFileFromUrlCard(p: {
label="URL" label="URL"
value={url} value={url}
style={{ flex: 3 }} style={{ flex: 3 }}
onChange={(e) => { setURL(e.target.value); }} onChange={(e) => {
setURL(e.target.value);
}}
/> />
<span style={{ width: "10px" }}></span> <span style={{ width: "10px" }}></span>
<TextField <TextField
label="Filename" label="Filename"
value={actualFileName} value={actualFileName}
style={{ flex: 2 }} style={{ flex: 2 }}
onChange={(e) => { setFilename(e.target.value); }} onChange={(e) => {
setFilename(e.target.value);
}}
/> />
{url !== "" && actualFileName !== "" && ( {url !== "" && actualFileName !== "" && (
<Button onClick={upload}>Upload file</Button> <Button onClick={upload}>Upload file</Button>
@ -238,7 +244,7 @@ function IsoFilesList(p: {
</Typography> </Typography>
); );
const columns: GridColDef[] = [ const columns: GridColDef<IsoFile>[] = [
{ field: "filename", headerName: "File name", flex: 3 }, { field: "filename", headerName: "File name", flex: 3 },
{ {
field: "size", field: "size",
@ -303,7 +309,6 @@ function IsoFilesList(p: {
getRowId={(c) => c.filename} getRowId={(c) => c.filename}
rows={p.list} rows={p.list}
columns={columns} columns={columns}
autoHeight={true}
/> />
</VirtWebPaper> </VirtWebPaper>
</> </>

2
virtweb_frontend/src/utils/FilesUtils.ts
View File

@ -1,4 +1,4 @@
export async function downloadBlob(blob: Blob, filename: string) { export function downloadBlob(blob: Blob, filename: string) {
const url = URL.createObjectURL(blob); const url = URL.createObjectURL(blob);
const link = document.createElement("a"); const link = document.createElement("a");

1
virtweb_frontend/src/widgets/forms/MACInput.tsx
View File

@ -1,3 +1,4 @@
/* eslint-disable @typescript-eslint/no-unnecessary-condition */
import { TextInput } from "./TextInput"; import { TextInput } from "./TextInput";
export function MACInput(p: { export function MACInput(p: {

19
virtweb_frontend/src/widgets/forms/NWFilterRules.tsx
View File

@ -1,3 +1,4 @@
/* eslint-disable react-x/no-array-index-key */
import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward"; import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward"; import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
import DeleteIcon from "@mui/icons-material/Delete"; import DeleteIcon from "@mui/icons-material/Delete";
@ -66,9 +67,19 @@ export function NWFilterRules(p: {
deleteRule(n); deleteRule(n);
}} }}
onGoDown={ 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} {...p}
/> />
))} ))}
@ -153,7 +164,9 @@ function NWRuleEdit(p: {
editable={p.editable} editable={p.editable}
onChange={p.onChange} onChange={p.onChange}
selector={s} selector={s}
onDelete={() => { deleteSelector(n); }} onDelete={() => {
deleteSelector(n);
}}
/> />
))} ))}
</CardContent> </CardContent>

1
virtweb_frontend/src/widgets/forms/NetDHCPHostReservations.tsx
View File

@ -1,3 +1,4 @@
/* eslint-disable react-x/no-array-index-key */
import { mdiIp } from "@mdi/js"; import { mdiIp } from "@mdi/js";
import Icon from "@mdi/react"; import Icon from "@mdi/react";
import DeleteIcon from "@mui/icons-material/Delete"; import DeleteIcon from "@mui/icons-material/Delete";

1
virtweb_frontend/src/widgets/forms/NetNatConfiguration.tsx
View File

@ -54,6 +54,7 @@ export function NetNatConfiguration(p: {
<> <>
{p.nat.map((e, num) => ( {p.nat.map((e, num) => (
<NatEntryForm <NatEntryForm
// eslint-disable-next-line react-x/no-array-index-key
key={num} key={num}
{...p} {...p}
entry={e} entry={e}

16
virtweb_frontend/src/widgets/forms/TextInput.tsx
View File

@ -2,7 +2,7 @@ import { TextField } from "@mui/material";
import { LenConstraint } from "../../api/ServerApi"; import { LenConstraint } from "../../api/ServerApi";
/** /**
* Couple / Member property edition * Text input property edition
*/ */
export function TextInput(p: { export function TextInput(p: {
label?: string; label?: string;
@ -42,12 +42,14 @@ export function TextInput(p: {
e.target.value.length === 0 ? undefined : e.target.value e.target.value.length === 0 ? undefined : e.target.value
) )
} }
inputProps={{ slotProps={{
maxLength: p.size?.max, htmlInput: {
}} maxLength: p.size?.max,
InputProps={{ },
readOnly: !p.editable, input: {
type: p.type, readOnly: !p.editable,
type: p.type,
},
}} }}
variant={"standard"} variant={"standard"}
style={p.style ?? { width: "100%", marginBottom: "15px" }} style={p.style ?? { width: "100%", marginBottom: "15px" }}

1
virtweb_frontend/src/widgets/forms/VMDisksList.tsx
View File

@ -40,6 +40,7 @@ export function VMDisksList(p: {
{/* disks list */} {/* disks list */}
{p.vm.disks.map((d, num) => ( {p.vm.disks.map((d, num) => (
<DiskInfo <DiskInfo
// eslint-disable-next-line react-x/no-array-index-key
key={num} key={num}
editable={p.editable} editable={p.editable}
disk={d} disk={d}

1
virtweb_frontend/src/widgets/forms/VMNetworkFilterParameters.tsx
View File

@ -1,3 +1,4 @@
/* eslint-disable react-x/no-array-index-key */
import DeleteIcon from "@mui/icons-material/Delete"; import DeleteIcon from "@mui/icons-material/Delete";
import { import {
Button, Button,

15
virtweb_frontend/src/widgets/forms/VMSelectIsoInput.tsx
View File

@ -19,7 +19,7 @@ export function VMSelectIsoInput(p: {
attachedISOs: string[]; attachedISOs: string[];
onChange: (newVal: string[]) => void; onChange: (newVal: string[]) => void;
}): React.ReactElement { }): React.ReactElement {
if (!p.attachedISOs && !p.editable) return <></>; if (p.attachedISOs.length === 0 && !p.editable) return <></>;
return ( return (
<> <>
@ -27,7 +27,7 @@ export function VMSelectIsoInput(p: {
const iso = p.isoList.find((d) => d.filename === isoName); const iso = p.isoList.find((d) => d.filename === isoName);
return ( return (
<ListItem <ListItem
key={num} key={isoName}
secondaryAction={ secondaryAction={
p.editable && ( p.editable && (
<IconButton <IconButton
@ -69,12 +69,11 @@ export function VMSelectIsoInput(p: {
} }
}} }}
options={p.isoList.map((i) => { options={p.isoList.map((i) => {
return { return {
label: `${i.filename} ${filesize(i.size)}`, label: `${i.filename} ${filesize(i.size)}`,
value: i.filename, value: i.filename,
}; };
}) })}
}
/> />
</> </>
); );

6
virtweb_frontend/src/widgets/net/NetworkDetails.tsx
View File

@ -25,7 +25,7 @@ interface DetailsProps {
} }
export function NetworkDetails(p: DetailsProps): React.ReactElement { export function NetworkDetails(p: DetailsProps): React.ReactElement {
const [nicsList, setNicsList] = React.useState<string[] | any>(); const [nicsList, setNicsList] = React.useState<string[] | undefined>();
const load = async () => { const load = async () => {
setNicsList(await ServerApi.GetNetworksList()); setNicsList(await ServerApi.GetNetworksList());
@ -36,7 +36,7 @@ export function NetworkDetails(p: DetailsProps): React.ReactElement {
loadKey={"1"} loadKey={"1"}
load={load} load={load}
errMsg="Failed to load the list of host network cards!" errMsg="Failed to load the list of host network cards!"
build={() => <NetworkDetailsInner nicsList={nicsList} {...p} />} build={() => <NetworkDetailsInner nicsList={nicsList!} {...p} />}
/> />
); );
} }
@ -306,7 +306,7 @@ function IPSection(p: {
p.config!.nat = []; p.config!.nat = [];
} else { } else {
if ( if (
(p.config?.nat?.length ?? 0 > 0) && (p.config?.nat?.length ?? 0) > 0 &&
!(await confirm( !(await confirm(
`Do you really want to disable IPv${p.version} NAT port forwarding on this network? Specific configuration will be deleted!` `Do you really want to disable IPv${p.version} NAT port forwarding on this network? Specific configuration will be deleted!`
)) ))

8
virtweb_frontend/src/widgets/nwfilter/NWFilterDetails.tsx
View File

@ -28,7 +28,9 @@ interface DetailsProps {
} }
export function NWFilterDetails(p: DetailsProps): ReactElement { export function NWFilterDetails(p: DetailsProps): ReactElement {
const [nwFiltersList, setNwFiltersList] = React.useState<NWFilter[] | any>(); const [nwFiltersList, setNwFiltersList] = React.useState<
NWFilter[] | undefined
>();
const load = async () => { const load = async () => {
setNwFiltersList(await NWFilterApi.GetList()); setNwFiltersList(await NWFilterApi.GetList());
@ -40,7 +42,7 @@ export function NWFilterDetails(p: DetailsProps): ReactElement {
load={load} load={load}
errMsg="Failed to load the list of network filters!" errMsg="Failed to load the list of network filters!"
build={() => ( build={() => (
<NetworkFilterDetailsInner nwFiltersList={nwFiltersList} {...p} /> <NetworkFilterDetailsInner nwFiltersList={nwFiltersList!} {...p} />
)} )}
/> />
); );
@ -116,7 +118,7 @@ function NetworkFilterDetailsTabGeneral(
p.nwfilter.name = v ?? ""; p.nwfilter.name = v ?? "";
p.onChange?.(); p.onChange?.();
}} }}
checkValue={(v) => /^[a-zA-Z0-9\_\-]+$/.test(v)} checkValue={(v) => /^[a-zA-Z0-9_-]+$/.test(v)}
size={ServerApi.Config.constraints.nwfilter_name_size} size={ServerApi.Config.constraints.nwfilter_name_size}
/> />

4
virtweb_frontend/src/widgets/tokens/APITokenDetails.tsx
View File

@ -161,14 +161,14 @@ function APITokenTabGeneral(p: DetailsInnerProps): React.ReactElement {
{p.status === TokenWidgetStatus.Create && ( {p.status === TokenWidgetStatus.Create && (
<RadioGroupInput <RadioGroupInput
{...p} {...p}
editable={p.status === TokenWidgetStatus.Create} editable={true}
options={[ options={[
{ label: "IPv4", value: "4" }, { label: "IPv4", value: "4" },
{ label: "IPv6", value: "6" }, { label: "IPv6", value: "6" },
]} ]}
value={ipVersion.toString()} value={ipVersion.toString()}
onValueChange={(v) => { onValueChange={(v) => {
setIpVersion(Number(v) as any); setIpVersion(Number(v) as 4 | 6);
}} }}
label="Token IP restriction version" label="Token IP restriction version"
/> />

7
virtweb_frontend/src/widgets/tokens/TokenRawRightsEditor.tsx
View File

@ -63,6 +63,7 @@ export function TokenRawRightsEditor(p: {
</TableHead> </TableHead>
<TableBody> <TableBody>
{p.token.rights.map((r, num) => ( {p.token.rights.map((r, num) => (
// eslint-disable-next-line react-x/no-array-index-key
<TableRow key={num} hover> <TableRow key={num} hover>
<TableCell style={{ width: "100px" }}> <TableCell style={{ width: "100px" }}>
<SelectInput <SelectInput
@ -95,7 +96,11 @@ export function TokenRawRightsEditor(p: {
</TableCell> </TableCell>
{p.editable && ( {p.editable && (
<TableCell style={{ width: "100px" }}> <TableCell style={{ width: "100px" }}>
<IconButton onClick={() => { deleteRule(num); }}> <IconButton
onClick={() => {
deleteRule(num);
}}
>
<Tooltip title="Remove the rule"> <Tooltip title="Remove the rule">
<DeleteIcon /> <DeleteIcon />
</Tooltip> </Tooltip>

32
virtweb_frontend/src/widgets/tokens/TokenRightsEditor.tsx
View File

@ -85,8 +85,8 @@ export function TokenRightsEditor(p: {
</TableRow> </TableRow>
{/* Per VM operations */} {/* Per VM operations */}
{p.vms.map((v, n) => ( {p.vms.map((v) => (
<TableRow hover key={n}> <TableRow hover key={v.uuid}>
<TableCell>{v.name}</TableCell> <TableCell>{v.name}</TableCell>
<CellRight <CellRight
{...p} {...p}
@ -185,8 +185,8 @@ export function TokenRightsEditor(p: {
</TableRow> </TableRow>
{/* Per VM operations */} {/* Per VM operations */}
{p.vms.map((v, n) => ( {p.vms.map((v) => (
<TableRow hover key={n}> <TableRow hover key={v.uuid}>
<TableCell>{v.name}</TableCell> <TableCell>{v.name}</TableCell>
<CellRight <CellRight
{...p} {...p}
@ -306,8 +306,8 @@ export function TokenRightsEditor(p: {
</TableRow> </TableRow>
{/* Per VM operations */} {/* Per VM operations */}
{p.groups.map((v, n) => ( {p.groups.map((v) => (
<TableRow hover key={n}> <TableRow hover key={v}>
<TableCell>{v}</TableCell> <TableCell>{v}</TableCell>
<CellRight <CellRight
{...p} {...p}
@ -448,8 +448,8 @@ export function TokenRightsEditor(p: {
</TableRow> </TableRow>
{/* Per network operations */} {/* Per network operations */}
{p.networks.map((v, n) => ( {p.networks.map((v) => (
<TableRow hover key={n}> <TableRow hover key={v.uuid}>
<TableCell>{v.name}</TableCell> <TableCell>{v.name}</TableCell>
<CellRight <CellRight
{...p} {...p}
@ -568,8 +568,8 @@ export function TokenRightsEditor(p: {
</TableRow> </TableRow>
{/* Per network filter operations */} {/* Per network filter operations */}
{p.nwFilters.map((v, n) => ( {p.nwFilters.map((v) => (
<TableRow hover key={n}> <TableRow hover key={v.uuid}>
<TableCell>{v.name}</TableCell> <TableCell>{v.name}</TableCell>
<CellRight <CellRight
{...p} {...p}
@ -645,8 +645,8 @@ export function TokenRightsEditor(p: {
</TableRow> </TableRow>
{/* Per API token operations */} {/* Per API token operations */}
{p.tokens.map((v, n) => ( {p.tokens.map((v) => (
<TableRow hover key={n}> <TableRow hover key={v.id}>
<TableCell>{v.name}</TableCell> <TableCell>{v.name}</TableCell>
<CellRight <CellRight
{...p} {...p}
@ -804,7 +804,9 @@ function RouteRight(p: RightOpts): React.ReactElement {
<Checkbox <Checkbox
checked={activated || parentActivated} checked={activated || parentActivated}
disabled={!p.editable || parentActivated} disabled={!p.editable || parentActivated}
onChange={(_e, a) => { toggle(a); }} onChange={(_e, a) => {
toggle(a);
}}
/> />
} }
label={p.label} label={p.label}
@ -814,7 +816,9 @@ function RouteRight(p: RightOpts): React.ReactElement {
<Checkbox <Checkbox
checked={activated || parentActivated} checked={activated || parentActivated}
disabled={!p.editable || parentActivated} disabled={!p.editable || parentActivated}
onChange={(_e, a) => { toggle(a); }} onChange={(_e, a) => {
toggle(a);
}}
/> />
</span> </span>
)} )}

30
virtweb_frontend/src/widgets/vms/VMDetails.tsx
View File

@ -35,14 +35,16 @@ interface DetailsProps {
} }
export function VMDetails(p: DetailsProps): React.ReactElement { export function VMDetails(p: DetailsProps): React.ReactElement {
const [groupsList, setGroupsList] = React.useState<string[] | any>(); const [groupsList, setGroupsList] = React.useState<string[] | undefined>();
const [isoList, setIsoList] = React.useState<IsoFile[] | any>(); const [isoList, setIsoList] = React.useState<IsoFile[] | undefined>();
const [vcpuCombinations, setVCPUCombinations] = React.useState< const [vcpuCombinations, setVCPUCombinations] = React.useState<
number[] | any number[] | undefined
>();
const [networksList, setNetworksList] = React.useState<
NetworkInfo[] | undefined
>(); >();
const [networksList, setNetworksList] = React.useState<NetworkInfo[] | any>();
const [networkFiltersList, setNetworkFiltersList] = React.useState< const [networkFiltersList, setNetworkFiltersList] = React.useState<
NWFilter[] | any NWFilter[] | undefined
>(); >();
const load = async () => { const load = async () => {
@ -60,11 +62,11 @@ export function VMDetails(p: DetailsProps): React.ReactElement {
errMsg="Failed to load the list of ISO files" errMsg="Failed to load the list of ISO files"
build={() => ( build={() => (
<VMDetailsInner <VMDetailsInner
groupsList={groupsList} groupsList={groupsList!}
isoList={isoList} isoList={isoList!}
vcpuCombinations={vcpuCombinations} vcpuCombinations={vcpuCombinations!}
networksList={networksList} networksList={networksList!}
networkFiltersList={networkFiltersList} networkFiltersList={networkFiltersList!}
{...p} {...p}
/> />
)} )}
@ -202,7 +204,7 @@ function VMDetailsTabGeneral(p: DetailsInnerProps): React.ReactElement {
editable={p.editable} editable={p.editable}
label="Group" label="Group"
onValueChange={(v) => { onValueChange={(v) => {
p.vm.group = v! as any; p.vm.group = v!;
p.onChange?.(); p.onChange?.();
}} }}
value={p.vm.group} value={p.vm.group}
@ -222,7 +224,11 @@ function VMDetailsTabGeneral(p: DetailsInnerProps): React.ReactElement {
: "Add a new group instead of using existing one" : "Add a new group instead of using existing one"
} }
> >
<IconButton onClick={() => { setAddGroup(!addGroup); }}> <IconButton
onClick={() => {
setAddGroup(!addGroup);
}}
>
{addGroup ? <ListIcon /> : <AddIcon />} {addGroup ? <ListIcon /> : <AddIcon />}
</IconButton> </IconButton>
</Tooltip> </Tooltip>

6
virtweb_frontend/src/widgets/vms/VMScreenshot.tsx
View File

@ -9,7 +9,7 @@ export function VMScreenshot(p: { vm: VMInfo }): React.ReactElement {
string | undefined string | undefined
>(); >();
const int = React.useRef<any | undefined>(undefined); const int = React.useRef<NodeJS.Timeout | undefined>(undefined);
React.useEffect(() => { React.useEffect(() => {
const refresh = async () => { const refresh = async () => {
@ -25,7 +25,9 @@ export function VMScreenshot(p: { vm: VMInfo }): React.ReactElement {
if (int.current === undefined) { if (int.current === undefined) {
refresh(); refresh();
int.current = setInterval(() => refresh(), 5000); int.current = setInterval(() => {
refresh();
}, 5000);
} }
return () => { return () => {

13
virtweb_frontend/src/widgets/vms/VMStatusWidget.tsx
View File

@ -31,13 +31,19 @@ export function VMStatusWidget(p: {
} }
}; };
const changedAction = () => { setState(undefined); }; const changedAction = () => {
setState(undefined);
};
React.useEffect(() => { React.useEffect(() => {
refresh(); refresh();
const i = setInterval(() => refresh(), 3000); const i = setInterval(() => {
refresh();
}, 3000);
return () => { clearInterval(i); }; return () => {
clearInterval(i);
};
}); });
if (state === undefined) if (state === undefined)
@ -59,6 +65,7 @@ export function VMStatusWidget(p: {
icon={<PersonalVideoIcon />} icon={<PersonalVideoIcon />}
tooltip="Graphical remote control over the VM" tooltip="Graphical remote control over the VM"
performAction={async () => navigate(p.vm.VNCURL)} performAction={async () => navigate(p.vm.VNCURL)}
// eslint-disable-next-line @typescript-eslint/no-empty-function
onExecuted={() => {}} onExecuted={() => {}}
/> />
) )