feat: add-tool network (#9)
Co-authored-by: typist <git@mail.typist.cc> Reviewed-on: #9
This commit is contained in:
179
src/components/tool/network/dns.tsx
Normal file
179
src/components/tool/network/dns.tsx
Normal file
@@ -0,0 +1,179 @@
|
||||
import { useState, type FC } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { toast } from "sonner";
|
||||
import { Loader2 } from "lucide-react";
|
||||
|
||||
interface DNSRecord {
|
||||
name: string;
|
||||
type: number;
|
||||
TTL: number;
|
||||
data: string;
|
||||
}
|
||||
|
||||
interface DNSResponse {
|
||||
Status: number;
|
||||
Answer?: DNSRecord[];
|
||||
Question?: Array<{ name: string; type: number }>;
|
||||
}
|
||||
|
||||
const DNS_RECORD_TYPES = [
|
||||
{ value: "1", label: "A", description: "IPv4 Address" },
|
||||
{ value: "28", label: "AAAA", description: "IPv6 Address" },
|
||||
{ value: "5", label: "CNAME", description: "Canonical Name" },
|
||||
{ value: "15", label: "MX", description: "Mail Exchange" },
|
||||
{ value: "2", label: "NS", description: "Name Server" },
|
||||
{ value: "16", label: "TXT", description: "Text Record" },
|
||||
{ value: "6", label: "SOA", description: "Start of Authority" },
|
||||
{ value: "257", label: "CAA", description: "Certification Authority Authorization" },
|
||||
{ value: "12", label: "PTR", description: "Pointer Record" },
|
||||
{ value: "33", label: "SRV", description: "Service Record" },
|
||||
];
|
||||
|
||||
const getRecordTypeName = (type: number): string => {
|
||||
const record = DNS_RECORD_TYPES.find((r) => r.value === String(type));
|
||||
return record ? record.label : `TYPE${type}`;
|
||||
};
|
||||
|
||||
const Tool: FC = () => {
|
||||
const [domain, setDomain] = useState<string>("");
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [results, setResults] = useState<DNSRecord[]>([]);
|
||||
const [queryTime, setQueryTime] = useState<number>(0);
|
||||
|
||||
const queryDNS = async () => {
|
||||
if (!domain.trim()) {
|
||||
toast.error("Please enter a domain name");
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
setResults([]);
|
||||
setQueryTime(0);
|
||||
|
||||
const startTime = performance.now();
|
||||
|
||||
try {
|
||||
// Query all record types concurrently
|
||||
const queries = DNS_RECORD_TYPES.map((recordType) =>
|
||||
fetch(
|
||||
`https://cloudflare-dns.com/dns-query?name=${encodeURIComponent(
|
||||
domain
|
||||
)}&type=${recordType.value}`,
|
||||
{
|
||||
headers: {
|
||||
Accept: "application/dns-json",
|
||||
},
|
||||
}
|
||||
)
|
||||
.then((response) => response.json())
|
||||
.then((data: DNSResponse) => {
|
||||
if (data.Status === 0 && data.Answer && data.Answer.length > 0) {
|
||||
return data.Answer;
|
||||
}
|
||||
return [];
|
||||
})
|
||||
.catch(() => [])
|
||||
);
|
||||
|
||||
const allResults = await Promise.all(queries);
|
||||
const endTime = performance.now();
|
||||
setQueryTime(endTime - startTime);
|
||||
|
||||
// Merge and deduplicate results
|
||||
const combinedResults = allResults.flat();
|
||||
|
||||
if (combinedResults.length > 0) {
|
||||
// Group by record type and deduplicate
|
||||
const uniqueResults = Array.from(
|
||||
new Map(
|
||||
combinedResults.map((record) => [
|
||||
`${record.name}-${record.type}-${record.data}`,
|
||||
record,
|
||||
])
|
||||
).values()
|
||||
);
|
||||
|
||||
setResults(uniqueResults);
|
||||
toast.success(`Query successful, found ${uniqueResults.length} record(s)`);
|
||||
} else {
|
||||
setResults([]);
|
||||
toast.info("No records found");
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
if (error instanceof Error) {
|
||||
toast.error(`Query failed: ${error.message}`);
|
||||
} else {
|
||||
toast.error("Query failed");
|
||||
}
|
||||
setResults([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === "Enter" && !loading) {
|
||||
queryDNS();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4 h-full">
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<label className="text-sm font-medium">Domain Name</label>
|
||||
<Input
|
||||
placeholder="e.g. example.com"
|
||||
value={domain}
|
||||
onChange={(e) => setDomain(e.target.value)}
|
||||
onKeyPress={handleKeyPress}
|
||||
disabled={loading}
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Will automatically query all DNS record types
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Button onClick={queryDNS} disabled={loading} className="w-full">
|
||||
{loading && <Loader2 className="mr-2 size-4 animate-spin" />}
|
||||
{loading ? "Querying..." : "Query All Records"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{queryTime > 0 && (
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Query time: {queryTime.toFixed(2)} ms
|
||||
</div>
|
||||
)}
|
||||
|
||||
{results.length > 0 && (
|
||||
<div className="flex flex-col gap-3 flex-1 overflow-auto">
|
||||
<div className="text-sm font-medium">Query Results:</div>
|
||||
<div className="space-y-2">
|
||||
{results.map((record, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="border rounded-md p-3 bg-card text-card-foreground"
|
||||
>
|
||||
<div className="grid grid-cols-2 gap-2 text-sm">
|
||||
<div className="text-muted-foreground">Name:</div>
|
||||
<div className="font-mono break-all">{record.name}</div>
|
||||
<div className="text-muted-foreground">Type:</div>
|
||||
<div>{getRecordTypeName(record.type)}</div>
|
||||
<div className="text-muted-foreground">TTL:</div>
|
||||
<div>{record.TTL} seconds</div>
|
||||
<div className="text-muted-foreground">Data:</div>
|
||||
<div className="font-mono break-all">{record.data}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Tool;
|
||||
|
||||
Reference in New Issue
Block a user