fankes/beszel
2
0
Fork 0
mirror of https://github.com/fankes/beszel.git synced 2025-10-20 02:09:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

RTL layout fixes

Browse Source
This commit is contained in:
Henry Dollman
2024-10-31 19:34:10 -04:00
parent f65d19ad84
commit 7e27fee006
10 changed files with 31 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
beszel/site/src/components/charts/area-chart.tsx
View File

@@ -84,6 +84,8 @@ export default memo(function AreaChartDefault({
<AreaChart accessibilityLayer data={chartData.systemStats} margin={chartMargin}>
<CartesianGrid vertical={false} />
<YAxis
direction="ltr"
orientation={chartData.orientation}
className="tracking-tighter"
width={yAxisWidth}
tickFormatter={(value) => {

6
beszel/site/src/components/charts/container-chart.tsx
View File

@@ -101,10 +101,10 @@ export default memo(function ContainerChart({
return (
<span className="flex">
{decimalString(received)} MB/s
<span className="opacity-70 ml-0.5"> rx </span>
<span className="opacity-70 ms-0.5"> rx </span>
<Separator orientation="vertical" className="h-3 mx-1.5 bg-primary/40" />
{decimalString(sent)} MB/s
<span className="opacity-70 ml-0.5"> tx</span>
<span className="opacity-70 ms-0.5"> tx</span>
</span>
)
} catch (e) {
@@ -145,6 +145,8 @@ export default memo(function ContainerChart({
>
<CartesianGrid vertical={false} />
<YAxis
direction="ltr"
orientation={chartData.orientation}
className="tracking-tighter"
width={yAxisWidth}
tickFormatter={tickFormatter}

2
beszel/site/src/components/charts/disk-chart.tsx
View File

@@ -40,6 +40,8 @@ export default memo(function DiskChart({
<AreaChart accessibilityLayer data={chartData.systemStats} margin={chartMargin}>
<CartesianGrid vertical={false} />
<YAxis
direction="ltr"
orientation={chartData.orientation}
className="tracking-tighter"
width={yAxisWidth}
domain={[0, diskSize]}

2
beszel/site/src/components/charts/mem-chart.tsx
View File

@@ -30,6 +30,8 @@ export default memo(function MemChart({ chartData }: { chartData: ChartData }) {
<CartesianGrid vertical={false} />
{totalMem && (
<YAxis
direction="ltr"
orientation={chartData.orientation}
// use "ticks" instead of domain / tickcount if need more control
domain={[0, totalMem]}
tickCount={9}

2
beszel/site/src/components/charts/swap-chart.tsx
View File

@@ -31,6 +31,8 @@ export default memo(function SwapChart({ chartData }: { chartData: ChartData })
<AreaChart accessibilityLayer data={chartData.systemStats} margin={chartMargin}>
<CartesianGrid vertical={false} />
<YAxis
direction="ltr"
orientation={chartData.orientation}
className="tracking-tighter"
domain={[0, () => toFixedWithoutTrailingZeros(chartData.systemStats.at(-1)?.stats.s ?? 0.04, 2)]}
width={yAxisWidth}

2
beszel/site/src/components/charts/temperature-chart.tsx
View File

@@ -64,6 +64,8 @@ export default memo(function TemperatureChart({ chartData }: { chartData: ChartD
<LineChart accessibilityLayer data={newChartData.data} margin={chartMargin}>
<CartesianGrid vertical={false} />
<YAxis
direction="ltr"
orientation={chartData.orientation}
className="tracking-tighter"
domain={[0, "auto"]}
width={yAxisWidth}

18
beszel/site/src/components/routes/system.tsx
View File

@@ -85,8 +85,7 @@ async function getStats<T>(collection: string, system: SystemRecord, chartTime:
}
export default function SystemDetail({ name }: { name: string }) {
const { t } = useTranslation()
const { t, i18n } = useTranslation()
const systems = useStore($systems)
const chartTime = useStore($chartTime)
/** Max CPU toggle value */
@@ -158,9 +157,10 @@ export default function SystemDetail({ name }: { name: string }) {
systemStats,
containerData,
chartTime,
orientation: i18n.dir() == "rtl" ? "right" : "left",
...getTimeData(chartTime, lastCreated),
}
}, [systemStats, containerData])
}, [systemStats, containerData, t])
// get stats
useEffect(() => {
@@ -339,7 +339,7 @@ export default function SystemDetail({ name }: { name: string }) {
})}
</div>
</div>
<div className="lg:ml-auto flex items-center gap-2 max-sm:-mb-1">
<div className="lg:ms-auto flex items-center gap-2 max-sm:-mb-1">
<ChartTimeSelect className="w-full lg:w-40" />
<TooltipProvider delayDuration={100}>
<Tooltip>
@@ -542,7 +542,7 @@ function ContainerFilterBar() {
return (
<>
<Input placeholder={t("filter")} className="pl-4 pr-8" value={containerFilter} onChange={handleChange} />
<Input placeholder={t("filter")} className="ps-4 pe-8" value={containerFilter} onChange={handleChange} />
{containerFilter && (
<Button
type="button"
@@ -567,8 +567,8 @@ function SelectAvgMax({ store }: { store: [boolean, React.Dispatch<React.SetStat
return (
<Select value={max ? "max" : "avg"} onValueChange={(e) => setMax(e === "max")}>
<SelectTrigger className="relative pl-10 pr-5">
<Icon className="h-4 w-4 absolute left-4 top-1/2 -translate-y-1/2 opacity-85" />
<SelectTrigger className="relative ps-10 pe-5">
<Icon className="h-4 w-4 absolute start-4 top-1/2 -translate-y-1/2 opacity-85" />
<SelectValue />
</SelectTrigger>
<SelectContent>
@@ -606,9 +606,9 @@ function ChartCard({
<CardHeader className="pb-5 pt-4 relative space-y-1 max-sm:py-3 max-sm:px-4">
<CardTitle className="text-xl sm:text-2xl">{title}</CardTitle>
<CardDescription>{description}</CardDescription>
{cornerEl && <div className="relative py-1 block sm:w-44 sm:absolute sm:top-2.5 sm:right-3.5">{cornerEl}</div>}
{cornerEl && <div className="relative py-1 block sm:w-44 sm:absolute sm:top-2.5 sm:end-3.5">{cornerEl}</div>}
</CardHeader>
<div className="pl-0 w-[calc(100%-1.6em)] h-52 relative">
<div className="ps-0 w-[calc(100%-1.6em)] h-52 relative">
{<Spinner msg={empty ? t("monitor.waiting_for") : undefined} />}
{isIntersecting && children}
</div>

12
beszel/site/src/components/systems-table/systems-table.tsx
View File

@@ -80,12 +80,12 @@ function sortableHeader(column: Column<SystemRecord, unknown>, name: string, Ico
return (
<Button
variant="ghost"
className="h-9 px-3 rtl:ml-auto flex"
className="h-9 px-3 flex"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
<Icon className="me-2 h-4 w-4" />
{name}
{!hideSortIcon && <ArrowUpDownIcon className="ml-2 h-4 w-4" />}
{!hideSortIcon && <ArrowUpDownIcon className="ms-2 h-4 w-4" />}
</Button>
)
}
@@ -218,24 +218,24 @@ export default function SystemsTable({ filter }: { filter?: string }) {
>
{status === "paused" ? (
<>
<PlayCircleIcon className="mr-2.5 h-4 w-4" />
<PlayCircleIcon className="me-2.5 h-4 w-4" />
{t("systems_table.resume")}
</>
) : (
<>
<PauseCircleIcon className="mr-2.5 h-4 w-4" />
<PauseCircleIcon className="me-2.5 h-4 w-4" />
{t("systems_table.pause")}
</>
)}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => copyToClipboard(host)}>
<CopyIcon className="mr-2.5 h-4 w-4" />
<CopyIcon className="me-2.5 h-4 w-4" />
{t("systems_table.copy_host")}
</DropdownMenuItem>
<DropdownMenuSeparator className={cn(isReadOnlyUser() && "hidden")} />
<AlertDialogTrigger asChild>
<DropdownMenuItem className={cn(isReadOnlyUser() && "hidden")}>
<Trash2Icon className="mr-2.5 h-4 w-4" />
<Trash2Icon className="me-2.5 h-4 w-4" />
{t("systems_table.delete")}
</DropdownMenuItem>
</AlertDialogTrigger>

2
beszel/site/src/lib/languages.json
View File

@@ -17,7 +17,7 @@
{
"lang": "es",
"label": "Español",
"e": "🇪🇸"
"e": "🇲🇽"
},
{
"lang": "fr",

1
beszel/site/src/types.d.ts vendored
View File

@@ -161,6 +161,7 @@ type ChartDataContainer = {
export interface ChartData {
systemStats: SystemStatsRecord[]
containerData: ChartDataContainer[]
orientation: "right" | "left"
ticks: number[]
domain: number[]
chartTime: ChartTimes