refactor: update name

This commit is contained in:
Mauricio Siu
2025-02-02 19:49:30 -06:00
parent d1aaeb9a7b
commit 51851567db
3 changed files with 97 additions and 87 deletions

View File

@@ -131,11 +131,12 @@ export const ContainerPaidMonitoring = ({ appName, baseUrl, token }: Props) => {
return ( return (
<> <>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between flex-wrap gap-2">
<h2 className="text-2xl font-bold tracking-tight"> <h2 className="text-2xl font-bold tracking-tight">
Container Monitoring Container Monitoring
</h2> </h2>
<div className="flex items-center gap-2"> <div className="flex items-center gap-4 flex-wrap">
<div>
<span className="text-sm text-muted-foreground">Data points:</span> <span className="text-sm text-muted-foreground">Data points:</span>
<Select <Select
value={dataPoints} value={dataPoints}
@@ -154,6 +155,9 @@ export const ContainerPaidMonitoring = ({ appName, baseUrl, token }: Props) => {
))} ))}
</SelectContent> </SelectContent>
</Select> </Select>
</div>
<div>
<span className="text-sm text-muted-foreground"> <span className="text-sm text-muted-foreground">
Refresh interval: Refresh interval:
</span> </span>
@@ -176,9 +180,10 @@ export const ContainerPaidMonitoring = ({ appName, baseUrl, token }: Props) => {
</Select> </Select>
</div> </div>
</div> </div>
</div>
{/* Stats Cards */} {/* Stats Cards */}
<div className="grid gap-4 md:grid-cols-4"> <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
<Card className="p-6 bg-transparent"> <Card className="p-6 bg-transparent">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Cpu className="h-4 w-4 text-muted-foreground" /> <Cpu className="h-4 w-4 text-muted-foreground" />
@@ -236,13 +241,13 @@ export const ContainerPaidMonitoring = ({ appName, baseUrl, token }: Props) => {
</div> </div>
<div> <div>
<h4 className="text-sm font-medium text-muted-foreground">Name</h4> <h4 className="text-sm font-medium text-muted-foreground">Name</h4>
<p className="mt-1">{metrics.Name}</p> <p className="mt-1 truncate">{metrics.Name}</p>
</div> </div>
</div> </div>
</Card> </Card>
{/* Charts Grid */} {/* Charts Grid */}
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-2"> <div className="grid gap-4 grid-cols-1 md:grid-cols-1 xl:grid-cols-2">
<ContainerCPUChart data={historicalData} /> <ContainerCPUChart data={historicalData} />
<ContainerMemoryChart data={historicalData} /> <ContainerMemoryChart data={historicalData} />
<ContainerBlockChart data={historicalData} /> <ContainerBlockChart data={historicalData} />

View File

@@ -151,10 +151,11 @@ export const ShowPaidMonitoring = ({
} }
return ( return (
<div className="space-y-4 pt-5 pb-10 w-full px-4"> <div className="space-y-4 pt-5 pb-10 w-full md:px-4">
<div className="flex justify-between items-center"> <div className="flex items-center justify-between flex-wrap gap-2">
<h2 className="text-2xl font-bold tracking-tight">System Monitoring</h2> <h2 className="text-2xl font-bold tracking-tight">System Monitoring</h2>
<div className="flex items-center gap-2"> <div className="flex items-center gap-4 flex-wrap">
<div>
<span className="text-sm text-muted-foreground">Data points:</span> <span className="text-sm text-muted-foreground">Data points:</span>
<Select <Select
value={dataPoints} value={dataPoints}
@@ -173,6 +174,9 @@ export const ShowPaidMonitoring = ({
))} ))}
</SelectContent> </SelectContent>
</Select> </Select>
</div>
<div>
<span className="text-sm text-muted-foreground"> <span className="text-sm text-muted-foreground">
Refresh interval: Refresh interval:
</span> </span>
@@ -195,9 +199,10 @@ export const ShowPaidMonitoring = ({
</Select> </Select>
</div> </div>
</div> </div>
</div>
{/* Stats Cards */} {/* Stats Cards */}
<div className="grid gap-4 md:grid-cols-4"> <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
<div className="rounded-lg border text-card-foreground shadow-sm p-6"> <div className="rounded-lg border text-card-foreground shadow-sm p-6">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Clock className="h-4 w-4 text-muted-foreground" /> <Clock className="h-4 w-4 text-muted-foreground" />
@@ -260,7 +265,7 @@ export const ShowPaidMonitoring = ({
</div> </div>
{/* Charts Grid */} {/* Charts Grid */}
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-2"> <div className="grid gap-4 grid-cols-1 md:grid-cols-1 xl:grid-cols-2">
<CPUChart data={historicalData} /> <CPUChart data={historicalData} />
<MemoryChart data={historicalData} /> <MemoryChart data={historicalData} />
<DiskChart data={metrics} /> <DiskChart data={metrics} />

View File

@@ -1,11 +1,11 @@
import { findServerById } from "@dokploy/server/services/server"; import { findServerById } from "@dokploy/server/services/server";
import type { ContainerCreateOptions } from "dockerode"; import type { ContainerCreateOptions } from "dockerode";
import { IS_CLOUD } from "../constants";
import { findAdminById } from "../services/admin"; import { findAdminById } from "../services/admin";
import { getDokployImageTag } from "../services/settings"; import { getDokployImageTag } from "../services/settings";
import { pullImage, pullRemoteImage } from "../utils/docker/utils"; import { pullImage, pullRemoteImage } from "../utils/docker/utils";
import { execAsync, execAsyncRemote } from "../utils/process/execAsync"; import { execAsync, execAsyncRemote } from "../utils/process/execAsync";
import { getRemoteDocker } from "../utils/servers/remote-docker"; import { getRemoteDocker } from "../utils/servers/remote-docker";
import { IS_CLOUD } from "../constants";
export const setupMonitoring = async (serverId: string) => { export const setupMonitoring = async (serverId: string) => {
const server = await findServerById(serverId); const server = await findServerById(serverId);