import { Head, Link, usePage } from '@inertiajs/react'; import { Server } from '@/types/server'; import ServerLayout from '@/layouts/server/layout'; import HeaderContainer from '@/components/header-container'; import Heading from '@/components/heading'; import { Button } from '@/components/ui/button'; import { BookOpenIcon, TriangleAlertIcon } from 'lucide-react'; import Container from '@/components/container'; import MetricsCards from '@/pages/monitoring/components/metrics-cards'; import Filter from '@/pages/monitoring/components/filter'; import { useState } from 'react'; import { Metric, MetricsFilter } from '@/types/metric'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { kbToGb, mbToGb } from '@/lib/utils'; import Actions from '@/pages/monitoring/components/actions'; import { Alert, AlertDescription } from '@/components/ui/alert'; export default function Monitoring() { const page = usePage<{ server: Server; lastMetric?: Metric; hasMonitoringService: boolean; }>(); const [filter, setFilter] = useState(); return ( {!page.props.hasMonitoringService && (

To monitor your server, you need to first install a{' '} monitoring service .

)}
Memory details Memory details
{page.props.lastMetric ? kbToGb(page.props.lastMetric.memory_used) + ' GB' : 'N/A'} Used
{page.props.lastMetric ? kbToGb(page.props.lastMetric.memory_free) + ' GB' : 'N/A'} Free
{page.props.lastMetric ? kbToGb(page.props.lastMetric.memory_total) + ' GB' : 'N/A'} Total
Disk details Disk details
{page.props.lastMetric ? mbToGb(page.props.lastMetric.disk_used) + ' GB' : 'N/A'} Used
{page.props.lastMetric ? mbToGb(page.props.lastMetric.disk_free) + ' GB' : 'N/A'} Free
{page.props.lastMetric ? mbToGb(page.props.lastMetric.disk_total) + ' GB' : 'N/A'} Total
); }