mirror of
https://github.com/arcan1s/ahriman.git
synced 2026-03-04 17:29:48 +00:00
feat: brand-new interface
This was initally generated by ai, but later has been heavily edited. The reason why it has been implemented is that there are plans to implement more features to ui, but it becomes hard to add new features to plain js, so I decided to rewrite it in typescript. Yet because it is still ai slop, it is still possible to enable old interface via configuration, even though new interface is turned on by default to get feedback
This commit is contained in:
103
frontend/src/components/dialogs/DashboardDialog.tsx
Normal file
103
frontend/src/components/dialogs/DashboardDialog.tsx
Normal file
@@ -0,0 +1,103 @@
|
||||
/*
|
||||
* Copyright (c) 2021-2026 ahriman team.
|
||||
*
|
||||
* This file is part of ahriman
|
||||
* (see https://github.com/arcan1s/ahriman).
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
import { Box, Dialog, DialogContent, Grid, Typography } from "@mui/material";
|
||||
import { skipToken, useQuery } from "@tanstack/react-query";
|
||||
import PackageCountBarChart from "components/charts/PackageCountBarChart";
|
||||
import StatusPieChart from "components/charts/StatusPieChart";
|
||||
import DialogHeader from "components/common/DialogHeader";
|
||||
import { QueryKeys } from "hooks/QueryKeys";
|
||||
import { useClient } from "hooks/useClient";
|
||||
import { useRepository } from "hooks/useRepository";
|
||||
import type { InternalStatus } from "models/InternalStatus";
|
||||
import type React from "react";
|
||||
import { StatusHeaderStyles } from "theme/StatusColors";
|
||||
|
||||
interface DashboardDialogProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export default function DashboardDialog({ open, onClose }: DashboardDialogProps): React.JSX.Element {
|
||||
const client = useClient();
|
||||
const { current } = useRepository();
|
||||
|
||||
const { data: status } = useQuery<InternalStatus>({
|
||||
queryKey: current ? QueryKeys.status(current) : ["status"],
|
||||
queryFn: current ? () => client.fetch.fetchServerStatus(current) : skipToken,
|
||||
enabled: open,
|
||||
});
|
||||
|
||||
const headerStyle = status ? StatusHeaderStyles[status.status.status] : {};
|
||||
|
||||
return <Dialog open={open} onClose={onClose} maxWidth="lg" fullWidth>
|
||||
<DialogHeader onClose={onClose} sx={headerStyle}>
|
||||
System health
|
||||
</DialogHeader>
|
||||
|
||||
<DialogContent>
|
||||
{status &&
|
||||
<>
|
||||
<Grid container spacing={2} sx={{ mt: 1 }}>
|
||||
<Grid size={{ xs: 6, md: 3 }}>
|
||||
<Typography variant="body2" color="text.secondary" align="right">Repository name</Typography>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 6, md: 3 }}>
|
||||
<Typography variant="body2">{status.repository}</Typography>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 6, md: 3 }}>
|
||||
<Typography variant="body2" color="text.secondary" align="right">Repository architecture</Typography>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 6, md: 3 }}>
|
||||
<Typography variant="body2">{status.architecture}</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid container spacing={2} sx={{ mt: 1 }}>
|
||||
<Grid size={{ xs: 6, md: 3 }}>
|
||||
<Typography variant="body2" color="text.secondary" align="right">Current status</Typography>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 6, md: 3 }}>
|
||||
<Typography variant="body2">{status.status.status}</Typography>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 6, md: 3 }}>
|
||||
<Typography variant="body2" color="text.secondary" align="right">Updated at</Typography>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 6, md: 3 }}>
|
||||
<Typography variant="body2">{new Date(status.status.timestamp * 1000).toISOStringShort()}</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid container spacing={2} sx={{ mt: 2 }}>
|
||||
<Grid size={{ xs: 12, md: 6 }}>
|
||||
<Box sx={{ maxHeight: 300 }}>
|
||||
<PackageCountBarChart stats={status.stats} />
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12, md: 6 }}>
|
||||
<Box sx={{ maxHeight: 300, display: "flex", justifyContent: "center", alignItems: "center" }}>
|
||||
<StatusPieChart counters={status.packages} />
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
}
|
||||
</DialogContent>
|
||||
</Dialog>;
|
||||
}
|
||||
118
frontend/src/components/dialogs/KeyImportDialog.tsx
Normal file
118
frontend/src/components/dialogs/KeyImportDialog.tsx
Normal file
@@ -0,0 +1,118 @@
|
||||
/*
|
||||
* Copyright (c) 2021-2026 ahriman team.
|
||||
*
|
||||
* This file is part of ahriman
|
||||
* (see https://github.com/arcan1s/ahriman).
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
import PlayArrowIcon from "@mui/icons-material/PlayArrow";
|
||||
import RefreshIcon from "@mui/icons-material/Refresh";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
TextField,
|
||||
} from "@mui/material";
|
||||
import { ApiError } from "api/client/ApiError";
|
||||
import CodeBlock from "components/common/CodeBlock";
|
||||
import DialogHeader from "components/common/DialogHeader";
|
||||
import { useClient } from "hooks/useClient";
|
||||
import { useNotification } from "hooks/useNotification";
|
||||
import React, { useState } from "react";
|
||||
|
||||
interface KeyImportDialogProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export default function KeyImportDialog({ open, onClose }: KeyImportDialogProps): React.JSX.Element {
|
||||
const client = useClient();
|
||||
const { showSuccess, showError } = useNotification();
|
||||
|
||||
const [fingerprint, setFingerprint] = useState("");
|
||||
const [server, setServer] = useState("keyserver.ubuntu.com");
|
||||
const [keyBody, setKeyBody] = useState("");
|
||||
|
||||
const handleClose = (): void => {
|
||||
setFingerprint("");
|
||||
setServer("keyserver.ubuntu.com");
|
||||
setKeyBody("");
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleFetch: () => Promise<void> = async () => {
|
||||
if (!fingerprint || !server) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const result = await client.service.servicePGPFetch(fingerprint, server);
|
||||
setKeyBody(result.key);
|
||||
} catch (exception) {
|
||||
const detail = ApiError.errorDetail(exception);
|
||||
showError("Action failed", `Could not fetch key: ${detail}`);
|
||||
}
|
||||
};
|
||||
|
||||
const handleImport: () => Promise<void> = async () => {
|
||||
if (!fingerprint || !server) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await client.service.servicePGPImport({ key: fingerprint, server });
|
||||
handleClose();
|
||||
showSuccess("Success", `Key ${fingerprint} has been imported`);
|
||||
} catch (exception) {
|
||||
const detail = ApiError.errorDetail(exception);
|
||||
showError("Action failed", `Could not import key ${fingerprint} from ${server}: ${detail}`);
|
||||
}
|
||||
};
|
||||
|
||||
return <Dialog open={open} onClose={handleClose} maxWidth="lg" fullWidth>
|
||||
<DialogHeader onClose={handleClose}>
|
||||
Import key from PGP server
|
||||
</DialogHeader>
|
||||
|
||||
<DialogContent>
|
||||
<TextField
|
||||
label="fingerprint"
|
||||
placeholder="PGP key fingerprint"
|
||||
fullWidth
|
||||
margin="normal"
|
||||
value={fingerprint}
|
||||
onChange={event => setFingerprint(event.target.value)}
|
||||
/>
|
||||
<TextField
|
||||
label="key server"
|
||||
placeholder="PGP key server"
|
||||
fullWidth
|
||||
margin="normal"
|
||||
value={server}
|
||||
onChange={event => setServer(event.target.value)}
|
||||
/>
|
||||
{keyBody &&
|
||||
<Box sx={{ mt: 2 }}>
|
||||
<CodeBlock getText={() => keyBody} height={300} />
|
||||
</Box>
|
||||
}
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions>
|
||||
<Button onClick={() => void handleImport()} variant="contained" startIcon={<PlayArrowIcon />}>import</Button>
|
||||
<Button onClick={() => void handleFetch()} variant="contained" color="success" startIcon={<RefreshIcon />}>fetch</Button>
|
||||
</DialogActions>
|
||||
</Dialog>;
|
||||
}
|
||||
118
frontend/src/components/dialogs/LoginDialog.tsx
Normal file
118
frontend/src/components/dialogs/LoginDialog.tsx
Normal file
@@ -0,0 +1,118 @@
|
||||
/*
|
||||
* Copyright (c) 2021-2026 ahriman team.
|
||||
*
|
||||
* This file is part of ahriman
|
||||
* (see https://github.com/arcan1s/ahriman).
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
import PersonIcon from "@mui/icons-material/Person";
|
||||
import VisibilityIcon from "@mui/icons-material/Visibility";
|
||||
import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
IconButton,
|
||||
InputAdornment,
|
||||
TextField,
|
||||
} from "@mui/material";
|
||||
import { ApiError } from "api/client/ApiError";
|
||||
import DialogHeader from "components/common/DialogHeader";
|
||||
import { useAuth } from "hooks/useAuth";
|
||||
import { useNotification } from "hooks/useNotification";
|
||||
import React, { useState } from "react";
|
||||
|
||||
interface LoginDialogProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export default function LoginDialog({ open, onClose }: LoginDialogProps): React.JSX.Element {
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const { login } = useAuth();
|
||||
const { showSuccess, showError } = useNotification();
|
||||
|
||||
const handleClose = (): void => {
|
||||
setUsername("");
|
||||
setPassword("");
|
||||
setShowPassword(false);
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleSubmit: () => Promise<void> = async () => {
|
||||
if (!username || !password) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await login(username, password);
|
||||
handleClose();
|
||||
showSuccess("Logged in", `Successfully logged in as ${username}`);
|
||||
} catch (exception) {
|
||||
const detail = ApiError.errorDetail(exception);
|
||||
if (username === "admin" && password === "admin") {
|
||||
showError("Login error", "You've entered a password for user \"root\", did you make a typo in username?");
|
||||
} else {
|
||||
showError("Login error", `Could not login as ${username}: ${detail}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return <Dialog open={open} onClose={handleClose} maxWidth="xs" fullWidth>
|
||||
<DialogHeader onClose={handleClose}>
|
||||
Login
|
||||
</DialogHeader>
|
||||
|
||||
<DialogContent>
|
||||
<TextField
|
||||
label="username"
|
||||
fullWidth
|
||||
margin="normal"
|
||||
value={username}
|
||||
onChange={event => setUsername(event.target.value)}
|
||||
autoFocus
|
||||
/>
|
||||
<TextField
|
||||
label="password"
|
||||
fullWidth
|
||||
margin="normal"
|
||||
type={showPassword ? "text" : "password"}
|
||||
value={password}
|
||||
onChange={event => setPassword(event.target.value)}
|
||||
onKeyDown={event => {
|
||||
if (event.key === "Enter") {
|
||||
void handleSubmit();
|
||||
}
|
||||
}}
|
||||
slotProps={{
|
||||
input: {
|
||||
endAdornment:
|
||||
<InputAdornment position="end">
|
||||
<IconButton aria-label={showPassword ? "Hide password" : "Show password"} onClick={() => setShowPassword(!showPassword)} edge="end" size="small">
|
||||
{showPassword ? <VisibilityOffIcon /> : <VisibilityIcon />}
|
||||
</IconButton>
|
||||
</InputAdornment>,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions>
|
||||
<Button onClick={() => void handleSubmit()} variant="contained" startIcon={<PersonIcon />}>login</Button>
|
||||
</DialogActions>
|
||||
</Dialog>;
|
||||
}
|
||||
193
frontend/src/components/dialogs/PackageAddDialog.tsx
Normal file
193
frontend/src/components/dialogs/PackageAddDialog.tsx
Normal file
@@ -0,0 +1,193 @@
|
||||
/*
|
||||
* Copyright (c) 2021-2026 ahriman team.
|
||||
*
|
||||
* This file is part of ahriman
|
||||
* (see https://github.com/arcan1s/ahriman).
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
import AddIcon from "@mui/icons-material/Add";
|
||||
import DeleteIcon from "@mui/icons-material/Delete";
|
||||
import PlayArrowIcon from "@mui/icons-material/PlayArrow";
|
||||
import {
|
||||
Autocomplete,
|
||||
Box,
|
||||
Button,
|
||||
Checkbox,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
FormControlLabel,
|
||||
IconButton,
|
||||
TextField,
|
||||
} from "@mui/material";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { ApiError } from "api/client/ApiError";
|
||||
import DialogHeader from "components/common/DialogHeader";
|
||||
import RepositorySelect from "components/common/RepositorySelect";
|
||||
import { QueryKeys } from "hooks/QueryKeys";
|
||||
import { useClient } from "hooks/useClient";
|
||||
import { useDebounce } from "hooks/useDebounce";
|
||||
import { useNotification } from "hooks/useNotification";
|
||||
import { useSelectedRepository } from "hooks/useSelectedRepository";
|
||||
import type { AURPackage } from "models/AURPackage";
|
||||
import type { PackageActionRequest } from "models/PackageActionRequest";
|
||||
import React, { useRef, useState } from "react";
|
||||
|
||||
interface EnvironmentVariable {
|
||||
id: number;
|
||||
key: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
interface PackageAddDialogProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export default function PackageAddDialog({ open, onClose }: PackageAddDialogProps): React.JSX.Element {
|
||||
const client = useClient();
|
||||
const { showSuccess, showError } = useNotification();
|
||||
const repositorySelect = useSelectedRepository();
|
||||
|
||||
const [packageName, setPackageName] = useState("");
|
||||
const [refreshDatabase, setRefreshDatabase] = useState(true);
|
||||
const [environmentVariables, setEnvironmentVariables] = useState<EnvironmentVariable[]>([]);
|
||||
const variableIdCounter = useRef(0);
|
||||
|
||||
const handleClose = (): void => {
|
||||
setPackageName("");
|
||||
repositorySelect.reset();
|
||||
setRefreshDatabase(true);
|
||||
setEnvironmentVariables([]);
|
||||
onClose();
|
||||
};
|
||||
|
||||
const debouncedSearch = useDebounce(packageName, 500);
|
||||
|
||||
const { data: searchResults = [] } = useQuery<AURPackage[]>({
|
||||
queryKey: QueryKeys.search(debouncedSearch),
|
||||
queryFn: () => client.service.servicePackageSearch(debouncedSearch),
|
||||
enabled: debouncedSearch.length >= 3,
|
||||
});
|
||||
|
||||
const handleSubmit = async (action: "add" | "request"): Promise<void> => {
|
||||
if (!packageName) {
|
||||
return;
|
||||
}
|
||||
const repository = repositorySelect.selectedRepository;
|
||||
if (!repository) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const patches = environmentVariables.filter(variable => variable.key);
|
||||
const request: PackageActionRequest = { packages: [packageName], patches };
|
||||
if (action === "add") {
|
||||
request.refresh = refreshDatabase;
|
||||
await client.service.servicePackageAdd(repository, request);
|
||||
} else {
|
||||
await client.service.servicePackageRequest(repository, request);
|
||||
}
|
||||
handleClose();
|
||||
showSuccess("Success", `Packages ${packageName} have been ${action === "add" ? "added" : "requested"}`);
|
||||
} catch (exception) {
|
||||
const detail = ApiError.errorDetail(exception);
|
||||
showError("Action failed", `Package ${action} failed: ${detail}`);
|
||||
}
|
||||
};
|
||||
|
||||
return <Dialog open={open} onClose={handleClose} maxWidth="md" fullWidth>
|
||||
<DialogHeader onClose={handleClose}>
|
||||
Add new packages
|
||||
</DialogHeader>
|
||||
|
||||
<DialogContent>
|
||||
<RepositorySelect repositorySelect={repositorySelect} />
|
||||
|
||||
<Autocomplete
|
||||
freeSolo
|
||||
options={searchResults.map(pkg => pkg.package)}
|
||||
inputValue={packageName}
|
||||
onInputChange={(_, value) => setPackageName(value)}
|
||||
renderOption={(props, option) => {
|
||||
const pkg = searchResults.find(pkg => pkg.package === option);
|
||||
return (
|
||||
<li {...props} key={option}>
|
||||
{option}{pkg ? ` (${pkg.description})` : ""}
|
||||
</li>
|
||||
);
|
||||
}}
|
||||
renderInput={params =>
|
||||
<TextField {...params} label="package" placeholder="AUR package" margin="normal" />
|
||||
}
|
||||
/>
|
||||
|
||||
<FormControlLabel
|
||||
control={<Checkbox checked={refreshDatabase} onChange={(_, checked) => setRefreshDatabase(checked)} />}
|
||||
label="update pacman databases"
|
||||
/>
|
||||
|
||||
<Button
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
startIcon={<AddIcon />}
|
||||
onClick={() => {
|
||||
const id = variableIdCounter.current++;
|
||||
setEnvironmentVariables(prev => [...prev, { id, key: "", value: "" }]);
|
||||
}}
|
||||
sx={{ mt: 1 }}
|
||||
>
|
||||
add environment variable
|
||||
</Button>
|
||||
|
||||
{environmentVariables.map(variable =>
|
||||
<Box key={variable.id} sx={{ display: "flex", gap: 1, mt: 1, alignItems: "center" }}>
|
||||
<TextField
|
||||
size="small"
|
||||
placeholder="name"
|
||||
value={variable.key}
|
||||
onChange={event => {
|
||||
const newKey = event.target.value;
|
||||
setEnvironmentVariables(prev =>
|
||||
prev.map(entry => entry.id === variable.id ? { ...entry, key: newKey } : entry),
|
||||
);
|
||||
}}
|
||||
sx={{ flex: 1 }}
|
||||
/>
|
||||
<Box>=</Box>
|
||||
<TextField
|
||||
size="small"
|
||||
placeholder="value"
|
||||
value={variable.value}
|
||||
onChange={event => {
|
||||
const newValue = event.target.value;
|
||||
setEnvironmentVariables(prev =>
|
||||
prev.map(entry => entry.id === variable.id ? { ...entry, value: newValue } : entry),
|
||||
);
|
||||
}}
|
||||
sx={{ flex: 1 }}
|
||||
/>
|
||||
<IconButton size="small" color="error" aria-label="Remove variable" onClick={() => setEnvironmentVariables(prev => prev.filter(entry => entry.id !== variable.id))}>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</Box>,
|
||||
)}
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions>
|
||||
<Button onClick={() => void handleSubmit("add")} variant="contained" startIcon={<PlayArrowIcon />}>add</Button>
|
||||
<Button onClick={() => void handleSubmit("request")} variant="contained" color="success" startIcon={<AddIcon />}>request</Button>
|
||||
</DialogActions>
|
||||
</Dialog>;
|
||||
}
|
||||
194
frontend/src/components/dialogs/PackageInfoDialog.tsx
Normal file
194
frontend/src/components/dialogs/PackageInfoDialog.tsx
Normal file
@@ -0,0 +1,194 @@
|
||||
/*
|
||||
* Copyright (c) 2021-2026 ahriman team.
|
||||
*
|
||||
* This file is part of ahriman
|
||||
* (see https://github.com/arcan1s/ahriman).
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
import { Box, Dialog, DialogContent, Tab, Tabs } from "@mui/material";
|
||||
import { skipToken, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { ApiError } from "api/client/ApiError";
|
||||
import DialogHeader from "components/common/DialogHeader";
|
||||
import BuildLogsTab from "components/package/BuildLogsTab";
|
||||
import ChangesTab from "components/package/ChangesTab";
|
||||
import EventsTab from "components/package/EventsTab";
|
||||
import PackageDetailsGrid from "components/package/PackageDetailsGrid";
|
||||
import PackageInfoActions from "components/package/PackageInfoActions";
|
||||
import PackagePatchesList from "components/package/PackagePatchesList";
|
||||
import { QueryKeys } from "hooks/QueryKeys";
|
||||
import { useAuth } from "hooks/useAuth";
|
||||
import { useAutoRefresh } from "hooks/useAutoRefresh";
|
||||
import { useClient } from "hooks/useClient";
|
||||
import { useNotification } from "hooks/useNotification";
|
||||
import { useRepository } from "hooks/useRepository";
|
||||
import type { AutoRefreshInterval } from "models/AutoRefreshInterval";
|
||||
import type { Dependencies } from "models/Dependencies";
|
||||
import type { PackageStatus } from "models/PackageStatus";
|
||||
import type { Patch } from "models/Patch";
|
||||
import React, { useState } from "react";
|
||||
import { StatusHeaderStyles } from "theme/StatusColors";
|
||||
import { defaultInterval } from "utils";
|
||||
|
||||
interface PackageInfoDialogProps {
|
||||
packageBase: string | null;
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
autoRefreshIntervals: AutoRefreshInterval[];
|
||||
}
|
||||
|
||||
export default function PackageInfoDialog({
|
||||
packageBase,
|
||||
open,
|
||||
onClose,
|
||||
autoRefreshIntervals,
|
||||
}: PackageInfoDialogProps): React.JSX.Element {
|
||||
const client = useClient();
|
||||
const { current } = useRepository();
|
||||
const { isAuthorized } = useAuth();
|
||||
const { showSuccess, showError } = useNotification();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const [localPackageBase, setLocalPackageBase] = useState(packageBase);
|
||||
if (packageBase !== null && packageBase !== localPackageBase) {
|
||||
setLocalPackageBase(packageBase);
|
||||
}
|
||||
|
||||
const [tabIndex, setTabIndex] = useState(0);
|
||||
const [refreshDatabase, setRefreshDatabase] = useState(true);
|
||||
|
||||
const handleClose = (): void => {
|
||||
setTabIndex(0);
|
||||
setRefreshDatabase(true);
|
||||
onClose();
|
||||
};
|
||||
|
||||
const autoRefresh = useAutoRefresh("package-info-autoreload-button", defaultInterval(autoRefreshIntervals));
|
||||
|
||||
const { data: packageData } = useQuery<PackageStatus[]>({
|
||||
queryKey: localPackageBase && current ? QueryKeys.package(localPackageBase, current) : ["packages"],
|
||||
queryFn: localPackageBase && current ? () => client.fetch.fetchPackage(localPackageBase, current) : skipToken,
|
||||
enabled: open,
|
||||
refetchInterval: autoRefresh.interval > 0 ? autoRefresh.interval : false,
|
||||
});
|
||||
|
||||
const { data: dependencies } = useQuery<Dependencies>({
|
||||
queryKey: localPackageBase && current ? QueryKeys.dependencies(localPackageBase, current) : ["dependencies"],
|
||||
queryFn: localPackageBase && current
|
||||
? () => client.fetch.fetchPackageDependencies(localPackageBase, current) : skipToken,
|
||||
enabled: open,
|
||||
});
|
||||
|
||||
const { data: patches = [] } = useQuery<Patch[]>({
|
||||
queryKey: localPackageBase ? QueryKeys.patches(localPackageBase) : ["patches"],
|
||||
queryFn: localPackageBase ? () => client.fetch.fetchPackagePatches(localPackageBase) : skipToken,
|
||||
enabled: open,
|
||||
});
|
||||
|
||||
const description: PackageStatus | undefined = packageData?.[0];
|
||||
const pkg = description?.package;
|
||||
const status = description?.status;
|
||||
const headerStyle = status ? StatusHeaderStyles[status.status] : {};
|
||||
|
||||
const handleUpdate: () => Promise<void> = async () => {
|
||||
if (!localPackageBase || !current) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await client.service.servicePackageAdd(current, { packages: [localPackageBase], refresh: refreshDatabase });
|
||||
showSuccess("Success", `Run update for packages ${localPackageBase}`);
|
||||
} catch (exception) {
|
||||
showError("Action failed", `Package update failed: ${ApiError.errorDetail(exception)}`);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemove: () => Promise<void> = async () => {
|
||||
if (!localPackageBase || !current) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await client.service.servicePackageRemove(current, [localPackageBase]);
|
||||
showSuccess("Success", `Packages ${localPackageBase} have been removed`);
|
||||
onClose();
|
||||
} catch (exception) {
|
||||
showError("Action failed", `Could not remove package: ${ApiError.errorDetail(exception)}`);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeletePatch: (key: string) => Promise<void> = async key => {
|
||||
if (!localPackageBase) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await client.service.servicePackagePatchRemove(localPackageBase, key);
|
||||
void queryClient.invalidateQueries({ queryKey: QueryKeys.patches(localPackageBase) });
|
||||
} catch (exception) {
|
||||
showError("Action failed", `Could not delete variable: ${ApiError.errorDetail(exception)}`);
|
||||
}
|
||||
};
|
||||
|
||||
return <Dialog open={open} onClose={handleClose} maxWidth="lg" fullWidth>
|
||||
<DialogHeader onClose={handleClose} sx={headerStyle}>
|
||||
{pkg && status
|
||||
? `${pkg.base} ${status.status} at ${new Date(status.timestamp * 1000).toISOStringShort()}`
|
||||
: localPackageBase ?? ""}
|
||||
</DialogHeader>
|
||||
|
||||
<DialogContent>
|
||||
{pkg &&
|
||||
<>
|
||||
<PackageDetailsGrid pkg={pkg} dependencies={dependencies} />
|
||||
<PackagePatchesList
|
||||
patches={patches}
|
||||
editable={isAuthorized}
|
||||
onDelete={key => void handleDeletePatch(key)}
|
||||
/>
|
||||
|
||||
<Box sx={{ borderBottom: 1, borderColor: "divider", mt: 2 }}>
|
||||
<Tabs value={tabIndex} onChange={(_, index: number) => setTabIndex(index)}>
|
||||
<Tab label="Build logs" />
|
||||
<Tab label="Changes" />
|
||||
<Tab label="Events" />
|
||||
</Tabs>
|
||||
</Box>
|
||||
|
||||
{tabIndex === 0 && localPackageBase && current &&
|
||||
<BuildLogsTab
|
||||
packageBase={localPackageBase}
|
||||
repository={current}
|
||||
refreshInterval={autoRefresh.interval}
|
||||
/>
|
||||
}
|
||||
{tabIndex === 1 && localPackageBase && current &&
|
||||
<ChangesTab packageBase={localPackageBase} repository={current} />
|
||||
}
|
||||
{tabIndex === 2 && localPackageBase && current &&
|
||||
<EventsTab packageBase={localPackageBase} repository={current} />
|
||||
}
|
||||
</>
|
||||
}
|
||||
</DialogContent>
|
||||
|
||||
<PackageInfoActions
|
||||
isAuthorized={isAuthorized}
|
||||
refreshDatabase={refreshDatabase}
|
||||
onRefreshDatabaseChange={setRefreshDatabase}
|
||||
onUpdate={() => void handleUpdate()}
|
||||
onRemove={() => void handleRemove()}
|
||||
autoRefreshIntervals={autoRefreshIntervals}
|
||||
autoRefreshInterval={autoRefresh.interval}
|
||||
onAutoRefreshIntervalChange={autoRefresh.setInterval}
|
||||
/>
|
||||
</Dialog>;
|
||||
}
|
||||
88
frontend/src/components/dialogs/PackageRebuildDialog.tsx
Normal file
88
frontend/src/components/dialogs/PackageRebuildDialog.tsx
Normal file
@@ -0,0 +1,88 @@
|
||||
/*
|
||||
* Copyright (c) 2021-2026 ahriman team.
|
||||
*
|
||||
* This file is part of ahriman
|
||||
* (see https://github.com/arcan1s/ahriman).
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
import PlayArrowIcon from "@mui/icons-material/PlayArrow";
|
||||
import { Button, Dialog, DialogActions, DialogContent, TextField } from "@mui/material";
|
||||
import { ApiError } from "api/client/ApiError";
|
||||
import DialogHeader from "components/common/DialogHeader";
|
||||
import RepositorySelect from "components/common/RepositorySelect";
|
||||
import { useClient } from "hooks/useClient";
|
||||
import { useNotification } from "hooks/useNotification";
|
||||
import { useSelectedRepository } from "hooks/useSelectedRepository";
|
||||
import React, { useState } from "react";
|
||||
|
||||
interface PackageRebuildDialogProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export default function PackageRebuildDialog({ open, onClose }: PackageRebuildDialogProps): React.JSX.Element {
|
||||
const client = useClient();
|
||||
const { showSuccess, showError } = useNotification();
|
||||
const repositorySelect = useSelectedRepository();
|
||||
|
||||
const [dependency, setDependency] = useState("");
|
||||
|
||||
const handleClose = (): void => {
|
||||
setDependency("");
|
||||
repositorySelect.reset();
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleRebuild: () => Promise<void> = async () => {
|
||||
if (!dependency) {
|
||||
return;
|
||||
}
|
||||
const repository = repositorySelect.selectedRepository;
|
||||
if (!repository) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await client.service.serviceRebuild(repository, [dependency]);
|
||||
handleClose();
|
||||
showSuccess("Success", `Repository rebuild has been run for packages which depend on ${dependency}`);
|
||||
} catch (exception) {
|
||||
const detail = ApiError.errorDetail(exception);
|
||||
showError("Action failed", `Repository rebuild failed: ${detail}`);
|
||||
}
|
||||
};
|
||||
|
||||
return <Dialog open={open} onClose={handleClose} maxWidth="md" fullWidth>
|
||||
<DialogHeader onClose={handleClose}>
|
||||
Rebuild depending packages
|
||||
</DialogHeader>
|
||||
|
||||
<DialogContent>
|
||||
<RepositorySelect repositorySelect={repositorySelect} />
|
||||
|
||||
<TextField
|
||||
label="dependency"
|
||||
placeholder="packages dependency"
|
||||
fullWidth
|
||||
margin="normal"
|
||||
value={dependency}
|
||||
onChange={event => setDependency(event.target.value)}
|
||||
/>
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions>
|
||||
<Button onClick={() => void handleRebuild()} variant="contained" startIcon={<PlayArrowIcon />}>rebuild</Button>
|
||||
</DialogActions>
|
||||
</Dialog>;
|
||||
}
|
||||
Reference in New Issue
Block a user