Dokploy/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy synced 2025-06-26 18:27:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(dashboard): enhance monitoring features with alert and toggle functionality

Browse Source 
- Added AlertBlock component to display monitoring plan information.
- Introduced Switch component for toggling monitoring settings in both dashboard and service views.
- Updated state management for monitoring toggle to improve user experience.
- Cleaned up commented code for better readability and maintainability.
This commit is contained in:
Mauricio Siu
2025-03-23 20:07:29 -06:00
parent 1acd330462
commit 5810c94f4b
2 changed files with 30 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
apps/dokploy/pages/dashboard/monitoring.tsx
View File

@@ -1,7 +1,10 @@
import { ContainerFreeMonitoring } from "@/components/dashboard/monitoring/free/container/show-free-container-monitoring"; import { ContainerFreeMonitoring } from "@/components/dashboard/monitoring/free/container/show-free-container-monitoring";
import { ShowPaidMonitoring } from "@/components/dashboard/monitoring/paid/servers/show-paid-monitoring"; import { ShowPaidMonitoring } from "@/components/dashboard/monitoring/paid/servers/show-paid-monitoring";
import { DashboardLayout } from "@/components/layouts/dashboard-layout"; import { DashboardLayout } from "@/components/layouts/dashboard-layout";
import { AlertBlock } from "@/components/shared/alert-block";
import { Card } from "@/components/ui/card"; import { Card } from "@/components/ui/card";
import { Switch } from "@/components/ui/switch";
import { Label } from "@/components/ui/label";
import { useLocalStorage } from "@/hooks/useLocalStorage"; import { useLocalStorage } from "@/hooks/useLocalStorage";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import { IS_CLOUD } from "@dokploy/server/constants"; import { IS_CLOUD } from "@dokploy/server/constants";
@@ -23,7 +26,7 @@ const Dashboard = () => {
const { data: monitoring, isLoading } = api.user.getMetricsToken.useQuery(); const { data: monitoring, isLoading } = api.user.getMetricsToken.useQuery();
return ( return (
<div className="space-y-4 pb-10"> <div className="space-y-4 pb-10">
{/* <AlertBlock> <AlertBlock>
You are watching the <strong>Free</strong> plan.{" "} You are watching the <strong>Free</strong> plan.{" "}
<a <a
href="https://dokploy.com#pricing" href="https://dokploy.com#pricing"
@@ -34,7 +37,7 @@ const Dashboard = () => {
Upgrade Upgrade
</a>{" "} </a>{" "}
to get more features. to get more features.
</AlertBlock> */} </AlertBlock>
{isLoading ? ( {isLoading ? (
<Card className="bg-sidebar p-2.5 rounded-xl mx-auto items-center"> <Card className="bg-sidebar p-2.5 rounded-xl mx-auto items-center">
<div className="rounded-xl bg-background flex shadow-md px-4 min-h-[50vh] justify-center items-center text-muted-foreground"> <div className="rounded-xl bg-background flex shadow-md px-4 min-h-[50vh] justify-center items-center text-muted-foreground">
@@ -44,15 +47,15 @@ const Dashboard = () => {
</Card> </Card>
) : ( ) : (
<> <>
{/* {monitoring?.enabledFeatures && ( {monitoring?.enabledFeatures && (
<div className="flex flex-row border w-fit p-4 rounded-lg items-center gap-2"> <div className="flex flex-row border w-fit p-4 rounded-lg items-center gap-2">
<Label className="text-muted-foreground">Change Monitoring</Label> <Label className="text-muted-foreground">Change Monitoring</Label>
<Switch <Switch
checked={toggleMonitoring} checked={toggleMonitoring}
onCheckedChange={setToggleMonitoring} onCheckedChange={_setToggleMonitoring}
/> />
</div> </div>
)} */} )}
{toggleMonitoring ? ( {toggleMonitoring ? (
<Card className="bg-sidebar p-2.5 rounded-xl mx-auto"> <Card className="bg-sidebar p-2.5 rounded-xl mx-auto">
<div className="rounded-xl bg-background shadow-md"> <div className="rounded-xl bg-background shadow-md">

44
apps/dokploy/pages/dashboard/project/[projectId]/services/application/[applicationId].tsx
View File

@@ -28,6 +28,7 @@ import {
CardTitle, CardTitle,
} from "@/components/ui/card"; } from "@/components/ui/card";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { import {
Tooltip, Tooltip,
@@ -65,7 +66,7 @@ type TabState =
const Service = ( const Service = (
props: InferGetServerSidePropsType<typeof getServerSideProps>, props: InferGetServerSidePropsType<typeof getServerSideProps>,
) => { ) => {
const [_toggleMonitoring, _setToggleMonitoring] = useState(false); const [_toggleMonitoring, _setToggleMonitoring] = useState(true);
const { applicationId, activeTab } = props; const { applicationId, activeTab } = props;
const router = useRouter(); const router = useRouter();
const { projectId } = router.query; const { projectId } = router.query;
@@ -86,6 +87,7 @@ const Service = (
const { data: isCloud } = api.settings.isCloud.useQuery(); const { data: isCloud } = api.settings.isCloud.useQuery();
const { data: auth } = api.user.get.useQuery(); const { data: auth } = api.user.get.useQuery();
const { data: monitoring } = api.user.getMetricsToken.useQuery();
return ( return (
<div className="pb-10"> <div className="pb-10">
@@ -265,21 +267,19 @@ const Service = (
/> />
) : ( ) : (
<> <>
{/* {monitoring?.enabledFeatures && {monitoring?.enabledFeatures && (
isCloud && <div className="flex flex-row border w-fit p-4 rounded-lg items-center gap-2">
data?.serverId && ( <Label className="text-muted-foreground">
<div className="flex flex-row border w-fit p-4 rounded-lg items-center gap-2"> Change Monitoring
<Label className="text-muted-foreground"> </Label>
Change Monitoring <Switch
</Label> checked={_toggleMonitoring}
<Switch onCheckedChange={_setToggleMonitoring}
checked={toggleMonitoring} />
onCheckedChange={setToggleMonitoring} </div>
/> )}
</div>
)} */}
{/* {toggleMonitoring ? ( {_toggleMonitoring ? (
<ContainerPaidMonitoring <ContainerPaidMonitoring
appName={data?.appName || ""} appName={data?.appName || ""}
baseUrl={`http://${monitoring?.serverIp}:${monitoring?.metricsConfig?.server?.port}`} baseUrl={`http://${monitoring?.serverIp}:${monitoring?.metricsConfig?.server?.port}`}
@@ -287,13 +287,13 @@ const Service = (
monitoring?.metricsConfig?.server?.token || "" monitoring?.metricsConfig?.server?.token || ""
} }
/> />
) : ( */} ) : (
<div> <div>
<ContainerFreeMonitoring <ContainerFreeMonitoring
appName={data?.appName || ""} appName={data?.appName || ""}
/> />
</div> </div>
{/* )} */} )}
</> </>
)} )}
</div> </div>