Skip to content

Commit

Permalink
Add: Network Info Table
Browse files Browse the repository at this point in the history
  • Loading branch information
@shm11C3
shm11C3 committed Dec 31, 2024
1 parent 4e93990 commit 0358fc7
Show file tree
Hide file tree
Showing 6 changed files with 259 additions and 41 deletions.
62 changes: 62 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
"dependencies": {
"@hookform/resolvers": "^3.9.1",
"@phosphor-icons/react": "^2.1.7",
"@radix-ui/react-accordion": "^1.2.2",
"@radix-ui/react-checkbox": "^1.1.3",
"@radix-ui/react-dialog": "^1.1.3",
"@radix-ui/react-label": "^2.1.1",
Expand Down
58 changes: 58 additions & 0 deletions src/components/ui/accordion.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
"use client";

import * as AccordionPrimitive from "@radix-ui/react-accordion";
import { ChevronDown } from "lucide-react";
import * as React from "react";

import { cn } from "@/lib/utils";

const Accordion = AccordionPrimitive.Root;

const AccordionItem = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>(({ className, ...props }, ref) => (
<AccordionPrimitive.Item
ref={ref}
className={cn("border-b", className)}
{...props}
/>
));
AccordionItem.displayName = "AccordionItem";

const AccordionTrigger = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
<AccordionPrimitive.Header className="flex">
<AccordionPrimitive.Trigger
ref={ref}
className={cn(
"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:opacity-60 [&[data-state=open]>svg]:rotate-180",
className,
)}
{...props}
>
{children}
<ChevronDown className="h-6 w-6 shrink-0 transition-transform duration-200" />
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
));
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;

const AccordionContent = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
>(({ className, children, ...props }, ref) => (
<AccordionPrimitive.Content
ref={ref}
className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
{...props}
>
<div className={cn("pb-4 pt-0", className)}>{children}</div>
</AccordionPrimitive.Content>
));

AccordionContent.displayName = AccordionPrimitive.Content.displayName;

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
1 change: 1 addition & 0 deletions src/i18n/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
"process": "Process",
"reset": "Reset",
"storage": "Storage",
"network": "Network",
"driveName": "Drive Name",
"driveType": "Drive Type",
"driveTotalSpace": "Drive Total Space",
Expand Down
1 change: 1 addition & 0 deletions src/i18n/ja.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
"process": "プロセス",
"reset": "リセット",
"storage": "ストレージ",
"network": "ネットワーク",
"driveName": "ドライブ名",
"driveType": "ドライブタイプ",
"driveTotalSpace": "ドライブ容量",
Expand Down
177 changes: 136 additions & 41 deletions src/template/Dashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,12 @@ import {
} from "@/components/charts/Bar";
import { DoughnutChart } from "@/components/charts/DoughnutChart";
import { ProcessesTable } from "@/components/charts/ProcessTable";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
import { minOpacity } from "@/consts";
import type { StorageInfo } from "@/rspc/bindings";
import type { NameValues } from "@/types/hardwareDataType";
Expand Down Expand Up @@ -226,7 +232,8 @@ const StorageDataInfo = () => {
};

