style: improve repo details layout (#596)
This commit is contained in:
Nico
GitHub
parent
f686c1aa16
commit
67eca589d8
3 changed files with 214 additions and 202 deletions
|
|
@ -2,7 +2,7 @@ import { useQuery } from "@tanstack/react-query";
|
|||
import { Archive } from "lucide-react";
|
||||
import { getRepositoryStatsOptions } from "~/client/api-client/@tanstack/react-query.gen";
|
||||
import { ByteSize } from "~/client/components/bytes-size";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "~/client/components/ui/card";
|
||||
import { Card, CardContent, CardTitle } from "~/client/components/ui/card";
|
||||
import type { GetRepositoryStatsResponse } from "~/client/api-client/types.gen";
|
||||
|
||||
type Props = {
|
||||
|
|
@ -53,9 +53,9 @@ export function CompressionStatsChart({ repositoryShortId, initialStats }: Props
|
|||
|
||||
if (error) {
|
||||
return (
|
||||
<Card className="p-6">
|
||||
<p className="text-sm font-medium text-destructive">Failed to load compression statistics</p>
|
||||
<p className="mt-2 text-sm text-muted-foreground wrap-break-word">{error.message}</p>
|
||||
<Card className="p-6 border-red-500/20 bg-red-500/5">
|
||||
<p className="text-sm font-medium text-red-500">Failed to load compression statistics</p>
|
||||
<p className="mt-2 text-sm text-red-500/80 wrap-break-word">{error.message}</p>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
@ -71,67 +71,61 @@ export function CompressionStatsChart({ repositoryShortId, initialStats }: Props
|
|||
}
|
||||
|
||||
return (
|
||||
<Card className="flex flex-col h-full">
|
||||
<CardHeader className="pb-4">
|
||||
<CardTitle className="flex items-center gap-2 text-base font-semibold">
|
||||
<Archive className="h-4 w-4" />
|
||||
<Card className="flex flex-col px-6 py-6">
|
||||
<div className="pb-4">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Archive className="h-5 w-5 text-muted-foreground" />
|
||||
Compression Statistics
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="flex-1">
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-y-6 gap-x-6">
|
||||
</div>
|
||||
<div>
|
||||
<CardContent className="grid grid-cols-2 lg:grid-cols-3 gap-y-6 gap-x-4 px-0">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex items-center gap-2 text-muted-foreground">
|
||||
<span className="text-xs font-medium uppercase tracking-wider">Stored Size</span>
|
||||
</div>
|
||||
<div className="text-sm font-medium text-muted-foreground">Stored Size</div>
|
||||
<div className="flex items-baseline gap-2">
|
||||
<ByteSize base={1024} bytes={storedSize} className="text-2xl font-bold font-mono text-foreground" />
|
||||
<ByteSize base={1024} bytes={storedSize} className="text-xl font-semibold text-foreground font-mono" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex items-center gap-2 text-muted-foreground">
|
||||
<span className="text-xs font-medium uppercase tracking-wider">Uncompressed</span>
|
||||
</div>
|
||||
<div className="text-sm font-medium text-muted-foreground">Uncompressed</div>
|
||||
<div className="flex items-baseline gap-2">
|
||||
<ByteSize base={1024} bytes={uncompressedSize} className="text-2xl font-bold font-mono text-foreground" />
|
||||
<ByteSize
|
||||
base={1024}
|
||||
bytes={uncompressedSize}
|
||||
className="text-xl font-semibold text-foreground font-mono"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex items-center gap-2 text-muted-foreground">
|
||||
<span className="text-xs font-medium uppercase tracking-wider">Space Saved</span>
|
||||
</div>
|
||||
<div className="text-sm font-medium text-muted-foreground">Space Saved</div>
|
||||
<div className="flex items-baseline gap-2">
|
||||
<span className="text-2xl font-bold font-mono text-foreground">{spaceSavingPercent.toFixed(1)}%</span>
|
||||
<ByteSize base={1024} bytes={savedSize} className="text-sm text-muted-foreground font-mono" />
|
||||
<span className="text-xl font-semibold text-foreground font-mono">{spaceSavingPercent.toFixed(1)}%</span>
|
||||
<ByteSize base={1024} bytes={savedSize} className="text-xs text-muted-foreground font-mono" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex items-center gap-2 text-muted-foreground">
|
||||
<span className="text-xs font-medium uppercase tracking-wider">Ratio</span>
|
||||
</div>
|
||||
<div className="text-sm font-medium text-muted-foreground">Ratio</div>
|
||||
<div className="flex items-baseline gap-2">
|
||||
<span className="text-2xl font-bold font-mono text-foreground">
|
||||
<span className="text-xl font-semibold text-foreground font-mono">
|
||||
{compressionRatio > 0 ? `${compressionRatio.toFixed(2)}x` : "—"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex items-center gap-2 text-muted-foreground">
|
||||
<span className="text-xs font-medium uppercase tracking-wider">Snapshots</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5 lg:col-span-2">
|
||||
<div className="text-sm font-medium text-muted-foreground">Snapshots</div>
|
||||
<div className="flex items-baseline gap-2">
|
||||
<span className="text-2xl font-bold font-mono text-foreground">{snapshotsCount.toLocaleString()}</span>
|
||||
<span className="text-sm text-muted-foreground font-mono">
|
||||
<span className="text-xl font-semibold text-foreground font-mono">{snapshotsCount.toLocaleString()}</span>
|
||||
<span className="text-xs text-muted-foreground font-mono">
|
||||
{compressionProgressPercent.toFixed(1)}% compressed
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</CardContent>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { AlertCircle, CheckCircle2 } from "lucide-react";
|
|||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "~/client/components/ui/collapsible";
|
||||
import { formatDateTime } from "~/client/lib/datetime";
|
||||
import { cn, safeJsonParse } from "~/client/lib/utils";
|
||||
import { Card, CardTitle } from "~/client/components/ui/card";
|
||||
|
||||
type DoctorStep = {
|
||||
step: string;
|
||||
|
|
@ -23,66 +24,69 @@ type Props = {
|
|||
|
||||
export const DoctorReport = ({ result, repositoryStatus }: Props) => {
|
||||
return (
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold">Doctor Report</h3>
|
||||
<Card className="px-6 py-6 flex flex-col gap-4 h-full">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle>Doctor Report</CardTitle>
|
||||
{result && (
|
||||
<span className="text-xs text-muted-foreground bg-muted/50 px-2 py-1 rounded-md">
|
||||
{formatDateTime(result.completedAt)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{result && (
|
||||
<div className="space-y-2">
|
||||
<span className="text-xs text-muted-foreground">Completed {formatDateTime(result.completedAt)}</span>
|
||||
<div className="space-y-2 mt-2">
|
||||
{result.steps.map((step) => (
|
||||
<Collapsible key={step.step} className="border rounded overflow-hidden bg-muted/30 group">
|
||||
<CollapsibleTrigger className="w-full flex items-center justify-start p-3 hover:bg-muted/50 transition-colors">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-sm font-medium">{step.step.replaceAll("_", " ")}</span>
|
||||
{step.success ? (
|
||||
<CheckCircle2 className="h-4 w-4 text-green-500" />
|
||||
) : (
|
||||
<AlertCircle className="h-4 w-4 text-red-500" />
|
||||
)}
|
||||
</div>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="border-t bg-muted/50">
|
||||
<div className="p-2 space-y-3">
|
||||
{step.output && (
|
||||
<pre className="text-xs font-mono bg-background/50 p-3 border overflow-auto max-h-50 whitespace-pre-wrap">
|
||||
{safeJsonParse(step.output) ? JSON.stringify(safeJsonParse(step.output), null, 2) : step.output}
|
||||
{result.steps.map((step) => (
|
||||
<Collapsible key={step.step} className="border border-border/50 rounded-lg overflow-hidden group">
|
||||
<CollapsibleTrigger className="w-full flex items-center justify-between p-3 hover:bg-muted/50 transition-colors">
|
||||
<span className="text-sm font-medium capitalize">{step.step.replaceAll("_", " ")}</span>
|
||||
{step.success ? (
|
||||
<CheckCircle2 className="h-4 w-4 text-emerald-500" />
|
||||
) : (
|
||||
<AlertCircle className="h-4 w-4 text-red-500" />
|
||||
)}
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="border-t border-border/50 bg-muted/30">
|
||||
<div className="p-3 space-y-3">
|
||||
{step.output && (
|
||||
<pre className="text-xs font-mono bg-background p-3 rounded-md border border-border/50 overflow-auto max-h-50 whitespace-pre-wrap">
|
||||
{safeJsonParse(step.output) ? JSON.stringify(safeJsonParse(step.output), null, 2) : step.output}
|
||||
</pre>
|
||||
)}
|
||||
{step.error && (
|
||||
<div className="space-y-2">
|
||||
<div className="text-[10px] uppercase font-bold text-red-500/70 tracking-wider">Error</div>
|
||||
<pre className="text-xs font-mono bg-red-500/10 text-red-500 p-3 rounded-md border border-red-500/20 overflow-auto whitespace-pre-wrap">
|
||||
{step.error}
|
||||
</pre>
|
||||
)}
|
||||
{step.error && (
|
||||
<div className="space-y-1.5">
|
||||
<div className="text-[10px] uppercase font-bold text-red-500/70 px-1">Error</div>
|
||||
<pre className="text-xs font-mono bg-red-500/5 text-red-500 p-3 border border-red-500/20 overflow-auto whitespace-pre-wrap">
|
||||
{step.error}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
{!step.output && !step.error && (
|
||||
<div className="text-xs text-muted-foreground italic px-1">No output recorded</div>
|
||||
)}
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{!step.output && !step.error && (
|
||||
<div className="text-sm text-muted-foreground italic">No output recorded</div>
|
||||
)}
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className={cn("mt-2 bg-muted/30 border p-6 text-center", {
|
||||
className={cn("bg-muted/30 border border-border/50 rounded-lg p-6 text-center", {
|
||||
hidden: result != null || repositoryStatus === "doctor",
|
||||
})}
|
||||
>
|
||||
<p className="text-sm text-muted-foreground">No doctor report available.</p>
|
||||
</div>
|
||||
<div
|
||||
className={cn("mt-2 border p-6 text-center", {
|
||||
className={cn("border border-border/50 rounded-lg p-6 text-center bg-muted/20", {
|
||||
hidden: repositoryStatus !== "doctor",
|
||||
})}
|
||||
>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
|
||||
<p className="text-sm ">Doctor operation running...</p>
|
||||
<p className="text-sm font-medium">Doctor operation running...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { useMutation } from "@tanstack/react-query";
|
|||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { Pencil, Square, Stethoscope, Trash2, Unlock } from "lucide-react";
|
||||
import { Card } from "~/client/components/ui/card";
|
||||
import { Card, CardContent, CardTitle } from "~/client/components/ui/card";
|
||||
import { Button } from "~/client/components/ui/button";
|
||||
import {
|
||||
AlertDialog,
|
||||
|
|
@ -106,135 +106,149 @@ export const RepositoryInfoTabContent = ({ repository, initialStats }: Props) =>
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="grid gap-4">
|
||||
<Card className="p-6 @container">
|
||||
<div className="flex flex-col @xl:flex-row items-start @xl:items-center justify-between gap-4">
|
||||
<div>
|
||||
<span className="text-lg font-semibold">Repository Settings</span>
|
||||
</div>
|
||||
<div className="flex flex-col @xl:flex-row w-full @xl:w-auto gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => navigate({ to: `/repositories/${repository.shortId}/edit` })}
|
||||
>
|
||||
<Pencil className="h-4 w-4 mr-2" />
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
loading={cancelDoctor.isPending}
|
||||
onClick={() => cancelDoctor.mutate({ path: { shortId: repository.shortId } })}
|
||||
className={cn({ hidden: !isDoctorRunning })}
|
||||
>
|
||||
<Square className="h-4 w-4 mr-2" />
|
||||
<span>Cancel doctor</span>
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => startDoctor.mutate({ path: { shortId: repository.shortId } })}
|
||||
disabled={startDoctor.isPending}
|
||||
className={cn({ hidden: isDoctorRunning })}
|
||||
>
|
||||
<Stethoscope className="h-4 w-4 mr-2" />
|
||||
Run doctor
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => unlockRepo.mutate({ path: { shortId: repository.shortId } })}
|
||||
loading={unlockRepo.isPending}
|
||||
>
|
||||
<Unlock className="h-4 w-4 mr-2" />
|
||||
Unlock
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
onClick={() => setShowDeleteConfirm(true)}
|
||||
disabled={deleteRepo.isPending}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-6 @container">
|
||||
<div className="flex flex-col @medium:flex-row items-start @medium:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4">Current Configuration</h3>
|
||||
<div className="grid grid-cols-1 @xl:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<div className="text-sm font-medium text-muted-foreground">Name</div>
|
||||
<p className="mt-1 text-sm">{repository.name}</p>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-muted-foreground">Compression mode</div>
|
||||
<p className="mt-1 text-sm">{repository.compressionMode || "off"}</p>
|
||||
</div>
|
||||
<h2 className="text-lg font-semibold tracking-tight">Repository Settings</h2>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => navigate({ to: `/repositories/${repository.shortId}/edit` })}
|
||||
>
|
||||
<Pencil className="h-4 w-4 mr-2" />
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
className={cn({ hidden: !isDoctorRunning })}
|
||||
loading={cancelDoctor.isPending}
|
||||
onClick={() => cancelDoctor.mutate({ path: { shortId: repository.shortId } })}
|
||||
>
|
||||
<Square className="h-4 w-4 mr-2" />
|
||||
<span>Cancel doctor</span>
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
className={cn({ hidden: isDoctorRunning })}
|
||||
onClick={() => startDoctor.mutate({ path: { shortId: repository.shortId } })}
|
||||
disabled={startDoctor.isPending}
|
||||
>
|
||||
<Stethoscope className="h-4 w-4 mr-2" />
|
||||
Run doctor
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => unlockRepo.mutate({ path: { shortId: repository.shortId } })}
|
||||
loading={unlockRepo.isPending}
|
||||
>
|
||||
<Unlock className="h-4 w-4 mr-2" />
|
||||
Unlock
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
onClick={() => setShowDeleteConfirm(true)}
|
||||
disabled={deleteRepo.isPending}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 @wide:grid-cols-2 gap-6 items-stretch">
|
||||
<div className="flex flex-col gap-6">
|
||||
<Card className="px-6 py-6">
|
||||
<CardTitle>Overview</CardTitle>
|
||||
<CardContent className="grid grid-cols-1 @medium:grid-cols-2 gap-y-6 gap-x-4 px-0">
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="text-sm font-medium text-muted-foreground">Name</div>
|
||||
<p className="text-sm">{repository.name}</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="text-sm font-medium text-muted-foreground">Backend</div>
|
||||
<p className="text-sm">{repository.type}</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="text-sm font-medium text-muted-foreground">Compression Mode</div>
|
||||
<p className="text-sm">{repository.compressionMode || "off"}</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="text-sm font-medium text-muted-foreground">Created</div>
|
||||
<p className="text-sm">{formatDateTime(repository.createdAt)}</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="text-sm font-medium text-muted-foreground">Status</div>
|
||||
<p className="text-sm flex items-center gap-2">
|
||||
<span
|
||||
className={cn("w-2 h-2 rounded-full", {
|
||||
"bg-emerald-500": repository.status === "healthy",
|
||||
"bg-red-500": repository.status === "error",
|
||||
"bg-amber-500": repository.status !== "healthy" && repository.status !== "error",
|
||||
"animate-pulse": repository.status === "doctor",
|
||||
})}
|
||||
/>
|
||||
<span className="capitalize">{repository.status || "Unknown"}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="text-sm font-medium text-muted-foreground">Last Checked</div>
|
||||
<p className="text-sm">{formatTimeAgo(repository.lastChecked)}</p>
|
||||
</div>
|
||||
{hasLocalPath && (
|
||||
<div className="flex flex-col gap-1 @medium:col-span-2">
|
||||
<div className="text-sm font-medium text-muted-foreground">Local Path</div>
|
||||
<p className="text-sm font-mono bg-muted/50 p-2 rounded-md break-all">{effectiveLocalPath}</p>
|
||||
</div>
|
||||
)}
|
||||
{hasCaCert && (
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="text-sm font-medium text-muted-foreground">CA Certificate</div>
|
||||
<p className="text-sm text-green-500">Configured</p>
|
||||
</div>
|
||||
)}
|
||||
{hasInsecureTlsConfig && (
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="text-sm font-medium text-muted-foreground">TLS Validation</div>
|
||||
<p className="text-sm">
|
||||
<span className={cn("text-red-500", { hidden: !isTlsValidationDisabled })}>Disabled</span>
|
||||
<span className={cn("text-green-500", { hidden: isTlsValidationDisabled })}>Enabled</span>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{hasLastError && (
|
||||
<Card className="px-6 py-6 border-red-500/20 bg-red-500/5">
|
||||
<h3 className="text-lg font-medium text-red-500 mb-2">Last Error</h3>
|
||||
<p className="text-sm text-red-500/90 font-mono wrap-break-word">{repository.lastError}</p>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<div className="flex-1 flex flex-col">
|
||||
<DoctorReport repositoryStatus={repository.status} result={repository.doctorResult} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4">Repository Information</h3>
|
||||
<div className="grid grid-cols-1 @xl:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<div className="text-sm font-medium text-muted-foreground">Backend</div>
|
||||
<p className="mt-1 text-sm">{repository.type}</p>
|
||||
<div className="flex flex-col gap-6">
|
||||
<CompressionStatsChart repositoryShortId={repository.shortId} initialStats={initialStats} />
|
||||
|
||||
<Card className="px-6 py-6 flex-1">
|
||||
<CardTitle>Configuration</CardTitle>
|
||||
<div className="bg-muted/50 rounded-md p-4 max-w-full">
|
||||
<pre className="text-sm overflow-auto font-mono whitespace-pre-wrap">
|
||||
{JSON.stringify(repository.config, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-muted-foreground">Status</div>
|
||||
<p className="mt-1 text-sm">{repository.status || "unknown"}</p>
|
||||
</div>
|
||||
<div className={cn({ hidden: !hasLocalPath })}>
|
||||
<div className="text-sm font-medium text-muted-foreground">Local path</div>
|
||||
<p className="mt-1 text-sm font-mono">{effectiveLocalPath}</p>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-muted-foreground">Created at</div>
|
||||
<p className="mt-1 text-sm">{formatDateTime(repository.createdAt)}</p>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-muted-foreground">Last checked</div>
|
||||
<p className="mt-1 text-sm">{formatTimeAgo(repository.lastChecked)}</p>
|
||||
</div>
|
||||
<div className={cn({ hidden: !hasCaCert })}>
|
||||
<div className="text-sm font-medium text-muted-foreground">CA Certificate</div>
|
||||
<p className="mt-1 text-sm">
|
||||
<span className="text-green-500">configured</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className={cn({ hidden: !hasInsecureTlsConfig })}>
|
||||
<div className="text-sm font-medium text-muted-foreground">TLS Certificate Validation</div>
|
||||
<p className="mt-1 text-sm">
|
||||
<span className={cn("text-red-500", { hidden: !isTlsValidationDisabled })}>disabled</span>
|
||||
<span className={cn("text-green-500", { hidden: isTlsValidationDisabled })}>enabled</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className={cn({ hidden: !hasLastError })}>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold text-red-500">Last Error</h3>
|
||||
</div>
|
||||
<div className="bg-red-500/10 border border-red-500/20 rounded-md p-4">
|
||||
<p className="text-sm text-red-500 wrap-break-word">{repository.lastError}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4">Configuration</h3>
|
||||
<div className="bg-muted/50 rounded-md p-4">
|
||||
<pre className="text-sm overflow-auto">{JSON.stringify(repository.config, null, 2)}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DoctorReport repositoryStatus={repository.status} result={repository.doctorResult} />
|
||||
</Card>
|
||||
<CompressionStatsChart repositoryShortId={repository.shortId} initialStats={initialStats} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
|
||||
|
|
|
|||
Loading…
Reference in a new issue