mhop/test
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Refactor Buttons component to use a ButtonLink for cleaner code, simplifying the source URL generation and layout (#371)

Browse Source 
* Refactor Buttons component to use a ButtonLink for cleaner code, simplifying the source URL generation and layout

* Refactor DefaultPassword component to simplify credential handling and enhance code readability with map function

* Refactor DefaultSettings component to improve resource display logic and enhance readability using a new ResourceDisplay subcomponent
This commit is contained in:
Bram Suurd
2024-11-19 22:21:00 +01:00
committed by GitHub
parent 9f80cec2d9
commit 6e71047570
3 changed files with 104 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
frontend/src/app/scripts/_components/ScriptItems/DefaultSettings.tsx
View File

@@ -1,56 +1,50 @@
import { Script } from "@/lib/types";
export default function DefaultSettings({ item }: { item: Script }) {
const getDisplayValueFromRAM = (ram: number) =>
ram >= 1024 ? `${Math.floor(ram / 1024)}GB` : `${ram}MB`;
const ResourceDisplay = ({
settings,
title,
}: {
settings: (typeof item.install_methods)[0];
title: string;
}) => {
const { cpu, ram, hdd } = settings.resources;
return (
<div>
<h2 className="text-md font-semibold">{title}</h2>
<p className="text-sm text-muted-foreground">CPU: {cpu}vCPU</p>
<p className="text-sm text-muted-foreground">
RAM: {getDisplayValueFromRAM(ram ?? 0)}
</p>
<p className="text-sm text-muted-foreground">HDD: {hdd}GB</p>
</div>
);
};
const defaultSettings = item.install_methods.find(
(method) => method.type === "default",
);
const defaultSettingsAvailable =
defaultSettings?.resources.cpu ||
defaultSettings?.resources.ram ||
defaultSettings?.resources.hdd;
const defaultAlpineSettings = item.install_methods.find(
(method) => method.type === "alpine",
);
const getDisplayValueFromRAM = (ram: number) => {
if (ram >= 1024) {
return (ram / 1024).toFixed(0) + "GB";
}
return ram + "MB";
};
const hasDefaultSettings =
defaultSettings?.resources &&
Object.values(defaultSettings.resources).some(Boolean);
return (
<>
{defaultSettingsAvailable && (
<div>
<h2 className="text-md font-semibold">Default settings</h2>
<p className="text-sm text-muted-foreground">
CPU: {defaultSettings?.resources.cpu}vCPU
</p>
<p className="text-sm text-muted-foreground">
RAM: {getDisplayValueFromRAM(defaultSettings?.resources.ram ?? 0)}
</p>
<p className="text-sm text-muted-foreground">
HDD: {defaultSettings?.resources.hdd}GB
</p>
</div>
{hasDefaultSettings && (
<ResourceDisplay settings={defaultSettings} title="Default settings" />
)}
{defaultAlpineSettings && (
<div>
<h2 className="text-md font-semibold">Default Alpine settings</h2>
<p className="text-sm text-muted-foreground">
CPU: {defaultAlpineSettings?.resources.cpu}vCPU
</p>
<p className="text-sm text-muted-foreground">
RAM:{" "}
{getDisplayValueFromRAM(defaultAlpineSettings?.resources.ram ?? 0)}
</p>
<p className="text-sm text-muted-foreground">
HDD: {defaultAlpineSettings?.resources.hdd}GB
</p>
</div>
<ResourceDisplay
settings={defaultAlpineSettings}
title="Default Alpine settings"
/>
)}
</>
);