const NetworkInfo = () => {
const { t } = useTranslation();
//const { t } = useTranslation();
const { settings } = useSettingsAtom();
const { networkInfo, initNetwork } = useHardwareInfoAtom();

// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
Expand All @@ -238,26 +245,112 @@ const NetworkInfo = () => {
<>
{networkInfo.map((network) => {
return (
<div key={network.description} className="mt-4">
<InfoTable
data={{
description: network.description ?? "",
mac_address: network.macAddress ?? "",
ipv4: network.ipV4.join(", "),
ipv6: network.ipV6.join(", "),
linkLocalIpV6: network.linkLocalIpV6.join(", "),
ip_subnet: network.ipSubnet.join(", "),
gatewayV4: network.defaultIpv4Gateway.join(", "),
gatewayV6: network.defaultIpv6Gateway.join(", "),
<>
<div
key={network.description}
className="mt-4 mb-2 px-4 pt-2 pb-2 border rounded-md shadow-md bg-zinc-300 dark:bg-gray-800 dark:text-white"
style={{
opacity:
settings.selectedBackgroundImg != null
? Math.max(
(1 - settings.backgroundImgOpacity / 100) ** 2,
minOpacity,
)
: 1,
}}
/>
</div>
>
<Accordion type="single" collapsible className="w-full">
<AccordionItem value="item-1" className="border-none">
<AccordionTrigger>
<div className="w-full flex items-center justify-between">
<p>{network.description ?? "No description"}</p>
<p className="text-sm text-gray-500 dark:text-gray-400 mr-2 w-24 text-left ">
{network.ipV4[0] ?? "No IP Address"}
</p>
</div>
</AccordionTrigger>
<AccordionContent>
<table className="w-full text-left text-base">
<tbody>
<tr className="border-b border-gray-700">
<th className="pr-4 py-2 dark:text-gray-400">
MAC Address
</th>
<td className="py-2">
{network.macAddress ?? "No MAC Address"}
</td>
</tr>
<tr className="border-b border-gray-700">
<th className="pr-4 py-2 dark:text-gray-400">IPv4</th>
<td className="py-2">
{network.ipV4.map((ip) => (
<p key={ip}>{ip}</p>
))}
</td>
</tr>
<tr className="border-b border-gray-700">
<th className="pr-4 py-2 dark:text-gray-400">
IPv4 Subnet Mask
</th>
<td className="py-2">
{network.ipSubnet.map((subnet) => (
<p key={subnet}>{subnet}</p>
))}
</td>
</tr>
<tr className="border-b border-gray-700">
<th className="pr-4 py-2 dark:text-gray-400">
IPv4 Gateway
</th>
<td className="py-2">
{network.defaultIpv4Gateway.map((gateway) => (
<p key={gateway}>{gateway}</p>
))}
</td>
</tr>
<tr className="border-b border-gray-700">
<th className="pr-4 py-2 dark:text-gray-400">IPv6</th>
<td className="py-2">
{network.ipV6.map((ip) => (
<p key={ip}>{ip}</p>
))}
</td>
</tr>
<tr className="border-b border-gray-700">
<th className="pr-4 py-2 dark:text-gray-400">
Link Local IPv6
</th>
<td className="py-2">
{network.linkLocalIpV6.map((ip) => (
<p key={ip}>{ip}</p>
))}
</td>
</tr>
<tr className="border-b border-gray-700">
<th className="pr-4 py-2 dark:text-gray-400">
IPv6 Gateway
</th>
<td className="py-2">
{network.defaultIpv6Gateway.map((gateway) => (
<p key={gateway}>{gateway}</p>
))}
</td>
</tr>
</tbody>
</table>
</AccordionContent>
</AccordionItem>
</Accordion>
</div>
</>
);
})}
</>
);
};

type DataTypeKey = "cpu" | "memory" | "storage" | "gpu" | "network" | "process";

const Dashboard = () => {
const { hardwareInfo } = useHardwareInfoAtom();
const { init } = useHardwareInfoAtom();
Expand All @@ -268,34 +361,36 @@ const Dashboard = () => {
init();
}, []);

const hardwareInfoListLeft: { key: string; component: JSX.Element }[] = [
hardwareInfo.cpu && { key: "cpuInfo", component: <CPUInfo /> },
hardwareInfo.memory && { key: "memoryInfo", component: <MemoryInfo /> },
hardwareInfo.storage && hardwareInfo.storage.length > 0
? {
key: "storageInfo",
component: <StorageDataInfo />,
}
: undefined,
].filter((x) => x != null);

const hardwareInfoListRight: { key: string; component: JSX.Element }[] = [
hardwareInfo.gpus && { key: "gpuInfo", component: <GPUInfo /> },
{
key: "processesTable",
component: <ProcessesTable />,
const hardwareInfoListLeft: { key: DataTypeKey; component: JSX.Element }[] = [
hardwareInfo.cpu && { key: "cpu", component: <CPUInfo /> },
hardwareInfo.memory && { key: "memory", component: <MemoryInfo /> },
hardwareInfo.storage.length > 0 && {
key: "storage",
component: <StorageDataInfo />,
},
{
key: "networkInfo",
component: <NetworkInfo />,
},
].filter((x) => x != null);
].filter((x): x is { key: DataTypeKey; component: JSX.Element } => x != null);

const hardwareInfoListRight: { key: DataTypeKey; component: JSX.Element }[] =
[
hardwareInfo.gpus && { key: "gpu", component: <GPUInfo /> },
{
key: "process",
component: <ProcessesTable />,
},
{
key: "network",
component: <NetworkInfo />,
},
].filter(
(x): x is { key: DataTypeKey; component: JSX.Element } => x != null,
);

const dataAreaKey2Title: Record<string, string> = {
cpuInfo: "CPU",
memoryInfo: "RAM",
storageInfo: t("shared.storage"),
gpuInfo: "GPU",
const dataAreaKey2Title: Partial<Record<DataTypeKey, string>> = {
cpu: "CPU",
memory: "RAM",
storage: t("shared.storage"),
gpu: "GPU",
network: t("shared.network"),
};

return (
Expand All @@ -312,7 +407,7 @@ const Dashboard = () => {
<DataArea
key={key}
title={dataAreaKey2Title[key]}
border={key !== "processesTable"}
border={key !== "process"}
>
{component}
</DataArea>
Expand Down

0 comments on commit 0358fc7

Please sign in to comment.