diff --git a/.dockerignore b/.dockerignore index b461b8d7..cd04d110 100644 --- a/.dockerignore +++ b/.dockerignore @@ -12,3 +12,6 @@ __pycache__/ *.pyc *.pyd *.pyo + +node_modules/ +package-lock.json diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index 57781a0c..2ad62ad0 100644 --- a/.github/workflows/tests.yml +++ b/.github/workflows/tests.yml @@ -26,7 +26,7 @@ jobs: - ${{ github.workspace }}:/build steps: - - run: pacman --noconfirm -Syu base-devel git python-tox + - run: pacman --noconfirm -Syu base-devel git npm python-tox - run: git config --global --add safe.directory * diff --git a/.gitignore b/.gitignore index 1fa4cc9d..5a856dcf 100644 --- a/.gitignore +++ b/.gitignore @@ -99,3 +99,9 @@ status_cache.json *.db docs/html/ + +# Frontend +node_modules/ +package-lock.json +package/share/ahriman/templates/static/index.js +package/share/ahriman/templates/static/index.css diff --git a/docker/Dockerfile b/docker/Dockerfile index fa5eed5c..061f9ff9 100644 --- a/docker/Dockerfile +++ b/docker/Dockerfile @@ -23,6 +23,7 @@ COPY "docker/install-aur-package.sh" "/usr/local/bin/install-aur-package" RUN pacman -S --noconfirm --asdeps \ devtools \ git \ + npm \ pyalpm \ python-bcrypt \ python-filelock \ diff --git a/docs/configuration.rst b/docs/configuration.rst index 71446cc6..cf38295e 100644 --- a/docs/configuration.rst +++ b/docs/configuration.rst @@ -188,6 +188,7 @@ Web server settings. This feature requires ``aiohttp`` libraries to be installed * ``port`` - port to bind, integer, optional. * ``service_only`` - disable status routes (including logs), boolean, optional, default ``no``. * ``static_path`` - path to directory with static files, string, required. +* ``template`` - Jinja2 template name for the index page, string, optional, default ``build-status.jinja2``. * ``templates`` - path to templates directories, space separated list of paths, required. * ``unix_socket`` - path to the listening unix socket, string, optional. If set, server will create the socket on the specified address which can (and will) be used by application. Note, that unlike usual host/port configuration, unix socket allows to perform requests without authorization. * ``unix_socket_unsafe`` - set unsafe (o+w) permissions to unix socket, boolean, optional, default ``yes``. This option is enabled by default, because it is supposed that unix socket is created in safe environment (only web service is supposed to be used in unsafe), but it can be disabled by configuration. diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js new file mode 100644 index 00000000..86832dd2 --- /dev/null +++ b/frontend/eslint.config.js @@ -0,0 +1,50 @@ +import js from "@eslint/js"; +import stylistic from "@stylistic/eslint-plugin"; +import reactHooks from "eslint-plugin-react-hooks"; +import reactRefresh from "eslint-plugin-react-refresh"; +import tseslint from "typescript-eslint"; + +export default tseslint.config( + { ignores: ["dist"] }, + { + extends: [js.configs.recommended, ...tseslint.configs.recommendedTypeChecked], + files: ["src/**/*.{ts,tsx}"], + languageOptions: { + parserOptions: { + projectService: true, + tsconfigRootDir: import.meta.dirname, + }, + }, + plugins: { + "react-hooks": reactHooks, + "react-refresh": reactRefresh, + "@stylistic": stylistic, + }, + rules: { + ...reactHooks.configs.recommended.rules, + "react-refresh/only-export-components": ["warn", { allowConstantExport: true }], + + "curly": "error", + "@stylistic/brace-style": ["error", "1tbs"], + + // stylistic + "@stylistic/indent": ["error", 4], + "@stylistic/quotes": ["error", "double"], + "@stylistic/semi": ["error", "always"], + "@stylistic/comma-dangle": ["error", "always-multiline"], + "@stylistic/object-curly-spacing": ["error", "always"], + "@stylistic/array-bracket-spacing": ["error", "never"], + "@stylistic/arrow-parens": ["error", "always"], + "@stylistic/eol-last": ["error", "always"], + "@stylistic/no-trailing-spaces": "error", + "@stylistic/no-multiple-empty-lines": ["error", { max: 1 }], + "@stylistic/jsx-quotes": ["error", "prefer-double"], + + // typescript + "@typescript-eslint/explicit-function-return-type": ["error", { allowExpressions: true }], + "@typescript-eslint/no-deprecated": "error", + "@typescript-eslint/consistent-type-imports": ["error", { prefer: "type-imports" }], + "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }], + }, + }, +); diff --git a/frontend/index.html b/frontend/index.html new file mode 100644 index 00000000..7246ce66 --- /dev/null +++ b/frontend/index.html @@ -0,0 +1,16 @@ + + + + + + ahriman + + + + + +
+ + + + diff --git a/frontend/package.json b/frontend/package.json new file mode 100644 index 00000000..13479d1c --- /dev/null +++ b/frontend/package.json @@ -0,0 +1,40 @@ +{ + "name": "ahriman-frontend", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "lint": "eslint src/", + "lint:fix": "eslint --fix src/", + "preview": "vite preview" + }, + "dependencies": { + "@emotion/react": "^11.11.0", + "@emotion/styled": "^11.11.0", + "@mui/icons-material": "^7.3.8", + "@mui/material": "^7.3.8", + "@mui/x-data-grid": "^8.27.3", + "@tanstack/react-query": "^5.0.0", + "chart.js": "^4.5.0", + "highlight.js": "^11.11.0", + "react": "^19.2.4", + "react-chartjs-2": "^5.2.0", + "react-dom": "^19.2.4" + }, + "devDependencies": { + "@eslint/js": "^9.39.3", + "@stylistic/eslint-plugin": "^5.9.0", + "@types/react": "^19.2.14", + "@types/react-dom": "^19.2.3", + "@vitejs/plugin-react": "^5.0.0", + "eslint": "^9.39.3", + "eslint-plugin-react-hooks": "^7.0.1", + "eslint-plugin-react-refresh": "^0.5.2", + "typescript": "^5.3.0", + "typescript-eslint": "^8.56.1", + "vite": "^7.3.1", + "vite-tsconfig-paths": "^6.1.1" + } +} diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx new file mode 100644 index 00000000..e3c6b72a --- /dev/null +++ b/frontend/src/App.tsx @@ -0,0 +1,38 @@ +import type React from "react"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { ThemeProvider } from "@mui/material/styles"; +import CssBaseline from "@mui/material/CssBaseline"; +import Theme from "theme/Theme"; +import { ClientProvider } from "contexts/ClientProvider"; +import { AuthProvider } from "contexts/AuthProvider"; +import { RepositoryProvider } from "contexts/RepositoryProvider"; +import { NotificationProvider } from "contexts/NotificationProvider"; +import AppLayout from "components/layout/AppLayout"; + +const queryClient = new QueryClient({ + defaultOptions: { + queries: { + staleTime: 30_000, + retry: 1, + }, + }, +}); + +export default function App(): React.JSX.Element { + return ( + + + + + + + + + + + + + + + ); +} diff --git a/frontend/src/api/QueryKeys.ts b/frontend/src/api/QueryKeys.ts new file mode 100644 index 00000000..47c988df --- /dev/null +++ b/frontend/src/api/QueryKeys.ts @@ -0,0 +1,27 @@ +import { repoKey } from "api/types/RepositoryId"; +import type { RepositoryId } from "api/types/RepositoryId"; + +export const QueryKeys = { + info: ["info"] as const, + + packages: (repo: RepositoryId) => ["packages", repoKey(repo)] as const, + package: (base: string, repo: RepositoryId) => ["packages", repoKey(repo), base] as const, + + status: (repo: RepositoryId) => ["status", repoKey(repo)] as const, + + logs: (base: string, repo: RepositoryId) => ["logs", repoKey(repo), base] as const, + logsVersion: (base: string, repo: RepositoryId, version: string, processId: string) => + ["logs", repoKey(repo), base, version, processId] as const, + + changes: (base: string, repo: RepositoryId) => ["changes", repoKey(repo), base] as const, + + dependencies: (base: string, repo: RepositoryId) => ["dependencies", repoKey(repo), base] as const, + + patches: (base: string) => ["patches", base] as const, + + events: (repo: RepositoryId, objectId?: string) => ["events", repoKey(repo), objectId] as const, + + search: (query: string) => ["search", query] as const, + + pgpKey: (key: string, server: string) => ["pgp", key, server] as const, +}; diff --git a/frontend/src/api/client/AhrimanClient.ts b/frontend/src/api/client/AhrimanClient.ts new file mode 100644 index 00000000..0cdea818 --- /dev/null +++ b/frontend/src/api/client/AhrimanClient.ts @@ -0,0 +1,218 @@ +import type { AURPackage } from "api/types/AURPackage"; +import type { Changes } from "api/types/Changes"; +import type { Dependencies } from "api/types/Dependencies"; +import type { Event } from "api/types/Event"; +import type { InfoResponse } from "api/types/InfoResponse"; +import type { InternalStatus } from "api/types/InternalStatus"; +import type { LogRecord } from "api/types/LogRecord"; +import type { LoginRequest } from "api/types/LoginRequest"; +import type { PackageActionRequest } from "api/types/PackageActionRequest"; +import type { PackageStatus } from "api/types/PackageStatus"; +import type { Patch } from "api/types/Patch"; +import type { PGPKey } from "api/types/PGPKey"; +import type { PGPKeyRequest } from "api/types/PGPKeyRequest"; +import type { RepositoryId } from "api/types/RepositoryId"; + +import { ApiError } from "api/client/ApiError"; +import type { RequestOptions } from "api/client/RequestOptions"; + +export class AhrimanClient { + private static repoQuery(repo: RepositoryId): Record { + return { architecture: repo.architecture, repository: repo.repository }; + } + + private async request(url: string, options: RequestOptions = {}): Promise { + const { method, query, json } = options; + + let fullUrl = url; + if (query) { + const params = new URLSearchParams(); + for (const [key, value] of Object.entries(query)) { + if (value !== undefined && value !== null) { + params.set(key, String(value)); + } + } + fullUrl += `?${params.toString()}`; + } + + const headers: Record = { + Accept: "application/json", + }; + if (json !== undefined) { + headers["Content-Type"] = "application/json"; + } + + const requestInit: RequestInit = { + method: method || (json ? "POST" : "GET"), + headers, + }; + + if (json !== undefined) { + requestInit.body = JSON.stringify(json); + } + + const response = await fetch(fullUrl, requestInit); + + if (!response.ok) { + const body = await response.text(); + throw new ApiError(response.status, response.statusText, body); + } + + const contentType = response.headers.get("Content-Type") ?? ""; + if (contentType.includes("application/json")) { + return await response.json() as T; + } + return await response.text() as T; + } + + // Info + + async fetchInfo(): Promise { + return this.request("/api/v2/info"); + } + + // Packages + + async fetchPackages(repo: RepositoryId): Promise { + return this.request("/api/v1/packages", { query: AhrimanClient.repoQuery(repo) }); + } + + async fetchPackage(base: string, repo: RepositoryId): Promise { + return this.request(`/api/v1/packages/${encodeURIComponent(base)}`, { + query: AhrimanClient.repoQuery(repo), + }); + } + + // Status + + async fetchStatus(repo: RepositoryId): Promise { + return this.request("/api/v1/status", { query: AhrimanClient.repoQuery(repo) }); + } + + // Logs + + async fetchLogs( + base: string, + repo: RepositoryId, + version?: string, + processId?: string, + head?: boolean, + ): Promise { + const query: Record = { ...AhrimanClient.repoQuery(repo) }; + if (version) { + query.version = version; + } + if (processId) { + query.process_id = processId; + } + if (head) { + query.head = "true"; + } + return this.request(`/api/v2/packages/${encodeURIComponent(base)}/logs`, { query }); + } + + // Changes + + async fetchChanges(base: string, repo: RepositoryId): Promise { + return this.request(`/api/v1/packages/${encodeURIComponent(base)}/changes`, { + query: AhrimanClient.repoQuery(repo), + }); + } + + // Dependencies + + async fetchDependencies(base: string, repo: RepositoryId): Promise { + return this.request(`/api/v1/packages/${encodeURIComponent(base)}/dependencies`, { + query: AhrimanClient.repoQuery(repo), + }); + } + + // Patches + + async fetchPatches(base: string): Promise { + return this.request(`/api/v1/packages/${encodeURIComponent(base)}/patches`); + } + + async deletePatch(base: string, key: string): Promise { + return this.request(`/api/v1/packages/${encodeURIComponent(base)}/patches/${encodeURIComponent(key)}`, { + method: "DELETE", + }); + } + + // Events + + async fetchEvents(repo: RepositoryId, objectId?: string, limit?: number): Promise { + const query: Record = AhrimanClient.repoQuery(repo); + if (objectId) { + query.object_id = objectId; + } + if (limit) { + query.limit = limit; + } + return this.request("/api/v1/events", { query }); + } + + // Service actions + + async addPackages(repo: RepositoryId, data: PackageActionRequest): Promise { + return this.request("/api/v1/service/add", { method: "POST", query: AhrimanClient.repoQuery(repo), json: data }); + } + + async removePackages(repo: RepositoryId, packages: string[]): Promise { + return this.request("/api/v1/service/remove", { + method: "POST", + query: AhrimanClient.repoQuery(repo), + json: { packages }, + }); + } + + async updatePackages(repo: RepositoryId, data: PackageActionRequest): Promise { + return this.request("/api/v1/service/update", { + method: "POST", + query: AhrimanClient.repoQuery(repo), + json: data, + }); + } + + async rebuildPackages(repo: RepositoryId, packages: string[]): Promise { + return this.request("/api/v1/service/rebuild", { + method: "POST", + query: AhrimanClient.repoQuery(repo), + json: { packages }, + }); + } + + async requestPackages(repo: RepositoryId, data: PackageActionRequest): Promise { + return this.request("/api/v1/service/request", { + method: "POST", + query: AhrimanClient.repoQuery(repo), + json: data, + }); + } + + // Search + + async searchPackages(query: string): Promise { + return this.request("/api/v1/service/search", { query: { for: query } }); + } + + // PGP + + async fetchPGPKey(key: string, server: string): Promise { + return this.request("/api/v1/service/pgp", { query: { key, server } }); + } + + async importPGPKey(data: PGPKeyRequest): Promise { + return this.request("/api/v1/service/pgp", { method: "POST", json: data }); + } + + // Auth + + async login(data: LoginRequest): Promise { + return this.request("/api/v1/login", { method: "POST", json: data }); + } + + async logout(): Promise { + return this.request("/api/v1/logout", { method: "POST" }); + } +} diff --git a/frontend/src/api/client/ApiError.ts b/frontend/src/api/client/ApiError.ts new file mode 100644 index 00000000..43c171d0 --- /dev/null +++ b/frontend/src/api/client/ApiError.ts @@ -0,0 +1,25 @@ +export class ApiError extends Error { + status: number; + statusText: string; + body: string; + + constructor(status: number, statusText: string, body: string) { + super(`${status} ${statusText}`); + this.status = status; + this.statusText = statusText; + this.body = body; + } + + get detail(): string { + try { + const parsed = JSON.parse(this.body) as Record; + return parsed.error ?? (this.body || this.message); + } catch { + return this.body || this.message; + } + } + + static errorDetail(e: unknown): string { + return e instanceof ApiError ? e.detail : String(e); + } +} diff --git a/frontend/src/api/client/RequestOptions.ts b/frontend/src/api/client/RequestOptions.ts new file mode 100644 index 00000000..24fc042e --- /dev/null +++ b/frontend/src/api/client/RequestOptions.ts @@ -0,0 +1,5 @@ +export interface RequestOptions { + method?: string; + query?: Record; + json?: unknown; +} diff --git a/frontend/src/api/defaultInterval.ts b/frontend/src/api/defaultInterval.ts new file mode 100644 index 00000000..e2ae361c --- /dev/null +++ b/frontend/src/api/defaultInterval.ts @@ -0,0 +1,5 @@ +import type { AutoRefreshInterval } from "api/types/AutoRefreshInterval"; + +export function defaultInterval(intervals: AutoRefreshInterval[]): number { + return intervals.find((i) => i.is_active)?.interval ?? 0; +} diff --git a/frontend/src/api/types/AURPackage.ts b/frontend/src/api/types/AURPackage.ts new file mode 100644 index 00000000..f0655690 --- /dev/null +++ b/frontend/src/api/types/AURPackage.ts @@ -0,0 +1,4 @@ +export interface AURPackage { + package: string; + description: string; +} diff --git a/frontend/src/api/types/AuthInfo.ts b/frontend/src/api/types/AuthInfo.ts new file mode 100644 index 00000000..f38db219 --- /dev/null +++ b/frontend/src/api/types/AuthInfo.ts @@ -0,0 +1,5 @@ +export interface AuthInfo { + control: string; + enabled: boolean; + username?: string; +} diff --git a/frontend/src/api/types/AutoRefreshInterval.ts b/frontend/src/api/types/AutoRefreshInterval.ts new file mode 100644 index 00000000..155a19c9 --- /dev/null +++ b/frontend/src/api/types/AutoRefreshInterval.ts @@ -0,0 +1,5 @@ +export interface AutoRefreshInterval { + interval: number; + is_active: boolean; + text: string; +} diff --git a/frontend/src/api/types/BuildStatus.ts b/frontend/src/api/types/BuildStatus.ts new file mode 100644 index 00000000..2ce972cf --- /dev/null +++ b/frontend/src/api/types/BuildStatus.ts @@ -0,0 +1 @@ +export type BuildStatus = "unknown" | "pending" | "building" | "failed" | "success"; diff --git a/frontend/src/api/types/Changes.ts b/frontend/src/api/types/Changes.ts new file mode 100644 index 00000000..ad3dbc59 --- /dev/null +++ b/frontend/src/api/types/Changes.ts @@ -0,0 +1,4 @@ +export interface Changes { + changes?: string; + last_commit_sha?: string; +} diff --git a/frontend/src/api/types/Counters.ts b/frontend/src/api/types/Counters.ts new file mode 100644 index 00000000..8812831c --- /dev/null +++ b/frontend/src/api/types/Counters.ts @@ -0,0 +1,8 @@ +export interface Counters { + building: number; + failed: number; + pending: number; + success: number; + total: number; + unknown: number; +} diff --git a/frontend/src/api/types/Dependencies.ts b/frontend/src/api/types/Dependencies.ts new file mode 100644 index 00000000..e1295452 --- /dev/null +++ b/frontend/src/api/types/Dependencies.ts @@ -0,0 +1,3 @@ +export interface Dependencies { + paths: Record; +} diff --git a/frontend/src/api/types/Event.ts b/frontend/src/api/types/Event.ts new file mode 100644 index 00000000..db642531 --- /dev/null +++ b/frontend/src/api/types/Event.ts @@ -0,0 +1,7 @@ +export interface Event { + created: number; + data?: Record; + event: string; + message?: string; + object_id: string; +} diff --git a/frontend/src/api/types/InfoResponse.ts b/frontend/src/api/types/InfoResponse.ts new file mode 100644 index 00000000..b7069721 --- /dev/null +++ b/frontend/src/api/types/InfoResponse.ts @@ -0,0 +1,12 @@ +import type { AuthInfo } from "api/types/AuthInfo"; +import type { AutoRefreshInterval } from "api/types/AutoRefreshInterval"; +import type { RepositoryId } from "api/types/RepositoryId"; + +export interface InfoResponse { + auth: AuthInfo; + repositories: RepositoryId[]; + version: string; + autorefresh_intervals: AutoRefreshInterval[]; + docs_enabled: boolean; + index_url?: string; +} diff --git a/frontend/src/api/types/InternalStatus.ts b/frontend/src/api/types/InternalStatus.ts new file mode 100644 index 00000000..d9d7d663 --- /dev/null +++ b/frontend/src/api/types/InternalStatus.ts @@ -0,0 +1,12 @@ +import type { Counters } from "api/types/Counters"; +import type { RepositoryStats } from "api/types/RepositoryStats"; +import type { Status } from "api/types/Status"; + +export interface InternalStatus { + architecture: string; + repository: string; + packages: Counters; + stats: RepositoryStats; + status: Status; + version: string; +} diff --git a/frontend/src/api/types/LogRecord.ts b/frontend/src/api/types/LogRecord.ts new file mode 100644 index 00000000..09fc197a --- /dev/null +++ b/frontend/src/api/types/LogRecord.ts @@ -0,0 +1,6 @@ +export interface LogRecord { + created: number; + message: string; + process_id: string; + version: string; +} diff --git a/frontend/src/api/types/LoginRequest.ts b/frontend/src/api/types/LoginRequest.ts new file mode 100644 index 00000000..eb971180 --- /dev/null +++ b/frontend/src/api/types/LoginRequest.ts @@ -0,0 +1,4 @@ +export interface LoginRequest { + username: string; + password: string; +} diff --git a/frontend/src/api/types/PGPKey.ts b/frontend/src/api/types/PGPKey.ts new file mode 100644 index 00000000..b79367fa --- /dev/null +++ b/frontend/src/api/types/PGPKey.ts @@ -0,0 +1,3 @@ +export interface PGPKey { + key: string; +} diff --git a/frontend/src/api/types/PGPKeyRequest.ts b/frontend/src/api/types/PGPKeyRequest.ts new file mode 100644 index 00000000..ac76fc76 --- /dev/null +++ b/frontend/src/api/types/PGPKeyRequest.ts @@ -0,0 +1,4 @@ +export interface PGPKeyRequest { + key: string; + server: string; +} diff --git a/frontend/src/api/types/Package.ts b/frontend/src/api/types/Package.ts new file mode 100644 index 00000000..57f44c73 --- /dev/null +++ b/frontend/src/api/types/Package.ts @@ -0,0 +1,10 @@ +import type { PackageProperties } from "api/types/PackageProperties"; +import type { Remote } from "api/types/Remote"; + +export interface Package { + base: string; + packager?: string; + packages: Record; + remote: Remote; + version: string; +} diff --git a/frontend/src/api/types/PackageActionRequest.ts b/frontend/src/api/types/PackageActionRequest.ts new file mode 100644 index 00000000..9e49e814 --- /dev/null +++ b/frontend/src/api/types/PackageActionRequest.ts @@ -0,0 +1,10 @@ +import type { Patch } from "api/types/Patch"; + +export interface PackageActionRequest { + packages: string[]; + patches?: Patch[]; + refresh?: boolean; + aur?: boolean; + local?: boolean; + manual?: boolean; +} diff --git a/frontend/src/api/types/PackageProperties.ts b/frontend/src/api/types/PackageProperties.ts new file mode 100644 index 00000000..d27a69d8 --- /dev/null +++ b/frontend/src/api/types/PackageProperties.ts @@ -0,0 +1,16 @@ +export interface PackageProperties { + architecture?: string; + archive_size?: number; + build_date?: number; + check_depends?: string[]; + depends?: string[]; + description?: string; + filename?: string; + groups?: string[]; + installed_size?: number; + licenses?: string[]; + make_depends?: string[]; + opt_depends?: string[]; + provides?: string[]; + url?: string; +} diff --git a/frontend/src/api/types/PackageSource.ts b/frontend/src/api/types/PackageSource.ts new file mode 100644 index 00000000..8752767f --- /dev/null +++ b/frontend/src/api/types/PackageSource.ts @@ -0,0 +1 @@ +export type PackageSource = "auto" | "archive" | "aur" | "directory" | "local" | "remote" | "repository"; diff --git a/frontend/src/api/types/PackageStatus.ts b/frontend/src/api/types/PackageStatus.ts new file mode 100644 index 00000000..323040a1 --- /dev/null +++ b/frontend/src/api/types/PackageStatus.ts @@ -0,0 +1,9 @@ +import type { Package } from "api/types/Package"; +import type { RepositoryId } from "api/types/RepositoryId"; +import type { Status } from "api/types/Status"; + +export interface PackageStatus { + package: Package; + status: Status; + repository: RepositoryId; +} diff --git a/frontend/src/api/types/Patch.ts b/frontend/src/api/types/Patch.ts new file mode 100644 index 00000000..bb1d8a77 --- /dev/null +++ b/frontend/src/api/types/Patch.ts @@ -0,0 +1,4 @@ +export interface Patch { + key: string; + value: string; +} diff --git a/frontend/src/api/types/Remote.ts b/frontend/src/api/types/Remote.ts new file mode 100644 index 00000000..28997e84 --- /dev/null +++ b/frontend/src/api/types/Remote.ts @@ -0,0 +1,9 @@ +import type { PackageSource } from "api/types/PackageSource"; + +export interface Remote { + branch?: string; + git_url?: string; + path?: string; + source: PackageSource; + web_url?: string; +} diff --git a/frontend/src/api/types/RepositoryId.ts b/frontend/src/api/types/RepositoryId.ts new file mode 100644 index 00000000..7da1fb55 --- /dev/null +++ b/frontend/src/api/types/RepositoryId.ts @@ -0,0 +1,12 @@ +export interface RepositoryId { + architecture: string; + repository: string; +} + +export function repoKey(repo: RepositoryId): string { + return `${repo.architecture}-${repo.repository}`; +} + +export function repoLabel(repo: RepositoryId): string { + return `${repo.repository} (${repo.architecture})`; +} diff --git a/frontend/src/api/types/RepositoryStats.ts b/frontend/src/api/types/RepositoryStats.ts new file mode 100644 index 00000000..d52eb8ea --- /dev/null +++ b/frontend/src/api/types/RepositoryStats.ts @@ -0,0 +1,6 @@ +export interface RepositoryStats { + archive_size?: number; + bases?: number; + installed_size?: number; + packages?: number; +} diff --git a/frontend/src/api/types/Status.ts b/frontend/src/api/types/Status.ts new file mode 100644 index 00000000..a28804ef --- /dev/null +++ b/frontend/src/api/types/Status.ts @@ -0,0 +1,6 @@ +import type { BuildStatus } from "api/types/BuildStatus"; + +export interface Status { + status: BuildStatus; + timestamp: number; +} diff --git a/frontend/src/chartSetup.ts b/frontend/src/chartSetup.ts new file mode 100644 index 00000000..ca8e2d51 --- /dev/null +++ b/frontend/src/chartSetup.ts @@ -0,0 +1,22 @@ +import { + Chart as ChartJS, + ArcElement, + BarElement, + CategoryScale, + Legend, + LinearScale, + LineElement, + PointElement, + Tooltip, +} from "chart.js"; + +ChartJS.register( + ArcElement, + BarElement, + CategoryScale, + Legend, + LinearScale, + LineElement, + PointElement, + Tooltip, +); diff --git a/frontend/src/components/charts/EventDurationLineChart.tsx b/frontend/src/components/charts/EventDurationLineChart.tsx new file mode 100644 index 00000000..30b07636 --- /dev/null +++ b/frontend/src/components/charts/EventDurationLineChart.tsx @@ -0,0 +1,30 @@ +import type React from "react"; +import { Line } from "react-chartjs-2"; +import type { Event } from "api/types/Event"; +import { formatTimestamp } from "components/common/formatTimestamp"; + +interface EventDurationLineChartProps { + events: Event[]; +} + +export default function EventDurationLineChart({ events }: EventDurationLineChartProps): React.JSX.Element | null { + const updateEvents = events.filter((e) => e.event === "package-updated" && e.data?.took); + + if (updateEvents.length === 0) { + return null; + } + + const data = { + labels: updateEvents.map((e) => formatTimestamp(e.created)), + datasets: [ + { + label: "update duration, s", + data: updateEvents.map((e) => (e.data?.took as number | undefined) ?? 0), + cubicInterpolationMode: "monotone" as const, + tension: 0.4, + }, + ], + }; + + return ; +} diff --git a/frontend/src/components/charts/PackageCountBarChart.tsx b/frontend/src/components/charts/PackageCountBarChart.tsx new file mode 100644 index 00000000..9de7edff --- /dev/null +++ b/frontend/src/components/charts/PackageCountBarChart.tsx @@ -0,0 +1,40 @@ +import type React from "react"; +import { Bar } from "react-chartjs-2"; +import { blue, indigo } from "@mui/material/colors"; +import type { RepositoryStats } from "api/types/RepositoryStats"; + +interface PackageCountBarChartProps { + stats: RepositoryStats; +} + +export default function PackageCountBarChart({ stats }: PackageCountBarChartProps): React.JSX.Element { + const data = { + labels: ["packages"], + datasets: [ + { + label: "archives", + data: [stats.packages ?? 0], + backgroundColor: blue[500], + }, + { + label: "bases", + data: [stats.bases ?? 0], + backgroundColor: indigo[300], + }, + ], + }; + + return ( + + ); +} diff --git a/frontend/src/components/charts/StatusPieChart.tsx b/frontend/src/components/charts/StatusPieChart.tsx new file mode 100644 index 00000000..71cd18a6 --- /dev/null +++ b/frontend/src/components/charts/StatusPieChart.tsx @@ -0,0 +1,24 @@ +import type React from "react"; +import { Pie } from "react-chartjs-2"; +import type { Counters } from "api/types/Counters"; +import { StatusColors } from "theme/status/StatusColors"; + +interface StatusPieChartProps { + counters: Counters; +} + +export default function StatusPieChart({ counters }: StatusPieChartProps): React.JSX.Element { + const labels = ["unknown", "pending", "building", "failed", "success"] as const; + const data = { + labels: [...labels], + datasets: [ + { + label: "packages in status", + data: labels.map((label) => counters[label]), + backgroundColor: labels.map((label) => StatusColors[label]), + }, + ], + }; + + return ; +} diff --git a/frontend/src/components/common/AutoRefreshControl.tsx b/frontend/src/components/common/AutoRefreshControl.tsx new file mode 100644 index 00000000..d54ae09e --- /dev/null +++ b/frontend/src/components/common/AutoRefreshControl.tsx @@ -0,0 +1,76 @@ +import React, { useState } from "react"; +import { IconButton, Menu, MenuItem, Tooltip, ListItemIcon, ListItemText } from "@mui/material"; +import TimerIcon from "@mui/icons-material/Timer"; +import TimerOffIcon from "@mui/icons-material/TimerOff"; +import CheckIcon from "@mui/icons-material/Check"; +import type { AutoRefreshInterval } from "api/types/AutoRefreshInterval"; + +interface AutoRefreshControlProps { + intervals: AutoRefreshInterval[]; + enabled: boolean; + currentInterval: number; + onToggle: (enabled: boolean) => void; + onIntervalChange: (interval: number) => void; +} + +export default function AutoRefreshControl({ + intervals, + enabled, + currentInterval, + onToggle, + onIntervalChange, +}: AutoRefreshControlProps): React.JSX.Element | null { + const [anchorEl, setAnchorEl] = useState(null); + + if (intervals.length === 0) { + return null; + } + + return ( + <> + + setAnchorEl(e.currentTarget)} + color={enabled ? "primary" : "default"} + > + {enabled ? : } + + + setAnchorEl(null)} + > + { + onToggle(false); + setAnchorEl(null); + }} + > + + {!enabled && } + + Off + + {intervals.map((iv) => ( + { + onIntervalChange(iv.interval); + onToggle(true); + setAnchorEl(null); + }} + > + + {enabled && iv.interval === currentInterval && } + + {iv.text} + + ))} + + + ); +} diff --git a/frontend/src/components/common/CodeBlock.tsx b/frontend/src/components/common/CodeBlock.tsx new file mode 100644 index 00000000..f797cdd2 --- /dev/null +++ b/frontend/src/components/common/CodeBlock.tsx @@ -0,0 +1,56 @@ +import React, { type RefObject } from "react"; +import { Box } from "@mui/material"; +import CopyButton from "components/common/CopyButton"; + +interface CodeBlockProps { + codeRef?: RefObject; + preRef?: RefObject; + className?: string; + children?: React.ReactNode; + getText: () => string; + maxHeight?: number | string; + height?: number | string; + onScroll?: () => void; + wordBreak?: boolean; +} + +export default function CodeBlock({ + codeRef, + preRef, + className, + children, + getText, + maxHeight, + height, + onScroll, + wordBreak, +}: CodeBlockProps): React.JSX.Element { + return ( + + + {codeRef + ? + : {children} + } + + + + + + ); +} diff --git a/frontend/src/components/common/CopyButton.tsx b/frontend/src/components/common/CopyButton.tsx new file mode 100644 index 00000000..ed8200e9 --- /dev/null +++ b/frontend/src/components/common/CopyButton.tsx @@ -0,0 +1,30 @@ +import React, { useEffect, useRef, useState } from "react"; +import { IconButton, Tooltip } from "@mui/material"; +import ContentCopyIcon from "@mui/icons-material/ContentCopy"; +import CheckIcon from "@mui/icons-material/Check"; + +interface CopyButtonProps { + getText: () => string; +} + +export default function CopyButton({ getText }: CopyButtonProps): React.JSX.Element { + const [copied, setCopied] = useState(false); + const timerRef = useRef>(undefined); + + useEffect(() => () => clearTimeout(timerRef.current), []); + + const handleCopy = async (): Promise => { + await navigator.clipboard.writeText(getText()); + setCopied(true); + clearTimeout(timerRef.current); + timerRef.current = setTimeout(() => setCopied(false), 2000); + }; + + return ( + + void handleCopy()}> + {copied ? : } + + + ); +} diff --git a/frontend/src/components/common/DialogHeader.tsx b/frontend/src/components/common/DialogHeader.tsx new file mode 100644 index 00000000..d0385e8c --- /dev/null +++ b/frontend/src/components/common/DialogHeader.tsx @@ -0,0 +1,20 @@ +import type React from "react"; +import { DialogTitle, IconButton, type SxProps, type Theme } from "@mui/material"; +import CloseIcon from "@mui/icons-material/Close"; + +interface DialogHeaderProps { + children: React.ReactNode; + onClose: () => void; + sx?: SxProps; +} + +export default function DialogHeader({ children, onClose, sx }: DialogHeaderProps): React.JSX.Element { + return ( + + {children} + + + + + ); +} diff --git a/frontend/src/components/common/RepositorySelect.tsx b/frontend/src/components/common/RepositorySelect.tsx new file mode 100644 index 00000000..a18dd205 --- /dev/null +++ b/frontend/src/components/common/RepositorySelect.tsx @@ -0,0 +1,30 @@ +import type React from "react"; +import { Select, MenuItem, InputLabel, FormControl } from "@mui/material"; +import { useRepository } from "hooks/useRepository"; +import { repoKey, repoLabel } from "api/types/RepositoryId"; +import type { SelectedRepositoryResult } from "hooks/useSelectedRepository"; + +interface RepositorySelectProps { + repoSelect: SelectedRepositoryResult; +} + +export default function RepositorySelect({ repoSelect }: RepositorySelectProps): React.JSX.Element { + const { repositories, current } = useRepository(); + + return ( + + repository + + + ); +} diff --git a/frontend/src/components/common/formatTimestamp.ts b/frontend/src/components/common/formatTimestamp.ts new file mode 100644 index 00000000..a4259465 --- /dev/null +++ b/frontend/src/components/common/formatTimestamp.ts @@ -0,0 +1,5 @@ +export function formatTimestamp(unixSeconds: number): string { + const d = new Date(unixSeconds * 1000); + const pad = (n: number): string => String(n).padStart(2, "0"); + return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`; +} diff --git a/frontend/src/components/dialogs/DashboardDialog.tsx b/frontend/src/components/dialogs/DashboardDialog.tsx new file mode 100644 index 00000000..e30ea77e --- /dev/null +++ b/frontend/src/components/dialogs/DashboardDialog.tsx @@ -0,0 +1,90 @@ +import type React from "react"; +import { Dialog, DialogContent, Grid, Typography, Box } from "@mui/material"; +import DialogHeader from "components/common/DialogHeader"; +import { skipToken, useQuery } from "@tanstack/react-query"; +import StatusPieChart from "components/charts/StatusPieChart"; +import PackageCountBarChart from "components/charts/PackageCountBarChart"; +import { QueryKeys } from "api/QueryKeys"; +import { useClient } from "hooks/useClient"; +import { useRepository } from "hooks/useRepository"; +import { useDialogClose } from "hooks/useDialogClose"; +import { StatusHeaderStyles } from "theme/status/StatusColors"; +import { formatTimestamp } from "components/common/formatTimestamp"; +import type { InternalStatus } from "api/types/InternalStatus"; + +interface DashboardDialogProps { + open: boolean; + onClose: () => void; +} + +export default function DashboardDialog({ open, onClose }: DashboardDialogProps): React.JSX.Element { + const client = useClient(); + const { current } = useRepository(); + const { isOpen, requestClose, transitionProps } = useDialogClose(open, onClose); + + const { data: status } = useQuery({ + queryKey: current ? QueryKeys.status(current) : ["status"], + queryFn: current ? () => client.fetchStatus(current) : skipToken, + enabled: !!current && open, + }); + + const headerStyle = status ? StatusHeaderStyles[status.status.status] : {}; + + return ( + + + System health + + + {status && ( + <> + + + Repository name + + + {status.repository} + + + Repository architecture + + + {status.architecture} + + + + + + Current status + + + {status.status.status} + + + Updated at + + + {formatTimestamp(status.status.timestamp)} + + + + {status.packages.total > 0 && ( + + + + + + + + + + + + + )} + + )} + + + ); +} diff --git a/frontend/src/components/dialogs/KeyImportDialog.tsx b/frontend/src/components/dialogs/KeyImportDialog.tsx new file mode 100644 index 00000000..7aeb5421 --- /dev/null +++ b/frontend/src/components/dialogs/KeyImportDialog.tsx @@ -0,0 +1,99 @@ +import React, { useCallback, useState } from "react"; +import { + Dialog, DialogContent, DialogActions, Button, + TextField, Box, +} from "@mui/material"; +import DialogHeader from "components/common/DialogHeader"; +import PlayArrowIcon from "@mui/icons-material/PlayArrow"; +import RefreshIcon from "@mui/icons-material/Refresh"; +import { useNotification } from "hooks/useNotification"; +import { useClient } from "hooks/useClient"; +import { useDialogClose } from "hooks/useDialogClose"; +import { ApiError } from "api/client/ApiError"; +import CodeBlock from "components/common/CodeBlock"; + +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 onOpen = useCallback(() => { + setFingerprint(""); + setServer("keyserver.ubuntu.com"); + setKeyBody(""); + }, []); + + const { isOpen, requestClose, transitionProps } = useDialogClose(open, onClose, onOpen); + + const handleFetch = async (): Promise => { + if (!fingerprint || !server) { + return; + } + try { + const result = await client.fetchPGPKey(fingerprint, server); + setKeyBody(result.key); + } catch (e) { + const detail = ApiError.errorDetail(e); + showError("Action failed", `Could not fetch key: ${detail}`); + } + }; + + const handleImport = async (): Promise => { + if (!fingerprint || !server) { + return; + } + try { + await client.importPGPKey({ key: fingerprint, server }); + requestClose(); + showSuccess("Success", `Key ${fingerprint} has been imported`); + } catch (e) { + const detail = ApiError.errorDetail(e); + showError("Action failed", `Could not import key ${fingerprint} from ${server}: ${detail}`); + } + }; + + return ( + + + Import key from PGP server + + + setFingerprint(e.target.value)} + /> + setServer(e.target.value)} + /> + {keyBody && ( + + keyBody} maxHeight={300}> + {keyBody} + + + )} + + + + + + + ); +} diff --git a/frontend/src/components/dialogs/LoginDialog.tsx b/frontend/src/components/dialogs/LoginDialog.tsx new file mode 100644 index 00000000..5d47a7d4 --- /dev/null +++ b/frontend/src/components/dialogs/LoginDialog.tsx @@ -0,0 +1,98 @@ +import React, { useCallback, useState } from "react"; +import { + Dialog, DialogContent, DialogActions, Button, TextField, + InputAdornment, IconButton, +} from "@mui/material"; +import DialogHeader from "components/common/DialogHeader"; +import VisibilityIcon from "@mui/icons-material/Visibility"; +import VisibilityOffIcon from "@mui/icons-material/VisibilityOff"; +import PersonIcon from "@mui/icons-material/Person"; +import { useAuth } from "hooks/useAuth"; +import { useNotification } from "hooks/useNotification"; +import { useDialogClose } from "hooks/useDialogClose"; +import { ApiError } from "api/client/ApiError"; + +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 onOpen = useCallback(() => { + setUsername(""); + setPassword(""); + setShowPassword(false); + }, []); + + const { isOpen, requestClose, transitionProps } = useDialogClose(open, onClose, onOpen); + + const handleSubmit = async (): Promise => { + if (!username || !password) { + return; + } + try { + await login(username, password); + requestClose(); + showSuccess("Logged in", `Successfully logged in as ${username}`); + window.location.reload(); + } catch (e) { + const detail = ApiError.errorDetail(e); + 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 ( + + + Login + + + setUsername(e.target.value)} + autoFocus + /> + setPassword(e.target.value)} + onKeyDown={(e) => { + if (e.key === "Enter") { + void handleSubmit(); + } + }} + slotProps={{ + input: { + endAdornment: ( + + setShowPassword(!showPassword)} edge="end" size="small"> + {showPassword ? : } + + + ), + }, + }} + /> + + + + + + ); +} diff --git a/frontend/src/components/dialogs/PackageAddDialog.tsx b/frontend/src/components/dialogs/PackageAddDialog.tsx new file mode 100644 index 00000000..89c0f183 --- /dev/null +++ b/frontend/src/components/dialogs/PackageAddDialog.tsx @@ -0,0 +1,184 @@ +import React, { useCallback, useRef, useState } from "react"; +import { + Dialog, DialogContent, DialogActions, Button, + TextField, Autocomplete, Box, IconButton, FormControlLabel, Checkbox, +} from "@mui/material"; +import DialogHeader from "components/common/DialogHeader"; +import PlayArrowIcon from "@mui/icons-material/PlayArrow"; +import AddIcon from "@mui/icons-material/Add"; +import DeleteIcon from "@mui/icons-material/Delete"; +import { useQuery } from "@tanstack/react-query"; +import RepositorySelect from "components/common/RepositorySelect"; +import { useNotification } from "hooks/useNotification"; +import { useSelectedRepository } from "hooks/useSelectedRepository"; +import { useDebounce } from "hooks/useDebounce"; +import { useClient } from "hooks/useClient"; +import { useDialogClose } from "hooks/useDialogClose"; +import { ApiError } from "api/client/ApiError"; +import { QueryKeys } from "api/QueryKeys"; +import type { AURPackage } from "api/types/AURPackage"; + +interface EnvVar { + 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 repoSelect = useSelectedRepository(); + + const [packageName, setPackageName] = useState(""); + const [refresh, setRefresh] = useState(true); + const [envVars, setEnvVars] = useState([]); + const envIdCounter = useRef(0); + + const { reset: resetRepoSelect } = repoSelect; + const onOpen = useCallback(() => { + setPackageName(""); + resetRepoSelect(); + setRefresh(true); + setEnvVars([]); + }, [resetRepoSelect]); + + const { isOpen, requestClose, transitionProps } = useDialogClose(open, onClose, onOpen); + + const debouncedSearch = useDebounce(packageName, 500); + + const { data: searchResults = [] } = useQuery({ + queryKey: QueryKeys.search(debouncedSearch), + queryFn: () => client.searchPackages(debouncedSearch), + enabled: debouncedSearch.length >= 3, + }); + + const handleAdd = async (): Promise => { + if (!packageName) { + return; + } + const repo = repoSelect.selectedRepo; + if (!repo) { + return; + } + try { + const patches = envVars.filter((v) => v.key); + await client.addPackages(repo, { + packages: [packageName], + patches: patches.length > 0 ? patches : undefined, + refresh, + }); + requestClose(); + showSuccess("Success", `Packages ${packageName} have been added`); + } catch (e) { + const detail = ApiError.errorDetail(e); + showError("Action failed", `Package addition failed: ${detail}`); + } + }; + + const handleRequest = async (): Promise => { + if (!packageName) { + return; + } + const repo = repoSelect.selectedRepo; + if (!repo) { + return; + } + try { + const patches = envVars.filter((v) => v.key); + await client.requestPackages(repo, { + packages: [packageName], + patches: patches.length > 0 ? patches : undefined, + }); + requestClose(); + showSuccess("Success", `Packages ${packageName} have been requested`); + } catch (e) { + const detail = ApiError.errorDetail(e); + showError("Action failed", `Package request failed: ${detail}`); + } + }; + + return ( + + + Add new packages + + + + + p.package)} + inputValue={packageName} + onInputChange={(_, value) => setPackageName(value)} + renderOption={(props, option) => { + const pkg = searchResults.find((p) => p.package === option); + return ( +
  • + {option}{pkg ? ` (${pkg.description})` : ""} +
    • + ); + }} + renderInput={(params) => ( + + )} + /> + + setRefresh(checked)} />} + label="update pacman databases" + /> + + + + {envVars.map((env) => ( + + { + const newKey = e.target.value; + setEnvVars((prev) => prev.map((v) => v.id === env.id ? { ...v, key: newKey } : v)); + }} + sx={{ flex: 1 }} + /> + = + { + const newValue = e.target.value; + setEnvVars((prev) => prev.map((v) => v.id === env.id ? { ...v, value: newValue } : v)); + }} + sx={{ flex: 1 }} + /> + setEnvVars((prev) => prev.filter((v) => v.id !== env.id))}> + + + + ))} +     + + + + +     + ); +} diff --git a/frontend/src/components/dialogs/PackageInfoDialog.tsx b/frontend/src/components/dialogs/PackageInfoDialog.tsx new file mode 100644 index 00000000..3acb9b21 --- /dev/null +++ b/frontend/src/components/dialogs/PackageInfoDialog.tsx @@ -0,0 +1,178 @@ +import React, { useCallback, useState } from "react"; +import { Dialog, DialogContent, Box, Tab, Tabs } from "@mui/material"; +import DialogHeader from "components/common/DialogHeader"; +import { skipToken, useQuery, useQueryClient } from "@tanstack/react-query"; +import PackageDetailsGrid from "components/package/PackageDetailsGrid"; +import PackagePatchesList from "components/package/PackagePatchesList"; +import PackageInfoActions from "components/package/PackageInfoActions"; +import BuildLogsTab from "components/package/BuildLogsTab"; +import ChangesTab from "components/package/ChangesTab"; +import EventsTab from "components/package/EventsTab"; +import { useRepository } from "hooks/useRepository"; +import { useAuth } from "hooks/useAuth"; +import { useNotification } from "hooks/useNotification"; +import { useAutoRefresh } from "hooks/useAutoRefresh"; +import { useClient } from "hooks/useClient"; +import { useDialogClose } from "hooks/useDialogClose"; +import { ApiError } from "api/client/ApiError"; +import { defaultInterval } from "api/defaultInterval"; +import { QueryKeys } from "api/QueryKeys"; +import { StatusHeaderStyles } from "theme/status/StatusColors"; +import { formatTimestamp } from "components/common/formatTimestamp"; +import type { AutoRefreshInterval } from "api/types/AutoRefreshInterval"; +import type { Dependencies } from "api/types/Dependencies"; +import type { PackageStatus } from "api/types/PackageStatus"; +import type { Patch } from "api/types/Patch"; + +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 [tabIndex, setTabIndex] = useState(0); + const [refreshDb, setRefreshDb] = useState(true); + + const onOpen = useCallback(() => { + setTabIndex(0); + setRefreshDb(true); + }, []); + + const { isOpen, requestClose, transitionProps } = useDialogClose(open, onClose, onOpen); + + const autoRefresh = useAutoRefresh("package-info-autoreload-button", defaultInterval(autorefreshIntervals)); + + const { data: packageData } = useQuery({ + queryKey: packageBase && current ? QueryKeys.package(packageBase, current) : ["package-none"], + queryFn: packageBase && current ? () => client.fetchPackage(packageBase, current) : skipToken, + enabled: !!packageBase && !!current && open, + refetchInterval: autoRefresh.refetchInterval, + }); + + const { data: dependencies } = useQuery({ + queryKey: packageBase && current ? QueryKeys.dependencies(packageBase, current) : ["deps-none"], + queryFn: packageBase && current ? () => client.fetchDependencies(packageBase, current) : skipToken, + enabled: !!packageBase && !!current && open, + }); + + const { data: patches = [] } = useQuery({ + queryKey: packageBase ? QueryKeys.patches(packageBase) : ["patches-none"], + queryFn: packageBase ? () => client.fetchPatches(packageBase) : skipToken, + enabled: !!packageBase && open, + }); + + const description: PackageStatus | undefined = packageData?.[0]; + const pkg = description?.package; + const status = description?.status; + const headerStyle = status ? StatusHeaderStyles[status.status] : {}; + + const handleUpdate = async (): Promise => { + if (!packageBase || !current) { + return; + } + try { + await client.addPackages(current, { packages: [packageBase], refresh: refreshDb }); + showSuccess("Success", `Run update for packages ${packageBase}`); + } catch (e) { + showError("Action failed", `Package update failed: ${ApiError.errorDetail(e)}`); + } + }; + + const handleRemove = async (): Promise => { + if (!packageBase || !current) { + return; + } + try { + await client.removePackages(current, [packageBase]); + showSuccess("Success", `Packages ${packageBase} have been removed`); + requestClose(); + } catch (e) { + showError("Action failed", `Could not remove package: ${ApiError.errorDetail(e)}`); + } + }; + + const handleDeletePatch = async (key: string): Promise => { + if (!packageBase) { + return; + } + try { + await client.deletePatch(packageBase, key); + void queryClient.invalidateQueries({ queryKey: QueryKeys.patches(packageBase) }); + } catch (e) { + showError("Action failed", `Could not delete variable: ${ApiError.errorDetail(e)}`); + } + }; + + const handleReload = (): void => { + if (!packageBase || !current) { + return; + } + void queryClient.invalidateQueries({ queryKey: QueryKeys.package(packageBase, current) }); + void queryClient.invalidateQueries({ queryKey: QueryKeys.logs(packageBase, current) }); + void queryClient.invalidateQueries({ queryKey: QueryKeys.changes(packageBase, current) }); + void queryClient.invalidateQueries({ queryKey: QueryKeys.events(current, packageBase) }); + void queryClient.invalidateQueries({ queryKey: QueryKeys.dependencies(packageBase, current) }); + void queryClient.invalidateQueries({ queryKey: QueryKeys.patches(packageBase) }); + }; + + return ( + + + {pkg && status + ? `${pkg.base} ${status.status} at ${formatTimestamp(status.timestamp)}` + : packageBase ?? ""} + + + {pkg && ( + <> + + void handleDeletePatch(key)} + /> + + + setTabIndex(v)}> + + + + + + + {tabIndex === 0 && packageBase && current && ( + + )} + {tabIndex === 1 && packageBase && current && ( + + )} + {tabIndex === 2 && packageBase && current && ( + + )} + + )} + + void handleUpdate()} + onRemove={() => void handleRemove()} + onReload={handleReload} + autorefreshIntervals={autorefreshIntervals} + autoRefreshEnabled={autoRefresh.enabled} + autoRefreshInterval={autoRefresh.interval} + onAutoRefreshToggle={autoRefresh.setEnabled} + onAutoRefreshIntervalChange={autoRefresh.changeInterval} + /> + + ); +} diff --git a/frontend/src/components/dialogs/PackageRebuildDialog.tsx b/frontend/src/components/dialogs/PackageRebuildDialog.tsx new file mode 100644 index 00000000..be79bc71 --- /dev/null +++ b/frontend/src/components/dialogs/PackageRebuildDialog.tsx @@ -0,0 +1,75 @@ +import React, { useCallback, useState } from "react"; +import { + Dialog, DialogContent, DialogActions, Button, + TextField, +} from "@mui/material"; +import DialogHeader from "components/common/DialogHeader"; +import PlayArrowIcon from "@mui/icons-material/PlayArrow"; +import RepositorySelect from "components/common/RepositorySelect"; +import { useNotification } from "hooks/useNotification"; +import { useSelectedRepository } from "hooks/useSelectedRepository"; +import { useClient } from "hooks/useClient"; +import { useDialogClose } from "hooks/useDialogClose"; +import { ApiError } from "api/client/ApiError"; + +interface PackageRebuildDialogProps { + open: boolean; + onClose: () => void; +} + +export default function PackageRebuildDialog({ open, onClose }: PackageRebuildDialogProps): React.JSX.Element { + const client = useClient(); + const { showSuccess, showError } = useNotification(); + const repoSelect = useSelectedRepository(); + + const [dependency, setDependency] = useState(""); + + const { reset: resetRepoSelect } = repoSelect; + const onOpen = useCallback(() => { + setDependency(""); + resetRepoSelect(); + }, [resetRepoSelect]); + + const { isOpen, requestClose, transitionProps } = useDialogClose(open, onClose, onOpen); + + const handleRebuild = async (): Promise => { + if (!dependency) { + return; + } + const repo = repoSelect.selectedRepo; + if (!repo) { + return; + } + try { + await client.rebuildPackages(repo, [dependency]); + requestClose(); + showSuccess("Success", `Repository rebuild has been run for packages which depend on ${dependency}`); + } catch (e) { + const detail = ApiError.errorDetail(e); + showError("Action failed", `Repository rebuild failed: ${detail}`); + } + }; + + return ( + + + Rebuild depending packages + + + + + setDependency(e.target.value)} + /> + + + + + + ); +} diff --git a/frontend/src/components/layout/AppLayout.tsx b/frontend/src/components/layout/AppLayout.tsx new file mode 100644 index 00000000..6a406734 --- /dev/null +++ b/frontend/src/components/layout/AppLayout.tsx @@ -0,0 +1,59 @@ +import React, { useState, useEffect } from "react"; +import { Container, Box } from "@mui/material"; +import { useQuery } from "@tanstack/react-query"; +import Navbar from "components/layout/Navbar"; +import Footer from "components/layout/Footer"; +import PackageTable from "components/table/PackageTable"; +import LoginDialog from "components/dialogs/LoginDialog"; +import { useAuth } from "hooks/useAuth"; +import { useClient } from "hooks/useClient"; +import { useRepository } from "hooks/useRepository"; +import { QueryKeys } from "api/QueryKeys"; +import type { InfoResponse } from "api/types/InfoResponse"; + +export default function AppLayout(): React.JSX.Element { + const client = useClient(); + const { setAuthState } = useAuth(); + const { setRepositories } = useRepository(); + const [loginOpen, setLoginOpen] = useState(false); + + const { data: info } = useQuery({ + queryKey: QueryKeys.info, + queryFn: () => client.fetchInfo(), + staleTime: Infinity, + }); + + // Sync info to contexts when loaded + useEffect(() => { + if (info) { + setAuthState({ enabled: info.auth.enabled, username: info.auth.username ?? null }); + setRepositories(info.repositories); + } + }, [info, setAuthState, setRepositories]); + + return ( + + + + + + + + + + + + +