wibu/monitoring-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

amalia/14-apr-26 #8

Merged
amaliadwiy merged 3 commits from amalia/14-apr-26 into main 2026-04-14 17:23:40 +08:00
Conversation 0 Commits 3 Files Changed 8 +1030 -207
7 changed files with 1030 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f38081b1eb - Show all commits

42
src/app.ts
View File

@@ -154,18 +154,38 @@ export function createApp() {
})
// ─── Monitoring API ────────────────────────────────
.get('/api/dashboard/stats', () => ({
totalApps: 3,
newErrors: 185,
activeUsers: '24.5k',
trends: { totalApps: 1, newErrors: 12, activeUsers: 5.2 }
}))
.get('/api/dashboard/stats', async () => {
const newErrors = await prisma.bug.count({ where: { status: 'OPEN' } })
const users = await prisma.user.count()
return {
totalApps: 1,
newErrors: newErrors,
activeUsers: users,
trends: { totalApps: 0, newErrors: 12, activeUsers: 5.2 }
}
})
.get('/api/apps', () => [
{ id: 'desa-plus', name: 'Desa+', status: 'active', users: 12450, errors: 12, version: '2.4.1' },
// { id: 'e-commerce', name: 'E-Commerce', status: 'warning', users: 8900, errors: 45, version: '1.8.0' },
// { id: 'fitness-app', name: 'Fitness App', status: 'error', users: 3200, errors: 128, version: '0.9.5' },
])
.get('/api/dashboard/recent-errors', async () => {
const bugs = await prisma.bug.findMany({
take: 5,
orderBy: { createdAt: 'desc' }
})
return bugs.map(b => ({
id: b.id,
app: b.app,
message: b.description,
version: b.affectedVersion,
time: b.createdAt.toISOString(),
severity: b.status
}))
})
.get('/api/apps', async () => {
const desaPlusErrors = await prisma.bug.count({ where: { app: { in: ['desa-plus', 'desa_plus'] }, status: 'OPEN' } })
return [
{ id: 'desa-plus', name: 'Desa+', status: 'active', users: 12450, errors: desaPlusErrors, version: '2.4.1' },
]
})
.get('/api/apps/:appId', ({ params: { appId } }) => {
const apps = {

52
src/frontend/routes/dashboard.tsx
View File

@@ -36,12 +36,6 @@ export const Route = createFileRoute('/dashboard')({
component: DashboardPage,
})
const recentErrors = [
{ id: 1, app: 'Desa+', message: 'NullPointerException at village_sync.dart:45', version: '2.4.1', time: '2 mins ago', severity: 'critical' },
{ id: 2, app: 'E-Commerce', message: 'Failed to load checkout session', version: '1.8.0', time: '15 mins ago', severity: 'high' },
{ id: 3, app: 'Fitness App', message: 'SocketException: Connection timed out', version: '0.9.5', time: '1 hour ago', severity: 'medium' },
]
function DashboardPage() {
const { data: sessionData } = useSession()
const user = sessionData?.user
@@ -56,6 +50,20 @@ function DashboardPage() {
queryFn: () => fetch('/api/apps').then((r) => r.json()),
})
const { data: recentErrors = [], isLoading: recentErrorsLoading } = useQuery({
queryKey: ['dashboard', 'recent-errors'],
queryFn: () => fetch('/api/dashboard/recent-errors').then((r) => r.json()),
})
const formatTimeAgo = (dateStr: string) => {
const diff = new Date().getTime() - new Date(dateStr).getTime()
const minutes = Math.floor(diff / 60000)
if (minutes < 60) return `${minutes || 1} mins ago`
const hours = Math.floor(minutes / 60)
if (hours < 24) return `${hours} hours ago`
return `${Math.floor(hours / 24)} days ago`
}
return (
<DashboardLayout>
<Container size="xl" py="lg">
@@ -86,21 +94,21 @@ function DashboardPage() {
value={stats?.totalApps || 0}
icon={TbApps}
color="brand-blue"
trend={{ value: stats?.trends?.totalApps.toString() || '0', positive: true }}
// trend={{ value: stats?.trends?.totalApps.toString() || '0', positive: true }}
/>
<StatsCard
title="New Errors"
value={stats?.newErrors || 0}
icon={TbMessageReport}
color="brand-purple"
trend={{ value: stats?.trends?.newErrors.toString() || '0', positive: false }}
// trend={{ value: stats?.trends?.newErrors.toString() || '0', positive: false }}
/>
<StatsCard
title="Active Users"
title="Users"
value={stats?.activeUsers || 0}
icon={TbUsers}
color="teal"
trend={{ value: stats?.trends?.activeUsers.toString() || '0', positive: true }}
// trend={{ value: stats?.trends?.activeUsers.toString() || '0', positive: true }}
/>
</SimpleGrid>
)}
@@ -124,7 +132,7 @@ function DashboardPage() {
<Group justify="space-between" mt="md">
<Title order={3}>Recent Error Reports</Title>
<Button variant="subtle" color="brand-blue" rightSection={<TbChevronRight size={16} />}>
<Button variant="subtle" color="brand-blue" rightSection={<TbChevronRight size={16} />} component={Link} to="/bug-reports">
View All Errors
</Button>
</Group>
@@ -141,23 +149,35 @@ function DashboardPage() {
</Table.Tr>
</Table.Thead>
<Table.Tbody>
{recentErrors.map((error) => (
{recentErrorsLoading ? (
<Table.Tr>
<Table.Td colSpan={5} align="center" py="xl">
<Loader size="sm" type="dots" />
</Table.Td>
</Table.Tr>
) : recentErrors.length === 0 ? (
<Table.Tr>
<Table.Td colSpan={5} align="center" py="xl">
<Text c="dimmed" size="sm">No recent errors found.</Text>
</Table.Td>
</Table.Tr>
) : recentErrors.map((error: any) => (
<Table.Tr key={error.id}>
<Table.Td>
<Text fw={600} size="sm">{error.app}</Text>
<Text fw={600} size="sm" style={{ textTransform: 'uppercase' }}>{error.app}</Text>
</Table.Td>
<Table.Td>
<Text size="sm" c="dimmed">{error.message}</Text>
<Text size="sm" c="dimmed" lineClamp={1}>{error.message}</Text>
</Table.Td>
<Table.Td>
<Badge variant="light" color="gray">v{error.version}</Badge>
</Table.Td>
<Table.Td>
<Text size="xs" c="dimmed">{error.time}</Text>
<Text size="xs" c="dimmed">{formatTimeAgo(error.time)}</Text>
</Table.Td>
<Table.Td>
<Badge
color={error.severity === 'critical' ? 'red' : error.severity === 'high' ? 'orange' : 'yellow'}
color={error.severity === 'OPEN' ? 'red' : error.severity === 'IN_PROGRESS' || error.severity === 'ON_HOLD' ? 'orange' : 'yellow'}
variant="dot"
>
{error.severity.toUpperCase()}